diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx index 2ffb2798e..5322dcf78 100644 --- a/apps/web/src/components/forms/signin.tsx +++ b/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,62 +86,83 @@ export const SignInForm = ({ className }: SignInFormProps) => { }; return ( -
-
- + <> + {searchParams?.get('error') && ( +
+ + - + + {ErrorMessages[searchParams?.get('error') as keyof typeof ErrorMessages] ?? + 'an unknown error occured'} + + +
+ )} - {errors.email && {errors.email.message}} -
- -
- - - - - {errors.password && ( - {errors.password.message} - )} -
- - - -
-
- Or continue with -
-
- - - +
+ + + + + {errors.email && ( + {errors.email.message} + )} +
+ +
+ + + + + {errors.password && ( + {errors.password.message} + )} +
+ + + +
+
+ Or continue with +
+
+ + + + ); };