261 lines
13 KiB
JavaScript
261 lines
13 KiB
JavaScript
|
// -- GESTION DES FORMULAIRES PERMETTANT AUX UTILISATEURS DE METTRE À JOUR LEURS INFORMATIONS + LEUR ABONNEMENT
|
||
|
|
|
||
|
|
/// Vérifier que l'utilisateur est bien connecté, a le bon statut et le rediriger vers le formulaire d'inscription si ce n'est pas le cas.
|
||
|
|
/// Si c'est ok, on récupère les infos de son compte et son abonnement et les affiche dans le formulaire.
|
||
|
|
/// Une information est affichée concernant la possibilité de parrainage et les listes les filleuils existants.
|
||
|
|
/// Un menu permet à l'utilisateur d'accéder à la modification de ses infos, etc.
|
||
|
|
/// Des boutons de paiement sont aussi affichés suivant le choix de l'utilisateur pour lui permettre de prolonger son abonnement.
|
||
|
|
/// Un message venant d'une autre page peut aussi être à afficher lors du premier chargement.
|
||
|
|
|
||
|
|
/// Ajout test email en doublon avant envoi ?
|
||
|
|
|
||
|
|
// Fichier de configuration côté client :
|
||
|
|
import { apiUrl, availableLangs, theme } from "../../config/instance.js";
|
||
|
|
const lang=availableLangs[0];
|
||
|
|
const configFrontEnd = require("../../views/"+theme+"/config/"+lang+".js");
|
||
|
|
|
||
|
|
// Fonctions utiles au script : !! revoir quand le rest sera fini pour vérifier si tout est utile
|
||
|
|
import { getLocaly, removeLocaly, saveLocaly } 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 { isEmpty, replaceAll } from "../../tools/main";
|
||
|
|
import { checkSession, getConfig, getTimeDifference } from "./tools/users.js";
|
||
|
|
|
||
|
|
// Spécifique WebPortage pour paiements:
|
||
|
|
import { showBtnPayment, unCheckAllOthers } from "./tools/webportage.js";
|
||
|
|
|
||
|
|
// Dictionnaires :
|
||
|
|
const txt = require("../../lang/"+lang+"/general");
|
||
|
|
const txtUsers = require("../../lang/"+lang+"/user");
|
||
|
|
const txtSubscriptions = require("../../lang/"+lang+"/subscription");
|
||
|
|
|
||
|
|
// Principaux éléments du DOM manipulés :
|
||
|
|
const divCrash = document.getElementById("crash");
|
||
|
|
const divMain = document.getElementById("main-content");
|
||
|
|
const divMessage = document.getElementById("message");
|
||
|
|
const divResponse = document.getElementById("response");
|
||
|
|
const divGodchilds = document.getElementById("godchilds");
|
||
|
|
const divSubscribeIntro = document.getElementById("subscribeIntro");
|
||
|
|
const formAccount = document.getElementById("accountUpdate");
|
||
|
|
const newPassword = document.getElementById("newPassword");
|
||
|
|
const showGFEmail = document.getElementById("godfatherEmail");
|
||
|
|
const showGFCode = document.getElementById("godfatherCode");
|
||
|
|
|
||
|
|
helloDev();
|
||
|
|
|
||
|
|
const initialise = async () =>
|
||
|
|
{
|
||
|
|
try
|
||
|
|
{
|
||
|
|
const config = await getConfig();
|
||
|
|
if(!config)
|
||
|
|
addElement(divCrash, "p", txt.serverError, "", ["error"]);
|
||
|
|
else
|
||
|
|
{
|
||
|
|
// Si l'utilisateur n'est pas connecté avec le bon statut, pas la peine d'aller + loin :
|
||
|
|
const isConnected=await checkSession(["user"], "/"+configFrontEnd.connectionPage, { message: txtUsers.needBeConnected, color:"error" }, window.location);
|
||
|
|
if(isConnected)
|
||
|
|
{
|
||
|
|
divMain.style.display="block";
|
||
|
|
if(!isEmpty(getLocaly("message")))
|
||
|
|
{
|
||
|
|
addElement(divMessage, "p", getLocaly("message", true).message, "", [getLocaly("message", true).color], "", false);
|
||
|
|
removeLocaly("message");
|
||
|
|
}
|
||
|
|
const user=getLocaly("user", true);
|
||
|
|
updateAccountLink(user.status, configFrontEnd);
|
||
|
|
// Initialise le formulaire permettant de mettre à jour les infos :
|
||
|
|
setAttributesToInputs(config, formAccount);
|
||
|
|
// Certains navigateurs ont tendance à remplir tout seul les champs password
|
||
|
|
newPassword.value="";
|
||
|
|
|
||
|
|
// Fonction affichant les infos connues au premier affichage puis après envoi mise à jour
|
||
|
|
const getInfos = () =>
|
||
|
|
{
|
||
|
|
const xhrGetInfos = new XMLHttpRequest();
|
||
|
|
xhrGetInfos.open("GET", apiUrl+config.userRoutes+config.getUserInfos+user.id);
|
||
|
|
xhrGetInfos.onreadystatechange = function()
|
||
|
|
{
|
||
|
|
if (this.readyState == XMLHttpRequest.DONE)
|
||
|
|
{
|
||
|
|
let response=JSON.parse(this.responseText);
|
||
|
|
if (this.status === 200 && response.User != undefined && response.Subscription != undefined)
|
||
|
|
{
|
||
|
|
for(let data in response.User)
|
||
|
|
{
|
||
|
|
if(formAccount.elements[data]!==undefined)
|
||
|
|
{
|
||
|
|
if(response.User[data]!==true && response.User[data]!==false)// booléen = case à cocher !
|
||
|
|
formAccount.elements[data].value=response.User[data];
|
||
|
|
else if (response.User[data]==true) // si false, on ne fait rien
|
||
|
|
formAccount.elements[""+data].checked="checked";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// infos de l'abonnement
|
||
|
|
if(response.Subscription.noticeOk==true)
|
||
|
|
formAccount.elements["noticeOk"].checked="checked";
|
||
|
|
// jours de réception
|
||
|
|
for(let i in response.Subscription.receiptDays)
|
||
|
|
formAccount.elements["d"+response.Subscription.receiptDays[i]].checked="checked";
|
||
|
|
showGFEmail.innerHTML=response.User.email;
|
||
|
|
showGFCode.innerHTML=config.beginCodeGodfather+response.User.id;
|
||
|
|
}
|
||
|
|
const beginSubTS=new Date(response.Subscription.createdAt).getTime();
|
||
|
|
const nbDaysOk=response.Subscription.numberOfDays-Math.round((Date.now()-beginSubTS)/1000/3600/24);
|
||
|
|
if(nbDaysOk>0)
|
||
|
|
addElement(divSubscribeIntro, "p", txtSubscriptions.infosNbDays.replace("NB_DAYS", nbDaysOk), "", ["information"]);
|
||
|
|
else
|
||
|
|
{
|
||
|
|
addElement(divSubscribeIntro, "p", txtSubscriptions.infosExpirated.replace("NB_DAYS", nbDaysOk), "", ["error"]);
|
||
|
|
window.location.assign("#subscribe");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xhrGetInfos.setRequestHeader("Authorization", "Bearer "+user.token);
|
||
|
|
xhrGetInfos.send();
|
||
|
|
}
|
||
|
|
// Remonte les infos déjà enregistrées :
|
||
|
|
getInfos();
|
||
|
|
|
||
|
|
// Traitement 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 valables pour l'abonnement :
|
||
|
|
datas.receiptDays="";
|
||
|
|
for(let i=1; i<=7; i++)
|
||
|
|
{
|
||
|
|
if(datas["d"+i]!==undefined)
|
||
|
|
datas.receiptDays+=""+i;
|
||
|
|
}
|
||
|
|
if(datas.noticeOk===undefined)
|
||
|
|
datas.noticeOk="false";
|
||
|
|
if(datas.newsletterOk===undefined)
|
||
|
|
datas.newsletterOk="false";
|
||
|
|
datas.timeDifference=getTimeDifference(config);
|
||
|
|
const xhrUserUpdate = new XMLHttpRequest();
|
||
|
|
if(datas.deleteOk!==undefined)
|
||
|
|
xhrUserUpdate.open("DELETE", apiUrl+config.userRoutes+"/"+user.id);
|
||
|
|
else
|
||
|
|
xhrUserUpdate.open("PUT", apiUrl+config.userRoutes+config.updateUserInfos+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;
|
||
|
|
addElement(divResponse, "p", response.message, "", ["success"]);
|
||
|
|
}
|
||
|
|
else if (response.errors)
|
||
|
|
{
|
||
|
|
if(Array.isArray(response.errors))
|
||
|
|
response.errors = response.errors.join("<br>");
|
||
|
|
else
|
||
|
|
response.errors = txt.serverError;
|
||
|
|
addElement(divResponse, "p", response.errors, "", ["error"]);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
addElement(divResponse, "p", txt.serverError, "", ["error"]);
|
||
|
|
// dans tous les cas, je mets à jour le contenu du formulaire :
|
||
|
|
getInfos();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xhrUserUpdate.setRequestHeader("Content-Type", "application/json");
|
||
|
|
xhrUserUpdate.setRequestHeader("Authorization", "Bearer "+user.token);
|
||
|
|
if(datas)
|
||
|
|
{
|
||
|
|
datas.output="html";
|
||
|
|
xhrUserUpdate.send(JSON.stringify(datas));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// on passe à la caisse ?
|
||
|
|
const CGV=document.getElementById("CGVOk");
|
||
|
|
const abo12=document.getElementById("abo12");
|
||
|
|
const abo24=document.getElementById("abo24");
|
||
|
|
const abo60=document.getElementById("abo60");
|
||
|
|
const abo120=document.getElementById("abo120");
|
||
|
|
const divWPBtns=document.getElementById("WPBtns");
|
||
|
|
divWPBtns.style.display="none";
|
||
|
|
abo12.addEventListener("change", function(e)
|
||
|
|
{
|
||
|
|
unCheckAllOthers("abo12");
|
||
|
|
});
|
||
|
|
abo24.addEventListener("change", function(e)
|
||
|
|
{
|
||
|
|
unCheckAllOthers("abo24");
|
||
|
|
});
|
||
|
|
abo60.addEventListener("change", function(e)
|
||
|
|
{
|
||
|
|
unCheckAllOthers("abo60");
|
||
|
|
});
|
||
|
|
abo120.addEventListener("change", function(e)
|
||
|
|
{
|
||
|
|
unCheckAllOthers("abo120");
|
||
|
|
});
|
||
|
|
CGV.addEventListener("change", function(e)
|
||
|
|
{
|
||
|
|
if(CGV.checked===true)
|
||
|
|
{
|
||
|
|
divWPBtns.style.display="block";
|
||
|
|
if(abo12.checked===true)
|
||
|
|
showBtnPayment("btn12");
|
||
|
|
else if(abo24.checked===true)
|
||
|
|
showBtnPayment("btn24");
|
||
|
|
else if(abo60.checked===true)
|
||
|
|
showBtnPayment("btn60");
|
||
|
|
else if(abo120.checked===true)
|
||
|
|
showBtnPayment("btn120");
|
||
|
|
else
|
||
|
|
{
|
||
|
|
divWPBtns.style.display="none";
|
||
|
|
CGV.checked=false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
divWPBtns.style.display="none";
|
||
|
|
});
|
||
|
|
|
||
|
|
// Liste des filleuils, si il y en a
|
||
|
|
const xhrGetGodchilds = new XMLHttpRequest();
|
||
|
|
xhrGetGodchilds.open("GET", apiUrl+config.userRoutes+config.getGodChilds);
|
||
|
|
xhrGetGodchilds.onreadystatechange = function()
|
||
|
|
{
|
||
|
|
if (this.readyState == XMLHttpRequest.DONE)
|
||
|
|
{
|
||
|
|
let response=JSON.parse(this.responseText), txtGodchilds="";
|
||
|
|
if (this.status === 200)
|
||
|
|
{
|
||
|
|
const nbGodchilds=response.length;
|
||
|
|
if(nbGodchilds===0)
|
||
|
|
txtGodchilds="Pour l'instant, aucune personne ne s'est inscrite, en vous désignant comme \"parrain\".";// revoir : utiliser le dictionnaire User
|
||
|
|
else
|
||
|
|
{
|
||
|
|
txtGodchilds=nbGodchilds+" utilisateur(s) inscrit(s) en vous désignant comme \"parrain\" :";
|
||
|
|
for(let i in response)
|
||
|
|
txtGodchilds+=response[i].name+" ("+response[i].email+") ";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
addElement(divGodchilds, "p", txtGodchilds, "", ["info"]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xhrGetGodchilds.setRequestHeader("Authorization", "Bearer "+user.token);
|
||
|
|
xhrGetGodchilds.send();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch(e)
|
||
|
|
{
|
||
|
|
addElement(divCrash, "p", txt.serverError, "", ["error"]);
|
||
|
|
console.error(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
initialise();
|