Ré-écriture du JS pour le rendre CSP compliant

6 files changed, 119 insertions, 56 deletions

diff --git a/Static/Js/index.js b/Static/Js/index.js
index 393cafc..f06d0fd 100644
--- a/Static/Js/index.js
+++ b/Static/Js/index.js
@@ -5,14 +5,15 @@
 // #                                                                          #
 // ############################################################################
 
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
+
 
 // ****************************************************************************
 // SLIDESHOW
 // ****************************************************************************
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
 function slideshow_start() {
     let slideNumber = 1;
-    let images = [
+    let images      = [
         "/Media/Images/slide0.jpg",
         "/Media/Images/slide1.jpg",
         "/Media/Images/slide2.jpg"
@@ -37,3 +38,6 @@ function slideshow_start() {
     }
     , 3000);
 }
+
+// Activation du slider
+slideshow_start();
diff --git a/Static/Js/main.js b/Static/Js/main.js
index ca07988..33752de 100644
--- a/Static/Js/main.js
+++ b/Static/Js/main.js
@@ -10,20 +10,11 @@
 
 
 // ****************************************************************************
-// CHANGEMENT DE LANGUE
-// ****************************************************************************
-// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
-document.getElementById("navSelLang").addEventListener("change", () => {
-    document.getElementById("navFormLang").submit();
-});
-
-
-// ****************************************************************************
 // TOGGLE UNE CLASSE SUR UN ELEMENT PARMIS PLUSIEURS IDENTIQUES
 // ****************************************************************************
-function show(parentId, element, id, className) {
+function show(parentId, id, className) {
     // Récupération des tags dans l'élément parent (souvent table dans main)
-    let elements = document.getElementById(parentId).getElementsByTagName(element);
+    let elements = document.getElementById(parentId).getElementsByTagName("section");
     // Rajout de la classe pour l'élément avec l'id donné
     elements[id].classList.add(className);
     // Suppression de cette même classe pour les autres tags
@@ -34,14 +25,44 @@ function show(parentId, element, id, className) {
     }
 }
 
+// On essaie de récupérer les tags main des pages admin & mes missions
+let mainAdmin     = document.getElementById("mainAdmin");
+let mainMyMission = document.getElementById("mainMyMission");
 
-// ****************************************************************************
-// AFFICHER LA BAR DE NAVIGATION
-// ****************************************************************************
-function showNavButtons() {
-    document.getElementsByTagName("nav")[0].classList.toggle("showNav")
-    // first-child à chaque fois
-    document.getElementsByTagName("header")[0].getElementsByTagName("a")[0].getElementsByTagName("i")[0].classList.toggle("navLinkClicked")
+// Si on est dans l'admin
+if (mainAdmin) {
+    // On affiche la première section
+    show("mainAdmin", "secAdminJobs", "show_flex");
+    // Boutton admin emplois
+    document.getElementById("btnAdminJobs").addEventListener("click", () => {
+        show("mainAdmin", "secAdminJobs", "show_flex");
+    });
+    // Boutton admin utilisateurs
+    document.getElementById("btnAdminUsers").addEventListener("click", () => {
+        show("mainAdmin", "secAdminUsers", "show_flex");
+    });
+    // Boutton admin missions
+    document.getElementById("btnAdminMissions").addEventListener("click", () => {
+        show("mainAdmin", "secAdminMissions", "show_flex");
+    });
+}
+
+// Si on est dans mes missions
+if (mainMyMission) {
+    // On affiche la première section
+    show("mainMyMission", "secPending", "show_block");
+    // Boutton mission en attente
+    document.getElementById("btnMyMissionPending").addEventListener("click", () => {
+        show("mainMyMission", "secPending", "show_block");
+    });
+    // Boutton mission en cours
+    document.getElementById("btnMyMissionOngoing").addEventListener("click", () => {
+        show("mainMyMission", "secOngoing", "show_block");
+    });
+    // Boutton mission terminée
+    document.getElementById("btnMyMissionCompleted").addEventListener("click", () => {
+        show("mainMyMission", "secCompleted", "show_block");
+    });
 }
 
 
@@ -51,3 +72,28 @@ function showNavButtons() {
 function redirect(page) {
     window.location.href = `/${page}.php`;
 }
+
+// On essaie de récupérer la division pour rediriger sans timer
+let rNoTimer = document.getElementById("rNoTimer");
+
+// Si elle existe on redirige vers la page indiquée
+if (rNoTimer) {
+    redirect(rNoTimer.getAttribute("data-page"));
+}
+
+// ****************************************************************************
+// CHANGEMENT DE LANGUE
+// ****************************************************************************
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+document.getElementById("navSelLang").addEventListener("change", () => {
+    document.getElementById("navFormLang").submit();
+});
+
+// ****************************************************************************
+// AFFICHER LA BAR DE NAVIGATION
+// ****************************************************************************
+document.getElementById("navButton").addEventListener("click", () => {
+    document.getElementsByTagName("nav")[0].classList.toggle("showNav")
+    // first-child à chaque fois
+    document.getElementsByTagName("header")[0].getElementsByTagName("a")[0].getElementsByTagName("i")[0].classList.toggle("navLinkClicked")
+});
diff --git a/Static/Js/message.js b/Static/Js/message.js
index 0c09120..ed5d846 100644
--- a/Static/Js/message.js
+++ b/Static/Js/message.js
@@ -11,7 +11,7 @@
 // ****************************************************************************
 function start_timer(page) {
     let seconds = 2;
-    let text = document.getElementById("redirect").innerHTML;
+    let text    = document.getElementById("redirect").innerHTML;
     setInterval(() => {
         if (seconds > 0) {
             document.getElementById("redirect").innerHTML = text + seconds + " .";
@@ -23,3 +23,12 @@ function start_timer(page) {
     },
     1000);
 }
+
+
+// On essaie de récupérer la division pour rediriger avec un timer
+let rTimer = document.getElementById("rTimer");
+
+// Si elle existe on redirige vers la page indiquée
+if (rTimer) {
+    start_timer(rTimer.getAttribute("data-page"));
+}
diff --git a/Static/Js/notification.js b/Static/Js/notification.js
index 4747bc3..59094e1 100644
--- a/Static/Js/notification.js
+++ b/Static/Js/notification.js
@@ -11,6 +11,14 @@ function toggle_notif() {
     document.getElementById("notif").classList.toggle("show_notif");
 }
 
+document.getElementById("notifClose").addEventListener("click", () => {
+    toggle_notif();
+});
+
+document.getElementById("notifRedirect").addEventListener("click", () => {
+    redirect("Template/myMission");
+});
+
 // Timeout pour ne pas non plus agressé le client
 setTimeout(() => {
         toggle_notif()
diff --git a/Static/Js/register.js b/Static/Js/register.js
index f5cdc92..c0d9df2 100644
--- a/Static/Js/register.js
+++ b/Static/Js/register.js
@@ -6,16 +6,16 @@
 // ############################################################################
 
 
-// Num -   N'importe quel chiffre entre 0 et 9 [0-9]
+// 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 [`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~µ°€£]
+// 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]+$/)
+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;
@@ -49,21 +49,19 @@ function valid_reg(condition, element) {
     }
 }
 
-function check_email() {
+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;
+    let email  = document.getElementById("email").value;
     validEmail = valid_reg(regEmail.test(email), "mailNotice");
-
     valid_all();
-}
+});
 
-function check_pass() {
+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");
+    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");
-
+    validLength  = valid_reg((pass.length >= 8),    "passLength");
     valid_all();
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/Static/Js/userinfo.js b/Static/Js/userinfo.js
index ab8982c..28eee2f 100644
--- a/Static/Js/userinfo.js
+++ b/Static/Js/userinfo.js
@@ -26,22 +26,31 @@ var payload = [];
 function init() {
     // Récupération des emplois déja présent
     let jobs = document.getElementsByClassName("jobsListElem");
-
     // Pour chaque emploi disponible récupération de sa valeur
     for (i = 0; i < jobs.length; i ++) {
         if (jobs[i].getAttribute("data-value") !== "") {
             payload.push(jobs[i].getAttribute("data-value"));
-            jobs[i].onclick = (ptrEvent) => {remove(ptrEvent)};
+            jobs[i].addEventListener("click", (ptrEvent) => {remove(ptrEvent)});
         }
     }
+    // Transformation de la liste des emplois choisis en JSON
+    // et inscription de ce dernier dans la "value" de l'input "jobs".
+    document.getElementById("jobs").value = JSON.stringify(payload);
+}
 
+// Suppression d'un emploi
+function remove(ptrEvent) {
+    // Suppression de l'emploi dans "payload"
+    payload.splice(payload.indexOf(ptrEvent.srcElement.getAttribute("data-value")), 1);
+    // Suppression du "div" de l'emploi
+    document.getElementById("jobsListGrid").removeChild(ptrEvent.srcElement);
     // Transformation de la liste des emplois choisis en JSON
     // et inscription de ce dernier dans la "value" de l'input "jobs".
     document.getElementById("jobs").value = JSON.stringify(payload);
 }
 
 // Ajout d'un emploi
-function add() {
+document.getElementById("addButton").addEventListener("click", () => {
     // Récupération du nom et de la valeur du choix dans le "select" des emplois
     let jobName  = document.getElementById("jobsSel").options[jobsSel.selectedIndex].text;
     let jobValue = document.getElementById("jobsSel").options[jobsSel.selectedIndex].value;
@@ -50,7 +59,6 @@ function add() {
     if (!payload.includes(jobValue) && jobValue !== "") {
         // Ajout à payload
         payload.push(jobValue);
-
         // Création, configuration et ajout d'une nouvelle div pour l'emploi choisi
         // Création du "i"
         let i = document.createElement("i");
@@ -59,26 +67,16 @@ function add() {
         let div = document.createElement("div");
         div.className = "jobsListElem";
         div.dataset.value = jobValue;
-        div.onclick = (ptrEvent) => {remove(ptrEvent)};
+        div.addEventListener("click", (ptrEvent) => {remove(ptrEvent)});
         div.appendChild(document.createTextNode(jobName));
         div.appendChild(i);
         // Enfin, ajout au document
         document.getElementById("jobsListGrid").appendChild(div);
-
         // Transformation de la liste des emplois choisis en JSON
         // et inscription de ce dernier dans la "value" de l'input "jobs".
         document.getElementById("jobs").value = JSON.stringify(payload);
     }
-}
-
-function remove(ptrEvent) {
-    // Suppression de l'emploi dans "payload"
-    payload.splice(payload.indexOf(ptrEvent.srcElement.getAttribute("data-value")), 1);
-
-    // Suppression du "div" de l'emploi
-    document.getElementById("jobsListGrid").removeChild(ptrEvent.srcElement);
+});
 
-    // Transformation de la liste des emplois choisis en JSON
-    // et inscription de ce dernier dans la "value" de l'input "jobs".
-    document.getElementById("jobs").value = JSON.stringify(payload);
-}
+// Déclenchement de l'init
+init();