Skip to content
Snippets Groups Projects
Commit a60d4488 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Added client-side validation for log-in

parent 0e161cd8
No related branches found
No related tags found
1 merge request!26Resolve "As a client I want gamification of the badges, so that users remain engaged."
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/css/userProfile.css
+ 48
− 7
View file @ a60d4488
......@@ -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 0 → 100644
+ 49
− 0
View file @ a60d4488
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
+ 17
− 5
View file @ a60d4488
......@@ -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
+ 3
− 7
View file @ a60d4488
......@@ -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>
<!--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
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment