diff --git a/packages/ui/src/Password/Content.tsx b/packages/ui/src/Password/Content.tsx index 3f6f7151f..366f69ab5 100644 --- 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, }} >
@@ -65,36 +64,33 @@ const Content: React.FC<{ return (
- +
    - {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 ( -
  • - - {isValidating ? : statusIconMap[status]} - {rule.message} - -
  • - ); - })} + + {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 ( +
  • + + {isValidating ? : statusIconMap[status]} + {rule.message} + +
  • + ); + })} +
); diff --git a/packages/ui/src/Password/index.tsx b/packages/ui/src/Password/index.tsx index 914e121d7..d2fb2d87f 100644 --- 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 { @@ -45,6 +44,7 @@ const Password: React.FC = ({ const [fieldError, setFieldError] = useState([]); 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 = ({ = ({ /> } overlayStyle={{ maxWidth: 400 }} + overlayInnerStyle={{ + padding: `${token.padding / 2}px ${token.padding}px ${token.padding}px ${token.padding}px`, + }} > = ({ fontSize: 14, color: token.colorTextTertiary, lineHeight: '22px', + marginTop: token.marginXXS, }} > - {locale.pleaseKeepYourPasswordIn} - { - message.success(locale.copySuccessfully); + {locale.pleaseRememberYourPassword} + + + {locale.copyPassword} + , + + + {locale.copyPassword} + , + ], + tooltips: ['', locale.copySuccessfully], }} - > - {locale.copyPassword} - - {locale.andKeepItProperly} + style={{ marginLeft: token.marginXS }} + /> )} diff --git a/packages/ui/src/Password/locale/en-US.ts b/packages/ui/src/Password/locale/en-US.ts index dc0c5fe51..aae2df715 100644 --- 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 index a61089ba8..a2bbc19ff 100644 --- 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 index c6c036ea0..57f200d05 100644 --- 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: '並妥善保存', };