feat: devWeb - active notification on profile page

This commit is contained in:
kmitresse
2024-04-27 14:04:39 +02:00
parent b52f2509c9
commit 65a4f28327
4 changed files with 51 additions and 42 deletions
@@ -11,22 +11,27 @@
<%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %>
<layout:base title="Profil">
<component:hero>
<div class="columns is-centered">
<div class="column is-5-tablet is-5-desktop is-5-widescreen">
<component:card title="Profil">
<fieldset>
<form:profile/>
</fieldset>
<jsp:attribute name="head">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/form.css"/>
</jsp:attribute>
<jsp:body>
<component:hero>
<div class="columns is-centered">
<div class="column is-5-tablet is-5-desktop is-5-widescreen">
<component:card title="Profil">
<fieldset>
<form:profile/>
</fieldset>
</component:card>
</div>
</component:card>
</div>
<div class="column is-5-tablet is-5-desktop is-5-widescreen">
<component:card title="Statistiques">
<component:statistics/>
</component:card>
<div class="column is-5-tablet is-5-desktop is-5-widescreen">
<component:card title="Statistiques">
<component:statistics/>
</component:card>
</div>
</div>
</div>
</component:hero>
</component:hero>
</jsp:body>
</layout:base>
@@ -105,19 +105,10 @@
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 !== "") {
if("${User.hashPassword(oldPassword.value)}" !== "${user.password}"){
onError(new Error("L'ancien mot de passe ne corresponds pas"));
return;
}
if(password.value !== repassword.value) {
onError(new Error("Les mots de passe ne correspondent pas"));
return;
}
if (oldPassword.value !== "" && password.value !== repassword.value) {
onError(new Error("Les mots de passe ne correspondent pas"));
return;
}
else {
password.value = "${user.password}";
};
const {action, method} = profileForm;
@@ -144,7 +135,7 @@
* @param error {Error} - Error of the form submission
*/
function onError(error) {
console.log("Error:", error)
console.log(error)
// Input fields in red
inputs.forEach(input => input.classList.add("is-danger"));
@@ -169,7 +160,7 @@
notification.appendChild(notificationTitle);
notification.appendChild(notificationMessage);
document.body.appendChild(notification);
console.log("je suis bien dans la fonction mais la notification ne s'affiche pas")
setTimeout(() => notification.remove(), 5010);
}
@@ -177,7 +168,7 @@
* Handle the success of the form submission
*/
function onSuccess() {
console.log("Succes:", "Modifications effectuées avec succès")
console.log("Succès:", "Modifications effectuées avec succès")
// Notification
const notification = document.createElement("div");
@@ -189,7 +180,7 @@
const notificationIcon = document.createElement("span");
notificationIcon.classList.add("icon");
notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
notificationIcon.innerHTML = "<i class='fa-solid fa-check'></i>";
const notificationMessage = document.createElement("p");
notificationMessage.classList.add("subtitle", "is-6");
@@ -199,6 +190,7 @@
notification.appendChild(notificationTitle);
notification.appendChild(notificationMessage);
document.body.appendChild(notification);
console.log("je suis bien dans la fonction mais la notification ne s'affiche pas")
setTimeout(() => notification.remove(), 5010);
}