Magent/frontend/app/reset-password/page.tsx

'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>
  )
}