script.ts

class UserUtils {
    static validateEmail(email: string): boolean {
        return email.includes('@') && email.split('@')[1].includes('.')
    }

    static validatePassword(password: string): boolean {
        const isLongEnough = password.length >= 8;
        const hasNumber = /\d/.test(password);
        const hasUppercase = /[A-Z]/.test(password);
        const hasSpecialChar = /[@!&?]/.test(password);

        return isLongEnough && hasNumber && hasUppercase && hasSpecialChar;
    }
}


const registrationForm = document.getElementById('registrationForm') as HTMLFormElement;
const emailInput = document.getElementById('email') as HTMLInputElement;
const passwordInput = document.getElementById('password') as HTMLInputElement;
const confirmPasswordInput = document.getElementById('confirmPassword') as HTMLInputElement;
const emailError = document.getElementById('emailError') as HTMLElement;
const passwordError = document.getElementById('passwordError') as HTMLElement;
const confirmPasswordError = document.getElementById('confirmPasswordError') as HTMLElement;
const successMessage = document.querySelector('.sucessForm') as HTMLElement;

registrationForm.addEventListener('submit', (event: SubmitEvent) => {
    event.preventDefault();

    const email = emailInput.value;
    const password = passwordInput.value;
    const confirmPassword = confirmPasswordInput.value;

    emailError.textContent = '';
    passwordError.textContent = '';
    confirmPasswordError.textContent = '';
    successMessage.style.display = 'none';

    if (!UserUtils.validateEmail(email)) {
        emailError.textContent = 'Error: Invalid email';
        return;
    }

    if (!UserUtils.validatePassword(password)) {
        passwordError.textContent = 'The password must contain at least 8 characters, a number, an uppercase letter and the special character @!&?';
        return;
    }

    if (password !== confirmPassword) {
        confirmPasswordError.textContent = 'Error: Passwords do not match';
        return;
    }

    registrationForm.style.display = 'none';
    successMessage.style.display = 'block';

    setTimeout(() => {
        successMessage.style.display = 'none';
        registrationForm.style.display = 'block';
        registrationForm.reset();
    }, 5000);
});