99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { MailCheck, Send } from 'lucide-react';
|
|
import { Suspense } from 'react';
|
|
|
|
import { FormField } from '@/components/form';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { GuestGuard } from '@/guards';
|
|
import { useForgotPasswordForm } from '@/hooks/useForgotPasswordForm';
|
|
import { ROUTES } from '@/utils/routes';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
function ForgotPasswordContent() {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
errors,
|
|
isLoading,
|
|
isSubmitted,
|
|
isFormSubmitted,
|
|
canSubmit,
|
|
displayInfo,
|
|
} = useForgotPasswordForm();
|
|
|
|
return (
|
|
<GuestGuard>
|
|
<div className="flex min-h-screen w-full">
|
|
<div className="hidden w-[40%] md:flex" />
|
|
<div className="flex h-screen flex-1 items-center justify-center border-l border-border p-6 md:w-[60%]">
|
|
<section className="w-full max-w-sm space-y-7">
|
|
<header className="space-y-2 text-center md:text-left">
|
|
<p className="text-muted-foreground">RoadMonitor</p>
|
|
<h1>{displayInfo.title}</h1>
|
|
<p className="text-muted-foreground">{displayInfo.description}</p>
|
|
</header>
|
|
|
|
{!isSubmitted ? (
|
|
<form className="space-y-5" onSubmit={handleSubmit}>
|
|
<FormField
|
|
id="email"
|
|
label="Email"
|
|
required
|
|
error={isFormSubmitted ? errors.email?.message : undefined}
|
|
>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="name@example.com"
|
|
autoComplete="email"
|
|
disabled={isLoading}
|
|
aria-invalid={!!errors.email}
|
|
{...register('email')}
|
|
/>
|
|
</FormField>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={isLoading || !canSubmit}
|
|
>
|
|
{isLoading ? (
|
|
<Loader2 className="size-4 animate-spin" />
|
|
) : (
|
|
<Send />
|
|
)}
|
|
{displayInfo.buttonLabel}
|
|
</Button>
|
|
|
|
<div className="text-center">
|
|
<Link className="text-primary" href={ROUTES.LOGIN}>
|
|
Back to Login
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
) : (
|
|
<Button asChild className="w-full">
|
|
<Link href={ROUTES.LOGIN}>
|
|
<MailCheck />
|
|
{displayInfo.buttonLabel}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</GuestGuard>
|
|
);
|
|
}
|
|
|
|
export default function ForgotPasswordPage() {
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<ForgotPasswordContent />
|
|
</Suspense>
|
|
);
|
|
}
|