feat: email verification via Resend + admin user management

- 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
+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();