diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx index 2dcad75dc..4d5e2b444 100644 --- a/apps/web/src/components/forms/signin.tsx +++ b/apps/web/src/components/forms/signin.tsx @@ -1,10 +1,11 @@ 'use client'; -/* eslint-disable @typescript-eslint/consistent-type-assertions */ +import { useEffect, useRef } from 'react'; + import { useSearchParams } from 'next/navigation'; import { zodResolver } from '@hookform/resolvers/zod'; -import { AlertTriangle, Loader } from 'lucide-react'; +import { Loader } from 'lucide-react'; import { signIn } from 'next-auth/react'; import { useForm } from 'react-hook-form'; import { FcGoogle } from 'react-icons/fc'; @@ -12,7 +13,6 @@ 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'; @@ -51,6 +51,30 @@ export const SignInForm = ({ className }: SignInFormProps) => { resolver: zodResolver(ZSignInFormSchema), }); + const timer = useRef(null); + + useEffect(() => { + const error = searchParams?.get('error'); + if (error) { + timer.current = setTimeout(() => { + toast({ + variant: 'destructive', + description: + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + ErrorMessages[searchParams?.get('error') as keyof typeof ErrorMessages] ?? + 'an unknown error occurred', + }); + }, 100); + } + return () => { + if (timer.current) { + clearInterval(timer.current); + } + timer.current = null; + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const onFormSubmit = async ({ email, password }: TSignInFormSchema) => { try { await signIn('credentials', { @@ -86,83 +110,62 @@ export const SignInForm = ({ className }: SignInFormProps) => { }; return ( - <> - {searchParams?.get('error') && ( -
- - +
+
+ - - {ErrorMessages[searchParams?.get('error') as keyof typeof ErrorMessages] ?? - 'an unknown error occurred'} - - -
- )} + - {errors.email.message}} +
+ +
+ + + + + {errors.password && ( + {errors.password.message} + )} +
+ + + +
+
+ Or continue with +
+
+ + - -
-
- Or continue with -
-
- - - - + + Google + + ); };