adding password stregnt check

app-code/register/index.php

@@ -42,7 +42,11 @@ secure_session_start();
               <!-- Password -->
               <div class="mb-3">
                 <label for="password" class="form-label">Password</label>
-                <input type="password" class="form-control" id="password" placeholder="Enter your password" required>
+                <input type="password" class="form-control" id="password" placeholder="Enter your password" required oninput="updatePasswordStrength()">
+                <div id="passwordStrengthBar" class="progress mt-2" style="height: 6px; display:none;">
+                  <div id="passwordStrengthFill" class="progress-bar" role="progressbar" style="width: 0%"></div>
+                </div>
+                <small id="passwordStrengthText" class="form-text mt-1"></small>
               </div>
               <!-- Confirm Password -->
               <div class="mb-3">
@@ -158,6 +162,45 @@ secure_session_start();
       responseMessage.textContent = message; // Set the modal body message
       responseModal.show(); // Show the modal
     }
+
+    function updatePasswordStrength() {
+	const pw = document.getElementById('password').value;
+	const bar = document.getElementById('passwordStrengthBar');
+	const fill = document.getElementById('passwordStrengthFill');
+	const text = document.getElementById('passwordStrengthText');
+
+	if (pw.length === 0) {
+		bar.style.display = 'none';
+		text.textContent = '';
+		return;
+	}
+	bar.style.display = 'block';
+
+	let score = 0;
+	if (pw.length >= 8) score++;
+	if (pw.length >= 12) score++;
+	if (pw.length >= 16) score++;
+	if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score++;
+	if (/\d/.test(pw)) score++;
+	if (/[^a-zA-Z0-9]/.test(pw)) score++;
+
+	const levels = [
+		{ min: 0, label: 'Very weak', class: 'bg-danger', pct: 10 },
+		{ min: 1, label: 'Weak', class: 'bg-danger', pct: 25 },
+		{ min: 2, label: 'Fair', class: 'bg-warning', pct: 45 },
+		{ min: 3, label: 'Good', class: 'bg-info', pct: 65 },
+		{ min: 4, label: 'Strong', class: 'bg-primary', pct: 80 },
+		{ min: 5, label: 'Very strong', class: 'bg-success', pct: 100 },
+	];
+	let level = levels[0];
+	for (const l of levels) {
+		if (score >= l.min) level = l;
+	}
+	fill.className = 'progress-bar ' + level.class;
+	fill.style.width = level.pct + '%';
+	text.textContent = level.label + ' (' + pw.length + ' characters)';
+	text.className = 'form-text mt-1 text-' + (score >= 3 ? 'success' : score >= 2 ? 'warning' : 'danger');
+    }
 </script>
 </body>
 </html>