199 lines
8.8 KiB
HTML
199 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{layout}">
|
|
|
|
<head>
|
|
<title>Login</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div layout:fragment="content">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-5">
|
|
<h2 class="text-center mb-4">
|
|
<i class="bi bi-box-arrow-in-right text-primary"></i>
|
|
Sign In
|
|
</h2>
|
|
|
|
<p class="text-muted text-center mb-4">
|
|
Welcome back to FitPub
|
|
</p>
|
|
|
|
<!-- Login Form -->
|
|
<form id="loginForm">
|
|
<!-- Error Alert -->
|
|
<div id="errorAlert" class="alert alert-danger d-none" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill"></i>
|
|
<span id="errorMessage"></span>
|
|
</div>
|
|
|
|
<!-- Username or Email -->
|
|
<div class="mb-3">
|
|
<label for="usernameOrEmail" class="form-label">
|
|
Username or Email
|
|
</label>
|
|
<input type="text"
|
|
class="form-control form-control-lg"
|
|
id="usernameOrEmail"
|
|
name="usernameOrEmail"
|
|
placeholder="Enter username or email"
|
|
required
|
|
autocomplete="username">
|
|
<div class="invalid-feedback">
|
|
Please enter your username or email.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="mb-4">
|
|
<label for="password" class="form-label">
|
|
Password
|
|
</label>
|
|
<input type="password"
|
|
class="form-control form-control-lg"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Enter password"
|
|
required
|
|
autocomplete="current-password">
|
|
<div class="invalid-feedback">
|
|
Please enter your password.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remember Me (Optional for future) -->
|
|
<div class="mb-3 form-check">
|
|
<input type="checkbox"
|
|
class="form-check-input"
|
|
id="rememberMe"
|
|
name="rememberMe">
|
|
<label class="form-check-label" for="rememberMe">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="d-grid mb-3">
|
|
<button type="submit" class="btn btn-primary btn-lg" id="loginBtn">
|
|
<span id="loginBtnText">
|
|
<i class="bi bi-box-arrow-in-right"></i> Sign In
|
|
</span>
|
|
<span id="loginBtnSpinner" class="d-none">
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
Signing in...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Divider -->
|
|
<div class="text-center my-3">
|
|
<hr>
|
|
</div>
|
|
|
|
<!-- Register Link -->
|
|
<div class="text-center">
|
|
<p class="text-muted mb-0">
|
|
Don't have an account?
|
|
<a th:href="@{/register}" class="text-decoration-none fw-bold">Create one</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Box -->
|
|
<div class="card border-0 bg-light mt-4">
|
|
<div class="card-body">
|
|
<h6><i class="bi bi-question-circle text-primary"></i> Need Help?</h6>
|
|
<p class="text-muted small mb-0">
|
|
Forgot your password? Contact your instance administrator or create a new account.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Scripts -->
|
|
<th:block layout:fragment="scripts">
|
|
<script th:inline="javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('loginForm');
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
const loginBtnText = document.getElementById('loginBtnText');
|
|
const loginBtnSpinner = document.getElementById('loginBtnSpinner');
|
|
const errorAlert = document.getElementById('errorAlert');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
|
|
// Form submission
|
|
form.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
// Validate form
|
|
if (!form.checkValidity()) {
|
|
form.classList.add('was-validated');
|
|
return;
|
|
}
|
|
|
|
// Hide error alert
|
|
errorAlert.classList.add('d-none');
|
|
|
|
// Show loading state
|
|
loginBtn.disabled = true;
|
|
loginBtnText.classList.add('d-none');
|
|
loginBtnSpinner.classList.remove('d-none');
|
|
|
|
// Prepare request data
|
|
const formData = {
|
|
usernameOrEmail: document.getElementById('usernameOrEmail').value,
|
|
password: document.getElementById('password').value
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Store JWT token
|
|
localStorage.setItem('jwtToken', data.token);
|
|
localStorage.setItem('username', data.username);
|
|
|
|
// Redirect to activities page
|
|
window.location.href = '/activities';
|
|
} else {
|
|
// Show error message
|
|
errorMessage.textContent = data.message || 'Invalid username/email or password.';
|
|
errorAlert.classList.remove('d-none');
|
|
|
|
// Reset button state
|
|
loginBtn.disabled = false;
|
|
loginBtnText.classList.remove('d-none');
|
|
loginBtnSpinner.classList.add('d-none');
|
|
}
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
errorMessage.textContent = 'An unexpected error occurred. Please try again.';
|
|
errorAlert.classList.remove('d-none');
|
|
|
|
// Reset button state
|
|
loginBtn.disabled = false;
|
|
loginBtnText.classList.remove('d-none');
|
|
loginBtnSpinner.classList.add('d-none');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</th:block>
|
|
</body>
|
|
</html>
|