web/static/js/auth.js

/**
 * 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}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;

    const form = document.querySelector('form');
    form.parentNode.insertBefore(alert, form);
}