diff --git a/packages/components/src/forms/Form/index.tsx b/packages/components/src/forms/Form/index.tsx index 2f110d49457..a960a3b27af 100644 --- a/packages/components/src/forms/Form/index.tsx +++ b/packages/components/src/forms/Form/index.tsx @@ -109,6 +109,7 @@ type IFieldProps = Omit, 'render'> & horizontal?: boolean; optional?: boolean; labelAddon?: string | ReactElement; + errorMessageAlign?: 'left' | 'center' | 'right'; }>; function Field({ @@ -116,6 +117,7 @@ function Field({ label, optional, display, + errorMessageAlign, description, rules, children, @@ -201,6 +203,7 @@ function Field({ diff --git a/packages/components/src/forms/index.ts b/packages/components/src/forms/index.ts index 3cc60514688..4a7686ba37d 100644 --- a/packages/components/src/forms/index.ts +++ b/packages/components/src/forms/index.ts @@ -6,5 +6,4 @@ export * from './Select'; export * from './Slider'; export * from './Switch'; export * from './TextArea'; -export * from './PinCodeValidator'; export * from './types'; diff --git a/packages/kit/src/components/Password/components/PassCodeInput.tsx b/packages/kit/src/components/Password/components/PassCodeInput.tsx index 13b9f4b686b..a91c8632fdd 100644 --- a/packages/kit/src/components/Password/components/PassCodeInput.tsx +++ b/packages/kit/src/components/Password/components/PassCodeInput.tsx @@ -1,14 +1,15 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { StyleSheet, Text } from 'react-native'; import { CodeField, - useBlurOnFulfill, useClearByFocusCell, } from 'react-native-confirmation-code-field'; import { YStack } from '@onekeyhq/components'; +import type { TextInput } from 'react-native'; + export const PIN_CELL_COUNT = 6; const PassCodeInput = ({ @@ -17,7 +18,8 @@ const PassCodeInput = ({ disabledComplete, pinCodeFocus, enableAutoFocus, - showMask, + editable, + // showMask, testId, }: { onPinCodeChange?: (pin: string) => void; @@ -25,21 +27,19 @@ const PassCodeInput = ({ disabledComplete?: boolean; pinCodeFocus?: boolean; enableAutoFocus?: boolean; + editable?: boolean; testId?: string; - showMask?: boolean; + // showMask?: boolean; }) => { const [pinValue, setPinValue] = useState(''); - const pinInputRef = useBlurOnFulfill({ - value: pinValue, - cellCount: PIN_CELL_COUNT, - }); + const pinInputRef = useRef(null); const [props, getCellOnLayoutHandler] = useClearByFocusCell({ value: pinValue, setValue: setPinValue, }); - const [enableMask, setEnableMask] = useState(true); - const toggleMask = () => setEnableMask((f) => !f); + // const [enableMask, setEnableMask] = useState(true); + // const toggleMask = () => setEnableMask((f) => !f); const cellStyles = StyleSheet.create({ cell: { @@ -51,27 +51,17 @@ const PassCodeInput = ({ const renderCell = ({ index, symbol, - isFocused, - }: { + }: // isFocused, + { index: number; symbol: string; isFocused: boolean; }) => ( - // let textChild = null; - // if (symbol) { - // textChild = enableMask ? '•' : symbol; - // } - - {/* {symbol ? ( - - ) : ( - '' - )} */} // diff --git a/packages/kit/src/components/Password/components/PasswordSetup.tsx b/packages/kit/src/components/Password/components/PasswordSetup.tsx index 8307c8c57e2..ca1e2acdcc1 100644 --- a/packages/kit/src/components/Password/components/PasswordSetup.tsx +++ b/packages/kit/src/components/Password/components/PasswordSetup.tsx @@ -202,6 +202,7 @@ const PasswordSetup = ({ @@ -238,12 +239,12 @@ const PasswordSetup = ({ }} enableAutoFocus testId="pass-code" - showMask /> { @@ -274,7 +275,6 @@ const PasswordSetup = ({ enableAutoFocus={false} pinCodeFocus={passCodeConfirm} testId="confirm-pass-code" - showMask /> diff --git a/packages/kit/src/components/Password/components/PasswordVerify.tsx b/packages/kit/src/components/Password/components/PasswordVerify.tsx index cf309e31e71..d8ab6f0a0b6 100644 --- a/packages/kit/src/components/Password/components/PasswordVerify.tsx +++ b/packages/kit/src/components/Password/components/PasswordVerify.tsx @@ -35,6 +35,7 @@ import PassCodeInput from './PassCodeInput'; interface IPasswordVerifyProps { authType: AuthenticationType[]; isEnable: boolean; + disableInput?: boolean; passwordMode: EPasswordMode; onPasswordChange: (e: any) => void; onBiologyAuth: () => void; @@ -57,6 +58,7 @@ const PasswordVerify = ({ isEnable, alertText, confirmBtnDisabled, + disableInput, status, passwordMode, onBiologyAuth, @@ -156,6 +158,9 @@ const PasswordVerify = ({ const fieldName = passwordMode === EPasswordMode.PASSWORD ? 'password' : 'passCode'; if (status.value === EPasswordVerifyStatus.ERROR) { + if (passwordMode === EPasswordMode.PASSCODE) { + form.setValue(fieldName, ''); + } form.setError(fieldName, { message: status.message }); form.setFocus(fieldName); } else { @@ -212,7 +217,10 @@ const PasswordVerify = ({ @@ -258,13 +267,17 @@ const PasswordVerify = ({ form.setValue('passCode', pin); form.clearErrors('passCode'); }} + editable={Boolean( + status.value !== EPasswordVerifyStatus.VERIFYING && + !disableInput, + )} onComplete={form.handleSubmit(onInputPasswordAuth)} disabledComplete={confirmBtnDisabled} enableAutoFocus testId="pass-code-input" /> - {isEnable && !passwordInput ? ( + {isEnable ? ( { id: ETranslations.auth_passcode_cooldown, }, { - cooldowntime: Math.floor(passwordErrorProtectionTimeMinutesSurplus), + cooldowntime: `${Math.floor( + passwordErrorProtectionTimeMinutesSurplus, + )} Min`, }, ); }