@onairos/react-native 1.0.0 → 1.0.1

package/src/components/Overlay.js

@@ -1,854 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  ScrollView,
-  StyleSheet,
-  ActivityIndicator,
-  Image,
-  Dimensions,
-  TextInput,
-  KeyboardAvoidingView,
-  Platform
-} from 'react-native';
-import Modal from 'react-native-modal';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { Othent } from '@othent/kms-react-native';
-import { sha256 } from 'react-native-crypto-js';
-import { getPin } from '../utils/auth';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import axios from 'axios';
-
-const { width, height } = Dimensions.get('window');
-const API_URL = 'https://api2.onairos.uk';
-
-const Overlay = ({
-  setOthentConnected,
-  dataRequester,
-  NoAccount,
-  NoModel,
-  accountInfo,
-  activeModels,
-  avatar,
-  traits,
-  requestData,
-  handleConnectionSelection,
-  changeGranted,
-  granted,
-  allowSubmit,
-  rejectDataRequest,
-  sendDataRequest,
-  isAuthenticated,
-  onLoginSuccess,
-  onClose,
-  setOthentUser,
-  setHashedOthentSub,
-  setEncryptedPin
-}) => {
-  const [currentStep, setCurrentStep] = useState(
-    NoAccount.current ? 'onboarding' : NoModel.current ? 'createModel' : 'dataRequest'
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedConnections, setSelectedConnections] = useState([]);
-  const [pin, setPin] = useState('');
-  const [confirmPin, setConfirmPin] = useState('');
-  const [pinError, setPinError] = useState('');
-  const [selectedSocialAccounts, setSelectedSocialAccounts] = useState([]);
-  const [isTraining, setIsTraining] = useState(false);
-  const [trainingProgress, setTrainingProgress] = useState(0);
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [loginError, setLoginError] = useState('');
-  const [email, setEmail] = useState('');
-
-  // Social media platforms for onboarding
-  const socialPlatforms = [
-    { id: 'reddit', name: 'Reddit', icon: 'https://onairos.sirv.com/Images/reddit-icon.png' },
-    { id: 'instagram', name: 'Instagram', icon: 'https://onairos.sirv.com/Images/instagram-icon.png' },
-    { id: 'pinterest', name: 'Pinterest', icon: 'https://onairos.sirv.com/Images/pinterest-icon.png' },
-    { id: 'twitter', name: 'Twitter', icon: 'https://onairos.sirv.com/Images/twitter-icon.png' },
-    { id: 'facebook', name: 'Facebook', icon: 'https://onairos.sirv.com/Images/facebook-icon.png' }
-  ];
-
-  // Toggle data request selection
-  const toggleDataRequest = (dataRequester, key, index, type, reward) => {
-    const isSelected = !selectedConnections.some(
-      conn => conn.dataRequester === dataRequester && conn.key === key && conn.index === index
-    );
-    
-    if (isSelected) {
-      setSelectedConnections([
-        ...selectedConnections,
-        { dataRequester, key, index, type, reward }
-      ]);
-    } else {
-      setSelectedConnections(
-        selectedConnections.filter(
-          conn => !(conn.dataRequester === dataRequester && conn.key === key && conn.index === index)
-        )
-      );
-    }
-    
-    handleConnectionSelection(dataRequester, key, index, type, reward, isSelected);
-    changeGranted(isSelected ? 1 : -1);
-  };
-
-  // Handle social account selection
-  const toggleSocialAccount = (id) => {
-    if (selectedSocialAccounts.includes(id)) {
-      setSelectedSocialAccounts(selectedSocialAccounts.filter(item => item !== id));
-    } else {
-      setSelectedSocialAccounts([...selectedSocialAccounts, id]);
-    }
-  };
-
-  // Start model training
-  const startTraining = () => {
-    if (selectedSocialAccounts.length === 0) {
-      // Show error - need at least one account
-      return;
-    }
-    
-    setIsTraining(true);
-    setTrainingProgress(0);
-    
-    // Simulate training progress
-    const interval = setInterval(() => {
-      setTrainingProgress(prev => {
-        const newProgress = prev + 5;
-        if (newProgress >= 100) {
-          clearInterval(interval);
-          setTimeout(() => {
-            setIsTraining(false);
-            setCurrentStep('createPin');
-          }, 500);
-          return 100;
-        }
-        return newProgress;
-      });
-    }, 300);
-  };
-
-  // Handle PIN creation
-  const handleCreatePin = () => {
-    if (pin.length < 4) {
-      setPinError('PIN must be at least 4 digits');
-      return;
-    }
-    
-    if (pin !== confirmPin) {
-      setPinError('PINs do not match');
-      return;
-    }
-    
-    setPinError('');
-    completeOnboarding();
-  };
-
-  // Complete the onboarding process
-  const completeOnboarding = async () => {
-    setIsLoading(true);
-    
-    try {
-      // Connect with Othent
-      const appInfo = {
-        name: 'Onairos',
-        version: '1.0.0',
-        env: 'production',
-      };
-      const othent = new Othent({ appInfo, throwErrors: false });
-      const userDetails = await othent.connect();
-      
-      // Hash the user's sub
-      const hashedSub = sha256(userDetails.sub).toString();
-      setHashedOthentSub(hashedSub);
-      setOthentUser(true);
-      
-      // Create account on Onairos server with the selected social accounts
-      const response = await axios.post(`${API_URL}/createAccount`, {
-        othentSub: hashedSub,
-        pin: pin,
-        socialAccounts: selectedSocialAccounts,
-        email: userDetails.email
-      });
-      
-      if (response.status === 200) {
-        // Store the token
-        await AsyncStorage.setItem('onairosToken', response.data.token);
-        await AsyncStorage.setItem('username', response.data.username);
-        
-        // Get the encrypted pin from the server
-        const userOnairosDetails = await getPin(hashedSub);
-        setEncryptedPin(userOnairosDetails.result);
-        
-        setOthentConnected(true);
-        
-        // Move to data request step
-        setCurrentStep('dataRequest');
-      } else {
-        throw new Error('Failed to create account');
-      }
-    } catch (error) {
-      console.error('Onboarding failed:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Handle Othent login
-  const handleOthentLogin = async () => {
-    setIsLoading(true);
-    
-    try {
-      const appInfo = {
-        name: 'Onairos',
-        version: '1.0.0',
-        env: 'production',
-      };
-      const othent = new Othent({ appInfo, throwErrors: false });
-      const userDetails = await othent.connect();
-      
-      // Hash the user's sub
-      const hashedSub = sha256(userDetails.sub).toString();
-      setHashedOthentSub(hashedSub);
-      
-      // Get the encrypted pin from the server
-      const userOnairosDetails = await getPin(hashedSub);
-      
-      if (userOnairosDetails.result === "No user account") {
-        // No account found, move to onboarding
-        NoAccount.current = true;
-        setCurrentStep('onboarding');
-      } else {
-        // Account found, store the encrypted pin
-        setEncryptedPin(userOnairosDetails.result);
-        setOthentUser(true);
-        setOthentConnected(true);
-        
-        // Store the token
-        await AsyncStorage.setItem('onairosToken', userOnairosDetails.token);
-        
-        // Fetch account info
-        await onLoginSuccess(userDetails.email, true);
-      }
-    } catch (error) {
-      console.error('Othent login failed:', error);
-      setLoginError('Authentication failed. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Handle username/password login
-  const handleUsernameLogin = async () => {
-    if (!username || !password) {
-      setLoginError('Please enter both username and password');
-      return;
-    }
-    
-    setIsLoading(true);
-    setLoginError('');
-    
-    try {
-      const response = await axios.post(`${API_URL}/login`, {
-        username,
-        password
-      });
-      
-      if (response.status === 200) {
-        // Store the token
-        await AsyncStorage.setItem('onairosToken', response.data.token);
-        await AsyncStorage.setItem('username', username);
-        
-        // Update authentication state
-        await onLoginSuccess(username, false);
-      } else {
-        setLoginError('Invalid username or password');
-      }
-    } catch (error) {
-      console.error('Login failed:', error);
-      setLoginError('Login failed. Please check your credentials.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Render login form
-  const renderLoginForm = () => (
-    <View style={styles.loginContainer}>
-      <Text style={styles.loginTitle}>Sign in to Onairos</Text>
-      
-      {loginError ? <Text style={styles.errorText}>{loginError}</Text> : null}
-      
-      <View style={styles.inputContainer}>
-        <Text style={styles.inputLabel}>Username</Text>
-        <TextInput
-          style={styles.input}
-          value={username}
-          onChangeText={setUsername}
-          placeholder="Enter your username"
-          autoCapitalize="none"
-        />
-      </View>
-      
-      <View style={styles.inputContainer}>
-        <Text style={styles.inputLabel}>Password</Text>
-        <TextInput
-          style={styles.input}
-          value={password}
-          onChangeText={setPassword}
-          placeholder="Enter your password"
-          secureTextEntry
-        />
-      </View>
-      
-      <TouchableOpacity
-        style={styles.loginButton}
-        onPress={handleUsernameLogin}
-        disabled={isLoading}
-      >
-        {isLoading ? (
-          <ActivityIndicator color="#fff" size="small" />
-        ) : (
-          <Text style={styles.loginButtonText}>Sign In</Text>
-        )}
-      </TouchableOpacity>
-      
-      <View style={styles.divider}>
-        <View style={styles.dividerLine} />
-        <Text style={styles.dividerText}>OR</Text>
-        <View style={styles.dividerLine} />
-      </View>
-      
-      <TouchableOpacity
-        style={styles.othentButton}
-        onPress={handleOthentLogin}
-        disabled={isLoading}
-      >
-        <Image
-          source={{ uri: 'https://onairos.sirv.com/Images/othent-logo.png' }}
-          style={styles.othentLogo}
-        />
-        <Text style={styles.othentButtonText}>Continue with Othent</Text>
-      </TouchableOpacity>
-    </View>
-  );
-
-  // Render onboarding step
-  const renderOnboarding = () => (
-    <View style={styles.onboardingContainer}>
-      <Text style={styles.onboardingTitle}>Connect Your Accounts</Text>
-      <Text style={styles.onboardingSubtitle}>
-        Select the social media accounts you want to connect to Onairos
-      </Text>
-      
-      <View style={styles.socialAccountsContainer}>
-        {socialPlatforms.map(platform => (
-          <TouchableOpacity
-            key={platform.id}
-            style={[
-              styles.socialAccount,
-              selectedSocialAccounts.includes(platform.id) && styles.selectedSocialAccount
-            ]}
-            onPress={() => toggleSocialAccount(platform.id)}
-          >
-            <Image source={{ uri: platform.icon }} style={styles.socialIcon} />
-            <Text style={styles.socialName}>{platform.name}</Text>
-            {selectedSocialAccounts.includes(platform.id) && (
-              <Icon name="check-circle" size={24} color="#4CAF50" style={styles.checkIcon} />
-            )}
-          </TouchableOpacity>
-        ))}
-      </View>
-      
-      <TouchableOpacity
-        style={[
-          styles.nextButton,
-          selectedSocialAccounts.length === 0 && styles.disabledButton
-        ]}
-        onPress={startTraining}
-        disabled={selectedSocialAccounts.length === 0 || isTraining}
-      >
-        {isTraining ? (
-          <ActivityIndicator color="#fff" size="small" />
-        ) : (
-          <Text style={styles.nextButtonText}>Continue</Text>
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-
-  // Render training progress
-  const renderTraining = () => (
-    <View style={styles.trainingContainer}>
-      <Text style={styles.trainingTitle}>Training Your Model</Text>
-      <Text style={styles.trainingSubtitle}>
-        Please wait while we train your personalized AI model
-      </Text>
-      
-      <View style={styles.progressBarContainer}>
-        <View style={[styles.progressBar, { width: `${trainingProgress}%` }]} />
-      </View>
-      
-      <Text style={styles.progressText}>{trainingProgress}% Complete</Text>
-    </View>
-  );
-
-  // Render PIN creation step
-  const renderCreatePin = () => (
-    <View style={styles.pinContainer}>
-      <Text style={styles.pinTitle}>Create Your PIN</Text>
-      <Text style={styles.pinSubtitle}>
-        This PIN will be used to secure your data
-      </Text>
-      
-      {pinError ? <Text style={styles.errorText}>{pinError}</Text> : null}
-      
-      <View style={styles.inputContainer}>
-        <Text style={styles.inputLabel}>PIN</Text>
-        <TextInput
-          style={styles.input}
-          value={pin}
-          onChangeText={setPin}
-          placeholder="Enter a 4-digit PIN"
-          keyboardType="numeric"
-          secureTextEntry
-          maxLength={4}
-        />
-      </View>
-      
-      <View style={styles.inputContainer}>
-        <Text style={styles.inputLabel}>Confirm PIN</Text>
-        <TextInput
-          style={styles.input}
-          value={confirmPin}
-          onChangeText={setConfirmPin}
-          placeholder="Confirm your PIN"
-          keyboardType="numeric"
-          secureTextEntry
-          maxLength={4}
-        />
-      </View>
-      
-      <TouchableOpacity
-        style={styles.nextButton}
-        onPress={handleCreatePin}
-        disabled={isLoading}
-      >
-        {isLoading ? (
-          <ActivityIndicator color="#fff" size="small" />
-        ) : (
-          <Text style={styles.nextButtonText}>Complete Setup</Text>
-        )}
-      </TouchableOpacity>
-    </View>
-  );
-
-  // Render data request step
-  const renderDataRequest = () => (
-    <View style={styles.dataRequestContainer}>
-      <Text style={styles.dataRequestTitle}>
-        {dataRequester} is requesting access to your data
-      </Text>
-      
-      <ScrollView style={styles.requestsScrollView}>
-        {Object.keys(requestData).map((key) => (
-          <View key={key} style={styles.requestSection}>
-            <Text style={styles.requestSectionTitle}>{key} Data Request</Text>
-            <Text style={styles.requestDescription}>{requestData[key].descriptions}</Text>
-            
-            <TouchableOpacity
-              style={[
-                styles.requestToggle,
-                selectedConnections.some(
-                  conn => conn.key === key && conn.dataRequester === dataRequester
-                ) && styles.requestToggleSelected
-              ]}
-              onPress={() => toggleDataRequest(
-                dataRequester,
-                key,
-                0,
-                requestData[key].type,
-                requestData[key].reward
-              )}
-            >
-              <Text style={styles.requestToggleText}>
-                {selectedConnections.some(
-                  conn => conn.key === key && conn.dataRequester === dataRequester
-                )
-                  ? 'Selected'
-                  : 'Select'}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        ))}
-      </ScrollView>
-      
-      <View style={styles.actionButtonsContainer}>
-        <TouchableOpacity
-          style={styles.rejectButton}
-          onPress={rejectDataRequest}
-        >
-          <Text style={styles.rejectButtonText}>Reject</Text>
-        </TouchableOpacity>
-        
-        <TouchableOpacity
-          style={[
-            styles.approveButton,
-            !allowSubmit && styles.disabledButton
-          ]}
-          onPress={sendDataRequest}
-          disabled={!allowSubmit || isLoading}
-        >
-          {isLoading ? (
-            <ActivityIndicator color="#fff" size="small" />
-          ) : (
-            <Text style={styles.approveButtonText}>Approve</Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-
-  // Render content based on current step
-  const renderContent = () => {
-    if (!isAuthenticated && currentStep !== 'onboarding') {
-      return renderLoginForm();
-    }
-    
-    switch (currentStep) {
-      case 'onboarding':
-        return renderOnboarding();
-      case 'training':
-        return renderTraining();
-      case 'createPin':
-        return renderCreatePin();
-      case 'dataRequest':
-        return renderDataRequest();
-      default:
-        return renderDataRequest();
-    }
-  };
-
-  return (
-    <Modal
-      isVisible={true}
-      onBackdropPress={onClose}
-      onBackButtonPress={onClose}
-      style={styles.modal}
-      swipeDirection="down"
-      onSwipeComplete={onClose}
-      propagateSwipe
-      avoidKeyboard
-    >
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.keyboardAvoidingView}
-      >
-        <View style={styles.modalContent}>
-          <View style={styles.modalHeader}>
-            <View style={styles.dragIndicator} />
-            <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-              <Icon name="close" size={24} color="#333" />
-            </TouchableOpacity>
-          </View>
-          
-          {renderContent()}
-        </View>
-      </KeyboardAvoidingView>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0,
-  },
-  keyboardAvoidingView: {
-    width: '100%',
-  },
-  modalContent: {
-    backgroundColor: 'white',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    paddingHorizontal: 20,
-    paddingBottom: 20,
-    maxHeight: height * 0.8,
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 10,
-    position: 'relative',
-  },
-  dragIndicator: {
-    width: 40,
-    height: 5,
-    backgroundColor: '#ccc',
-    borderRadius: 3,
-  },
-  closeButton: {
-    position: 'absolute',
-    right: 0,
-    top: 10,
-  },
-  
-  // Login styles
-  loginContainer: {
-    padding: 16,
-  },
-  loginTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  inputContainer: {
-    marginBottom: 16,
-  },
-  inputLabel: {
-    fontSize: 16,
-    marginBottom: 8,
-    color: '#333',
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: '#ccc',
-    borderRadius: 8,
-    padding: 12,
-    fontSize: 16,
-  },
-  loginButton: {
-    backgroundColor: '#2196F3',
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center',
-    marginTop: 8,
-  },
-  loginButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  divider: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 20,
-  },
-  dividerLine: {
-    flex: 1,
-    height: 1,
-    backgroundColor: '#ccc',
-  },
-  dividerText: {
-    marginHorizontal: 10,
-    color: '#666',
-  },
-  othentButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#ddd',
-  },
-  othentLogo: {
-    width: 24,
-    height: 24,
-    marginRight: 10,
-  },
-  othentButtonText: {
-    fontSize: 16,
-    color: '#333',
-  },
-  
-  // Onboarding styles
-  onboardingContainer: {
-    padding: 16,
-  },
-  onboardingTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8,
-  },
-  onboardingSubtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 20,
-  },
-  socialAccountsContainer: {
-    marginBottom: 20,
-  },
-  socialAccount: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    marginBottom: 10,
-  },
-  selectedSocialAccount: {
-    borderColor: '#4CAF50',
-    backgroundColor: 'rgba(76, 175, 80, 0.1)',
-  },
-  socialIcon: {
-    width: 24,
-    height: 24,
-    marginRight: 16,
-  },
-  socialName: {
-    fontSize: 16,
-    flex: 1,
-  },
-  checkIcon: {
-    marginLeft: 8,
-  },
-  nextButton: {
-    backgroundColor: '#4CAF50',
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center',
-  },
-  nextButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  disabledButton: {
-    backgroundColor: '#ccc',
-  },
-  
-  // Training styles
-  trainingContainer: {
-    padding: 16,
-    alignItems: 'center',
-  },
-  trainingTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8,
-  },
-  trainingSubtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 30,
-    textAlign: 'center',
-  },
-  progressBarContainer: {
-    width: '100%',
-    height: 12,
-    backgroundColor: '#e0e0e0',
-    borderRadius: 6,
-    overflow: 'hidden',
-    marginBottom: 16,
-  },
-  progressBar: {
-    height: '100%',
-    backgroundColor: '#4CAF50',
-  },
-  progressText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#4CAF50',
-  },
-  
-  // PIN styles
-  pinContainer: {
-    padding: 16,
-  },
-  pinTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 8,
-  },
-  pinSubtitle: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 20,
-  },
-  errorText: {
-    color: 'red',
-    marginBottom: 16,
-  },
-  
-  // Data request styles
-  dataRequestContainer: {
-    padding: 16,
-  },
-  dataRequestTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginBottom: 16,
-  },
-  requestsScrollView: {
-    maxHeight: 300,
-  },
-  requestSection: {
-    marginBottom: 20,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8,
-  },
-  requestSectionTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 8,
-  },
-  requestDescription: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 16,
-  },
-  requestToggle: {
-    backgroundColor: '#f5f5f5',
-    padding: 12,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  requestToggleSelected: {
-    backgroundColor: '#4CAF50',
-  },
-  requestToggleText: {
-    fontWeight: 'bold',
-  },
-  actionButtonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 20,
-  },
-  rejectButton: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center',
-    marginRight: 8,
-  },
-  rejectButtonText: {
-    color: '#333',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  approveButton: {
-    flex: 1,
-    backgroundColor: '#4CAF50',
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center',
-    marginLeft: 8,
-  },
-  approveButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});
-
-export default Overlay;