WikiLerni/front/src/subscribeValidation.js

// -- PAGE PERMETTANT DE VALIDER LA CRÉATION DE SON COMPTE, PUIS DE COMPLÉTER SON INSCRIPTION

/// Un token est transmis en paramètre de l'Url. Il a une validité limité dans le temps.
/// Si le token n'est pas/plus valide, on redirige l'utilisateur vers la page de connexion pour obtenir un nouveau lien.
/// Si le token est ok, on l'informe que tout est ok et lui propose de se compléter les informations de son compte. Une session lui est également créée.
/// Si l'utilisateur a déjà une session active valide, c'est qu'il a déjà cliqué sur le lien. On le redirige vers sa page d'accueil.

// Fichier de configuration tirés du backend :
import { apiUrl, availableLangs, theme, tokenConnexionMinTimeInHours } from "../../config/instance.js";
const lang=availableLangs[0];
const configTemplate = require("../../views/"+theme+"/config/"+lang+".js");
const configUsers = require("../../config/users"); // besoin de tous le fichier pour configurer le formulaire de saisie, etc.

// Importation des fonctions utiles au script :
import { getLocaly, 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 { getUrlParams } from "./tools/url.js";
import { checkSession, setSession } from "./tools/users.js";

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

// Principaux éléments du DOM manipulés :
const codeGodfatherInput=document.getElementById("codeGodfather");
const divExplanations = document.getElementById("explanations");
const divMessage = document.getElementById("message");
const divResponse = document.getElementById("response");
const formAccount = document.getElementById("subscription2");
const passwordInput=document.getElementById("newPassword");
const passwordLink=document.getElementById("getPassword");
const passwordHelp=document.getElementById("passwordMessage");

const initialise = async () =>
{
    try
    {
        // Explications cachées par défaut :
        divExplanations.style.display="none";
        const isConnected=await checkSession();
        if(isConnected)
        {
            saveLocaly("message", { message: alreadyConnected, color:"info" });
            const user=getLocaly("user", true);
            const homePage=user.status+"HomePage";// lors de la création d'un compte, seul le statut "user" est possible.
            window.location.assign("/"+configTemplate[homePage]);
        }
        else
        {
            loadMatomo();
            const datas=getUrlParams();
            if(datas && datas.t!==undefined)
            {
                const xhr = new XMLHttpRequest();
                xhr.open("GET", apiUrl+configUsers.userRoutes+configUsers.checkSubscribeTokenRoute+datas.t);
                xhr.onreadystatechange = function()
                {
                    if (this.readyState == XMLHttpRequest.DONE)
                    {
                        let response=JSON.parse(this.responseText);
                        if (this.status === 200 && response.newUser != undefined && response.token != undefined)
                        {
                            addElement(divMessage, "p", validationMessage, "", ["success"]);
                            // Affichage et initialisation du formulaire permettant de compléter les infos :
                            formAccount.style.display="block";
                            divExplanations.style.display="block";
                            setAttributesToInputs(configUsers, formAccount);
                            // Affichage des infos déjà enregistrées :
                            for(let data in response.newUser.User)
                            {
                                if(formAccount.elements[data]!==undefined)
                                    formAccount.elements[data].value=response.newUser.User[data];
                            }
                            // Jours de réception de l'abonnenment :
                            for(let i in response.newUser.Subscription.receiptDays)
                                formAccount.elements["d"+response.newUser.Subscription.receiptDays[i]].checked="checked";
                            // Certains navigateurs remplissent automatiquement les champs password :
                            passwordInput.value="";
                            // Création d'une session courte avec le token reçu (nécessaire pour la suite) :
                            let connexionMaxTime=Date.now()+parseInt(tokenConnexionMinTimeInHours,10)*3600*1000;
                            setSession(response.newUser.User.id, response.token, connexionMaxTime);
                        }
                        else if ((this.status === 200 || this.status === 404) && response.errors != undefined)
                        {
                            if(Array.isArray(response.errors))
                                response.errors = response.errors.join("<br>");
                            else
                                response.errors = serverError;
                            addElement(divMessage, "p", response.errors, "", ["error"]);
                            
                        }
                        else
                            addElement(divMessage, "p", badLinkValidationMessage.replace("#URL", configTemplate.connectionPage), "", ["error"]);
                    }
                }
                xhr.send();

                // Génére un mot de passe pseudo-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"]);
                });
                
                // Vérifie que le code/e-mail de parrainage saisi est valide :
                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));
                    }
                });
                // Efface l'éventuel message déjà injecté si l'utilisateur revient sur ce champ de saisie :
                codeGodfatherInput.addEventListener("focus", function(e)
                {
                    addElement(document.getElementById("codeGodfatherMessage"), "i", notRequired);
                });

                // Traite de l'envoi d'une mise à jour des infos :
                formAccount.addEventListener("submit", function(e)
                {
                    e.preventDefault();
                    divResponse.innerHTML="";
                    let datas=getDatasFromInputs(formAccount);
                    // Recomposition des jours d'envoi de l'abonnement
                    datas.receiptDays="";
                    for(let i=1; i<=7; i++)
                    {
                        if(datas["d"+i] !== undefined)
                            datas.receiptDays+=""+i;
                    }
                    const user=getLocaly("user", true);// on a créé la session + haut
                    const xhrUserUpdate = new XMLHttpRequest();
                    xhrUserUpdate.open("PUT", apiUrl+configUsers.userRoutes+configUsers.signupCompletionRoute+user.id);
                    xhrUserUpdate.onreadystatechange = function()
                    {
                        if (this.readyState == XMLHttpRequest.DONE)
                        {
                            let response=JSON.parse(this.responseText);
                            if (this.status === 200 && response.message !== undefined)
                            {
                                if(Array.isArray(response.message))
                                    response.message = response.message.join("<br>");
                                else
                                    response.message = response.message;
                                saveLocaly("message", { message: response.message, color:"success" });
                                window.location.assign(configTemplate["userHomePage"]);
                            }
                            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"]);
                        }
                    }
                    xhrUserUpdate.setRequestHeader("Content-Type", "application/json");
                    xhrUserUpdate.setRequestHeader("Authorization", "Bearer "+user.token);
                    if(datas)
                    {
                        xhrUserUpdate.send(JSON.stringify(datas));
                    }
                });
            }
        }
    }
    catch(e)
    {
        console.error(e);
        addElement(divResponse, "p", serverError, "", ["error"]);
    }
}
initialise();
helloDev();