fix: opt code

Signed-off-by: 王山栋 <[email protected]>
OneKeyHQ · Dec 27, 2024 · e26465d · e26465d
1 parent a8a9262
commit e26465d
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 28 deletions.
diff --git a/packages/components/src/forms/Form/index.tsx b/packages/components/src/forms/Form/index.tsx
@@ -109,13 +109,15 @@ type IFieldProps = Omit<GetProps<typeof Controller>, 'render'> &
     horizontal?: boolean;
     optional?: boolean;
     labelAddon?: string | ReactElement;
+    errorMessageAlign?: 'left' | 'center' | 'right';
   }>;
 
 function Field({
   name,
   label,
   optional,
   display,
+  errorMessageAlign,
   description,
   rules,
   children,
@@ -201,6 +203,7 @@ function Field({
                 <SizableText
                   color="$textCritical"
                   size="$bodyMd"
+                  textAlign={errorMessageAlign}
                   key={error?.message}
                   testID={`${testID}-message`}
                 >

diff --git 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
@@ -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,29 +18,28 @@ const PassCodeInput = ({
   disabledComplete,
   pinCodeFocus,
   enableAutoFocus,
-  showMask,
+  editable,
+  // showMask,
   testId,
 }: {
   onPinCodeChange?: (pin: string) => void;
   onComplete?: () => void;
   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<TextInput>(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;
-    // }
-
     <Text
       key={index}
       style={[...[cellStyles.cell]]}
       onLayout={getCellOnLayoutHandler(index)}
     >
-      {/* {symbol ? (
-          <YStack w="$4" h="$4" borderRadius="$full" bg="$borderActive" />
-        ) : (
-          ''
-        )} */}
       <YStack
         animation="50ms"
         w="$4"
@@ -113,6 +103,7 @@ const PassCodeInput = ({
       textContentType="oneTimeCode"
       renderCell={renderCell}
       {...props}
+      editable={editable}
     />
 
     // <YStack gap="$4">

diff --git a/packages/kit/src/components/Password/components/PasswordSetup.tsx b/packages/kit/src/components/Password/components/PasswordSetup.tsx
@@ -202,6 +202,7 @@ const PasswordSetup = ({
           <Form.Field
             name="passCode"
             display={passCodeFirstStep ? 'flex' : 'none'}
+            errorMessageAlign="center"
             rules={{
               validate: {
                 required: (v) =>
@@ -238,12 +239,12 @@ const PasswordSetup = ({
               }}
               enableAutoFocus
               testId="pass-code"
-              showMask
             />
           </Form.Field>
           <Form.Field
             display={passCodeFirstStep ? 'none' : 'flex'}
             name="confirmPassCode"
+            errorMessageAlign="center"
             rules={{
               validate: {
                 equal: (v, values) => {
@@ -274,7 +275,6 @@ const PasswordSetup = ({
               enableAutoFocus={false}
               pinCodeFocus={passCodeConfirm}
               testId="confirm-pass-code"
-              showMask
             />
             <Divider />
           </Form.Field>

diff --git 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 = ({
             <Input
               selectTextOnFocus
               size="large"
-              editable={status.value !== EPasswordVerifyStatus.VERIFYING}
+              editable={Boolean(
+                status.value !== EPasswordVerifyStatus.VERIFYING &&
+                  !disableInput,
+              )}
               placeholder={intl.formatMessage({
                 id: ETranslations.auth_enter_your_passcode,
               })}
@@ -241,6 +249,7 @@ const PasswordVerify = ({
         <>
           <Form.Field
             name="passCode"
+            errorMessageAlign="center"
             rules={{
               validate: {
                 required: (v) =>
@@ -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"
             />
           </Form.Field>
-          {isEnable && !passwordInput ? (
+          {isEnable ? (
             <YStack alignSelf="center" pt="$6" scale={1.5}>
               <IconButton
                 size="large"

diff --git a/packages/kit/src/components/Password/hooks/usePasswordProtection.ts b/packages/kit/src/components/Password/hooks/usePasswordProtection.ts
@@ -43,7 +43,9 @@ const usePasswordProtection = (isLock: boolean) => {
           id: ETranslations.auth_passcode_cooldown,
         },
         {
-          cooldowntime: Math.floor(passwordErrorProtectionTimeMinutesSurplus),
+          cooldowntime: `${Math.floor(
+            passwordErrorProtectionTimeMinutesSurplus,
+          )} Min`,
         },
       );
     }