diff --git a/pom.xml b/pom.xml index 2b155c4..e0154c0 100644 --- a/pom.xml +++ b/pom.xml @@ -56,6 +56,11 @@ jakarta.mail 1.6.5 + + javax.servlet + javax.servlet-api + 3.1.0 + diff --git a/src/main/webapp/CSS/login.css b/src/main/webapp/CSS/login.css new file mode 100644 index 0000000..e8e9ed6 --- /dev/null +++ b/src/main/webapp/CSS/login.css @@ -0,0 +1,145 @@ +* { + margin: 0; + padding: 0; + font-family: Inter, sans-serif; +} + +body { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; +} + +a { + color: #199a8e; + text-decoration: none; +} + +a:visited { + color: #199a8e; + text-decoration: none; +} + +a:hover { + color: #199a8e; + text-decoration: none; +} + +#loginPage{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +#loginTitle{ + margin-top: 10%; + font-size: 3em; +} + +#loginLogo{ + width: 90%; + height: 25vh; + display: flex; + justify-content: center; + align-items: center; +} + +#loginLogo > img{ + width: 100%; + height: 100%; +} + +#loginForm{ + margin-top: 5%; + width: 70%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.inputDiv{ + width: 100%; + height: 10%; + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: #f9fafb; + border: 2px solid #e8eaed; + border-radius: 500px; + margin-bottom: 4%; +} + +.icon{ + display: flex; + justify-content: center; + align-items: center; + text-align: center; + width: 10%; +} + +.iconLeft{ + margin-left: 3%; +} + +.iconRight{ + margin-right: 3%; +} + +.icon > img{ + width: 50%; +} + +.formInput{ + padding: 5% 5%; + height: 90%; + width: 80%; + border: none; + background-color: #f9fafb; + font-size: 2em; +} + +.formInput:focus{ + border: none; + outline: none; +} + +#loginForgot{ + font-size: 2em; + width: 100%; + margin-right: 3%; + text-align: right; + margin-bottom: 5%; +} + +.togglePassword{ + border: none; + background-color: #f9fafb; + border-radius: 50%; + padding: 3%; + width: 70%; +} + +.togglePassword > img{ + width: 100%; +} + +#loginButton{ + 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/JSP/login.jsp b/src/main/webapp/JSP/login.jsp index 09fcf41..2988ee1 100644 --- a/src/main/webapp/JSP/login.jsp +++ b/src/main/webapp/JSP/login.jsp @@ -1,67 +1,48 @@ - + - Login Screen - + TalkAId - Login - -
-

Login

-
- - +
+
+

Login

+
+ + +
+
+ emailIcon +
+ +
+ + +
+
+
- - +
+
+ emailIcon +
+ +
+ + +
+

- + + - Password Dimenticata? +
+

Non hai un account? Registrati

+
+ - - + + \ No newline at end of file diff --git a/src/main/webapp/JavaScript/login.js b/src/main/webapp/JavaScript/login.js new file mode 100644 index 0000000..5f6245c --- /dev/null +++ b/src/main/webapp/JavaScript/login.js @@ -0,0 +1,51 @@ +$(document).ready(function startUp(){ + $("#showPassword").click(function (event){ + togglePassword(event); + + }); + $("#hidePassword").click(function (event){ + event.preventDefault(); + togglePassword(event); + }); + + $("#email").blur(function (){ + checkRegexEmail(); + }); + +}) + +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"); + } + + $("#showPassword").toggle() + $("#hidePassword").toggle() + + return NaN +} + +function checkRegexEmail(){ + const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + const emailField = $("#email"); + + if(regex.test(emailField.val())){ + $("#validEmail").show() + $("#invalidEmail").hide() + + } + else{ + $("#validEmail").hide() + $("#invalidEmail").show() + } + + return NaN +} \ No newline at end of file diff --git a/src/main/webapp/images/TalkAidLogo.svg b/src/main/webapp/images/TalkAidLogo.svg new file mode 100644 index 0000000..378c1fc --- /dev/null +++ b/src/main/webapp/images/TalkAidLogo.svg @@ -0,0 +1 @@ +ALKAIDTTALK AID \ No newline at end of file diff --git a/src/main/webapp/images/emailIcon.svg b/src/main/webapp/images/emailIcon.svg new file mode 100644 index 0000000..f64c99d --- /dev/null +++ b/src/main/webapp/images/emailIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main/webapp/images/hidePassword.svg b/src/main/webapp/images/hidePassword.svg new file mode 100644 index 0000000..03f57d8 --- /dev/null +++ b/src/main/webapp/images/hidePassword.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main/webapp/images/invalid.svg b/src/main/webapp/images/invalid.svg new file mode 100644 index 0000000..af8ead6 --- /dev/null +++ b/src/main/webapp/images/invalid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main/webapp/images/passwordIcon.svg b/src/main/webapp/images/passwordIcon.svg new file mode 100644 index 0000000..eb18f6c --- /dev/null +++ b/src/main/webapp/images/passwordIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main/webapp/images/showPassword.svg b/src/main/webapp/images/showPassword.svg new file mode 100644 index 0000000..186dd4d --- /dev/null +++ b/src/main/webapp/images/showPassword.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main/webapp/images/valid.svg b/src/main/webapp/images/valid.svg new file mode 100644 index 0000000..1790370 --- /dev/null +++ b/src/main/webapp/images/valid.svg @@ -0,0 +1 @@ + \ No newline at end of file