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: '並妥善保存',
};