feat(auth): add email-based password reset with MFA + session invalidation

Adds /auth/forgot-password and /auth/reset-password endpoints plus two new client pages. When SMTP is configured the user receives a branded, i18n-aware reset email; when it isn't the reset link is logged to the server console in a clearly-fenced block so self-hosters can relay it manually. Security properties: - 256-bit cryptographically-random tokens, only SHA-256 hashes stored in DB - 60 min expiry, single-use, prior unconsumed tokens auto-invalidated - Enumeration-safe: /forgot-password always responds {ok:true} with a minimum latency pad so timing doesn't leak account existence - Per-IP rate limit (3/15min on forgot, 5/15min on reset) + per-email throttle - If the user has MFA enabled, a valid TOTP or backup code is required at reset-complete time — a compromised mailbox alone cannot take over a 2FA-protected account - New users.password_version column + JWT "pv" claim: bumping it on reset invalidates every live session immediately - Full audit-log coverage (user.password_reset_request/_success/_fail) - Forgot-page shows a visible hint when SMTP is unconfigured Migration 115 adds users.password_version and password_reset_tokens (user_id, token_hash UNIQUE, expires_at, consumed_at, created_ip).
2026-06-22 06:41:46 +00:00 · 2026-04-20 14:06:42 +02:00
parent 2ab8b401fb
commit 51387b0af1
26 changed files with 1140 additions and 17 deletions
@@ -4,6 +4,8 @@ import { useAuthStore } from './store/authStore'
 import { useSettingsStore } from './store/settingsStore'
 import { useAddonStore } from './store/addonStore'
 import LoginPage from './pages/LoginPage'
+import ForgotPasswordPage from './pages/ForgotPasswordPage'
+import ResetPasswordPage from './pages/ResetPasswordPage'
 import DashboardPage from './pages/DashboardPage'
 import TripPlannerPage from './pages/TripPlannerPage'
 import FilesPage from './pages/FilesPage'
@@ -197,7 +199,10 @@ export default function App() {
    applyDark(mode === true || mode === 'dark')
  }, [settings.dark_mode, isSharedPage])

-  const isAuthPage = location.pathname.startsWith('/login') || location.pathname.startsWith('/register')
+  const isAuthPage = location.pathname.startsWith('/login')
+    || location.pathname.startsWith('/register')
+    || location.pathname.startsWith('/forgot-password')
+    || location.pathname.startsWith('/reset-password')

  return (
    <TranslationProvider>
@@ -210,6 +215,8 @@ export default function App() {
        <Route path="/shared/:token" element={<SharedTripPage />} />
        <Route path="/public/journey/:token" element={<JourneyPublicPage />} />
        <Route path="/register" element={<LoginPage />} />
+        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+        <Route path="/reset-password" element={<ResetPasswordPage />} />
        {/* OAuth 2.1 consent page — intentionally outside ProtectedRoute */}
        <Route path="/oauth/authorize" element={<OAuthAuthorizePage />} />
        <Route
@@ -114,6 +114,8 @@ export const authApi = {
  validateKeys: () => apiClient.get('/auth/validate-keys').then(r => r.data),
  travelStats: () => apiClient.get('/auth/travel-stats').then(r => r.data),
  changePassword: (data: { current_password: string; new_password: string }) => apiClient.put('/auth/me/password', data).then(r => r.data),
+  forgotPassword: (data: { email: string }) => apiClient.post('/auth/forgot-password', data).then(r => r.data as { ok: true }),
+  resetPassword: (data: { token: string; new_password: string; mfa_code?: string }) => apiClient.post('/auth/reset-password', data).then(r => r.data as { success?: true; mfa_required?: true }),
  deleteOwnAccount: () => apiClient.delete('/auth/me').then(r => r.data),
  demoLogin: () => apiClient.post('/auth/demo-login').then(r => r.data),
  mcpTokens: {
@@ -463,6 +463,28 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'فشل تسجيل الدخول عبر OIDC',
  'login.usernameRequired': 'اسم المستخدم مطلوب',
  'login.passwordMinLength': 'يجب أن تكون كلمة المرور 8 أحرف على الأقل',
+  'login.forgotPassword': 'نسيت كلمة المرور؟',
+  'login.forgotPasswordTitle': 'إعادة تعيين كلمة المرور',
+  'login.forgotPasswordBody': 'أدخل عنوان البريد الإلكتروني المسجَّل. إذا كان الحساب موجودًا، سنرسل رابط إعادة التعيين.',
+  'login.forgotPasswordSubmit': 'إرسال الرابط',
+  'login.forgotPasswordSentTitle': 'تحقق من بريدك',
+  'login.forgotPasswordSentBody': 'إذا كان هناك حساب مرتبط بهذا البريد، فإن الرابط في الطريق. تنتهي صلاحيته خلال 60 دقيقة.',
+  'login.forgotPasswordSmtpHintOff': 'ملاحظة: لم يقم المسؤول بتكوين SMTP، لذا سيتم كتابة رابط إعادة التعيين في وحدة تحكم الخادم بدلاً من إرساله عبر البريد الإلكتروني.',
+  'login.backToLogin': 'العودة إلى تسجيل الدخول',
+  'login.newPassword': 'كلمة المرور الجديدة',
+  'login.confirmPassword': 'تأكيد كلمة المرور الجديدة',
+  'login.passwordsDontMatch': 'كلمتا المرور غير متطابقتين',
+  'login.mfaCode': 'رمز 2FA',
+  'login.resetPasswordTitle': 'ضبط كلمة مرور جديدة',
+  'login.resetPasswordBody': 'اختر كلمة مرور قوية لم تستخدمها هنا من قبل. 8 أحرف على الأقل.',
+  'login.resetPasswordMfaBody': 'أدخل رمز 2FA أو رمز النسخ الاحتياطي لإتمام إعادة التعيين.',
+  'login.resetPasswordSubmit': 'إعادة تعيين كلمة المرور',
+  'login.resetPasswordVerify': 'تحقق وأعد التعيين',
+  'login.resetPasswordSuccessTitle': 'تم تحديث كلمة المرور',
+  'login.resetPasswordSuccessBody': 'يمكنك الآن تسجيل الدخول بكلمة المرور الجديدة.',
+  'login.resetPasswordInvalidLink': 'رابط إعادة تعيين غير صالح',
+  'login.resetPasswordInvalidLinkBody': 'هذا الرابط مفقود أو تالف. اطلب رابطًا جديدًا للمتابعة.',
+  'login.resetPasswordFailed': 'فشلت إعادة التعيين. ربما انتهت صلاحية الرابط.',

  // Register
  'register.passwordMismatch': 'كلمتا المرور غير متطابقتين',
@@ -458,6 +458,28 @@ const br: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'Falha no login OIDC',
  'login.usernameRequired': 'Nome de usuário é obrigatório',
  'login.passwordMinLength': 'A senha deve ter pelo menos 8 caracteres',
+  'login.forgotPassword': 'Esqueceu a senha?',
+  'login.forgotPasswordTitle': 'Redefinir sua senha',
+  'login.forgotPasswordBody': 'Digite o e-mail cadastrado. Se houver uma conta, enviaremos um link de redefinição.',
+  'login.forgotPasswordSubmit': 'Enviar link',
+  'login.forgotPasswordSentTitle': 'Verifique seu e-mail',
+  'login.forgotPasswordSentBody': 'Se houver uma conta para esse e-mail, o link está a caminho. Ele expira em 60 minutos.',
+  'login.forgotPasswordSmtpHintOff': 'Observação: seu administrador não configurou SMTP, então o link de redefinição será gravado no console do servidor em vez de ser enviado por e-mail.',
+  'login.backToLogin': 'Voltar ao login',
+  'login.newPassword': 'Nova senha',
+  'login.confirmPassword': 'Confirmar nova senha',
+  'login.passwordsDontMatch': 'As senhas não coincidem',
+  'login.mfaCode': 'Código 2FA',
+  'login.resetPasswordTitle': 'Definir uma nova senha',
+  'login.resetPasswordBody': 'Escolha uma senha forte que você ainda não tenha usado aqui. Mínimo de 8 caracteres.',
+  'login.resetPasswordMfaBody': 'Digite seu código 2FA ou um código de backup para concluir a redefinição.',
+  'login.resetPasswordSubmit': 'Redefinir senha',
+  'login.resetPasswordVerify': 'Verificar e redefinir',
+  'login.resetPasswordSuccessTitle': 'Senha atualizada',
+  'login.resetPasswordSuccessBody': 'Agora você pode entrar com sua nova senha.',
+  'login.resetPasswordInvalidLink': 'Link de redefinição inválido',
+  'login.resetPasswordInvalidLinkBody': 'Este link está ausente ou corrompido. Solicite um novo para continuar.',
+  'login.resetPasswordFailed': 'Falha na redefinição. O link pode ter expirado.',

  // Register
  'register.passwordMismatch': 'As senhas não coincidem',
@@ -458,6 +458,28 @@ const cs: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'Přihlášení přes OIDC se nezdařilo',
  'login.usernameRequired': 'Uživatelské jméno je povinné',
  'login.passwordMinLength': 'Heslo musí mít alespoň 8 znaků',
+  'login.forgotPassword': 'Zapomenuté heslo?',
+  'login.forgotPasswordTitle': 'Obnovení hesla',
+  'login.forgotPasswordBody': 'Zadej e-mail použitý při registraci. Pokud účet existuje, pošleme odkaz pro obnovení.',
+  'login.forgotPasswordSubmit': 'Odeslat odkaz',
+  'login.forgotPasswordSentTitle': 'Zkontroluj e-mail',
+  'login.forgotPasswordSentBody': 'Pokud k tomuto e-mailu existuje účet, odkaz je na cestě. Platnost vyprší za 60 minut.',
+  'login.forgotPasswordSmtpHintOff': 'Upozornění: správce nemá nakonfigurovaný SMTP, takže se odkaz pro obnovení zapíše do konzole serveru místo odeslání e-mailem.',
+  'login.backToLogin': 'Zpět na přihlášení',
+  'login.newPassword': 'Nové heslo',
+  'login.confirmPassword': 'Potvrď nové heslo',
+  'login.passwordsDontMatch': 'Hesla se neshodují',
+  'login.mfaCode': 'Kód 2FA',
+  'login.resetPasswordTitle': 'Nastavit nové heslo',
+  'login.resetPasswordBody': 'Vyber silné heslo, které jsi tu ještě nepoužil. Minimálně 8 znaků.',
+  'login.resetPasswordMfaBody': 'Zadej 2FA kód nebo záložní kód pro dokončení obnovení.',
+  'login.resetPasswordSubmit': 'Obnovit heslo',
+  'login.resetPasswordVerify': 'Ověřit a obnovit',
+  'login.resetPasswordSuccessTitle': 'Heslo aktualizováno',
+  'login.resetPasswordSuccessBody': 'Nyní se můžeš přihlásit novým heslem.',
+  'login.resetPasswordInvalidLink': 'Neplatný odkaz',
+  'login.resetPasswordInvalidLinkBody': 'Odkaz chybí nebo je poškozený. Pro pokračování si vyžádej nový.',
+  'login.resetPasswordFailed': 'Obnovení se nezdařilo. Odkaz mohl vypršet.',

  // Registrace (Register)
  'register.passwordMismatch': 'Hesla se neshodují',
@@ -463,6 +463,28 @@ const de: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'OIDC-Anmeldung fehlgeschlagen',
  'login.usernameRequired': 'Benutzername ist erforderlich',
  'login.passwordMinLength': 'Das Passwort muss mindestens 8 Zeichen lang sein',
+  'login.forgotPassword': 'Passwort vergessen?',
+  'login.forgotPasswordTitle': 'Passwort zurücksetzen',
+  'login.forgotPasswordBody': 'Gib die E-Mail-Adresse deines Kontos ein. Falls ein Konto existiert, schicken wir dir einen Reset-Link.',
+  'login.forgotPasswordSubmit': 'Reset-Link senden',
+  'login.forgotPasswordSentTitle': 'Prüfe deine E-Mails',
+  'login.forgotPasswordSentBody': 'Falls ein Konto mit dieser Adresse existiert, ist ein Reset-Link unterwegs. Er läuft in 60 Minuten ab.',
+  'login.forgotPasswordSmtpHintOff': 'Hinweis: Der Administrator hat SMTP nicht konfiguriert. Der Reset-Link wird statt per E-Mail in die Server-Konsole geschrieben.',
+  'login.backToLogin': 'Zurück zur Anmeldung',
+  'login.newPassword': 'Neues Passwort',
+  'login.confirmPassword': 'Neues Passwort bestätigen',
+  'login.passwordsDontMatch': 'Passwörter stimmen nicht überein',
+  'login.mfaCode': '2FA-Code',
+  'login.resetPasswordTitle': 'Neues Passwort festlegen',
+  'login.resetPasswordBody': 'Wähle ein starkes Passwort, das du hier noch nicht verwendet hast. Mindestens 8 Zeichen.',
+  'login.resetPasswordMfaBody': 'Gib deinen 2FA-Code oder einen Backup-Code ein, um den Reset abzuschließen.',
+  'login.resetPasswordSubmit': 'Passwort zurücksetzen',
+  'login.resetPasswordVerify': 'Prüfen & zurücksetzen',
+  'login.resetPasswordSuccessTitle': 'Passwort aktualisiert',
+  'login.resetPasswordSuccessBody': 'Du kannst dich jetzt mit deinem neuen Passwort anmelden.',
+  'login.resetPasswordInvalidLink': 'Ungültiger Reset-Link',
+  'login.resetPasswordInvalidLinkBody': 'Dieser Link fehlt oder ist beschädigt. Fordere einen neuen an, um fortzufahren.',
+  'login.resetPasswordFailed': 'Zurücksetzen fehlgeschlagen. Der Link ist möglicherweise abgelaufen.',

  // Register
  'register.passwordMismatch': 'Passwörter stimmen nicht überein',
@@ -522,6 +522,28 @@ const en: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'OIDC login failed',
  'login.usernameRequired': 'Username is required',
  'login.passwordMinLength': 'Password must be at least 8 characters',
+  'login.forgotPassword': 'Forgot password?',
+  'login.forgotPasswordTitle': 'Reset your password',
+  'login.forgotPasswordBody': 'Enter the email address you signed up with. If an account exists, we\'ll send a reset link.',
+  'login.forgotPasswordSubmit': 'Send reset link',
+  'login.forgotPasswordSentTitle': 'Check your email',
+  'login.forgotPasswordSentBody': 'If an account exists for that email, a reset link is on its way. It expires in 60 minutes.',
+  'login.forgotPasswordSmtpHintOff': 'Heads up: your administrator hasn\'t configured SMTP, so the reset link will be written to the server console instead of being emailed.',
+  'login.backToLogin': 'Back to sign in',
+  'login.newPassword': 'New password',
+  'login.confirmPassword': 'Confirm new password',
+  'login.passwordsDontMatch': 'Passwords don\'t match',
+  'login.mfaCode': '2FA code',
+  'login.resetPasswordTitle': 'Set a new password',
+  'login.resetPasswordBody': 'Pick a strong password you haven’t used here before. Minimum 8 characters.',
+  'login.resetPasswordMfaBody': 'Enter your 2FA code or a backup code to complete the reset.',
+  'login.resetPasswordSubmit': 'Reset password',
+  'login.resetPasswordVerify': 'Verify & reset',
+  'login.resetPasswordSuccessTitle': 'Password updated',
+  'login.resetPasswordSuccessBody': 'You can now sign in with your new password.',
+  'login.resetPasswordInvalidLink': 'Invalid reset link',
+  'login.resetPasswordInvalidLinkBody': 'This link is missing or broken. Request a new one to continue.',
+  'login.resetPasswordFailed': 'Reset failed. The link may have expired.',

  // Register
  'register.passwordMismatch': 'Passwords do not match',
@@ -450,6 +450,28 @@ const es: Record<string, string> = {
  'login.oidcFailed': 'Error de inicio de sesión OIDC',
  'login.usernameRequired': 'El nombre de usuario es obligatorio',
  'login.passwordMinLength': 'La contraseña debe tener al menos 8 caracteres',
+  'login.forgotPassword': '¿Olvidaste tu contraseña?',
+  'login.forgotPasswordTitle': 'Restablecer tu contraseña',
+  'login.forgotPasswordBody': 'Introduce la dirección de correo con la que te registraste. Si existe una cuenta, enviaremos un enlace.',
+  'login.forgotPasswordSubmit': 'Enviar enlace',
+  'login.forgotPasswordSentTitle': 'Revisa tu correo',
+  'login.forgotPasswordSentBody': 'Si existe una cuenta con ese correo, el enlace de restablecimiento está en camino. Caduca en 60 minutos.',
+  'login.forgotPasswordSmtpHintOff': 'Nota: tu administrador no ha configurado SMTP, así que el enlace de restablecimiento se escribirá en la consola del servidor en lugar de enviarse por correo.',
+  'login.backToLogin': 'Volver al inicio de sesión',
+  'login.newPassword': 'Nueva contraseña',
+  'login.confirmPassword': 'Confirmar nueva contraseña',
+  'login.passwordsDontMatch': 'Las contraseñas no coinciden',
+  'login.mfaCode': 'Código 2FA',
+  'login.resetPasswordTitle': 'Establecer una nueva contraseña',
+  'login.resetPasswordBody': 'Elige una contraseña segura que no hayas usado aquí antes. Mínimo 8 caracteres.',
+  'login.resetPasswordMfaBody': 'Introduce tu código 2FA o un código de respaldo para completar el restablecimiento.',
+  'login.resetPasswordSubmit': 'Restablecer contraseña',
+  'login.resetPasswordVerify': 'Verificar y restablecer',
+  'login.resetPasswordSuccessTitle': 'Contraseña actualizada',
+  'login.resetPasswordSuccessBody': 'Ya puedes iniciar sesión con tu nueva contraseña.',
+  'login.resetPasswordInvalidLink': 'Enlace de restablecimiento no válido',
+  'login.resetPasswordInvalidLinkBody': 'Este enlace falta o está roto. Solicita uno nuevo para continuar.',
+  'login.resetPasswordFailed': 'Restablecimiento fallido. El enlace puede haber caducado.',
  'login.oidc.tokenFailed': 'La autenticación falló.',
  'login.oidc.invalidState': 'Sesión no válida. Inténtalo de nuevo.',
  'login.demoFailed': 'Falló el acceso a la demo',
@@ -451,6 +451,28 @@ const fr: Record<string, string> = {
  'login.oidcFailed': 'Échec de connexion OIDC',
  'login.usernameRequired': 'Le nom d\'utilisateur est obligatoire',
  'login.passwordMinLength': 'Le mot de passe doit comporter au moins 8 caractères',
+  'login.forgotPassword': 'Mot de passe oublié ?',
+  'login.forgotPasswordTitle': 'Réinitialiser votre mot de passe',
+  'login.forgotPasswordBody': 'Entrez l\'adresse e-mail associée à votre compte. Si un compte existe, nous enverrons un lien de réinitialisation.',
+  'login.forgotPasswordSubmit': 'Envoyer le lien',
+  'login.forgotPasswordSentTitle': 'Vérifiez vos e-mails',
+  'login.forgotPasswordSentBody': 'Si un compte existe pour cette adresse, un lien de réinitialisation est en route. Il expire dans 60 minutes.',
+  'login.forgotPasswordSmtpHintOff': 'Remarque : votre administrateur n\'a pas configuré SMTP. Le lien de réinitialisation sera écrit dans la console du serveur au lieu d\'être envoyé par e-mail.',
+  'login.backToLogin': 'Retour à la connexion',
+  'login.newPassword': 'Nouveau mot de passe',
+  'login.confirmPassword': 'Confirmer le nouveau mot de passe',
+  'login.passwordsDontMatch': 'Les mots de passe ne correspondent pas',
+  'login.mfaCode': 'Code 2FA',
+  'login.resetPasswordTitle': 'Définir un nouveau mot de passe',
+  'login.resetPasswordBody': 'Choisissez un mot de passe fort que vous n\'avez pas encore utilisé ici. 8 caractères minimum.',
+  'login.resetPasswordMfaBody': 'Entrez votre code 2FA ou un code de secours pour finaliser la réinitialisation.',
+  'login.resetPasswordSubmit': 'Réinitialiser',
+  'login.resetPasswordVerify': 'Vérifier et réinitialiser',
+  'login.resetPasswordSuccessTitle': 'Mot de passe mis à jour',
+  'login.resetPasswordSuccessBody': 'Vous pouvez maintenant vous connecter avec votre nouveau mot de passe.',
+  'login.resetPasswordInvalidLink': 'Lien de réinitialisation invalide',
+  'login.resetPasswordInvalidLinkBody': 'Ce lien est manquant ou invalide. Demandez-en un nouveau pour continuer.',
+  'login.resetPasswordFailed': 'Échec de la réinitialisation. Le lien a peut-être expiré.',
  'login.oidc.tokenFailed': 'L\'authentification a échoué.',
  'login.oidc.invalidState': 'Session invalide. Veuillez réessayer.',
  'login.demoFailed': 'Échec de la connexion démo',
@@ -458,6 +458,28 @@ const hu: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'OIDC bejelentkezés sikertelen',
  'login.usernameRequired': 'A felhasználónév kötelező',
  'login.passwordMinLength': 'A jelszónak legalább 8 karakter hosszúnak kell lennie',
+  'login.forgotPassword': 'Elfelejtetted a jelszavad?',
+  'login.forgotPasswordTitle': 'Jelszó visszaállítása',
+  'login.forgotPasswordBody': 'Írd be a regisztrációnál használt e-mail-címet. Ha létezik fiók, küldünk egy visszaállítási linket.',
+  'login.forgotPasswordSubmit': 'Link küldése',
+  'login.forgotPasswordSentTitle': 'Nézd meg az e-mailjeidet',
+  'login.forgotPasswordSentBody': 'Ha létezik fiók ehhez az e-mailhez, a visszaállítási link úton van. 60 perc után lejár.',
+  'login.forgotPasswordSmtpHintOff': 'Megjegyzés: a rendszergazda nem konfigurálta az SMTP-t, ezért a visszaállítási link e-mail helyett a szerverkonzolba kerül.',
+  'login.backToLogin': 'Vissza a bejelentkezéshez',
+  'login.newPassword': 'Új jelszó',
+  'login.confirmPassword': 'Új jelszó megerősítése',
+  'login.passwordsDontMatch': 'A jelszavak nem egyeznek',
+  'login.mfaCode': '2FA-kód',
+  'login.resetPasswordTitle': 'Új jelszó beállítása',
+  'login.resetPasswordBody': 'Válassz erős jelszót, amit itt még nem használtál. Minimum 8 karakter.',
+  'login.resetPasswordMfaBody': 'Add meg a 2FA-kódodat vagy egy tartalék kódot a visszaállítás befejezéséhez.',
+  'login.resetPasswordSubmit': 'Jelszó visszaállítása',
+  'login.resetPasswordVerify': 'Ellenőrzés és visszaállítás',
+  'login.resetPasswordSuccessTitle': 'Jelszó frissítve',
+  'login.resetPasswordSuccessBody': 'Mostantól bejelentkezhetsz az új jelszavaddal.',
+  'login.resetPasswordInvalidLink': 'Érvénytelen visszaállítási link',
+  'login.resetPasswordInvalidLinkBody': 'A link hiányzik vagy sérült. A folytatáshoz kérj egy újat.',
+  'login.resetPasswordFailed': 'A visszaállítás nem sikerült. A link lehet, hogy lejárt.',

  // Regisztráció
  'register.passwordMismatch': 'A jelszavak nem egyeznek',
@@ -520,6 +520,28 @@ const id: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'Login OIDC gagal',
  'login.usernameRequired': 'Nama pengguna wajib diisi',
  'login.passwordMinLength': 'Kata sandi minimal 8 karakter',
+  'login.forgotPassword': 'Lupa kata sandi?',
+  'login.forgotPasswordTitle': 'Setel ulang kata sandi',
+  'login.forgotPasswordBody': 'Masukkan alamat email akunmu. Jika akun ada, kami akan mengirim tautan reset.',
+  'login.forgotPasswordSubmit': 'Kirim tautan',
+  'login.forgotPasswordSentTitle': 'Periksa email kamu',
+  'login.forgotPasswordSentBody': 'Jika ada akun dengan email tersebut, tautannya sedang dikirim. Berlaku 60 menit.',
+  'login.forgotPasswordSmtpHintOff': 'Catatan: administrator belum mengonfigurasi SMTP, jadi tautan reset akan ditulis ke konsol server alih-alih dikirim lewat email.',
+  'login.backToLogin': 'Kembali ke login',
+  'login.newPassword': 'Kata sandi baru',
+  'login.confirmPassword': 'Konfirmasi kata sandi baru',
+  'login.passwordsDontMatch': 'Kata sandi tidak cocok',
+  'login.mfaCode': 'Kode 2FA',
+  'login.resetPasswordTitle': 'Tetapkan kata sandi baru',
+  'login.resetPasswordBody': 'Pilih kata sandi kuat yang belum pernah kamu pakai di sini. Minimal 8 karakter.',
+  'login.resetPasswordMfaBody': 'Masukkan kode 2FA atau kode cadangan untuk menyelesaikan reset.',
+  'login.resetPasswordSubmit': 'Setel ulang kata sandi',
+  'login.resetPasswordVerify': 'Verifikasi & setel ulang',
+  'login.resetPasswordSuccessTitle': 'Kata sandi diperbarui',
+  'login.resetPasswordSuccessBody': 'Sekarang kamu bisa login dengan kata sandi baru.',
+  'login.resetPasswordInvalidLink': 'Tautan tidak valid',
+  'login.resetPasswordInvalidLinkBody': 'Tautan hilang atau rusak. Minta tautan baru untuk melanjutkan.',
+  'login.resetPasswordFailed': 'Reset gagal. Tautan mungkin sudah kedaluwarsa.',

  // Register
  'register.passwordMismatch': 'Kata sandi tidak cocok',
@@ -458,6 +458,28 @@ const it: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'Accesso OIDC non riuscito',
  'login.usernameRequired': 'Il nome utente è obbligatorio',
  'login.passwordMinLength': 'La password deve contenere almeno 8 caratteri',
+  'login.forgotPassword': 'Password dimenticata?',
+  'login.forgotPasswordTitle': 'Reimposta la password',
+  'login.forgotPasswordBody': 'Inserisci l’indirizzo email del tuo account. Se esiste un account, invieremo un link per reimpostarla.',
+  'login.forgotPasswordSubmit': 'Invia link',
+  'login.forgotPasswordSentTitle': 'Controlla la tua email',
+  'login.forgotPasswordSentBody': 'Se esiste un account con questa email, il link è in arrivo. Scade tra 60 minuti.',
+  'login.forgotPasswordSmtpHintOff': 'Nota: il tuo amministratore non ha configurato SMTP, quindi il link di reset verrà scritto nella console del server invece di essere inviato via email.',
+  'login.backToLogin': 'Torna all’accesso',
+  'login.newPassword': 'Nuova password',
+  'login.confirmPassword': 'Conferma nuova password',
+  'login.passwordsDontMatch': 'Le password non corrispondono',
+  'login.mfaCode': 'Codice 2FA',
+  'login.resetPasswordTitle': 'Imposta una nuova password',
+  'login.resetPasswordBody': 'Scegli una password robusta che non hai già usato qui. Minimo 8 caratteri.',
+  'login.resetPasswordMfaBody': 'Inserisci il codice 2FA o un codice di backup per completare il reset.',
+  'login.resetPasswordSubmit': 'Reimposta password',
+  'login.resetPasswordVerify': 'Verifica e reimposta',
+  'login.resetPasswordSuccessTitle': 'Password aggiornata',
+  'login.resetPasswordSuccessBody': 'Ora puoi accedere con la nuova password.',
+  'login.resetPasswordInvalidLink': 'Link di reset non valido',
+  'login.resetPasswordInvalidLinkBody': 'Il link è mancante o danneggiato. Richiedine uno nuovo per continuare.',
+  'login.resetPasswordFailed': 'Reset non riuscito. Il link potrebbe essere scaduto.',

  // Register
  'register.passwordMismatch': 'Le password non corrispondono',
@@ -451,6 +451,28 @@ const nl: Record<string, string> = {
  'login.oidcFailed': 'OIDC-aanmelding mislukt',
  'login.usernameRequired': 'Gebruikersnaam is vereist',
  'login.passwordMinLength': 'Wachtwoord moet minimaal 8 tekens bevatten',
+  'login.forgotPassword': 'Wachtwoord vergeten?',
+  'login.forgotPasswordTitle': 'Wachtwoord resetten',
+  'login.forgotPasswordBody': 'Voer het e-mailadres van je account in. Als er een account bestaat, sturen we een resetlink.',
+  'login.forgotPasswordSubmit': 'Resetlink verzenden',
+  'login.forgotPasswordSentTitle': 'Controleer je e-mail',
+  'login.forgotPasswordSentBody': 'Als er een account bestaat met dit adres, is de resetlink onderweg. Hij verloopt over 60 minuten.',
+  'login.forgotPasswordSmtpHintOff': 'Let op: de beheerder heeft SMTP niet ingesteld. De resetlink wordt naar de serverconsole geschreven in plaats van via e-mail verzonden.',
+  'login.backToLogin': 'Terug naar inloggen',
+  'login.newPassword': 'Nieuw wachtwoord',
+  'login.confirmPassword': 'Nieuw wachtwoord bevestigen',
+  'login.passwordsDontMatch': 'Wachtwoorden komen niet overeen',
+  'login.mfaCode': '2FA-code',
+  'login.resetPasswordTitle': 'Nieuw wachtwoord instellen',
+  'login.resetPasswordBody': 'Kies een sterk wachtwoord dat je hier nog niet hebt gebruikt. Minimaal 8 tekens.',
+  'login.resetPasswordMfaBody': 'Voer je 2FA-code of een back-upcode in om de reset te voltooien.',
+  'login.resetPasswordSubmit': 'Wachtwoord resetten',
+  'login.resetPasswordVerify': 'Verifiëren en resetten',
+  'login.resetPasswordSuccessTitle': 'Wachtwoord bijgewerkt',
+  'login.resetPasswordSuccessBody': 'Je kunt nu inloggen met je nieuwe wachtwoord.',
+  'login.resetPasswordInvalidLink': 'Ongeldige resetlink',
+  'login.resetPasswordInvalidLinkBody': 'Deze link ontbreekt of is ongeldig. Vraag een nieuwe aan om door te gaan.',
+  'login.resetPasswordFailed': 'Resetten mislukt. De link is mogelijk verlopen.',
  'login.oidc.tokenFailed': 'Authenticatie mislukt.',
  'login.oidc.invalidState': 'Ongeldige sessie. Probeer het opnieuw.',
  'login.demoFailed': 'Demo-login mislukt',
@@ -425,6 +425,28 @@ const pl: Record<string, string | { name: string; category: string }[]> = {
  'login.oidcFailed': 'Logowanie OIDC nie powiodło się',
  'login.usernameRequired': 'Nazwa użytkownika jest wymagana',
  'login.passwordMinLength': 'Hasło musi mieć co najmniej 8 znaków',
+  'login.forgotPassword': 'Nie pamiętasz hasła?',
+  'login.forgotPasswordTitle': 'Zresetuj hasło',
+  'login.forgotPasswordBody': 'Wpisz adres e-mail użyty przy rejestracji. Jeśli konto istnieje, wyślemy link do resetu.',
+  'login.forgotPasswordSubmit': 'Wyślij link',
+  'login.forgotPasswordSentTitle': 'Sprawdź swoją pocztę',
+  'login.forgotPasswordSentBody': 'Jeśli istnieje konto dla tego adresu, link jest już w drodze. Wygaśnie za 60 minut.',
+  'login.forgotPasswordSmtpHintOff': 'Uwaga: administrator nie skonfigurował SMTP, więc link resetujący zostanie zapisany w konsoli serwera zamiast wysłania e-mailem.',
+  'login.backToLogin': 'Wróć do logowania',
+  'login.newPassword': 'Nowe hasło',
+  'login.confirmPassword': 'Potwierdź nowe hasło',
+  'login.passwordsDontMatch': 'Hasła nie są zgodne',
+  'login.mfaCode': 'Kod 2FA',
+  'login.resetPasswordTitle': 'Ustaw nowe hasło',
+  'login.resetPasswordBody': 'Wybierz silne hasło, którego tu jeszcze nie używałeś. Minimum 8 znaków.',
+  'login.resetPasswordMfaBody': 'Wpisz kod 2FA lub kod zapasowy, aby zakończyć reset.',
+  'login.resetPasswordSubmit': 'Zresetuj hasło',
+  'login.resetPasswordVerify': 'Zweryfikuj i zresetuj',
+  'login.resetPasswordSuccessTitle': 'Hasło zaktualizowane',
+  'login.resetPasswordSuccessBody': 'Możesz się teraz zalogować nowym hasłem.',
+  'login.resetPasswordInvalidLink': 'Nieprawidłowy link',
+  'login.resetPasswordInvalidLinkBody': 'Brakuje linku lub jest uszkodzony. Poproś o nowy, aby kontynuować.',
+  'login.resetPasswordFailed': 'Reset nie powiódł się. Link mógł wygasnąć.',

  // Register
  'register.passwordMismatch': 'Hasła nie są identyczne',
@@ -451,6 +451,28 @@ const ru: Record<string, string> = {
  'login.oidcFailed': 'Ошибка входа через OIDC',
  'login.usernameRequired': 'Имя пользователя обязательно',
  'login.passwordMinLength': 'Пароль должен содержать не менее 8 символов',
+  'login.forgotPassword': 'Забыли пароль?',
+  'login.forgotPasswordTitle': 'Сброс пароля',
+  'login.forgotPasswordBody': 'Введите e-mail, с которым вы регистрировались. Если аккаунт найдём — отправим ссылку для сброса.',
+  'login.forgotPasswordSubmit': 'Отправить ссылку',
+  'login.forgotPasswordSentTitle': 'Проверьте почту',
+  'login.forgotPasswordSentBody': 'Если аккаунт существует, ссылка для сброса уже летит к вам. Она действительна 60 минут.',
+  'login.forgotPasswordSmtpHintOff': 'Обратите внимание: администратор не настроил SMTP, поэтому ссылка для сброса будет записана в консоль сервера, а не отправлена по почте.',
+  'login.backToLogin': 'Вернуться ко входу',
+  'login.newPassword': 'Новый пароль',
+  'login.confirmPassword': 'Подтвердите новый пароль',
+  'login.passwordsDontMatch': 'Пароли не совпадают',
+  'login.mfaCode': 'Код 2FA',
+  'login.resetPasswordTitle': 'Задайте новый пароль',
+  'login.resetPasswordBody': 'Выберите надёжный пароль, который вы здесь ещё не использовали. Минимум 8 символов.',
+  'login.resetPasswordMfaBody': 'Введите код 2FA или резервный код, чтобы завершить сброс.',
+  'login.resetPasswordSubmit': 'Сбросить пароль',
+  'login.resetPasswordVerify': 'Проверить и сбросить',
+  'login.resetPasswordSuccessTitle': 'Пароль обновлён',
+  'login.resetPasswordSuccessBody': 'Теперь вы можете войти с новым паролем.',
+  'login.resetPasswordInvalidLink': 'Неверная ссылка сброса',
+  'login.resetPasswordInvalidLinkBody': 'Ссылка отсутствует или повреждена. Запросите новую, чтобы продолжить.',
+  'login.resetPasswordFailed': 'Сброс не удался. Возможно, срок действия ссылки истёк.',
  'login.oidc.tokenFailed': 'Аутентификация не удалась.',
  'login.oidc.invalidState': 'Недействительная сессия. Попробуйте снова.',
  'login.demoFailed': 'Ошибка демо-входа',
@@ -451,6 +451,28 @@ const zh: Record<string, string> = {
  'login.oidcFailed': 'OIDC 登录失败',
  'login.usernameRequired': '用户名为必填项',
  'login.passwordMinLength': '密码至少需要8个字符',
+  'login.forgotPassword': '忘记密码？',
+  'login.forgotPasswordTitle': '重置密码',
+  'login.forgotPasswordBody': '输入您注册时使用的邮箱地址。若账户存在，我们将发送重置链接。',
+  'login.forgotPasswordSubmit': '发送重置链接',
+  'login.forgotPasswordSentTitle': '请查看邮箱',
+  'login.forgotPasswordSentBody': '若该邮箱存在账户，重置链接正在发送中。链接将在 60 分钟后失效。',
+  'login.forgotPasswordSmtpHintOff': '提示：管理员未配置 SMTP，重置链接将被写入服务器控制台，而不是通过电子邮件发送。',
+  'login.backToLogin': '返回登录',
+  'login.newPassword': '新密码',
+  'login.confirmPassword': '确认新密码',
+  'login.passwordsDontMatch': '两次输入的密码不一致',
+  'login.mfaCode': '二步验证码',
+  'login.resetPasswordTitle': '设置新密码',
+  'login.resetPasswordBody': '请选择您在此处未使用过的强密码。至少 8 位。',
+  'login.resetPasswordMfaBody': '输入您的二步验证码或备用代码以完成重置。',
+  'login.resetPasswordSubmit': '重置密码',
+  'login.resetPasswordVerify': '验证并重置',
+  'login.resetPasswordSuccessTitle': '密码已更新',
+  'login.resetPasswordSuccessBody': '您现在可以使用新密码登录了。',
+  'login.resetPasswordInvalidLink': '无效的重置链接',
+  'login.resetPasswordInvalidLinkBody': '此链接已丢失或损坏。请重新申请以继续。',
+  'login.resetPasswordFailed': '重置失败。链接可能已过期。',
  'login.oidc.tokenFailed': '认证失败。',
  'login.oidc.invalidState': '会话无效，请重试。',
  'login.demoFailed': '演示登录失败',
@@ -510,6 +510,28 @@ const zhTw: Record<string, string> = {
  'login.oidcFailed': 'OIDC 登入失敗',
  'login.usernameRequired': '使用者名稱為必填',
  'login.passwordMinLength': '密碼至少需要8個字元',
+  'login.forgotPassword': '忘記密碼？',
+  'login.forgotPasswordTitle': '重設密碼',
+  'login.forgotPasswordBody': '請輸入您註冊時使用的電子郵件。若帳號存在，我們將傳送重設連結。',
+  'login.forgotPasswordSubmit': '傳送重設連結',
+  'login.forgotPasswordSentTitle': '請查看您的電子郵件',
+  'login.forgotPasswordSentBody': '若此電子郵件存在帳號，重設連結正在傳送中。連結將於 60 分鐘後失效。',
+  'login.forgotPasswordSmtpHintOff': '提醒：管理員尚未設定 SMTP，重設連結將寫入伺服器控制台，而非透過電子郵件寄送。',
+  'login.backToLogin': '返回登入',
+  'login.newPassword': '新密碼',
+  'login.confirmPassword': '確認新密碼',
+  'login.passwordsDontMatch': '兩次輸入的密碼不一致',
+  'login.mfaCode': '2FA 驗證碼',
+  'login.resetPasswordTitle': '設定新密碼',
+  'login.resetPasswordBody': '請選擇您在此處尚未使用過的強密碼。至少 8 個字元。',
+  'login.resetPasswordMfaBody': '請輸入您的 2FA 驗證碼或備用代碼以完成重設。',
+  'login.resetPasswordSubmit': '重設密碼',
+  'login.resetPasswordVerify': '驗證並重設',
+  'login.resetPasswordSuccessTitle': '密碼已更新',
+  'login.resetPasswordSuccessBody': '您現在可以使用新密碼登入。',
+  'login.resetPasswordInvalidLink': '無效的重設連結',
+  'login.resetPasswordInvalidLinkBody': '此連結遺失或已損壞。請重新申請以繼續。',
+  'login.resetPasswordFailed': '重設失敗。連結可能已過期。',
  'login.oidc.tokenFailed': '認證失敗。',
  'login.oidc.invalidState': '會話無效，請重試。',
  'login.demoFailed': '演示登入失敗',
@@ -0,0 +1,151 @@
+import React, { useState, useEffect, FormEvent, ChangeEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Mail, ArrowLeft, CheckCircle2, Terminal } from 'lucide-react'
+import { useTranslation } from '../i18n'
+import { authApi } from '../api/client'
+
+const inputBase: React.CSSProperties = {
+  width: '100%', padding: '11px 12px 11px 38px', borderRadius: 12,
+  border: '1px solid #e5e7eb', fontSize: 14, fontFamily: 'inherit',
+  outline: 'none', transition: 'border-color 120ms',
+  background: 'white', color: '#111827',
+}
+
+const ForgotPasswordPage: React.FC = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [email, setEmail] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [smtpConfigured, setSmtpConfigured] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    // Probe whether SMTP is configured so we can warn the user up-front
+    // that the link will land in the server console instead of their
+    // inbox. Null while pending — hint is hidden until we know.
+    authApi.getAppConfig?.()
+      .then((cfg: any) => {
+        const hasEmail = !!cfg?.available_channels?.email
+        setSmtpConfigured(hasEmail)
+      })
+      .catch(() => setSmtpConfigured(null))
+  }, [])
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (isLoading) return
+    setIsLoading(true)
+    try {
+      await authApi.forgotPassword({ email: email.trim() })
+    } catch {
+      // Enumeration-safe: success UX regardless of server outcome.
+    }
+    setSubmitted(true)
+    setIsLoading(false)
+  }
+
+  return (
+    <div style={{
+      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
+      background: 'linear-gradient(180deg, #f9fafb, #ffffff)', padding: 24, fontFamily: 'inherit',
+    }}>
+      <div style={{
+        width: '100%', maxWidth: 420, background: 'white', borderRadius: 20,
+        boxShadow: '0 12px 40px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04)',
+        padding: '32px 28px',
+      }}>
+        <button type="button" onClick={() => navigate('/login')} style={{
+          display: 'flex', alignItems: 'center', gap: 6,
+          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
+          color: '#6b7280', fontSize: 13, fontFamily: 'inherit', marginBottom: 22,
+        }}>
+          <ArrowLeft size={14} />{t('login.backToLogin')}
+        </button>
+
+        {submitted ? (
+          <div style={{ textAlign: 'center', padding: '12px 0' }}>
+            <div style={{
+              width: 56, height: 56, borderRadius: '50%', background: '#ecfdf5',
+              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+              color: '#059669', marginBottom: 16,
+            }}>
+              <CheckCircle2 size={28} />
+            </div>
+            <h1 style={{ fontSize: 22, fontWeight: 700, color: '#111827', margin: '0 0 10px 0' }}>
+              {t('login.forgotPasswordSentTitle')}
+            </h1>
+            <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.55, margin: 0 }}>
+              {t('login.forgotPasswordSentBody')}
+            </p>
+            {smtpConfigured === false && (
+              <div style={{
+                marginTop: 18, padding: '12px 14px',
+                background: '#fffbeb', border: '1px solid #fde68a',
+                borderRadius: 10, textAlign: 'left',
+                display: 'flex', alignItems: 'flex-start', gap: 10,
+              }}>
+                <Terminal size={16} style={{ color: '#92400e', marginTop: 1, flexShrink: 0 }} />
+                <p style={{ fontSize: 12.5, color: '#92400e', lineHeight: 1.55, margin: 0 }}>
+                  {t('login.forgotPasswordSmtpHintOff')}
+                </p>
+              </div>
+            )}
+            <button type="button" onClick={() => navigate('/login')} style={{
+              marginTop: 24, padding: '11px 22px', background: '#111827', color: 'white',
+              border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 700,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}>{t('login.backToLogin')}</button>
+          </div>
+        ) : (
+          <>
+            <h1 style={{ fontSize: 22, fontWeight: 700, color: '#111827', margin: '0 0 8px 0' }}>
+              {t('login.forgotPasswordTitle')}
+            </h1>
+            <p style={{ fontSize: 13.5, color: '#6b7280', lineHeight: 1.55, margin: '0 0 16px 0' }}>
+              {t('login.forgotPasswordBody')}
+            </p>
+            {smtpConfigured === false && (
+              <div style={{
+                padding: '10px 12px', marginBottom: 18,
+                background: '#fffbeb', border: '1px solid #fde68a',
+                borderRadius: 10, display: 'flex', alignItems: 'flex-start', gap: 10,
+              }}>
+                <Terminal size={15} style={{ color: '#92400e', marginTop: 1, flexShrink: 0 }} />
+                <p style={{ fontSize: 12.5, color: '#92400e', lineHeight: 1.5, margin: 0 }}>
+                  {t('login.forgotPasswordSmtpHintOff')}
+                </p>
+              </div>
+            )}
+            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+              <div>
+                <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>
+                  {t('common.email')}
+                </label>
+                <div style={{ position: 'relative' }}>
+                  <Mail size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                  <input
+                    type="email" value={email}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+                    required placeholder={t('login.emailPlaceholder')} style={inputBase}
+                    onFocus={(e) => { e.currentTarget.style.borderColor = '#111827' }}
+                    onBlur={(e) => { e.currentTarget.style.borderColor = '#e5e7eb' }}
+                  />
+                </div>
+              </div>
+              <button type="submit" disabled={isLoading} style={{
+                width: '100%', padding: '12px', background: '#111827', color: 'white',
+                border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 700,
+                cursor: isLoading ? 'default' : 'pointer', fontFamily: 'inherit',
+                opacity: isLoading ? 0.7 : 1, transition: 'opacity 0.15s',
+              }}>
+                {isLoading ? t('login.signingIn') : t('login.forgotPasswordSubmit')}
+              </button>
+            </form>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ForgotPasswordPage
@@ -781,6 +781,17 @@ export default function LoginPage(): React.ReactElement {
                    }} />
                  </button>
                </div>
+                {mode === 'login' && (
+                  <div style={{ textAlign: 'right', marginTop: 6 }}>
+                    <button type="button" onClick={() => navigate('/forgot-password')} style={{
+                      background: 'none', border: 'none', cursor: 'pointer', padding: 0,
+                      color: '#6b7280', fontSize: 12.5, fontWeight: 500, fontFamily: 'inherit',
+                    }}
+                      onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.color = '#111827' }}
+                      onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.color = '#6b7280' }}
+                    >{t('login.forgotPassword')}</button>
+                  </div>
+                )}
              </div>
              )}

@@ -0,0 +1,205 @@
+import React, { useState, useEffect, FormEvent, ChangeEvent } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { Lock, KeyRound, CheckCircle2, AlertTriangle, Eye, EyeOff } from 'lucide-react'
+import { useTranslation } from '../i18n'
+import { authApi } from '../api/client'
+import { getApiErrorMessage } from '../types'
+
+const inputBase: React.CSSProperties = {
+  width: '100%', padding: '11px 44px 11px 38px', borderRadius: 12,
+  border: '1px solid #e5e7eb', fontSize: 14, fontFamily: 'inherit',
+  outline: 'none', transition: 'border-color 120ms',
+  background: 'white', color: '#111827',
+}
+
+const ResetPasswordPage: React.FC = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const [params] = useSearchParams()
+  const token = params.get('token') || ''
+
+  const [pw, setPw] = useState('')
+  const [pw2, setPw2] = useState('')
+  const [showPw, setShowPw] = useState(false)
+  const [mfaCode, setMfaCode] = useState('')
+  const [mfaRequired, setMfaRequired] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (!token) setError(t('login.resetPasswordInvalidLink'))
+  }, [token, t])
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (isLoading) return
+    setError('')
+    if (!token) return
+    if (pw.length < 8) { setError(t('login.passwordMinLength')); return }
+    if (pw !== pw2) { setError(t('login.passwordsDontMatch')); return }
+    setIsLoading(true)
+    try {
+      const res = await authApi.resetPassword({
+        token,
+        new_password: pw,
+        ...(mfaRequired && mfaCode ? { mfa_code: mfaCode.trim() } : {}),
+      })
+      if (res.mfa_required) {
+        setMfaRequired(true)
+        setIsLoading(false)
+        return
+      }
+      if (res.success) {
+        setSuccess(true)
+      }
+    } catch (err) {
+      setError(getApiErrorMessage(err, t('login.resetPasswordFailed')))
+    }
+    setIsLoading(false)
+  }
+
+  const shell = (inner: React.ReactNode) => (
+    <div style={{
+      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
+      background: 'linear-gradient(180deg, #f9fafb, #ffffff)', padding: 24, fontFamily: 'inherit',
+    }}>
+      <div style={{
+        width: '100%', maxWidth: 440, background: 'white', borderRadius: 20,
+        boxShadow: '0 12px 40px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04)',
+        padding: '32px 28px',
+      }}>{inner}</div>
+    </div>
+  )
+
+  if (success) {
+    return shell(
+      <div style={{ textAlign: 'center', padding: '12px 0' }}>
+        <div style={{
+          width: 56, height: 56, borderRadius: '50%', background: '#ecfdf5',
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          color: '#059669', marginBottom: 16,
+        }}><CheckCircle2 size={28} /></div>
+        <h1 style={{ fontSize: 22, fontWeight: 700, color: '#111827', margin: '0 0 10px 0' }}>
+          {t('login.resetPasswordSuccessTitle')}
+        </h1>
+        <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.55, margin: 0 }}>
+          {t('login.resetPasswordSuccessBody')}
+        </p>
+        <button type="button" onClick={() => navigate('/login')} style={{
+          marginTop: 24, padding: '11px 22px', background: '#111827', color: 'white',
+          border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 700,
+          cursor: 'pointer', fontFamily: 'inherit',
+        }}>{t('login.signIn')}</button>
+      </div>
+    )
+  }
+
+  if (!token) {
+    return shell(
+      <div style={{ textAlign: 'center', padding: '12px 0' }}>
+        <div style={{
+          width: 56, height: 56, borderRadius: '50%', background: '#fef2f2',
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          color: '#dc2626', marginBottom: 16,
+        }}><AlertTriangle size={28} /></div>
+        <h1 style={{ fontSize: 22, fontWeight: 700, color: '#111827', margin: '0 0 10px 0' }}>
+          {t('login.resetPasswordInvalidLink')}
+        </h1>
+        <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.55, margin: 0 }}>
+          {t('login.resetPasswordInvalidLinkBody')}
+        </p>
+        <button type="button" onClick={() => navigate('/forgot-password')} style={{
+          marginTop: 24, padding: '11px 22px', background: '#111827', color: 'white',
+          border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 700,
+          cursor: 'pointer', fontFamily: 'inherit',
+        }}>{t('login.forgotPasswordSubmit')}</button>
+      </div>
+    )
+  }
+
+  return shell(
+    <>
+      <h1 style={{ fontSize: 22, fontWeight: 700, color: '#111827', margin: '0 0 8px 0' }}>
+        {t('login.resetPasswordTitle')}
+      </h1>
+      <p style={{ fontSize: 13.5, color: '#6b7280', lineHeight: 1.55, margin: '0 0 22px 0' }}>
+        {mfaRequired ? t('login.resetPasswordMfaBody') : t('login.resetPasswordBody')}
+      </p>
+      {error && (
+        <div style={{
+          padding: '10px 12px', background: '#fef2f2', border: '1px solid #fecaca',
+          borderRadius: 10, color: '#991b1b', fontSize: 13, marginBottom: 14,
+        }}>{error}</div>
+      )}
+      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {!mfaRequired && (
+          <>
+            <div>
+              <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>
+                {t('login.newPassword')}
+              </label>
+              <div style={{ position: 'relative' }}>
+                <Lock size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                <input
+                  type={showPw ? 'text' : 'password'} value={pw}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => setPw(e.target.value)}
+                  required placeholder="••••••••" style={inputBase}
+                  onFocus={(e) => { e.currentTarget.style.borderColor = '#111827' }}
+                  onBlur={(e) => { e.currentTarget.style.borderColor = '#e5e7eb' }}
+                />
+                <button type="button" onClick={() => setShowPw(v => !v)} style={{
+                  position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)',
+                  background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#9ca3af',
+                }}>{showPw ? <EyeOff size={16} /> : <Eye size={16} />}</button>
+              </div>
+            </div>
+            <div>
+              <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>
+                {t('login.confirmPassword')}
+              </label>
+              <div style={{ position: 'relative' }}>
+                <Lock size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+                <input
+                  type={showPw ? 'text' : 'password'} value={pw2}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => setPw2(e.target.value)}
+                  required placeholder="••••••••" style={inputBase}
+                  onFocus={(e) => { e.currentTarget.style.borderColor = '#111827' }}
+                  onBlur={(e) => { e.currentTarget.style.borderColor = '#e5e7eb' }}
+                />
+              </div>
+            </div>
+          </>
+        )}
+        {mfaRequired && (
+          <div>
+            <label style={{ display: 'block', fontSize: 12.5, fontWeight: 600, color: '#374151', marginBottom: 6 }}>
+              {t('login.mfaCode')}
+            </label>
+            <div style={{ position: 'relative' }}>
+              <KeyRound size={15} style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', pointerEvents: 'none' }} />
+              <input
+                type="text" inputMode="numeric" value={mfaCode}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setMfaCode(e.target.value)}
+                required placeholder="123456 or backup-code" style={{ ...inputBase, paddingRight: 12 }}
+                autoFocus
+                onFocus={(e) => { e.currentTarget.style.borderColor = '#111827' }}
+                onBlur={(e) => { e.currentTarget.style.borderColor = '#e5e7eb' }}
+              />
+            </div>
+          </div>
+        )}
+        <button type="submit" disabled={isLoading} style={{
+          width: '100%', padding: '12px', background: '#111827', color: 'white',
+          border: 'none', borderRadius: 12, fontSize: 14, fontWeight: 700,
+          cursor: isLoading ? 'default' : 'pointer', fontFamily: 'inherit',
+          opacity: isLoading ? 0.7 : 1,
+        }}>
+          {isLoading ? '…' : (mfaRequired ? t('login.resetPasswordVerify') : t('login.resetPasswordSubmit'))}
+        </button>
+      </form>
+    </>
+  )
+}
+
+export default ResetPasswordPage