https://auth.flowaccount.com/lib/pswmeter-master/pswmeter.js

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