feat: add api error

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

@@ -1,18 +1,29 @@
 'use client';
 
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import { useSearchParams } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
+import { AlertTriangle, Loader } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
+import { ErrorCodes } from '@documenso/lib/next-auth/error-codes';
 import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 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 ErrorMessages = {
+  [ErrorCodes.CredentialsNotFound]: 'Credentials not found',
+  [ErrorCodes.IncorrectEmailPassword]: 'Incorrect email or password',
+  [ErrorCodes.UserMissingPassword]: 'User is missing password',
+};
+
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
   password: z.string().min(6).max(72),
@@ -25,6 +36,7 @@ export type SignInFormProps = {
 };
 
 export const SignInForm = ({ className }: SignInFormProps) => {
+  const searchParams = useSearchParams();
   const { toast } = useToast();
 
   const {
@@ -74,6 +86,20 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   };
 
   return (
+    <>
+      {searchParams?.get('error') && (
+        <div className="pt-4">
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+
+            <AlertDescription>
+              {ErrorMessages[searchParams?.get('error') as keyof typeof ErrorMessages] ??
+                'an unknown error occured'}
+            </AlertDescription>
+          </Alert>
+        </div>
+      )}
+
       <form
         className={cn('flex w-full flex-col gap-y-4', className)}
         onSubmit={handleSubmit(onFormSubmit)}
@@ -85,7 +111,9 @@ export const SignInForm = ({ className }: SignInFormProps) => {
 
           <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>}
+          {errors.email && (
+            <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>
+          )}
         </div>
 
         <div>
@@ -108,7 +136,11 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           )}
         </div>
 
-      <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">
+        <Button
+          size="lg"
+          disabled={isSubmitting}
+          className="dark:bg-documenso dark:hover:opacity-90"
+        >
           {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
           Sign In
         </Button>
@@ -131,5 +163,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
           Google
         </Button>
       </form>
+    </>
   );
 };