85 lines
3.2 KiB
HTML
85 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login - MumBullet Dashboard</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body class="login-page">
|
|
<div class="login-container">
|
|
<h1>MumBullet Dashboard</h1>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>Login</h2>
|
|
</div>
|
|
<div class="card-content">
|
|
<!--ERROR-->
|
|
<form id="loginForm" action="/api/login" method="post">
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" required>
|
|
</div>
|
|
<div id="loginError" class="error" style="display: none;">
|
|
Invalid username or password.
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit">Login</button>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
// Check if there's an error parameter in the URL
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.has('error') && urlParams.get('error') === 'invalid') {
|
|
document.getElementById('loginError').style.display = 'block';
|
|
}
|
|
|
|
// Handle form submission with fetch API instead of traditional form submission
|
|
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
try {
|
|
const response = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
|
|
// Important for cookies to work
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (response.redirected) {
|
|
// Follow the redirect manually
|
|
window.location.href = response.url;
|
|
return;
|
|
}
|
|
|
|
if (response.ok) {
|
|
// Successful login, redirect to dashboard
|
|
window.location.href = '/';
|
|
} else {
|
|
// Show error message
|
|
document.getElementById('loginError').style.display = 'block';
|
|
console.error('Login failed:', await response.text());
|
|
}
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
document.getElementById('loginError').textContent = 'An error occurred. Please try again.';
|
|
document.getElementById('loginError').style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |