Merge pull request #19 from pastore99/10-provide-a-better-ui-for-logi…

…n-screen 10 provide a better UI for login screen
pastore99 · Dec 22, 2023 · 3bac83d · 3bac83d
2 parents 64968b4 + 24cb90e
commit 3bac83d
Show file tree

Hide file tree

Showing 11 changed files with 249 additions and 59 deletions.
diff --git a/pom.xml b/pom.xml
@@ -56,6 +56,11 @@
             <artifactId>jakarta.mail</artifactId>
             <version>1.6.5</version>
         </dependency>
+        <dependency>
+            <groupId>javax.servlet</groupId>
+            <artifactId>javax.servlet-api</artifactId>
+            <version>3.1.0</version>
+        </dependency>
 
     </dependencies>
 

diff --git a/src/main/webapp/CSS/login.css 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;
+}
diff --git a/src/main/webapp/JSP/login.jsp b/src/main/webapp/JSP/login.jsp
@@ -1,67 +1,48 @@
 <!DOCTYPE html>
-<html>
+<html lang="it">
 <head>
-    <title>Login Screen</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-        }
-        #login {
-            width: 300px;
-            margin: 0 auto;
-            padding: 30px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-        #login h2 {
-            margin-bottom: 20px;
-        }
-        #login label {
-            display: block;
-            margin-bottom: 10px;
-        }
-        #login input[type="email"],
-        #login input[type="password"] {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-        #login input[type="submit"] {
-            background-color: #4CAF50;
-            color: white;
-            padding: 10px 20px;
-            margin: 20px 0;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        #login input[type="submit"]:hover {
-            background-color: #45a049;
-        }
-        #login a {
-            text-decoration: none;
-            color: #4CAF50;
-        }
-        #login a:hover {
-            color: #45a049;
-        }
-    </style>
+    <title>TalkAId - Login</title>
 </head>
 <body>
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-    <div id="login">
-        <h2>Login</h2>
-        <form action="${pageContext.request.contextPath}/login" method="post">
-            <label for="email">Email:</label>
-            <input type="email" id="email" name="email" required>
+    <div id="loginPage">
+        <div id="loginTitle">
+            <h2>Login</h2>
+        </div>
+        <div id="loginLogo">
+            <img src="../images/TalkAidLogo.svg"  alt="TalkAId logo">
+        </div>
+        <form id="loginForm" action="../login" method="post">
+            <div class="inputDiv">
+                <div class="icon iconLeft">
+                    <img src="../images/emailIcon.svg" alt="emailIcon">
+                </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">
+                </div>
+            </div>
+
             <br>
-            <label for="password">Password:</label>
-            <input type="password" id="password" name="password" required>
+            <div class="inputDiv">
+                <div class="icon iconLeft">
+                    <img src="../images/passwordIcon.svg" alt="emailIcon">
+                </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>
+                </div>
+            </div>
             <br>
-            <button type="submit" value="Login">Login</button>
+            <div id="loginForgot">
+                <a href="#">Password Dimenticata?</a>
+            </div>
+            <button type="submit" value="Login" id="loginButton">Login</button>
         </form>
-        <a href="#" id="forgotPassword">Password Dimenticata?</a>
+        <div id="loginRegister">
+            <p>Non hai un account? <a href="#">Registrati</a> </p>
+         </div>
 
         <div id="resetPasswordModal" class="modal fade" role="dialog">
             <div class="modal-dialog">
@@ -92,8 +73,9 @@
             </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>
-    <script src="${pageContext.request.contextPath}/JS/login.js"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
+    <script src="../JS/login.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
 </body>
 </html>
diff --git a/src/main/webapp/JavaScript/login.js 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
+}
diff --git a/src/main/webapp/images/TalkAidLogo.svg b/src/main/webapp/images/TalkAidLogo.svg
diff --git a/src/main/webapp/images/emailIcon.svg b/src/main/webapp/images/emailIcon.svg
diff --git a/src/main/webapp/images/hidePassword.svg b/src/main/webapp/images/hidePassword.svg
diff --git a/src/main/webapp/images/invalid.svg b/src/main/webapp/images/invalid.svg
diff --git a/src/main/webapp/images/passwordIcon.svg b/src/main/webapp/images/passwordIcon.svg
diff --git a/src/main/webapp/images/showPassword.svg b/src/main/webapp/images/showPassword.svg
diff --git a/src/main/webapp/images/valid.svg b/src/main/webapp/images/valid.svg