xfarrow/blink
0
0
Fork 0
mirror of https://github.com/xfarrow/blink synced 2025-06-27 09:03:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

New register page

Browse Source
This commit is contained in:
xfarrow
2024-03-25 10:07:54 +01:00
parent 6414eff42f
commit e1bb44ca18
3 changed files with 285 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
<html>
<head>
<title>Blink - Sign In</title>
<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"
@ -53,9 +54,9 @@
<!-- 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" onblur="emailFieldLosesFocus();" />
placeholder="Enter your email address" onblur="emailFieldLosesFocus();" />
<div class="invalid-feedback">
Please enter a valid e-mail
Please enter an email address
</div>
</div>
@ -82,8 +83,7 @@
<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>
<p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="register.html">Register</a></p>
</div>
</form>
</div>
@ -99,13 +99,13 @@
}
/*
* This function is responsible for the log-in process
*/
* This function is responsible for the log-in process
*/
async function login() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
if (!email || !password) {
if (!validateFields()) {
return;
}
@ -129,9 +129,22 @@
}
/*
* This function is responsible for loading a random stock photo seen on the
* left side of the page
* Validate the field before the submit. This helps to prevent useless API
* calls. Retrurns true or false
*/
function validateFields(){
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
if(!email || !password || !validateEmail(email) || password.length < 5){
return false;
}
return true;
}
/*
* This function is responsible for loading a random stock photo seen on the
* left side of the page
*/
function loadImage() {
const random = Math.floor(Math.random() * 4);
if (random == 0) {
@ -146,9 +159,9 @@
}
/*
* This function gets called when the e-mail field loses focus. This is
* done to inform the user whether the entered e-mail is in a valid format
*/
* This function gets called when the e-mail field loses focus. This is
* done to inform the user whether the entered e-mail is in a valid format
*/
function emailFieldLosesFocus() {
const emailField = document.getElementById("email");
if (!emailField.value || !validateEmail(emailField.value)) {
@ -159,20 +172,9 @@
}
/*
* Validates an e-mail using a RegExpression
*/
function validateEmail(email) {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
}
/*
* This function gets called when the password field loses focus. This is
* done to inform the user that they are required to enter a password
*/
* This function gets called when the password field loses focus. This is
* done to inform the user that they are required to enter a password
*/
function passwordFieldLosesFocus() {
const passwordField = document.getElementById("password");
if (!passwordField.value) {
@ -183,8 +185,8 @@
}
/*
* This function shows an error using a Bootstrap's alert element
*/
* This function shows an error using a Bootstrap's alert element
*/
function showError(message) {
const alertDiv = document.getElementById('hiddenAlertMessage');
alertDiv.innerHTML = message;