74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import AuthLayout from '../ui/AuthLayout'
|
|
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 (
|
|
<AuthLayout title="Forgot password?" description="Enter your username or email to request a reset link.">
|
|
<form className="account-form login-form auth-flow-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="account-notice is-error" role="alert">{error}</div>}
|
|
{status && <div className="account-notice is-status" role="status">{status}</div>}
|
|
<div className="auth-actions">
|
|
<button type="submit" className="account-primary" 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>
|
|
</AuthLayout>
|
|
)
|
|
}
|