🔧 fix(auth): add copy button to disabled password input in reset confirmation
- Import IconCopy from semi-icons for copy functionality - Replace onClick handler with suffix copy button to fix disabled input issue - Use borderless tertiary button as input suffix for better alignment - Update notification messages formatting (colon spacing) - Ensure password copying works even when input field is disabled
This commit is contained in:
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
|
|||||||
import { API, copy, showError, showNotice, getLogo, getSystemName } from '../../helpers';
|
import { API, copy, showError, showNotice, getLogo, getSystemName } from '../../helpers';
|
||||||
import { useSearchParams, Link } from 'react-router-dom';
|
import { useSearchParams, Link } from 'react-router-dom';
|
||||||
import { Button, Card, Form, Typography, Banner } from '@douyinfe/semi-ui';
|
import { Button, Card, Form, Typography, Banner } from '@douyinfe/semi-ui';
|
||||||
import { IconMail, IconLock } from '@douyinfe/semi-icons';
|
import { IconMail, IconLock, IconCopy } from '@douyinfe/semi-icons';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import Background from '/example.png';
|
import Background from '/example.png';
|
||||||
|
|
||||||
@@ -71,7 +71,7 @@ const PasswordResetConfirm = () => {
|
|||||||
let password = res.data.data;
|
let password = res.data.data;
|
||||||
setNewPassword(password);
|
setNewPassword(password);
|
||||||
await copy(password);
|
await copy(password);
|
||||||
showNotice(`${t('密码已重置并已复制到剪贴板')}: ${password}`);
|
showNotice(`${t('密码已重置并已复制到剪贴板:')} ${password}`);
|
||||||
} else {
|
} else {
|
||||||
showError(message);
|
showError(message);
|
||||||
}
|
}
|
||||||
@@ -137,11 +137,19 @@ const PasswordResetConfirm = () => {
|
|||||||
className="!rounded-md"
|
className="!rounded-md"
|
||||||
disabled={true}
|
disabled={true}
|
||||||
prefix={<IconLock />}
|
prefix={<IconLock />}
|
||||||
onClick={(e) => {
|
suffix={
|
||||||
e.target.select();
|
<Button
|
||||||
navigator.clipboard.writeText(newPassword);
|
icon={<IconCopy />}
|
||||||
showNotice(`${t('密码已复制到剪贴板')}: ${newPassword}`);
|
type="tertiary"
|
||||||
}}
|
theme="borderless"
|
||||||
|
onClick={async () => {
|
||||||
|
await copy(newPassword);
|
||||||
|
showNotice(`${t('密码已复制到剪贴板:')} ${newPassword}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('复制')}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -265,7 +265,8 @@
|
|||||||
"设置页脚": "Set Footer",
|
"设置页脚": "Set Footer",
|
||||||
"新版本": "New Version",
|
"新版本": "New Version",
|
||||||
"关闭": "Close",
|
"关闭": "Close",
|
||||||
"密码已重置并已复制到剪贴板": "Password has been reset and copied to clipboard",
|
"密码已重置并已复制到剪贴板:": "Password has been reset and copied to clipboard: ",
|
||||||
|
"密码已复制到剪贴板:": "Password has been copied to clipboard: ",
|
||||||
"密码重置确认": "Password Reset Confirmation",
|
"密码重置确认": "Password Reset Confirmation",
|
||||||
"邮箱地址": "Email address",
|
"邮箱地址": "Email address",
|
||||||
"提交": "Submit",
|
"提交": "Submit",
|
||||||
|
|||||||
Reference in New Issue
Block a user