feat(phase5): integracion auth hibrida, email dinamico y moodle 4.1 backend con tolerancia a fallos
This commit is contained in:
+183
-20
@@ -22,6 +22,59 @@
|
||||
<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">
|
||||
@@ -32,7 +85,6 @@
|
||||
<button class="theme-toggle-btn" type="button" aria-label="Cambiar tema" title="Modo Claro/Oscuro">
|
||||
<i class="bi bi-moon-stars-fill"></i>
|
||||
</button>
|
||||
<!-- Language Switcher could go here -->
|
||||
</div>
|
||||
|
||||
<img src="/img/logo_unicaba.png" alt="UniCABA" class="auth-logo">
|
||||
@@ -44,12 +96,60 @@
|
||||
<!-- Flash Messages -->
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible fade show rounded-3 py-2 small" role="alert">
|
||||
{{ error }}
|
||||
<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 %}
|
||||
|
||||
<form action="/auth/login" method="POST" novalidate>
|
||||
<!-- 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">
|
||||
@@ -81,6 +181,14 @@
|
||||
</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 %}
|
||||
|
||||
<!-- Accesos Rápidos Institucionales (Demo) -->
|
||||
<div class="p-3 bg-body-tertiary rounded-3 border mt-3">
|
||||
@@ -117,35 +225,90 @@
|
||||
</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
|
||||
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');
|
||||
}
|
||||
});
|
||||
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 buttons
|
||||
document.querySelectorAll('.demo-fill-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const email = this.getAttribute('data-email');
|
||||
document.getElementById('username').value = email;
|
||||
document.getElementById('password').value = 'admin123';
|
||||
// Highlight input briefly
|
||||
const emailInput = document.getElementById('username');
|
||||
emailInput.classList.add('is-valid');
|
||||
setTimeout(() => emailInput.classList.remove('is-valid'), 1500);
|
||||
const usrField = document.getElementById('username');
|
||||
const pwdField = document.getElementById('password');
|
||||
if (usrField && pwdField) {
|
||||
usrField.value = email;
|
||||
pwdField.value = 'admin123';
|
||||
usrField.classList.add('is-valid');
|
||||
setTimeout(() => usrField.classList.remove('is-valid'), 1500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 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>
|
||||
Reference in New Issue
Block a user