From ecaa24c0f62f1ab3ea45e7d509ae39c19a724beb Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Mon, 20 Jan 2025 18:23:04 +0300
Subject: [PATCH] chore(web): redirect to email verification page after signup

---
 .../(auth)/(components)/register-form.tsx     |  2 +-
 web/app/(app)/(auth)/verify-email/page.tsx    | 87 ++++++++++++++++++-
 web/config/routes.ts                          |  1 +
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/web/app/(app)/(auth)/(components)/register-form.tsx b/web/app/(app)/(auth)/(components)/register-form.tsx
index 7f7ca63..4c6e1e5 100644
--- a/web/app/(app)/(auth)/(components)/register-form.tsx
+++ b/web/app/(app)/(auth)/(components)/register-form.tsx
@@ -67,7 +67,7 @@ export default function RegisterForm() {
           message: 'Failed to create account',
         })
       } else {
-        router.push(Routes.dashboard)
+        router.push(`${Routes.verifyEmail}?verificationEmailSent=1`)
       }
     } catch (error) {
       console.error('register error:', error)
diff --git a/web/app/(app)/(auth)/verify-email/page.tsx b/web/app/(app)/(auth)/verify-email/page.tsx
index c1ba3eb..841642e 100644
--- a/web/app/(app)/(auth)/verify-email/page.tsx
+++ b/web/app/(app)/(auth)/verify-email/page.tsx
@@ -17,6 +17,7 @@ import { Loader2, CheckCircle, XCircle, Mail, ArrowRight } from 'lucide-react'
 import { useMutation } from '@tanstack/react-query'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { ApiEndpoints } from '@/config/api'
+import { Routes } from '@/config/routes'
 
 const ErrorAlert = ({ message }: { message: string }) => (
   <Alert
@@ -157,7 +158,14 @@ const VerifyEmail = ({
         >
           <CheckCircle className='h-5 w-5 text-green-600' />
           <AlertTitle className='text-lg font-semibold'>Success</AlertTitle>
-          <AlertDescription>{successMessage}</AlertDescription>
+          <AlertDescription>
+            <div className='flex flex-col gap-2'>
+              <div>{successMessage}</div>
+              <Link href={Routes.dashboard} className='font-medium underline'>
+                Go to Dashboard
+              </Link>
+            </div>
+          </AlertDescription>
         </Alert>
       )
     if (error) return <ErrorAlert message={error} />
@@ -185,15 +193,92 @@ const VerifyEmail = ({
   )
 }
 
+const CheckEmailPrompt = () => {
+  const {
+    mutate: sendVerificationEmailMutation,
+    isPending,
+    isError,
+    isSuccess,
+  } = useMutation({
+    mutationFn: () =>
+      httpBrowserClient.post(
+        ApiEndpoints.auth.sendEmailVerificationEmail(),
+        {}
+      ),
+  })
+
+  return (
+    <Card className='w-full max-w-md'>
+      <CardHeader>
+        <CardTitle className='text-2xl font-bold'>Check your email</CardTitle>
+        <CardDescription>
+          We've sent you a verification email. Please check your inbox and click
+          the link to verify your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className='space-y-4'>
+        {isSuccess && (
+          <Alert className='bg-green-50 text-green-700 border-green-200'>
+            <CheckCircle className='h-5 w-5 text-green-600' />
+            <AlertTitle className='text-lg font-semibold'>
+              Email Sent
+            </AlertTitle>
+            <AlertDescription>
+              A new verification email has been sent to your inbox
+            </AlertDescription>
+          </Alert>
+        )}
+        {isError && (
+          <Alert
+            variant='destructive'
+            className='bg-red-50 text-red-700 border-red-200'
+          >
+            <XCircle className='h-5 w-5 text-red-600' />
+            <AlertTitle className='text-lg font-semibold'>Error</AlertTitle>
+            <AlertDescription>
+              Failed to resend verification email
+            </AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+      <CardFooter className='flex flex-col gap-4'>
+        <div className='flex items-center gap-2 justify-center w-full'>
+          <span className='text-sm text-gray-600'>
+            Didn't receive the email?
+          </span>
+          <Button
+            variant='link'
+            onClick={() => sendVerificationEmailMutation()}
+            disabled={isPending}
+            className='text-sm p-0 h-auto font-semibold'
+          >
+            {isPending ? (
+              <>
+                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                Sending...
+              </>
+            ) : (
+              'Click to resend'
+            )}
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
+
 export default function VerifyEmailPage() {
   const searchParams = useSearchParams()
   const userId = searchParams.get('userId')
   const verificationCode = searchParams.get('verificationCode')
+  const verificationEmailSent = searchParams.get('verificationEmailSent')
 
   return (
     <div className='flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900 p-4'>
       {userId && verificationCode ? (
         <VerifyEmail userId={userId} verificationCode={verificationCode} />
+      ) : verificationEmailSent ? (
+        <CheckEmailPrompt />
       ) : (
         <SendVerificationEmail />
       )}
diff --git a/web/config/routes.ts b/web/config/routes.ts
index b55c12b..c0a52de 100644
--- a/web/config/routes.ts
+++ b/web/config/routes.ts
@@ -5,6 +5,7 @@ export const Routes = {
   register: '/register',
   logout: '/logout',
   resetPassword: '/reset-password',
+  verifyEmail: '/verify-email',
 
   dashboard: '/dashboard',