feat: password reset via email

- Add password_resets table: single-use tokens with 1h expiry.
- Add POST /api/forgot-password: sends reset link if account exists and is verified (always returns ok to prevent enumeration).
- Add POST /api/reset-password: validates token, updates password, invalidates all open reset tokens for that user in one transaction.
- Add /reset-password page with password strength meter and confirm field.
- Add "Passwort vergessen?" flow on login page.
- Factor shared email template into mailer helper, add sendPasswordResetMail.
- Rate limits: 5 forgot-requests/hour per IP, 10 reset attempts/15min per IP.
This commit is contained in:
Simon
2026-04-18 01:36:26 +02:00
parent 5ff616e0d9
commit fe33058ae6
6 changed files with 363 additions and 2 deletions
+43
View File
@@ -229,12 +229,25 @@ footer a:hover { color: #2563eb; }
<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-green" id="login-reset-ok">Falls für diese Adresse ein Konto existiert, wurde eine E-Mail zum Zurücksetzen versendet.</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>
<button type="button" onclick="showForgot()" id="forgot-link" style="font-size:12px;color:#6b7280;background:none;border:none;cursor:pointer;padding:4px 0;margin-top:4px;text-align:center">Passwort vergessen?</button>
</form>
<form class="form" id="form-forgot" onsubmit="doForgot(event)">
<div style="font-size:14px;color:#374151;margin-bottom:4px">Gib deine Schul-E-Mail ein. Wir schicken dir einen Link zum Zurücksetzen.</div>
<div class="field">
<label for="f-email">Schul-E-Mail</label>
<input type="email" id="f-email" autocomplete="email" placeholder="dein.name@ifb-schulen.com" required>
</div>
<div class="notice notice-red" id="forgot-err"></div>
<button class="btn-submit" type="submit" id="forgot-btn">Link senden</button>
<button type="button" onclick="hideForgot()" style="font-size:12px;color:#6b7280;background:none;border:none;cursor:pointer;padding:4px 0;margin-top:4px;text-align:center">← Zurück zum Login</button>
</form>
<form class="form" id="form-reg" onsubmit="doRegister(event)">
@@ -361,6 +374,36 @@ async function doRegister(e) {
document.getElementById('reg-btn').textContent = 'Registriert';
}
function showForgot() {
document.getElementById('form-login').classList.remove('active');
document.getElementById('form-reg').classList.remove('active');
document.getElementById('form-forgot').classList.add('active');
document.querySelector('.tabs').style.display = 'none';
}
function hideForgot() {
document.getElementById('form-forgot').classList.remove('active');
document.getElementById('form-login').classList.add('active');
document.querySelector('.tabs').style.display = '';
clearErr('forgot-err');
}
async function doForgot(e) {
e.preventDefault(); clearErr('forgot-err');
const email = document.getElementById('f-email').value.trim().toLowerCase();
const btn = document.getElementById('forgot-btn');
btn.disabled = true; btn.textContent = 'Wird gesendet...';
const r = await fetch('/api/forgot-password', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ email }) });
const d = await r.json().catch(()=>({}));
if (!r.ok) {
showErr('forgot-err', d.error || 'Fehler');
btn.disabled = false; btn.textContent = 'Link senden';
return;
}
hideForgot();
document.getElementById('login-reset-ok').classList.add('show');
btn.disabled = false; btn.textContent = 'Link senden';
document.getElementById('f-email').value = '';
}
async function resendVerify() {
const username = document.getElementById('l-user').value;
if (!username) return;