[feat] new success and verification pages with full functionality EXC…

api/supabase/queries/auth.ts

@@ -5,7 +5,11 @@ export async function handleSignUp(
   password: string,
 ): Promise<{ success: boolean; message: string }> {
   try {
-    const { data, error } = await supabase.auth.signUp({ email, password });
+    await ensureLoggedOutForNewUser(email);
+    const { data, error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
 
     if (error) {
       return { success: false, message: `Sign-up failed: ${error.message}` };
@@ -37,6 +41,8 @@ export async function handleSignUp(
       };
     }
 
+    localStorage.setItem('tempEmail', email);
+
     return { success: true, message: 'Sign-up successful!' };
   } catch (err) {
     if (err instanceof Error) {
@@ -54,6 +60,7 @@ export async function handleSignIn(
   password: string,
 ): Promise<{ success: boolean; message: string }> {
   try {
+    await ensureLoggedOutForNewUser(email);
     const { error: signInError } = await supabase.auth.signInWithPassword({
       email,
       password,
@@ -96,6 +103,37 @@ export async function handleSignIn(
   }
 }
 
+export const handleSignOut = async () => {
+  const { error } = await supabase.auth.signOut();
+  if (error) {
+    console.error('Error during logout:', error.message);
+    return;
+  }
+};
+
+export async function ensureLoggedOutForNewUser(
+  newEmail: string,
+): Promise<void> {
+  const { data, error } = await supabase.auth.getSession();
+
+  if (error) {
+    console.error('Error fetching session:', error.message);
+    throw new Error('Failed to fetch session.');
+  }
+
+  const session = data.session;
+
+  if (
+    session &&
+    session.user &&
+    session.user.email &&
+    session.user.email !== newEmail
+  ) {
+    console.log(`Logging out current user: ${session.user.email}`);
+    await handleSignOut();
+  }
+}
+
 export async function checkUserExists(
   userId: string,
   userType: 'volunteer' | 'facility',
@@ -118,3 +156,24 @@ export async function checkUserExists(
     return false;
   }
 }
+
+export async function resendVerificationEmail(email: string): Promise<string> {
+  try {
+    const { error } = await supabase.auth.resend({
+      type: 'signup',
+      email: email,
+    });
+
+    if (error) {
+      return `Error: ${error.message}`;
+    }
+
+    return 'Verification email resent successfully!';
+  } catch (err) {
+    return 'Unexpected error while resending verification email.';
+  }
+}
+
+export function getTempEmail(): string | null {
+  return localStorage.getItem('tempEmail');
+}

app/(auth)/signup/page.tsx

@@ -44,7 +44,7 @@ export default function SignUp() {
     setIsError(!success);
 
     if (success) {
-      router.push('/onboarding/role-selection');
+      router.push('/verification');
     }
   };
 

app/(auth)/success/page.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Rose from '@/public/images/rose-greenbg.svg';
+import {
+  Background,
+  Image,
+  InlineContainer,
+  ReviewContainer,
+  RoundedCornerButton,
+  Title,
+} from '../../../styles/styles';
+
+export default function Success() {
+  const router = useRouter(); // Initialize useRouter
+
+  const handleContinue = () => {
+    router.push('/onboarding/role-selection'); // Navigate to the onboarding/general page
+  };
+
+  return (
+    <Background>
+      <Image src={Rose} alt="Rose" />
+      <InlineContainer>
+        <ReviewContainer>
+          <Title>Successfully verified!</Title>
+          <text>
+            Your email has been verified. Please use this email address to login
+            in the future.
+          </text>
+          <RoundedCornerButton onClick={handleContinue}>
+            Continue
+          </RoundedCornerButton>
+        </ReviewContainer>
+      </InlineContainer>
+    </Background>
+  );
+}

app/(auth)/verification/page.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  getTempEmail,
+  resendVerificationEmail,
+} from '@/api/supabase/queries/auth';
+import Bud from '@/public/images/bud.svg';
+import EmailIcon from '@/public/images/email.svg';
+// import supabase from '@/api/supabase/createClient';
+import { useSession } from '@/utils/AuthProvider';
+import {
+  Background,
+  EmailContainer,
+  EmailIconStyled,
+  EmailText,
+  Footer,
+  Image,
+  InlineContainer,
+  Link,
+  ResendMessage,
+  ReviewContainer,
+  RoundedCornerButton,
+  Title,
+} from '../../../styles/styles';
+
+export default function Verification() {
+  const router = useRouter(); // Initialize useRouter
+  const [tempEmail, setTempEmail] = useState<string | null>(null);
+  const [resendStatus, setResendStatus] = useState<string>('');
+  const [isError, setIsError] = useState<boolean>(false);
+  const { session } = useSession();
+
+  useEffect(() => {
+    if (session) {
+      router.push('/success');
+    }
+  }, [session, router]);
+
+  useEffect(() => {
+    const email = getTempEmail();
+    setTempEmail(email);
+  }, []);
+
+  const handleResendLink = async () => {
+    if (tempEmail) {
+      const message = await resendVerificationEmail(tempEmail);
+      setIsError(message.includes('Error'));
+      setResendStatus(message);
+    } else {
+      setIsError(true);
+    }
+  };
+
+  const handleUseAnotherAccount = () => {
+    router.push('/signin');
+    localStorage.removeItem('tempEmail');
+  };
+
+  // TODO: Restyle error message on lines 95-100 (the message containing link back to sign-up)
+
+  return (
+    <Background>
+      <Image src={Bud} alt="Bud" />
+      <InlineContainer>
+        <ReviewContainer>
+          <Title>Verification Needed</Title>
+          <text>Thanks for signing up!</text>
+          <text>
+            A verification link has been sent to the email you specified, please
+            check your inbox for next steps.
+          </text>
+
+          <EmailContainer>
+            <EmailIconStyled src={EmailIcon} alt="Email Icon" />
+            <EmailText>
+              {tempEmail ? tempEmail : 'Email address not found'}
+            </EmailText>
+          </EmailContainer>
+
+          <RoundedCornerButton
+            onClick={handleUseAnotherAccount}
+            width="70%"
+            bgColor="white"
+            textColor="black"
+          >
+            Use another account
+          </RoundedCornerButton>
+
+          <Footer>
+            Didn&apos;t receive it?{' '}
+            <Link href="#" onClick={handleResendLink}>
+              Resend link
+            </Link>
+          </Footer>
+
+          {isError && !tempEmail && (
+            <ResendMessage $isError={isError}>
+              Email address not found!{' '}
+              <Link href="#" onClick={() => router.push('/signup')}>
+                Return to the sign-up page
+              </Link>{' '}
+              to restart the sign-up process.
+            </ResendMessage>
+          )}
+
+          {resendStatus && tempEmail && (
+            <ResendMessage $isError={isError}>{resendStatus}</ResendMessage>
+          )}
+        </ReviewContainer>
+      </InlineContainer>
+    </Background>
+  );
+}

app/onboarding/finalize/page.tsx

@@ -3,14 +3,14 @@
 import { useRouter } from 'next/navigation';
 import Rose from '@/public/images/rose.svg';
 import { SMALL } from '@/styles/text';
-import { Background } from '../styles';
 import {
   ContinueButton,
   Image,
   InlineContainer,
   ReviewContainer,
   Title,
-} from './styles';
+} from '../../../styles/styles';
+import { Background } from '../styles';
 
 export default function Onboarding() {
   const router = useRouter(); // Initialize useRouter