From a8ee89a60a19d312aa7f0728111e4f51400058c4 Mon Sep 17 00:00:00 2001 From: DDDrag0 Date: Tue, 9 Jan 2024 22:27:59 +0100 Subject: [PATCH 1/2] adding a better fe for password reset from login --- src/main/webapp/CSS/changePasswLogin.css | 105 +++++++++++++++++++++++ src/main/webapp/JS/changePasswLogin.js | 56 ++++++++++++ src/main/webapp/JSP/changePasswLogin.jsp | 44 ++++++++++ src/main/webapp/images/done-24px-1.svg | 3 + 4 files changed, 208 insertions(+) create mode 100644 src/main/webapp/CSS/changePasswLogin.css create mode 100644 src/main/webapp/JS/changePasswLogin.js create mode 100644 src/main/webapp/JSP/changePasswLogin.jsp create mode 100644 src/main/webapp/images/done-24px-1.svg diff --git a/src/main/webapp/CSS/changePasswLogin.css b/src/main/webapp/CSS/changePasswLogin.css new file mode 100644 index 0000000..0c52f32 --- /dev/null +++ b/src/main/webapp/CSS/changePasswLogin.css @@ -0,0 +1,105 @@ +.container { + width: 100%; + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + +.card, +.cardo, +.button, +.square, +.chapter, +.discovering-english { + text-align: center; /* Centra il testo */ +} + +.card { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + padding: 20px; + position: relative; + flex: 0 0 auto; + background-color: #ffffff; + border-radius: 32px; +} + +.chapter { + position: relative; + width: fit-content; + margin-top: -1px; + font-family: Georgia, serif; + color: #444444; + font-size: 2em; + white-space: nowrap; +} + +.discovering-english { + position: relative; + font-family: Georgia, serif; + color: #252526; + font-weight: 700; + font-size: 2em; +} + +.button { + all: unset; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 10px; + position: relative; + background-color: #199a8e; + border-radius: 9999px; + + font-family: Georgia, serif; + color: #ffffff; + font-size: 2em; + white-space: nowrap; + + box-sizing: border-box; +} + +.box{ + font-family: Georgia, serif; + color: #727272; + font-size: 2em; + width: 70%; + height: 1.5em; + background-color: #f9f9fb; + border-radius: 24px; + border: 1px solid; + border-color: #e5e7eb; +} + +.done-px { + width: 20%; +} + + +.cardo { + display: flex; + align-items: center; + gap: 16px; + padding: 20px; + position: relative; + flex: 0 0 auto; + background-color: #ffffff; + border-radius: 32px; +} + +.square { + font-family: Georgia, serif; + color: #727272; + font-size: 2em; + width: 40px; + height: 1.5em; + background-color: #f9f9fb; + border-radius: 24px; + border: 1px solid; + border-color: #e5e7eb; + text-align: center; +} \ No newline at end of file diff --git a/src/main/webapp/JS/changePasswLogin.js b/src/main/webapp/JS/changePasswLogin.js new file mode 100644 index 0000000..bf4fa61 --- /dev/null +++ b/src/main/webapp/JS/changePasswLogin.js @@ -0,0 +1,56 @@ +var currentSquare = 0; + +function focusInput(squareIndex) { + currentSquare = squareIndex; + updateSquares(); +} + +document.addEventListener('keydown', function(event) { + var key = event.key; + if (key >= '0' && key <= '9') { + var squareId = 'square' + currentSquare; + var square = document.getElementById(squareId); + square.textContent = key; + + currentSquare++; + if (currentSquare > 3) { + currentSquare = 0; + } + updateSquares(); + } +}); + +function updateSquares() { + for (var i = 0; i < 4; i++) { + var squareId = 'square' + i; + var square = document.getElementById(squareId); + square.style.backgroundColor = (i === currentSquare) ? '#c0c0c0' : ''; + } +} + +function b1() { + document.querySelector("#c1").style.display = "none"; + document.querySelector("#c2").style.display = ""; +} + +function b2() { + var data = ''; + for (var i = 0; i < 4; i++) { + var squareId = 'square' + i; + var square = document.getElementById(squareId); + data += square.textContent || '0'; + } + alert('Dati inseriti: ' + data); + document.querySelector("#c2").style.display = "none"; + document.querySelector("#c3").style.display = ""; +} + +function b3() { + + document.querySelector("#c3").style.display = "none"; + document.querySelector("#c4").style.display = ""; +} + +function b4() { + window.location.href = 'login.jsp'; +} \ No newline at end of file diff --git a/src/main/webapp/JSP/changePasswLogin.jsp b/src/main/webapp/JSP/changePasswLogin.jsp new file mode 100644 index 0000000..a160b42 --- /dev/null +++ b/src/main/webapp/JSP/changePasswLogin.jsp @@ -0,0 +1,44 @@ +<%@ page contentType="text/html;charset=UTF-8" language="java" %> + + + + + + +
+
+
Password dimenticata?
+

Inserisci la tua email, ti invieremo un codice di
+ conferma e potrai procedere al reset della password

+ + +
+ + + +
+ + + diff --git a/src/main/webapp/images/done-24px-1.svg b/src/main/webapp/images/done-24px-1.svg new file mode 100644 index 0000000..fdb0b97 --- /dev/null +++ b/src/main/webapp/images/done-24px-1.svg @@ -0,0 +1,3 @@ + + + From ce320fc24f40387ffe131a5d5819dd9446ced160 Mon Sep 17 00:00:00 2001 From: DDDrag0 Date: Wed, 10 Jan 2024 03:34:40 +0100 Subject: [PATCH 2/2] some backend linking for the password reset --- .../model/service/login/Authenticator.java | 4 +- src/main/webapp/JS/changePasswLogin.js | 171 +++++++++++++----- src/main/webapp/JSP/changePasswLogin.jsp | 25 ++- 3 files changed, 150 insertions(+), 50 deletions(-) diff --git a/src/main/java/model/service/login/Authenticator.java b/src/main/java/model/service/login/Authenticator.java index 23fb1fa..94dbd19 100644 --- a/src/main/java/model/service/login/Authenticator.java +++ b/src/main/java/model/service/login/Authenticator.java @@ -26,7 +26,7 @@ public void setEncryption(Encryption encryption) { @Override public String sendPin(String email) { if(email.equals("test@email.com")) { - return "12345678"; + return "1234"; } else { String pin = generatePin(); @@ -50,7 +50,7 @@ String generatePin() { String digits = "0123456789"; String pin = ""; - for(int i = 0; i < 8; i++) { + for(int i = 0; i < 4; i++) { pin += digits.charAt(random.nextInt(digits.length())); } diff --git a/src/main/webapp/JS/changePasswLogin.js b/src/main/webapp/JS/changePasswLogin.js index bf4fa61..1c696ff 100644 --- a/src/main/webapp/JS/changePasswLogin.js +++ b/src/main/webapp/JS/changePasswLogin.js @@ -1,56 +1,145 @@ -var currentSquare = 0; +const resetEmail = $("#resetEmail"); +const c1 = $("#c1"); +const c2 = $("#c2"); +const c3 = $("#c3"); +const c4 = $('#c4'); +const resetButton = $("#resetPassword"); +const newPasswordError = $(".error"); +const newPassword = $("#newPassword"); +const repeatNewPassword = $("#repeatNewPassword"); +const contextPath = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2)); -function focusInput(squareIndex) { - currentSquare = squareIndex; - updateSquares(); -} -document.addEventListener('keydown', function(event) { - var key = event.key; - if (key >= '0' && key <= '9') { - var squareId = 'square' + currentSquare; - var square = document.getElementById(squareId); - square.textContent = key; +let THEPASSWORD; - currentSquare++; - if (currentSquare > 3) { - currentSquare = 0; - } +newPassword.on("input", validatePassword); +repeatNewPassword.on("input", validatePassword); + +$(document).ready(function startUp() { + + var currentSquare = 0; + + function focusInput(squareIndex) { + currentSquare = squareIndex; updateSquares(); } -}); -function updateSquares() { - for (var i = 0; i < 4; i++) { - var squareId = 'square' + i; - var square = document.getElementById(squareId); - square.style.backgroundColor = (i === currentSquare) ? '#c0c0c0' : ''; + document.addEventListener('keydown', function(event) { + + var key = event.key; + + if (key >= '0' && key <= '9') { + var squareId = 'square' + currentSquare; + var square = document.getElementById(squareId); + square.textContent = key; + + currentSquare++; + if (currentSquare > 3) { + currentSquare = 0; + } + updateSquares(); + } + }); + + function updateSquares() { + for (var i = 0; i < 4; i++) { + var squareId = 'square' + i; + var square = document.getElementById(squareId); + square.style.backgroundColor = (i === currentSquare) ? '#c0c0c0' : ''; + } } -} + $("#sendPin").click((event) => { + console.log("Send Pin button clicked"); + event.preventDefault(); + $.post(`${contextPath}/login/reset`, {email: resetEmail.val()}, function(response) { + response = response.trim(); // Trim the response + if(response == "NA") { + // Here, the servlet will return "NA" if it could not find the email + alert("Email non registrata nel nostro sistema. Verificane la correttezza"); + } else { + sessionPin = response; // Save the response, which should be your pin + c1.hide(); + c2.show(); + } + }); + }); -function b1() { - document.querySelector("#c1").style.display = "none"; - document.querySelector("#c2").style.display = ""; -} + $("#confirmPin").click((event) => { + event.preventDefault(); + var data = ''; + for (var i = 0; i < 4; i++) { + var squareId = 'square' + i; + var square = document.getElementById(squareId); + data += square.textContent || '0'; + } + if (data === sessionPin) { + // if the PIN entered matches the saved PIN, proceed to step 3 + c2.hide(); + c3.show(); + } else { + alert('The pin is incorrect'); + } + }); + + $("#resetPassword").click(function(event) { + event.preventDefault(); + $.post(`${contextPath}/login/resetpassword`, { + email: $("#resetEmail").val(), + newPassword: $("#newPassword").val() + }) + .done(function(data) { + c3.hide(); + c4.show(); + }) + .fail(function(err) { + console.log(err); + }); + }); + + $("#gotoLogin").click(function(event) { + event.preventDefault(); + window.location.href = 'login.jsp'; + }); + +}); + +function validatePassword() { + THEPASSWORD = newPassword.val(); + let confirmPassword = repeatNewPassword.val(); + + let check1 = false; + let check2 = false; -function b2() { - var data = ''; - for (var i = 0; i < 4; i++) { - var squareId = 'square' + i; - var square = document.getElementById(squareId); - data += square.textContent || '0'; + let regex = new RegExp("^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{12,}$"); + + if (!(regex.test(THEPASSWORD))) { + showError("Non contiene un carattere maiuscolo, minuscolo, cifra speciale e non lunga 12."); + check1 = false; + } + if (regex.test(THEPASSWORD)) { + showError(""); + check1 = true; } - alert('Dati inseriti: ' + data); - document.querySelector("#c2").style.display = "none"; - document.querySelector("#c3").style.display = ""; -} -function b3() { + if (THEPASSWORD !== confirmPassword) { + showError("Le password non coincidono."); + check2 = false; + } + if (THEPASSWORD === confirmPassword) { + showError(""); + check2 = true; + } - document.querySelector("#c3").style.display = "none"; - document.querySelector("#c4").style.display = ""; + if(check1 && check2) { + resetButton.prop('disabled', false); + } } -function b4() { - window.location.href = 'login.jsp'; +function showError(message) { + newPasswordError.text(message); + newPasswordError.addClass('error active'); + // Removes 'active' class when there is no error + if (!message) { + newPasswordError.removeClass('error active'); + } } \ No newline at end of file diff --git a/src/main/webapp/JSP/changePasswLogin.jsp b/src/main/webapp/JSP/changePasswLogin.jsp index a160b42..21c11f7 100644 --- a/src/main/webapp/JSP/changePasswLogin.jsp +++ b/src/main/webapp/JSP/changePasswLogin.jsp @@ -3,16 +3,21 @@ +
+ +
Password dimenticata?

Inserisci la tua email, ti invieremo un codice di
conferma e potrai procedere al reset della password

- - + +
+ +

Non hai ricevuto il codice?Rimanda

- +
+ + + + +