simon/ifb-schulapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: email verification via Resend + admin user management

Browse Source 
- Add email verification flow: register sends verify link, login blocks unverified accounts, 24h token expiry, resend endpoint (3/h rate limit).
- Add mailer module using Resend with branded HTML + plaintext template.
- Extend admin dashboard: verified-status column, toggle verify/unverify buttons, promote/demote admin role, delete any non-self user.
- Migrate users table: email_verified, verify_token, verify_expires columns.
- Load env via dotenv; add .env to gitignore.
This commit is contained in:
Simon
2026-04-18 01:33:45 +02:00
parent b2de630983
commit 396148aea2
9 changed files with 374 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.html
+41 -5
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IFB · Admin</title>
<title>INFO1 · Admin</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -81,6 +81,7 @@ tbody td { padding: 10px 14px; vertical-align: middle; }
.btn-orange { background: #fef3c7; color: #92400e; }
.btn-blue { background: var(--blue-50); color: var(--blue); }
.btn-gray { background: var(--slate-100); color: var(--slate-600); }
.btn-purple { background: #f3e8ff; color: #6b21a8; }
/* STATS ROW */
.stats-row { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
@@ -126,7 +127,7 @@ tbody td { padding: 10px 14px; vertical-align: middle; }
<header>
<div class="brand">
<div class="brand-school">IFB-Berufsfachschule Rosenheim</div>
<div class="brand-school">Klassenportal</div>
<div class="brand-class">INFO1</div>
</div>
<div class="h-spacer"></div>
@@ -172,7 +173,7 @@ tbody td { padding: 10px 14px; vertical-align: middle; }
<div class="tbl-wrap">
<table>
<thead><tr>
<th>ID</th><th>Benutzername</th><th>E-Mail</th><th>Rolle</th><th>Status</th><th>Registriert</th><th>Aktionen</th>
<th>ID</th><th>Benutzername</th><th>E-Mail</th><th>Rolle</th><th>Status</th><th>Bestätigt</th><th>Registriert</th><th>Aktionen</th>
</tr></thead>
<tbody id="users-tbody"></tbody>
</table>
@@ -288,11 +289,13 @@ async function api(method, path, body){
}
// ── AUTH GUARD ─────────────────────────────────────────────────
let currentAdminId = null;
async function authGuard(){
const r = await fetch('/api/me');
if(!r.ok){ location.href='/login'; return false; }
const d = await r.json();
if(d.role !== 'admin'){ location.href='/'; return false; }
currentAdminId = d.id;
document.getElementById('admin-username-line').textContent = `Eingeloggt als ${d.username}`;
return true;
}
@@ -353,7 +356,7 @@ function renderUsers(){
}
function renderUsersRows(users, tbody){
if(!users.length){ tbody.innerHTML=`<tr><td colspan="7" class="empty">Keine Benutzer gefunden</td></tr>`; return; }
if(!users.length){ tbody.innerHTML=`<tr><td colspan="8" class="empty">Keine Benutzer gefunden</td></tr>`; return; }
tbody.innerHTML=users.map(u=>`
<tr>
<td style="color:var(--slate-400);font-size:12px">${u.id}</td>
@@ -361,11 +364,18 @@ function renderUsersRows(users, tbody){
<td style="font-size:12px;color:var(--slate-500)">${esc(u.email)}</td>
<td>${roleBadge(u.role)}</td>
<td>${statusBadge(u.status)}</td>
<td>${verifiedBadge(u.email_verified)}</td>
<td style="font-size:12px;color:var(--slate-400)">${fmtDate(u.created_at)}</td>
<td><div class="td-actions">${userActions(u)}</div></td>
</tr>`).join('');
}
function verifiedBadge(v){
return v
? `<span class="badge badge-green">✓ bestätigt</span>`
: `<span class="badge badge-gray">nicht bestätigt</span>`;
}
function roleBadge(r){
const m={admin:'badge-purple',teacher:'badge-blue',student:'badge-green'};
return `<span class="badge ${m[r]||'badge-gray'}">${esc(r)}</span>`;
@@ -379,7 +389,11 @@ function userActions(u){
const parts=[];
if(u.status==='active') parts.push(`<button class="btn btn-red" onclick="banUser(${u.id},'${esc(u.username)}')">Sperren</button>`);
if(u.status==='banned') parts.push(`<button class="btn btn-green" onclick="unbanUser(${u.id},'${esc(u.username)}')">Entsperren</button>`);
if(u.role!=='admin') parts.push(`<button class="btn btn-gray" onclick="deleteUser(${u.id},'${esc(u.username)}')">Löschen</button>`);
if(!u.email_verified) parts.push(`<button class="btn btn-green" onclick="verifyUser(${u.id},'${esc(u.username)}')">E-Mail bestätigen</button>`);
else parts.push(`<button class="btn btn-gray" onclick="unverifyUser(${u.id},'${esc(u.username)}')">Bestätigung entfernen</button>`);
if(u.role!=='admin') parts.push(`<button class="btn btn-purple" onclick="makeAdmin(${u.id},'${esc(u.username)}')">Zu Admin machen</button>`);
else if(u.id!==currentAdminId) parts.push(`<button class="btn btn-gray" onclick="demoteAdmin(${u.id},'${esc(u.username)}')">Admin entfernen</button>`);
parts.push(`<button class="btn btn-gray" onclick="deleteUser(${u.id},'${esc(u.username)}')">Löschen</button>`);
return parts.join('');
}
@@ -418,6 +432,28 @@ async function deleteUser(id, name){
toast(`${name} gelöscht`,'success'); loadUsers();
});
}
async function verifyUser(id, name){
await api('PATCH',`admin/users/${id}`,{email_verified:1});
toast(`${name} E-Mail bestätigt`,'success'); loadUsers();
}
async function makeAdmin(id, name){
confirm2(`"${name}" zu Admin machen?`, `Der Benutzer erhält vollen Administratorzugriff.`, async()=>{
await api('PATCH',`admin/users/${id}`,{role:'admin'});
toast(`${name} ist jetzt Admin`,'success'); loadUsers();
});
}
async function demoteAdmin(id, name){
confirm2(`Admin-Rechte von "${name}" entfernen?`, `Der Benutzer wird zum Schüler herabgestuft.`, async()=>{
await api('PATCH',`admin/users/${id}`,{role:'student'});
toast(`${name} ist kein Admin mehr`,'success'); loadUsers();
});
}
async function unverifyUser(id, name){
confirm2(`Bestätigung für "${name}" entfernen?`, `Der Benutzer kann sich bis zur erneuten Bestätigung nicht mehr anmelden.`, async()=>{
await api('PATCH',`admin/users/${id}`,{email_verified:0});
toast(`${name} Bestätigung entfernt`,'success'); loadUsers();
});
}
async function approveTeacher(id, name){
await api('POST',`admin/teachers/${id}/approve`);
toast(`${name} genehmigt`,'success'); loadUsers();
public/login.html
+33 -16
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IFB · INFO1 – Anmelden</title>
<title>INFO1 · Anmelden</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -196,7 +196,7 @@ footer a:hover { color: #2563eb; }
<a class="brand" href="/">
<div class="brand-mark">i1</div>
<div class="brand-text">
<span class="brand-sub">IFB-Berufsfachschule Rosenheim</span>
<span class="brand-sub">Klassenportal</span>
<span class="brand-name">INFO1</span>
</div>
</a>
@@ -228,7 +228,12 @@ footer a:hover { color: #2563eb; }
</div>
<button type="button" style="font-size:12px;color:#6b7280;background:none;border:none;cursor:pointer;padding:0;margin-top:4px" onclick="backToStep1()">← Zurück</button>
</div>
<div class="notice notice-green" id="login-verified-ok">E-Mail erfolgreich bestätigt. Du kannst dich jetzt anmelden.</div>
<div class="notice notice-red" id="login-err"></div>
<div class="notice notice-amber" id="login-resend" style="text-align:center">
<div style="margin-bottom:6px">E-Mail noch nicht bestätigt?</div>
<button type="button" id="resend-btn" onclick="resendVerify()" style="font-size:12px;color:#2563eb;background:none;border:none;cursor:pointer;padding:0;font-weight:600">Verifizierungsmail erneut senden</button>
</div>
<button class="btn-submit" type="submit" id="login-btn">Anmelden</button>
</form>
@@ -262,14 +267,14 @@ footer a:hover { color: #2563eb; }
</div>
<div class="field">
<label for="r-pass">Passwort</label>
<input type="password" id="r-pass" autocomplete="new-password" placeholder="Mindestens 6 Zeichen" required oninput="checkStrength(this.value)">
<input type="password" id="r-pass" autocomplete="new-password" placeholder="Mindestens 8 Zeichen" required oninput="checkStrength(this.value)">
<div class="strength-wrap">
<div class="strength-bar"><div class="strength-fill" id="strength-fill"></div></div>
<div class="strength-label" id="strength-label">Passwort eingeben</div>
</div>
</div>
<div class="notice notice-red" id="reg-err"></div>
<div class="notice notice-green" id="reg-ok">Registrierung erfolgreich! Dein Lehrerkonto wird von einem Administrator geprüft und freigeschaltet.</div>
<div class="notice notice-green" id="reg-ok">Registrierung erfolgreich! Wir haben dir eine Bestätigungs-Mail geschickt. Bitte prüfe dein Postfach und klicke auf den Link.</div>
<button class="btn-submit" type="submit" id="reg-btn">Account erstellen</button>
</form>
@@ -317,12 +322,16 @@ function backToStep1() {
}
async function doLogin(e) {
e.preventDefault(); clearErr('login-err');
e.preventDefault(); clearErr('login-err'); clearErr('login-resend');
const body = { username: document.getElementById('l-user').value, password: document.getElementById('l-pass').value };
if (totpPending) body.totp_token = document.getElementById('l-totp').value;
const r = await fetch('/api/login', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
const d = await r.json();
if (!r.ok) { showErr('login-err', d.error); return; }
if (!r.ok) {
showErr('login-err', d.error);
if (d.needVerify) document.getElementById('login-resend').classList.add('show');
return;
}
if (d.requireTotp) {
totpPending = true;
document.getElementById('login-step-1').style.display = 'none';
@@ -332,7 +341,7 @@ async function doLogin(e) {
document.getElementById('l-totp').focus();
return;
}
window.location.href = '/';
window.location.href = '/app';
}
async function doRegister(e) {
@@ -347,18 +356,25 @@ async function doRegister(e) {
body: JSON.stringify(body) });
const d = await r.json();
if (!r.ok) { showErr('reg-err', d.error); return; }
if (d.pending) {
document.getElementById('reg-ok').classList.add('show');
document.getElementById('reg-btn').disabled = true;
document.getElementById('reg-btn').textContent = 'Registriert';
} else {
window.location.href = '/';
}
document.getElementById('reg-ok').classList.add('show');
document.getElementById('reg-btn').disabled = true;
document.getElementById('reg-btn').textContent = 'Registriert';
}
async function resendVerify() {
const username = document.getElementById('l-user').value;
if (!username) return;
const email = username.toLowerCase() + '@ifb-schulen.com';
const btn = document.getElementById('resend-btn');
btn.disabled = true; btn.textContent = 'Wird gesendet...';
const r = await fetch('/api/resend-verify', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ email }) });
if (r.ok) btn.textContent = 'Mail gesendet ✓';
else { const d = await r.json().catch(()=>({})); btn.textContent = d.error || 'Fehler'; btn.disabled = false; }
}
function checkStrength(pw) {
let score = 0;
if (pw.length >= 6) score++;
if (pw.length >= 8) score++;
if (pw.length >= 10) score++;
if (/[A-Z]/.test(pw)) score++;
if (/[0-9]/.test(pw)) score++;
@@ -379,8 +395,9 @@ function checkStrength(pw) {
const p = new URLSearchParams(location.search);
if (p.get('tab') === 'register') switchTab('register');
if (p.get('verified') === '1') document.getElementById('login-verified-ok').classList.add('show');
fetch('/api/me').then(r => { if (r.ok) window.location.href = '/'; });
fetch('/api/me').then(r => { if (r.ok) window.location.href = '/app'; });
lucide.createIcons();
</script>