Merge pull request #3090 from KBVE/dev

Preparing Alpha Branch
KBVE · Oct 22, 2024 · 2d429ff · 2d429ff
2 parents a2db55a + 857603c
commit 2d429ff
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 245 deletions.
diff --git a/apps/expo-lcagents/assets/json/profile.json b/apps/expo-lcagents/assets/json/profile.json
diff --git a/apps/expo-lcagents/src/app/login.tsx b/apps/expo-lcagents/src/app/login.tsx
@@ -31,10 +31,7 @@ const Login = () => {
 			<View style={{ padding: 10 }}>
 				<YStack f={1} jc="center" ai="center">
 					{/* Lottie Animation */}
-					<LottieAnimation
-						lottieJSON={require('../../assets/json/vr.json')}
-						style={{ width: 150, height: 150 }}
-					/>
+
 					<SizableText size="$3" theme="alt2">
 						Login to Your Account
 					</SizableText>
@@ -49,6 +46,10 @@ const Login = () => {
 
 				</YStack>
 			</View>
+			<LottieAnimation
+						lottieJSON={require('../../assets/json/vr.json')}
+						style={{ width: 150, height: 150 }}
+					/>
 		</ScrollView>
 	);
 };

diff --git a/apps/expo-lcagents/src/app/menu.tsx b/apps/expo-lcagents/src/app/menu.tsx
@@ -82,6 +82,22 @@ const VerticalTabs = () => {
 			{/* Tabs Content */}
 			<TabsContent value="tab1">
 				<H5 textAlign="center">Profile Content</H5>
+				<Separator
+					alignSelf="stretch"
+					vertical
+					borderColor="$borderColor"
+				/>
+				<Button
+					iconAfter={Activity}
+					size="$3"
+					onPress={() =>
+						handlePress('/profile', {
+							filter: 'active',
+							sort: 'asc',
+						})
+					}>
+					Profile
+				</Button>
 			</TabsContent>
 			<TabsContent value="tab2">
 				<H5 textAlign="center">Connections Content</H5>

diff --git a/apps/expo-lcagents/src/app/profile.tsx b/apps/expo-lcagents/src/app/profile.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ScrollView, View, Image } from 'react-native';
-import { YStack, SizableText } from 'tamagui';
+import { YStack, SizableText, Separator } from 'tamagui';
 import { TamaProfile, LottieAnimation } from '@kbve/expo-bbq';
 
 import { useNavigation } from 'expo-router';
@@ -20,21 +20,27 @@ const Profile = () => {
 			contentContainerStyle={{
 				flexGrow: 1,
 				justifyContent: 'center',
-				paddingVertical: 10,
+				paddingVertical: 3,
 			}}>
 			<View style={{ padding: 10 }}>
 				<YStack f={1} jc="center" ai="center">
 					{/* Lottie Animation */}
 					<LottieAnimation
-						lottieJSON={require('../../assets/json/vr.json')}
-						style={{ width: 150, height: 150 }}
+						lottieJSON={require('../../assets/json/profile.json')}
+						style={{ width: 350, height: 350 }}
 					/>
 					<SizableText size="$3" theme="alt2">
-						LC Agents Profile
+						LC Agents Profile - Powered by KBVE
 					</SizableText>
 				</YStack>
+                <Separator
+					alignSelf="stretch"
+					borderColor="cyan"
+                    paddingVertical={10}
+				/>
 				<YStack>
 					{/* Profile */}
+
 					<TamaProfile
 						supabaseUrl="https://supabase.kbve.com"
 						supabaseAnonKey="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJyb2xlIjogImFub24iLAogICJpc3MiOiAic3VwYWJhc2UiLAogICJpYXQiOiAxNzI0NTM2ODAwLAogICJleHAiOiAxODgyMzAzMjAwCn0._fmEmblm0afeLoPXxt8wP2mYpa9gzU-ufx3v8oRTFGg"

diff --git a/packages/expo-bbq/src/components/auth/TamaLogin.tsx b/packages/expo-bbq/src/components/auth/TamaLogin.tsx
@@ -1,26 +1,20 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Platform } from 'react-native';
 import { Button, Form, H4, Input, Spinner, Text, YStack, Sheet } from 'tamagui';
 import { CheckCircle, XCircle } from '@tamagui/lucide-icons'; 
-import HCaptchaWeb from '@hcaptcha/react-hcaptcha';
-import ConfirmHcaptcha from '@hcaptcha/react-native-hcaptcha';
 import { useRouter } from 'expo-router'; // Assuming you are using Expo Router
 import { createSupabaseClient } from '../wrapper/Supabase';
-
-type HCaptchaType = typeof HCaptchaWeb | typeof ConfirmHcaptcha;
+import { HCaptchaWrapper } from '../wrapper/HCaptchaWrapper'; 
 
 export function TamaLogin({ siteKey, supabaseUrl, supabaseAnonKey }: { siteKey: string, supabaseUrl: string, supabaseAnonKey: string }) {
   const [status, setStatus] = useState<'off' | 'loggingIn' | 'loggedIn'>('off');
-  const [captchaStatus, setCaptchaStatus] = useState<'waiting' | 'success' | 'error'>('waiting');
   const [captchaToken, setCaptchaToken] = useState<string | null>(null);
   const [formValues, setFormValues] = useState({
     email: '',
     password: '',
   });
   const [showSheet, setShowSheet] = useState(false); 
   const [sheetMessage, setSheetMessage] = useState('');
-  const captchaForm = useRef<ConfirmHcaptcha | null>(null);
-  const HCaptchaComponent: HCaptchaType = Platform.OS === 'web' ? HCaptchaWeb : ConfirmHcaptcha;
   const supabase = createSupabaseClient(supabaseUrl, supabaseAnonKey);
   const router = useRouter();
 
@@ -43,7 +37,6 @@ export function TamaLogin({ siteKey, supabaseUrl, supabaseAnonKey }: { siteKey:
     const { email, password } = formValues;
 
     try {
-      // Call Supabase's signIn method
       const { data, error } = await supabase.auth.signInWithPassword({
         email,
         password,
@@ -54,62 +47,29 @@ export function TamaLogin({ siteKey, supabaseUrl, supabaseAnonKey }: { siteKey:
 
       if (error) {
         console.error('Supabase login error:', error.message);
-        setCaptchaStatus('waiting');  // Reset the captcha
         setSheetMessage(`Login failed: ${error.message}`);
-        setShowSheet(true);  // Show error sheet
+        setShowSheet(true);
+        setCaptchaToken(null);  // Reset captcha token after error
       } else {
-        console.log('User logged in:', data);
         setStatus('loggedIn');
         setSheetMessage('Login successful!');
         setShowSheet(true);
-
-        // Redirect to profile after login
-        router.replace('/profile'); // Adjust the route path as needed
+        router.replace('/profile');  // Redirect after successful login
       }
     } catch (error) {
       console.error('Error during login:', error);
-      setCaptchaStatus('waiting');
       setSheetMessage('An error occurred during login.');
       setShowSheet(true);
+      setCaptchaToken(null);  // Reset captcha token after error
     }
   };
 
   const handleInputChange = (field: string, value: string) => {
     setFormValues((prev) => ({ ...prev, [field]: value }));
   };
 
-  const onMessage = (event: any) => {
-    const eventData = event?.nativeEvent?.data;
-
-    if (eventData) {
-      console.log('Event Data from hCaptcha:', eventData);
-
-      if (eventData === 'open') return;
-
-      if (['cancel', 'error', 'expired'].includes(eventData)) {
-        captchaForm.current?.hide();
-        setCaptchaStatus('error');
-        console.log(`hCaptcha status: ${eventData}`);
-      } else {
-        console.log('Verified code from hCaptcha:', eventData);
-        setCaptchaToken(eventData);
-        setCaptchaStatus('success');
-        captchaForm.current?.hide();
-      }
-    }
-  };
-
-  const handleRetryCaptcha = () => {
-    setCaptchaStatus('waiting');
-    captchaForm.current?.show();
-  };
-
   return (
-    <YStack
-      justifyContent="center"
-      alignItems="center"
-      padding="$4"
-    >
+    <YStack justifyContent="center" alignItems="center" padding="$4">
       <Form
         alignItems="center"
         gap="$4"
@@ -144,45 +104,24 @@ export function TamaLogin({ siteKey, supabaseUrl, supabaseAnonKey }: { siteKey:
           padding="$2"
         />
 
-        {Platform.OS === 'web' ? (
-          <HCaptchaComponent
-            sitekey={siteKey}
-            onVerify={(captchaToken: string) => setCaptchaToken(captchaToken)}
-          />
-        ) : (
-          <>
-            {captchaStatus === 'waiting' && (
-              <Button onPress={() => captchaForm.current?.show()}>Show hCaptcha</Button>
-            )}
-
-            {captchaStatus === 'success' && (
-              <YStack alignItems="center">
-                <CheckCircle color="green" size={40} />
-                <Text>Verified!</Text>
-              </YStack>
-            )}
-
-            {captchaStatus === 'error' && (
-              <YStack alignItems="center">
-                <XCircle color="red" size={40} />
-                <Text>Error! Try Again</Text>
-                <Button onPress={handleRetryCaptcha}>Retry</Button>
-              </YStack>
-            )}
-
-            <ConfirmHcaptcha
-              ref={captchaForm}
-              siteKey={siteKey}
-              baseUrl="https://hcaptcha.com"
-              languageCode="en"
-              onMessage={onMessage}
-            />
-          </>
-        )}
+        {/* hCaptcha Wrapper to handle both web and mobile */}
+        <HCaptchaWrapper
+          siteKey={siteKey}
+          onToken={(token) => {
+            setCaptchaToken(token);  // Set the captcha token on success
+          }}
+          onError={(error) => {
+            console.error('Captcha error:', error);  // Handle captcha errors
+            setCaptchaToken(null);  // Reset token on error
+          }}
+        />
 
-        <Form.Trigger asChild disabled={status !== 'off' || captchaStatus !== 'success'}>
+        <Form.Trigger
+          asChild
+          disabled={status === 'loggingIn' || !captchaToken}  // Disable button if logging in or no captcha token
+        >
           <Button icon={status === 'loggingIn' ? () => <Spinner /> : undefined}>
-            Login
+            {status === 'loggingIn' ? 'Logging in...' : 'Login'}
           </Button>
         </Form.Trigger>
       </Form>
@@ -196,7 +135,7 @@ export function TamaLogin({ siteKey, supabaseUrl, supabaseAnonKey }: { siteKey:
         dismissOnOverlayPress={true}
       >
         <YStack justifyContent="center" alignItems="center" padding="$6" backgroundColor="$background" borderRadius="$4" width="100%">
-          {captchaStatus === 'success' ? (
+          {captchaToken ? (
             <CheckCircle color="green" size={40} />
           ) : (
             <XCircle color="red" size={40} />

diff --git a/packages/expo-bbq/src/components/auth/TamaProfile.tsx b/packages/expo-bbq/src/components/auth/TamaProfile.tsx
@@ -93,7 +93,7 @@ export function TamaProfile({ supabaseUrl, supabaseAnonKey }: { supabaseUrl: str
       <Avatar circular size={100}>
         <Avatar.Image src={'https://example.com/default-avatar.png'} />
         <Avatar.Fallback>
-          <Text>?</Text>
+          <Text>Hello</Text>
         </Avatar.Fallback>
       </Avatar>