xfarrow/blink
0
0
Fork 0
mirror of https://github.com/xfarrow/blink synced 2025-02-14 07:50:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

login page enhancement

Browse Source
This commit is contained in:
xfarrow 2024-03-23 12:23:42 +01:00
parent a7afce27e3
commit 79d9cc06a6
1 changed files with 73 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,6 +29,14 @@
</style>
<body>
<noscript>
<div class="alert alert-danger" role="alert">
This website will not work without JavaScript. Please enable JavaScript if you wish to continue using this website
</div>
</noscript>
<div class="alert alert-danger" id="hiddenAlertMessage" role="alert" style="display: none;"></div>
<section class="vh-100">
<div class="container-fluid h-custom">
<div class="row d-flex justify-content-center align-items-center h-100">
@ -45,12 +53,19 @@
<!-- 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" />
placeholder="Enter a valid email address" onblur="emailFieldLosesFocus();" />
<div class="invalid-feedback">
Please enter a valid e-mail
</div>
</div>
<!-- Password input -->
<div class="form-outline mb-3">
<input type="password" id="password" class="form-control form-control-lg" placeholder="Enter password" />
<input type="password" id="password" class="form-control form-control-lg" placeholder="Enter password"
onblur="passwordFieldLosesFocus();" />
<div class="invalid-feedback">
Please enter your password
</div>
</div>
<div class="d-flex justify-content-between align-items-center">
@ -83,14 +98,17 @@
loadImage();
}
/*
* 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) {
alert('Please fill in all fields');
return;
}
const response = await fetch(`${API_URL}/persons/me/token`, {
method: "POST",
body: JSON.stringify({
@ -99,19 +117,21 @@
}),
headers: createHeaders(null)
});
const data = await response.json();
if (response.ok) {
console.log(`Login was successful. Token is ${data.token}`);
document.cookie = `token=${data.token};`;
window.location.href = 'userprofile.html?id=me';
} else {
alert(data.error);
//callbackErrors(data.errors, alert);
showError(data.error);
//callbackErrors(data.errors, showError);
}
}
/*
* 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) {
@ -124,6 +144,52 @@
document.getElementById('image').src = '../content/stock_photo_4.png';
}
}
/*
* 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)) {
emailField.classList.add("is-invalid");
} else {
emailField.classList.remove("is-invalid");
}
}
/*
* 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
*/
function passwordFieldLosesFocus() {
const passwordField = document.getElementById("password");
if (!passwordField.value) {
passwordField.classList.add("is-invalid");
} else {
passwordField.classList.remove("is-invalid");
}
}
/*
* This function shows an error using a Bootstrap's alert element
*/
function showError(message) {
const alertDiv = document.getElementById('hiddenAlertMessage');
alertDiv.innerHTML = message;
alertDiv.style.display = 'block';
}
</script>
</body>