client/views/login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Banka | Login</title>
<link rel="icon" type="image/x-icon" href="../assets/img/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/css/main.css">
<link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
</head>
<body>
<!-- Loader -->
<span class="progress-bar"></span>
<div class="auth-page">
<span class="nav right">
<a href="#" onclick="event.preventDefault();openSlideMenu(this)">
<span class="open-slide">
<i class="fas fa-align-right fa-2x"></i>
</span>
</a>
</span>
<!-- Side nav -->
<div id="side-menu" class="side-nav">
<li class="active"><a href="../../index.html">Home</a></li>
<li><a href="contact-us.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="help.html">Help</a></li>
<li><a href="new-account.html">Get started</a></li>
</div>
<section class="banner">
<div id="logo">
<a href="../../index.html">
<img src="../assets/img/logo.png" alt="logo">
</a>
</div>
<h1 class="center">Welcome Back!</h1>
</section>
<section class="form">
<div class="toast success">
<img src="../assets/img/check-mark.gif" alt="check-mark">
</div>
<div class="toast error">
<img src="../assets/img/cross-mark.jpg" alt="cross-mark">
</div>
<span class="back" onclick="window.history.back()">
<i class="fas fa-arrow-left fa-2x"></i>
</span>
<header>
<h3>Log In</h3>
</header>
<form id="loginForm" onsubmit="event.preventDefault();return handleLogin(event)">
<div class="form-row">
<div class="form-input">
<label for="email">Email:</label>
<input type="email" name="email" required>
</div>
</div>
<div class="form-row">
<div class="form-input">
<label for="password">Password:</label>
<input type="password" name="password" required minlength="6">
</div>
</div>
<br>
<div class="form-row">
<div class="form-input login-button">
<input id="login" class="button button-green" type="submit" value="Login">
</div>
</div>
<!-- Navigate -->
<div class="navigate">
<div>
<span><small>Don't have an account yet?</small></span><br>
<span><small>Click <a href="signup.html">here</a></small></span>
</div>
<div>
<!-- <span><small><a href="#">Forgot password?</a></small></span> -->
</div>
</div>
</form>
</section>
</div>
<script>
window.onload = function() {
let div = document.querySelector('.auth-page');
div.style.height = window.innerHeight + "px";
// Check if user is logged in
const token = localStorage.getItem('token');
if (token) redirect.home();
}
// handle login
const handleLogin = (e) => {
const start = new Date();
// Disable button
const button = document.querySelector('#login');
button.setAttribute('disabled', 'disabled');
button.style.opacity = '0.5';
button.style.cursor = 'none';
// Loader
const loader = document.querySelector('.loader');
const { email, password } = e.target;
const data = { email: email.value, password: password.value };
const config = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
}
const url = new URL(env.url());
const user = fetch(`${url.href}/auth/signin/`, config)
.then(response => response.json())
.then(json => {
if (json.status < 300) {
// store token/user data into the browser local storage
localStorage.setItem('token', json.data.token);
localStorage.setItem('username', json.data.email);
redirect.home();
showToast(true, 'Login successful');
} else {
showToast(false, errorResponse(json.error));
return handleLoadingComplete(true, 2)
}
})
.catch(err => {
showToast(false, 'Please check your network and try again');
return handleLoadingComplete(true, 2)
});
// Enable button
const duration = new Date().getMilliseconds() - start.getMilliseconds();
setTimeout(() => {
button.removeAttribute('disabled');
button.style.opacity = 1;
button.style.cursor = 'pointer';
}, duration * 2 * 1000);
return handleLoadingComplete(false, new Date().getMilliseconds() - start.getMilliseconds());
}
</script>
<script src="../assets/js/middleware.js"></script>
<script src="../assets/js/main.js"></script>
<script src="../assets/js/utils.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
</body>
</html>