48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import Link from 'next/link';
|
|
import { requestPasswordReset } from '../actions';
|
|
|
|
export default function ForgotPasswordPage({ searchParams }: { searchParams: { sent?: string } }) {
|
|
const sent = searchParams.sent === '1';
|
|
|
|
return (
|
|
<div className="mx-auto max-w-md px-6 py-16">
|
|
<h1 className="font-display text-3xl">Reset your password</h1>
|
|
|
|
{sent ? (
|
|
<p className="mt-6 border border-line bg-surface px-4 py-3 text-sm">
|
|
If that email has an account, we've sent a link to reset the password. It expires in 1 hour.
|
|
</p>
|
|
) : (
|
|
<>
|
|
<p className="mt-2 text-sm text-muted">
|
|
Enter your email and we'll send you a link to reset your password.
|
|
</p>
|
|
<form action={requestPasswordReset} className="mt-8 space-y-6">
|
|
<div>
|
|
<label htmlFor="email" className="tag-label mb-2 block">
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
className="w-full border border-line px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
<button type="submit" className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
|
|
Send reset link
|
|
</button>
|
|
</form>
|
|
</>
|
|
)}
|
|
|
|
<p className="mt-6 text-sm">
|
|
<Link href="/account/login" className="text-clay hover:text-clay-dark">
|
|
Back to log in
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|