71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { AuthCard, AuthFooterLink } from "@/components/auth/auth-card";
|
|
import { auth, AuthError } from "@/lib/auth";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
export default function ForgotPasswordPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
async function onSubmit(e: React.SyntheticEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setSubmitting(true);
|
|
try {
|
|
await auth.forgotPassword(email);
|
|
setSubmitted(true);
|
|
} catch (err) {
|
|
setError(err instanceof AuthError ? err.message : "Something went wrong.");
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
if (submitted) {
|
|
return (
|
|
<AuthCard
|
|
title="Check your inbox"
|
|
description="If an account exists for that email, we've sent a reset link. It will expire in 1 hour."
|
|
footer={<AuthFooterLink prefix="Back to" href="/login" label="log in" />}
|
|
>
|
|
<p className="text-sm text-muted-foreground">
|
|
Didn't get an email? Check your spam folder or try again in a minute.
|
|
</p>
|
|
</AuthCard>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AuthCard
|
|
title="Reset your password"
|
|
description="Enter your email and we'll send you a reset link."
|
|
footer={<AuthFooterLink prefix="Remembered it?" href="/login" label="Log in" />}
|
|
>
|
|
<form onSubmit={onSubmit} className="space-y-6">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
</div>
|
|
<br />
|
|
{error ? <p className="text-sm text-destructive">{error}</p> : null}
|
|
<Button type="submit" disabled={submitting} className="w-full h-11 text-base">
|
|
{submitting ? "Sending…" : "Send reset link"}
|
|
</Button>
|
|
</form>
|
|
</AuthCard>
|
|
);
|
|
}
|