refacto: devWeb - move css and js in files and import them in .jsp files

S2/DevWeb/Projet/src/main/java/uppa/project/bean/ProfileBean.java

@@ -15,7 +15,7 @@ import uppa.project.json.HttpResponse;
 import uppa.project.json.HttpResponseCode;
 
 public class ProfileBean {
-  private String id;
+  private String username;
   private String oldEmail;
   private String email;
   private String oldPassword;
@@ -38,7 +38,7 @@ public class ProfileBean {
     try {
        userDAO= new Game_JPA_DAO_Factory().getDAOUser();
       // Vérification de l'existence de l'utilisateur
-      user = userDAO.findById(Integer.parseInt(id));
+      user = (userDAO.findByField("username",username).length == 0 ? null : userDAO.findByField("username",username)[0]);
       if (user == null) {
         error = new HttpResponse(HttpResponseCode.UNAUTHORIZED, "Utilisateur non trouvé");
         entityManager.getTransaction().rollback();
@@ -81,11 +81,11 @@ public class ProfileBean {
 
   /**
    *
-   * @param id l'identifiant de l'utilisateur
+   * @param username le pseudo de l'utilisateur
    * @return l'entité
    */
-  public ProfileBean setId(String id) {
+  public ProfileBean setUsername(String username) {
-    this.id = id;
+    this.username = username;
     return this;
   }
 

S2/DevWeb/Projet/src/main/java/uppa/project/web/servlet/ProfileServlet.java

@@ -67,7 +67,7 @@ public class ProfileServlet extends HttpServlet {
     PrintWriter out = response.getWriter();
 
     ProfileBean profileBean = new ProfileBean()
-      .setId(request.getParameter("id"))
+      .setUsername(request.getParameter("username"))
       .setOldEmail(request.getParameter("oldEmail"))
       .setEmail(request.getParameter("email"))
       .setOldPassword(request.getParameter("oldPassword"))

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/forgotten-password.jsp

@@ -4,6 +4,10 @@
 <%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %>
 
 <layout:form title="Mot de passe oublié">
+    <jsp:attribute name="script">
+        <script defer type="module" src="${pageContext.request.contextPath}/static/js/form/forgotten-password.js"></script>
+    </jsp:attribute>
+    <jsp:body>
         <component:hero>
             <div class="columns is-centered">
                 <div class="column is-5-tablet is-5-desktop is-5-widescreen">
@@ -14,4 +18,5 @@
                 </div>
             </div>
         </component:hero>
+    </jsp:body>
 </layout:form>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/login.jsp

@@ -4,6 +4,10 @@
 <%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %>
 
 <layout:form title="Connexion">
+    <jsp:attribute name="script">
+        <script defer type="module" src="${pageContext.request.contextPath}/static/js/form/login.js"></script>
+    </jsp:attribute>
+    <jsp:body>
         <component:hero>
                 <div class="columns is-centered">
                     <div class="column is-5-tablet is-5-desktop is-5-widescreen">
@@ -17,4 +21,5 @@
                     </div>
                 </div>
         </component:hero>
+    </jsp:body>
 </layout:form>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/new-game.jsp

@@ -4,6 +4,10 @@
 <%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %>
 
 <layout:form>
+    <jsp:attribute name="script">
+        <script defer type="module" src="${pageContext.request.contextPath}/static/js/form/new-game.js"></script>
+    </jsp:attribute>
+    <jsp:body>
         <component:hero>
             <div class="columns is-centered">
                 <div class="column is-5-tablet is-5-desktop is-5-widescreen">
@@ -20,4 +24,5 @@
                 </div>
             </div>
         </component:hero>
+    </jsp:body>
 </layout:form>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp

@@ -7,6 +7,7 @@
 <layout:base title="Profil">
     <jsp:attribute name="head">
         <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/form.css"/>
+        <script defer type="module" src="${pageContext.request.contextPath}/static/js/form/profile.js"></script>
     </jsp:attribute>
     <jsp:body>
         <component:hero>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/register.jsp

@@ -4,6 +4,10 @@
 <%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %>
 
 <layout:form title="Inscription">
+    <jsp:attribute name="script">
+        <script defer type="module" src="${pageContext.request.contextPath}/static/js/form/register.js"></script>
+    </jsp:attribute>
+    <jsp:body>
         <component:hero>
             <div class="columns is-centered">
                 <div class="column is-5-tablet is-5-desktop is-5-widescreen">
@@ -18,4 +22,5 @@
                 </div>
             </div>
         </component:hero>
+    </jsp:body>
 </layout:form>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/reset-password.jsp

@@ -4,6 +4,10 @@
 <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
 
 <layout:form title="Récuperation mot de passe">
+    <jsp:attribute name="script">
+        <script defer type="module" src="${pageContext.request.contextPath}/static/js/form/reset-password.js"></script>
+    </jsp:attribute>
+    <jsp:body>
         <component:hero>
             <div class="columns is-centered">
                 <div class="column is-5-tablet is-5-desktop is-5-widescreen">
@@ -18,4 +22,5 @@
                 </div>
             </div>
         </component:hero>
+    </jsp:body>
 </layout:form>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/navbar.tag

@@ -64,22 +64,3 @@
         </div>
     </div>
 </nav>
-
-<script type="module" defer>
-    // Récupération de tous les éléments de classe "navbar-burger"
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-
-    // Ajout d'un enventListener sur chaque élément
-    $navbarBurgers.forEach(el => {
-        el.addEventListener('click', () => {
-
-            // Récupere la valeur de l'attribut "data-target"
-            const target = el.dataset.target;
-            const $target = document.getElementById(target);
-
-            // Ajoute ou supprime la classe "is-active" sur les éléments
-            el.classList.toggle('is-active');
-            $target.classList.toggle('is-active');
-        });
-    });
-</script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/forgotten-password.tag

@@ -4,7 +4,7 @@
     <div class="field">
         <label class="label" for="email">Email</label>
         <div class="control has-icons-left">
-            <input id="email" placeholder="johndoe@exemple.com" class="input is-fullwidth" required/>
+            <input id="email" name="email" placeholder="johndoe@exemple.com" class="input is-fullwidth" required/>
             <span class="icon is-small is-left">
                 <i class="fas fa-envelope"></i>
             </span>
@@ -14,74 +14,34 @@
     <input type="submit" class="button is-primary is-fullwidth has-text-white" value="Envoyer">
 </form>
 
-<script defer type="module">
+<%--<script defer type="module">--%>
-  const forgottenPasswordForm = document.querySelector("form#forgotten-password-form");
+<%--  const forgottenPasswordForm = document.querySelector("form#forgotten-password-form");--%>
 
-  // Champ email
+<%--  // Champ email--%>
-  const emailInput = document.querySelector("input#email");
+<%--  const inputs = [document.querySelector("input#email")];--%>
 
-  // Ajout de l'écouteur d'événement sur la soumission du formulaire
+<%--  // Ajout de l'écouteur d'événement sur la soumission du formulaire--%>
-  forgottenPasswordForm.addEventListener("submit", onSubmit)
+<%--  forgottenPasswordForm.addEventListener("submit", onSubmit)--%>
 
-  /**
+<%--  /**--%>
-   * Gestion de la soumission du formulaire
+<%--   * Gestion de la soumission du formulaire--%>
-   * @param event {Event} - Événement de soumission du formulaire
+<%--   * @param event {Event} - Événement de soumission du formulaire--%>
-   */
+<%--   */--%>
-  function onSubmit(event) {
+<%--  function onSubmit(event) {--%>
-    event.preventDefault();
+<%--    event.preventDefault();--%>
 
-    const {action, method} = forgottenPasswordForm;
+<%--    const {action, method} = forgottenPasswordForm;--%>
 
-    const url = new URL(action);
+<%--    const url = new URL(action);--%>
-    url.searchParams.append("email", emailInput.value);
+<%--    url.searchParams.append("email", emailInput.value);--%>
 
-    fetch(url, {headers: {"Content-Type": "application/json"}, method})
+<%--    fetch(url, {headers: {"Content-Type": "application/json"}, method})--%>
-      .then(res => res.json())
+<%--      .then(res => res.json())--%>
-      .then(data => {
+<%--      .then(data => {--%>
-        if (data.code !== 200) throw new Error(data.message);
+<%--        if (data.code !== 200) throw new Error(data.message);--%>
-      })
+<%--      })--%>
-      .then(() => window.location.href = "${pageContext.request.contextPath}/login")
+<%--      .then(() => window.location.href = "${pageContext.request.contextPath}/login")--%>
-      .catch(onError);
+<%--      .catch(onError);--%>
-  }
+<%--  }--%>
-
+<%--</script>--%>
-  /**
-   * Gestion des erreurs lors de la soumission du formulaire
-   * @param error {Error} - Erreur survenue lors de la soumission du formulaire
-   */
-  function onError(error) {
-    console.error("Error:", error)
-
-    // Input fields in red
-    emailInput.classList.add("is-danger");
-
-    // Shake the inputs
-    emailInput.style.animation = "shake 0.5s ease-in-out";
-
-    // Notification
-    const notification = document.createElement("div");
-    notification.classList.add("notification", "is-danger");
-
-    const notificationTitle = document.createElement("p");
-    notificationTitle.classList.add("title", "is-6");
-    notificationTitle.innerHTML = "Erreur";
-
-    const notificationIcon = document.createElement("span");
-    notificationIcon.classList.add("icon");
-    notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
-
-    const notificationMessage = document.createElement("p");
-    notificationMessage.classList.add("subtitle", "is-6");
-    notificationMessage.innerHTML = error.message;
-
-    notificationTitle.appendChild(notificationIcon);
-    notification.appendChild(notificationTitle);
-    notification.appendChild(notificationMessage);
-    document.body.appendChild(notification);
-
-    setTimeout(() => notification.remove(), 5010);
-  }
-
-  // Retrait des animations sur le champ email
-  emailInput.addEventListener("animationend", () => emailInput.style.animation = "");
-</script>
 

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/login.tag

@@ -28,59 +28,3 @@
 
     <input type="submit" class="button is-primary has-text-white is-fullwidth" value="Connexion">
 </form>
-
-<script defer type="module">
-    const form = document.querySelector("form#login-form");
-    const inputs = form.querySelectorAll("input[type='text'], input[type='password']");
-
-    form.addEventListener("submit", event => {
-        event.preventDefault();
-
-        const {action, method} = form;
-
-        const url = new URL(action);
-        inputs.forEach(input => url.searchParams.append(input.getAttribute("name"), input.value));
-
-        fetch(url, {headers: {"Content-Type": "application/json"}, method})
-            .then(res => res.json())
-            .then(data => {
-                if (data.code !== 200) throw new Error(data.message);
-            })
-            .then(() => window.location.href = "${pageContext.request.contextPath}/lobby")
-            .catch((error) => {
-                // Animations des champs
-                inputs.forEach(input => {
-                    input.classList.add("is-danger");
-                    input.style.animation = "shake 0.5s ease-in-out"
-                });
-
-                // Notification
-                const notification = document.createElement("div");
-                notification.classList.add("notification", "is-danger");
-
-                const notificationTitle = document.createElement("p");
-                notificationTitle.classList.add("title", "is-6");
-                notificationTitle.innerHTML = "Erreur";
-
-                const notificationIcon = document.createElement("span");
-                notificationIcon.classList.add("icon");
-                notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
-
-                const notificationMessage = document.createElement("p");
-                notificationMessage.classList.add("subtitle", "is-6");
-                notificationMessage.innerHTML = error.message;
-
-                notificationTitle.appendChild(notificationIcon);
-                notification.appendChild(notificationTitle);
-                notification.appendChild(notificationMessage);
-                document.body.appendChild(notification);
-
-                // Retirer la notification et les animations après 5 secondes
-                setTimeout(() => notification.remove(), 5010);
-            });
-    });
-
-    // Retirer les animations des champs après la fin de l'animation
-    inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = ""));
-</script>
-

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag

@@ -82,80 +82,4 @@
 </form>
 
 <style>
-    label.radio.button > input[type="radio"] {
-        display: none;
-    }
 </style>
-
-<script defer type="module">
-    const nbRound = document.querySelector("input[name='nbRounds']");
-    const nbValues = document.querySelector("input[name='nbValues']");
-    const nbColors = document.querySelector("input[name='nbColors']");
-    const rangeInputs = document.querySelectorAll("input[type='range']");
-    rangeInputs.forEach(input => {
-        const tooltip = document.querySelector(input.dataset.tooltip);
-        input.addEventListener("input", () => {
-          tooltip.innerHTML = input.value
-          nbRound.max = nbValues.value * nbColors.value;
-          nbRound.value = parseInt(nbRound.value) > parseInt(nbRound.max) ? nbRound.max : nbRoundtmp;
-        });
-    });
-
-    const radioButtons = document.querySelectorAll('input[type="radio"]');
-    radioButtons.forEach(radio => {
-        radio.addEventListener('change', () => {
-            radioButtons.forEach(radio => radio.parentElement.classList.remove('is-primary'));
-            radio.parentElement.classList.add('is-primary');
-        });
-    });
-
-    const form = document.getElementById('new-game-form');
-
-    form.addEventListener('submit', evt => {
-        evt.preventDefault();
-
-        const {action, method} = form;
-
-        const url = new URL(action);
-        const formData = new FormData(form);
-        for (const [key, value] of formData.entries()) {
-            url.searchParams.append(key, value);
-        }
-
-        fetch(url, {headers: {"Content-Type": "application/json"}, method})
-            .then(res => res.json())
-            .then(data => {
-                if (data.code !== 200) throw new Error(data.message);
-
-                // Redirection vers la page de jeu
-                window.location.href = "${pageContext.request.contextPath}/game?id=" + data.message;
-            })
-            .catch((error) => {
-                console.log(error)
-
-                // Notification
-                const notification = document.createElement("div");
-                notification.classList.add("notification", "is-danger");
-
-                const notificationTitle = document.createElement("p");
-                notificationTitle.classList.add("title", "is-6");
-                notificationTitle.innerHTML = "Erreur";
-
-                const notificationIcon = document.createElement("span");
-                notificationIcon.classList.add("icon");
-                notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
-
-                const notificationMessage = document.createElement("p");
-                notificationMessage.classList.add("subtitle", "is-6");
-                notificationMessage.innerHTML = error.message;
-
-                notificationTitle.appendChild(notificationIcon);
-                notification.appendChild(notificationTitle);
-                notification.appendChild(notificationMessage);
-                document.body.appendChild(notification);
-
-                // Retrait de la notification et des animations après 5 secondes
-                setTimeout(() => notification.remove(), 5010);
-            });
-    });
-</script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag

@@ -88,110 +88,3 @@
         </div>
     </div>
 </form>
-<script defer type="module">
-    const profileForm = document.querySelector("form#profile-form");
-    const changePassword = profileForm.querySelector("a#change-password");
-    const passwordFields = profileForm.querySelectorAll("div#old-password-field, div#password-field, div#repeat-password-field");
-    const inputs = profileForm.querySelectorAll("input[type='text'], input[type='password']");
-
-    // Afficher les champs de mot de passe si le lien est cliqué
-    changePassword.addEventListener("click", (e) => {
-        e.preventDefault();
-        passwordFields.forEach(field => {
-            field.style.display = "block";
-        });
-    });
-
-    profileForm.addEventListener("submit", onSubmit);
-
-    function onSubmit(event) {
-      event.preventDefault();
-
-      const oldPassword = profileForm.querySelector("input[name='oldPassword']");
-      const password = profileForm.querySelector("input[name='password']");
-      const repassword = profileForm.querySelector("input[name='repeat-password']");
-      // Check if the password and the confirmation password are the same
-      if (oldPassword.value !== "" && password.value !== repassword.value) {
-        onError(new Error("Les mots de passe ne correspondent pas"));
-        return;
-      }
-
-      const {action, method} = profileForm;
-
-      const url = new URL(action);
-      const formData = new FormData(profileForm);
-      for (const [key, value] of formData.entries()) {
-        url.searchParams.append(key, value);
-      }
-      url.searchParams.append("id", ${user.id})
-
-      fetch(url, {headers: {"Content-Type": "application/json"}, method})
-        .then(res => res.json())
-        .then(data => {
-          if (data.code !== 200) throw new Error(data.message);
-          onSuccess()
-        })
-        .catch(onError)
-    }
-
-    function onError(error) {
-      console.log(error)
-
-      // Input fields in red
-      inputs.forEach(input => input.classList.add("is-danger"));
-
-      // Notification
-      const notification = document.createElement("div");
-      notification.classList.add("notification", "is-danger");
-
-      const notificationTitle = document.createElement("p");
-      notificationTitle.classList.add("title", "is-6");
-      notificationTitle.innerHTML = "Erreur";
-
-      const notificationIcon = document.createElement("span");
-      notificationIcon.classList.add("icon");
-      notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
-
-      const notificationMessage = document.createElement("p");
-      notificationMessage.classList.add("subtitle", "is-6");
-      notificationMessage.innerHTML = error.message;
-
-      notificationTitle.appendChild(notificationIcon);
-      notification.appendChild(notificationTitle);
-      notification.appendChild(notificationMessage);
-      document.body.appendChild(notification);
-      setTimeout(() => {
-        notification.remove()
-        inputs.forEach(input => input.classList.remove("is-danger"));
-      }, 5010);
-    }
-
-    function onSuccess() {
-      console.log("Succès:", "Modifications effectuées avec succès")
-
-      // Notification
-      const notification = document.createElement("div");
-      notification.classList.add("notification", "is-success");
-
-      const notificationTitle = document.createElement("p");
-      notificationTitle.classList.add("title", "is-6");
-      notificationTitle.innerHTML = "Succès";
-
-      const notificationIcon = document.createElement("span");
-      notificationIcon.classList.add("icon");
-      notificationIcon.innerHTML = "<i class='fa-solid fa-check'></i>";
-
-      const notificationMessage = document.createElement("p");
-      notificationMessage.classList.add("subtitle", "is-6");
-      notificationMessage.innerHTML = "Le profil a été modifié avec succès";
-
-      notificationTitle.appendChild(notificationIcon);
-      notification.appendChild(notificationTitle);
-      notification.appendChild(notificationMessage);
-      document.body.appendChild(notification);
-
-      setTimeout(() => notification.remove(), 5010);
-    }
-    inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = ""));
-
-</script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/register.tag

@@ -56,69 +56,3 @@
     <input type="submit" class="button has-text-white is-primary is-fullwidth" value="S'inscrire">
 </form>
 
-<script defer type="module">
-    const registerForm = document.querySelector("form#register-form");
-
-    const inputs = registerForm.querySelectorAll("input, select");
-
-    registerForm.addEventListener("submit", onSubmit)
-
-
-    function onSubmit(event) {
-        event.preventDefault();
-
-        const password = registerForm.querySelector("input[name='password']");
-        const repassword = registerForm.querySelector("input[name='repassword']");
-
-        // Check if the password and the confirmation password are the same
-        if (password.value !== repassword.value) {
-            onError(new Error("Les mots de passe ne correspondent pas"));
-            return;
-        }
-
-        const {action, method} = registerForm;
-
-        const url = new URL(action);
-        inputs.forEach(input => url.searchParams.append(input.name, input.value));
-
-        fetch(url, {headers: {"Content-Type": "application/json"}, method})
-            .then(res => res.json())
-            .then(data => {
-                if (data.code !== 200) throw new Error(data.message);
-            })
-            .then(() => window.location.href = "${pageContext.request.contextPath}/login")
-            .catch(onError)
-    }
-
-
-    function onError(error) {
-        console.error("Error:", error)
-
-        // Input fields in red
-        inputs.forEach(input => input.classList.add("is-danger"));
-
-        // Notification
-        const notification = document.createElement("div");
-        notification.classList.add("notification", "is-danger");
-
-        const notificationTitle = document.createElement("p");
-        notificationTitle.classList.add("title", "is-6");
-        notificationTitle.innerHTML = "Erreur";
-
-        const notificationIcon = document.createElement("span");
-        notificationIcon.classList.add("icon");
-        notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
-
-        const notificationMessage = document.createElement("p");
-        notificationMessage.classList.add("subtitle", "is-6");
-        notificationMessage.innerHTML = error.message;
-
-        notificationTitle.appendChild(notificationIcon);
-        notification.appendChild(notificationTitle);
-        notification.appendChild(notificationMessage);
-        document.body.appendChild(notification);
-
-        setTimeout(() => notification.remove(), 5010);
-    }
-</script>
-

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/reset-password.tag

@@ -21,76 +21,3 @@
     <input type="submit" class="button is-primary has-text-white is-fullwidth" value="Envoyer">
 </form>
 
-<script defer type="module">
-    const resetPasswordForm = document.querySelector("form#reset-password-form");
-    const submitButton = document.querySelector("input[type=submit]");
-    const inputs = resetPasswordForm.querySelectorAll("input[type='text'], input[type='password']");
-
-    const tokenInput = document.querySelector("input#token");
-    const passwordInput = document.querySelector("input#password");
-    const repasswordInput = document.querySelector("input#repassword");
-
-    resetPasswordForm.addEventListener("submit", onSubmit)
-
-    function onSubmit(event) {
-        event.preventDefault();
-
-        // Check if the password and the confirmation password are the same
-        if (passwordInput.value !== repasswordInput.value) {
-            onError(new Error("Les mots de passe ne correspondent pas"));
-            return;
-        }
-
-        const {action, method} = resetPasswordForm;
-
-        const url = new URL(action);
-        url.searchParams.append("token", tokenInput.value);
-        url.searchParams.append("password", passwordInput.value);
-
-        submitButton.classList.add("is-loading");
-        fetch(url, {headers: {"Content-Type": "application/json"}, method})
-            .then(res => res.json())
-            .then(data => {
-                if (data.code !== 200) throw new Error(data.message);
-            })
-            .then(() => window.location.href = "${pageContext.request.contextPath}/login")
-            .catch(onError)
-            .finally(() => submitButton.classList.remove("is-loading"));
-    }
-
-    function onError(error) {
-      console.error("Error:", error)
-
-      inputs.forEach(input => {
-        input.classList.add("is-danger");
-        input.style.animation = "shake 0.5s ease-in-out"
-      });
-
-
-      // Notification
-        const notification = document.createElement("div");
-        notification.classList.add("notification", "is-danger");
-
-        const notificationTitle = document.createElement("p");
-        notificationTitle.classList.add("title", "is-6");
-        notificationTitle.innerHTML = "Erreur";
-
-        const notificationIcon = document.createElement("span");
-        notificationIcon.classList.add("icon");
-        notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
-
-        const notificationMessage = document.createElement("p");
-        notificationMessage.classList.add("subtitle", "is-6");
-        notificationMessage.innerHTML = error.message;
-
-        notificationTitle.appendChild(notificationIcon);
-        notification.appendChild(notificationTitle);
-        notification.appendChild(notificationMessage);
-        document.body.appendChild(notification);
-
-        setTimeout(() => notification.remove(), 5010);
-      }
-      inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = ""));
-
-</script>
-

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag

@@ -3,7 +3,6 @@
 
 <%@attribute name="title"%>
 <%@attribute name="head" fragment="true" %>
-
 <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
 
 <!DOCTYPE html>
@@ -17,7 +16,10 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/global.css">
-
+    <script defer type="module" src="${pageContext.request.contextPath}/static/js/navbar.js"></script>
+    <script defer type="module" src="${pageContext.request.contextPath}/static/js/notification/error.js"></script>
+    <script defer type="module" src="${pageContext.request.contextPath}/static/js/notification/success.js"></script>
+    <script defer type="module" src="${pageContext.request.contextPath}/static/js/notification/invite.js"></script>
     <jsp:invoke fragment="head"/>
 </head>
 <body>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag

@@ -3,11 +3,13 @@
 <%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %>
 
 <%@attribute name="title"%>
+<%@attribute name="script" fragment="true" %>
 
 
 <layout:base title="${title}">
     <jsp:attribute name="head">
         <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/form.css"/>
+        <jsp:invoke fragment="script"/>
     </jsp:attribute>
     <jsp:body>
         <jsp:doBody/>

S2/DevWeb/Projet/src/main/webapp/static/css/global.css

@@ -9,6 +9,10 @@
     background: url("../img/Home.svg") lightgray 50% / cover no-repeat;
 }
 
+label.radio.button > input[type="radio"] {
+    display: none;
+}
+
 @media screen and (min-width: 769px) {
     .modal-card, .modal-content {
         width: var(--modal-content-width) !important;

S2/DevWeb/Projet/src/main/webapp/static/js/form/forgotten-password.js

@@ -0,0 +1,30 @@
+import {onError} from "../notification/error.js";
+const forgottenPasswordForm = document.querySelector("form#forgotten-password-form");
+
+// Champ email
+const inputs = [document.querySelector("input#email")];
+
+// Ajout de l'écouteur d'événement sur la soumission du formulaire
+forgottenPasswordForm.addEventListener("submit", onSubmit)
+
+/**
+ * Gestion de la soumission du formulaire
+ * @param event {Event} - Événement de soumission du formulaire
+ */
+function onSubmit(event) {
+  event.preventDefault();
+
+  const {action, method} = forgottenPasswordForm;
+
+  const url = new URL(action);
+  const contextPath = url.href.substring(0, url.href.lastIndexOf("/") + 1);
+  inputs.forEach(input => url.searchParams.append(input.getAttribute("name"), input.value));
+
+  fetch(url, {headers: {"Content-Type": "application/json"}, method})
+    .then(res => res.json())
+    .then(data => {
+      if (data.code !== 200) throw new Error(data.message);
+    })
+    .then(() => window.location.href = contextPath+"login?success=forgotten-password")
+    .catch((error) => onError(error, inputs));
+}

S2/DevWeb/Projet/src/main/webapp/static/js/form/login.js

@@ -0,0 +1,30 @@
+import {onError} from "../notification/error.js";
+import {onSuccess} from "../notification/success.js";
+import {verifSuccess} from "../notification/success.js";
+
+//Vérifier si un formulaire a été soumis avec succès
+verifSuccess();
+
+const form = document.querySelector("form#login-form");
+const inputs = form.querySelectorAll("input[type='text'], input[type='password']");
+
+form.addEventListener("submit", event => {
+  event.preventDefault();
+
+  const {action, method} = form;
+
+  const url = new URL(action);
+  const contextPath = url.href.substring(0, url.href.lastIndexOf("/") + 1);
+  inputs.forEach(input => url.searchParams.append(input.getAttribute("name"), input.value));
+
+  fetch(url, {headers: {"Content-Type": "application/json"}, method})
+    .then(res => res.json())
+    .then(data => {
+      if (data.code !== 200) throw new Error(data.message);
+    })
+    .then(() => window.location.href = contextPath + "lobby")
+    .catch((error) => onError(error, inputs))
+});
+
+// Retirer les animations des champs après la fin de l'animation
+inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = ""));

S2/DevWeb/Projet/src/main/webapp/static/js/form/new-game.js

@@ -0,0 +1,52 @@
+import {onError} from "../notification/error.js";
+
+const nbRound = document.querySelector("input[name='nbRounds']");
+const nbValues = document.querySelector("input[name='nbValues']");
+const nbColors = document.querySelector("input[name='nbColors']");
+const rangeInputs = document.querySelectorAll("input[type='range']");
+rangeInputs.forEach(input => updateMaxRound(input));
+
+const radioButtons = document.querySelectorAll('input[type="radio"]');
+radioButtons.forEach(radio => updateRadio(radio));
+
+const form = document.getElementById('new-game-form');
+
+form.addEventListener('submit', evt => {
+  evt.preventDefault();
+
+  const {action, method} = form;
+
+  const url = new URL(action);
+  const contextPath = url.href.substring(0, url.href.lastIndexOf("/") + 1);
+
+  const formData = new FormData(form);
+  for (const [key, value] of formData.entries()) {
+    url.searchParams.append(key, value);
+  }
+
+  fetch(url, {headers: {"Content-Type": "application/json"}, method})
+    .then(res => res.json())
+    .then(data => {
+      if (data.code !== 200) throw new Error(data.message);
+
+      // Redirection vers la page de jeu
+      window.location.href = contextPath + "game?id=" + data.message;
+    })
+    .catch((error) => onError(error.message, inputs))
+});
+
+function updateMaxRound(input) {
+  const tooltip = document.querySelector(input.dataset.tooltip);
+  input.addEventListener("input", () => {
+    tooltip.innerHTML = input.value
+    nbRound.max = nbValues.value * nbColors.value;
+    nbRound.value = parseInt(nbRound.value) > parseInt(nbRound.max) ? nbRound.max : nbRound.value;
+  })
+}
+
+function updateRadio(radio) {
+  radio.addEventListener('change', () => {
+    radioButtons.forEach(radio => radio.parentElement.classList.remove('is-primary'));
+    radio.parentElement.classList.add('is-primary');
+  });
+}

S2/DevWeb/Projet/src/main/webapp/static/js/form/profile.js

@@ -0,0 +1,52 @@
+import {onError} from "../notification/error.js";
+import {onSuccess} from "../notification/success.js";
+import {Success} from "../notification/success.js";
+
+const profileForm = document.querySelector("form#profile-form");
+const username = profileForm.querySelector("input[name='username']");
+const changePassword = profileForm.querySelector("a#change-password");
+const passwordFields = profileForm.querySelectorAll("div#old-password-field, div#password-field, div#repeat-password-field");
+const inputs = profileForm.querySelectorAll("input[type='text'], input[type='email'], input[type='password']");
+
+// Afficher les champs de mot de passe si le lien est cliqué
+changePassword.addEventListener("click", (e) => {
+  e.preventDefault();
+  passwordFields.forEach(field => {
+    field.style.display = "block";
+  });
+});
+
+profileForm.addEventListener("submit", onSubmit);
+
+function onSubmit(event) {
+  event.preventDefault();
+
+  const oldPassword = profileForm.querySelector("input[name='oldPassword']");
+  const password = profileForm.querySelector("input[name='password']");
+  const repassword = profileForm.querySelector("input[name='repeat-password']");
+  // Check if the password and the confirmation password are the same
+  if (oldPassword.value !== "" && password.value !== repassword.value) {
+    onError(new Error("Les mots de passe ne correspondent pas"), [oldPassword, password, repassword]);
+    return;
+  }
+
+  const {action, method} = profileForm;
+
+  const url = new URL(action);
+  const contextPath = url.href.substring(0, url.href.lastIndexOf("/") + 1);
+
+  const formData = new FormData(profileForm);
+  for (const [key, value] of formData.entries()) {
+    url.searchParams.append(key, value);
+  }
+  url.searchParams.append("username", username.value);
+
+  url.searchParams.forEach((value, key) => console.log(key, value));
+  fetch(url, {headers: {"Content-Type": "application/json"}, method})
+    .then(res => res.json())
+    .then(data => {
+      if (data.code !== 200) throw new Error(data.message);
+      onSuccess(Success.PROFILE_UPDATED)
+    })
+    .catch((error) => onError(error, inputs))
+}

S2/DevWeb/Projet/src/main/webapp/static/js/form/register.js

@@ -0,0 +1,37 @@
+import {onError} from "../notification/error.js";
+
+const registerForm = document.querySelector("form#register-form");
+
+const inputs = registerForm.querySelectorAll("input, select");
+
+registerForm.addEventListener("submit", onSubmit)
+
+function onSubmit(event) {
+  event.preventDefault();
+
+  const password = registerForm.querySelector("input[name='password']");
+  const repassword = registerForm.querySelector("input[name='repassword']");
+
+  // Check if the password and the confirmation password are the same
+  if (password.value !== repassword.value) {
+    onError( new Error("Les mots de passe ne correspondent pas"),[password, repassword]);
+    return;
+  }
+
+  const {action, method} = registerForm;
+
+  const url = new URL(action);
+  const contextPath = url.href.substring(0, url.href.lastIndexOf("/") + 1);
+  inputs.forEach(input => url.searchParams.append(input.name, input.value));
+
+  fetch(url, {headers: {"Content-Type": "application/json"}, method})
+    .then(res => res.json())
+    .then(data => {
+      if (data.code !== 200) {
+        throw new Error(data.message);
+      }
+    })
+    .then(() => window.location.href = contextPath+"login?success=create-account")
+    .catch((error) => onError(error, inputs)
+    )
+}

S2/DevWeb/Projet/src/main/webapp/static/js/form/reset-password.js

@@ -0,0 +1,44 @@
+import {onError} from "../notification/error.js";
+
+const resetPasswordForm = document.querySelector("form#reset-password-form");
+const submitButton = document.querySelector("input[type=submit]");
+const inputs = resetPasswordForm.querySelectorAll("input[type='password']");
+
+const tokenInput = document.querySelector("input#token");
+const passwordInput = document.querySelector("input#password");
+const repasswordInput = document.querySelector("input#repassword");
+
+resetPasswordForm.addEventListener("submit", onSubmit)
+
+function onSubmit(event) {
+  event.preventDefault();
+
+  // Check if the password and the confirmation password are the same
+  if (passwordInput.value !== repasswordInput.value) {
+    onError(new Error("Les mots de passe ne correspondent pas"), inputs);
+    return;
+  }
+
+  const {action, method} = resetPasswordForm;
+
+  const url = new URL(action);
+  const contextPath = url.href.substring(0, url.href.lastIndexOf("/") + 1);
+  inputs.forEach(input => url.searchParams.append(input.getAttribute("name"), input.value));
+  url.searchParams.append("token", tokenInput.value);
+  submitButton.classList.add("is-loading");
+
+  fetch(url, {headers: {"Content-Type": "application/json"}, method})
+    .then(res => res.json())
+    .then(data => {
+      if (data.code !== 200) {
+        throw new Error(data.message);
+      }
+    })
+    .then(() => window.location.href = contextPath+"login?success=reset-password")
+    .catch((error) => {
+      console.log(inputs);
+      onError(error, inputs);
+      }
+    )
+    .finally(() => submitButton.classList.remove("is-loading"));
+}

S2/DevWeb/Projet/src/main/webapp/static/js/navbar.js

@@ -0,0 +1,16 @@
+// Récupération de tous les éléments de classe "navbar-burger"
+const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+// Ajout d'un enventListener sur chaque élément
+$navbarBurgers.forEach(el => {
+  el.addEventListener('click', () => {
+
+    // Récupere la valeur de l'attribut "data-target"
+    const target = el.dataset.target;
+    const $target = document.getElementById(target);
+
+    // Ajoute ou supprime la classe "is-active" sur les éléments
+    el.classList.toggle('is-active');
+    $target.classList.toggle('is-active');
+  });
+});

S2/DevWeb/Projet/src/main/webapp/static/js/notification/error.js

@@ -0,0 +1,35 @@
+export function onError(error, inputs) {
+  // Animations des champs
+  inputs.forEach(input => {
+    input.classList.add("is-danger");
+    input.style.animation = "shake 0.5s ease-in-out"
+  });
+
+  // Notification
+  const notification = document.createElement("div");
+  notification.classList.add("notification", "is-danger");
+
+  const notificationTitle = document.createElement("p");
+  notificationTitle.classList.add("title", "is-6");
+  notificationTitle.innerHTML = "Erreur";
+
+  const notificationIcon = document.createElement("span");
+  notificationIcon.classList.add("icon");
+  notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
+
+  const notificationMessage = document.createElement("p");
+  notificationMessage.classList.add("subtitle", "is-6");
+  notificationMessage.innerHTML = error.message;
+
+  notificationTitle.appendChild(notificationIcon);
+  notification.appendChild(notificationTitle);
+  notification.appendChild(notificationMessage);
+  document.body.appendChild(notification);
+
+  // Retirer la notification et les animations après 5 secondes
+  setTimeout(() => {
+    notification.remove()
+    inputs.forEach(input => input.classList.remove("is-danger"));
+  }, 5010);
+  inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = ""));
+};

S2/DevWeb/Projet/src/main/webapp/static/js/notification/success.js

@@ -0,0 +1,57 @@
+export class Success {
+  static successKeys = {
+    FORGOTTEN_PASSWORD: "forgotten-password",
+    RESET_PASSWORD: "reset-password",
+    UPDATE_PROFILE: "update-profile",
+    CREATE_ACCOUNT: "create-account",
+  }
+
+  static successValues = {
+    FORGOTTEN_PASSWORD: "Un email vous a été envoyé pour réinitialiser votre mot de passe",
+    RESET_PASSWORD: "Mot de passe récupéré avec succès",
+    UPDATE_PROFILE: "Profil modifié avec succès",
+    CREATE_ACCOUNT: "Compte créé avec succès",
+  }
+}
+export function onSuccess(message) {
+  console.log("Succès:", "Modifications effectuées avec succès")
+
+  // Notification
+  const notification = document.createElement("div");
+  notification.classList.add("notification", "is-success");
+
+  const notificationTitle = document.createElement("p");
+  notificationTitle.classList.add("title", "is-6");
+  notificationTitle.innerHTML = "Succès";
+
+  const notificationIcon = document.createElement("span");
+  notificationIcon.classList.add("icon");
+  notificationIcon.innerHTML = "<i class='fa-solid fa-check'></i>";
+
+  const notificationMessage = document.createElement("p");
+  notificationMessage.classList.add("subtitle", "is-6");
+  notificationMessage.innerHTML = message;
+
+  notificationTitle.appendChild(notificationIcon);
+  notification.appendChild(notificationTitle);
+  notification.appendChild(notificationMessage);
+  document.body.appendChild(notification);
+
+  setTimeout(() => notification.remove(), 5010);
+}
+
+export function verifSuccess(){
+  const url = new URL(window.location.href);
+  if (url.searchParams.get("success")!=undefined && url.searchParams.get("success") === Success.successKeys.FORGOTTEN_PASSWORD) {
+    onSuccess(Success.successValues.FORGOTTEN_PASSWORD)
+  }
+  if (url.searchParams.get("success")!=undefined && url.searchParams.get("success") === Success.successKeys.RESET_PASSWORD) {
+    onSuccess(Success.successValues.RESET_PASSWORD)
+  }
+  if (url.searchParams.get("success")!=undefined && url.searchParams.get("success") === Success.successKeys.CREATE_ACCOUNT) {
+    onSuccess(Success.successValues.CREATE_ACCOUNT)
+  }
+  if (url.searchParams.get("success")!=undefined && url.searchParams.get("success") === Success.successKeys.UPDATE_PROFILE) {
+    onSuccess(Success.successValues.UPDATE_PROFILE)
+  }
+}