document.addEventListener("DOMContentLoaded", () => {
    // Eye toggle for pw
    document.querySelectorAll('.p-viewer').forEach((viewer) => {
        const showPw = viewer.querySelector('#show-pw-on');
        const hidePw = viewer.querySelector('#show-pw-off');
        const inputField = viewer.previousElementSibling.previousElementSibling;

        showPw.addEventListener('click', () => {
            showPw.classList.add('hidden');
            hidePw.classList.remove('hidden');
            inputField.type = "text";
        });

        hidePw.addEventListener('click', () => {
            hidePw.classList.add('hidden');
            showPw.classList.remove('hidden');
            inputField.type = "password";
        });
    });

    //Check confirming password
    const newPassword = document.getElementById('register-password')
    const confirmPassword = document.getElementById('register-password-conf')
    function validatePassword() {
        if (newPassword.value != confirmPassword.value) {
            confirmPassword.setCustomValidity('Passwords dont match.')
        } else {
            confirmPassword.setCustomValidity('');
        }
    }
    newPassword.onchange = validatePassword;
    confirmPassword.onchange = validatePassword;
});