@onairos/react-native 3.1.12 → 3.1.13

package/src/components/PinCreationScreen.tsx

@@ -0,0 +1,492 @@
+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;