feat: self-service password reset via email (Phase 4)
- email column on users (migration-safe ALTER TABLE) - email_reset_tokens table (1h TTL, single-use) - smtp.py: send via STARTTLS, config from CLI/env vars - POST /api/auth/request-reset — sends reset link, always 200 (no email leak) - POST /api/auth/reset-password-token — consumes email token - GET/POST /api/me/email — users can register/update their email - reset-password page: email form primary, admin code form as toggle, token form shown automatically when ?token= is in URL - CLI: --smtp-host/port/user/password/from (BINCIO_SMTP_* env vars)
This commit is contained in:
Davide Scaini
@@ -3,43 +3,99 @@ import Base from '../../layouts/Base.astro';
|
||||
---
|
||||
<Base title="Reset password — Bincio" public={true}>
|
||||
<div class="max-w-sm mx-auto mt-12">
|
||||
<h1 class="text-2xl font-bold text-white mb-2 text-center">Reset password</h1>
|
||||
<p class="text-zinc-500 text-sm text-center mb-2">
|
||||
Enter the reset code you received from the admin.
|
||||
</p>
|
||||
<p class="text-zinc-600 text-xs text-center mb-6">
|
||||
Don't have a code? Contact the instance admin — they can generate one from the admin panel. Codes expire after 24 hours.
|
||||
</p>
|
||||
<h1 class="text-2xl font-bold text-white mb-6 text-center">Reset password</h1>
|
||||
|
||||
<form id="reset-form" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-400 mb-1" for="code">Reset code</label>
|
||||
<input id="code" name="code" type="text" autocomplete="off"
|
||||
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white font-mono uppercase tracking-widest placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||
placeholder="XXXXXXXX" maxlength="8" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-400 mb-1" for="handle">Handle</label>
|
||||
<input id="handle" name="handle" type="text" autocomplete="username"
|
||||
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||
placeholder="your handle" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-400 mb-1" for="password">New password</label>
|
||||
<input id="password" name="password" type="password" autocomplete="new-password"
|
||||
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white focus:outline-none focus:border-[--accent]"
|
||||
minlength="8" required />
|
||||
<p class="text-zinc-600 text-xs mt-1">At least 8 characters</p>
|
||||
</div>
|
||||
<p id="reset-error" class="text-red-400 text-sm hidden"></p>
|
||||
<p id="reset-ok" class="text-green-400 text-sm hidden">
|
||||
Password updated. <a href="/login/" class="underline">Sign in</a>
|
||||
<!-- ── Email request form (shown when no token in URL) ── -->
|
||||
<div id="request-section">
|
||||
<p class="text-zinc-500 text-sm text-center mb-6">
|
||||
Enter your email address and we'll send you a reset link.
|
||||
</p>
|
||||
<button type="submit"
|
||||
class="w-full py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white font-medium transition-opacity">
|
||||
Set new password
|
||||
<form id="request-form" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-400 mb-1" for="email">Email address</label>
|
||||
<input id="email" name="email" type="email" autocomplete="email"
|
||||
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||
placeholder="you@example.com" required />
|
||||
</div>
|
||||
<p id="request-error" class="text-red-400 text-sm hidden"></p>
|
||||
<p id="request-ok" class="text-green-400 text-sm hidden">
|
||||
If that email is registered you'll receive a reset link shortly.
|
||||
</p>
|
||||
<button type="submit"
|
||||
class="w-full py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white font-medium transition-opacity">
|
||||
Send reset link
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-8 pt-6 border-t border-zinc-800">
|
||||
<p class="text-zinc-600 text-xs text-center mb-4">Have an admin-issued code instead?</p>
|
||||
<button id="show-code-form"
|
||||
class="w-full py-2 rounded-lg border border-zinc-700 text-zinc-400 hover:text-white hover:border-zinc-500 text-sm transition-colors">
|
||||
Use admin reset code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Admin code form (hidden by default, shown on toggle or ?code= param) ── -->
|
||||
<div id="code-section" class="hidden">
|
||||
<p class="text-zinc-500 text-sm text-center mb-6">
|
||||
Enter the reset code you received from the admin.
|
||||
</p>
|
||||
<form id="code-form" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-400 mb-1" for="code">Reset code</label>
|
||||
<input id="code" name="code" type="text" autocomplete="off"
|
||||
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white font-mono uppercase tracking-widest placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||
placeholder="XXXXXXXX" maxlength="8" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-400 mb-1" for="handle">Handle</label>
|
||||
<input id="handle" name="handle" type="text" autocomplete="username"
|
||||
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||
placeholder="your handle" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-400 mb-1" for="code-password">New password</label>
|
||||
<input id="code-password" name="password" type="password" autocomplete="new-password"
|
||||
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white focus:outline-none focus:border-[--accent]"
|
||||
minlength="8" required />
|
||||
<p class="text-zinc-600 text-xs mt-1">At least 8 characters</p>
|
||||
</div>
|
||||
<p id="code-error" class="text-red-400 text-sm hidden"></p>
|
||||
<p id="code-ok" class="text-green-400 text-sm hidden">
|
||||
Password updated. <a href="/login/" class="underline">Sign in</a>
|
||||
</p>
|
||||
<button type="submit"
|
||||
class="w-full py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white font-medium transition-opacity">
|
||||
Set new password
|
||||
</button>
|
||||
</form>
|
||||
<button id="show-email-form" class="mt-4 w-full text-zinc-600 hover:text-zinc-400 text-xs transition-colors">
|
||||
← Back to email reset
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- ── Token form (shown when ?token= is in URL) ── -->
|
||||
<div id="token-section" class="hidden">
|
||||
<p class="text-zinc-500 text-sm text-center mb-6">Choose a new password for your account.</p>
|
||||
<form id="token-form" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm text-zinc-400 mb-1" for="token-password">New password</label>
|
||||
<input id="token-password" name="password" type="password" autocomplete="new-password"
|
||||
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white focus:outline-none focus:border-[--accent]"
|
||||
minlength="8" required />
|
||||
<p class="text-zinc-600 text-xs mt-1">At least 8 characters</p>
|
||||
</div>
|
||||
<p id="token-error" class="text-red-400 text-sm hidden"></p>
|
||||
<p id="token-ok" class="text-green-400 text-sm hidden">
|
||||
Password updated. <a href="/login/" class="underline">Sign in</a>
|
||||
</p>
|
||||
<button type="submit"
|
||||
class="w-full py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white font-medium transition-opacity">
|
||||
Set new password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-zinc-500 text-sm mt-6">
|
||||
<a href="/login/" class="text-[--accent] hover:underline">Back to sign in</a>
|
||||
@@ -48,38 +104,47 @@ import Base from '../../layouts/Base.astro';
|
||||
</Base>
|
||||
|
||||
<script>
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const cp = params.get('code');
|
||||
const hp = params.get('handle');
|
||||
if (cp) (document.getElementById('code') as HTMLInputElement).value = cp.toUpperCase();
|
||||
if (hp) (document.getElementById('handle') as HTMLInputElement).value = hp;
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const token = params.get('token');
|
||||
const codeParam = params.get('code');
|
||||
const handleParam = params.get('handle');
|
||||
|
||||
document.getElementById('reset-form')?.addEventListener('submit', async e => {
|
||||
const requestSection = document.getElementById('request-section')!;
|
||||
const codeSection = document.getElementById('code-section')!;
|
||||
const tokenSection = document.getElementById('token-section')!;
|
||||
|
||||
function show(section: HTMLElement) {
|
||||
[requestSection, codeSection, tokenSection].forEach(s => s.classList.add('hidden'));
|
||||
section.classList.remove('hidden');
|
||||
}
|
||||
|
||||
if (token) {
|
||||
show(tokenSection);
|
||||
} else if (codeParam) {
|
||||
show(codeSection);
|
||||
(document.getElementById('code') as HTMLInputElement).value = codeParam.toUpperCase();
|
||||
if (handleParam) (document.getElementById('handle') as HTMLInputElement).value = handleParam;
|
||||
} else {
|
||||
show(requestSection);
|
||||
}
|
||||
|
||||
document.getElementById('show-code-form')?.addEventListener('click', () => show(codeSection));
|
||||
document.getElementById('show-email-form')?.addEventListener('click', () => show(requestSection));
|
||||
|
||||
// Email request form
|
||||
document.getElementById('request-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const errEl = document.getElementById('reset-error')!;
|
||||
const okEl = document.getElementById('reset-ok')!;
|
||||
const form = e.target as HTMLFormElement;
|
||||
const errEl = document.getElementById('request-error')!;
|
||||
const okEl = document.getElementById('request-ok')!;
|
||||
errEl.classList.add('hidden');
|
||||
okEl.classList.add('hidden');
|
||||
|
||||
const body = {
|
||||
code: (form.querySelector('#code') as HTMLInputElement).value.trim().toUpperCase(),
|
||||
handle: (form.querySelector('#handle') as HTMLInputElement).value.trim().toLowerCase(),
|
||||
password: (form.querySelector('#password') as HTMLInputElement).value,
|
||||
};
|
||||
|
||||
try {
|
||||
const r = await fetch('/api/auth/reset-password', {
|
||||
await fetch('/api/auth/request-reset', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
body: JSON.stringify({ email: (form.querySelector('#email') as HTMLInputElement).value.trim() }),
|
||||
});
|
||||
if (!r.ok) {
|
||||
const d = await r.json().catch(() => ({}));
|
||||
errEl.textContent = d.detail ?? 'Reset failed';
|
||||
errEl.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
okEl.classList.remove('hidden');
|
||||
form.querySelectorAll('input, button').forEach(el => (el as HTMLInputElement).disabled = true);
|
||||
} catch {
|
||||
@@ -87,4 +152,53 @@ import Base from '../../layouts/Base.astro';
|
||||
errEl.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Admin code form
|
||||
document.getElementById('code-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const errEl = document.getElementById('code-error')!;
|
||||
const okEl = document.getElementById('code-ok')!;
|
||||
errEl.classList.add('hidden');
|
||||
okEl.classList.add('hidden');
|
||||
const body = {
|
||||
code: (form.querySelector('#code') as HTMLInputElement).value.trim().toUpperCase(),
|
||||
handle: (form.querySelector('#handle') as HTMLInputElement).value.trim().toLowerCase(),
|
||||
password: (form.querySelector('#code-password') as HTMLInputElement).value,
|
||||
};
|
||||
try {
|
||||
const r = await fetch('/api/auth/reset-password', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body),
|
||||
});
|
||||
if (!r.ok) { const d = await r.json().catch(() => ({})); errEl.textContent = d.detail ?? 'Reset failed'; errEl.classList.remove('hidden'); return; }
|
||||
okEl.classList.remove('hidden');
|
||||
form.querySelectorAll('input, button').forEach(el => (el as HTMLInputElement).disabled = true);
|
||||
} catch {
|
||||
errEl.textContent = 'Could not reach server'; errEl.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Email token form
|
||||
document.getElementById('token-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const errEl = document.getElementById('token-error')!;
|
||||
const okEl = document.getElementById('token-ok')!;
|
||||
errEl.classList.add('hidden');
|
||||
okEl.classList.add('hidden');
|
||||
const body = {
|
||||
token,
|
||||
password: (form.querySelector('#token-password') as HTMLInputElement).value,
|
||||
};
|
||||
try {
|
||||
const r = await fetch('/api/auth/reset-password-token', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body),
|
||||
});
|
||||
if (!r.ok) { const d = await r.json().catch(() => ({})); errEl.textContent = d.detail ?? 'Reset failed'; errEl.classList.remove('hidden'); return; }
|
||||
okEl.classList.remove('hidden');
|
||||
form.querySelectorAll('input, button').forEach(el => (el as HTMLInputElement).disabled = true);
|
||||
} catch {
|
||||
errEl.textContent = 'Could not reach server'; errEl.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user