@osimatic/helpers-js 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimatic/helpers-js",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/user.js

@@ -13,23 +13,73 @@ class Password {
 		return score;
 	}
 
-	static updatePasswordStrengthUI(div, password) {
-		const score = Password.getPasswordStrength(password);
+	static displayPasswordStrength(input) {
+		function update(input) {
+			input = $(input);
+			const password = input.val();
+			const div = input.closest('.form-group').find('.password_strength_content');
+			const score = Password.getPasswordStrength(password);
 
-		const strengthBar = div.find('.password_strength_bar');
-		const strengthText = div.find('.password_strength_text');
+			const strengthBar = div.find('.password_strength_bar');
+			const strengthText = div.find('.password_strength_text');
 
-		let width = (score / 6) * 100;
-		let color = 'bg-danger';
-		let text = 'Très faible';
+			const conditions = {
+				length: password.length >= 8,
+				uppercase: /[A-Z]/.test(password),
+				lowercase: /[a-z]/.test(password),
+				number: /[0-9]/.test(password),
+				special: /[^A-Za-z0-9]/.test(password),
+			};
 
-		if (score >= 2) { color = 'bg-warning'; text = 'Faible'; }
-		if (score >= 4) { color = 'bg-info'; text = 'Moyen'; }
-		if (score >= 5) { color = 'bg-success'; text = 'Fort'; }
+			// Mise à jour des conditions
+			div.find('.password_strength_conditions li').each(function () {
+				const cond = $(this).data('condition');
+				$(this).removeClass('text-success text-danger');
+				if (conditions[cond]) {
+					$(this).addClass('text-success');
+				} else {
+					$(this).addClass('text-danger');
+				}
+			});
 
-		strengthBar.className = `progress-bar ${color}`;
-		strengthBar.style.width = `${width}%`;
-		strengthText.textContent = text;
+			let width = (score / 6) * 100;
+			let color = 'danger';
+			let text = 'Très faible';
+
+			if (score >= 2) { color = 'danger'; text = 'Faible'; }
+			if (score >= 4) { color = 'warning'; text = 'Moyen'; }
+			if (score >= 5) { color = 'success'; text = 'Fort'; }
+
+			strengthBar.removeClass('bg-danger bg-warning bg-success').addClass('bg-'+color);
+			strengthText.removeClass('text-bg-danger text-bg-warning text-bg-success hide').addClass(password === '' ? 'hide' : 'text-bg-'+color);
+			strengthBar.width(width+'%');
+			strengthText.text(text);
+		}
+
+		const formGroup = input.closest('.form-group');
+		formGroup.find('.password_strength_content').remove();
+		formGroup.append(''
+			+'<div class="password_strength_content mt-1">'
+			+'	<div class="progress" style="height: 6px;">'
+			+'		<div class="password_strength_bar progress-bar" role="progressbar"></div>'
+			+'	</div>'
+			+'	<div class="d-flex justify-content-between align-items-start mt-2">'
+			+'		<ul class="password_strength_conditions mb-0 ps-0" style="list-style: none;">'
+			+'			<li data-condition="length">✔ Au moins 8 caractères</li>'
+			+'			<li data-condition="uppercase">✔ Une majuscule</li>'
+			+'			<li data-condition="lowercase">✔ Une minuscule</li>'
+			+'			<li data-condition="number">✔ Un chiffre</li>'
+			+'			<li data-condition="special">✔ Un caractère spécial</li>'
+			+'		</ul>'
+			+'		<div class="ms-3 text-end">'
+			+'			<span class="badge password_strength_text" style="font-size: 10pt; font-weight: normal">New</span>'
+			+'		</div>'
+			+'	</div>'
+			+'</div>'
+		);
+		input.change(() => update(input));
+		input.on('input', () => update(input));
+		update(input);
 	}
 }