@onairos/react-native 3.0.17 → 3.0.19

package/src/components/PinInput.tsx

@@ -1,189 +1,250 @@
-import React, { useState, useCallback } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TextInput,
-  TouchableOpacity,
-  Keyboard,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../constants';
-import type { PinInputProps } from '../types';
-
-export const PinInput: React.FC<PinInputProps> = ({
-  onSubmit,
-  minLength = 8,
-  requireSpecialChar = true,
-  requireNumber = true,
-}) => {
-  const [pin, setPin] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [showPin, setShowPin] = useState(false);
-
-  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(() => {
-    const validationError = validatePin(pin);
-    if (validationError) {
-      setError(validationError);
-      return;
-    }
-    onSubmit(pin);
-  }, [pin, validatePin, onSubmit]);
-
-  const handlePinChange = useCallback((value: string) => {
-    setPin(value);
-    setError(null);
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Create your PIN</Text>
-      <Text style={styles.subtitle}>
-        This PIN will be used to secure your account
-      </Text>
-
-      <View style={styles.inputContainer}>
-        <TextInput
-          style={styles.input}
-          value={pin}
-          onChangeText={handlePinChange}
-          secureTextEntry={!showPin}
-          placeholder="Enter PIN"
-          keyboardType="numeric"
-          maxLength={20}
-          autoCapitalize="none"
-          autoCorrect={false}
-        />
-        <TouchableOpacity
-          style={styles.visibilityButton}
-          onPress={() => setShowPin(!showPin)}
-        >
-          <Icon
-            name={showPin ? 'visibility-off' : 'visibility'}
-            size={24}
-            color={COLORS.text.secondary}
-          />
-        </TouchableOpacity>
-      </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>
-
-      <TouchableOpacity
-        style={[styles.submitButton, !pin && styles.submitButtonDisabled]}
-        onPress={handleSubmit}
-        disabled={!pin}
-      >
-        <Text style={styles.submitButtonText}>Continue</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: '600',
-    marginBottom: 8,
-    color: COLORS.text.primary,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 24,
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: COLORS.border,
-    borderRadius: 8,
-    marginBottom: 16,
-  },
-  input: {
-    flex: 1,
-    padding: 12,
-    fontSize: 16,
-  },
-  visibilityButton: {
-    padding: 12,
-  },
-  error: {
-    color: COLORS.error,
-    marginBottom: 16,
-  },
-  requirements: {
-    marginBottom: 24,
-  },
-  requirementTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    marginBottom: 8,
-    color: COLORS.text.primary,
-  },
-  requirement: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 4,
-  },
-  requirementMet: {
-    color: COLORS.success,
-  },
-  submitButton: {
-    backgroundColor: COLORS.primary,
-    paddingVertical: 16,
-    borderRadius: 12,
-    alignItems: 'center',
-  },
-  submitButtonDisabled: {
-    opacity: 0.5,
-  },
-  submitButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-}); 
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  Keyboard,
+  Dimensions,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS } from '../constants';
+import type { PinInputProps } from '../types';
+
+const { width } = Dimensions.get('window');
+
+export const PinInput: React.FC<PinInputProps> = ({
+  onSubmit,
+  minLength = 8,
+  requireSpecialChar = true,
+  requireNumber = true,
+  onBack,
+}) => {
+  const [pin, setPin] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [showPin, setShowPin] = useState(false);
+
+  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(() => {
+    const validationError = validatePin(pin);
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+    onSubmit(pin);
+  }, [pin, validatePin, onSubmit]);
+
+  const handlePinChange = useCallback((value: string) => {
+    setPin(value);
+    setError(null);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        {onBack && (
+          <TouchableOpacity style={styles.backButton} onPress={onBack}>
+            <Icon name="arrow_back" size={24} color={COLORS.text.primary} />
+          </TouchableOpacity>
+        )}
+        <Text style={styles.title}>Create your PIN</Text>
+        <View style={styles.headerSpacer} />
+      </View>
+      
+      <Text style={styles.subtitle}>
+        This PIN will be used to secure your account
+      </Text>
+
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          value={pin}
+          onChangeText={handlePinChange}
+          secureTextEntry={!showPin}
+          placeholder="Enter PIN"
+          keyboardType="numeric"
+          maxLength={20}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+        <TouchableOpacity
+          style={styles.visibilityButton}
+          onPress={() => setShowPin(!showPin)}
+        >
+          <Icon
+            name={showPin ? 'visibility-off' : 'visibility'}
+            size={24}
+            color={COLORS.text.secondary}
+          />
+        </TouchableOpacity>
+      </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>
+
+      <View style={styles.footer}>
+        {onBack && (
+          <TouchableOpacity
+            style={styles.cancelButton}
+            onPress={onBack}
+          >
+            <Text style={styles.cancelButtonText}>Back</Text>
+          </TouchableOpacity>
+        )}
+        
+        <TouchableOpacity
+          style={[styles.submitButton, !pin && styles.submitButtonDisabled]}
+          onPress={handleSubmit}
+          disabled={!pin}
+        >
+          <Text style={styles.submitButtonText}>Continue</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    width: width,
+    backgroundColor: '#fff',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+    paddingVertical: 8,
+  },
+  backButton: {
+    padding: 8,
+  },
+  headerSpacer: {
+    width: 40, // Same width as backButton for alignment
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: COLORS.text.primary,
+    textAlign: 'center',
+    flex: 1,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 24,
+    textAlign: 'center',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  input: {
+    flex: 1,
+    padding: 12,
+    fontSize: 16,
+  },
+  visibilityButton: {
+    padding: 12,
+  },
+  error: {
+    color: COLORS.error,
+    marginBottom: 16,
+  },
+  requirements: {
+    marginBottom: 24,
+  },
+  requirementTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+    color: COLORS.text.primary,
+  },
+  requirement: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 4,
+  },
+  requirementMet: {
+    color: COLORS.success,
+  },
+  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: COLORS.primary,
+    borderWidth: 1,
+    borderColor: COLORS.primary,
+    alignItems: 'center',
+  },
+  submitButtonDisabled: {
+    opacity: 0.5,
+  },
+  submitButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});