
emailField = document.getElementById('email');
passwordField = document.getElementById('password');

function validateField(field) {
    // Eliminar cualquier mensaje de error anterior específico
    const existingError = field.parentNode.querySelector('.error-message');
    if (existingError) {
        existingError.remove();
    }

    // Reiniciar estilos
    field.style.border = '2px solid #ccc';

    if (field.value.trim() === '') {
        const errorMessage = document.createElement('p');
        errorMessage.className = 'error-message';
        errorMessage.style.color = 'red';
        errorMessage.textContent = `${field.placeholder} is required`;
        field.style.border = '3px solid red';
        field.parentNode.appendChild(errorMessage);
        return false;
    }

    return true;
    
}

function validateEmail() {

    if (!validateField(emailField)) {
        return false;
    }

}

function validatePassword() {
    
    if (!validateField(passwordField)) {
        return false;
    }

}

emailField.onblur = function () {
    validateEmail();
};

passwordField.onblur = function () {
    validatePassword();
};

var togglePassword = document.querySelector('#togglePassword');
var password = document.querySelector('#password');

togglePassword.onclick = function(e) {
    var type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    e.target.classList.toggle('bi-eye');
};