@onairos/react-native 3.1.16 → 3.1.17

package/src/components/PinInput.tsx

@@ -1,555 +1,555 @@
-import React, { useState, useCallback } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  Dimensions,
-  Keyboard,
-  ActivityIndicator,
-} from 'react-native';
-import { biometricPinService } from '../services/biometricPinService';
-
-const { width } = Dimensions.get('window');
-
-export interface PinInputProps {
-  onSubmit: (pin: string) => void;
-  minLength?: number;
-  requireSpecialChar?: boolean;
-  requireNumber?: boolean;
-  onBack?: () => void;
-  // New prop to enable biometric storage
-  enableBiometricStorage?: boolean;
-  // ✅ NEW: Background training optimization props
-  onBackgroundTrainingStart?: () => Promise<void>;
-  showBackgroundProgress?: boolean;
-  backgroundProgressText?: string;
-}
-
-type InfoStatus = 'default' | 'biometric-unavailable' | 'biometric-failed' | 'storage-error' | 'authenticating';
-
-export const PinInput: React.FC<PinInputProps> = ({
-  onSubmit,
-  minLength = 8,
-  requireSpecialChar = true,
-  requireNumber = true,
-  onBack,
-  enableBiometricStorage = true,
-  // ✅ NEW: Background training optimization props
-  onBackgroundTrainingStart,
-  showBackgroundProgress = false,
-  backgroundProgressText = "Training is starting in the background...",
-}) => {
-  const [pin, setPin] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [showPin, setShowPin] = useState(false);
-  const [isStoringPin, setIsStoringPin] = useState(false);
-  const [infoStatus, setInfoStatus] = useState<InfoStatus>('default');
-  // ✅ NEW: Background training state
-  const [isBackgroundTrainingStarted, setIsBackgroundTrainingStarted] = useState(false);
-
-  // ✅ UPDATED: Make background training conditional, not automatic on mount
-  React.useEffect(() => {
-    // Only start background training if explicitly requested and not already started
-    // This prevents automatic training on component mount
-    if (onBackgroundTrainingStart && !isBackgroundTrainingStarted && showBackgroundProgress) {
-      console.log('🚀 [PIN INPUT] Background training explicitly requested...');
-      setIsBackgroundTrainingStarted(true);
-      
-      onBackgroundTrainingStart().catch(error => {
-        console.error('❌ [PIN INPUT] Background training failed:', error);
-        setIsBackgroundTrainingStarted(false);
-      });
-    }
-  }, [onBackgroundTrainingStart, isBackgroundTrainingStarted, showBackgroundProgress]);
-
-  const validatePin = useCallback((value: string) => {
-    if (value.length < minLength) {
-      return `PIN must be at least ${minLength} characters`;
-    }
-    if (requireSpecialChar && !/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
-      return 'PIN must include a special character';
-    }
-    if (requireNumber && !/\d/.test(value)) {
-      return 'PIN must include a number';
-    }
-    return null;
-  }, [minLength, requireSpecialChar, requireNumber]);
-
-  const handleSubmit = useCallback(async () => {
-    console.log('🔍 [PIN INPUT] handleSubmit called with PIN length:', pin.length);
-    
-    const validationError = validatePin(pin);
-    if (validationError) {
-      console.log('❌ [PIN INPUT] Validation failed:', validationError);
-      setError(validationError);
-      return;
-    }
-
-    console.log('✅ [PIN INPUT] PIN validation passed');
-
-    // If biometric storage is enabled, store PIN securely
-    if (enableBiometricStorage) {
-      console.log('🔐 [PIN INPUT] Biometric storage enabled, starting biometric flow...');
-      setIsStoringPin(true);
-      setInfoStatus('authenticating');
-      
-      try {
-        // Check if biometric is available
-        const biometricAvailable = await biometricPinService.isBiometricAvailable();
-        console.log('📱 [PIN INPUT] Biometric available:', biometricAvailable);
-        
-        if (!biometricAvailable) {
-          console.error('❌ [PIN INPUT] Face ID not available on this device');
-          setInfoStatus('biometric-unavailable');
-          setIsStoringPin(false);
-          return;
-        }
-        
-        // Immediately attempt to store PIN with biometric authentication
-        console.log('🔐 [PIN INPUT] Triggering biometric authentication for PIN storage...');
-        
-        const stored = await biometricPinService.storePinWithBiometric(pin);
-        
-        if (stored) {
-          console.log('✅ [PIN INPUT] PIN stored successfully with biometric protection');
-          
-          // Verify the PIN was actually stored by checking if it can be retrieved
-          const isStored = await biometricPinService.isPinStored();
-          if (isStored) {
-            console.log('✅ [PIN INPUT] PIN storage verified - proceeding with onboarding');
-            onSubmit(pin);
-          } else {
-            console.error('❌ [PIN INPUT] PIN storage verification failed');
-            setInfoStatus('storage-error');
-            setIsStoringPin(false);
-          }
-        } else {
-          // Biometric authentication was cancelled or failed
-          console.warn('⚠️ [PIN INPUT] Biometric authentication failed or was cancelled');
-          setInfoStatus('biometric-failed');
-          setIsStoringPin(false);
-        }
-      } catch (error) {
-        console.error('❌ [PIN INPUT] Error handling biometric PIN storage:', error);
-        setInfoStatus('storage-error');
-        setIsStoringPin(false);
-      }
-    } else {
-      // Biometric storage disabled, proceed normally
-      console.log('🔐 [PIN INPUT] Biometric storage disabled, proceeding normally');
-      onSubmit(pin);
-    }
-  }, [pin, validatePin, onSubmit, enableBiometricStorage]);
-
-  const handlePinChange = useCallback((value: string) => {
-    setPin(value);
-    setError(null);
-    setInfoStatus('default');
-    
-    // Debug logging to help troubleshoot
-    console.log('🔍 [PIN INPUT] PIN changed:', {
-      length: value.length,
-      hasSpecialChar: /[!@#$%^&*(),.?":{}|<>]/.test(value),
-      hasNumber: /\d/.test(value),
-      isValid: !validatePin(value)
-    });
-  }, [validatePin]);
-
-  const handleContinueWithoutBiometric = useCallback(() => {
-    console.warn('⚠️ [PIN INPUT] User chose to continue without biometric security');
-    onSubmit(pin);
-  }, [pin, onSubmit]);
-
-  const handleRetry = useCallback(() => {
-    setInfoStatus('default');
-    handleSubmit();
-  }, [handleSubmit]);
-
-  const getInfoMessage = () => {
-    switch (infoStatus) {
-      case 'biometric-unavailable':
-        return {
-          title: 'Biometric Authentication Not Available',
-          message: 'This device does not support Face ID or Touch ID. Please enable biometric authentication in your device settings to secure your PIN.',
-          type: 'warning' as const,
-          showActions: true,
-        };
-      case 'biometric-failed':
-        return {
-          title: 'Biometric Authentication Failed',
-          message: 'Biometric authentication was cancelled or failed. Your PIN needs to be secured with biometric authentication to proceed.',
-          type: 'warning' as const,
-          showActions: true,
-        };
-      case 'storage-error':
-        return {
-          title: 'Storage Error',
-          message: 'An error occurred while securing your PIN. Would you like to try again?',
-          type: 'error' as const,
-          showActions: true,
-        };
-      case 'authenticating':
-        return {
-          title: 'Authenticating...',
-          message: 'Please complete biometric authentication to secure your PIN.',
-          type: 'info' as const,
-          showActions: false,
-        };
-      default:
-        return {
-          title: 'Secure PIN Storage',
-          message: 'Your PIN will be securely stored locally on your device using biometric authentication (Face ID or Touch ID) for enhanced security.',
-          type: 'info' as const,
-          showActions: false,
-        };
-    }
-  };
-
-  const infoMessage = getInfoMessage();
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.inputSection}>
-        <View style={styles.header}>
-          {onBack && (
-            <TouchableOpacity style={styles.backButton} onPress={onBack}>
-              <Text style={{ fontSize: 24 }}>←</Text>
-            </TouchableOpacity>
-          )}
-          <Text style={styles.title}>Create a PIN</Text>
-        </View>
-        
-        <Text style={styles.subtitle}>
-          A PIN so only you have access to your data
-        </Text>
-        
-        {/* ✅ NEW: Background training progress indicator */}
-        {showBackgroundProgress && isBackgroundTrainingStarted && (
-          <View style={styles.backgroundProgressContainer}>
-            <Text style={styles.backgroundProgressText}>
-              {backgroundProgressText}
-            </Text>
-            <View style={styles.backgroundProgressIndicator}>
-              <ActivityIndicator size="small" color="#007AFF" />
-            </View>
-          </View>
-        )}
-
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={styles.input}
-            value={pin}
-            onChangeText={handlePinChange}
-            secureTextEntry={!showPin}
-            placeholder="e.g. MyPin123!"
-            keyboardType="default"
-            maxLength={20}
-            autoCapitalize="none"
-            autoCorrect={false}
-            returnKeyType="done"
-            onSubmitEditing={() => Keyboard.dismiss()}
-          />
-          <TouchableOpacity
-            style={styles.visibilityButton}
-            onPress={() => setShowPin(!showPin)}
-          >
-            <Text>{showPin ? '👁️' : '👁️‍🗨️'}</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-
-      {error && <Text style={styles.error}>{error}</Text>}
-
-      <View style={styles.requirements}>
-        <Text style={styles.requirementTitle}>PIN Requirements:</Text>
-        <Text style={[styles.requirement, pin.length >= minLength && styles.requirementMet]}>
-          • At least {minLength} characters
-        </Text>
-        {requireSpecialChar && (
-          <Text
-            style={[
-              styles.requirement,
-              /[!@#$%^&*(),.?":{}|<>]/.test(pin) && styles.requirementMet,
-            ]}
-          >
-            • Include a special character
-          </Text>
-        )}
-        {requireNumber && (
-          <Text
-            style={[
-              styles.requirement,
-              /\d/.test(pin) && styles.requirementMet,
-            ]}
-          >
-            • Include a number
-          </Text>
-        )}
-      </View>
-
-      {/* Inline Information Section */}
-      <View style={[
-        styles.infoContainer,
-        infoMessage.type === 'info' && styles.infoContainerInfo,
-        infoMessage.type === 'warning' && styles.infoContainerWarning,
-        infoMessage.type === 'error' && styles.infoContainerError,
-      ]}>
-        <Text style={[
-          styles.infoTitle,
-          infoMessage.type === 'info' && styles.infoTitleInfo,
-          infoMessage.type === 'warning' && styles.infoTitleWarning,
-          infoMessage.type === 'error' && styles.infoTitleError,
-        ]}>
-          {infoMessage.title}
-        </Text>
-        <Text style={[
-          styles.infoMessage,
-          infoMessage.type === 'info' && styles.infoMessageInfo,
-          infoMessage.type === 'warning' && styles.infoMessageWarning,
-          infoMessage.type === 'error' && styles.infoMessageError,
-        ]}>
-          {infoMessage.message}
-        </Text>
-        
-        {infoMessage.showActions && (
-          <View style={styles.infoActions}>
-            <TouchableOpacity
-              style={styles.infoActionButton}
-              onPress={handleRetry}
-            >
-              <Text style={styles.infoActionButtonText}>Try Again</Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[styles.infoActionButton, styles.infoActionButtonSecondary]}
-              onPress={handleContinueWithoutBiometric}
-            >
-              <Text style={[styles.infoActionButtonText, styles.infoActionButtonSecondaryText]}>
-                Continue Without Biometric
-              </Text>
-            </TouchableOpacity>
-          </View>
-        )}
-      </View>
-
-      <View style={styles.footer}>
-        {onBack && (
-          <TouchableOpacity
-            style={styles.cancelButton}
-            onPress={onBack}
-          >
-            <Text style={styles.cancelButtonText}>Back</Text>
-          </TouchableOpacity>
-        )}
-        
-        <TouchableOpacity
-          style={[styles.submitButton, (!pin || isStoringPin || validatePin(pin)) && styles.submitButtonDisabled]}
-          onPress={handleSubmit}
-          disabled={!pin || isStoringPin || !!validatePin(pin)}
-        >
-          <Text style={styles.submitButtonText}>
-            {isStoringPin ? 'Authenticating...' : 'Continue'}
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-    width: width,
-    backgroundColor: '#fff',
-    justifyContent: 'flex-start',
-  },
-  inputSection: {
-    width: '100%',
-    marginTop: 0,
-    paddingTop: 0,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-    paddingVertical: 8,
-  },
-  backButton: {
-    padding: 8,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#333',
-    textAlign: 'center',
-    flex: 1,
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 24,
-    textAlign: 'center',
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: '#CCCCCC',
-    borderRadius: 8,
-    marginBottom: 16,
-  },
-  input: {
-    flex: 1,
-    padding: 12,
-    fontSize: 16,
-  },
-  visibilityButton: {
-    padding: 12,
-  },
-  // Info Container Styles
-  infoContainer: {
-    padding: 16,
-    borderRadius: 12,
-    marginBottom: 16,
-    borderWidth: 1,
-  },
-  infoContainerInfo: {
-    backgroundColor: '#E3F2FD',
-    borderColor: '#2196F3',
-  },
-  infoContainerWarning: {
-    backgroundColor: '#FFF3E0',
-    borderColor: '#FF9800',
-  },
-  infoContainerError: {
-    backgroundColor: '#FFEBEE',
-    borderColor: '#F44336',
-  },
-  infoTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 8,
-  },
-  infoTitleInfo: {
-    color: '#1976D2',
-  },
-  infoTitleWarning: {
-    color: '#F57C00',
-  },
-  infoTitleError: {
-    color: '#D32F2F',
-  },
-  infoMessage: {
-    fontSize: 14,
-    lineHeight: 20,
-    marginBottom: 12,
-  },
-  infoMessageInfo: {
-    color: '#1565C0',
-  },
-  infoMessageWarning: {
-    color: '#E65100',
-  },
-  infoMessageError: {
-    color: '#C62828',
-  },
-  infoActions: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 8,
-  },
-  infoActionButton: {
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    backgroundColor: '#007AFF',
-    marginHorizontal: 4,
-    alignItems: 'center',
-  },
-  infoActionButtonSecondary: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: '#007AFF',
-  },
-  infoActionButtonText: {
-    color: '#fff',
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  infoActionButtonSecondaryText: {
-    color: '#007AFF',
-  },
-  error: {
-    color: '#FF3B30',
-    marginBottom: 16,
-  },
-  requirements: {
-    marginBottom: 24,
-  },
-  requirementTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginBottom: 8,
-    color: '#333',
-  },
-  requirement: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 4,
-  },
-  requirementMet: {
-    color: '#34C759',
-  },
-  footer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginTop: 24,
-    borderTopWidth: 1,
-    borderTopColor: '#eee',
-    paddingTop: 16,
-  },
-  cancelButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  cancelButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  submitButton: {
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 16,
-    backgroundColor: '#000000',
-    alignItems: 'center',
-  },
-  submitButtonDisabled: {
-    opacity: 0.5,
-  },
-  submitButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  // ✅ NEW: Background training progress styles
-  backgroundProgressContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16,
-  },
-  backgroundProgressText: {
-    fontSize: 14,
-    color: '#666',
-    marginRight: 10,
-  },
-  backgroundProgressIndicator: {
-    padding: 5,
-  },
-});
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  Dimensions,
+  Keyboard,
+  ActivityIndicator,
+} from 'react-native';
+import { biometricPinService } from '../services/biometricPinService';
+
+const { width } = Dimensions.get('window');
+
+export interface PinInputProps {
+  onSubmit: (pin: string) => void;
+  minLength?: number;
+  requireSpecialChar?: boolean;
+  requireNumber?: boolean;
+  onBack?: () => void;
+  // New prop to enable biometric storage
+  enableBiometricStorage?: boolean;
+  // ✅ NEW: Background training optimization props
+  onBackgroundTrainingStart?: () => Promise<void>;
+  showBackgroundProgress?: boolean;
+  backgroundProgressText?: string;
+}
+
+type InfoStatus = 'default' | 'biometric-unavailable' | 'biometric-failed' | 'storage-error' | 'authenticating';
+
+export const PinInput: React.FC<PinInputProps> = ({
+  onSubmit,
+  minLength = 8,
+  requireSpecialChar = true,
+  requireNumber = true,
+  onBack,
+  enableBiometricStorage = true,
+  // ✅ NEW: Background training optimization props
+  onBackgroundTrainingStart,
+  showBackgroundProgress = false,
+  backgroundProgressText = "Training is starting in the background...",
+}) => {
+  const [pin, setPin] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [showPin, setShowPin] = useState(false);
+  const [isStoringPin, setIsStoringPin] = useState(false);
+  const [infoStatus, setInfoStatus] = useState<InfoStatus>('default');
+  // ✅ NEW: Background training state
+  const [isBackgroundTrainingStarted, setIsBackgroundTrainingStarted] = useState(false);
+
+  // ✅ UPDATED: Make background training conditional, not automatic on mount
+  React.useEffect(() => {
+    // Only start background training if explicitly requested and not already started
+    // This prevents automatic training on component mount
+    if (onBackgroundTrainingStart && !isBackgroundTrainingStarted && showBackgroundProgress) {
+      console.log('🚀 [PIN INPUT] Background training explicitly requested...');
+      setIsBackgroundTrainingStarted(true);
+      
+      onBackgroundTrainingStart().catch(error => {
+        console.error('❌ [PIN INPUT] Background training failed:', error);
+        setIsBackgroundTrainingStarted(false);
+      });
+    }
+  }, [onBackgroundTrainingStart, isBackgroundTrainingStarted, showBackgroundProgress]);
+
+  const validatePin = useCallback((value: string) => {
+    if (value.length < minLength) {
+      return `PIN must be at least ${minLength} characters`;
+    }
+    if (requireSpecialChar && !/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
+      return 'PIN must include a special character';
+    }
+    if (requireNumber && !/\d/.test(value)) {
+      return 'PIN must include a number';
+    }
+    return null;
+  }, [minLength, requireSpecialChar, requireNumber]);
+
+  const handleSubmit = useCallback(async () => {
+    console.log('🔍 [PIN INPUT] handleSubmit called with PIN length:', pin.length);
+    
+    const validationError = validatePin(pin);
+    if (validationError) {
+      console.log('❌ [PIN INPUT] Validation failed:', validationError);
+      setError(validationError);
+      return;
+    }
+
+    console.log('✅ [PIN INPUT] PIN validation passed');
+
+    // If biometric storage is enabled, store PIN securely
+    if (enableBiometricStorage) {
+      console.log('🔐 [PIN INPUT] Biometric storage enabled, starting biometric flow...');
+      setIsStoringPin(true);
+      setInfoStatus('authenticating');
+      
+      try {
+        // Check if biometric is available
+        const biometricAvailable = await biometricPinService.isBiometricAvailable();
+        console.log('📱 [PIN INPUT] Biometric available:', biometricAvailable);
+        
+        if (!biometricAvailable) {
+          console.error('❌ [PIN INPUT] Face ID not available on this device');
+          setInfoStatus('biometric-unavailable');
+          setIsStoringPin(false);
+          return;
+        }
+        
+        // Immediately attempt to store PIN with biometric authentication
+        console.log('🔐 [PIN INPUT] Triggering biometric authentication for PIN storage...');
+        
+        const stored = await biometricPinService.storePinWithBiometric(pin);
+        
+        if (stored) {
+          console.log('✅ [PIN INPUT] PIN stored successfully with biometric protection');
+          
+          // Verify the PIN was actually stored by checking if it can be retrieved
+          const isStored = await biometricPinService.isPinStored();
+          if (isStored) {
+            console.log('✅ [PIN INPUT] PIN storage verified - proceeding with onboarding');
+            onSubmit(pin);
+          } else {
+            console.error('❌ [PIN INPUT] PIN storage verification failed');
+            setInfoStatus('storage-error');
+            setIsStoringPin(false);
+          }
+        } else {
+          // Biometric authentication was cancelled or failed
+          console.warn('⚠️ [PIN INPUT] Biometric authentication failed or was cancelled');
+          setInfoStatus('biometric-failed');
+          setIsStoringPin(false);
+        }
+      } catch (error) {
+        console.error('❌ [PIN INPUT] Error handling biometric PIN storage:', error);
+        setInfoStatus('storage-error');
+        setIsStoringPin(false);
+      }
+    } else {
+      // Biometric storage disabled, proceed normally
+      console.log('🔐 [PIN INPUT] Biometric storage disabled, proceeding normally');
+      onSubmit(pin);
+    }
+  }, [pin, validatePin, onSubmit, enableBiometricStorage]);
+
+  const handlePinChange = useCallback((value: string) => {
+    setPin(value);
+    setError(null);
+    setInfoStatus('default');
+    
+    // Debug logging to help troubleshoot
+    console.log('🔍 [PIN INPUT] PIN changed:', {
+      length: value.length,
+      hasSpecialChar: /[!@#$%^&*(),.?":{}|<>]/.test(value),
+      hasNumber: /\d/.test(value),
+      isValid: !validatePin(value)
+    });
+  }, [validatePin]);
+
+  const handleContinueWithoutBiometric = useCallback(() => {
+    console.warn('⚠️ [PIN INPUT] User chose to continue without biometric security');
+    onSubmit(pin);
+  }, [pin, onSubmit]);
+
+  const handleRetry = useCallback(() => {
+    setInfoStatus('default');
+    handleSubmit();
+  }, [handleSubmit]);
+
+  const getInfoMessage = () => {
+    switch (infoStatus) {
+      case 'biometric-unavailable':
+        return {
+          title: 'Biometric Authentication Not Available',
+          message: 'This device does not support Face ID or Touch ID. Please enable biometric authentication in your device settings to secure your PIN.',
+          type: 'warning' as const,
+          showActions: true,
+        };
+      case 'biometric-failed':
+        return {
+          title: 'Biometric Authentication Failed',
+          message: 'Biometric authentication was cancelled or failed. Your PIN needs to be secured with biometric authentication to proceed.',
+          type: 'warning' as const,
+          showActions: true,
+        };
+      case 'storage-error':
+        return {
+          title: 'Storage Error',
+          message: 'An error occurred while securing your PIN. Would you like to try again?',
+          type: 'error' as const,
+          showActions: true,
+        };
+      case 'authenticating':
+        return {
+          title: 'Authenticating...',
+          message: 'Please complete biometric authentication to secure your PIN.',
+          type: 'info' as const,
+          showActions: false,
+        };
+      default:
+        return {
+          title: 'Secure PIN Storage',
+          message: 'Your PIN will be securely stored locally on your device using biometric authentication (Face ID or Touch ID) for enhanced security.',
+          type: 'info' as const,
+          showActions: false,
+        };
+    }
+  };
+
+  const infoMessage = getInfoMessage();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputSection}>
+        <View style={styles.header}>
+          {onBack && (
+            <TouchableOpacity style={styles.backButton} onPress={onBack}>
+              <Text style={{ fontSize: 24 }}>←</Text>
+            </TouchableOpacity>
+          )}
+          <Text style={styles.title}>Create a PIN</Text>
+        </View>
+        
+        <Text style={styles.subtitle}>
+          A PIN so only you have access to your data
+        </Text>
+        
+        {/* ✅ NEW: Background training progress indicator */}
+        {showBackgroundProgress && isBackgroundTrainingStarted && (
+          <View style={styles.backgroundProgressContainer}>
+            <Text style={styles.backgroundProgressText}>
+              {backgroundProgressText}
+            </Text>
+            <View style={styles.backgroundProgressIndicator}>
+              <ActivityIndicator size="small" color="#007AFF" />
+            </View>
+          </View>
+        )}
+
+        <View style={styles.inputContainer}>
+          <TextInput
+            style={styles.input}
+            value={pin}
+            onChangeText={handlePinChange}
+            secureTextEntry={!showPin}
+            placeholder="e.g. MyPin123!"
+            keyboardType="default"
+            maxLength={20}
+            autoCapitalize="none"
+            autoCorrect={false}
+            returnKeyType="done"
+            onSubmitEditing={() => Keyboard.dismiss()}
+          />
+          <TouchableOpacity
+            style={styles.visibilityButton}
+            onPress={() => setShowPin(!showPin)}
+          >
+            <Text>{showPin ? '👁️' : '👁️‍🗨️'}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {error && <Text style={styles.error}>{error}</Text>}
+
+      <View style={styles.requirements}>
+        <Text style={styles.requirementTitle}>PIN Requirements:</Text>
+        <Text style={[styles.requirement, pin.length >= minLength && styles.requirementMet]}>
+          • At least {minLength} characters
+        </Text>
+        {requireSpecialChar && (
+          <Text
+            style={[
+              styles.requirement,
+              /[!@#$%^&*(),.?":{}|<>]/.test(pin) && styles.requirementMet,
+            ]}
+          >
+            • Include a special character
+          </Text>
+        )}
+        {requireNumber && (
+          <Text
+            style={[
+              styles.requirement,
+              /\d/.test(pin) && styles.requirementMet,
+            ]}
+          >
+            • Include a number
+          </Text>
+        )}
+      </View>
+
+      {/* Inline Information Section */}
+      <View style={[
+        styles.infoContainer,
+        infoMessage.type === 'info' && styles.infoContainerInfo,
+        infoMessage.type === 'warning' && styles.infoContainerWarning,
+        infoMessage.type === 'error' && styles.infoContainerError,
+      ]}>
+        <Text style={[
+          styles.infoTitle,
+          infoMessage.type === 'info' && styles.infoTitleInfo,
+          infoMessage.type === 'warning' && styles.infoTitleWarning,
+          infoMessage.type === 'error' && styles.infoTitleError,
+        ]}>
+          {infoMessage.title}
+        </Text>
+        <Text style={[
+          styles.infoMessage,
+          infoMessage.type === 'info' && styles.infoMessageInfo,
+          infoMessage.type === 'warning' && styles.infoMessageWarning,
+          infoMessage.type === 'error' && styles.infoMessageError,
+        ]}>
+          {infoMessage.message}
+        </Text>
+        
+        {infoMessage.showActions && (
+          <View style={styles.infoActions}>
+            <TouchableOpacity
+              style={styles.infoActionButton}
+              onPress={handleRetry}
+            >
+              <Text style={styles.infoActionButtonText}>Try Again</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.infoActionButton, styles.infoActionButtonSecondary]}
+              onPress={handleContinueWithoutBiometric}
+            >
+              <Text style={[styles.infoActionButtonText, styles.infoActionButtonSecondaryText]}>
+                Continue Without Biometric
+              </Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+
+      <View style={styles.footer}>
+        {onBack && (
+          <TouchableOpacity
+            style={styles.cancelButton}
+            onPress={onBack}
+          >
+            <Text style={styles.cancelButtonText}>Back</Text>
+          </TouchableOpacity>
+        )}
+        
+        <TouchableOpacity
+          style={[styles.submitButton, (!pin || isStoringPin || validatePin(pin)) && styles.submitButtonDisabled]}
+          onPress={handleSubmit}
+          disabled={!pin || isStoringPin || !!validatePin(pin)}
+        >
+          <Text style={styles.submitButtonText}>
+            {isStoringPin ? 'Authenticating...' : 'Continue'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    width: width,
+    backgroundColor: '#fff',
+    justifyContent: 'flex-start',
+  },
+  inputSection: {
+    width: '100%',
+    marginTop: 0,
+    paddingTop: 0,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+    paddingVertical: 8,
+  },
+  backButton: {
+    padding: 8,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+    flex: 1,
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 24,
+    textAlign: 'center',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#CCCCCC',
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  input: {
+    flex: 1,
+    padding: 12,
+    fontSize: 16,
+  },
+  visibilityButton: {
+    padding: 12,
+  },
+  // Info Container Styles
+  infoContainer: {
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 16,
+    borderWidth: 1,
+  },
+  infoContainerInfo: {
+    backgroundColor: '#E3F2FD',
+    borderColor: '#2196F3',
+  },
+  infoContainerWarning: {
+    backgroundColor: '#FFF3E0',
+    borderColor: '#FF9800',
+  },
+  infoContainerError: {
+    backgroundColor: '#FFEBEE',
+    borderColor: '#F44336',
+  },
+  infoTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  infoTitleInfo: {
+    color: '#1976D2',
+  },
+  infoTitleWarning: {
+    color: '#F57C00',
+  },
+  infoTitleError: {
+    color: '#D32F2F',
+  },
+  infoMessage: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 12,
+  },
+  infoMessageInfo: {
+    color: '#1565C0',
+  },
+  infoMessageWarning: {
+    color: '#E65100',
+  },
+  infoMessageError: {
+    color: '#C62828',
+  },
+  infoActions: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 8,
+  },
+  infoActionButton: {
+    flex: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    backgroundColor: '#007AFF',
+    marginHorizontal: 4,
+    alignItems: 'center',
+  },
+  infoActionButtonSecondary: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: '#007AFF',
+  },
+  infoActionButtonText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  infoActionButtonSecondaryText: {
+    color: '#007AFF',
+  },
+  error: {
+    color: '#FF3B30',
+    marginBottom: 16,
+  },
+  requirements: {
+    marginBottom: 24,
+  },
+  requirementTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+    color: '#333',
+  },
+  requirement: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 4,
+  },
+  requirementMet: {
+    color: '#34C759',
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 24,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    paddingTop: 16,
+  },
+  cancelButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  cancelButtonText: {
+    color: '#666',
+    fontSize: 16,
+  },
+  submitButton: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    backgroundColor: '#000000',
+    alignItems: 'center',
+  },
+  submitButtonDisabled: {
+    opacity: 0.5,
+  },
+  submitButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  // ✅ NEW: Background training progress styles
+  backgroundProgressContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  backgroundProgressText: {
+    fontSize: 14,
+    color: '#666',
+    marginRight: 10,
+  },
+  backgroundProgressIndicator: {
+    padding: 5,
+  },
+});