V1.1

frontend/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useEffect } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -6,13 +6,20 @@ import { useAppSelector, useAppDispatch } from '../stores/hooks';
 import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 import BaseButton from '../components/BaseButton';
-import { logoutUser } from '../stores/authSlice';
+import { logoutUser, findMe } from '../stores/authSlice';
 
 export default function Starter() {
   const router = useRouter();
   const dispatch = useAppDispatch();
   const { currentUser, token } = useAppSelector((state) => state.auth);
   
+  // Hydrate auth state if token exists but currentUser doesn't
+  useEffect(() => {
+    if (token && !currentUser) {
+      dispatch(findMe());
+    }
+  }, [token, currentUser, dispatch]);
+
   const handleLogout = () => {
     dispatch(logoutUser());
     router.push('/login');
@@ -62,12 +69,12 @@ export default function Starter() {
         </div>
 
         <div className="flex flex-col items-center space-y-6 pt-4">
-          <BaseButton
+          <Link 
             href="/member_profiles/member_profiles-list"
-            label="Enter Executive Directory"
-            color="info"
-            className="px-16 py-4 text-xl rounded-none bg-[#091EAA] hover:bg-[#0055AA] border-none shadow-xl transition-all"
-          />
+            className="px-16 py-4 text-xl font-bold text-white rounded-none bg-[#091EAA] hover:bg-[#0055AA] border-none shadow-xl transition-all inline-block"
+          >
+            Enter Executive Directory
+          </Link>
           
           <div className="flex flex-wrap justify-center gap-x-8 gap-y-4 pt-4 text-gray-500 font-medium uppercase tracking-widest text-xs">
             <Link href="/profile" className="hover:text-[#091EAA] transition-colors">

frontend/src/pages/profile/opt-in.tsx

@@ -35,18 +35,33 @@ export default function ProfileOptIn() {
 
     setLoading(true);
     try {
-      // Update member profile with consent
-      await axios.put(`/member_profiles/${memberProfile.id}`, {
-        data: {
-          directory_consent: true,
-          consented_at: new Date(),
-          profile_status: 'draft' // Initial status after consent
-        }
-      });
+      if (memberProfile?.id) {
+        // Update existing member profile with consent
+        await axios.put(`/member_profiles/${memberProfile.id}`, {
+          id: memberProfile.id,
+          data: {
+            directory_consent: true,
+            consented_at: new Date(),
+            profile_status: 'draft' // Initial status after consent
+          }
+        });
+      } else {
+        // Create new member profile with consent
+        await axios.post(`/member_profiles`, {
+          data: {
+            user: currentUser.id,
+            directory_consent: true,
+            consented_at: new Date(),
+            profile_status: 'draft'
+          }
+        });
+      }
       
       await dispatch(findMe());
-      toast.success('Consent recorded. Please complete your profile.');
-      router.push('/member_profiles/member_profiles-form');
+      toast.success('Consent recorded. Welcome to the Directory!');
+      
+      // Redirect to the directory list
+      router.push('/member_profiles/member_profiles-list');
     } catch (error) {
       console.error(error);
       toast.error('Failed to save consent. Please try again.');
@@ -96,7 +111,7 @@ export default function ProfileOptIn() {
 
               <div className="pt-8 flex justify-center">
                 <BaseButton
-                  label={loading ? 'Processing...' : 'Proceed to Profile Completion'}
+                  label={loading ? 'Processing...' : 'Proceed to Directory'}
                   color="info"
                   className="px-12 py-3 bg-[#091EAA] hover:bg-[#0055AA] border-none rounded-none text-lg shadow-lg"
                   onClick={handleConsent}

frontend/src/stores/authSlice.ts

@@ -10,12 +10,19 @@ interface MainState {
   token: string;
 }
 
+const getInitialToken = () => {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem('token') || '';
+  }
+  return '';
+};
+
 const initialState: MainState = {
   /* User */
   isFetching: false,
   errorMessage: '',
   currentUser: null,
-  token: '',
+  token: getInitialToken(),
   notify: {
     showNotification: false,
     textNotification: '',
@@ -121,4 +128,4 @@ export const authSlice = createSlice({
 // Action creators are generated for each case reducer function
 export const { logoutUser } = authSlice.actions;
 
-export default authSlice.reducer;
+export default authSlice.reducer;