183 lines
8.5 KiB
HTML
183 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login - Delphi Consulting Group Database System</title>
|
|
<script src="/static/js/fetch-wrapper.js"></script>
|
|
<script src="/static/js/alerts.js"></script>
|
|
<!-- Tailwind CSS -->
|
|
<link href="/static/css/tailwind.css" rel="stylesheet">
|
|
<!-- Icons (Font Awesome) -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
|
|
</head>
|
|
<body class="login-page">
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
|
|
<div class="max-w-md w-full space-y-8 bg-white dark:bg-neutral-800 p-8 rounded-xl shadow-md">
|
|
<div class="text-center">
|
|
<img src="/static/images/delphi-logo.webp" alt="Delphi Consulting Group" class="mx-auto h-20 w-auto">
|
|
<h2 class="mt-6 text-xl font-normal text-gray-900 dark:text-white">Delphi Database System</h2>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Sign in to access the system</p>
|
|
</div>
|
|
<form class="mt-8 space-y-6" id="loginForm">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="username" class="sr-only">Username</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
|
|
<i class="fa-solid fa-user"></i>
|
|
</div>
|
|
<input id="username" name="username" type="text" required class="appearance-none rounded-lg relative block w-full px-3 py-2 pl-10 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm" placeholder="Username">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="password" class="sr-only">Password</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
|
|
<i class="fa-solid fa-lock"></i>
|
|
</div>
|
|
<input id="password" name="password" type="password" required class="appearance-none rounded-lg relative block w-full px-3 py-2 pl-10 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary-500 focus:border-primary-500 focus:z-10 sm:text-sm" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" id="loginBtn" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition duration-150 ease-in-out">
|
|
Sign in
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
|
|
Default credentials: admin / admin123
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check for logout reason
|
|
const logoutReason = sessionStorage.getItem('logout_reason');
|
|
if (logoutReason) {
|
|
showAlert(logoutReason, 'warning');
|
|
sessionStorage.removeItem('logout_reason');
|
|
}
|
|
|
|
// Check if already logged in with valid token
|
|
const token = localStorage.getItem('auth_token');
|
|
if (token) {
|
|
// Verify token is still valid before redirecting
|
|
checkTokenAndRedirect(token);
|
|
return;
|
|
}
|
|
|
|
const loginForm = document.getElementById('loginForm');
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
|
|
loginForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
// Validate form
|
|
if (!loginForm.checkValidity()) {
|
|
e.stopPropagation();
|
|
loginForm.reportValidity();
|
|
return;
|
|
}
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
console.log('Attempting login with username:', username);
|
|
|
|
// Show loading state
|
|
const originalText = loginBtn.innerHTML;
|
|
loginBtn.innerHTML = '<span class="inline-block animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"></span>Signing in...';
|
|
loginBtn.disabled = true;
|
|
|
|
try {
|
|
console.log('Sending request to /api/auth/login');
|
|
const response = await window.http.wrappedFetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
username: username,
|
|
password: password
|
|
})
|
|
});
|
|
|
|
console.log('Response status:', response.status);
|
|
|
|
if (!response.ok) {
|
|
let errorMessage = 'Login failed';
|
|
try {
|
|
const errorData = await response.json();
|
|
console.log('Error data:', errorData);
|
|
errorMessage = errorData.detail || errorMessage;
|
|
} catch (e) {
|
|
console.log('Failed to parse error response');
|
|
}
|
|
throw new Error(errorMessage);
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log('Login successful, token:', data.access_token);
|
|
|
|
// Store tokens
|
|
localStorage.setItem('auth_token', data.access_token);
|
|
if (data.refresh_token) {
|
|
localStorage.setItem('refresh_token', data.refresh_token);
|
|
}
|
|
|
|
// Show success message
|
|
showAlert('Login successful! Redirecting...', 'success');
|
|
|
|
// Redirect to customers page
|
|
setTimeout(() => {
|
|
window.location.href = '/customers';
|
|
}, 1000);
|
|
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
showAlert('Login failed: ' + error.message, 'danger');
|
|
} finally {
|
|
// Restore button
|
|
loginBtn.innerHTML = originalText;
|
|
loginBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// Focus username field
|
|
document.getElementById('username').focus();
|
|
});
|
|
|
|
async function checkTokenAndRedirect(token) {
|
|
try {
|
|
const response = await window.http.wrappedFetch('/api/auth/me');
|
|
|
|
if (response.ok) {
|
|
// Token is valid, redirect to customers page
|
|
window.location.href = '/customers';
|
|
} else {
|
|
// Token is invalid, remove it
|
|
localStorage.removeItem('auth_token');
|
|
}
|
|
} catch (error) {
|
|
// Error checking token, remove it
|
|
localStorage.removeItem('auth_token');
|
|
console.error('Error checking token:', error);
|
|
}
|
|
}
|
|
|
|
function showAlert(message, type = 'info') {
|
|
if (window.alerts && typeof window.alerts.show === 'function') {
|
|
window.alerts.show(message, type);
|
|
return;
|
|
}
|
|
alert(String(message));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |