lucasvbr/Cards-Rush
1
0
Fork 0
mirror of https://github.com/kmitresse/Cards-Rush.git synced 2026-05-16 17:11:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: devWeb - update reset password page

Browse Source
This commit is contained in:
kmitresse
2024-04-17 16:58:26 +02:00
parent 2c3fee898a
commit ae126d4e09
4 changed files with 246 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/reset-password.jsp
+22 -27
View File
@@ -1,27 +1,22 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Récupération du mot de passe</title>
<meta charset="UTF-8">
<%-- <link href="${pageContext.request.contextPath}/static/css/reset-password.css" rel="stylesheet">--%>
<script src="${pageContext.request.contextPath}/static/js/reset-password.js" defer></script>
</head>
<body>
<%@include file="../components/navbar.jsp"%>
<main>
<jsp:include page="../components/navbar.jsp"/>
<h1>Récupération du mot de passe</h1>
<form id="resetPasswordForm" action="${pageContext.request.contextPath}/reset-password" method="post">
<label for="newPassword">Nouveau mot de passe</label>
<input type="password" id="newPassword" name="newPassword" required>
<label for="confirmPassword">Confirmer le mot de passe</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<% if (request.getParameter("error") != null && request.getParameter("error").equals("matching-password")) {%>
<p>Les mots de passe ne correspondent pas</p>
<% } %>
<input type="hidden" name="token" value="${param.token}">
<input type="submit" value="Valider">
</form>
</main>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %>
<%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %>
<layout:base>
<jsp:attribute name="title">Cards Rush - Récuperation mot de passe</jsp:attribute>
<jsp:body>
<div class="hero is-light is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-5-tablet is-5-desktop is-5-widescreen">
<div class="box">
<h1 class="title has-text-centered">Récupération de mot de passe</h1>
<form:reset-password/>
</div>
</div>
</div>
</div>
</div>
</div>
</jsp:body>
</layout:base>
S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/reset-password.tag
+114
View File
@@ -0,0 +1,114 @@
<%@tag description="form/register" pageEncoding="UTF-8" %>
<form id="reset-password-form" action="${pageContext.request.contextPath}/reset-password" method="post">
<input type="hidden" id="token" name="token" value="${pageContext.request.getParameter("token")}">
<div class="field">
<label class="label" for="password">Mot de passe</label>
<input id="password" name="password" type="password" class="input is-fullwidth" required>
</div>
<div class="field">
<label class="label" for="repassword">Confirmez le mot de passe</label>
<input id="repassword" name="repassword" type="password" class="input is-fullwidth" required>
</div>
<input type="submit" class="button is-primary is-fullwidth" value="Envoyer">
<hr/>
<p class="content has-text-centered">Déjà inscrit ? <a href="${pageContext.request.contextPath}/login">Se connecter</a></p>
</form>
<style>
.notification {
position: absolute;
bottom: 0;
right: 0;
margin: 1em !important;
max-width: 40em;
transform: translateY(100%);
opacity: 0;
animation: toast 5s ease forwards;
}
@keyframes toast {
0% {
opacity: 0;
transform: translateY(100%);
}
5% {
opacity: 1;
transform: translateY(0);
}
95% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(100%);
}
}
</style>
<script defer type="module">
const resetPasswordForm = document.querySelector("form#reset-password-form");
const submitButton = document.querySelector("input[type=submit]");
// Form fields
const tokenInput = document.querySelector("input#token");
const passwordInput = document.querySelector("input#password");
const repasswordInput = document.querySelector("input#repassword");
// Add event listener to the form submission
resetPasswordForm.addEventListener("submit", onSubmit)
/**
* Handle the form submission with Ajax request
* @param event {Event} - Event of the form submission
*/
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"));
}
/**
* Handle the error of the form submission
* @param error {Error} - Error of the form submission
*/
function onError(error) {
console.error("Error:", error)
// Input fields in red
passwordInput.classList.add("is-danger");
repasswordInput.classList.add("is-danger");
// Notification
const notification = document.createElement("div");
notification.classList.add("notification", "is-danger");
notification.innerHTML = error.message;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 5010);
}
</script>