115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { Link } from "@/i18n/navigation";
|
|
import { ApiError, forgotPassword } from "@/lib/api/auth";
|
|
import { createForgotPasswordSchema, type ForgotPasswordFormValues } from "@/lib/schemas/auth";
|
|
|
|
const inputClassName =
|
|
"flex h-10 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100";
|
|
|
|
export function ForgotPasswordForm() {
|
|
const t = useTranslations("auth");
|
|
const tv = useTranslations("validation");
|
|
const [apiError, setApiError] = useState<string | null>(null);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const schema = createForgotPasswordSchema({
|
|
emailRequired: tv("emailRequired"),
|
|
emailInvalid: tv("emailInvalid"),
|
|
});
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
} = useForm<ForgotPasswordFormValues>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: { email: "" },
|
|
});
|
|
|
|
async function onSubmit(values: ForgotPasswordFormValues) {
|
|
setApiError(null);
|
|
|
|
try {
|
|
await forgotPassword(values.email);
|
|
setSubmitted(true);
|
|
} catch (error) {
|
|
if (error instanceof ApiError) {
|
|
setApiError(error.detail ?? error.title);
|
|
} else {
|
|
setApiError(t("errors.generic"));
|
|
}
|
|
}
|
|
}
|
|
|
|
if (submitted) {
|
|
return (
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader>
|
|
<CardTitle>{t("forgotPasswordTitle")}</CardTitle>
|
|
<CardDescription>{t("forgotPasswordSent")}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Link href="/login" className="text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
|
|
{t("backToLogin")}
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader>
|
|
<CardTitle>{t("forgotPasswordTitle")}</CardTitle>
|
|
<CardDescription>{t("forgotPasswordSubtitle")}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
|
|
<div className="space-y-2">
|
|
<label htmlFor="email" className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
|
{t("email")}
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
placeholder={t("emailPlaceholder")}
|
|
aria-invalid={errors.email ? "true" : "false"}
|
|
aria-describedby={errors.email ? "email-error" : undefined}
|
|
className={inputClassName}
|
|
{...register("email")}
|
|
/>
|
|
{errors.email ? (
|
|
<p id="email-error" className="text-sm text-red-600" role="alert">
|
|
{errors.email.message}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
|
|
{apiError ? (
|
|
<p className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100" role="alert">
|
|
{apiError}
|
|
</p>
|
|
) : null}
|
|
|
|
<Button type="submit" className="w-full" isLoading={isSubmitting}>
|
|
{t("forgotPasswordSubmit")}
|
|
</Button>
|
|
</form>
|
|
|
|
<p className="mt-4 text-center text-sm text-zinc-600 dark:text-zinc-400">
|
|
<Link href="/login" className="font-medium text-sky-600 hover:underline dark:text-sky-400">
|
|
{t("backToLogin")}
|
|
</Link>
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|