WikiLerni/front/src/subscribe.js

// -- GESTION DU FORMULAIRE PERMETTANT DE CRÉER SON COMPTE

/// L'utilisateur peut avoir répondu à un quiz avant d'arriver sur la page d'inscription
/// Des ce cas il faut enregistrer son résultat en même temps que les informations de son compte

// Fichier de configuration tirés du backend :
import { apiUrl, availableLangs, theme } from "../../config/instance.js";
const lang=availableLangs[0];

const configTemplate = require("../../views/"+theme+"/config/"+lang+".js");// besoin de toutes les déclarations, car appel dynamique : configTemplate[homePage]
const configUsers = require("../../config/users");// idem pour configurer formulaire

// Importation des fonctions utiles au script :
import { getLocaly, removeLocaly, saveLocaly } from "./tools/clientstorage.js";
import { addElement } from "./tools/dom.js";
import { helloDev } from "./tools/everywhere.js";
import { getDatasFromInputs, setAttributesToInputs } from "./tools/forms.js";
import { getPassword } from "../../tools/main";
import { loadMatomo } from "./tools/matomo.js";
import { checkAnswerDatas, checkSession, getTimeDifference } from "./tools/users.js";

// Dictionnaires :
const { notRequired, serverError } = require("../../lang/"+lang+"/general");
const { alreadyConnected, godfatherFound, godfatherNotFound, needUniqueEmail, passwordCopied } = require("../../lang/"+lang+"/user");

// Principaux éléments du DOM manipulés :
const myForm=document.getElementById("subscription");
const divResponse=document.getElementById("response");
const passwordInput=document.getElementById("password");
const passwordLink=document.getElementById("getPassword");
const passwordHelp=document.getElementById("passwordMessage");
const emailInput=document.getElementById("email");
const btnSubmit=document.getElementById("submitDatas");
const codeGodfatherInput=document.getElementById("codeGodfather");

helloDev();

// Test de connexion de l'utilisateur + affichage formulaire d'inscription.
const initialise = async () =>
{
    try
    {
        const isConnected=await checkSession();
        if(isConnected)
        {
            saveLocaly("message", { message: alreadyConnected, color:"info" });// pour l'afficher sur la page suivante
            const user=getLocaly("user", true);
            const homePage=user.status+"HomePage";
            window.location.assign("/"+configTemplate[homePage]);
        }
        else
        {
            loadMatomo();
            setAttributesToInputs(configUsers, myForm);
            myForm.style.display="block";
        }
    }
    catch(e)
    {
        addElement(divResponse, "p", serverError, "", ["error"]);
        console.error(e);
    }
}
initialise();

// Générateur de mot de passe "aléatoire"
passwordLink.addEventListener("click", function(e)
{
    e.preventDefault();
    passwordInput.type="text";
    passwordInput.value=getPassword(8, 12);
    // Copie du mot de passe généré dans le "presse-papier" de l'ordinateur :
    passwordInput.select();
    document.execCommand("copy");
    addElement(passwordHelp, "div", passwordCopied, "", ["success"]);
});

// Test si l'e-mail saisi est déjà utilisé par un autre compte.
// Si c'est le cas, la validation du formulaire est bloquée.
emailInput.addEventListener("focus", function(e)
{
    document.getElementById("emailMessage").innerHTML="";// pour supprimer l'éventuel message d'erreur déjà affiché
});
emailInput.addEventListener("blur", function(e)
{
    const emailValue=emailInput.value.trim();
    if(emailValue!=="")
    {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", apiUrl+configUsers.userRoutes+configUsers.checkIfIsEmailfreeRoute);
        xhr.onreadystatechange = function()
        {
            if (this.readyState == XMLHttpRequest.DONE)
            {
                let response=JSON.parse(this.responseText);
                if (this.status === 200 && response.free!==undefined && response.free === false)
                {
                    addElement(document.getElementById("emailMessage"), "div", needUniqueEmail.replace("#URL", configTemplate.connectionPage), "", ["error"]);
                    btnSubmit.setAttribute("disabled", true);
                }
                else
                    btnSubmit.removeAttribute("disabled");
            }
        }
        xhr.setRequestHeader("Content-Type", "application/json");
        const datas={ emailTest:emailValue };
        xhr.send(JSON.stringify(datas));
    }
});

// Vérification que le code/e-mail de parrainage saisi est valide.
codeGodfatherInput.addEventListener("focus", function(e)
{   // on efface l'éventuel message d'erreur si on revient sur le champ pour tester un autre code.
    addElement(document.getElementById("codeGodfatherMessage"), "i", notRequired);
});
codeGodfatherInput.addEventListener("blur", function(e)
{
    const codeValue=codeGodfatherInput.value.trim();
    if(codeValue!=="")
    {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", apiUrl+configUsers.userRoutes+configUsers.getGodfatherRoute);
        xhr.onreadystatechange = function()
        {
            if (this.readyState == XMLHttpRequest.DONE)
            {
                if (this.status === 204)
                    addElement(document.getElementById("codeGodfatherMessage"), "div", godfatherNotFound, "", ["error"]);
                else
                    addElement(document.getElementById("codeGodfatherMessage"), "div", godfatherFound, "", ["success"]);           
            }
        }
        xhr.setRequestHeader("Content-Type", "application/json");
        const datas={ codeTest:codeValue };
        xhr.send(JSON.stringify(datas));
    }
});

// Traitement de l'envoi des données d'inscription :
myForm.addEventListener("submit", function(e)
{
    try
    {
        e.preventDefault();        
        const xhr = new XMLHttpRequest();
        xhr.open("POST", apiUrl+configUsers.userRoutes+configUsers.subscribeRoute);
        xhr.onreadystatechange = function()
        {
            if (this.readyState == XMLHttpRequest.DONE)
            {
                let response=JSON.parse(this.responseText);
                if (this.status === 201)
                {
                    myForm.style.display="none";
                    addElement(divResponse, "p", response.message, "", ["success"]);
                    removeLocaly("lastAnswer");// ! important pour ne pas enregister plusieurs fois le résultat.
                }
                else if (response.errors)
                {
                    response.errors = response.errors.join("<br>");
                    addElement(divResponse, "p", response.errors, "", ["error"]);
                }
                else
                    addElement(divResponse, "p", serverError, "", ["error"]);
            }
        }
        xhr.setRequestHeader("Content-Type", "application/json");
        let datas=getDatasFromInputs(myForm);
        if(datas)
        {
            datas.timeDifference=getTimeDifference(configUsers);
            // si l'utilisateur a précédement répondu à un quiz, j'ajoute les infos de son résultat :
            datas=checkAnswerDatas(datas);
            xhr.send(JSON.stringify(datas));
        }
    }
    catch(e)
    {
        addElement(divResponse, "p", serverError, "", ["error"]);
        console.error(e);
    }
});