@onairos/react-native 3.0.37 → 3.0.38

package/src/components/UniversalOnboarding.tsx

@@ -40,7 +40,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   test = false,
   preferredPlatform,
 }) => {
-  const [step, setStep] = useState<'connect' | 'pin' | 'training' | 'oauth'>('connect');
+  const [step, setStep] = useState<'connect' | 'pin' | 'training' | 'oauth' | 'success'>('connect');
   const [connections, setConnections] = useState<ConnectionStatus>({});
   const [pin, setPin] = useState<string>('');
   const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
@@ -54,6 +54,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const [currentPlatform, setCurrentPlatform] = useState<string>('');
   const [username, setUsername] = useState<string>('Avatar');
   const [isConnectingPlatform, setIsConnectingPlatform] = useState<boolean>(false);
+  const [showLoginWebView, setShowLoginWebView] = useState<boolean>(false);
 
   const platforms = [
     { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
@@ -220,33 +221,11 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
    * Handles OAuth callback URLs
    */
   const handleOAuthCallback = useCallback((url: string) => {
-    try {
-      // Extract the authorization code from the URL
-      const parsedUrl = new URL(url);
-      const code = parsedUrl.searchParams.get('code');
-      const platform = parsedUrl.searchParams.get('platform') || currentPlatform;
-      
-      if (code && platform) {
-        // Update connections state
-        setConnections(prev => ({
-          ...prev,
-          [platform]: { userName: username, connected: true }
-        }));
-        
-        // Update platform toggles
-        setPlatformToggles(prev => ({
-          ...prev,
-          [platform]: true
-        }));
-        
-        // Return to the connect step
-        setStep('connect');
-      }
-    } catch (error) {
-      console.error('Error handling OAuth callback:', error);
-    }
-  }, [currentPlatform, username]);
-  
+    console.log('OAuth callback received:', url);
+    // Handle the OAuth callback here
+    // This would typically extract the authorization code and complete the OAuth flow
+  }, []);
+
   /**
    * Handles completion of the OAuth flow
    */
@@ -276,6 +255,28 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     setStep('connect');
   }, [currentPlatform, username]);
 
+  // Function to handle "Already have an account" button
+  const handleAlreadyHaveAccount = useCallback(() => {
+    console.log('Already have an account clicked - opening login WebView');
+    setShowLoginWebView(true);
+    // TODO: Open WebView to check for existing Onairos login details
+  }, []);
+
+  // Function to check for existing account (spoofed for now)
+  const checkExistingAccount = useCallback(async () => {
+    console.log('Checking for existing account...');
+    // TODO: Implement actual logic to check cookies/storage for existing account
+    // For now, this is spoofed and doesn't do anything
+    return false;
+  }, []);
+
+  // Function to handle login WebView completion
+  const handleLoginWebViewComplete = useCallback(() => {
+    console.log('Login WebView completed');
+    setShowLoginWebView(false);
+    // TODO: If login successful, skip onboarding and call onComplete
+  }, []);
+
   const handlePinSubmit = useCallback(async (userPin: string) => {
     setPin(userPin);
     setStep('training');
@@ -307,9 +308,14 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   }, [platformToggles]);
 
   const handleProceed = () => {
-    if (canProceedToPin()) {
+    console.log('Proceeding to next step');
+    // Show success screen first
+    setStep('success');
+    
+    // After a delay, proceed to PIN
+    setTimeout(() => {
       setStep('pin');
-    }
+    }, 3000);
   };
 
   return (
@@ -351,6 +357,14 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                           <Text style={styles.onairosIconText}>O</Text>
                         </View>
                       </View>
+                      
+                      {/* Already have an account button */}
+                      <TouchableOpacity 
+                        style={styles.alreadyHaveAccountButton}
+                        onPress={handleAlreadyHaveAccount}
+                      >
+                        <Text style={styles.alreadyHaveAccountText}>Already have an account?</Text>
+                      </TouchableOpacity>
                     </View>
 
                     <ScrollView 
@@ -375,7 +389,12 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                       {/* Platform connection options */}
                       <View style={styles.platformsContainer}>
                         {platforms.map((platform) => (
-                          <View key={platform.id} style={styles.platformItem}>
+                          <TouchableOpacity 
+                            key={platform.id} 
+                            style={styles.platformItem}
+                            onPress={() => togglePlatform(platform.id)}
+                            disabled={isConnectingPlatform}
+                          >
                             <View style={styles.platformInfo}>
                               <Image 
                                 source={platform.icon} 
@@ -386,13 +405,20 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                                 {platform.name}
                               </Text>
                             </View>
-                            <Switch
-                              value={platformToggles[platform.id]}
-                              onValueChange={() => togglePlatform(platform.id)}
-                              trackColor={{ false: '#767577', true: '#81b0ff' }}
-                              thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
-                            />
-                          </View>
+                            
+                            {isConnectingPlatform && currentPlatform === platform.id ? (
+                              <ActivityIndicator size="small" color={COLORS.primary} />
+                            ) : (
+                              <View style={[
+                                styles.platformToggle,
+                                platformToggles[platform.id] && styles.platformToggleActive
+                              ]}>
+                                {platformToggles[platform.id] && (
+                                  <Icon name="check" size={16} color="#fff" />
+                                )}
+                              </View>
+                            )}
+                          </TouchableOpacity>
                         ))}
                       </View>
                     </ScrollView>
@@ -419,6 +445,35 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                   </>
                 )}
 
+                {step === 'success' && (
+                  <View style={styles.successContainer}>
+                    <View style={styles.successContent}>
+                      {/* Big green checkmark */}
+                      <View style={styles.successIcon}>
+                        <Icon name="check" size={48} color="#fff" />
+                      </View>
+                      
+                      <Text style={styles.successTitle}>Never Connect Again!</Text>
+                      <Text style={styles.successSubtitle}>
+                        Setup for future use complete
+                      </Text>
+                      
+                      <View style={styles.successMessage}>
+                        <Text style={styles.successMessageText}>
+                          Your connections are saved securely. Next time you use {AppName}, 
+                          you'll be automatically connected.
+                        </Text>
+                      </View>
+                      
+                      {/* Auto-progress indicator */}
+                      <View style={styles.progressIndicator}>
+                        <ActivityIndicator size="small" color="#4CAF50" />
+                        <Text style={styles.progressText}>Continuing...</Text>
+                      </View>
+                    </View>
+                  </View>
+                )}
+
                 {step === 'pin' && (
                   <PinInput
                     onSubmit={handlePinSubmit}
@@ -461,6 +516,20 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                     onComplete={() => setStep('connect')}
                   />
                 )}
+                
+                {/* Login WebView for existing account check */}
+                {showLoginWebView && (
+                  <OAuthWebView
+                    url="https://onairos.uk/login" // TODO: Replace with actual login URL
+                    platform="onairos"
+                    onClose={() => setShowLoginWebView(false)}
+                    onSuccess={(result) => {
+                      console.log('Login successful:', result);
+                      handleLoginWebViewComplete();
+                    }}
+                    onComplete={handleLoginWebViewComplete}
+                  />
+                )}
               </SafeAreaView>
             </Animated.View>
           </TouchableWithoutFeedback>
@@ -539,20 +608,20 @@ const styles = StyleSheet.create({
     color: '#000',
   },
   titleContainer: {
-    marginBottom: 30,
+    marginBottom: 20,
   },
   mainTitle: {
-    fontSize: 22,
+    fontSize: 20,
     fontWeight: '600',
     color: '#000',
     textAlign: 'center',
-    marginBottom: 16,
+    marginBottom: 12,
   },
   privacyMessage: {
     fontSize: 14,
     color: '#666',
     textAlign: 'center',
-    marginBottom: 16,
+    marginBottom: 12,
   },
   content: {
     flex: 1,
@@ -560,8 +629,7 @@ const styles = StyleSheet.create({
   },
   scrollContent: {
     flexGrow: 1,
-    paddingBottom: 40,
-    minHeight: '100%',
+    paddingBottom: 20,
   },
   platformsContainer: {
     marginTop: 16,
@@ -570,20 +638,21 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: 16,
+    padding: 12,
     backgroundColor: '#fff',
-    borderRadius: 16,
-    marginBottom: 16,
+    borderRadius: 12,
+    marginBottom: 8,
     borderWidth: 1,
     borderColor: '#eee',
   },
   platformInfo: {
     flexDirection: 'row',
     alignItems: 'center',
+    flex: 1,
   },
   platformIcon: {
-    width: 32,
-    height: 32,
+    width: 24,
+    height: 24,
     marginRight: 12,
   },
   platformName: {
@@ -624,4 +693,88 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
   },
+  alreadyHaveAccountButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  alreadyHaveAccountText: {
+    color: '#666',
+    fontSize: 16,
+  },
+  successContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  successContent: {
+    backgroundColor: '#fff',
+    padding: 24,
+    borderRadius: 16,
+    alignItems: 'center',
+  },
+  successIcon: {
+    backgroundColor: '#4CAF50',
+    borderRadius: 24,
+    padding: 12,
+    marginBottom: 16,
+  },
+  successTitle: {
+    fontSize: 22,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  successSubtitle: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  successMessage: {
+    backgroundColor: '#f0f0f0',
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  successMessageText: {
+    fontSize: 14,
+    color: '#666',
+  },
+  platformToggle: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+  },
+  platformToggleActive: {
+    borderColor: '#000',
+    backgroundColor: '#000',
+  },
+  // Dark mode styles
+  darkPlatformItem: {
+    backgroundColor: '#333',
+    borderColor: '#555',
+  },
+  darkText: {
+    color: '#fff',
+  },
+  darkSubText: {
+    color: '#ccc',
+  },
+  progressIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  progressText: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
+    marginLeft: 8,
+  },
 });

package/src/hooks/useCredentials.ts

@@ -1,12 +1,83 @@
 import { useCallback } from 'react';
-import * as Keychain from 'react-native-keychain';
 import { STORAGE_KEYS } from '../constants';
 import type { CredentialsResult } from '../types';
 
+// Create a mock storage for environments without Keychain access
+const mockCredentialStorage: Record<string, any> = {};
+
+// Try to import Keychain, but provide fallbacks if not available
+let Keychain: any = null;
+try {
+  Keychain = require('react-native-keychain');
+} catch (error) {
+  console.warn('react-native-keychain module not available in useCredentials, using mock storage');
+}
+
+// Check if Keychain is properly initialized and available
+const isKeychainAvailable = () => {
+  try {
+    return Keychain && typeof Keychain.getGenericPassword === 'function';
+  } catch (e) {
+    return false;
+  }
+};
+
+// Safe wrapper for getGenericPassword
+const safeGetGenericPassword = async (options: any) => {
+  try {
+    if (isKeychainAvailable()) {
+      return await Keychain.getGenericPassword(options);
+    } else {
+      const key = options?.service || 'default';
+      return mockCredentialStorage[key] || null;
+    }
+  } catch (error) {
+    console.warn('Keychain access failed, using mock storage', error);
+    const key = options?.service || 'default';
+    return mockCredentialStorage[key] || null;
+  }
+};
+
+// Safe wrapper for setGenericPassword
+const safeSetGenericPassword = async (username: string, password: string, options?: any) => {
+  try {
+    if (isKeychainAvailable()) {
+      return await Keychain.setGenericPassword(username, password, options);
+    } else {
+      const key = options?.service || 'default';
+      mockCredentialStorage[key] = { username, password };
+      return true;
+    }
+  } catch (error) {
+    console.warn('Keychain access failed, using mock storage', error);
+    const key = options?.service || 'default';
+    mockCredentialStorage[key] = { username, password };
+    return true;
+  }
+};
+
+// Safe wrapper for resetGenericPassword
+const safeResetGenericPassword = async (options?: any) => {
+  try {
+    if (isKeychainAvailable()) {
+      return await Keychain.resetGenericPassword(options);
+    } else {
+      const key = options?.service || 'default';
+      delete mockCredentialStorage[key];
+      return true;
+    }
+  } catch (error) {
+    console.warn('Keychain access failed, using mock storage', error);
+    const key = options?.service || 'default';
+    delete mockCredentialStorage[key];
+    return true;
+  }
+};
+
 export const useCredentials = () => {
   const hasCredentials = useCallback(async (): Promise<boolean> => {
     try {
-      const credentials = await Keychain.getGenericPassword({
+      const credentials = await safeGetGenericPassword({
         service: STORAGE_KEYS.credentials
       });
       return !!credentials;
@@ -18,7 +89,7 @@ export const useCredentials = () => {
 
   const getCredentials = useCallback(async () => {
     try {
-      const credentials = await Keychain.getGenericPassword({
+      const credentials = await safeGetGenericPassword({
         service: STORAGE_KEYS.credentials
       });
       if (credentials) {
@@ -37,13 +108,17 @@ export const useCredentials = () => {
     accessToken: string
   ): Promise<boolean> => {
     try {
-      const options: Keychain.Options = {
-        accessControl: Keychain.ACCESS_CONTROL.BIOMETRY_ANY,
-        accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED,
+      const options: any = {
         service: STORAGE_KEYS.credentials
       };
 
-      await Keychain.setGenericPassword(
+      // Only use secure storage options on real devices
+      if (isKeychainAvailable()) {
+        options.accessControl = Keychain.ACCESS_CONTROL?.BIOMETRY_ANY;
+        options.accessible = Keychain.ACCESSIBLE?.WHEN_UNLOCKED;
+      }
+
+      await safeSetGenericPassword(
         username,
         JSON.stringify({ userPin, accessToken }),
         options
@@ -57,7 +132,7 @@ export const useCredentials = () => {
 
   const clearCredentials = useCallback(async (): Promise<void> => {
     try {
-      await Keychain.resetGenericPassword({
+      await safeResetGenericPassword({
         service: STORAGE_KEYS.credentials
       });
     } catch (error) {