130 lines
5.8 KiB
HTML
130 lines
5.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Login - Delphi Database{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container auth-wrapper">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-5">
|
|
<div class="card shadow-lg" style="border: none; border-radius: 15px;">
|
|
<div class="card-body p-5">
|
|
<div class="text-center mb-4">
|
|
<img src="{{ url_for('static', path='/logo/delphi-logo.webp') }}" alt="Delphi Logo" class="mb-4" style="width: 120px; height: 120px; object-fit: contain;">
|
|
<h2 class="card-title mb-2">Welcome Back</h2>
|
|
<p class="text-muted">Sign in to access Delphi Database</p>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="alert alert-danger d-flex align-items-center" role="alert" style="border-radius: 8px;">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
|
<div>{{ error }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="post" action="/login">
|
|
<div class="mb-4">
|
|
<label for="username" class="form-label fw-semibold">Username</label>
|
|
<div class="input-group input-group-lg">
|
|
<span class="input-group-text bg-light border-end-0">
|
|
<i class="bi bi-person text-muted"></i>
|
|
</span>
|
|
<input type="text" class="form-control border-start-0 bg-light"
|
|
id="username" name="username" required
|
|
placeholder="Enter your username" autocomplete="username"
|
|
style="border-left: none;">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="password" class="form-label fw-semibold">Password</label>
|
|
<div class="input-group input-group-lg">
|
|
<span class="input-group-text bg-light border-end-0">
|
|
<i class="bi bi-key text-muted"></i>
|
|
</span>
|
|
<input type="password" class="form-control border-start-0 bg-light"
|
|
id="password" name="password" required
|
|
placeholder="Enter your password" autocomplete="current-password"
|
|
style="border-left: none;">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4 form-check">
|
|
<input type="checkbox" class="form-check-input" id="rememberMe">
|
|
<label class="form-check-label text-muted" for="rememberMe">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
|
|
<div class="d-grid mb-3">
|
|
<button type="submit" class="btn btn-primary btn-lg fw-semibold">
|
|
<i class="bi bi-box-arrow-in-right me-2"></i>Sign In
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="text-center mt-4 p-3" style="background-color: #f8f9fa; border-radius: 8px;">
|
|
<small class="text-muted">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
<strong>Default credentials:</strong> admin / admin123
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<small class="text-muted">
|
|
Don't have an account? <a href="mailto:admin@delphi.com" class="text-decoration-none">Contact your administrator</a>.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
// Auto-focus on username field
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.getElementById('username').focus();
|
|
});
|
|
|
|
// Show/hide password toggle functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const passwordField = document.getElementById('password');
|
|
const toggleBtn = document.createElement('button');
|
|
toggleBtn.type = 'button';
|
|
toggleBtn.className = 'btn btn-light border-start-0';
|
|
toggleBtn.innerHTML = '<i class="bi bi-eye text-muted"></i>';
|
|
toggleBtn.style.border = '2px solid #e9ecef';
|
|
toggleBtn.style.borderLeft = 'none';
|
|
toggleBtn.style.background = '#f8f9fa';
|
|
toggleBtn.style.borderRadius = '0 8px 8px 0';
|
|
|
|
// Add toggle functionality with better UX
|
|
toggleBtn.addEventListener('click', function() {
|
|
if (passwordField.type === 'password') {
|
|
passwordField.type = 'text';
|
|
this.innerHTML = '<i class="bi bi-eye-slash text-muted"></i>';
|
|
this.classList.remove('btn-light');
|
|
this.classList.add('btn-outline-primary');
|
|
} else {
|
|
passwordField.type = 'password';
|
|
this.innerHTML = '<i class="bi bi-eye text-muted"></i>';
|
|
this.classList.remove('btn-outline-primary');
|
|
this.classList.add('btn-light');
|
|
}
|
|
});
|
|
|
|
// Insert toggle button into password input group
|
|
const passwordInputGroup = passwordField.closest('.input-group');
|
|
if (passwordInputGroup) {
|
|
passwordInputGroup.appendChild(toggleBtn);
|
|
|
|
// Adjust the input field border radius
|
|
passwordField.style.borderRadius = '8px 0 0 8px';
|
|
passwordField.style.borderRight = 'none';
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|