function togglePassword(inputId) { const input = document.getElementById(inputId); const button = event.target; if (input.type === 'password') { input.type = 'text'; button.textContent = '🙈'; } else { input.type = 'password'; button.textContent = '👁️'; } } function checkPasswordStrength(password) { const strengthBar = document.getElementById('strengthBar'); const hints = { lengthHint: document.getElementById('lengthHint'), uppercaseHint: document.getElementById('uppercaseHint'), lowercaseHint: document.getElementById('lowercaseHint'), numberHint: document.getElementById('numberHint'), specialHint: document.getElementById('specialHint') }; let strength = 0; let messages = []; if (password.length >= 8) { strength += 20; hints.lengthHint.style.color = '#28a745'; hints.lengthHint.style.textDecoration = 'line-through'; } else { hints.lengthHint.style.color = '#666'; hints.lengthHint.style.textDecoration = 'none'; } if (/[A-Z]/.test(password)) { strength += 20; hints.uppercaseHint.style.color = '#28a745'; hints.uppercaseHint.style.textDecoration = 'line-through'; } else { hints.uppercaseHint.style.color = '#666'; hints.uppercaseHint.style.textDecoration = 'none'; } if (/[a-z]/.test(password)) { strength += 20; hints.lowercaseHint.style.color = '#28a745'; hints.lowercaseHint.style.textDecoration = 'line-through'; } else { hints.lowercaseHint.style.color = '#666'; hints.lowercaseHint.style.textDecoration = 'none'; } if (/[0-9]/.test(password)) { strength += 20; hints.numberHint.style.color = '#28a745'; hints.numberHint.style.textDecoration = 'line-through'; } else { hints.numberHint.style.color = '#666'; hints.numberHint.style.textDecoration = 'none'; } if (/[^A-Za-z0-9]/.test(password)) { strength += 20; hints.specialHint.style.color = '#28a745'; hints.specialHint.style.textDecoration = 'line-through'; } else { hints.specialHint.style.color = '#666'; hints.specialHint.style.textDecoration = 'none'; } strengthBar.className = 'strength-bar'; if (strength <= 25) { strengthBar.classList.add('strength-weak'); } else if (strength <= 50) { strengthBar.classList.add('strength-medium'); } else if (strength <= 75) { strengthBar.classList.add('strength-strong'); } else { strengthBar.classList.add('strength-very-strong'); } strengthBar.style.width = strength + '%'; } function checkPasswordMatch() { const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirm_password').value; const matchElement = document.getElementById('passwordMatch'); if (!confirmPassword) { matchElement.textContent = ''; matchElement.style.color = ''; return; } if (password === confirmPassword) { matchElement.textContent = '✓ Passwords match'; matchElement.style.color = '#28a745'; } else { matchElement.textContent = '✗ Passwords do not match'; matchElement.style.color = '#dc3545'; } } document.addEventListener('DOMContentLoaded', function () { const form = document.querySelector('.auth-form'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const confirmInput = document.getElementById('confirm_password'); const termsCheckbox = document.getElementById('terms'); [emailInput, passwordInput, confirmInput].forEach(input => { input.addEventListener('focus', function () { this.parentElement.classList.add('focused'); }); input.addEventListener('blur', function () { this.parentElement.classList.remove('focused'); }); }); form.addEventListener('submit', function (e) { const email = emailInput.value.trim(); const password = passwordInput.value.trim(); const confirmPassword = confirmInput.value.trim(); if (!email || !password || !confirmPassword) { e.preventDefault(); alert('Please fill in all fields'); return false; } if (!email.includes('@')) { e.preventDefault(); alert('Please enter a valid email address'); return false; } if (password.length < 8) { e.preventDefault(); alert('Password must be at least 8 characters long'); return false; } if (password !== confirmPassword) { e.preventDefault(); alert('Passwords do not match'); return false; } if (!termsCheckbox.checked) { e.preventDefault(); alert('You must agree to the Terms of Service'); return false; } return true; }); });