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

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)
+  }
+}