Added client-side validation for log-in

src/main/resources/static/css/userProfile.css

@@ -39,8 +39,11 @@
 }
 
 body {
-    background: linear-gradient(135deg, #d295e9, #53166a);
+    background: linear-gradient(135deg, #f7e8fd, #9914d1);
     height: 100svh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
 }
 main {
     background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
@@ -52,6 +55,8 @@ main {
     margin-top: 6em;
     padding-inline: 1vw;
     box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+
+
 }
 .userInfo {
     display: flex;
@@ -259,17 +264,16 @@ header .footerButton:hover {
     margin-block: 5svh;
     display: flex;
     text-align: center;
-    justify-content: left;
-    background: #c45cef;
+    justify-content: center;
+    background: rgba(196, 92, 239, 0.75);
     padding: 2em;
-
-    width: auto;
-    height: auto;
+    flex: 0 0;
     border-radius: 1vw;
     box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
     & h2 {
-        margin-left: 1vw;
+        margin-left: 0;
         margin-right: auto;
+        margin-bottom: 0.5em;
     }
     & form{
         margin-block: auto;
@@ -300,6 +304,8 @@ header .footerButton:hover {
         width: 40vw;
         border-radius: 0.2em;
         padding-inline: 0.4em;
+        border: transparent solid 0.1em;
+        margin-bottom: 1em;
     }
     & button {
         font-size: 1em;
@@ -318,4 +324,39 @@ header .footerButton:hover {
         background-color: var(--accent-border);
         border: 0.1em solid var(--accent-colour);
     }
+}
+.label {
+    position: relative;
+}
+.invalid-tooltip {
+    color: red;
+    width: fit-content;
+    opacity: 0;
+    font-size: 0.6em;
+    text-shadow: red 0 0.2em 1em;
+    transition: 0.3s ease-in-out 1ms;
+    padding:0.1em;
+    position: absolute;
+    right: 0.2em;
+    bottom: 0.2em;
+    height: fit-content;
+}
+.invalid-field {
+    box-shadow: red 0 0 1em;
+    transition: 0.3s ease-in-out 1ms;
+}
+.valid-field {
+    box-shadow: #40ff00 0 0 1em;
+    border: #40ff00 solid 0.1em;
+    transition: 0.3s ease-in-out 1ms;
+}
+
+#invalidLogin {
+    color: red;
+    text-shadow: black 0 0.1em 0.2em;
+    width: auto;
+    height: auto;
+    font-size: 0.6em;
+    opacity: 0;
+    transition: 0.5s ease-in-out 1ms;
 }
\ No newline at end of file

src/main/resources/static/scripts/login.js

+let username = document.forms["loginForm"]["username"];
+let password = document.forms["loginForm"]["password"];
+let pattern = new RegExp("^[a-z0-9_-]{3,15}$");
+
+username.addEventListener("input", validateUsername)
+password.addEventListener("input", validatePassword)
+
+function validateUsername() {
+    if (!(username.value === "") && pattern.test(username.value)){
+        username.classList.remove("invalid-field");
+        username.classList.add("valid-field");
+        document.getElementById(username.name+"Invalid").style.opacity = 0;
+        username.style.borderColor = "green";
+        return true;
+    } else if( ! (username.classList.contains("invalid-field") ) ){
+        username.classList.add("invalid-field");
+        username.classList.remove("valid-field");
+        document.getElementById(username.name+"Invalid").style.opacity = 1;
+        username.style.borderColor = "red";
+    }
+    return false;
+}
+function validatePassword(){
+    if (password.value === "") {
+        password.classList.add("invalid-field");
+        password.classList.remove("valid-field");
+        document.getElementById(password.name+"Invalid").style.opacity = 1;
+        password.style.borderColor = "red";
+        return false;
+    } else if( ! (password.classList.contains("valid-field") ) ) {
+        password.classList.remove("invalid-field");
+        password.classList.add("valid-field");
+        document.getElementById(password.name+"Invalid").style.opacity = 0;
+        password.style.borderColor = "green";
+    }
+    return true;
+}
+
+function validateForm(){
+    if (validateUsername() & validatePassword()) { //Using just & so it checks both, even if the first is false (it applies the style)
+        console.log("VALID");
+        return false;
+    } else {
+        console.log("Invalid");
+        document.getElementById("invalidLogin").style.opacity = 1;
+        return false;
+    }
+    //TODO SERVER SIDE VALIDATION AND CHECK AGAINST USERS DB TABLE
+}
\ No newline at end of file

src/main/resources/templates/rewards/login.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>User Log In</title>
     <link rel="stylesheet" th:href="@{/css/userProfile.css}">
+
 </head>
 <body>
 
@@ -18,12 +19,20 @@
 </header>
 <main  class="solidBg">
     <div class="loginWrapper">
-        <form action="/login" method="post">
+        <form action="" onsubmit="return validateForm()" method="post" name="loginForm">
             <h2>Log In</h2>
-            <label for="username"><b>Username</b><br></label>
-                <input type="text" name="username" id="username" placeholder="Enter Username">
-            <label for="password"><b>Password</b><a>Forgot Password</a><br></label>
-                <input type="password" id="password" name="password">
+            <div class="label">
+                <label for="username"><b>Username</b><br></label>
+                <div id="usernameInvalid" class="invalid-tooltip">Please fill out this field.</div>
+            </div>
+            <input type="text" name="username" id="username" placeholder="Enter Username" title="Username Input">
+
+            <div class="label">
+                <label for="password"><b>Password</b><br></label>
+                <div id="passwordInvalid" class="invalid-tooltip">Please fill out this field.</div>
+            </div>
+            <input type="password" id="password" name="password">
+            <div id="invalidLogin">Username and/or Password incorrect. Please try again.</div>
             <button type="submit"><b>Log In</b></button>
         </form>
 
@@ -32,5 +41,8 @@
 </main>
 
 
+
+<script type="text/javascript" th:src="@{scripts/login.js}"></script>
+
 </body>
 </html>
\ No newline at end of file

src/main/resources/templates/rewards/userProfile.html

@@ -14,7 +14,7 @@
         <li class="footerButton"><b>About</b></li>
         <li class="footerButton"><b>Map</b></li>
         <li class="footerButton"><b>Facilities</b></li>
-        <li class="footerButton"><b>Search</b></li>
+        <li class="footerButton"><b>Log In</b></li>
     </ul>
 </header>
 
@@ -37,7 +37,7 @@
 <!--            </div>-->
 <!--        </article>-->
         <article class="dragonProgression">
-            <h1>The Dragon Trail</h1>
+            <h1>The Dragon's Tale</h1>
             <div class="dragonContainer">
                 <div class="dragonFill" th:style="'width:'+ ${user.getDragonProgress()} + '%;'">
                     <img th:src="@{/images/rewards/dragonFilled.png}"
@@ -70,8 +70,4 @@
 <script>
 </script>
 </body>
-</html>
-
+</html>
\ No newline at end of file
-<!--TODO finished doing the tooltips, need to add some more changes to them for sure
-    TODO afterwards probably need to implement thymeleaf so it shows badges based on the list
-    TODO implement some placeholder pictures as well for the badges and for the stickers -->
\ No newline at end of file