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

feat: devWeb - update forgotten-password

Browse Source
This commit is contained in:
kmitresse
2024-04-17 16:57:11 +02:00
parent 764588a3bb
commit b640c9490a
4 changed files with 300 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/forgotten-password.jsp
+52 -33
View File
@@ -1,33 +1,52 @@
<%--
Created by IntelliJ IDEA.
User: lucas
Date: 20/03/2024
Time: 16:47
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Forgotten Password</title>
<meta charset="UTF-8">
<%-- <link href="${pageContext.request.contextPath}/static/css/forgotten-password.css" rel="stylesheet">--%>
<script src="${pageContext.request.contextPath}/static/js/forgotten-password.js" defer></script>
</head>
<body>
<%@include file="../components/navbar.jsp"%>
<main>
<h1>Mot de passe oublié</h1>
<p>Entrer votre email pour recevoir un lien de récupération</p>
<form id="forgottenPasswordForm" action="forgotten-password" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Send</button>
</form>
<%if(request.getParameter("error") != null && request.getParameter("error").equals("1")){%>
<p>L'adresse mail insérée est incorrecte</p>
<%} else if (request.getParameter("success") != null) {%>
<p>Un email vous a été envoyé</p>
<%}%>
</main>
</body>
</html>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %>
<%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
<%@taglib prefix="form" tagdir="/WEB-INF/tags/forms" %>
<layout:base>
<jsp:attribute name="title">CardRush - Mot de passe oublié</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">Mot de passe oublié ?</h1>
<p class="content"> Veuillez entrer votre email pour obtenir un lien de récupération</p>
<form:forgotten-password/>
</div>
</div>
</div>
</div>
</div>
</div>
</jsp:body>
</layout:base>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<html>--%>
<%--<head>--%>
<%-- <title>Forgotten Password</title>--%>
<%-- <meta charset="UTF-8">--%>
<%--&lt;%&ndash; <link href="${pageContext.request.contextPath}/static/css/forgotten-password.css" rel="stylesheet">&ndash;%&gt;--%>
<%-- <script src="${pageContext.request.contextPath}/static/js/forgotten-password.js" defer></script>--%>
<%--</head>--%>
<%--<body>--%>
<%-- <%@include file="../components/navbar.jsp"%>--%>
<%-- <main>--%>
<%-- <h1>Mot de passe oublié</h1>--%>
<%-- <p>Entrer votre email pour recevoir un lien de récupération</p>--%>
<%-- <form id="forgottenPasswordForm" action="forgotten-password" method="post">--%>
<%-- <label for="email">Email</label>--%>
<%-- <input type="email" id="email" name="email" required>--%>
<%-- <button type="submit">Send</button>--%>
<%-- </form>--%>
<%-- <%if(request.getParameter("error") != null && request.getParameter("error").equals("1")){%>--%>
<%-- <p>L'adresse mail insérée est incorrecte</p>--%>
<%-- <%} else if (request.getParameter("success") != null) {%>--%>
<%-- <p>Un email vous a été envoyé</p>--%>
<%-- <%}%>--%>
<%-- </main>--%>
<%--</body>--%>
<%--</html>--%>
S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/forgotten-password.tag
+109
View File
@@ -0,0 +1,109 @@
<%@tag description="form/forgotten-password" pageEncoding="UTF-8" %>
<form id="forgotten-password-form" action="${pageContext.request.contextPath}/forgotten-password" method="post">
<div class="field"> <!-- Field Username -->
<label class="label" for="email">Email</label>
<input id="email" placeholder="johndoe@exemple.com" class="input is-fullwidth" required/>
</div>
<input type="submit" class="button is-primary is-fullwidth" value="Envoyer">
</form>
<style>
.notification {
position: absolute;
bottom: 0;
right: 0;
margin: 1em !important;
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%);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
</style>
<script defer type="module">
const forgottenPasswordForm = document.querySelector("form#forgotten-password-form");
// Form fields
const emailInput = document.querySelector("input#email");
// Add event listener to the form submission
forgottenPasswordForm.addEventListener("submit", onSubmit)
/**
* Handle the form submission with Ajax request
* @param event {Event} - Event of the form submission
*/
function onSubmit(event) {
event.preventDefault();
const {action, method} = forgottenPasswordForm;
const url = new URL(action);
url.searchParams.append("email", emailInput.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);
}
/**
* 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
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");
notification.innerHTML = error.message;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 5010);
}
// Remove the shake animation at the end of animation
emailInput.addEventListener("animationend", () => emailInput.style.animation = "");
</script>