-
Notifications
You must be signed in to change notification settings - Fork 5
/
pswmeter.js
118 lines (98 loc) · 4.25 KB
/
pswmeter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
function passwordStrengthMeter(opts) {
// Add styles inside body
const customStyles = document.createElement('style')
document.body.prepend(customStyles)
customStyles.innerHTML = `
${opts.containerElement} {
height: ${opts.height || 4}px;
background-color: #eee;
position: relative;
overflow: hidden;
border-radius: ${opts.borderRadius.toString() || 2}px;
}
${opts.containerElement} .password-strength-meter-score {
height: inherit;
width: 0%;
transition: .3s ease-in-out;
background: ${opts.colorScore1 || '#ff7700'};
}
${opts.containerElement} .password-strength-meter-score.psms-25 {width: 25%; background: ${opts.colorScore1 || '#ff7700'};}
${opts.containerElement} .password-strength-meter-score.psms-50 {width: 50%; background: ${opts.colorScore2 || '#ffff00'};}
${opts.containerElement} .password-strength-meter-score.psms-75 {width: 75%; background: ${opts.colorScore3 || '#aeff00'};}
${opts.containerElement} .password-strength-meter-score.psms-100 {width: 100%; background: ${opts.colorScore4 || '#00ff00'};}`
// Container Element
const containerElement = document.getElementById(opts.containerElement.slice(1))
containerElement.classList.add('password-strength-meter')
// Score Bar
let scoreBar = document.createElement('div')
scoreBar.classList.add('password-strength-meter-score')
// Append score bar to container element
containerElement.appendChild(scoreBar)
// Password input
const passwordInput = document.getElementById(opts.passwordInput.slice(1))
let passwordInputValue = ''
passwordInput.addEventListener('keyup', function() {
passwordInputValue = this.value
checkPassword()
})
// Chosen Min Length
let pswMinLength = opts.pswMinLength || 8
// Score Message
let scoreMessage = opts.showMessage ? document.getElementById(opts.messageContainer.slice(1)) : null
let messagesList = opts.messagesList === undefined ? ['No data', 'Too simple', 'Simple', 'That\'s OK', 'Great password!'] : opts.messagesList
if (scoreMessage) { scoreMessage.textContent = messagesList[0] || 'No data'}
// Check Password Function
function checkPassword() {
let score = getScore()
updateScore(score)
}
// Get Score Function
function getScore() {
let score = 0
let regexLower = new RegExp('(?=.*[a-z])')
let regexUpper = new RegExp('(?=.*[A-Z])')
let regexDigits = new RegExp('(?=.*[0-9])')
// For length score print user selection or default value
let regexLength = new RegExp('(?=.{' + pswMinLength + ',})')
if (passwordInputValue.match(regexLower)) { ++score }
if (passwordInputValue.match(regexUpper)) { ++score }
if (passwordInputValue.match(regexDigits)) { ++score }
if (passwordInputValue.match(regexLength)) { ++score }
if (score === 0 && passwordInputValue.length > 0) { ++score }
return score
}
// Show Score Function
function updateScore(score) {
switch(score) {
case 1:
scoreBar.className = 'password-strength-meter-score psms-25'
if (scoreMessage) { scoreMessage.textContent = messagesList[1] || 'Too simple' }
containerElement.dispatchEvent(new Event('onScore1', { bubbles: true }))
break
case 2:
scoreBar.className = 'password-strength-meter-score psms-50'
if (scoreMessage) { scoreMessage.textContent = messagesList[2] || 'Simple' }
containerElement.dispatchEvent(new Event('onScore2', { bubbles: true }))
break
case 3:
scoreBar.className = 'password-strength-meter-score psms-75'
if (scoreMessage) { scoreMessage.textContent = messagesList[3] || 'That\'s OK' }
containerElement.dispatchEvent(new Event('onScore3', { bubbles: true }))
break
case 4:
scoreBar.className = 'password-strength-meter-score psms-100'
if (scoreMessage) { scoreMessage.textContent = messagesList[4] || 'Great password!' }
containerElement.dispatchEvent(new Event('onScore4', { bubbles: true }))
break
default:
scoreBar.className = 'password-strength-meter-score'
if (scoreMessage) { scoreMessage.textContent = messagesList[0] || 'No data' }
containerElement.dispatchEvent(new Event('onScore0', { bubbles: true }))
}
}
// Return anonymous object with properties
return {
containerElement,
getScore
}
}