2024-03-22 10:47:08 +01:00
|
|
|
<html>
|
2023-10-18 15:36:43 +02:00
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
<head>
|
2024-03-22 10:47:08 +01:00
|
|
|
<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>
|
2024-03-04 16:49:36 +01:00
|
|
|
</head>
|
2023-10-18 15:36:43 +02:00
|
|
|
|
2024-03-22 10:47:08 +01:00
|
|
|
<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>
|
|
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
<body>
|
2024-03-22 10:47:08 +01:00
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<div class="divider d-flex align-items-center my-4">
|
|
|
|
|
<p class="text-center fw-bold mx-3 mb-0">Sign In</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 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>
|
|
|
|
|
|
|
|
|
|
<!-- 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>
|
|
|
|
|
</div>
|
2023-10-18 15:36:43 +02:00
|
|
|
</div>
|
2024-03-22 10:47:08 +01:00
|
|
|
</section>
|
2023-10-18 15:36:43 +02:00
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
<script src="../js/constants.js"></script>
|
2024-03-21 09:36:16 +01:00
|
|
|
<script src="../js/utils.js"></script>
|
2024-03-04 16:49:36 +01:00
|
|
|
<script>
|
2024-03-22 10:47:08 +01:00
|
|
|
window.onload = function () {
|
|
|
|
|
loadImage();
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
async function login() {
|
|
|
|
|
const email = document.getElementById("email").value;
|
|
|
|
|
const password = document.getElementById("password").value;
|
2023-10-18 15:36:43 +02:00
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
if (!email || !password) {
|
|
|
|
|
alert('Please fill in all fields');
|
|
|
|
|
return;
|
|
|
|
|
}
|
2024-03-06 10:19:37 +01:00
|
|
|
const response = await fetch(`${API_URL}/persons/me/token`, {
|
2024-03-04 16:49:36 +01:00
|
|
|
method: "POST",
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
email: email,
|
|
|
|
|
password: password
|
|
|
|
|
}),
|
2024-03-21 17:34:16 +01:00
|
|
|
headers: createHeaders(null)
|
2024-03-04 16:49:36 +01:00
|
|
|
});
|
2023-10-18 15:36:43 +02:00
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
const data = await response.json();
|
2024-02-28 15:13:19 +01:00
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
if (response.ok) {
|
|
|
|
|
console.log(`Login was successful. Token is ${data.token}`);
|
|
|
|
|
document.cookie = `token=${data.token};`;
|
2024-03-06 10:19:37 +01:00
|
|
|
window.location.href = 'userprofile.html?id=me';
|
2024-03-04 16:49:36 +01:00
|
|
|
} else {
|
2024-03-21 09:36:16 +01:00
|
|
|
alert(data.error);
|
|
|
|
|
//callbackErrors(data.errors, alert);
|
2024-02-28 12:08:00 +01:00
|
|
|
}
|
2024-03-04 16:49:36 +01:00
|
|
|
}
|
2024-03-22 10:47:08 +01:00
|
|
|
|
|
|
|
|
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';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-04 16:49:36 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
2023-10-18 15:36:43 +02:00
|
|
|
|
2024-02-28 12:08:00 +01:00
|
|
|
</html>
|
