Ajout d'un système de notification pour alerter les pro et finition

19 files changed, 281 insertions, 78 deletions

diff --git a/Static/Css/admin.css b/Static/Css/admin.css
index 96d9c03..91a04c1 100644
--- a/Static/Css/admin.css
+++ b/Static/Css/admin.css
@@ -7,12 +7,13 @@
 ############################################################################ 
 */
 
+
 /* BUTTONS */
 #adminButtons {
     display:         flex;
     justify-content: space-around;
     gap:             1em;
-    width:           80%;
+    max-width:       80%;
     margin-left:     auto;
     margin-right:    auto;
     padding:         2em;
@@ -61,4 +62,4 @@
     #secAdminMissions form {
         flex-direction: column;
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/footer.css b/Static/Css/footer.css
index d0e4c02..ecbc25e 100644
--- a/Static/Css/footer.css
+++ b/Static/Css/footer.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 /* FOOTER */
 footer {
     min-height:         10vh;
diff --git a/Static/Css/login.css b/Static/Css/login.css
index 0b373b1..2c3b2cc 100644
--- a/Static/Css/login.css
+++ b/Static/Css/login.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 /* MAIN */
 #mainLogin form {
     display:         flex;
diff --git a/Static/Css/main.css b/Static/Css/main.css
index ff1e229..7614cd3 100644
--- a/Static/Css/main.css
+++ b/Static/Css/main.css
@@ -6,7 +6,6 @@
 #                                                                          #
 ############################################################################ 
 
-
 Sites web utilisés pour le CSS:
 https://css-tricks.com/guides/
 https://stackoverflow.com/
@@ -16,51 +15,60 @@ Toutes les recherches sont effectuées en anglais
 sur mon instance SearX https://searx.debulois.fr
 */
 
+
 :root {
     /* Global */
-    --mainSiteColor:           #c0392b;
-    --bodyBg:                  #fafafa;  
-    --separatorBg:              var(--bodyBg);
-    --bg:                      white;
-    --text:                    black;
+    --mainSiteColor:             #c0392b;
+    --bodyBg:                    #fafafa;  
+    --separatorBg:                var(--bodyBg);
+    --bg:                        white;
+    --text:                      black;
     /* Header & navbar */
-    --navbarTextColor:          var(--text);
-    --headerBg:                 var(--bg);
-    --navBg:                   #f8f8f8;
+    --navbarTextColor:            var(--text);
+    --headerBg:                   var(--bg);
+    --navBg:                     #f8f8f8;
     /* Slideshow */
-    --slideText:               whitesmoke;
-    --slideBg:                 black;
-    --slideStroke:             black;
+    --slideText:                 whitesmoke;
+    --slideBg:                   black;
+    --slideStroke:               black;
     /* Footer */
-    --footerTextColor:         #636e72;
-    --footerBgColor:           #2d3436;
+    --footerTextColor:           #636e72;
+    --footerBgColor:             #2d3436;
     /* Tableaux */
-    --tableText:                var(--text);
-    --tableBg:                  var(--bodyBg);
-    --tdBorderColor:           rgba(0, 0, 0, 0.2);
-    --tableStarUnchecked:      darkgray;
-    --tableStarChecked:        orange;
+    --tableText:                   var(--text);
+    --tableBg:                     var(--bodyBg);
+    --tdBorderColor:              rgba(0, 0, 0, 0.2);
+    --tableStarUnchecked:         darkgray;
+    --tableStarChecked:           orange;
     /* Messages */
-    --messageTextErrorColor:   red;
-    --messageTextSuccessColor: green;
+    --messageTextErrorColor:      red;
+    --messageTextSuccessColor:    green;
     /* Input icon et button */
-    --iconColor:               white;
-    --btnHoverBg:              #e74c3c;
+    --iconColor:                  white;
+    --btnHoverBg:                 #e74c3c;
     /* Input border */
-    --inputBorder:              2px solid var(--mainSiteColor);
-    --thBorder:                 2px solid var(--mainSiteColor);
-    --tdBorder:                 2px solid var(--tdBorderColor);
-    --iBorderRadius:            5px 0px 0px 5px;
-    --inputBorderRadius:        0px 5px 5px 0px;
+    --inputBorder:                 2px solid var(--mainSiteColor);
+    --thBorder:                    2px solid var(--mainSiteColor);
+    --tdBorder:                    2px solid var(--tdBorderColor);
+    --iBorderRadius:               5px 0px 0px 5px;
+    --inputBorderRadius:           0px 5px 5px 0px;
+    /* Notification */
+    --notifAsideBg:               #f8f8f8;
+    --notifAsideBorder:            4px solid #cf7e39;
+    --notifButtonCloseColor:      #1a1a1a;
+    --notifButtonCloseBg:         #d3c9c3c9;
+    --notifButtonCloseBorder:      solid 1px #6e5e5e;
+    --notifButtonCloseHoverColor: #e7e7e7;
+    --notifButtonCloseHoverBg:    #ff5959;
     /* Fonts size */
-    --fontSizeI:                20px;
-    --fontSizeSlideP:           34px;
-    --fontSizeSmallPhone:       12px;
-    --fontSizeSmallLess:        14px;
-    --fontSizeSmall:            16px;
-    --fontSizeSmallPlus:        18px;
-    --fontSizeMedium:           26px;
-    --fontSizeLarge:            28px;
+    --fontSizeI:                   20px;
+    --fontSizeSlideP:              34px;
+    --fontSizeSmallPhone:          12px;
+    --fontSizeSmallLess:           14px;
+    --fontSizeSmall:               16px;
+    --fontSizeSmallPlus:           18px;
+    --fontSizeMedium:              26px;
+    --fontSizeLarge:               28px;
 }
 
 @font-face {
@@ -184,6 +192,7 @@ main table {
 main th {
     border:           var(--thBorder);
     background-color: var(--tableBg);
+
 }
 
 main td {
@@ -203,7 +212,7 @@ main input[type="email"],
 main input[type="password"] {
     padding:       2px;
     height:        2.5em;
-    font-size:     calc(32px / 2.5);
+    font-size:     calc(32px / 2.5); /* nécessaire par rapport à quand c'est une div */
     border:        var(--inputBorder);
     border-radius: var(--inputBorderRadius);
 }
@@ -237,4 +246,4 @@ main button:hover {
     main h3 {
         font-size: var(--fontSizeSmallPlus);
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/message.css b/Static/Css/message.css
index d2276ea..22d27cd 100644
--- a/Static/Css/message.css
+++ b/Static/Css/message.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .success {
     font-weight:     bold;
     text-decoration: underline;
@@ -23,4 +24,4 @@
 
 #mainMessage h3 {
     border: none;
-}
\ No newline at end of file
+}
diff --git a/Static/Css/mission.css b/Static/Css/mission.css
index b9383d9..944227e 100644
--- a/Static/Css/mission.css
+++ b/Static/Css/mission.css
@@ -8,6 +8,7 @@
 ############################################################################ 
 */
 
+
 #mainMission form {
     display:         flex;
     flex-direction:  column;
@@ -21,6 +22,12 @@
     width: 70%;
 }
 
+#mainMission select {
+    height:        3em;
+    font-size:     calc((var(--fontSizeI) * 2) / 3); /* Pour avoir la même taille qu'un logo */
+    border-radius: var(--inputBorderRadius);
+}
+
 #mainMission input[type="text"] {
     width: inherit;
 }
diff --git a/Static/Css/myMission.css b/Static/Css/myMission.css
index 34afff3..ca22ddb 100644
--- a/Static/Css/myMission.css
+++ b/Static/Css/myMission.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 #myMissionButtons {
     display:         flex;
     justify-content: space-around;
diff --git a/Static/Css/navbar.css b/Static/Css/navbar.css
index 6887f0d..91b102b 100644
--- a/Static/Css/navbar.css
+++ b/Static/Css/navbar.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .showNav {
     top: 0vh !important;
 }
@@ -127,4 +128,4 @@ nav p {
     header a:first-child {
         min-width: 20%;
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/notification.css b/Static/Css/notification.css
new file mode 100644
index 0000000..beddf4a
--- /dev/null
+++ b/Static/Css/notification.css
@@ -0,0 +1,123 @@
+
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS du message de notification                              #
+#                                                                          #
+############################################################################ 
+https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
+https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+*/
+
+
+.show_notif {
+    left: 2em;
+}
+
+/* Div de la notification */
+aside {
+    z-index:           2;                       /* Position en profondeur */
+    position:          fixed;                   /* Comment vas être positionné l'élément */
+    left:              -75%;                    /* position à gauche de l'écran (démarre masqué) */
+    bottom:            2em;                     /* position en bas de l'écran */
+    width:             350px;                   /* largeur de la div définie selon le contenu */
+    padding:           0.3em;                   /* marge interne de 1 fois la taille du texte */
+    background-color:  var(--notifAsideBg);     /* couleur du fond */
+    border:            var(--notifAsideBorder); /* taille type et couleur de la bordure */
+    border-radius:     10px;                    /* arrondie des angles de la bordure */
+    text-align:        center;                  /* le texte est centré */
+    box-shadow:        4px 4px 9px black;     /* Ombre, déportation x, deportation y, diffusion, couleur */
+    transition:        all 0.6s ease-in-out;    /* ajout d'un effet acceleration/decerelation de l'animation */
+}
+
+/* Zone clickable */ 
+aside a {
+    cursor: pointer; /* le curseur deviens un pointeur quand on le survole */
+}
+
+/* Boutton pour fermer */
+aside button {
+    position:          absolute; /* Position fixe relative */
+    right:             0px;      /* tout à droite */
+    top:               0px;      /* tout en haut */
+    border:            none;     /* sans bordure*/
+    padding:           0px;
+    margin-top:        4px;
+    margin-right:      4px;
+    color:             var(--notifButtonCloseColor);
+    background-color:  var(--notifButtonCloseBg);
+    border-radius:     4px;
+    font-size:         19px;
+    width:             23px;
+    line-height:       23px;
+    height:            23px;
+    border:            var(--notifButtonCloseBorder);
+    transition:        all 0.05s ease-in-out;
+}
+
+aside button:hover {
+    cursor:            pointer; /* le curseur deviens un pointeur quand on le survole */
+    color:            var(--notifButtonCloseHoverColor);
+    background-color: var(--notifButtonCloseHoverBg);
+}
+
+aside span {
+    float:                     left;                      /* float à gauche */
+    position:                  absolute;                  /* position fixe relative  */
+    left:                      0.5em;                     /* distance a gauche */
+                                                          /* (espace totale(h3, p pad & marg + font-size) - cloche font-size) / 2*/
+    top:                       calc((52.8px - 32px) / 2); /* centré  */
+    font-size:                 32px;                      /* taille de la cloche */
+    animation-name:            cloche;                    /* nom animation keyframe */
+    animation-timing-function: ease-in-out;               /* vitesse et style de transition */
+    animation-iteration-count: infinite;                  /* répété à l'infini */
+    animation-duration:        2.7s;                      /* duréé de l'animation */
+}
+
+/* Titre de la fenetre */
+aside h3 {
+    font-size:     17px;
+    margin-top:    0px;   /* on supprime la marge du haut */
+    padding-top:   0.3em; /* on la remplace avec du padding pour que la zone soit clickable */
+    margin-bottom: 0.3em;
+}
+
+/* Contenu */
+aside p {
+    font-style:      italic; /* le texte est en italic */
+    text-decoration: underline;
+    margin-bottom:   0px;
+    padding-bottom:  0.3em;
+    margin-top:      0.3em;
+}
+
+/* Etapes de l'animation */
+@keyframes cloche {
+    0% {transform:   rotate(5deg)   scale(1.1);}
+    4% {transform:   rotate(-10deg) scale(1.2);}
+    8% {transform:   rotate(10deg)  scale(1.2);}
+    12% {transform:  rotate(-10deg) scale(1.2);}
+    16% {transform:  rotate(10deg)  scale(1.2);}
+    20% {transform:  rotate(-10deg) scale(1.2);}
+    24% {transform:  rotate(10deg)  scale(1.2);}
+    28% {transform:  rotate(-10deg) scale(1.2);}
+    32% {transform:  rotate(10deg)  scale(1.2);}
+    36% {transform:  rotate(-5deg)  scale(1.1);}
+    40%  {transform: rotate(0deg)   scale(1);}
+    100% {transform: rotate(0deg);}
+}
+
+/* MOBILE */
+@media screen and (max-width: 768px) {
+    .show_notif {
+        bottom: 1em;
+        left:   calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
+    }
+    
+    /* Div de la notification */
+    aside {
+        bottom: -300px; 
+        width:  90%;
+        left:   calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
+    }
+}
diff --git a/Static/Css/register.css b/Static/Css/register.css
index 56808af..9324ad3 100644
--- a/Static/Css/register.css
+++ b/Static/Css/register.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .valid {
     color: #338533;
 }
@@ -53,6 +54,7 @@
     flex-direction: column;
     align-items: center;
     gap: 0.5em;
+    width: 100%;
 }
 
 #mainRegister input[type="email"],
@@ -67,4 +69,4 @@
         flex-direction: column;
         font-size: var(--fontSizeSmallPhone);
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/search.css b/Static/Css/search.css
index 7362ac9..be96775 100644
--- a/Static/Css/search.css
+++ b/Static/Css/search.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .star {
     width:            1.2em !important;
     background-color: var(--tableBg) !important;
@@ -51,7 +52,7 @@
 
 #mainSearch select {
     height:        3em;
-    font-size:     calc((var(--fontSizeI) * 2) / 3);
+    font-size:     calc((var(--fontSizeI) * 2) / 3); /* Pour avoir la même taille qu'un logo */
     border-radius: var(--inputBorderRadius);
 }
 
@@ -78,4 +79,4 @@
     #divSearch {
         flex-direction: column;
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/slideshow.css b/Static/Css/slideshow.css
index d2cdaa3..8dd6f39 100644
--- a/Static/Css/slideshow.css
+++ b/Static/Css/slideshow.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .slideDotSelected {
     color:     var(--mainSiteColor);
     transform: scale(1.4);
@@ -72,4 +73,4 @@
     #secSlides p {
         font-size: var(--fontSizeMedium);
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/userInfo.css b/Static/Css/userInfo.css
index 45d1133..c9113df 100644
--- a/Static/Css/userInfo.css
+++ b/Static/Css/userInfo.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .jobsListElem {
     border-radius:     10px;
     background-color: rgb(243, 201, 201);
@@ -51,7 +52,7 @@
 
 #userJob div {
     width:           70%;
-    font-size:       calc(36px / 2.5);
+    font-size:       calc(36px / 2.5); /* Pour avoir la meme hauter qu'un input */
     height:          2.5em;
     line-height:     2.5em;
     display:         flex;
@@ -86,4 +87,4 @@
     #userJob div span{
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Js/index.js b/Static/Js/index.js
index 31ee34f..0f15b3d 100644
--- a/Static/Js/index.js
+++ b/Static/Js/index.js
@@ -5,11 +5,13 @@
 // #                                                                          #
 // ############################################################################ 
 
+
 // ****************************************************************************
 // SLIDESHOW
 // ****************************************************************************
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
-function slideshow_start(slideNumber = 1) {
+function slideshow_start() {
+    let slideNumber = 1;
     let images = [
         "/Media/Images/slide0.jpg",
         "/Media/Images/slide1.jpg",
@@ -18,7 +20,7 @@ function slideshow_start(slideNumber = 1) {
 
     setInterval(() => {
         // Changement de l'image de fond de de la div
-        document.getElementById("secSlides").style.backgroundImage = `url("${images[slideNumber]}")`;
+        document.getElementById("secSlides").style.backgroundImage = "url(" + images[slideNumber] + ")";
         // Utilisation de ternary, utilisation: condition ? Sivrai : Sifaux
         // Untoggle les précedents
         document.getElementById(`slide_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("show_block");
diff --git a/Static/Js/main.js b/Static/Js/main.js
index 3a6c3e5..84f7151 100644
--- a/Static/Js/main.js
+++ b/Static/Js/main.js
@@ -12,6 +12,7 @@
 // ****************************************************************************
 // CHANGEMENT DE LANGUE
 // ****************************************************************************
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
 document.getElementById("navSelLang").addEventListener("change", () => {
     document.getElementById("navFormLang").submit();
 });
@@ -21,8 +22,11 @@ document.getElementById("navSelLang").addEventListener("change", () => {
 // TOGGLE UNE CLASSE SUR UN ELEMENT PARMIS PLUSIEURS IDENTIQUES
 // ****************************************************************************
 function show(parentId, element, id, className) {
+    // Récupération des tags dans l'élément parent (souvent table dans main)
     let elements = document.getElementById(parentId).getElementsByTagName(element);
+    // 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
     for (i = 0; i < elements.length; i++) {
         if (elements[i].id !== id) {
             elements[i].classList.remove(className);
@@ -39,3 +43,11 @@ function showNavButtons() {
     // first-child à chaque fois
     document.getElementsByTagName("header")[0].getElementsByTagName("a")[0].getElementsByTagName("i")[0].classList.toggle("navLinkClicked")
 }
+
+
+// ****************************************************************************
+// REDIRECTION
+// ****************************************************************************
+function redirect(page) {
+    window.location.href = `/${page}.php`;
+}
diff --git a/Static/Js/message.js b/Static/Js/message.js
index 06ba511..8043a67 100644
--- a/Static/Js/message.js
+++ b/Static/Js/message.js
@@ -7,13 +7,6 @@
 
 
 // ****************************************************************************
-// REDIRECTION
-// ****************************************************************************
-function redirect(page) {
-    window.location.href = `/${page}.php`;
-}
-
-// ****************************************************************************
 // DECLENCHEMENT DU TIMER POUR UNE REDIRECTION
 // ****************************************************************************
 function start_timer(page) {
@@ -21,10 +14,10 @@ function start_timer(page) {
     let text = document.getElementById("redirect").innerHTML;
     setInterval(() => {
         if (seconds > 0) {
-            document.getElementById("redirect").innerHTML = `${text} ${seconds} .`;
+            document.getElementById("redirect").innerHTML = text + seconds + " .";
             seconds --;
         } else {
-            document.getElementById("redirect").innerHTML = `${text} ${seconds} .`;
+            document.getElementById("redirect").innerHTML = text + seconds + " .";
             redirect(page);
         }
     },
diff --git a/Static/Js/notification.js b/Static/Js/notification.js
new file mode 100644
index 0000000..c15760a
--- /dev/null
+++ b/Static/Js/notification.js
@@ -0,0 +1,18 @@
+
+// ############################################################################
+// #                                                                          #
+// # Description: JS utile sur la page des messages                           #
+// #                                                                          #
+// ############################################################################  
+
+
+// Ajout de la class show_notif pour faire disparaitre ou apparaitre la bulle de notification
+function toggle_notif() {
+    document.getElementById("notif").classList.toggle("show_notif");
+}
+
+// Timeout pour ne pas non plus agressé le client
+setTimeout(() => {
+        toggle_notif()
+    }
+, 1500)
diff --git a/Static/Js/register.js b/Static/Js/register.js
index c751b77..b22f4de 100644
--- a/Static/Js/register.js
+++ b/Static/Js/register.js
@@ -5,12 +5,38 @@
 // #                                                                          #
 // ############################################################################ 
 
-// Regex pour vérifier la validité du mdp
-const numb    = new RegExp(/[0-9]/)
-const upper   = new RegExp(/[A-Z]/)
-const special = new RegExp(/[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~µ°€£]/)
 
-function is_valid(condition, element) {
+// 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 [`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~µ°€£]
+// 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]+$/)
+
+// Initialisation des variables
+let validEmail;
+let validNumb;
+let validUpper;
+let validSpecial;
+let validLength;
+
+function valid_all() {
+    let submitButton = document.getElementById("submit");
+    // Si tout est validé on active le button sumbit
+    if (validLength && validUpper && validNumb && validSpecial && validEmail) {
+        submitButton.classList.remove("deactivate");
+        submitButton.disabled = false;
+    } else {
+        submitButton.classList.add("deactivate");
+        submitButton.disabled = true;
+    }
+}
+
+function valid_reg(condition, element) {
     // Si la regex est bonne on selectionne la class css pour l'afficher
     if (condition) {
         document.getElementById(element).classList.remove("invalid");
@@ -23,21 +49,21 @@ function is_valid(condition, element) {
     }
 }
 
+function check_email() {
+    // On récupère l'email par id dans la page et on test notre regex
+    let email = document.getElementById("email").value;
+    validEmail = valid_reg(regEmail.test(email), "mailNotice");
+
+    valid_all();
+}
+
 function check_pass() {
-    // On récupère les éléments dans la page et on test nos regex sur le mdp
+    // On récupère la valeur par id du mdp dans la page et on test nos regex
     let pass         = document.getElementById("password").value;
-    let submitButton = document.getElementById("submit");
-    let validNumb    = is_valid(numb.test(pass), "passNumb");
-    let validUpper   = is_valid(upper.test(pass), "passUpper");
-    let validSpecial = is_valid(special.test(pass), "passSpecial");
-    let validLength  = is_valid((pass.length >= 8), "passLength");
+    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");
 
-    // Si tout est validé on active le button sumbit
-    if (validLength && validUpper && validNumb && validSpecial) {
-        submitButton.classList.remove("deactivate");
-        submitButton.disabled = false;
-    } else {
-        submitButton.classList.add("deactivate");
-        submitButton.disabled = true;
-    }
+    valid_all();
 }
\ No newline at end of file
diff --git a/Static/Js/userinfo.js b/Static/Js/userinfo.js
index 8f1e239..460c91b 100644
--- a/Static/Js/userinfo.js
+++ b/Static/Js/userinfo.js
@@ -4,6 +4,7 @@
 // # Description: JS utile sur la page user infos                             #
 // #                                                                          #
 // ############################################################################  
+
 // Mes sources pour créer cette partie:
 // https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript
 // https://stackoverflow.com/questions/47951287/dynamically-add-li-to-ul-javascript
@@ -14,6 +15,7 @@
 // https://www.w3docs.com/snippets/javascript/how-to-remove-an-element-from-an-array-in-javascript.html
 // On passe par du JSON pour passer la liste des emplois du pro
 
+
 // ****************************************************************************
 // GESTION AJOUT/SUPPRESSION D'UN EMPLOI ET PASSAGE A L'INPUT 
 // DES VALEURS SELECTIONNEES