Feat/forgot password page

frontend/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import { forgotPassword } from '../../../lib/api/auth.api';
+import { Button } from '../../../components/ui/button';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../../../components/ui/card';
+
+const forgotPasswordSchema = z.object({
+  email: z.string().email('Invalid email address'),
+});
+
+type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
+
+export default function ForgotPasswordPage() {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<ForgotPasswordFormData>({
+    resolver: zodResolver(forgotPasswordSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  const onSubmit = async (data: ForgotPasswordFormData) => {
+    try {
+      await forgotPassword(data.email);
+    } catch {
+      // Intentionally ignore error details to prevent account enumeration.
+    } finally {
+      setIsSubmitted(true);
+    }
+  };
+
+  if (isSubmitted) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Check your inbox</CardTitle>
+          <CardDescription>
+            If an account exists for that email, we&apos;ve sent password reset instructions.
+          </CardDescription>
+        </CardHeader>
+        <CardFooter className="flex flex-col gap-4">
+          <Button
+            type="button"
+            className="w-full"
+            onClick={() => {
+              reset({ email: '' });
+              setIsSubmitted(false);
+            }}
+          >
+            Try again
+          </Button>
+          <p className="text-sm text-muted-foreground text-center">
+            <Link href="/login" className="text-primary underline underline-offset-4">
+              Back to sign in
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">Forgot password</CardTitle>
+        <CardDescription>
+          Enter your email address and we&apos;ll send password reset instructions.
+        </CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              autoComplete="email"
+              {...register('email')}
+            />
+            {errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
+          </div>
+        </CardContent>
+        <CardFooter className="flex flex-col gap-4">
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? 'Sending…' : 'Send reset link'}
+          </Button>
+          <p className="text-sm text-muted-foreground text-center">
+            <Link href="/login" className="text-primary underline underline-offset-4">
+              Back to sign in
+            </Link>
+          </p>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

frontend/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import Link from 'next/link';
+import { Suspense, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'sonner';
+
+import { resetPassword } from '../../../lib/api/auth.api';
+import { Button } from '../../../components/ui/button';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../../../components/ui/card';
+
+const resetPasswordSchema = z
+  .object({
+    newPassword: z.string().min(8, 'Password must be at least 8 characters'),
+    confirmPassword: z.string().min(8, 'Password must be at least 8 characters'),
+  })
+  .refine((values) => values.newPassword === values.confirmPassword, {
+    message: 'Passwords must match',
+    path: ['confirmPassword'],
+  });
+
+type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
+
+function getErrorMessage(error: unknown): string {
+  if (typeof error === 'object' && error !== null && 'message' in error) {
+    const message = (error as { message?: string | string[] }).message;
+    if (Array.isArray(message) && message.length > 0) {
+      return message[0] ?? 'Failed to reset password';
+    }
+    if (typeof message === 'string' && message.length > 0) {
+      return message;
+    }
+  }
+
+  return 'Failed to reset password';
+}
+
+function ResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const token = useMemo(() => searchParams.get('token')?.trim() ?? '', [searchParams]);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<ResetPasswordFormData>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: {
+      newPassword: '',
+      confirmPassword: '',
+    },
+  });
+
+  if (!token) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Invalid link</CardTitle>
+          <CardDescription>
+            This password reset link is missing or invalid. Request a new reset email to continue.
+          </CardDescription>
+        </CardHeader>
+        <CardFooter>
+          <Button asChild className="w-full">
+            <Link href="/forgot-password">Request new link</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    );
+  }
+
+  if (isSuccess) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Password updated</CardTitle>
+          <CardDescription>
+            Your password has been reset successfully. You can now sign in with your new password.
+          </CardDescription>
+        </CardHeader>
+        <CardFooter>
+          <Button asChild className="w-full">
+            <Link href="/login">Sign in</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    );
+  }
+
+  const onSubmit = async (data: ResetPasswordFormData) => {
+    try {
+      await resetPassword(token, data.newPassword);
+      setIsSuccess(true);
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error));
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl">Reset password</CardTitle>
+        <CardDescription>Enter a new password for your account.</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="newPassword">New password</Label>
+            <Input
+              id="newPassword"
+              type="password"
+              autoComplete="new-password"
+              placeholder="••••••••"
+              {...register('newPassword')}
+            />
+            {errors.newPassword && (
+              <p className="text-sm text-destructive">{errors.newPassword.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Confirm new password</Label>
+            <Input
+              id="confirmPassword"
+              type="password"
+              autoComplete="new-password"
+              placeholder="••••••••"
+              {...register('confirmPassword')}
+            />
+            {errors.confirmPassword && (
+              <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>
+            )}
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? 'Resetting…' : 'Reset password'}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense>
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}