Hotfix: add logged-out password reset flow

frontend/app/forgot-password/page.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import BrandingLogo from '../ui/BrandingLogo'
+import { getApiBase } from '../lib/auth'
+
+export default function ForgotPasswordPage() {
+  const router = useRouter()
+  const [identifier, setIdentifier] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [status, setStatus] = useState<string | null>(null)
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (!identifier.trim()) {
+      setError('Enter your username or email.')
+      return
+    }
+    setLoading(true)
+    setError(null)
+    setStatus(null)
+    try {
+      const baseUrl = getApiBase()
+      const response = await fetch(`${baseUrl}/auth/password/forgot`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ identifier: identifier.trim() }),
+      })
+      const data = await response.json().catch(() => null)
+      if (!response.ok) {
+        throw new Error(typeof data?.detail === 'string' ? data.detail : 'Unable to send reset link.')
+      }
+      setStatus(
+        typeof data?.message === 'string'
+          ? data.message
+          : 'If an account exists for that username or email, a password reset link has been sent.',
+      )
+    } catch (err) {
+      console.error(err)
+      setError(err instanceof Error ? err.message : 'Unable to send reset link.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <main className="card auth-card">
+      <BrandingLogo className="brand-logo brand-logo--login" />
+      <h1>Forgot password</h1>
+      <p className="lede">
+        Enter the username or email you use for Jellyfin or Magent. If the account is eligible, a reset link
+        will be emailed to you.
+      </p>
+      <form className="auth-form" onSubmit={submit}>
+        <label>
+          Username or email
+          <input
+            value={identifier}
+            onChange={(event) => setIdentifier(event.target.value)}
+            autoComplete="username"
+            placeholder="you@example.com"
+          />
+        </label>
+        {error && <div className="error-banner">{error}</div>}
+        {status && <div className="status-banner">{status}</div>}
+        <div className="auth-actions">
+          <button type="submit" disabled={loading}>
+            {loading ? 'Sending reset link…' : 'Send reset link'}
+          </button>
+        </div>
+        <button type="button" className="ghost-button" onClick={() => router.push('/login')} disabled={loading}>
+          Back to sign in
+        </button>
+      </form>
+    </main>
+  )
+}

frontend/app/login/page.tsx

@@ -85,6 +85,9 @@ export default function LoginPage() {
         >
           Sign in with Magent account
         </button>
+        <a className="ghost-button" href="/forgot-password">
+          Forgot password?
+        </a>
         <a className="ghost-button" href="/signup">
           Have an invite? Create your account (Jellyfin + Magent)
         </a>

frontend/app/reset-password/page.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import BrandingLogo from '../ui/BrandingLogo'
+import { getApiBase } from '../lib/auth'
+
+type ResetVerification = {
+  status: string
+  recipient_hint?: string
+  auth_provider?: string
+  expires_at?: string
+}
+
+function ResetPasswordPageContent() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token') ?? ''
+  const [verification, setVerification] = useState<ResetVerification | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [verifying, setVerifying] = useState(true)
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [status, setStatus] = useState<string | null>(null)
+
+  useEffect(() => {
+    const verifyToken = async () => {
+      if (!token) {
+        setError('Password reset link is invalid or missing.')
+        setVerifying(false)
+        return
+      }
+      setVerifying(true)
+      setError(null)
+      setStatus(null)
+      try {
+        const baseUrl = getApiBase()
+        const response = await fetch(
+          `${baseUrl}/auth/password/reset/verify?token=${encodeURIComponent(token)}`,
+        )
+        const data = await response.json().catch(() => null)
+        if (!response.ok) {
+          throw new Error(typeof data?.detail === 'string' ? data.detail : 'Password reset link is invalid.')
+        }
+        setVerification(data)
+      } catch (err) {
+        console.error(err)
+        setVerification(null)
+        setError(err instanceof Error ? err.message : 'Password reset link is invalid.')
+      } finally {
+        setVerifying(false)
+      }
+    }
+
+    void verifyToken()
+  }, [token])
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (!token) {
+      setError('Password reset link is invalid or missing.')
+      return
+    }
+    if (password.trim().length < 8) {
+      setError('Password must be at least 8 characters.')
+      return
+    }
+    if (password !== confirmPassword) {
+      setError('Passwords do not match.')
+      return
+    }
+    setLoading(true)
+    setError(null)
+    setStatus(null)
+    try {
+      const baseUrl = getApiBase()
+      const response = await fetch(`${baseUrl}/auth/password/reset`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, new_password: password }),
+      })
+      const data = await response.json().catch(() => null)
+      if (!response.ok) {
+        throw new Error(typeof data?.detail === 'string' ? data.detail : 'Unable to reset password.')
+      }
+      setStatus('Password updated. You can now sign in with the new password.')
+      setPassword('')
+      setConfirmPassword('')
+      window.setTimeout(() => router.push('/login'), 1200)
+    } catch (err) {
+      console.error(err)
+      setError(err instanceof Error ? err.message : 'Unable to reset password.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const providerLabel =
+    verification?.auth_provider === 'jellyfin' ? 'Jellyfin, Seerr, and Magent' : 'Magent'
+
+  return (
+    <main className="card auth-card">
+      <BrandingLogo className="brand-logo brand-logo--login" />
+      <h1>Reset password</h1>
+      <p className="lede">Choose a new password for your account.</p>
+      <form className="auth-form" onSubmit={submit}>
+        {verifying && <div className="status-banner">Checking password reset link…</div>}
+        {!verifying && verification && (
+          <div className="status-banner">
+            This reset link was sent to {verification.recipient_hint || 'your email'} and will update the password
+            used for {providerLabel}.
+          </div>
+        )}
+        <label>
+          New password
+          <input
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            autoComplete="new-password"
+            disabled={!verification || loading}
+          />
+        </label>
+        <label>
+          Confirm new password
+          <input
+            type="password"
+            value={confirmPassword}
+            onChange={(event) => setConfirmPassword(event.target.value)}
+            autoComplete="new-password"
+            disabled={!verification || loading}
+          />
+        </label>
+        {error && <div className="error-banner">{error}</div>}
+        {status && <div className="status-banner">{status}</div>}
+        <div className="auth-actions">
+          <button type="submit" disabled={loading || verifying || !verification}>
+            {loading ? 'Updating password…' : 'Reset password'}
+          </button>
+        </div>
+        <button type="button" className="ghost-button" onClick={() => router.push('/login')} disabled={loading}>
+          Back to sign in
+        </button>
+      </form>
+    </main>
+  )
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<main className="card auth-card">Loading password reset…</main>}>
+      <ResetPasswordPageContent />
+    </Suspense>
+  )
+}

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "magent-frontend",
-  "version": "0203261953",
+  "version": "0203262044",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "magent-frontend",
-      "version": "0203261953",
+      "version": "0203262044",
       "dependencies": {
         "next": "16.1.6",
         "react": "19.2.4",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "magent-frontend",
   "private": true,
-  "version": "0203261953",
+  "version": "0203262044",
   "scripts": {
     "dev": "next dev",
     "build": "next build",