diff --git a/apps/mobile/src/screens/Login/Onboarding2FAInput.tsx b/apps/mobile/src/screens/Login/Onboarding2FAInput.tsx new file mode 100644 index 000000000..f41914d44 --- /dev/null +++ b/apps/mobile/src/screens/Login/Onboarding2FAInput.tsx @@ -0,0 +1,108 @@ +import Clipboard from '@react-native-clipboard/clipboard'; +import React, { useRef } from 'react'; +import { + Alert, + Button, + NativeSyntheticEvent, + StyleSheet, + TextInput, + TextInputKeyPressEventData, + View, +} from 'react-native'; + +type Onboarding2FAInputProps = { + code: string[]; + setCode: React.Dispatch>; + onCodeComplete: (code: string) => void; +}; + +const Onboarding2FAInput: React.FC = ({ + code, + setCode, + onCodeComplete, +}) => { + const inputs = useRef<(TextInput | null)[]>([]); + + const handleChange = (text: string, index: number) => { + const newCode = [...code]; + newCode[index] = text; + setCode(newCode); + + if (text && index < 5) { + inputs.current[index + 1]?.focus(); + } + + if (newCode.join('').length === 6) { + onCodeComplete(newCode.join('')); + } + }; + + const handleKeyPress = (e: NativeSyntheticEvent, index: number) => { + if (e.nativeEvent.key === 'Backspace' && index > 0 && !code[index]) { + inputs.current[index - 1]?.focus(); + } + }; + + const handlePaste = async () => { + const clipboardContent = await Clipboard.getString(); + if (clipboardContent.length === 6) { + const newCode = clipboardContent.split(''); + setCode(newCode); + + if (inputs.current[5]) { + inputs.current[5]?.focus(); + } + + onCodeComplete(newCode.join('')); + } else { + Alert.alert('Invalid Code', 'Clipboard content is not a 6-digit code.'); + } + }; + + return ( + + + {code.map((digit, index) => ( + handleChange(text, index)} + ref={(ref) => (inputs.current[index] = ref)} + onKeyPress={(e) => handleKeyPress(e, index)} + /> + ))} + +