feat: add forgot passoword page

apps/web/src/app/(unauthenticated)/check-email/page.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+export default function ForgotPasswordPage() {
+  return (
+    <main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-24">
+      <div className="relative flex w-1/5 items-center gap-x-24">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:invert dark:sepia"
+          />
+        </div>
+
+        <div className="w-full text-center">
+          <h1 className="text-4xl font-semibold">Reset Pasword</h1>
+
+          <p className="text-muted-foreground/60 mb-4 mt-2 text-sm">
+            Please check your email for reset instructions
+          </p>
+
+          <p className="text-muted-foreground mt-6 text-center text-sm">
+            <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}

apps/web/src/app/(unauthenticated)/forgot-password/page.tsx

@@ -0,0 +1,38 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+import { ForgotPasswordForm } from '~/components/forms/forgot-password';
+
+export default function ForgotPasswordPage() {
+  return (
+    <main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-24">
+      <div className="relative flex w-1/5 items-center gap-x-24">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:invert dark:sepia"
+          />
+        </div>
+
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">Forgot Password?</h1>
+
+          <p className="text-muted-foreground/60 mt-2 text-sm">
+            No worries, we'll send you reset instructions.
+          </p>
+
+          <ForgotPasswordForm className="mt-4" />
+
+          <p className="text-muted-foreground mt-6 text-center text-sm">
+            Don't have an account?{' '}
+            <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
+              Sign up
+            </Link>
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}

apps/web/src/components/forms/forgot-password.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ERROR_MESSAGES = {
+  [ErrorCode.CREDENTIALS_NOT_FOUND]: 'No account found with that email address.',
+  [ErrorCode.INCORRECT_EMAIL_PASSWORD]: 'No account found with that email address.',
+  [ErrorCode.USER_MISSING_PASSWORD]:
+    'This account appears to be using a social login method, please sign in using that method',
+};
+
+export const ZForgotPasswordFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;
+
+export type ForgotPasswordFormProps = {
+  className?: string;
+};
+
+export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TForgotPasswordFormSchema>({
+    values: {
+      email: '',
+    },
+    resolver: zodResolver(ZForgotPasswordFormSchema),
+  });
+
+  const errorCode = searchParams?.get('error');
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | null = null;
+
+    if (isErrorCode(errorCode)) {
+      timeout = setTimeout(() => {
+        toast({
+          variant: 'destructive',
+          description: ERROR_MESSAGES[errorCode] ?? 'An unknown error occurred',
+        });
+      }, 0);
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [errorCode, toast]);
+
+  const onFormSubmit = ({ email }: TForgotPasswordFormSchema) => {
+    // check if the email is available
+    // if not, throw an error
+    // if the email is available, create a password reset token and send an email
+
+    console.log(email);
+    router.push('/check-email');
+  };
+
+  return (
+    <form
+      className={cn('flex w-full flex-col gap-y-4', className)}
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      <div>
+        <Label htmlFor="email" className="text-slate-500">
+          Email
+        </Label>
+
+        <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
+
+        {errors.email && <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>}
+      </div>
+
+      <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">
+        {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+        Reset Password
+      </Button>
+    </form>
+  );
+};

apps/web/src/components/forms/signin.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react';
 
+import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -123,8 +124,11 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       </div>
 
       <div>
-        <Label htmlFor="password" className="text-slate-500">
-          Password
+        <Label htmlFor="password" className="flex justify-between text-slate-500">
+          <span>Password</span>
+          <Link className="text-xs text-slate-500" href="/forgot-password">
+            Forgot?
+          </Link>
         </Label>
 
         <Input