ui

OneKeyHQ · Dec 27, 2024 · a8a9262 · a8a9262
1 parent fa6f0fa
commit a8a9262
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 93 deletions.
diff --git a/packages/components/src/forms/index.ts b/packages/components/src/forms/index.ts
@@ -6,4 +6,5 @@ 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
@@ -3,31 +3,14 @@ import { useEffect, useState } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import {
   CodeField,
-  Cursor,
   useBlurOnFulfill,
   useClearByFocusCell,
 } from 'react-native-confirmation-code-field';
 
-import { IconButton, XStack } from '@onekeyhq/components';
+import { YStack } from '@onekeyhq/components';
 
 export const PIN_CELL_COUNT = 6;
 
-const cellStyles = StyleSheet.create({
-  cell: {
-    flex: 1,
-    fontSize: 30,
-    fontWeight: '700',
-    textAlign: 'center',
-    marginRight: 8,
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: '#eee',
-  },
-  focusCell: {
-    borderColor: '#000',
-  },
-});
-
 const PassCodeInput = ({
   onPinCodeChange,
   onComplete,
@@ -57,6 +40,14 @@ const PassCodeInput = ({
   });
   const [enableMask, setEnableMask] = useState(true);
   const toggleMask = () => setEnableMask((f) => !f);
+
+  const cellStyles = StyleSheet.create({
+    cell: {
+      width: 16,
+      height: 16,
+    },
+  });
+
   const renderCell = ({
     index,
     symbol,
@@ -65,62 +56,73 @@ const PassCodeInput = ({
     index: number;
     symbol: string;
     isFocused: boolean;
-  }) => {
-    let textChild = null;
-    if (symbol) {
-      textChild = enableMask ? '•' : symbol;
-    } else if (isFocused) {
-      textChild = <Cursor />;
-    }
-
-    return (
-      <Text
-        key={index}
-        style={[
-          ...[cellStyles.cell],
-          ...(isFocused ? [cellStyles.focusCell] : []),
-        ]}
-        onLayout={getCellOnLayoutHandler(index)}
-      >
-        {textChild}
-      </Text>
-    );
-  };
+  }) => (
+    // 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"
+        h="$4"
+        backgroundColor={symbol ? '$borderActive' : '$transparent'}
+        borderWidth={1}
+        borderRadius="$full"
+        borderColor="$borderActive"
+      />
+    </Text>
+  );
   useEffect(() => {
     if (pinCodeFocus) {
       pinInputRef.current?.focus();
     }
   }, [pinCodeFocus, pinInputRef]);
 
   return (
-    <XStack gap="$1" minHeight={40}>
-      <CodeField
-        autoFocus={enableAutoFocus}
-        testID={testId}
-        ref={pinInputRef}
-        {...props}
-        rootStyle={{ flex: 1 }}
-        value={pinValue}
-        onChangeText={(text) => {
-          setPinValue(text);
-          onPinCodeChange?.(text);
-          if (text.length === PIN_CELL_COUNT && !disabledComplete) {
-            onComplete?.();
-          }
-        }}
-        cellCount={PIN_CELL_COUNT}
-        keyboardType="number-pad"
-        textContentType="oneTimeCode"
-        renderCell={renderCell}
-      />
-      {showMask ? (
-        <IconButton
-          icon={enableMask ? 'EyeOutline' : 'EyeOffOutline'}
-          onPress={toggleMask}
-        />
-      ) : null}
-    </XStack>
+    <CodeField
+      autoFocus={enableAutoFocus}
+      testID={testId}
+      ref={pinInputRef}
+      rootStyle={{
+        flex: 1,
+        paddingVertical: 32,
+        alignSelf: 'center',
+        width: 200,
+      }}
+      value={pinValue}
+      onChangeText={(text) => {
+        setPinValue(text);
+        onPinCodeChange?.(text);
+        if (text.length === PIN_CELL_COUNT && !disabledComplete) {
+          onComplete?.();
+        }
+      }}
+      cellCount={PIN_CELL_COUNT}
+      keyboardType="number-pad"
+      textContentType="oneTimeCode"
+      renderCell={renderCell}
+      {...props}
+    />
+
+    // <YStack gap="$4">
+    //   {showMask ? (
+    //     <IconButton
+    //       icon={enableMask ? 'EyeOutline' : 'EyeOffOutline'}
+    //       onPress={toggleMask}
+    //     />
+    //   ) : null}
+    // </YStack>
   );
 };
 

diff --git a/packages/kit/src/components/Password/components/PassCodeProtectionDialogContent.tsx b/packages/kit/src/components/Password/components/PassCodeProtectionDialogContent.tsx
@@ -1,28 +1,21 @@
 import { useIntl } from 'react-intl';
 
-import { SizableText, XStack, YStack } from '@onekeyhq/components';
+import { SizableText, XStack } from '@onekeyhq/components';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 
 import PassCodeProtectionSwitch from '../container/PassCodeProtectionSwitch';
 
 const PassCodeProtectionDialogContent = () => {
   const intl = useIntl();
   return (
-    <YStack gap="$2">
-      <SizableText size="$bodySm" color="$textSubdued">
+    <XStack alignItems="center" gap="$3">
+      <SizableText size="$bodyMdMedium" flex={1}>
         {intl.formatMessage({
-          id: ETranslations.auth_Passcode_protection_description,
+          id: ETranslations.Setting_Reset_app_description,
         })}
       </SizableText>
-      <XStack justifyContent="space-between">
-        <SizableText size="$bodyMdMedium">
-          {intl.formatMessage({
-            id: ETranslations.Setting_Reset_app_description,
-          })}
-        </SizableText>
-        <PassCodeProtectionSwitch />
-      </XStack>
-    </YStack>
+      <PassCodeProtectionSwitch />
+    </XStack>
   );
 };
 

diff --git a/packages/kit/src/components/Password/components/PasswordSetup.tsx b/packages/kit/src/components/Password/components/PasswordSetup.tsx
@@ -2,7 +2,14 @@ import { memo, useEffect, useMemo, useState } from 'react';
 
 import { useIntl } from 'react-intl';
 
-import { Button, Form, Input, Unspaced, useForm } from '@onekeyhq/components';
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  Unspaced,
+  useForm,
+} from '@onekeyhq/components';
 import { EPasswordMode } from '@onekeyhq/kit-bg/src/services/ServicePassword/types';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
@@ -193,9 +200,6 @@ const PasswordSetup = ({
       ) : (
         <>
           <Form.Field
-            label={intl.formatMessage({
-              id: ETranslations.auth_new_passcode_form_label,
-            })}
             name="passCode"
             display={passCodeFirstStep ? 'flex' : 'none'}
             rules={{
@@ -238,9 +242,6 @@ const PasswordSetup = ({
             />
           </Form.Field>
           <Form.Field
-            label={intl.formatMessage({
-              id: ETranslations.auth_confirm_passcode_form_label,
-            })}
             display={passCodeFirstStep ? 'none' : 'flex'}
             name="confirmPassCode"
             rules={{
@@ -275,6 +276,7 @@ const PasswordSetup = ({
               testId="confirm-pass-code"
               showMask
             />
+            <Divider />
           </Form.Field>
         </>
       )}
@@ -299,8 +301,8 @@ const PasswordSetup = ({
       </Button>
       {platformEnv.isNative ? (
         <Button
-          size="large"
-          variant="secondary"
+          size="small"
+          variant="tertiary"
           onPress={() => {
             form.reset();
             const newPasswordMode =

diff --git a/packages/kit/src/components/Password/components/PasswordVerify.tsx b/packages/kit/src/components/Password/components/PasswordVerify.tsx
@@ -18,6 +18,7 @@ import {
   Input,
   SizableText,
   XStack,
+  YStack,
   useForm,
 } from '@onekeyhq/components';
 import { EPasswordMode } from '@onekeyhq/kit-bg/src/services/ServicePassword/types';
@@ -264,11 +265,15 @@ const PasswordVerify = ({
             />
           </Form.Field>
           {isEnable && !passwordInput ? (
-            <IconButton
-              icon={biologyAuthIconName}
-              onPress={onBiologyAuth}
-              loading={status.value === EPasswordVerifyStatus.VERIFYING}
-            />
+            <YStack alignSelf="center" pt="$6" scale={1.5}>
+              <IconButton
+                size="large"
+                variant="tertiary"
+                icon={biologyAuthIconName}
+                onPress={onBiologyAuth}
+                loading={status.value === EPasswordVerifyStatus.VERIFYING}
+              />
+            </YStack>
           ) : (
             <>
               {alertText ? (

diff --git a/packages/kit/src/components/Password/container/PasswordSetupContainer.tsx b/packages/kit/src/components/Password/container/PasswordSetupContainer.tsx
@@ -109,6 +109,9 @@ const PasswordSetupContainer = ({ onSetupRes }: IPasswordSetupProps) => {
           title: intl.formatMessage({
             id: ETranslations.auth_Passcode_protection,
           }),
+          description: intl.formatMessage({
+            id: ETranslations.auth_Passcode_protection_description,
+          }),
           renderIcon: (
             <XStack
               w="$14"