/** * Client-side form validation and authentication handling */ document.addEventListener('DOMContentLoaded', function() { const loginForm = document.getElementById('login-form'); if (loginForm) { loginForm.addEventListener('submit', validateLoginForm); } const signupForm = document.getElementById('signup-form'); if (signupForm) { signupForm.addEventListener('submit', validateSignupForm); } }); function validateLoginForm(e) { const email = document.getElementById('email').value; const password = document.getElementById('password').value; const rememberMe = document.getElementById('remember-me')?.checked; let isValid = true; let errorMessage = ''; // Email validation if (!email || !email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) { errorMessage = 'Please enter a valid email address'; isValid = false; } // Password validation if (!password || password.length < 8) { errorMessage = 'Password must be at least 8 characters long'; isValid = false; } if (!isValid) { e.preventDefault(); showError(errorMessage); } } function validateSignupForm(e) { const email = document.getElementById('email').value; const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirm_password').value; let isValid = true; let errorMessage = ''; // Email validation if (!email || !email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) { errorMessage = 'Please enter a valid email address'; isValid = false; } // Password validation if (!password || password.length < 8) { errorMessage = 'Password must be at least 8 characters long'; isValid = false; } else if (!/[A-Z]/.test(password)) { errorMessage = 'Password must contain at least one uppercase letter'; isValid = false; } else if (!/[a-z]/.test(password)) { errorMessage = 'Password must contain at least one lowercase letter'; isValid = false; } else if (!/[0-9]/.test(password)) { errorMessage = 'Password must contain at least one number'; isValid = false; } // Confirm password if (password !== confirmPassword) { errorMessage = 'Passwords do not match'; isValid = false; } if (!isValid) { e.preventDefault(); showError(errorMessage); } } function showError(message) { // Remove any existing error alerts const existingAlert = document.querySelector('.alert-danger'); if (existingAlert) { existingAlert.remove(); } // Create and show new error alert const alert = document.createElement('div'); alert.className = 'alert alert-danger alert-dismissible fade show'; alert.role = 'alert'; alert.innerHTML = ` ${message} `; const form = document.querySelector('form'); form.parentNode.insertBefore(alert, form); }