Merge pull request #25 from pastore99/24-bugfix-resolve-password-rese…

…t-in-login-page-not-hidden-until-needed 24 bugfix resolve password reset in login page not hidden until needed
pastore99 · Dec 26, 2023 · f157cd0 · f157cd0
2 parents b6485a1 + 5d7a002
commit f157cd0
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 29 deletions.
diff --git a/src/main/java/controller/SendResetPin.java b/src/main/java/controller/SendResetPin.java
@@ -1,6 +1,8 @@
 package controller;
 
+import model.entity.User;
 import model.service.login.Authenticator;
+import model.service.user.UserData;
 
 import javax.servlet.annotation.WebServlet;
 import javax.servlet.http.HttpServlet;
@@ -12,10 +14,15 @@
 public class SendResetPin extends HttpServlet {
     public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
         String email = request.getParameter("email");
-        String pin = new Authenticator().resetPassword(email);
-        // Store the pin and email in the session for future comparison
-        // Send back a result
+        UserData checker = new UserData();
+
         response.setContentType("text/plain");
-        response.getWriter().println(pin);
+        if(checker.checkIfEmailExists(email)){
+            String pin = new Authenticator().resetPassword(email);
+            response.getWriter().println(pin);
+        }
+        else {
+            response.getWriter().println("NA");
+        }
     }
 }
diff --git a/src/main/webapp/CSS/login.css b/src/main/webapp/CSS/login.css
@@ -26,6 +26,10 @@ a:hover {
     text-decoration: none;
 }
 
+.hiddenClass{
+    display: none;
+}
+
 #loginPage{
     width: 100%;
     display: flex;

diff --git a/src/main/webapp/JS/login.js b/src/main/webapp/JS/login.js
@@ -1,35 +1,70 @@
-// Extract the element identifiers as variables
-let resetEmail = $("#resetEmail");
-let resetStep1 = $("#resetStep1");
-let resetStep2 = $("#resetStep2");
-let resetStep3 = $("#resetStep3");
-let resetPasswordModal = $('#resetPasswordModal');
-let newPassword = $("#newPassword");
-let repeatNewPassword = $("#repeatNewPassword");
-let resetButton = $("#resetPassword");
-let newPasswordError = $(".error");
-let contextPath = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));
+const resetEmail = $("#resetEmail");
+const resetStep1 = $("#resetStep1");
+const resetStep2 = $("#resetStep2");
+const resetStep3 = $("#resetStep3");
+const resetPasswordModal = $('#resetPasswordModal');
+const newPassword = $("#newPassword");
+const repeatNewPassword = $("#repeatNewPassword");
+const resetButton = $("#resetPassword");
+const newPasswordError = $(".error");
+const showPasswordIcon = $("#showPassword");
+const hidePasswordIcon = $("#hidePassword");
+const validEmailIcon = $("#validEmail");
+const invalidEmailIcon = $("#invalidEmail");
+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 () {
+$(document).ready(function startUp() {
+
+    showPasswordIcon.toggleClass("hiddenClass");
+
+    $("#showPassword").click((event) => {
+        event.preventDefault();
+        togglePassword(event);
+    });
+
+    $("#hidePassword").click((event) => {
+        event.preventDefault();
+        togglePassword(event);
+    });
+
+    $("#email").blur(() => {
+        checkRegexEmail();
+    });
 
     $("#forgotPassword").click(handleForgotPassword);
 
-    var sessionPin;
-    $("#sendPin").click(() => {
+    let sessionPin;
+    /*
+    $("#sendPin").click((event) => {
         event.preventDefault();
         $.post(`${contextPath}/login/reset`, {email: resetEmail.val()}, function(response) {
             sessionPin = response.trim(); // Save the response, which should be your pin
             resetStep1.hide();
             resetStep2.show();
         });
     });
+    */
+    $("#sendPin").click((event) => {
+        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
+                resetStep1.hide();
+                resetStep2.show();
+            }
+        });
+    });
 
-    $("#confirmPin").click(() => {
+    $("#confirmPin").click((event) => {
         event.preventDefault();
         if ($("#pin").val() === sessionPin) {
             // if the PIN entered matches the saved PIN, proceed to step 3
@@ -40,7 +75,7 @@ $(document).ready(function () {
         }
     });
 
-    $("#resetPassword").click(function() {
+    $("#resetPassword").click(function(event) {
         event.preventDefault();
         $.post(`${contextPath}/login/resetpassword`, {
             email: $("#resetEmail").val(),
@@ -57,6 +92,44 @@ $(document).ready(function () {
 
 });
 
+function togglePassword(event) {
+    event.preventDefault();
+
+    const passwordField = $("#password");
+    let passwordType = passwordField.attr('type');
+    console.log(passwordType);
+
+    if (passwordType === 'password') {
+        passwordField.attr("type", "text")
+    } else {
+        passwordField.attr("type", "password");
+    }
+
+    showPasswordIcon.toggleClass("hiddenClass")
+    hidePasswordIcon.toggleClass("hiddenClass")
+}
+
+function checkRegexEmail(){
+    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    const emailField = $("#email");
+
+    if(regex.test(emailField.val())){
+        if(validEmailIcon.hasClass("hiddenClass")){
+            validEmailIcon.toggleClass("hiddenClass");
+        }
+        if(!invalidEmailIcon.hasClass("hiddenClass")) {
+            invalidEmailIcon.toggleClass("hiddenClass");
+        }
+    } else{
+        if(!validEmailIcon.hasClass("hiddenClass")){
+            validEmailIcon.toggleClass("hiddenClass");
+        }
+        if(invalidEmailIcon.hasClass("hiddenClass")){
+            invalidEmailIcon.toggleClass("hiddenClass");
+        }
+    }
+}
+
 function handleForgotPassword(event) {
     event.preventDefault();
     resetPasswordModal.modal('show');
@@ -88,7 +161,7 @@ function validatePassword() {
         showError("Le password non coincidono.");
         check2 = false;
     }
-    if (THEPASSWORD == confirmPassword) {
+    if (THEPASSWORD === confirmPassword) {
         showError("");
         check2 = true;
     }

diff --git a/src/main/webapp/JSP/login.jsp b/src/main/webapp/JSP/login.jsp
@@ -18,25 +18,25 @@
                 </div>
                 <input class="formInput" type="email" id="email" name="email" placeholder="[email protected]" required>
                 <div class="icon iconRight">
-                    <img hidden id="validEmail" src="../images/valid.svg" alt="emailIcon">
-                    <img hidden id="invalidEmail" src="../images/invalid.svg" alt="emailIcon">
+                    <img id="validEmail" src="../images/valid.svg" alt="validEmail" class="hiddenClass">
+                    <img id="invalidEmail" src="../images/invalid.svg" alt="invalidEmail" class="hiddenClass">
                 </div>
             </div>
 
             <br>
             <div class="inputDiv">
                 <div class="icon iconLeft">
-                    <img src="../images/passwordIcon.svg" alt="emailIcon">
+                    <img src="../images/passwordIcon.svg" alt="passwordIcon">
                 </div>
                 <input class="formInput" type="password" id="password" name="password" placeholder="Password" required>
                 <div class="icon iconRight">
-                    <button hidden class="togglePassword" id="hidePassword"><img src="../images/hidePassword.svg" alt="ShowPasswordIcon"></button>
-                    <button class="togglePassword" id="showPassword"><img src="../images/showPassword.svg" alt="ShowPasswordIcon"></button>
+                    <button class="togglePassword hiddenClass" id="hidePassword"><img src="../images/hidePassword.svg" alt="hidePasswordIcon"></button>
+                    <button class="togglePassword hiddenClass" id="showPassword"><img src="../images/showPassword.svg" alt="showPasswordIcon"></button>
                 </div>
             </div>
             <br>
             <div id="loginForgot">
-                <a href="#">Password Dimenticata?</a>
+                <a href="#" data-bs-toggle="modal" data-bs-target="#resetPasswordModal">Password Dimenticata?</a>
             </div>
             <button type="submit" value="Login" id="loginButton">Login</button>
         </form>
@@ -73,9 +73,10 @@
             </div>
         </div>
     </div>
-    <link rel="stylesheet" href="../CSS/login.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script src="../JS/login.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="../CSS/login.css">
 </body>
 </html>