@onairos/react-native 3.1.18 → 3.2.1

package/src/components/PinCreationScreen.tsx

@@ -1,492 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  TextInput,
-  Alert,
-  ActivityIndicator,
-} from 'react-native';
-import { COLORS } from '../theme';
-import { triggerHaptic, HapticType } from '../utils/haptics';
-import { biometricPinService } from '../services/biometricPinService';
-import { setTemporaryPin } from '../services/pinStorageUtils';
-
-interface PinCreationScreenProps {
-  visible: boolean;
-  onComplete: (pin: string) => void;
-  onBack: () => void;
-}
-
-const PinCreationScreen: React.FC<PinCreationScreenProps> = ({
-  visible,
-  onComplete,
-  onBack,
-}) => {
-  const [pin, setPin] = useState('');
-  const [requirements, setRequirements] = useState({
-    length: false,
-    uppercase: false,
-    number: false,
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  const [biometricAvailable, setBiometricAvailable] = useState(false);
-  const [biometricStatus, setBiometricStatus] = useState<'checking' | 'available' | 'unavailable' | 'storing' | 'success' | 'error'>('checking');
-
-  const validatePin = (pinText: string) => {
-    const newRequirements = {
-      length: pinText.length >= 6,
-      uppercase: /[A-Z]/.test(pinText),
-      number: /[0-9]/.test(pinText),
-    };
-    setRequirements(newRequirements);
-    return Object.values(newRequirements).every(req => req);
-  };
-
-  const handlePinChange = (text: string) => {
-    setPin(text);
-    validatePin(text);
-  };
-
-  const handleContinue = async () => {
-    if (!validatePin(pin)) {
-      triggerHaptic(HapticType.ERROR);
-      Alert.alert('Invalid PIN', 'Please ensure your PIN meets all requirements.');
-      return;
-    }
-
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    setIsLoading(true);
-
-    try {
-      console.log('🔐 Starting PIN creation process...');
-      
-      // Store PIN temporarily for the onboarding flow first
-      setTemporaryPin(pin);
-      console.log('📝 PIN stored temporarily for onboarding');
-
-      // If biometric is available, immediately trigger Face ID authentication
-      if (biometricAvailable) {
-        setBiometricStatus('storing');
-        console.log('🔐 [PIN CREATION] Biometric storage enabled, starting biometric flow...');
-        
-        // Double-check biometric availability right before triggering
-        const biometricStillAvailable = await biometricPinService.isBiometricAvailable();
-        console.log('📱 [PIN CREATION] Biometric available before storage:', biometricStillAvailable);
-        
-        if (!biometricStillAvailable) {
-          console.error('❌ [PIN CREATION] Face ID not available on this device');
-          setBiometricStatus('unavailable');
-          setIsLoading(false);
-          return;
-        }
-        
-        // Immediately attempt to store PIN with biometric authentication
-        console.log('🔐 [PIN CREATION] Triggering biometric authentication for PIN storage...');
-        
-        // This will immediately show the Face ID prompt
-        const stored = await biometricPinService.storePinWithBiometric(pin);
-        
-        if (stored) {
-          console.log('✅ PIN stored successfully with Face ID');
-          
-          // Verify the PIN was actually stored by checking if it can be retrieved
-          const isStored = await biometricPinService.isPinStored();
-          if (isStored) {
-            console.log('✅ PIN storage verified - proceeding with onboarding');
-            setBiometricStatus('success');
-            triggerHaptic(HapticType.SUCCESS);
-            
-            // Brief success state, then continue
-            setTimeout(() => {
-              setIsLoading(false);
-              onComplete(pin);
-            }, 800);
-          } else {
-            console.error('❌ PIN storage verification failed');
-            setBiometricStatus('error');
-            setIsLoading(false);
-            triggerHaptic(HapticType.ERROR);
-            Alert.alert(
-              'PIN Storage Error',
-              'PIN storage verification failed. Please try again.',
-              [{ text: 'OK' }]
-            );
-          }
-        } else {
-          console.log('⚠️ Face ID authentication was cancelled or failed');
-          setBiometricStatus('error');
-          triggerHaptic(HapticType.ERROR);
-          
-          // Show error but still allow continuation
-          Alert.alert(
-            'Face ID Setup',
-            'Face ID authentication was cancelled or failed. Your PIN is still saved securely.',
-            [
-              {
-                text: 'Try Again',
-                onPress: () => {
-                  setIsLoading(false);
-                  setBiometricStatus('available');
-                }
-              },
-              {
-                text: 'Continue Without Face ID',
-                onPress: () => {
-                  setIsLoading(false);
-                  onComplete(pin);
-                }
-              }
-            ]
-          );
-        }
-      } else {
-        console.log('📱 Biometric not available, continuing without Face ID');
-        setBiometricStatus('unavailable');
-        setIsLoading(false);
-        onComplete(pin);
-      }
-    } catch (error) {
-      console.error('❌ Error in PIN creation process:', error);
-      setBiometricStatus('error');
-      setIsLoading(false);
-      triggerHaptic(HapticType.ERROR);
-      Alert.alert(
-        'PIN Creation Error',
-        'There was an issue creating your PIN. Please try again.',
-        [{ text: 'OK' }]
-      );
-    }
-  };
-
-  const handleBack = () => {
-    triggerHaptic(HapticType.BUTTON_PRESS);
-    onBack();
-  };
-
-  // Check biometric availability on component mount
-  useEffect(() => {
-    const checkBiometric = async () => {
-      try {
-        setBiometricStatus('checking');
-        const available = await biometricPinService.isBiometricAvailable();
-        setBiometricAvailable(available);
-        setBiometricStatus(available ? 'available' : 'unavailable');
-        console.log('📱 Biometric availability check:', available);
-      } catch (error) {
-        console.error('❌ Error checking biometric availability:', error);
-        setBiometricAvailable(false);
-        setBiometricStatus('unavailable');
-      }
-    };
-
-    if (visible) {
-      checkBiometric();
-    }
-  }, [visible]);
-
-  const allRequirementsMet = Object.values(requirements).every(req => req);
-
-  if (!visible) return null;
-
-  return (
-    <View style={styles.container}>
-      {/* Title */}
-      <View style={styles.titleContainer}>
-        <Text style={styles.title}>Create a PIN</Text>
-        <Text style={styles.subtitle}>A PIN so only you have access to your data.</Text>
-      </View>
-
-      {/* PIN Input */}
-      <View style={styles.pinContainer}>
-        <TextInput
-          style={styles.pinInput}
-          value={pin}
-          onChangeText={handlePinChange}
-          placeholder="Enter your PIN"
-          secureTextEntry
-          autoFocus
-          maxLength={20}
-        />
-      </View>
-
-      {/* Requirements */}
-      <View style={styles.requirementsContainer}>
-        <Text style={styles.requirementsTitle}>Your PIN must:</Text>
-        
-        <View style={styles.requirementItem}>
-          <View style={[styles.checkbox, requirements.length && styles.checkboxChecked]}>
-            {requirements.length && <Text style={styles.checkmark}>✓</Text>}
-          </View>
-          <Text style={[styles.requirementText, requirements.length && styles.requirementTextMet]}>
-            Be at least 6 characters in length.
-          </Text>
-        </View>
-
-        <View style={styles.requirementItem}>
-          <View style={[styles.checkbox, requirements.uppercase && styles.checkboxChecked]}>
-            {requirements.uppercase && <Text style={styles.checkmark}>✓</Text>}
-          </View>
-          <Text style={[styles.requirementText, requirements.uppercase && styles.requirementTextMet]}>
-            Contain an uppercase letter.
-          </Text>
-        </View>
-
-        <View style={styles.requirementItem}>
-          <View style={[styles.checkbox, requirements.number && styles.checkboxChecked]}>
-            {requirements.number && <Text style={styles.checkmark}>✓</Text>}
-          </View>
-          <Text style={[styles.requirementText, requirements.number && styles.requirementTextMet]}>
-            Contain a number.
-          </Text>
-        </View>
-      </View>
-
-      {/* FaceID Security Card */}
-      <View style={[
-        styles.securityCard,
-        biometricStatus === 'success' && styles.securityCardSuccess,
-        biometricStatus === 'error' && styles.securityCardError
-      ]}>
-        <View style={styles.securityIconContainer}>
-          {biometricStatus === 'checking' && (
-            <ActivityIndicator size="small" color={COLORS.grey600} />
-          )}
-          {biometricStatus === 'storing' && (
-            <ActivityIndicator size="small" color="#D4A536" />
-          )}
-          {biometricStatus === 'available' && (
-            <Text style={styles.securityIcon}>🔐</Text>
-          )}
-          {biometricStatus === 'unavailable' && (
-            <Text style={styles.securityIcon}>⚠️</Text>
-          )}
-          {biometricStatus === 'success' && (
-            <Text style={styles.securityIcon}>✅</Text>
-          )}
-          {biometricStatus === 'error' && (
-            <Text style={styles.securityIcon}>❌</Text>
-          )}
-        </View>
-        <View style={styles.securityTextContainer}>
-          <Text style={styles.securityTitle}>
-            {biometricStatus === 'checking' && 'Checking Face ID...'}
-            {biometricStatus === 'available' && 'Enhanced Security'}
-            {biometricStatus === 'unavailable' && 'Face ID Unavailable'}
-            {biometricStatus === 'storing' && 'Securing with Face ID...'}
-            {biometricStatus === 'success' && 'PIN Secured with Face ID'}
-            {biometricStatus === 'error' && 'Face ID Setup Failed'}
-          </Text>
-          <Text style={styles.securityDescription}>
-            {biometricStatus === 'checking' && 'Verifying Face ID availability on your device.'}
-            {biometricStatus === 'available' && 'We use Face ID to ensure only you can access your data.'}
-            {biometricStatus === 'unavailable' && 'Face ID is not available on this device. Your PIN will be stored securely.'}
-            {biometricStatus === 'storing' && 'Please authenticate with Face ID to secure your PIN.'}
-            {biometricStatus === 'success' && 'Your PIN is now protected with Face ID authentication.'}
-            {biometricStatus === 'error' && 'Face ID setup failed, but your PIN is stored securely.'}
-          </Text>
-        </View>
-      </View>
-
-      {/* Continue Button */}
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity 
-          style={[
-            styles.continueButton,
-            allRequirementsMet && styles.continueButtonActive
-          ]}
-          onPress={handleContinue}
-          disabled={!allRequirementsMet || isLoading}
-        >
-          {isLoading ? (
-            <ActivityIndicator size="small" color="#FFFFFF" />
-          ) : (
-            <Text style={[
-              styles.continueButtonText,
-              allRequirementsMet && styles.continueButtonTextActive
-            ]}>
-              Continue
-            </Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: COLORS.surface,
-    paddingHorizontal: 24,
-    paddingTop: 0,
-  },
-
-  titleContainer: {
-    alignItems: 'center',
-    marginBottom: 15,
-    paddingTop: -10,
-    marginTop: -15,
-  },
-
-  title: {
-    fontSize: 24,
-    fontWeight: '700',
-    color: COLORS.grey800,
-    marginBottom: 8,
-    fontFamily: 'IBM Plex Sans',
-  },
-
-  subtitle: {
-    fontSize: 16,
-    color: COLORS.grey600,
-    lineHeight: 24,
-    fontFamily: 'Inter',
-  },
-
-  pinContainer: {
-    marginBottom: 32,
-  },
-
-  pinInput: {
-    backgroundColor: '#F8F9FA',
-    borderRadius: 12,
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    borderWidth: 1,
-    borderColor: '#E5E5E5',
-  },
-
-  requirementsContainer: {
-    marginBottom: 32,
-  },
-
-  requirementsTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 16,
-    fontFamily: 'Inter',
-  },
-
-  requirementItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    borderWidth: 2,
-    borderColor: '#E5E5E5',
-    marginRight: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  checkboxChecked: {
-    borderColor: '#4CD964',
-    backgroundColor: '#4CD964',
-  },
-
-  checkmark: {
-    color: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
-
-  requirementText: {
-    fontSize: 14,
-    color: COLORS.grey600,
-    fontFamily: 'Inter',
-    flex: 1,
-  },
-
-  requirementTextMet: {
-    color: COLORS.grey800,
-  },
-
-  securityCard: {
-    backgroundColor: '#F8F9FA',
-    borderRadius: 12,
-    padding: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 24,
-    borderWidth: 1,
-    borderColor: '#E5E5E5',
-  },
-
-  securityCardSuccess: {
-    backgroundColor: '#F0FDF4',
-    borderColor: '#22C55E',
-  },
-
-  securityCardError: {
-    backgroundColor: '#FEF2F2',
-    borderColor: '#EF4444',
-  },
-
-  securityIconContainer: {
-    marginRight: 12,
-  },
-
-  securityIcon: {
-    fontSize: 24,
-  },
-
-  securityTextContainer: {
-    flex: 1,
-  },
-
-  securityTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 4,
-    fontFamily: 'Inter',
-  },
-
-  securityDescription: {
-    fontSize: 13,
-    color: COLORS.grey600,
-    lineHeight: 18,
-    fontFamily: 'Inter',
-  },
-
-  buttonContainer: {
-    marginTop: 'auto',
-    paddingBottom: 34,
-  },
-
-  continueButton: {
-    backgroundColor: '#E5E5E5',
-    borderRadius: 25,
-    paddingVertical: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  continueButtonActive: {
-    backgroundColor: '#2D3436',
-  },
-
-  continueButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#999999',
-    fontFamily: 'Inter',
-  },
-
-  continueButtonTextActive: {
-    color: '#FFFFFF',
-  },
-});
-
-export { PinCreationScreen };
-export default PinCreationScreen;