Merge pull request #59 from pastore99/57-fix-adding-a-better-fe-for-p…

…assword-reset-from-login

57 fix adding a better fe for password reset from login

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("[email protected]")) {
-            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()));
         }
 

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;
+}

src/main/webapp/JS/changePasswLogin.js

@@ -0,0 +1,145 @@
+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));
+
+
+let THEPASSWORD;
+
+newPassword.on("input", validatePassword);
+repeatNewPassword.on("input", validatePassword);
+
+$(document).ready(function startUp() {
+
+    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' : '';
+        }
+    }
+    $("#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();
+            }
+        });
+    });
+
+    $("#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;
+
+    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;
+    }
+
+    if (THEPASSWORD !== confirmPassword) {
+        showError("Le password non coincidono.");
+        check2 = false;
+    }
+    if (THEPASSWORD === confirmPassword) {
+        showError("");
+        check2 = true;
+    }
+
+    if(check1 && check2) {
+        resetButton.prop('disabled', false);
+    }
+}
+
+function showError(message) {
+    newPasswordError.text(message);
+    newPasswordError.addClass('error active');
+    // Removes 'active' class when there is no error
+    if (!message) {
+        newPasswordError.removeClass('error active');
+    }
+}

src/main/webapp/JSP/changePasswLogin.jsp

@@ -0,0 +1,55 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../CSS/changePasswLogin.css" />
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+</head>
+<body>
+<div class="container">
+
+    <!-- Email input -->
+    <div class="card" id="c1">
+        <div class="discovering-english">Password dimenticata?</div>
+        <p class="chapter">	Inserisci la tua email, ti invieremo un codice di<br>
+            conferma e potrai procedere al reset della password</p>
+        <input class="box" placeholder="email" id="resetEmail" type="email">
+        <button class="button" id="sendPin">Verifica</button>
+    </div>
+
+    <!-- PIN input -->
+    <div class="card" id="c2" style="display: none;">
+        <div class="discovering-english">Inserisci Codice di Verifica</div>
+        <p class="chapter">	Se hai fornito l’email correttamente, Inserisci <br>
+            il codice di verifica che ti abbiamo inviato.</p>
+        <div class="cardo">
+            <div class="square" onclick="focusInput(0)" id="square0"></div>
+            <div class="square" onclick="focusInput(1)" id="square1"></div>
+            <div class="square" onclick="focusInput(2)" id="square2"></div>
+            <div class="square" onclick="focusInput(3)" id="square3"></div>
+        </div>
+        <p class="chapter">Non hai ricevuto il codice?Rimanda</p>
+        <button class="button" id="confirmPin">Conferma</button>
+    </div>
+
+    <!-- New password input -->
+    <div class="card" id="c3"style="display: none;">
+        <div class="discovering-english">Crea nuova Password</div>
+        <p class="chapter">Inserisci la nuova password per il login</p>
+        <input class="box" id="newPassword" placeholder="Nuova Password" type="password">
+        <input class="box" id="repeatNewPassword" placeholder="Ripeti Password" type="password">
+        <span class="error" aria-live="polite"></span>
+        <button class="button" id="resetPassword" disabled>Cambia Password</button>
+    </div>
+
+    <!-- Login Redirect -->
+    <div class="card" id="c4" style="display: none;"><img class="done-px" src="../images/done-24px-1.svg" />
+        <div class="discovering-english">Confermato</div>
+        <p class="chapter">Hai resettato correttamente la tua password.</p>
+        <button class="button" id="gotoLogin">Login</button>
+    </div>
+
+</div>
+<script src="../JS/changePasswLogin.js"></script>
+</body>
+</html>