| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Login - Attendr</title>
|
| <link rel="stylesheet" href="style.css">
|
| <link
|
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800&display=swap"
|
| rel="stylesheet">
|
| </head>
|
|
|
| <body>
|
|
|
|
|
| {% include '_navbar.html' %}
|
|
|
|
|
| <section class="section">
|
| <div class="container" style="max-width: 500px;">
|
| <h1 class="text-center mb-3">Login to Attendr</h1>
|
| <p class="text-center text-muted mb-3">
|
| Access your student or lecturer account
|
| </p>
|
|
|
|
|
| <div class="glass-card">
|
| <div class="form-group">
|
| <label class="form-label">Matric Number</label>
|
| <input type="text" id="matricNo" class="form-input" placeholder="e.g., A20EC0001 or L001"
|
| style="text-transform: uppercase;">
|
| <small class="text-muted" style="font-size: 0.875rem;">
|
| Students: Start with A or B | Lecturers: Start with L
|
| </small>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label">Password</label>
|
| <input type="password" id="password" class="form-input" placeholder="Enter your password">
|
| </div>
|
|
|
|
|
| <div id="statusMessage" class="mt-2"></div>
|
|
|
|
|
| <button id="loginBtn" class="btn btn-primary mt-2" style="width: 100%;">
|
| 🔐 Login
|
| </button>
|
|
|
| <div class="text-center mt-2">
|
| <p class="text-muted">
|
| Don't have an account? <a href="/register" style="color: var(--color-primary);">Register
|
| here</a>
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <div id="loadingOverlay" class="loading-overlay hidden">
|
| <div class="text-center">
|
| <div class="spinner"></div>
|
| <p class="mt-2" id="loadingText">Logging in...</p>
|
| </div>
|
| </div>
|
|
|
| <script>
|
|
|
| document.getElementById('password').addEventListener('keypress', (e) => {
|
| if (e.key === 'Enter') {
|
| document.getElementById('loginBtn').click();
|
| }
|
| });
|
|
|
|
|
| document.getElementById('loginBtn').addEventListener('click', async () => {
|
| const matricNo = document.getElementById('matricNo').value.trim().toUpperCase();
|
| const password = document.getElementById('password').value;
|
|
|
| if (!matricNo || !password) {
|
| showStatus('Please fill in all fields', 'error');
|
| return;
|
| }
|
|
|
| showLoading('Logging in...');
|
|
|
| try {
|
| const response = await fetch('/api/auth/login', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({
|
| matric_no: matricNo,
|
| password: password
|
| })
|
| });
|
|
|
| const data = await response.json();
|
| hideLoading();
|
|
|
| if (data.success) {
|
| showStatus(data.message, 'success');
|
|
|
|
|
| setTimeout(() => {
|
| window.location.href = data.data.redirect;
|
| }, 1000);
|
| } else {
|
| showStatus(data.error, 'error');
|
| }
|
| } catch (error) {
|
| hideLoading();
|
| showStatus('Login failed. Please try again.', 'error');
|
| }
|
| });
|
|
|
| function showLoading(text) {
|
| document.getElementById('loadingText').textContent = text;
|
| document.getElementById('loadingOverlay').classList.remove('hidden');
|
| }
|
|
|
| function hideLoading() {
|
| document.getElementById('loadingOverlay').classList.add('hidden');
|
| }
|
|
|
| function showStatus(message, type) {
|
| const statusDiv = document.getElementById('statusMessage');
|
| const alertClass = type === 'success' ? 'alert-success' : 'alert-error';
|
| statusDiv.innerHTML = `<div class="alert ${alertClass}">${message}</div>`;
|
|
|
| if (type === 'error') {
|
| setTimeout(() => {
|
| statusDiv.innerHTML = '';
|
| }, 5000);
|
| }
|
| }
|
| </script>
|
| </body>
|
|
|
| </html> |
