hotswap/delphi-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress

Browse Source
This commit is contained in:
HotSwapp
2025-08-09 16:37:57 -05:00
parent 5f74243c8c
commit c2f3c4411d
35 changed files with 9209 additions and 4633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
templates/login.html
View File

@@ -4,78 +4,56 @@
<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/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">
<!-- Bootstrap 5.3 CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/static/css/main.css" rel="stylesheet">
<link href="/static/css/themes.css" rel="stylesheet">
<link href="/static/css/components.css" rel="stylesheet">
</head>
<body class="login-page">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="card login-card shadow-sm mt-5">
<div class="card-body p-5">
<div class="text-center mb-4">
<img src="/static/images/delphi-logo.webp" alt="Delphi Consulting Group" height="60" class="mb-3">
<h2 class="h4 mb-3">Delphi Database System</h2>
<p class="text-muted">Sign in to access the system</p>
</div>
<form id="loginForm" class="login-form" novalidate>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-person"></i></span>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="invalid-feedback">Please enter your username.</div>
</div>
<div class="mb-4">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-lock"></i></span>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="invalid-feedback">Please enter your password.</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary" id="loginBtn">
<i class="bi bi-box-arrow-in-right"></i> Sign In
</button>
</div>
</form>
<div class="text-center mt-4">
<small class="text-muted">
Default credentials: admin / admin123
</small>
</div>
</div>
</div>
<!-- System Status -->
<div class="card login-status mt-3">
<div class="card-body text-center py-2">
<small class="text-muted">
<i class="bi bi-shield-check text-success"></i>
Secure connection established
</small>
</div>
</div>
<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>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Check for logout reason
@@ -102,19 +80,22 @@
// Validate form
if (!loginForm.checkValidity()) {
e.stopPropagation();
loginForm.classList.add('was-validated');
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="spinner-border spinner-border-sm me-2"></span>Signing in...';
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 fetch('/api/auth/login', {
method: 'POST',
headers: {
@@ -126,12 +107,22 @@
})
});
console.log('Response status:', response.status);
if (!response.ok) {
const error = await response.json();
throw new Error(error.detail || 'Login failed');
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 token
localStorage.setItem('auth_token', data.access_token);
@@ -181,30 +172,11 @@
}
function showAlert(message, type = 'info') {
// Remove existing alerts
const existingAlerts = document.querySelectorAll('.alert');
existingAlerts.forEach(alert => alert.remove());
// Create new alert
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type} alert-dismissible fade show mt-3`;
alertDiv.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
// Insert before the form
const form = document.getElementById('loginForm');
form.parentNode.insertBefore(alertDiv, form);
// Auto-dismiss success messages
if (type === 'success') {
setTimeout(() => {
if (alertDiv.parentNode) {
alertDiv.remove();
}
}, 5000);
if (window.alerts && typeof window.alerts.show === 'function') {
window.alerts.show(message, type);
return;
}
alert(String(message));
}
</script>
</body>