add strong validation for Password strength (minimum length, complexity requirements, etc.)
b4b32f5 verified | document.getElementById('loginForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const email = document.getElementById('email').value.trim(); | |
| const password = document.getElementById('password').value.trim(); | |
| const rememberMe = document.getElementById('remember-me').checked; | |
| const captchaResponse = grecaptcha.getResponse(); | |
| // Email validation | |
| const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; | |
| if (!emailRegex.test(email)) { | |
| alert('Please enter a valid email address'); | |
| return; | |
| } | |
| // Password validation | |
| const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; | |
| if (!passwordRegex.test(password)) { | |
| alert('Password must contain:\n- Minimum 8 characters\n- At least one uppercase letter\n- One lowercase letter\n- One number\n- One special character (@$!%*?&)'); | |
| return; | |
| } | |
| // CAPTCHA validation | |
| if (!captchaResponse) { | |
| alert('Please complete the CAPTCHA'); | |
| return; | |
| } | |
| // Sanitize inputs | |
| const sanitizedEmail = DOMPurify.sanitize(email); | |
| const sanitizedPassword = DOMPurify.sanitize(password); | |
| // Log sanitized values | |
| console.log('Login attempt with:', { | |
| email: sanitizedEmail, | |
| password: '********', | |
| rememberMe | |
| }); | |
| // Redirect after validation | |
| window.location.href = 'index.html'; | |
| // Password strength indicator | |
| document.getElementById('password').addEventListener('input', function(e) { | |
| const password = e.target.value; | |
| const strengthDiv = document.getElementById('password-strength'); | |
| const meter = document.getElementById('strength-meter'); | |
| const feedback = document.getElementById('strength-feedback'); | |
| if (password.length > 0) { | |
| strengthDiv.classList.remove('hidden'); | |
| // Calculate strength | |
| let strength = 0; | |
| const requirements = []; | |
| if (password.length >= 8) strength += 1; | |
| else requirements.push('At least 8 characters'); | |
| if (/[A-Z]/.test(password)) strength += 1; | |
| else requirements.push('An uppercase letter'); | |
| if (/[a-z]/.test(password)) strength += 1; | |
| else requirements.push('A lowercase letter'); | |
| if (/\d/.test(password)) strength += 1; | |
| else requirements.push('A number'); | |
| if (/[@$!%*?&]/.test(password)) strength += 1; | |
| else requirements.push('A special character (@$!%*?&)'); | |
| // Update meter | |
| const width = (strength / 5) * 100; | |
| meter.style.width = `${width}%`; | |
| // Update meter color | |
| if (strength <= 2) { | |
| meter.style.backgroundColor = '#ef4444'; // red | |
| } else if (strength <= 4) { | |
| meter.style.backgroundColor = '#f59e0b'; // amber | |
| } else { | |
| meter.style.backgroundColor = '#10b981'; // green | |
| } | |
| // Update feedback | |
| feedback.innerHTML = requirements.length | |
| ? 'Missing: ' + requirements.join(', ') | |
| : 'Strong password!'; | |
| } else { | |
| strengthDiv.classList.add('hidden'); | |
| } | |
| }); | |
| }); |