From 8fcc732d0b24593bdf5d785812ec867ea35d4674 Mon Sep 17 00:00:00 2001 From: kmitresse Date: Sun, 5 May 2024 17:48:31 +0200 Subject: [PATCH] refacto: devWeb - move css and js in files and import them in .jsp files --- .../java/uppa/project/bean/ProfileBean.java | 10 +- .../project/web/servlet/ProfileServlet.java | 2 +- .../WEB-INF/pages/forgotten-password.jsp | 23 ++-- .../src/main/webapp/WEB-INF/pages/login.jsp | 29 +++-- .../main/webapp/WEB-INF/pages/new-game.jsp | 33 +++--- .../src/main/webapp/WEB-INF/pages/profile.jsp | 1 + .../main/webapp/WEB-INF/pages/register.jsp | 29 +++-- .../webapp/WEB-INF/pages/reset-password.jsp | 29 +++-- .../webapp/WEB-INF/tags/components/navbar.tag | 19 ---- .../WEB-INF/tags/forms/forgotten-password.tag | 90 ++++----------- .../main/webapp/WEB-INF/tags/forms/login.tag | 56 --------- .../webapp/WEB-INF/tags/forms/new-game.tag | 76 ------------- .../webapp/WEB-INF/tags/forms/profile.tag | 107 ------------------ .../webapp/WEB-INF/tags/forms/register.tag | 66 ----------- .../WEB-INF/tags/forms/reset-password.tag | 73 ------------ .../main/webapp/WEB-INF/tags/layouts/base.tag | 8 +- .../main/webapp/WEB-INF/tags/layouts/form.tag | 4 +- .../src/main/webapp/static/css/global.css | 4 + .../static/js/form/forgotten-password.js | 30 +++++ .../src/main/webapp/static/js/form/login.js | 30 +++++ .../main/webapp/static/js/form/new-game.js | 52 +++++++++ .../src/main/webapp/static/js/form/profile.js | 52 +++++++++ .../main/webapp/static/js/form/register.js | 37 ++++++ .../webapp/static/js/form/reset-password.js | 44 +++++++ .../src/main/webapp/static/js/navbar.js | 16 +++ .../webapp/static/js/notification/error.js | 35 ++++++ .../webapp/static/js/notification/success.js | 57 ++++++++++ 27 files changed, 481 insertions(+), 531 deletions(-) create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/form/forgotten-password.js create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/form/login.js create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/form/new-game.js create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/form/profile.js create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/form/register.js create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/form/reset-password.js create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/navbar.js create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/notification/error.js create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/js/notification/success.js diff --git a/S2/DevWeb/Projet/src/main/java/uppa/project/bean/ProfileBean.java b/S2/DevWeb/Projet/src/main/java/uppa/project/bean/ProfileBean.java index ba17848..78cec76 100644 --- a/S2/DevWeb/Projet/src/main/java/uppa/project/bean/ProfileBean.java +++ b/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) { - this.id = id; + public ProfileBean setUsername(String username) { + this.username = username; return this; } diff --git a/S2/DevWeb/Projet/src/main/java/uppa/project/web/servlet/ProfileServlet.java b/S2/DevWeb/Projet/src/main/java/uppa/project/web/servlet/ProfileServlet.java index aa4a1a1..1296478 100644 --- a/S2/DevWeb/Projet/src/main/java/uppa/project/web/servlet/ProfileServlet.java +++ b/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")) diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/forgotten-password.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/forgotten-password.jsp index eb68b60..4cbf15c 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/forgotten-password.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/forgotten-password.jsp @@ -4,14 +4,19 @@ <%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %> - -
-
-
-

Mot de passe oublié ?

- + + + + + +
+
+
+

Mot de passe oublié ?

+ +
-
- - \ No newline at end of file + + + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/login.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/login.jsp index 94a76fc..cd4442a 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/login.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/login.jsp @@ -4,17 +4,22 @@ <%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %> - -
-
-
-

Se connecter

- -
-

Vous n'avez pas de compte ? S'inscrire -

+ + + + + +
+
+
+

Se connecter

+ +
+

Vous n'avez pas de compte ? S'inscrire +

+
-
- - \ No newline at end of file + + + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/new-game.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/new-game.jsp index 4b96d15..77f51e1 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/new-game.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/new-game.jsp @@ -4,20 +4,25 @@ <%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %> - -
-
-
-

Nouvelle partie

- - -
- Revenir au menu -
- - + + + + + +
+
+
+

Nouvelle partie

+ + +
+ Revenir au menu +
+ + +
-
- + + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp index c821f9b..40670b4 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp @@ -7,6 +7,7 @@ + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/register.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/register.jsp index d5069b5..f8dd7e7 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/register.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/register.jsp @@ -4,18 +4,23 @@ <%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %> - -
-
-
-

S'inscrire

- -
-

- Déjà inscrit ? Se connecter -

+ + + + + +
+
+
+

S'inscrire

+ +
+

+ Déjà inscrit ? Se connecter +

+
-
- + + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/reset-password.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/reset-password.jsp index 05e7db7..5d9eebd 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/reset-password.jsp +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/reset-password.jsp @@ -4,18 +4,23 @@ <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %> - -
-
-
-

Récupération de mot de passe

- -
-

- Déjà inscrit ? Se connecter -

+ + + + + +
+
+
+

Récupération de mot de passe

+ +
+

+ Déjà inscrit ? Se connecter +

+
-
- + + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/navbar.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/navbar.tag index 083e618..0c77b86 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/navbar.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/navbar.tag @@ -64,22 +64,3 @@
- - diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/forgotten-password.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/forgotten-password.tag index 3fb7e65..c1c9e3f 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/forgotten-password.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/forgotten-password.tag @@ -4,7 +4,7 @@
- + @@ -14,74 +14,34 @@ - +<%-- 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);--%> +<%-- }--%> +<%----%> diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/login.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/login.tag index 798b403..c8b576b 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/login.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/login.tag @@ -28,59 +28,3 @@ - - - diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag index cae44a5..d7fcb61 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/new-game.tag @@ -82,80 +82,4 @@ - - diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag index 59f69b5..ce6d191 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag @@ -88,110 +88,3 @@
- diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/register.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/register.tag index 90eb374..74cb1fb 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/register.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/register.tag @@ -56,69 +56,3 @@ - - diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/reset-password.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/reset-password.tag index 9ce48c3..9218cd5 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/reset-password.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/reset-password.tag @@ -21,76 +21,3 @@ - - diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag index 6139ea9..7a9a422 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag +++ b/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" %> @@ -17,7 +16,10 @@ - + + + + @@ -27,4 +29,4 @@ - \ No newline at end of file + diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag index 9aad261..2fab926 100644 --- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag +++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/form.tag @@ -3,13 +3,15 @@ <%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %> <%@attribute name="title"%> +<%@attribute name="script" fragment="true" %> + - \ No newline at end of file + diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/global.css b/S2/DevWeb/Projet/src/main/webapp/static/css/global.css index 9d8fc98..a026850 100644 --- a/S2/DevWeb/Projet/src/main/webapp/static/css/global.css +++ b/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; diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/form/forgotten-password.js b/S2/DevWeb/Projet/src/main/webapp/static/js/form/forgotten-password.js new file mode 100644 index 0000000..f2e470f --- /dev/null +++ b/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)); +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/form/login.js b/S2/DevWeb/Projet/src/main/webapp/static/js/form/login.js new file mode 100644 index 0000000..5018db9 --- /dev/null +++ b/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 = "")); diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/form/new-game.js b/S2/DevWeb/Projet/src/main/webapp/static/js/form/new-game.js new file mode 100644 index 0000000..79ee2dd --- /dev/null +++ b/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'); + }); +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/form/profile.js b/S2/DevWeb/Projet/src/main/webapp/static/js/form/profile.js new file mode 100644 index 0000000..4ff7956 --- /dev/null +++ b/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)) +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/form/register.js b/S2/DevWeb/Projet/src/main/webapp/static/js/form/register.js new file mode 100644 index 0000000..761526d --- /dev/null +++ b/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) + ) +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/form/reset-password.js b/S2/DevWeb/Projet/src/main/webapp/static/js/form/reset-password.js new file mode 100644 index 0000000..7ef313b --- /dev/null +++ b/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")); +} diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/navbar.js b/S2/DevWeb/Projet/src/main/webapp/static/js/navbar.js new file mode 100644 index 0000000..ed1c469 --- /dev/null +++ b/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'); + }); +}); diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/notification/error.js b/S2/DevWeb/Projet/src/main/webapp/static/js/notification/error.js new file mode 100644 index 0000000..3069314 --- /dev/null +++ b/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 = ""; + + 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 = "")); +}; diff --git a/S2/DevWeb/Projet/src/main/webapp/static/js/notification/success.js b/S2/DevWeb/Projet/src/main/webapp/static/js/notification/success.js new file mode 100644 index 0000000..5d2c106 --- /dev/null +++ b/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 = ""; + + 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) + } +}