diff --git a/apps/mobile/app/components/auth/two-factor.tsx b/apps/mobile/app/components/auth/two-factor.tsx index e5e0f20a0..d93978179 100644 --- a/apps/mobile/app/components/auth/two-factor.tsx +++ b/apps/mobile/app/components/auth/two-factor.tsx @@ -256,7 +256,8 @@ const TwoFactorVerification = ({ code.current = value; }} onSubmitEditing={onNext} - keyboardType={isRecoveryCode ? "default" : "number-pad"} + keyboardType={isRecoveryCode ? "web-search" : "number-pad"} + showDashAfterDigit={isRecoveryCode ? 5 : undefined} sanitize={(value: string) => { if (isRecoveryCode) { return value.replace(/[^0-9a-zA-Z]/g, "").toUpperCase(); diff --git a/apps/mobile/app/components/ui/pin-input/index.tsx b/apps/mobile/app/components/ui/pin-input/index.tsx index 17c40eb4e..46ebb0719 100644 --- a/apps/mobile/app/components/ui/pin-input/index.tsx +++ b/apps/mobile/app/components/ui/pin-input/index.tsx @@ -32,6 +32,7 @@ import { } from "react-native"; import { Radius, Spacing } from "../../../common/design/spacing"; import { AppFontSize } from "../../../utils/size"; +import Paragraph from "../typography/paragraph"; type PinInputProps = { value: string; @@ -43,6 +44,7 @@ type PinInputProps = { onSubmitEditing?: TextInputProps["onSubmitEditing"]; onChangeText: (value: string) => void; sanitize?: (value: string) => string; + showDashAfterDigit?: number; }; const defaultSanitizer = (value: string) => value; @@ -56,7 +58,8 @@ const PinInput = ({ keyboardType = "number-pad", onSubmitEditing, onChangeText, - sanitize = defaultSanitizer + sanitize = defaultSanitizer, + showDashAfterDigit }: PinInputProps) => { const { colors } = useThemeColors(); const inputRefs = useRef>([]); @@ -257,63 +260,68 @@ const PinInput = ({ const isActive = focusedIndex === index; return ( - focusCell(index)} - > - + focusCell(index)} > - { - inputRefs.current[index] = ref; - if (index === 0 && inputRef) { - inputRef.current = ref; - } - }} - disableFullscreenUI={true} - value={char} - maxLength={1} - keyboardType={keyboardType} - onChangeText={(text) => onCellChange(index, text)} - onKeyPress={(event) => onCellKeyPress(index, event)} - onFocus={() => setFocusedIndex(index)} - onBlur={() => { - setFocusedIndex((current) => - current === index ? null : current - ); - }} - autoCorrect={false} - autoComplete="off" - textContentType="oneTimeCode" - inputMode="numeric" - importantForAutofill="yes" - selectionColor={colors.selected.accent} + - - + > + { + inputRefs.current[index] = ref; + if (index === 0 && inputRef) { + inputRef.current = ref; + } + }} + contextMenuHidden={true} + disableFullscreenUI={true} + value={char} + maxLength={1} + keyboardType={keyboardType} + onChangeText={(text) => onCellChange(index, text)} + onKeyPress={(event) => onCellKeyPress(index, event)} + onFocus={() => setFocusedIndex(index)} + onBlur={() => { + setFocusedIndex((current) => + current === index ? null : current + ); + }} + autoCorrect={false} + autoComplete="off" + textContentType="oneTimeCode" + importantForAutofill="yes" + selectionColor={colors.selected.accent} + style={{ + width: "100%", + height: "100%", + textAlign: "center", + fontSize: AppFontSize.sm, + color: colors.primary.paragraph, + padding: 0, + margin: 0 + }} + onSubmitEditing={onSubmitEditing} + blurOnSubmit={index === length - 1} + returnKeyType={index === length - 1 ? "done" : "next"} + /> + + + {showDashAfterDigit === index + 1 ? ( + - + ) : null} + ); })}