script.js

const password = document.getElementById("password");
const confirmPassword = document.getElementById("confirmPassword");
const message = document.getElementById("message");
const form = document.getElementById("registrationForm");
const mdp = document.getElementById("mdp");
const submitButton = document.getElementById("btnValider");

function verifyPasswords() {
    if (confirmPassword.value === "") {
        message.textContent = "";
        message.className = "";
        return false;
    }

    const matches = password.value === confirmPassword.value;
    message.textContent = matches
        ? "Les mots de passe correspondent."
        : "Les mots de passe ne correspondent pas.";
    message.className = matches ? "success" : "error";
    return matches;
}

function longueurMdp() {
    const estValide = password.value.length >= 8;

    if (password.value === "") {
        mdp.textContent = "";
        return false;
    }

    mdp.textContent = estValide
        ? "Mot de passe valide."
        : "Le mot de passe doit contenir au moins 8 caractères.";

    return estValide;
}

function updateSubmitButton() {
    const motsDePasseValides = longueurMdp() && verifyPasswords();

    submitButton.disabled = !form.checkValidity() || !motsDePasseValides;
}

password.addEventListener("input", () => {
    updateSubmitButton();
});

confirmPassword.addEventListener("input", () => {
    updateSubmitButton();
});

form.addEventListener("input", updateSubmitButton);
form.addEventListener("change", updateSubmitButton);

document.querySelectorAll(".masque").forEach((checkbox) => {
    checkbox.addEventListener("change", () => {
        const input = document.getElementById(checkbox.dataset.target);

        if (input) {
            input.type = checkbox.checked ? "text" : "password";
        }
    });
});

form.addEventListener("submit", (event) => {
    const motDePasseValide = longueurMdp();
    const confirmationValide = verifyPasswords();

    if (!motDePasseValide || !confirmationValide || !form.checkValidity()) {
        event.preventDefault();

        if (!motDePasseValide) {
            password.focus();
        } else if (!confirmationValide) {
            confirmPassword.focus();
        } else {
            form.reportValidity();
        }
    }
});

updateSubmitButton();