@onairos/react-native 1.0.0

package/src/components/screens/ConnectorScreen.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { View, StyleSheet, SafeAreaView } from 'react-native';
+import { OnboardingHeader } from '../onboarding/OnboardingHeader';
+import { PlatformConnector } from '../onboarding/PlatformConnector';
+import { connectPlatform, disconnectPlatform } from '../../services/oauthService';
+import { getCredentials, updateCredentials } from '../../utils/secureStorage';
+import type { ConnectionStatus } from '../../types';
+
+interface ConnectorScreenProps {
+  onComplete: () => void;
+  onClose: () => void;
+  AppName: string;
+}
+
+export const ConnectorScreen: React.FC<ConnectorScreenProps> = ({
+  onComplete,
+  onClose,
+  AppName,
+}) => {
+  const [connections, setConnections] = useState<ConnectionStatus>({});
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  // Load initial connection status
+  useEffect(() => {
+    loadConnectionStatus();
+  }, []);
+
+  // Load connection status from secure storage
+  const loadConnectionStatus = useCallback(async () => {
+    try {
+      const credentials = await getCredentials();
+      
+      if (credentials?.platforms) {
+        const connectionStatus: ConnectionStatus = {};
+        
+        // Transform platforms data to connection status format
+        Object.entries(credentials.platforms).forEach(([platform, data]) => {
+          if (data && 'username' in data) {
+            connectionStatus[platform as keyof ConnectionStatus] = {
+              userName: data.username,
+            };
+          }
+        });
+        
+        setConnections(connectionStatus);
+      }
+    } catch (error) {
+      console.error('Error loading connection status:', error);
+    }
+  }, []);
+
+  // Handle platform connection
+  const handleConnect = useCallback(async (platform: string) => {
+    try {
+      setIsConnecting(true);
+      
+      // Start OAuth flow
+      const connectionData = await connectPlatform(platform);
+      
+      // Get current credentials
+      const credentials = await getCredentials();
+      
+      if (!credentials) {
+        throw new Error('No credentials found');
+      }
+      
+      // Update platforms in credentials
+      const updatedPlatforms = {
+        ...credentials.platforms,
+        [platform]: {
+          token: connectionData.token,
+          username: connectionData.username,
+          userId: connectionData.userId,
+        },
+      };
+      
+      // Update stored credentials
+      await updateCredentials({
+        platforms: updatedPlatforms,
+      });
+      
+      // Refresh connection status
+      await loadConnectionStatus();
+    } catch (error) {
+      console.error(`Error connecting to ${platform}:`, error);
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [loadConnectionStatus]);
+
+  // Handle platform disconnection
+  const handleDisconnect = useCallback(async (platform: string) => {
+    try {
+      setIsConnecting(true);
+      
+      // Get current credentials
+      const credentials = await getCredentials();
+      
+      if (!credentials || !credentials.platforms) {
+        throw new Error('No credentials or platforms found');
+      }
+      
+      // Create updated platforms object without the disconnected platform
+      const updatedPlatforms = { ...credentials.platforms };
+      delete updatedPlatforms[platform as keyof typeof updatedPlatforms];
+      
+      // Update stored credentials
+      await updateCredentials({
+        platforms: updatedPlatforms,
+      });
+      
+      // Refresh connection status
+      await loadConnectionStatus();
+    } catch (error) {
+      console.error(`Error disconnecting from ${platform}:`, error);
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [loadConnectionStatus]);
+
+  // Check if user can proceed to next step
+  const canProceed = useCallback(() => {
+    const connectedPlatforms = Object.values(connections).filter(Boolean).length;
+    return connectedPlatforms >= 2;
+  }, [connections]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <OnboardingHeader
+        title="Connect Your Platforms"
+        subtitle={`Connecting to ${AppName}`}
+        onClose={onClose}
+      />
+      
+      <PlatformConnector
+        connections={connections}
+        onConnect={handleConnect}
+        onDisconnect={handleDisconnect}
+        isLoading={isConnecting}
+        canProceed={canProceed()}
+        onProceed={onComplete}
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+});

package/src/components/screens/LoadingScreen.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  SafeAreaView,
+} from 'react-native';
+import { COLORS } from '../../constants';
+
+interface LoadingScreenProps {
+  message: string;
+  progress?: number;
+  eta?: string;
+}
+
+export const LoadingScreen: React.FC<LoadingScreenProps> = ({
+  message,
+  progress,
+  eta,
+}) => {
+  // Calculate progress percentage for display
+  const progressPercent = progress ? Math.round(progress * 100) : undefined;
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <ActivityIndicator size="large" color={COLORS.primary} style={styles.spinner} />
+        
+        <Text style={styles.message}>{message}</Text>
+        
+        {progressPercent !== undefined && (
+          <View style={styles.progressContainer}>
+            <View style={styles.progressBarBackground}>
+              <View 
+                style={[
+                  styles.progressBar,
+                  { width: `${progressPercent}%` }
+                ]} 
+              />
+            </View>
+            
+            <Text style={styles.progressText}>{progressPercent}%</Text>
+          </View>
+        )}
+        
+        {eta && <Text style={styles.etaText}>{eta}</Text>}
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    width: '80%',
+    alignItems: 'center',
+    padding: 24,
+  },
+  spinner: {
+    marginBottom: 24,
+  },
+  message: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  progressContainer: {
+    width: '100%',
+    marginBottom: 8,
+  },
+  progressBarBackground: {
+    height: 8,
+    backgroundColor: '#eee',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressBar: {
+    height: '100%',
+    backgroundColor: COLORS.primary,
+  },
+  progressText: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'right',
+  },
+  etaText: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 8,
+  },
+});

package/src/components/screens/PinCreationScreen.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import { View, StyleSheet, SafeAreaView } from 'react-native';
+import { OnboardingHeader } from '../onboarding/OnboardingHeader';
+import { PinInput } from '../onboarding/PinInput';
+import { updateCredentials, getCredentials } from '../../utils/secureStorage';
+
+interface PinCreationScreenProps {
+  onComplete: () => void;
+  onBack: () => void;
+  onClose: () => void;
+  AppName: string;
+}
+
+export const PinCreationScreen: React.FC<PinCreationScreenProps> = ({
+  onComplete,
+  onBack,
+  onClose,
+  AppName,
+}) => {
+  // Handle PIN submission
+  const handlePinSubmit = useCallback(async (pin: string) => {
+    try {
+      // Get current credentials
+      const credentials = await getCredentials();
+      
+      if (!credentials) {
+        throw new Error('No credentials found');
+      }
+      
+      // Update credentials with PIN
+      await updateCredentials({
+        userPin: pin,
+      });
+      
+      // Move to next step
+      onComplete();
+    } catch (error) {
+      console.error('Error saving PIN:', error);
+    }
+  }, [onComplete]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <OnboardingHeader
+        title="Create a PIN"
+        subtitle={`Secure your ${AppName} account`}
+        showBackButton
+        onBack={onBack}
+        onClose={onClose}
+      />
+      
+      <PinInput
+        onSubmit={handlePinSubmit}
+        minLength={8}
+        requireSpecialChar
+        requireNumber
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+});

package/src/constants/index.ts

@@ -0,0 +1,78 @@
+import type { PlatformConfig } from '../types';
+
+export const COLORS = {
+  primary: '#00BFA5',
+  headerBg: '#E0F2F1',
+  text: {
+    primary: '#000000',
+    secondary: '#757575',
+  },
+  border: '#EEEEEE',
+  success: '#4CAF50',
+  error: '#F44336',
+  instagram: '#E4405F',
+  pinterest: '#BD081C',
+  reddit: '#FF4500',
+  youtube: '#FF0000',
+};
+
+export const PLATFORMS: Record<string, PlatformConfig> = {
+  instagram: {
+    name: 'Instagram',
+    icon: 'instagram',
+    color: COLORS.instagram,
+    description: 'Connect your Instagram account to train your AI model',
+  },
+  pinterest: {
+    name: 'Pinterest',
+    icon: 'pinterest',
+    color: COLORS.pinterest,
+    description: 'Use your Pinterest boards for AI training',
+  },
+  reddit: {
+    name: 'Reddit',
+    icon: 'reddit',
+    color: COLORS.reddit,
+    description: 'Connect Reddit to enhance your AI model',
+  },
+  youtube: {
+    name: 'YouTube',
+    icon: 'youtube',
+    color: COLORS.youtube,
+    description: 'Use YouTube data to improve AI recommendations',
+  },
+};
+
+export const API_ENDPOINTS = {
+  base: 'https://api2.onairos.uk',
+  oauth: {
+    instagram: '/instagram/auth',
+    pinterest: '/pinterest/auth',
+    reddit: '/reddit/auth',
+    youtube: '/youtube/auth',
+  },
+  callback: {
+    instagram: '/instagram/callback',
+    pinterest: '/pinterest/callback',
+    reddit: '/reddit/callback',
+    youtube: '/youtube/callback',
+  },
+};
+
+export const STORAGE_KEYS = {
+  credentials: 'onairos_credentials',
+  connections: 'onairos_connections',
+};
+
+export const PIN_REQUIREMENTS = {
+  minLength: 8,
+  requireUppercase: true,
+  requireLowercase: true,
+  requireNumber: true,
+  requireSpecialChar: true,
+};
+
+export const DEEP_LINK_CONFIG = {
+  scheme: 'onairosreact',
+  host: 'authenticate',
+}; 

package/src/hooks/useConnections.ts

@@ -0,0 +1,90 @@
+import { useState, useCallback } from 'react';
+import { Linking } from 'react-native';
+import * as Keychain from 'react-native-keychain';
+import { API_ENDPOINTS, STORAGE_KEYS } from '../constants';
+import type { ConnectionStatus } from '../types';
+
+export const useConnections = () => {
+  const [isConnecting, setIsConnecting] = useState(false);
+
+  const getConnectionStatus = useCallback(async (): Promise<ConnectionStatus> => {
+    try {
+      const stored = await Keychain.getGenericPassword(STORAGE_KEYS.connections);
+      if (stored) {
+        return JSON.parse(stored.password);
+      }
+      return {};
+    } catch (error) {
+      console.error('Error getting connection status:', error);
+      return {};
+    }
+  }, []);
+
+  const saveConnectionStatus = useCallback(async (status: ConnectionStatus) => {
+    try {
+      await Keychain.setGenericPassword(
+        STORAGE_KEYS.connections,
+        JSON.stringify(status)
+      );
+    } catch (error) {
+      console.error('Error saving connection status:', error);
+    }
+  }, []);
+
+  const connectPlatform = useCallback(async (platform: string) => {
+    setIsConnecting(true);
+    try {
+      // Get OAuth URL from API
+      const response = await fetch(
+        `${API_ENDPOINTS.base}${API_ENDPOINTS.oauth[platform as keyof typeof API_ENDPOINTS.oauth]}`
+      );
+      const { url } = await response.json();
+
+      if (!url) {
+        throw new Error('No OAuth URL received');
+      }
+
+      // Open OAuth URL
+      await Linking.openURL(url);
+
+      // Connection status will be updated when the OAuth callback is received
+      // This is handled in the UniversalOnboarding component
+    } catch (error) {
+      console.error(`Error connecting to ${platform}:`, error);
+      throw error;
+    } finally {
+      setIsConnecting(false);
+    }
+  }, []);
+
+  const disconnectPlatform = useCallback(async (platform: string) => {
+    try {
+      const status = await getConnectionStatus();
+      delete status[platform as keyof ConnectionStatus];
+      await saveConnectionStatus(status);
+    } catch (error) {
+      console.error(`Error disconnecting ${platform}:`, error);
+      throw error;
+    }
+  }, [getConnectionStatus, saveConnectionStatus]);
+
+  const handleOAuthCallback = useCallback(async (platform: string, data: any) => {
+    try {
+      const status = await getConnectionStatus();
+      status[platform as keyof ConnectionStatus] = { userName: data.userName };
+      await saveConnectionStatus(status);
+      return true;
+    } catch (error) {
+      console.error('Error handling OAuth callback:', error);
+      return false;
+    }
+  }, [getConnectionStatus, saveConnectionStatus]);
+
+  return {
+    isConnecting,
+    connectPlatform,
+    disconnectPlatform,
+    getConnectionStatus,
+    handleOAuthCallback,
+  };
+}; 

package/src/hooks/useCredentials.ts

@@ -0,0 +1,83 @@
+import { useCallback } from 'react';
+import * as Keychain from 'react-native-keychain';
+import { STORAGE_KEYS } from '../constants';
+import type { CredentialsResult } from '../types';
+
+export const useCredentials = () => {
+  const hasCredentials = useCallback(async (): Promise<boolean> => {
+    try {
+      const credentials = await Keychain.getGenericPassword(STORAGE_KEYS.credentials);
+      return !!credentials;
+    } catch (error) {
+      console.error('Error checking credentials:', error);
+      return false;
+    }
+  }, []);
+
+  const getCredentials = useCallback(async () => {
+    try {
+      const credentials = await Keychain.getGenericPassword(STORAGE_KEYS.credentials);
+      if (credentials) {
+        return JSON.parse(credentials.password);
+      }
+      return null;
+    } catch (error) {
+      console.error('Error getting credentials:', error);
+      return null;
+    }
+  }, []);
+
+  const storeCredentials = useCallback(async (
+    username: string,
+    userPin: string,
+    accessToken: string
+  ): Promise<boolean> => {
+    try {
+      await Keychain.setGenericPassword(
+        STORAGE_KEYS.credentials,
+        JSON.stringify({ username, userPin, accessToken })
+      );
+      return true;
+    } catch (error) {
+      console.error('Error storing credentials:', error);
+      return false;
+    }
+  }, []);
+
+  const clearCredentials = useCallback(async (): Promise<void> => {
+    try {
+      await Keychain.resetGenericPassword(STORAGE_KEYS.credentials);
+    } catch (error) {
+      console.error('Error clearing credentials:', error);
+    }
+  }, []);
+
+  const validateCredentials = useCallback(async (username: string): Promise<CredentialsResult> => {
+    try {
+      const response = await fetch(`https://api2.onairos.uk/validate`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username }),
+      });
+
+      const data = await response.json();
+      return {
+        isValid: data.valid,
+        credentials: data.credentials,
+      };
+    } catch (error) {
+      console.error('Error validating credentials:', error);
+      return { isValid: false };
+    }
+  }, []);
+
+  return {
+    hasCredentials,
+    getCredentials,
+    storeCredentials,
+    clearCredentials,
+    validateCredentials,
+  };
+}; 

package/src/index.js

@@ -0,0 +1,14 @@
+import OnairosButton from './components/OnairosButton';
+import * as AuthUtils from './utils/auth';
+import * as CryptoUtils from './utils/crypto';
+import * as ApiUtils from './utils/api';
+
+// Export the main component
+export default OnairosButton;
+
+// Export utilities for advanced usage
+export {
+  AuthUtils,
+  CryptoUtils,
+  ApiUtils
+};

package/src/index.ts

@@ -0,0 +1,82 @@
+// Components
+export { OnairosButton } from './components/OnairosButton';
+export { UniversalOnboarding } from './components/UniversalOnboarding';
+export { Overlay } from './components/Overlay';
+
+// Screen Components
+export { ConnectorScreen } from './components/screens/ConnectorScreen';
+export { PinCreationScreen } from './components/screens/PinCreationScreen';
+export { LoadingScreen } from './components/screens/LoadingScreen';
+
+// Onboarding Components
+export { OAuthWebView } from './components/onboarding/OAuthWebView';
+export { PlatformConnector } from './components/onboarding/PlatformConnector';
+export { OnboardingHeader } from './components/onboarding/OnboardingHeader';
+export { PinInput } from './components/onboarding/PinInput';
+
+// Hooks
+export { useConnections } from './hooks/useConnections';
+export { useCredentials } from './hooks/useCredentials';
+
+// Utilities
+export { 
+  storeCredentials,
+  getCredentials,
+  hasCredentials,
+  deleteCredentials,
+  updateCredentials,
+  generateDeviceUsername,
+  verifyCredentials,
+} from './utils/secureStorage';
+
+export {
+  validateCredentials,
+  createAccount,
+  authenticate,
+  refreshToken,
+  getPlatformData,
+  getUserProfile,
+  updatePlatformConnections,
+} from './utils/onairosApi';
+
+export {
+  rsaEncrypt,
+  sha256,
+  base64ToBuffer,
+} from './utils/crypto';
+
+export {
+  logDebug,
+  logError,
+  isDebugMode,
+} from './utils/debugHelper';
+
+// Services
+export {
+  connectPlatform,
+  disconnectPlatform,
+  initializeOAuthService,
+  cleanupOAuthService,
+  storePlatformConnection,
+} from './services/oauthService';
+
+// Types
+export type {
+  OnairosButtonProps,
+  UniversalOnboardingProps,
+  ConnectionStatus,
+  PlatformListProps,
+  PinInputProps,
+  TrainingModalProps,
+  OAuthWebViewProps,
+  CredentialsResult,
+  PlatformConfig,
+  ApiResponse,
+} from './types';
+
+export type { OnairosCredentials, StorageOptions } from './utils/secureStorage';
+export type { OAuthConfig } from './services/oauthService';
+export type { ApiErrorType, ApiError } from './utils/onairosApi';
+
+// Constants
+export { COLORS, PLATFORMS, API_ENDPOINTS, STORAGE_KEYS, PIN_REQUIREMENTS, DEEP_LINK_CONFIG } from './constants';