static/chat/js/signup.js

function togglePasswordVisibility() {
    const passwordField = document.getElementById('password');
    const toggleIcon = document.getElementById('toggle-password');

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        toggleIcon.innerHTML = '<img src="https://pdf813.netlify.app/chat/img/icon/icons8-closed-eye-50.png" alt="Hide Password" />';

    } else {
        passwordField.type = 'password';
        toggleIcon.innerHTML = '<img src="https://pdf813.netlify.app/chat/img/icon/icons8-eye-48.png" alt="Show Password" />';
    }

}

// Form validation and error handling
const form = document.getElementById('signup-form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
const nameError = document.getElementById('name-error');
const emailError = document.getElementById('email-error');
const passwordError = document.getElementById('password-error');
const confirmPasswordError = document.getElementById('confirm-password-error');
const signupBtn = document.getElementById('signup-btn');

form.addEventListener('submit', function (event) {
    event.preventDefault();
    let hasError = false;

    // Clear previous error messages
    nameError.textContent = '';
    emailError.textContent = '';
    passwordError.textContent = '';
    confirmPasswordError.textContent = '';

    // Validate name
    if (nameInput.value.trim() === '') {
        nameError.textContent = 'Please fill in the username field';
        hasError = true;
    }

    // Validate email
    if (emailInput.value.trim() === '') {
        emailError.textContent = 'Please fill in the email field';
        hasError = true;
    } else if (!validateEmail(emailInput.value)) {
        emailError.textContent = 'Email is not valid';
        hasError = true;
    }

    // Validate password
    if (passwordInput.value.trim() === '') {
        passwordError.textContent = 'Please fill in the password field';
        hasError = true;
    }

    // Validate confirm password
    if (confirmPasswordInput.value !== passwordInput.value) {
        confirmPasswordError.textContent = 'Passwords do not match';
        hasError = true;
    }

    if (hasError) return;

    // Show spinner and disable button
    signupBtn.disabled = true;
    signupBtn.innerHTML = 'Signing Up... <div class="spinner" id="spinner"></div>';
    const spinner = document.getElementById('spinner');
    spinner.style.display = 'inline-block';

    // Simulate an API request for signup (replace this with your actual signup API call)
    setTimeout(function () {
        // Simulate a response: if signup fails
        let signupSuccess = false; // Change this to simulate success/failure
        if (!signupSuccess) {
            emailError.textContent = 'Email is already taken';
            spinner.style.display = 'none';
            signupBtn.disabled = false;
            signupBtn.innerText = "Sign Up";
        } else {
            window.location.href = '/login'; // Redirect to login after successful signup
        }
    }, 3000); // Shortened timeout for testing purposes
});

function validateEmail(email) {
    const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2, 6}$/;
    return regex.test(email);
}