Files
Groove_Coaster_2_Server/web/login.html
2025-09-22 07:54:57 +08:00

115 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pianista Admin Login</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #1a1a1b;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 100vh;
overflow: hidden;
}
.login-card {
background: rgba(255,255,255,0.9);
border-radius: 12px;
padding: 2rem;
max-width: 400px;
margin: 5% auto;
box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.form-control {
font-family: monospace;
font-size: 1rem;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class="login-card">
<div class="d-flex justify-content-center align-items-center mb-4">
<h3 class="text-center mb-0">Admin Login</h3>
<button type="button" class="btn btn-link ms-2 p-0" id="infoBtn" aria-label="Info" style="font-size:1.5rem;">
<span class="bi bi-info-circle" style="vertical-align:middle;"></span>
</button>
</div>
<form id="loginForm">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary w-100">Submit</button>
</form>
<div id="result" class="mt-3"></div>
</div>
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="loginModalBody"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const response = await fetch('/Login/Login', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({"username": username, "password": password})
});
const result = await response.json();
if (result.status === "success") {
// Set token cookie and redirect
document.cookie = `token=${result.message}; path=/;`;
window.location.href = "/Admin";
} else {
// Show modal with error message
document.getElementById('loginModalLabel').innerText = "Login Failed";
document.getElementById('loginModalBody').innerHTML =
`${result.message}`;
const modal = new bootstrap.Modal(document.getElementById('loginModal'));
modal.show();
}
});
document.getElementById('infoBtn').addEventListener('click', function() {
document.getElementById('loginModalLabel').innerText = "Admin Login";
document.getElementById('loginModalBody').innerHTML =
`<p>Don't do anything funny! Don't even think about it!</p>`;
const modal = new bootstrap.Modal(document.getElementById('loginModal'));
modal.show();
});
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
if (getCookie("token")) {
window.location.href = "/Admin";
}
</script>
</body>
</html>