WikiLerni/front/src/groupElement.js

// -- PAGE AFFICHANT L'ÉLÉMENT D'UN GROUPE DE QUIZ ET PROPOSANT DE CRÉER SON COMPTE DE MANIÈRE SIMPLIFIÉE

/// L'utilisateur peut avoir répondu à un quiz avant de lancer la création de son compte
/// Dans 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 } from "./tools/clientstorage.js";
import { addElement } from "./tools/dom.js";
import { helloDev, updateAccountLink } from "./tools/everywhere.js";
import { getDatasFromInputs, setAttributesToInputs } from "./tools/forms.js";
import { loadMatomo } from "./tools/matomo.js";
import { checkAnswerDatas, checkSession, getTimeDifference } from "./tools/users.js";

// Dictionnaires :
const { serverError } = require("../../lang/"+lang+"/general");
const { needUniqueEmail } = require("../../lang/"+lang+"/user");

// Principaux éléments du DOM manipulés :
const btnSubmit=document.getElementById("submitDatas");
const divResponse=document.getElementById("response");
const emailInput=document.getElementById("email");
const myForm=document.getElementById("subscription");

// Test de connexion de l'utilisateur + affichage formulaire d'inscription :
const initialise = async () =>
{
    try
    {
        let isConnected=await checkSession(), user;
        if(isConnected)
        {
            user=getLocaly("user", true);
            updateAccountLink(user.status, configTemplate);// lien vers le compte adapté pour les utilisateurs connectés
        }
        else
        {
            loadMatomo();
            setAttributesToInputs(configUsers, myForm);
            myForm.style.display="block";
        }
    }
    catch(e)
    {
        addElement(divResponse, "p", serverError, "", ["error"]);
        console.error(e);
    }
}
initialise();
helloDev();

// 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));
    }
});

// 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)
                {
                    if(Array.isArray(response.errors))
                        response.errors = response.errors.join("<br>");
                    else
                        response.errors = serverError;
                    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, on ajoute les données de son résultat :
            datas=checkAnswerDatas(datas);
            xhr.send(JSON.stringify(datas));
        }
    }
    catch(e)
    {
        addElement(divResponse, "p", serverError, "", ["error"]);
        console.error(e);
    }
});