xfarrow/blink
0
0
Fork 0
mirror of https://github.com/xfarrow/blink synced 2025-04-15 16:57:19 +02: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> </style>
<body> <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"> <section class="vh-100">
<div class="container-fluid h-custom"> <div class="container-fluid h-custom">
<div class="row d-flex justify-content-center align-items-center h-100"> <div class="row d-flex justify-content-center align-items-center h-100">
@ -45,12 +53,19 @@
<!-- Email input --> <!-- Email input -->
<div class="form-outline mb-4"> <div class="form-outline mb-4">
<input type="email" id="email" class="form-control form-control-lg" <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> </div>
<!-- Password input --> <!-- Password input -->
<div class="form-outline mb-3"> <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>
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
@ -83,14 +98,17 @@
loadImage(); loadImage();
} }
/*
* This function is responsible for the log-in process
*/
async function login() { async function login() {
const email = document.getElementById("email").value; const email = document.getElementById("email").value;
const password = document.getElementById("password").value; const password = document.getElementById("password").value;
if (!email || !password) { if (!email || !password) {
alert('Please fill in all fields');
return; return;
} }
const response = await fetch(`${API_URL}/persons/me/token`, { const response = await fetch(`${API_URL}/persons/me/token`, {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
@ -99,19 +117,21 @@
}), }),
headers: createHeaders(null) headers: createHeaders(null)
}); });
const data = await response.json(); const data = await response.json();
if (response.ok) { if (response.ok) {
console.log(`Login was successful. Token is ${data.token}`);
document.cookie = `token=${data.token};`; document.cookie = `token=${data.token};`;
window.location.href = 'userprofile.html?id=me'; window.location.href = 'userprofile.html?id=me';
} else { } else {
alert(data.error); showError(data.error);
//callbackErrors(data.errors, alert); //callbackErrors(data.errors, showError);
} }
} }
/*
* This function is responsible for loading a random stock photo seen on the
* left side of the page
*/
function loadImage() { function loadImage() {
const random = Math.floor(Math.random() * 4); const random = Math.floor(Math.random() * 4);
if (random == 0) { if (random == 0) {
@ -124,6 +144,52 @@
document.getElementById('image').src = '../content/stock_photo_4.png'; 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> </script>
</body> </body>