// ############################################################################
// #                                                                          #
// # Description: JS de la partie inscription                                 #
// #                                                                          #
// ############################################################################


// Num   - N'importe quel chiffre entre 0 et 9 [0-9]
// Upper - N'importe quel lettre majuscule entre A et Z [A-Z]
// Spe   - N'importe quel symbole présent entre les deux brackets [`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~µ°€£]
// Email - ^ -> Debut de la ligne obligatoire, doit contenir entre premiers brackets "[a-z]" "[0-9]" ou _, -, .
//     Ensuite il doit y avoir un @ et une suite de charcactère sans charactère speciaux "+@[a-zA-Z0-9-]"
//     et pour finir l'extension "+.[a-z]", "+$" pour la fin de la ligne.
const regNum     = new RegExp(/[0-9]/);
const regUpper   = new RegExp(/[A-Z]/);
const regSpecial = new RegExp(/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~µ°€£]/);
const regEmail   = new RegExp(/^[a-z0-9._-]+@[a-z0-9-]+\.[a-z]+$/)

// Initialisation des variables
let validEmail;
let validNumb;
let validUpper;
let validSpecial;
let validLength;

function valid_all() {
    let submitButton = document.getElementById("submit");
    // Si tout est validé on active le button sumbit
    if (validLength && validUpper && validNumb && validSpecial && validEmail) {
        submitButton.classList.remove("deactivate");
        submitButton.disabled = false;
    } else {
        submitButton.classList.add("deactivate");
        submitButton.disabled = true;
    }
}

function valid_reg(condition, element) {
    // Si la regex est bonne on selectionne la class css pour l'afficher
    if (condition) {
        document.getElementById(element).classList.remove("invalid");
        document.getElementById(element).classList.add("valid");
        return true;
    } else {
        document.getElementById(element).classList.remove("valid");
        document.getElementById(element).classList.add("invalid");
        return false;
    }
}

document.getElementById("email").addEventListener("keyup", () => {
    // On récupère l'email par id dans la page et on test notre regex
    let email  = document.getElementById("email").value;
    validEmail = valid_reg(regEmail.test(email), "mailNotice");
    valid_all();
});

document.getElementById("password").addEventListener("keyup", () => {
    // On récupère la valeur par id du mdp dans la page et on test nos regex
    let pass     = document.getElementById("password").value;
    validNumb    = valid_reg(regNum.test(pass),     "passNumb");
    validUpper   = valid_reg(regUpper.test(pass),   "passUpper");
    validSpecial = valid_reg(regSpecial.test(pass), "passSpecial");
    validLength  = valid_reg((pass.length >= 8),    "passLength");
    valid_all();
});