improve(ui): Password style

oceanbase · Nov 11, 2024 · 4871c60 · 4871c60
1 parent 806cf0e
commit 4871c60
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 54 deletions.
diff --git a/packages/ui/src/Password/Content.tsx b/packages/ui/src/Password/Content.tsx
@@ -28,16 +28,15 @@ const Content: React.FC<{
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          width: 14,
-          height: 22,
+          height: token.fontSize * token.lineHeight,
         }}
       >
         <div
           style={{
-            width: 6,
-            height: 6,
-            backgroundColor: token.colorTextTertiary,
-            borderRadius: 4,
+            width: 8,
+            height: 8,
+            backgroundColor: token.colorFillSecondary,
+            borderRadius: '50%',
           }}
         />
       </div>
@@ -65,36 +64,33 @@ const Content: React.FC<{
 
   return (
     <div>
-      <Progress
-        percent={value ? percent : 0}
-        strokeColor={strokeColor}
-        showInfo={false}
-        size="small"
-      />
+      <Progress percent={value ? percent : 0} strokeColor={strokeColor} showInfo={false} />
       <ul style={{ margin: 0, marginTop: '10px', listStyle: 'none', padding: '0' }}>
-        {rules?.map((rule, index) => {
-          const isError = fieldError.includes(rule.message);
-          let status: ValidateStatus = 'wait';
-          if (isError) {
-            status = rule.optional ? 'wait' : 'error';
-          } else {
-            status = 'success';
-          }
-          if (!value) {
-            status = 'error';
-          }
-          if (!isTouched) {
-            status = 'wait';
-          }
-          return (
-            <li key={index}>
-              <Space align="start">
-                {isValidating ? <LoadingOutlined /> : statusIconMap[status]}
-                <span style={{ color: token.colorTextSecondary }}>{rule.message}</span>
-              </Space>
-            </li>
-          );
-        })}
+        <Space size={4} direction="vertical">
+          {rules?.map(rule => {
+            const isError = fieldError.includes(rule.message);
+            let status: ValidateStatus = 'wait';
+            if (isError) {
+              status = rule.optional ? 'wait' : 'error';
+            } else {
+              status = 'success';
+            }
+            if (!value) {
+              status = 'error';
+            }
+            if (!isTouched) {
+              status = 'wait';
+            }
+            return (
+              <li key={`${rule.message}`}>
+                <Space size={status === 'wait' ? 14 : 8} align="start">
+                  {isValidating ? <LoadingOutlined /> : statusIconMap[status]}
+                  <span>{rule.message}</span>
+                </Space>
+              </li>
+            );
+          })}
+        </Space>
       </ul>
     </div>
   );

diff --git a/packages/ui/src/Password/index.tsx b/packages/ui/src/Password/index.tsx
@@ -1,9 +1,9 @@
-import { Button, Input, message, Popover } from '@oceanbase/design';
+import { Button, Input, message, Popover, Space, Typography } from '@oceanbase/design';
 import type { PasswordProps as InputPasswordProps } from '@oceanbase/design/es/input';
 import RandExp from 'randexp';
 import React, { useState } from 'react';
 import { theme } from '@oceanbase/design';
-import CopyToClipboard from 'react-copy-to-clipboard';
+import { CheckOutlined, CopyOutlined } from '@oceanbase/icons';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
 import LocaleWrapper from '../locale/LocaleWrapper';
 import type { Validator } from './Content';
@@ -17,10 +17,9 @@ export interface PasswordLocale {
   placeholder: string;
   generatePlaceholder: string;
   randomlyGenerate: string;
-  pleaseKeepYourPasswordIn: string;
+  pleaseRememberYourPassword: string;
   copySuccessfully: string;
   copyPassword: string;
-  andKeepItProperly: string;
 }
 
 export interface PasswordProps extends LocaleWrapperProps, Omit<InputPasswordProps, 'onChange'> {
@@ -45,6 +44,7 @@ const Password: React.FC<PasswordProps> = ({
   const [fieldError, setFieldError] = useState<string[]>([]);
   const [isValidating, setIsValidating] = useState(false);
   const [isTouched, setIsTouched] = useState(false);
+  const [copyHover, setCopyHover] = useState(false);
 
   const defaultRules: Validator[] = [
     {
@@ -102,6 +102,11 @@ const Password: React.FC<PasswordProps> = ({
         <Popover
           trigger="click"
           placement="right"
+          // ref: https://github.com/ant-design/ant-design/issues/5899
+          // @ts-ignore
+          popupAlign={{
+            offset: [48, 0],
+          }}
           content={
             <Content
               isTouched={isTouched}
@@ -112,6 +117,9 @@ const Password: React.FC<PasswordProps> = ({
             />
           }
           overlayStyle={{ maxWidth: 400 }}
+          overlayInnerStyle={{
+            padding: `${token.padding / 2}px ${token.padding}px ${token.padding}px ${token.padding}px`,
+          }}
         >
           <Input.Password
             value={value}
@@ -140,18 +148,27 @@ const Password: React.FC<PasswordProps> = ({
             fontSize: 14,
             color: token.colorTextTertiary,
             lineHeight: '22px',
+            marginTop: token.marginXXS,
           }}
         >
-          {locale.pleaseKeepYourPasswordIn}
-          <CopyToClipboard
-            text={value}
-            onCopy={() => {
-              message.success(locale.copySuccessfully);
+          {locale.pleaseRememberYourPassword}
+          <Typography.Text
+            copyable={{
+              text: value,
+              icon: [
+                <Space key="copy" size={token.marginXXS}>
+                  <CopyOutlined />
+                  <a>{locale.copyPassword}</a>
+                </Space>,
+                <Space key="copy-success" size={token.marginXXS}>
+                  <CheckOutlined />
+                  <a>{locale.copyPassword}</a>
+                </Space>,
+              ],
+              tooltips: ['', locale.copySuccessfully],
             }}
-          >
-            <a>{locale.copyPassword}</a>
-          </CopyToClipboard>
-          {locale.andKeepItProperly}
+            style={{ marginLeft: token.marginXS }}
+          />
         </div>
       )}
     </>

diff --git a/packages/ui/src/Password/locale/en-US.ts b/packages/ui/src/Password/locale/en-US.ts
@@ -7,8 +7,7 @@ export default {
   placeholder: 'Please enter the password',
   generatePlaceholder: 'Enter or randomly generate',
   randomlyGenerate: 'Randomly generate',
-  pleaseKeepYourPasswordIn: 'Please remember your password in mind.',
+  pleaseRememberYourPassword: 'Please remember and keep your password properly.',
   copySuccessfully: 'Copied',
-  copyPassword: ' copy password ',
-  andKeepItProperly: 'and save it securely',
+  copyPassword: 'Copy Password',
 };
diff --git a/packages/ui/src/Password/locale/zh-CN.ts b/packages/ui/src/Password/locale/zh-CN.ts
@@ -5,7 +5,7 @@ export default {
   placeholder: '请输入密码',
   generatePlaceholder: '请输入或随机生成',
   randomlyGenerate: '随机生成',
-  pleaseKeepYourPasswordIn: '请牢记密码，也可',
+  pleaseRememberYourPassword: '请牢记并妥善保存密码',
   copySuccessfully: '复制成功',
   copyPassword: '复制密码',
   andKeepItProperly: '并妥善保存',

diff --git a/packages/ui/src/Password/locale/zh-TW.ts b/packages/ui/src/Password/locale/zh-TW.ts
@@ -5,8 +5,7 @@ export default {
   placeholder: '請輸入密碼',
   generatePlaceholder: '請輸入或隨機生成',
   randomlyGenerate: '隨機生成',
-  pleaseKeepYourPasswordIn: '請牢記密碼，也可',
+  pleaseRememberYourPassword: '請牢記並妥善保存密碼',
   copySuccessfully: '複製成功',
   copyPassword: '複製密碼',
-  andKeepItProperly: '並妥善保存',
 };