From 9caf1ac9e2a2bb02441c707df35bb77a40bb8446 Mon Sep 17 00:00:00 2001 From: DDDrag0 Date: Fri, 12 Jan 2024 14:26:15 +0100 Subject: [PATCH] fixed the visual bugs on registration and merged changePasswLogin.jsp with Login.jsp --- src/main/webapp/CSS/changePasswLogin.css | 17 ++ src/main/webapp/CSS/login.css | 12 ++ src/main/webapp/JS/changePasswLogin.js | 145 ----------------- src/main/webapp/JS/login.js | 189 +++++++++++++++-------- src/main/webapp/JS/registration.js | 65 +++++++- src/main/webapp/JSP/changePasswLogin.jsp | 55 ------- src/main/webapp/JSP/login.jsp | 73 +++++---- src/main/webapp/JSP/registration.jsp | 135 +++++++--------- 8 files changed, 318 insertions(+), 373 deletions(-) delete mode 100644 src/main/webapp/JS/changePasswLogin.js delete mode 100644 src/main/webapp/JSP/changePasswLogin.jsp diff --git a/src/main/webapp/CSS/changePasswLogin.css b/src/main/webapp/CSS/changePasswLogin.css index 0c52f32..1e58a5c 100644 --- a/src/main/webapp/CSS/changePasswLogin.css +++ b/src/main/webapp/CSS/changePasswLogin.css @@ -5,6 +5,10 @@ padding: 20px; } +.hidden { + display: none; +} + .card, .cardo, .button, @@ -102,4 +106,17 @@ border: 1px solid; border-color: #e5e7eb; text-align: center; +} +button { + border: none; + background-color: #ffffff; +} + +#gotoLoginArrow span { + border-left: 1em solid transparent; + border-right: 1em solid transparent; + border-bottom: 3em solid black; + display: block; + margin: auto; + transform: rotate(270deg); } \ No newline at end of file diff --git a/src/main/webapp/CSS/login.css b/src/main/webapp/CSS/login.css index cee1e48..28c23cd 100644 --- a/src/main/webapp/CSS/login.css +++ b/src/main/webapp/CSS/login.css @@ -144,6 +144,18 @@ a:hover { font-size: 2em; } +#signUpButton{ + color: white; + width: 100%; + background-color: #199a8e; + border: none; + padding: 5% 10%; + border-radius: 500px; + margin-bottom: 20px; + display: inline-block; + font-size: 2em; +} + #loginRegister{ font-size: 2em; } \ No newline at end of file diff --git a/src/main/webapp/JS/changePasswLogin.js b/src/main/webapp/JS/changePasswLogin.js deleted file mode 100644 index 1c696ff..0000000 --- a/src/main/webapp/JS/changePasswLogin.js +++ /dev/null @@ -1,145 +0,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)); - - -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'); - } -} \ No newline at end of file diff --git a/src/main/webapp/JS/login.js b/src/main/webapp/JS/login.js index c2ebb6a..68fc335 100644 --- a/src/main/webapp/JS/login.js +++ b/src/main/webapp/JS/login.js @@ -1,8 +1,10 @@ const resetEmail = $("#resetEmail"); -const resetStep1 = $("#resetStep1"); -const resetStep2 = $("#resetStep2"); -const resetStep3 = $("#resetStep3"); -const resetPasswordModal = $('#resetPasswordModal'); +const c1 = $("#c1"); +const c2 = $("#c2"); +const c3 = $("#c3"); +const c4 = $('#c4'); +const loginPage = $('#loginPage'); +const container = $('#container'); const newPassword = $("#newPassword"); const repeatNewPassword = $("#repeatNewPassword"); const resetButton = $("#resetPassword"); @@ -13,10 +15,10 @@ 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); +var myDiv = document.getElementById('container'); +myDiv.classList.add('hidden'); +var loginPageDiv = document.getElementById('loginPage'); $(document).ready(function startUp() { @@ -37,59 +39,6 @@ $(document).ready(function startUp() { }); $("#forgotPassword").click(handleForgotPassword); - - 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((event) => { - event.preventDefault(); - if ($("#pin").val() === sessionPin) { - // if the PIN entered matches the saved PIN, proceed to step 3 - resetStep2.hide(); - resetStep3.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) { - alert(data); - $("#resetPasswordModal").modal('hide'); - }) - .fail(function(err) { - console.log(err); - }); - }); - }); function togglePassword(event) { @@ -130,14 +79,118 @@ function checkRegexEmail(){ } } -function handleForgotPassword(event) { - event.preventDefault(); - resetPasswordModal.modal('show'); - resetStep1.show(); - resetStep2.hide(); - resetStep3.hide(); -} +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' : ''; + } + } + + $("#handleForgotPassword").click((event) => { + event.preventDefault(); + myDiv.classList.remove('hidden'); + container.show(); + loginPageDiv.classList.add('hidden'); + loginPage.hide(); + }); + + $("#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 + 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(); + myDiv.classList.add('hidden'); + container.hide(); + loginPageDiv.classList.remove('hidden'); + loginPage.show(); + }); + + $("#gotoLoginArrow").click(function(event) { + event.preventDefault(); + myDiv.classList.add('hidden'); + container.hide(); + loginPageDiv.classList.remove('hidden'); + loginPage.show(); + }); +}); function validatePassword() { THEPASSWORD = newPassword.val(); @@ -178,4 +231,4 @@ function showError(message) { if (!message) { newPasswordError.removeClass('error active'); } -} +} \ No newline at end of file diff --git a/src/main/webapp/JS/registration.js b/src/main/webapp/JS/registration.js index 66b9e0a..7dfd102 100644 --- a/src/main/webapp/JS/registration.js +++ b/src/main/webapp/JS/registration.js @@ -1,5 +1,23 @@ $(document).ready(function() { + + showPasswordIcon.toggleClass("hiddenClass"); + + $("#showPassword").click((event) => { + event.preventDefault(); + togglePassword(event); + }); + + $("#hidePassword").click((event) => { + event.preventDefault(); + togglePassword(event); + }); + + $("#email").blur(() => { + checkRegexEmail(); + }); + + $('#signUpButton').click(function(e) { //e.preventDefault(); let pin = $('#pin').val(); @@ -54,4 +72,49 @@ $(document).ready(function() { } }); }); -}); \ No newline at end of file +}); + + +const showPasswordIcon = $("#showPassword"); +const hidePasswordIcon = $("#hidePassword"); +const validEmailIcon = $("#validEmail"); +const invalidEmailIcon = $("#invalidEmail"); + + +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"); + } + } +} diff --git a/src/main/webapp/JSP/changePasswLogin.jsp b/src/main/webapp/JSP/changePasswLogin.jsp deleted file mode 100644 index 21c11f7..0000000 --- a/src/main/webapp/JSP/changePasswLogin.jsp +++ /dev/null @@ -1,55 +0,0 @@ -<%@ 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/JSP/login.jsp b/src/main/webapp/JSP/login.jsp index 52de647..2844e6a 100644 --- a/src/main/webapp/JSP/login.jsp +++ b/src/main/webapp/JSP/login.jsp @@ -2,6 +2,7 @@ TalkAId - Login + <%@page contentType="text/html;charset=UTF-8"%>
@@ -36,47 +37,65 @@

- Password Dimenticata? + Password Dimenticata?

Non hai un account? Registrati

+ -