window.onload = function ()
{
    document.querySelector('input#password').addEventListener('input', validatePassword);
    document.querySelector('button#toggle-password').addEventListener('click', togglePassword);
} 

function togglePassword()
{
    const passwordInput = document.querySelector('input#password'); 
    const togglePasswordButton = document.querySelector('button#toggle-password');
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        togglePasswordButton.textContent = 'visibility_off';
        togglePasswordButton.setAttribute('aria-label',
        'Hide password.');
    } else {
        passwordInput.type = 'password';
        togglePasswordButton.textContent = 'visibility';
        togglePasswordButton.setAttribute('aria-label',
        'Show password as plain text. ' +
        'Warning: this will display your password on the screen.');
    }
}
function validatePassword() 
{
    const passwordInput = document.querySelector('input#password');
    let message= '';
    if (!/.{8,}/.test(passwordInput.value)) {
            message = 'At least eight characters. ';
    }
        if (!/.*[A-Z].*/.test(passwordInput.value)) {
            message += '\nAt least one uppercase letter. ';
    }
        if (!/.*[a-z].*/.test(passwordInput.value)) {
            message += '\nAt least one lowercase letter.';
    }
    passwordInput.setCustomValidity(message);  
}