127 lines
3.7 KiB
HTML
127 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pool Oscars 2025</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Ensure the body takes the full height */
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
/* Flexbox layout to make the content take available space */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
footer {
|
|
margin-top: auto;
|
|
padding: 25px;
|
|
background-color: #f8f9fa;
|
|
text-align: center;
|
|
}
|
|
#footer-text {
|
|
margin: -5px;
|
|
font-family:monospace;
|
|
font-size: small;
|
|
}
|
|
|
|
#footer-copy {
|
|
margin: -5px;
|
|
font-family:monospace;
|
|
font-size: smaller;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
#copy {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light">
|
|
|
|
<div class="container">
|
|
<div class="card p-4" style="max-width: 400px; margin: auto;">
|
|
<div class="text-center mb-4">
|
|
<img src="img/logo.png" style="width: 80%;">
|
|
</div>
|
|
<form id="login-form">
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Courriel</label>
|
|
<input type="email" class="form-control" id="email" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Mot de passe</label>
|
|
<input type="password" class="form-control" id="password" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100">Connexion</button>
|
|
</form>
|
|
<p class="mt-3 text-center">Pas de compte? <a href="/register.html">Enregistrez-vous</a></p>
|
|
</div>
|
|
|
|
<!-- Footer Section -->
|
|
<footer>
|
|
|
|
<p id="footer-copy"><a id="copy" href="https://github.com/quoije/oscars-pool">quoije</a> - deux mille vingt-cinq</p>
|
|
<p id="footer-text"></p>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Check if the user is already logged in by looking for auth_token in localStorage
|
|
if (localStorage.getItem('auth_token')) {
|
|
// If the token is found, redirect to /movies.html
|
|
window.location.href = '/movies.html';
|
|
}
|
|
|
|
// Handle login form submission
|
|
document.getElementById('login-form').addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
|
|
const email = document.getElementById('email').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
const res = await fetch('/api/users/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password })
|
|
});
|
|
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
// Save the token to localStorage
|
|
localStorage.setItem('auth_token', data.token);
|
|
window.location.href = '/movies.html'; // Redirect to movies page on success
|
|
} else {
|
|
const error = await res.json();
|
|
alert(`Login failed: ${error.message}`);
|
|
}
|
|
});
|
|
|
|
// Fetch version information from the API
|
|
async function fetchVersionInfo() {
|
|
const res = await fetch('/api/users/version');
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
// Update footer with the fetched version info
|
|
const footerText = `${data.date} - ${data.version} - ${data.message}`;
|
|
document.getElementById('footer-text').textContent = footerText;
|
|
} else {
|
|
document.getElementById('footer-text').textContent = '';
|
|
}
|
|
}
|
|
|
|
// Call the function to fetch and display the version info
|
|
// Doesn't work on prod, will fix later
|
|
fetchVersionInfo();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |