Update signup.html

signup.html

@@ -100,6 +100,11 @@
             text-align: left;
         }
 
+        /* Adjusted margin for password groups to fit feedback text */
+        .input-group.password-group {
+            margin-bottom: 5px; 
+        }
+
         .input-group i.field-icon {
             position: absolute;
             top: 50%;
@@ -134,7 +139,6 @@
         
         .input-group input:focus + i.field-icon { color: #c4b5fd; }
 
-        /* Error state styling */
         .input-group input.error {
             border: 1px solid #ef4444;
             box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
@@ -152,6 +156,53 @@
         }
         .toggle-password:hover { color: #fff; }
 
+        /* --- STRENGTH & MATCH INDICATORS --- */
+        
+        /* Container for feedback text/bars */
+        .feedback-container {
+            height: 20px; /* Fixed height to prevent jumping */
+            margin-bottom: 10px;
+            padding: 0 20px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        /* The background bar for strength */
+        .strength-bar-bg {
+            width: 100%;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            overflow: hidden;
+            display: none; /* Hidden by default */
+            position: relative;
+        }
+
+        /* The moving color fill */
+        .strength-bar-fill {
+            height: 100%;
+            width: 0%;
+            border-radius: 10px;
+            transition: width 0.3s ease, background-color 0.3s ease;
+        }
+
+        /* Text feedback styling */
+        .feedback-text {
+            font-size: 12px;
+            font-weight: 500;
+            opacity: 0;
+            transition: opacity 0.3s;
+            margin-left: 5px;
+        }
+        
+        /* Text Colors */
+        .text-weak { color: #ef4444; }
+        .text-medium { color: #f59e0b; }
+        .text-strong { color: #10b981; }
+        .text-match { color: #10b981; }
+        .text-mismatch { color: #ef4444; }
+
         /* --- BUTTON --- */
         .login-btn {
             width: 100%;
@@ -238,7 +289,6 @@
             75% { transform: translateX(8px); }
         }
 
-        /* Mobile Adjustments */
         @media (max-width: 480px) {
             .login-card { padding: 30px 20px; }
             .login-card h2 { font-size: 26px; }
@@ -264,18 +314,29 @@
                     <i class="fa-solid fa-at field-icon"></i>
                 </div>
 
-                <div class="input-group">
+                <div class="input-group password-group">
                     <input type="password" id="password" placeholder="Password" required>
                     <i class="fa-solid fa-lock field-icon"></i>
                     <i class="fa-regular fa-eye toggle-password" data-target="password"></i>
                 </div>
+                
+                <div class="feedback-container">
+                    <div class="strength-bar-bg" id="strengthBarBg">
+                        <div class="strength-bar-fill" id="strengthFill"></div>
+                    </div>
+                    <span id="strengthText" class="feedback-text"></span>
+                </div>
 
-                <div class="input-group">
+                <div class="input-group password-group">
                     <input type="password" id="confirm_password" placeholder="Confirm Password" required>
                     <i class="fa-solid fa-lock field-icon"></i>
                     <i class="fa-regular fa-eye toggle-password" data-target="confirm_password"></i>
                 </div>
 
+                <div class="feedback-container">
+                    <span id="matchText" class="feedback-text"></span>
+                </div>
+
                 <button type="submit" class="login-btn" id="signupBtn">Sign Up</button>
             </form>
 
@@ -318,9 +379,8 @@
             });
         }
 
-        // 2. PASSWORD TOGGLE (For both fields)
+        // 2. PASSWORD TOGGLE
         const toggleBtns = document.querySelectorAll('.toggle-password');
-
         toggleBtns.forEach(btn => {
             btn.addEventListener('click', () => {
                 const targetId = btn.getAttribute('data-target');
@@ -333,41 +393,113 @@
             });
         });
 
-        // 3. FORM VALIDATION & SUBMIT
+        // 3. STRENGTH CHECKER & MATCH CHECKER
+        const passwordInput = document.getElementById('password');
+        const confirmInput = document.getElementById('confirm_password');
+        
+        // Strength Elements
+        const strengthBarBg = document.getElementById('strengthBarBg');
+        const strengthFill = document.getElementById('strengthFill');
+        const strengthText = document.getElementById('strengthText');
+        
+        // Match Elements
+        const matchText = document.getElementById('matchText');
+
+        // Logic to check strength
+        passwordInput.addEventListener('input', () => {
+            const val = passwordInput.value;
+            
+            // Show bar if text exists
+            if(val.length > 0) {
+                strengthBarBg.style.display = 'block';
+                strengthText.style.opacity = '1';
+            } else {
+                strengthBarBg.style.display = 'none';
+                strengthText.style.opacity = '0';
+                return;
+            }
+
+            // Calculate Score
+            let score = 0;
+            if(val.length >= 8) score++; // Length check
+            if(/[0-9]/.test(val)) score++; // Number check
+            if(/[!@#$%^&*]/.test(val)) score++; // Symbol check
+            if(/[A-Z]/.test(val)) score++; // Uppercase check
+
+            // Update UI based on score
+            if(val.length < 6) {
+                strengthFill.style.width = '20%';
+                strengthFill.style.backgroundColor = '#ef4444'; // Red
+                strengthText.innerText = 'Too Short';
+                strengthText.className = 'feedback-text text-weak';
+            } else if(score < 2) {
+                strengthFill.style.width = '40%';
+                strengthFill.style.backgroundColor = '#ef4444'; // Red
+                strengthText.innerText = 'Weak';
+                strengthText.className = 'feedback-text text-weak';
+            } else if(score === 2) {
+                strengthFill.style.width = '70%';
+                strengthFill.style.backgroundColor = '#f59e0b'; // Orange/Yellow
+                strengthText.innerText = 'Medium';
+                strengthText.className = 'feedback-text text-medium';
+            } else {
+                strengthFill.style.width = '100%';
+                strengthFill.style.backgroundColor = '#10b981'; // Green
+                strengthText.innerText = 'Strong';
+                strengthText.className = 'feedback-text text-strong';
+            }
+            
+            // Re-check match in case user changed main password
+            checkMatch(); 
+        });
+
+        // Logic to check match
+        confirmInput.addEventListener('input', checkMatch);
+
+        function checkMatch() {
+            const pass = passwordInput.value;
+            const conf = confirmInput.value;
+
+            if (conf.length === 0) {
+                matchText.style.opacity = '0';
+                return;
+            }
+            
+            matchText.style.opacity = '1';
+
+            if (pass === conf) {
+                matchText.innerHTML = '<i class="fa-solid fa-check"></i> Passwords match';
+                matchText.className = 'feedback-text text-match';
+                confirmInput.classList.remove('error');
+            } else {
+                matchText.innerHTML = '<i class="fa-solid fa-xmark"></i> Do not match';
+                matchText.className = 'feedback-text text-mismatch';
+            }
+        }
+
+        // 4. FORM SUBMIT
         const form = document.getElementById('signupForm');
         const signupBtn = document.getElementById('signupBtn');
-        const passInput = document.getElementById('password');
-        const confirmInput = document.getElementById('confirm_password');
 
         form.addEventListener('submit', (e) => {
             e.preventDefault();
 
-            // Clear previous error styles
-            passInput.classList.remove('error');
+            // Clear previous styles
+            passwordInput.classList.remove('error');
             confirmInput.classList.remove('error');
 
-            const password = passInput.value;
+            const password = passwordInput.value;
             const confirm = confirmInput.value;
 
-            // Check if passwords match
+            // Final Validation Check
             if (password !== confirm) {
-                // Shake animation
                 card.classList.add('shake');
-                
-                // Highlight inputs red
-                passInput.classList.add('error');
+                passwordInput.classList.add('error');
                 confirmInput.classList.add('error');
                 
-                // Change button text temporarily
-                const originalText = signupBtn.innerText;
-                signupBtn.innerText = "Passwords don't match";
-                signupBtn.style.background = "linear-gradient(135deg, #ef4444, #b91c1c)";
-
                 setTimeout(() => {
                     card.classList.remove('shake');
-                    signupBtn.innerText = originalText;
-                    signupBtn.style.background = ""; // Reset to CSS default
-                }, 1500);
+                }, 1000);
                 return;
             }