@onairos/react-native 3.0.29 → 3.0.30

package/src/components/onboarding/OAuthWebView.tsx

@@ -1,89 +1,183 @@
-import React, { useCallback, useState } from 'react';
-import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity } from 'react-native';
-import { WebView, WebViewNavigation } from 'react-native-webview';
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  SafeAreaView,
+  Dimensions,
+} from 'react-native';
+import { WebView } from 'react-native-webview';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { COLORS } from '../../constants';
-import type { OAuthWebViewProps } from '../../types';
+
+const { width, height } = Dimensions.get('window');
+
+export interface OAuthWebViewProps {
+  url: string;
+  onClose: () => void;
+  onSuccess: (code: string) => void;
+  platform?: string;
+  onComplete?: () => void;
+}
 
 export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   url,
-  platform,
-  onComplete,
   onClose,
   onSuccess,
+  platform = 'platform',
+  onComplete,
 }) => {
-  const [loading, setLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  
+  console.log('Opening OAuth WebView with URL:', url); // Add logging
 
-  const handleNavigationStateChange = useCallback(
-    (navState: WebViewNavigation) => {
-      console.log('Navigation state changed:', navState.url);
-      
-      // Check for the final redirect to onairos.uk/Home
-      const isFinalRedirect = navState.url.includes('onairos.uk/Home');
-      
-      // Check for Instagram-specific success patterns
-      const isInstagramSuccess = (
-        platform === 'instagram' && 
-        (navState.url.includes('instagram.com/oauth/authorize') || 
-         navState.url.includes('instagram.com/accounts/login') ||
-         navState.url.includes('code='))
-      );
-      
-      // Check for platform-specific success patterns
-      const isYouTubeSuccess = (
-        platform === 'youtube' && 
-        navState.url.includes('accounts.google.com/o/oauth2/approval')
-      );
-      
-      const isLinkedInSuccess = (
-        platform === 'linkedin' && 
-        navState.url.includes('linkedin.com/oauth/v2/authorization/success')
-      );
-      
-      // Check for callback URLs with authorization codes
-      const isCallbackUrl = navState.url.includes('/callback') || navState.url.includes('code=');
-      
-      // If we detect success, close the window and update connection status
-      if (isFinalRedirect || isInstagramSuccess || isYouTubeSuccess || isLinkedInSuccess) {
+  const handleNavigationStateChange = (navState: any) => {
+    console.log(`Navigation state changed for ${platform}:`, navState.url);
+    
+    // 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')
+    );
+    
+    // For YouTube specifically, we need to be more careful about when to close
+    // Only close after the backend callback redirects to onairos.uk/Home
+    if (platform === 'youtube') {
+      // Only trigger success when we see the final redirect from the backend
+      if (isFinalRedirect) {
+        console.log('YouTube OAuth completed - backend callback finished and redirected to Home');
         onSuccess('success');
-        if (onComplete) {
-          onComplete();
-        }
-        return;
-      } else if (isCallbackUrl) {
-        // Extract the authorization code
-        const authCode = extractAuthCode(navState.url);
-        if (authCode) {
-          onSuccess(authCode);
+        
+        // Close the OAuth window after a small delay to ensure redirect is processed
+        setTimeout(() => {
           if (onComplete) {
+            console.log('Closing YouTube OAuth window after callback completion');
             onComplete();
           }
-        }
-        return;
+        }, 500);
       }
-    },
-    [platform, onComplete, onSuccess]
-  );
-
-  const handleLoadEnd = useCallback(() => {
-    setLoading(false);
-  }, []);
-
-  // Extract auth code from redirect URL
-  const extractAuthCode = (redirectUrl: string): string => {
-    try {
-      // First try to extract code from URL parameters
-      const codeMatch = redirectUrl.match(/code=([^&]+)/);
+      return; // Exit early for YouTube to avoid other triggers
+    }
+    
+    // Platform-specific success patterns (for non-YouTube platforms)
+    const platformSuccessPatterns: Record<string, RegExp[]> = {
+      reddit: [
+        /reddit\.com\/api\/v1\/authorize\?done=true/,
+        /reddit\.com\/api\/v1\/authorize\/success/
+      ],
+      pinterest: [
+        /pinterest\.com\/oauth\/success/,
+        /pinterest\.com\/oauth\/complete/
+      ],
+      linkedin: [
+        /linkedin\.com\/oauth\/success/,
+        /linkedin\.com\/oauth\/complete/,
+        /linkedin\.com\/uas\/oauth2\/authorization\/success/
+      ],
+      email: [/success/], // Generic success pattern for email
+      instagram: [
+        /instagram\.com\/oauth\/authorize\?done=true/,
+        /instagram\.com\/oauth\/success/
+      ]
+    };
+    
+    // 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=')
+    );
+    
+    // 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)=([^&]+)/);
+      
       if (codeMatch && codeMatch[1]) {
-        return codeMatch[1];
+        authCode = codeMatch[1];
+        console.log('OAuth code extracted:', authCode);
+      } else if (tokenMatch && tokenMatch[1]) {
+        authCode = tokenMatch[1];
+        console.log('OAuth token extracted:', authCode);
       }
       
-      // If that fails, try parsing as URL
-      const url = new URL(redirectUrl);
-      return url.searchParams.get('code') || '';
-    } catch (error) {
-      console.error('Error extracting auth code:', error);
-      return '';
+      // Call onSuccess with the extracted code/token
+      if (authCode) {
+        onSuccess(authCode);
+      }
+    }
+    
+    // If we see the final redirect or platform-specific success, close the OAuth window
+    if (isFinalRedirect || isPlatformSuccess) {
+      console.log(`Detected success for ${platform}`);
+      
+      // If we haven't already extracted a code/token, consider this a generic success
+      if (!authCode) {
+        onSuccess('success');
+      }
+      
+      // Close the OAuth window
+      if (onComplete) {
+        console.log('Calling onComplete to close OAuth window');
+        onComplete();
+      }
+    }
+  };
+
+  const handleLoadEnd = () => {
+    setIsLoading(false);
+  };
+
+  /**
+   * Get platform-specific icon
+   */
+  const getPlatformIcon = (platform: string): string => {
+    switch (platform) {
+      case 'instagram':
+        return 'photo-camera';
+      case 'youtube':
+        return 'smart-display';
+      case 'pinterest':
+        return 'push-pin';
+      case 'reddit':
+        return 'forum';
+      case 'email':
+        return 'email';
+      default:
+        return 'link';
+    }
+  };
+
+  /**
+   * Get platform-specific color
+   */
+  const getPlatformColor = (platform: string): string => {
+    switch (platform) {
+      case 'instagram':
+        return '#E1306C';
+      case 'youtube':
+        return '#FF0000';
+      case 'pinterest':
+        return '#E60023';
+      case 'reddit':
+        return '#FF4500';
+      case 'email':
+        return '#4285F4';
+      default:
+        return COLORS.primary;
     }
   };
 
@@ -95,10 +189,11 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         </TouchableOpacity>
         <View style={styles.titleContainer}>
           <Icon 
-            name={getPlatformIcon(platform || 'default')} 
+            name={getPlatformIcon(platform)} 
             size={20} 
-            color={getPlatformColor(platform || 'default')} 
+            color={getPlatformColor(platform)} 
           />
+          <Text style={styles.titleText}>{platform.charAt(0).toUpperCase() + platform.slice(1)} OAuth</Text>
         </View>
       </View>
 
@@ -106,65 +201,24 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         source={{ uri: url }}
         onNavigationStateChange={handleNavigationStateChange}
         onLoadEnd={handleLoadEnd}
-        startInLoadingState={true}
         style={styles.webView}
         javaScriptEnabled={true}
         domStorageEnabled={true}
         sharedCookiesEnabled={true}
         thirdPartyCookiesEnabled={true}
-        allowsInlineMediaPlayback={true}
-        mediaPlaybackRequiresUserAction={false}
         userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1"
-        mixedContentMode="compatibility"
-        allowsFullscreenVideo={true}
-        allowsProtectedMedia={true}
       />
 
-      {loading && (
+      {isLoading && (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color={COLORS.primary} />
+          <Text style={styles.loadingText}>Loading {platform}...</Text>
         </View>
       )}
     </SafeAreaView>
   );
 };
 
-/**
- * Get platform-specific icon
- */
-const getPlatformIcon = (platform: string): string => {
-  switch (platform) {
-    case 'instagram':
-      return 'photo-camera';
-    case 'youtube':
-      return 'smart-display';
-    case 'pinterest':
-      return 'push-pin';
-    case 'reddit':
-      return 'forum';
-    default:
-      return 'link';
-  }
-};
-
-/**
- * Get platform-specific color
- */
-const getPlatformColor = (platform: string): string => {
-  switch (platform) {
-    case 'instagram':
-      return '#E1306C';
-    case 'youtube':
-      return '#FF0000';
-    case 'pinterest':
-      return '#E60023';
-    case 'reddit':
-      return '#FF4500';
-    default:
-      return COLORS.primary;
-  }
-};
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -181,7 +235,15 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flex: 1,
+    flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    marginLeft: 8,
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
   },
   closeButton: {
     padding: 8,
@@ -198,4 +260,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 16,
+    color: '#666',
+  },
 });