changed a lot

app/(root)/(routes)/(auth)/login/page.tsx

@@ -15,13 +15,15 @@ import { Input } from '@/components/ui/input'
 import { CardWrapper } from '@/components/auth/card-wrapper'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams, useRouter } from 'next/navigation'
 import { useEffect, useRef, useTransition } from 'react'
 import { login } from '@/actions/login'
 import toast from 'react-hot-toast'
 
 export default function Page() {
+  const router = useRouter();
   const searchParams = useSearchParams()
+  const callbackUrl = searchParams.get('callbackUrl')
   const urlError =
     searchParams.get('error') === 'OAuthAccountNotLinked'
       ? 'Email already in use with different provider!'
@@ -52,8 +54,12 @@ export default function Page() {
         }
         if (data?.success) {
           toast.success(data.success)
-          form.reset({ email: '', password: '' })
-          window.location.href = '/'
+          if (data.success === 'Confirmation email sent!') {
+            // Don't redirect if we're just sending a confirmation email
+            return;
+          }
+          router.push('/dashboard');
+          router.refresh();
         }
       })
     })

app/(root)/(routes)/(auth)/new-verification/page.tsx

@@ -5,11 +5,11 @@ import { newVerification } from '@/actions/new-verification'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-hot-toast'
+import { Loader2 } from 'lucide-react'
 
 export default function NewVerificationForm() {
   const [error, setError] = useState<string | undefined>()
   const [success, setSuccess] = useState<string | undefined>()
-  const [hasErrorToastShown, setHasErrorToastShown] = useState<boolean>(false)
 
   const searchParams = useSearchParams()
   const token = searchParams.get('token')
@@ -17,25 +17,25 @@ export default function NewVerificationForm() {
 
   const onSubmit = useCallback(() => {
     if (!token) {
-      toast.error('No token provided')
+      setError('Missing token!')
       return
     }
+
     newVerification(token)
       .then((data) => {
         if (data?.error) {
-          setTimeout(() => {
-            setError(data.error)
-          }, 500)
-        } else if (data?.success) {
+          setError(data.error)
+        }
+        if (data?.success) {
+          setSuccess(data.success)
           toast.success(data.success)
           setTimeout(() => {
             router.push('/login')
-          }, 100)
+          }, 2000)
         }
       })
       .catch(() => {
-        const errorMessage = 'Something went wrong'
-        setError(errorMessage)
+        setError('Something went wrong!')
       })
   }, [token, router])
 
@@ -43,24 +43,37 @@ export default function NewVerificationForm() {
     onSubmit()
   }, [onSubmit])
 
-  useEffect(() => {
-    if (error && !hasErrorToastShown) {
-      const timer = setTimeout(() => {
-        toast.error(error)
-        setHasErrorToastShown(true)
-      }, 100)
-      return () => clearTimeout(timer) // Cleanup the timeout if component unmounts
-    }
-  }, [error, hasErrorToastShown])
-
   return (
     <CardWrapper
-      headerTitle="Verify your email"
-      backButtonLabel="Back to Login"
+      headerTitle="Confirm your email"
+      backButtonLabel="Back to login"
       backButtonHref="/login"
     >
       <div className="flex items-center w-full justify-center">
-        {!success && !error && <p>Verifying...</p>}
+        {!success && !error && (
+          <div className="flex flex-col items-center gap-2">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <p className="text-muted-foreground text-sm">
+              Verifying your email...
+            </p>
+          </div>
+        )}
+        {success && (
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-success text-sm">{success}</p>
+            <p className="text-muted-foreground text-sm">
+              Redirecting to login...
+            </p>
+          </div>
+        )}
+        {error && (
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-destructive text-sm">{error}</p>
+            <p className="text-muted-foreground text-sm">
+              Please try again or contact support.
+            </p>
+          </div>
+        )}
       </div>
     </CardWrapper>
   )