fix: use toast

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';
@@ -52,6 +52,30 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     resolver: zodResolver(ZSignInFormSchema),
   });
 
+  const timer = useRef<NodeJS.Timeout | null>(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', {
@@ -87,83 +111,62 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   };
 
   return (
-    <>
-      {searchParams?.get('error') && (
-        <div className="pt-4">
-          <Alert variant="destructive">
-            <AlertTriangle className="h-4 w-4" />
+    <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>
 
-            <AlertDescription>
-              {ErrorMessages[searchParams?.get('error') as keyof typeof ErrorMessages] ??
-                'an unknown error occurred'}
-            </AlertDescription>
-          </Alert>
-        </div>
-      )}
+        <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
 
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={handleSubmit(onFormSubmit)}
+        {errors.email && <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>}
+      </div>
+
+      <div>
+        <Label htmlFor="password" className="text-slate-500">
+          Password
+        </Label>
+
+        <Input
+          id="password"
+          type="password"
+          minLength={6}
+          maxLength={72}
+          autoComplete="current-password"
+          className="bg-background mt-2"
+          {...register('password')}
+        />
+
+        {errors.password && (
+          <span className="mt-1 text-xs text-red-500">{errors.password.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" />}
+        Sign In
+      </Button>
+
+      <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+        <div className="bg-border h-px flex-1" />
+        <span className="text-muted-foreground bg-transparent">Or continue with</span>
+        <div className="bg-border h-px flex-1" />
+      </div>
+
+      <Button
+        type="button"
+        size="lg"
+        variant={'outline'}
+        className="bg-background text-muted-foreground border"
+        disabled={isSubmitting}
+        onClick={onSignInWithGoogleClick}
       >
-        <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>
-
-        <div>
-          <Label htmlFor="password" className="text-slate-500">
-            Password
-          </Label>
-
-          <Input
-            id="password"
-            type="password"
-            minLength={6}
-            maxLength={72}
-            autoComplete="current-password"
-            className="bg-background mt-2"
-            {...register('password')}
-          />
-
-          {errors.password && (
-            <span className="mt-1 text-xs text-red-500">{errors.password.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" />}
-          Sign In
-        </Button>
-
-        <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
-          <div className="bg-border h-px flex-1" />
-          <span className="text-muted-foreground bg-transparent">Or continue with</span>
-          <div className="bg-border h-px flex-1" />
-        </div>
-
-        <Button
-          type="button"
-          size="lg"
-          variant={'outline'}
-          className="bg-background text-muted-foreground border"
-          disabled={isSubmitting}
-          onClick={onSignInWithGoogleClick}
-        >
-          <FcGoogle className="mr-2 h-5 w-5" />
-          Google
-        </Button>
-      </form>
-    </>
+        <FcGoogle className="mr-2 h-5 w-5" />
+        Google
+      </Button>
+    </form>
   );
 };