351 lines
13 KiB
HTML
351 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inloggen - Leerdoelen Tracker</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 2.5rem;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
|
|
}
|
|
.logo { text-align: center; margin-bottom: 2rem; }
|
|
.logo .icon { font-size: 3rem; margin-bottom: 0.5rem; }
|
|
.logo h1 { font-size: 1.4rem; color: #1f2937; font-weight: 700; }
|
|
.logo p { color: #6b7280; font-size: 0.85rem; margin-top: 0.25rem; }
|
|
|
|
.btn-microsoft {
|
|
width: 100%;
|
|
padding: 0.85rem;
|
|
background: #0078d4;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
text-decoration: none;
|
|
transition: background 0.2s;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.btn-microsoft:hover { background: #006cbe; }
|
|
|
|
.alert {
|
|
padding: 0.85rem 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1.25rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
}
|
|
.alert-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
|
|
.alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
|
|
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
|
|
|
|
.not-configured {
|
|
text-align: center; padding: 1.5rem; background: #f9fafb;
|
|
border-radius: 8px; color: #6b7280; font-size: 0.9rem;
|
|
border: 1px dashed #d1d5db;
|
|
}
|
|
.not-configured code {
|
|
background: #e5e7eb; padding: 0.15rem 0.4rem;
|
|
border-radius: 4px; font-size: 0.8rem;
|
|
}
|
|
|
|
/* Superadmin fallback */
|
|
.superadmin-toggle {
|
|
text-align: center;
|
|
margin-top: 1.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #f3f4f6;
|
|
}
|
|
.superadmin-toggle button {
|
|
background: none; border: none;
|
|
color: #9ca3af; font-size: 0.75rem;
|
|
cursor: pointer; text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
.superadmin-toggle button:hover { color: #6b7280; }
|
|
|
|
.superadmin-form { display: none; margin-top: 1rem; }
|
|
.superadmin-form.visible { display: block; }
|
|
.superadmin-form .form-group { margin-bottom: 0.75rem; }
|
|
.superadmin-form label {
|
|
display: block; font-size: 0.8rem;
|
|
font-weight: 600; color: #374151; margin-bottom: 0.3rem;
|
|
}
|
|
.superadmin-form input {
|
|
width: 100%; padding: 0.6rem 0.75rem;
|
|
border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem;
|
|
}
|
|
.superadmin-form input:focus {
|
|
outline: none; border-color: #4f46e5;
|
|
box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
|
|
}
|
|
.btn-superadmin {
|
|
width: 100%; padding: 0.6rem;
|
|
background: #6b7280; color: white;
|
|
border: none; border-radius: 6px;
|
|
font-size: 0.85rem; font-weight: 600; cursor: pointer;
|
|
}
|
|
.btn-superadmin:hover { background: #4b5563; }
|
|
#sa-error { color: #dc2626; font-size: 0.8rem; margin-top: 0.5rem; display: none; }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--gray-50: #1a1a2e;
|
|
--gray-100: #16213e;
|
|
--gray-200: #0f3460;
|
|
--gray-300: #1a1a3e;
|
|
--gray-400: #6b7280;
|
|
--gray-500: #9ca3af;
|
|
--gray-600: #d1d5db;
|
|
--gray-700: #e5e7eb;
|
|
--gray-800: #f3f4f6;
|
|
--gray-900: #f9fafb;
|
|
}
|
|
|
|
body { background: #0f172a; color: #e2e8f0; }
|
|
|
|
/* Kaarten en secties */
|
|
.card, .section, .stat-card, .school-card,
|
|
.table-container, .filters-container, .legend-container,
|
|
.stats-bar .stat-card, .stats-overview, .vak-stats,
|
|
.import-section, .detail-section, .filters-bar,
|
|
.header:not([class*="gradient"]) {
|
|
background: #1e293b !important;
|
|
border-color: #334155 !important;
|
|
}
|
|
|
|
/* Header kaart in leerkracht.html */
|
|
.header { background: #1e293b !important; }
|
|
|
|
/* Tabellen */
|
|
thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
|
|
td { border-color: #1e293b !important; color: #e2e8f0; }
|
|
tr:hover td, tr:hover { background: #263548 !important; }
|
|
tr.status-groen { background: #064e3b !important; }
|
|
tr.status-groen:hover { background: #065f46 !important; }
|
|
tr.status-oranje { background: #451a03 !important; }
|
|
tr.status-oranje:hover { background: #78350f !important; }
|
|
tr.status-roze { background: #500724 !important; }
|
|
tr.status-roze:hover { background: #701a35 !important; }
|
|
|
|
/* Inputs en selects */
|
|
input, select, textarea {
|
|
background: #0f172a !important;
|
|
color: #e2e8f0 !important;
|
|
border-color: #334155 !important;
|
|
}
|
|
input::placeholder { color: #64748b !important; }
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: #6366f1 !important;
|
|
box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
|
|
}
|
|
|
|
/* Role select inline */
|
|
.role-select {
|
|
background: #1e293b !important;
|
|
color: #e2e8f0 !important;
|
|
border-color: #334155 !important;
|
|
}
|
|
|
|
/* Modals */
|
|
.modal { background: #1e293b !important; color: #e2e8f0; }
|
|
.modal h2 { color: #f1f5f9; }
|
|
|
|
/* Knoppen */
|
|
.btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
|
|
.btn-secondary:hover { background: #475569 !important; }
|
|
|
|
/* Status selector knoppen (leerkracht tabel) */
|
|
.status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
|
|
|
|
/* Stat cards */
|
|
.stat-card { background: #1e293b !important; }
|
|
|
|
/* School card header */
|
|
.school-card-header { background: #162032 !important; border-color: #334155 !important; }
|
|
.school-card { border-color: #334155 !important; }
|
|
|
|
/* Drop zone */
|
|
.drop-zone { background: #162032 !important; border-color: #334155 !important; }
|
|
.drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
|
|
|
|
/* Domain chips */
|
|
.domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
|
|
|
|
/* Badges */
|
|
.leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
|
|
.ebg-begrijpen { color: #1f2937 !important; }
|
|
|
|
/* MIA container */
|
|
.mia-container { background: #162032 !important; }
|
|
.mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
|
|
.mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
|
|
|
|
/* Not configured box */
|
|
.not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
|
|
.not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
|
|
|
|
/* Profile section */
|
|
.profile-section { background: #162032 !important; }
|
|
|
|
/* Leeftijd checkboxes */
|
|
.leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
|
|
.leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
|
|
|
|
/* Vak indicator */
|
|
.vak-indicator { /* gradient blijft, ziet er goed uit */ }
|
|
|
|
/* Progress bars achtergrond */
|
|
.progress-bar { background: #334155 !important; }
|
|
|
|
/* Vak card */
|
|
.vak-card { background: #162032 !important; }
|
|
|
|
/* Upload results */
|
|
.upload-ok { background: #064e3b !important; border-color: #065f46 !important; }
|
|
.upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
|
|
|
|
/* Alert boxes */
|
|
.alert-error { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
|
|
.alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
|
|
.alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
|
|
.alert-info { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
|
|
|
|
/* Error text */
|
|
.form-error, #sa-error, #addUser-error { color: #f87171 !important; }
|
|
.form-hint { color: #64748b !important; }
|
|
|
|
/* Superadmin toggle */
|
|
.superadmin-toggle { border-color: #334155 !important; }
|
|
.superadmin-toggle button { color: #475569 !important; }
|
|
.superadmin-toggle button:hover { color: #94a3b8 !important; }
|
|
|
|
/* Superadmin form inputs */
|
|
.superadmin-form label { color: #94a3b8 !important; }
|
|
|
|
/* Footer */
|
|
.footer { color: #64748b !important; }
|
|
.status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
|
|
|
|
/* Scrollbar (webkit) */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: #0f172a; }
|
|
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #475569; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="logo">
|
|
<div class="icon">📚</div>
|
|
<h1>Leerdoelen Tracker</h1>
|
|
<p>{{ org_name }}</p>
|
|
</div>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }}">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endwith %}
|
|
|
|
{% if entra_configured %}
|
|
<a href="/auth/microsoft" class="btn-microsoft">
|
|
<svg width="20" height="20" viewBox="0 0 21 21">
|
|
<rect x="1" y="1" width="9" height="9" fill="#f25022"/>
|
|
<rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
|
|
<rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
|
|
<rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
|
|
</svg>
|
|
Inloggen met Microsoft
|
|
</a>
|
|
<p style="text-align:center; color:#6b7280; font-size:0.8rem;">
|
|
Log in met uw school Microsoft account
|
|
</p>
|
|
{% else %}
|
|
<div class="not-configured">
|
|
<strong>Microsoft login niet geconfigureerd</strong><br><br>
|
|
Stel <code>MICROSOFT_CLIENT_ID</code> en <code>MICROSOFT_CLIENT_SECRET</code>
|
|
in de <code>.env</code> in om Entra login te activeren.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Superadmin fallback — zichtbaar maar discreet -->
|
|
<div class="superadmin-toggle">
|
|
<button onclick="toggleSuperadmin()">Platformbeheerder</button>
|
|
</div>
|
|
|
|
<div class="superadmin-form" id="superadminForm">
|
|
<div style="font-size:0.8rem; color:#6b7280; margin-bottom:0.75rem; text-align:center;">
|
|
Platformbeheerder toegang
|
|
</div>
|
|
<div class="form-group">
|
|
<label>E-mail</label>
|
|
<input type="email" id="saEmail" value="admin@leerdoelen.local" autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Wachtwoord</label>
|
|
<input type="password" id="saPassword" autocomplete="current-password">
|
|
</div>
|
|
<button class="btn-superadmin" onclick="superadminLogin()">Inloggen</button>
|
|
<div id="sa-error"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let saVisible = false;
|
|
|
|
function toggleSuperadmin() {
|
|
saVisible = !saVisible;
|
|
document.getElementById('superadminForm').classList.toggle('visible', saVisible);
|
|
if (saVisible) document.getElementById('saPassword').focus();
|
|
}
|
|
|
|
async function superadminLogin() {
|
|
const errorEl = document.getElementById('sa-error');
|
|
errorEl.style.display = 'none';
|
|
|
|
const res = await fetch('/auth/superadmin-login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
email: document.getElementById('saEmail').value,
|
|
password: document.getElementById('saPassword').value,
|
|
})
|
|
});
|
|
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
window.location.href = data.redirect || '/dashboard';
|
|
} else {
|
|
errorEl.textContent = data.error || 'Inloggen mislukt';
|
|
errorEl.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' && saVisible) superadminLogin();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|