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/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>