171 lines
9.4 KiB
HTML
171 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ current_lang }}" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% trans %}Login - Edu-Space Admin{% endtrans %}</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
|
|
|
|
<!-- Script Anti-Flicker para Modo Claro / Oscuro -->
|
|
<script>
|
|
(function() {
|
|
const storedTheme = localStorage.getItem('theme');
|
|
const theme = storedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
document.documentElement.setAttribute('data-bs-theme', theme);
|
|
})();
|
|
</script>
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<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.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<!-- Design System Theme -->
|
|
<link href="{{ url_for('static', filename='css/theme.css') }}" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="auth-wrapper">
|
|
<div class="auth-card">
|
|
<!-- Header con Controles Superiores & Logo Oficial -->
|
|
<div class="auth-header">
|
|
<div class="auth-controls">
|
|
<button class="theme-toggle-btn" type="button" aria-label="Cambiar tema" title="Modo Claro/Oscuro">
|
|
<i class="bi bi-moon-stars-fill"></i>
|
|
</button>
|
|
{% include 'partials/language_switcher.html' %}
|
|
</div>
|
|
|
|
<img src="{{ url_for('static', filename='img/logo_unicaba.png') }}" alt="UniCABA" class="auth-logo">
|
|
<h4 class="fw-bold mb-1">Edu-Space Admin</h4>
|
|
<p class="text-muted small mb-0">{% trans %}Classroom Management System{% endtrans %}</p>
|
|
</div>
|
|
|
|
<div class="px-4 pb-4 pt-2">
|
|
<!-- Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show rounded-3 py-2 small" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close py-2" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST" novalidate>
|
|
{{ form.hidden_tag() }}
|
|
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label small fw-semibold text-muted">{{ form.email.label.text }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-body-tertiary border-end-0 text-muted">
|
|
<i class="bi bi-envelope"></i>
|
|
</span>
|
|
<input type="email" class="form-control border-start-0 ps-0" id="email" name="email"
|
|
value="{{ form.email.data or '' }}" required
|
|
placeholder="{% trans %}Enter your email{% endtrans %}">
|
|
</div>
|
|
{% for error in form.email.errors %}
|
|
<div class="text-danger small mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label small fw-semibold text-muted">{{ form.password.label.text }}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-body-tertiary border-end-0 text-muted">
|
|
<i class="bi bi-lock"></i>
|
|
</span>
|
|
<input type="password" class="form-control border-start-0 border-end-0 ps-0" id="password" name="password"
|
|
required placeholder="{% trans %}Enter your password{% endtrans %}">
|
|
<button class="btn btn-outline-secondary border-start-0 bg-body-tertiary text-muted" type="button" id="togglePasswordBtn" title="Mostrar/Ocultar contraseña">
|
|
<i class="bi bi-eye" id="togglePasswordIcon"></i>
|
|
</button>
|
|
</div>
|
|
{% for error in form.password.errors %}
|
|
<div class="text-danger small mt-1">{{ error }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="mb-3 form-check">
|
|
{{ form.remember_me(class="form-check-input") }}
|
|
<label class="form-check-label text-muted small" for="remember_me">
|
|
{{ form.remember_me.label.text }}
|
|
</label>
|
|
</div>
|
|
|
|
<div class="d-grid mb-3">
|
|
<button type="submit" class="btn btn-primary btn-lg fw-semibold py-2">
|
|
<i class="bi bi-box-arrow-in-right me-1"></i> {{ form.submit.label.text }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Accesos Rápidos Institucionales (Demo) -->
|
|
<div class="p-3 bg-body-tertiary rounded-3 border mt-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<small class="fw-bold text-muted text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.5px;">
|
|
<i class="bi bi-lightning-charge-fill text-warning me-1"></i>{% trans %}Acceso Rápido Demo (1 Clic){% endtrans %}
|
|
</small>
|
|
<small class="text-muted font-monospace" style="font-size: 0.68rem;">Pass: admin123</small>
|
|
</div>
|
|
<div class="d-grid gap-1">
|
|
<div class="btn-group btn-group-sm w-100" role="group">
|
|
<button type="button" class="btn btn-outline-primary demo-fill-btn py-1" data-email="admin@edu-space.com" title="Ingresar como Administrador">
|
|
<i class="bi bi-shield-check me-1"></i>Admin
|
|
</button>
|
|
<button type="button" class="btn btn-outline-warning demo-fill-btn py-1" data-email="bedelia@edu-space.com" title="Ingresar como Bedelía">
|
|
<i class="bi bi-building-gear me-1"></i>Bedelía
|
|
</button>
|
|
<button type="button" class="btn btn-outline-info demo-fill-btn py-1" data-email="docente@edu-space.com" title="Ingresar como Docente">
|
|
<i class="bi bi-person-video3 me-1"></i>Docente
|
|
</button>
|
|
<button type="button" class="btn btn-outline-success demo-fill-btn py-1" data-email="alumno@edu-space.com" title="Ingresar como Alumno">
|
|
<i class="bi bi-mortarboard me-1"></i>Alumno
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-3">
|
|
<small class="text-muted d-inline-flex align-items-center" style="font-size: 0.75rem;">
|
|
<i class="bi bi-shield-check text-primary me-1"></i>
|
|
{% trans %}Acceso institucional seguro • Actividad auditada{% endtrans %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/theme-toggle.js') }}"></script>
|
|
<script>
|
|
// Toggle password visibility
|
|
document.getElementById('togglePasswordBtn').addEventListener('click', function() {
|
|
const pwdInput = document.getElementById('password');
|
|
const icon = document.getElementById('togglePasswordIcon');
|
|
if (pwdInput.type === 'password') {
|
|
pwdInput.type = 'text';
|
|
icon.classList.replace('bi-eye', 'bi-eye-slash');
|
|
} else {
|
|
pwdInput.type = 'password';
|
|
icon.classList.replace('bi-eye-slash', 'bi-eye');
|
|
}
|
|
});
|
|
|
|
// Demo login autofill buttons
|
|
document.querySelectorAll('.demo-fill-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const email = this.getAttribute('data-email');
|
|
document.getElementById('email').value = email;
|
|
document.getElementById('password').value = 'admin123';
|
|
// Highlight input briefly
|
|
const emailInput = document.getElementById('email');
|
|
emailInput.classList.add('is-valid');
|
|
setTimeout(() => emailInput.classList.remove('is-valid'), 1500);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |