xfarrow
/
blink
mirror of https://github.com/xfarrow/blink
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new login page

This commit is contained in:
Alessandro Ferro 2024-03-22 10:47:08 +01:00
parent bb86034835
commit a94703acf8
3 changed files with 83 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/vanilla/content/stock_photo_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
frontend/vanilla/content/stock_photo_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

104
frontend/vanilla/html/login.html
View File

@ -1,41 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>Log in - Blink</title>
<link rel="stylesheet" href="../css/login-register.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
</head>
<style>
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}
.h-custom {
height: calc(100% - 73px);
}
@media (max-width: 450px) {
.h-custom {
height: 100%;
}
}
</style>
<body>
<!-- partial:index.partial.html -->
<div id="login-form-wrap">
<h2>Login</h2>
<form id="login-form" method="POST">
<section class="vh-100">
<div class="container-fluid h-custom">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-9 col-lg-6 col-xl-5">
<img id="image" class="img-fluid">
</div>
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
<form>
<p>
<input type="email" id="email" name="email" placeholder="Email Address" required><i
class="validation"><span></span><span></span></i>
</p>
<div class="divider d-flex align-items-center my-4">
<p class="text-center fw-bold mx-3 mb-0">Sign In</p>
</div>
<p>
<input type="password" id="password" name="password" placeholder="Password" required><i
class="validation"><span></span><span></span></i>
</p>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="email" class="form-control form-control-lg"
placeholder="Enter a valid email address" />
</div>
<p>
<button type="button" onclick="login()">Login</button>
</p>
<!-- Password input -->
<div class="form-outline mb-3">
<input type="password" id="password" class="form-control form-control-lg" placeholder="Enter password" />
</div>
<div class="d-flex justify-content-between align-items-center">
<!-- Checkbox -->
<div class="form-check mb-0">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
<label class="form-check-label" for="form2Example3">
Remember me
</label>
</div>
<a href="#!" class="text-body">Forgot password?</a>
</div>
<div class="text-center text-lg-start mt-4 pt-2">
<button type="button" onclick="login()" class="btn btn-primary btn-lg"
style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
<p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="register.html"
class="link-danger">Register</a></p>
</div>
</form>
<div id="create-account-wrap">
<p>Not a member? <a href="./register.html">Create Account</a>
<p>
</div>
</div>
</div>
</section>
<script src="../js/constants.js"></script>
<script src="../js/utils.js"></script>
<script>
window.onload = function () {
loadImage();
}
async function login() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
@ -64,6 +111,17 @@
//callbackErrors(data.errors, alert);
}
}
function loadImage(){
const random = Math.floor(Math.random() * 2);
if(random == 0){
document.getElementById('image').src = '../content/stock_photo_1.png';
}
else if(random == 1){
document.getElementById('image').src = '../content/stock_photo_2.png';
}
}
</script>
</body>