319 lines
16 KiB
HTML
319 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login - Edu-Space Admin</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="/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="/css/theme.css" rel="stylesheet">
|
|
<style>
|
|
.btn-google {
|
|
background-color: #ffffff;
|
|
color: #3c4043;
|
|
border: 1px solid #dadce0;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-google:hover {
|
|
background-color: #f8f9fa;
|
|
border-color: #c6c9cc;
|
|
color: #202124;
|
|
box-shadow: 0 1px 3px rgba(60,64,67,.3);
|
|
}
|
|
[data-bs-theme="dark"] .btn-google {
|
|
background-color: #1f2937;
|
|
color: #f3f4f6;
|
|
border-color: #374151;
|
|
}
|
|
[data-bs-theme="dark"] .btn-google:hover {
|
|
background-color: #374151;
|
|
color: #ffffff;
|
|
}
|
|
.btn-moodle {
|
|
background-color: #f98012;
|
|
color: #ffffff;
|
|
border: 1px solid #f98012;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-moodle:hover {
|
|
background-color: #e06d07;
|
|
color: #ffffff;
|
|
box-shadow: 0 2px 6px rgba(249, 128, 18, 0.4);
|
|
}
|
|
.divider-text {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 1.25rem 0;
|
|
color: var(--bs-secondary-color);
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.divider-text::before, .divider-text::after {
|
|
content: '';
|
|
flex: 1;
|
|
border-bottom: 1px solid var(--bs-border-color);
|
|
}
|
|
.divider-text::before { margin-right: 0.75em; }
|
|
.divider-text::after { margin-left: 0.75em; }
|
|
</style>
|
|
</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>
|
|
</div>
|
|
|
|
<img src="/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">Classroom Management System</p>
|
|
</div>
|
|
|
|
<div class="px-4 pb-4 pt-2">
|
|
<!-- Flash Messages -->
|
|
{% if error %}
|
|
<div class="alert alert-danger alert-dismissible fade show rounded-3 py-2 small" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-1"></i> {{ error }}
|
|
<button type="button" class="btn-close py-2" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Métodos de Autenticación SSO Externos -->
|
|
{% if providers and (providers.google or providers.moodle) %}
|
|
<div class="d-grid gap-2 mb-3">
|
|
{% if providers.google %}
|
|
<button type="button" class="btn btn-google py-2 d-flex align-items-center justify-content-center" onclick="handleGoogleLogin()">
|
|
<svg class="me-2" width="18" height="18" viewBox="0 0 24 24">
|
|
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
|
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
|
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"/>
|
|
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/>
|
|
</svg>
|
|
<span>Continuar con Google Workspace</span>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if providers.moodle %}
|
|
<button type="button" class="btn btn-moodle py-2 d-flex align-items-center justify-content-center" data-bs-toggle="collapse" data-bs-target="#moodleLoginForm">
|
|
<i class="bi bi-mortarboard-fill me-2 fs-5"></i>
|
|
<span>Ingresar con Moodle UniCABA</span>
|
|
</button>
|
|
|
|
<div class="collapse mt-2" id="moodleLoginForm">
|
|
<div class="card p-3 border-warning-subtle bg-body-tertiary">
|
|
<form action="/auth/moodle" method="POST">
|
|
<div class="mb-2">
|
|
<label class="form-label small fw-semibold text-muted">Usuario Moodle</label>
|
|
<input type="text" class="form-control form-control-sm" name="username" placeholder="admin o usuario institucional" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-semibold text-muted">Contraseña Moodle</label>
|
|
<input type="password" class="form-control form-control-sm" name="password" placeholder="Tu contraseña de Moodle" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-warning btn-sm w-100 fw-semibold text-dark">
|
|
<i class="bi bi-box-arrow-in-right me-1"></i>Validar en Servidor Moodle
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if not providers or providers.local %}
|
|
<div class="divider-text">o con credenciales locales</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<!-- Formulario Login Nativo / Fallback -->
|
|
{% if not providers or providers.local %}
|
|
<form action="/auth/login" method="POST" id="localLoginForm" novalidate>
|
|
<div class="mb-3">
|
|
<label for="username" class="form-label small fw-semibold text-muted">Correo Electrónico</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="username" name="username"
|
|
required placeholder="Ingresa tu correo">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label small fw-semibold text-muted">Contraseña</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="Ingresa tu contraseña">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="d-grid mb-3 mt-4">
|
|
<button type="submit" class="btn btn-primary btn-lg fw-semibold py-2">
|
|
<i class="bi bi-box-arrow-in-right me-1"></i> Iniciar Sesión
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{% else %}
|
|
<div class="alert alert-info py-2 px-3 small rounded-3 mb-3 text-center">
|
|
<i class="bi bi-info-circle me-1"></i>El acceso con contraseña local está deshabilitado para usuarios generales.
|
|
<div class="mt-1">
|
|
<a href="#adminEmergencyModal" data-bs-toggle="modal" class="fw-semibold text-decoration-none">Acceso de Emergencia ADMIN</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if demo_access_enabled is not defined or demo_access_enabled %}
|
|
<!-- 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>Acceso Rápido Demo (1 Clic)
|
|
</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>
|
|
{% endif %}
|
|
|
|
<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>
|
|
Acceso institucional seguro • Actividad auditada
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Acceso de Emergencia ADMIN si local está inactivo -->
|
|
<div class="modal fade" id="adminEmergencyModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header py-2">
|
|
<h6 class="modal-title fw-bold"><i class="bi bi-shield-exclamation text-warning me-1"></i>Acceso de Emergencia ADMIN</h6>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form action="/auth/login" method="POST">
|
|
<div class="mb-2">
|
|
<label class="form-label small fw-semibold">Email Administrador</label>
|
|
<input type="email" name="username" class="form-control form-control-sm" required placeholder="admin@unicaba.edu.ar">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-semibold">Contraseña</label>
|
|
<input type="password" name="password" class="form-control form-control-sm" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-sm w-100 fw-semibold">Ingresar como Admin</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/js/theme-toggle.js"></script>
|
|
<script>
|
|
// Toggle password visibility
|
|
const toggleBtn = document.getElementById('togglePasswordBtn');
|
|
if (toggleBtn) {
|
|
toggleBtn.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 & instant submit (1 Clic)
|
|
document.querySelectorAll('.demo-fill-btn').forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const email = this.getAttribute('data-email');
|
|
const usrField = document.getElementById('username');
|
|
const pwdField = document.getElementById('password');
|
|
const form = document.getElementById('localLoginForm');
|
|
if (usrField && pwdField) {
|
|
usrField.value = email;
|
|
pwdField.value = 'admin123';
|
|
if (form) {
|
|
form.submit();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Simulación / Integración de Google OAuth
|
|
function handleGoogleLogin() {
|
|
const emailPrompt = prompt('Ingrese su correo institucional de Google Workspace (@unicaba.edu.ar):', 'profesor@unicaba.edu.ar');
|
|
if (!emailPrompt) return;
|
|
|
|
fetch('/auth/google', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
email: emailPrompt,
|
|
name: emailPrompt.split('@')[0],
|
|
domain: emailPrompt.split('@')[1] || 'unicaba.edu.ar'
|
|
})
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success && data.redirect) {
|
|
window.location.href = data.redirect;
|
|
} else {
|
|
alert('Error en login con Google: ' + (data.message || 'No autorizado'));
|
|
}
|
|
})
|
|
.catch(err => alert('Error de red: ' + err.message));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |