@onairos/react-native 3.0.37 → 3.0.39

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,9 +255,70 @@ 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 Onairos login WebView');
+    setShowLoginWebView(true);
+  }, []);
+
+  // 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((result?: any) => {
+    console.log('Login WebView completed with result:', result);
+    setShowLoginWebView(false);
+    
+    // If login was successful (detected existing cookies/session)
+    if (result === 'onairos_login_success') {
+      console.log('Existing Onairos account detected, skipping onboarding');
+      // Skip the entire onboarding flow and call onComplete directly
+      onComplete('https://api2.onairos.uk', 'existing-session-token', {
+        existingAccount: true,
+        username: 'existing_user',
+        skipOnboarding: true,
+      });
+    }
+    // If no existing account found, continue with normal onboarding
+  }, [onComplete]);
+
   const handlePinSubmit = useCallback(async (userPin: string) => {
     setPin(userPin);
     setStep('training');
+    
+    // Save session data for "Never Connect Again" functionality
+    try {
+      const sessionData = {
+        pin: userPin,
+        connections,
+        platformToggles,
+        selectedTier,
+        username,
+        timestamp: Date.now(),
+        appName: AppName,
+      };
+      
+      // Store session data in secure storage for future use
+      console.log('Saving session data for future "Never Connect Again" functionality:', sessionData);
+      
+      // TODO: Implement actual secure storage of session data
+      // This would typically involve:
+      // 1. Storing encrypted session data locally
+      // 2. Setting cookies in WebView for onairos.uk domain
+      // 3. Storing authentication tokens securely
+      
+      // For now, we'll simulate this with console logging
+      console.log('Session data saved - future apps will detect existing account');
+      
+    } catch (error) {
+      console.error('Failed to save session data:', error);
+    }
+    
     // Simulate training progress over 10 seconds
     let progress = 0;
     const interval = setInterval(() => {
@@ -296,10 +336,11 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
           platformToggles,
           selectedTier,
           tierData: requestData?.[selectedTier],
+          sessionSaved: true, // Indicate that session was saved
         });
       }
     }, 1000); // Update every 1 second
-  }, [connections, onComplete, selectedTier, requestData, platformToggles]);
+  }, [connections, onComplete, selectedTier, requestData, platformToggles, username, AppName]);
 
   const canProceedToPin = useCallback(() => {
     // Check if at least one platform is toggled on
@@ -307,9 +348,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 +397,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 +429,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 +445,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 +485,36 @@ 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}>
+                        Your login session has been saved
+                      </Text>
+                      
+                      <View style={styles.successMessage}>
+                        <Text style={styles.successMessageText}>
+                          Your Onairos account and platform connections are now saved in your browser cookies. 
+                          Next time you use any app with Onairos, you'll be automatically signed in without 
+                          needing to reconnect your accounts.
+                        </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 +557,17 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                     onComplete={() => setStep('connect')}
                   />
                 )}
+                
+                {/* Login WebView for existing account check */}
+                {showLoginWebView && (
+                  <OAuthWebView
+                    url="https://onairos.uk/signin" 
+                    platform="onairos"
+                    onClose={() => setShowLoginWebView(false)}
+                    onSuccess={handleLoginWebViewComplete}
+                    onComplete={handleLoginWebViewComplete}
+                  />
+                )}
               </SafeAreaView>
             </Animated.View>
           </TouchableWithoutFeedback>
@@ -539,20 +646,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 +667,7 @@ const styles = StyleSheet.create({
   },
   scrollContent: {
     flexGrow: 1,
-    paddingBottom: 40,
-    minHeight: '100%',
+    paddingBottom: 20,
   },
   platformsContainer: {
     marginTop: 16,
@@ -570,20 +676,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 +731,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/components/onboarding/OAuthWebView.tsx

@@ -71,6 +71,11 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   const handleNavigationStateChange = (navState: any) => {
     console.log(`Navigation state changed for ${platform}:`, navState.url);
     
+    // Don't process navigation changes while still loading the initial page
+    if (isLoading) {
+      return;
+    }
+    
     // Check for error states first
     if (navState.url.includes('error=') || navState.url.includes('access_denied')) {
       console.log('OAuth error detected:', navState.url);
@@ -78,138 +83,71 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
       return;
     }
     
-    // Check for the final redirect to onairos.uk domain (this means backend callback completed)
-    const isFinalRedirect = (
-      navState.url.includes('onairos.uk/Home') ||
-      navState.url.includes('onairos.uk/home') ||
-      navState.url.includes('onairos.uk/success') ||
-      navState.url.startsWith('https://onairos.uk/Home') ||
-      navState.url.includes('onairos.uk') && navState.url.includes('success')
-    );
-    
-    // Enhanced platform-specific success patterns
-    const platformSuccessPatterns: Record<string, RegExp[]> = {
-      reddit: [
-        /reddit\.com\/api\/v1\/authorize\?done=true/,
-        /reddit\.com\/api\/v1\/authorize\/success/,
-        /reddit\.com.*code=/
-      ],
-      pinterest: [
-        /pinterest\.com\/oauth\/success/,
-        /pinterest\.com\/oauth\/complete/,
-        /pinterest\.com.*code=/,
-        /api2\.onairos\.uk\/pinterest\/callback/,
-        /onairos\.uk.*pinterest/
-      ],
-      linkedin: [
-        /linkedin\.com\/oauth\/success/,
-        /linkedin\.com\/oauth\/complete/,
-        /linkedin\.com\/uas\/oauth2\/authorization\/success/,
-        /linkedin\.com.*code=/
-      ],
-      email: [/success/, /complete/],
-      instagram: [
-        /instagram\.com\/oauth\/authorize\?done=true/,
-        /instagram\.com\/oauth\/success/,
-        /instagram\.com.*code=/,
-        /api2\.onairos\.uk\/instagram\/callback/,
-        /onairos\.uk.*instagram/
-      ],
-      youtube: [
-        /accounts\.google\.com\/o\/oauth2\/approval/,
-        /youtube\.com\/oauth\/success/,
-        /accounts\.google\.com.*code=/,
-        /api2\.onairos\.uk\/youtube\/callback/
-      ]
-    };
-    
-    // Check for platform-specific success patterns
-    const isPlatformSuccess = platform && platformSuccessPatterns[platform] ?
-      platformSuccessPatterns[platform].some(pattern => pattern.test(navState.url)) :
-      false;
-    
-    // Check for callback URLs that might contain the authorization code
-    const isCallbackUrl = (
-      navState.url.includes('/callback') ||
-      navState.url.includes('code=') ||
-      navState.url.includes('token=') ||
-      navState.url.includes('access_token=') ||
-      navState.url.includes('api2.onairos.uk') ||
-      navState.url.includes('oauth_token=')
-    );
-    
-    // Extract authorization code or token if present
-    let authCode = null;
-    if (isCallbackUrl) {
-      console.log('Detected callback URL with possible code/token');
-      
-      // Try to extract code or token using different patterns
-      const codeMatch = navState.url.match(/code=([^&]+)/);
-      const tokenMatch = navState.url.match(/(?:token|access_token)=([^&]+)/);
-      const oauthTokenMatch = navState.url.match(/oauth_token=([^&]+)/);
-      
-      if (codeMatch && codeMatch[1]) {
-        authCode = decodeURIComponent(codeMatch[1]);
-        console.log('OAuth code extracted:', authCode);
-      } else if (tokenMatch && tokenMatch[1]) {
-        authCode = decodeURIComponent(tokenMatch[1]);
-        console.log('OAuth token extracted:', authCode);
-      } else if (oauthTokenMatch && oauthTokenMatch[1]) {
-        authCode = decodeURIComponent(oauthTokenMatch[1]);
-        console.log('OAuth token extracted:', authCode);
-      }
-      
-      // Call onSuccess with the extracted code/token
-      if (authCode) {
-        console.log(`Calling onSuccess for ${platform} with code:`, authCode);
+    // Special handling for Onairos login page (existing account check)
+    if (platform === 'onairos') {
+      // Check if user successfully logged in to Onairos
+      if (navState.url.includes('onairos.uk/Home') || 
+          navState.url.includes('onairos.uk/dashboard') ||
+          navState.url.includes('onairos.uk/profile')) {
+        console.log('Onairos login successful - existing account detected');
         
-        // Clear timeout since OAuth completed successfully
+        // Clear timeout since login completed successfully
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
         }
         
-        onSuccess(authCode);
-        
-        // Close the OAuth window after a short delay
-        setTimeout(() => {
-          if (onComplete) {
-            console.log('Calling onComplete to close OAuth window');
-            onComplete();
-          }
-        }, 1000);
+        onSuccess('onairos_login_success');
+        return;
+      }
+      
+      // If still on login page, don't close
+      if (navState.url.includes('onairos.uk/signin') || 
+          navState.url.includes('onairos.uk/login')) {
+        console.log('Still on Onairos login page, waiting for user to complete login');
         return;
       }
     }
     
-    // If we see the final redirect or platform-specific success, close the OAuth window
-    if (isFinalRedirect || isPlatformSuccess) {
-      console.log(`Detected success for ${platform}`);
+    // For platform OAuth flows, only close when we get the FINAL redirect from Onairos backend
+    // This happens AFTER the user has logged in and the backend has processed the OAuth callback
+    const isFinalOAuthRedirect = (
+      navState.url.includes('onairos.uk/Home') ||
+      navState.url.includes('onairos.uk/home') ||
+      navState.url.includes('onairos.uk/success') ||
+      navState.url.includes('onairos.uk/dashboard') ||
+      (navState.url.includes('onairos.uk') && navState.url.includes('complete'))
+    );
+    
+    // Only close when we get the final redirect from Onairos backend
+    if (isFinalOAuthRedirect) {
+      console.log(`Final OAuth redirect detected for ${platform} - user has completed login`);
       
-      // If we haven't already extracted a code/token, consider this a generic success
-      if (!authCode) {
-        console.log(`Calling onSuccess for ${platform} with generic success`);
-        onSuccess('success');
+      // Clear timeout since OAuth completed successfully
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
       
-      // Close the OAuth window
-      if (onComplete) {
-        console.log('Calling onComplete to close OAuth window');
-        onComplete();
-      }
-    }
-    
-    // Handle specific redirect patterns that indicate completion
-    if (navState.url.includes('api2.onairos.uk') && 
-        (navState.url.includes('callback') || navState.url.includes('success'))) {
-      console.log(`Backend callback detected for ${platform}`);
-      onSuccess('backend_callback_success');
+      onSuccess('oauth_complete');
       
+      // Close the OAuth window after a short delay
       setTimeout(() => {
         if (onComplete) {
+          console.log('Calling onComplete to close OAuth window');
           onComplete();
         }
       }, 1500);
+      return;
     }
+    
+    // Log intermediate steps but don't close the WebView
+    if (navState.url.includes('/callback') || navState.url.includes('code=')) {
+      console.log(`OAuth callback detected for ${platform}, but waiting for final redirect from Onairos backend`);
+      // Don't close here - wait for the final redirect
+      return;
+    }
+    
+    // Log other navigation for debugging
+    console.log(`${platform} OAuth navigation:`, navState.url);
   };
 
   const handleLoadEnd = () => {