|
|
@@ -1,8 +1,8 @@
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
import { API, copy, showError, showNotice, getLogo, getSystemName } from '../../helpers';
|
|
|
import { useSearchParams, Link } from 'react-router-dom';
|
|
|
-import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
|
|
|
-import { IconMail, IconLock } from '@douyinfe/semi-icons';
|
|
|
+import { Button, Card, Form, Typography, Banner } from '@douyinfe/semi-ui';
|
|
|
+import { IconMail, IconLock, IconCopy } from '@douyinfe/semi-icons';
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
import Background from '/example.png';
|
|
|
|
|
|
@@ -15,13 +15,14 @@ const PasswordResetConfirm = () => {
|
|
|
token: '',
|
|
|
});
|
|
|
const { email, token } = inputs;
|
|
|
+ const isValidResetLink = email && token;
|
|
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
const [disableButton, setDisableButton] = useState(false);
|
|
|
const [countdown, setCountdown] = useState(30);
|
|
|
const [newPassword, setNewPassword] = useState('');
|
|
|
-
|
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
+ const [formApi, setFormApi] = useState(null);
|
|
|
|
|
|
const logo = getLogo();
|
|
|
const systemName = getSystemName();
|
|
|
@@ -30,10 +31,16 @@ const PasswordResetConfirm = () => {
|
|
|
let token = searchParams.get('token');
|
|
|
let email = searchParams.get('email');
|
|
|
setInputs({
|
|
|
- token,
|
|
|
- email,
|
|
|
+ token: token || '',
|
|
|
+ email: email || '',
|
|
|
});
|
|
|
- }, []);
|
|
|
+ if (formApi) {
|
|
|
+ formApi.setValues({
|
|
|
+ email: email || '',
|
|
|
+ newPassword: newPassword || ''
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, [searchParams, newPassword, formApi]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
let countdownInterval = null;
|
|
|
@@ -49,7 +56,10 @@ const PasswordResetConfirm = () => {
|
|
|
}, [disableButton, countdown]);
|
|
|
|
|
|
async function handleSubmit(e) {
|
|
|
- if (!email || !token) return;
|
|
|
+ if (!email || !token) {
|
|
|
+ showError(t('无效的重置链接,请重新发起密码重置请求'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
setDisableButton(true);
|
|
|
setLoading(true);
|
|
|
const res = await API.post(`/api/user/reset`, {
|
|
|
@@ -61,7 +71,7 @@ const PasswordResetConfirm = () => {
|
|
|
let password = res.data.data;
|
|
|
setNewPassword(password);
|
|
|
await copy(password);
|
|
|
- showNotice(`${t('密码已重置并已复制到剪贴板')}: ${password}`);
|
|
|
+ showNotice(`${t('密码已重置并已复制到剪贴板:')} ${password}`);
|
|
|
} else {
|
|
|
showError(message);
|
|
|
}
|
|
|
@@ -94,16 +104,28 @@ const PasswordResetConfirm = () => {
|
|
|
<Title heading={3} className="text-gray-800 dark:text-gray-200">{t('密码重置确认')}</Title>
|
|
|
</div>
|
|
|
<div className="px-2 py-8">
|
|
|
- <Form className="space-y-3">
|
|
|
+ {!isValidResetLink && (
|
|
|
+ <Banner
|
|
|
+ type="danger"
|
|
|
+ description={t('无效的重置链接,请重新发起密码重置请求')}
|
|
|
+ className="mb-4 !rounded-lg"
|
|
|
+ closeIcon={null}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ <Form
|
|
|
+ getFormApi={(api) => setFormApi(api)}
|
|
|
+ initValues={{ email: email || '', newPassword: newPassword || '' }}
|
|
|
+ className="space-y-4"
|
|
|
+ >
|
|
|
<Form.Input
|
|
|
field="email"
|
|
|
label={t('邮箱')}
|
|
|
name="email"
|
|
|
size="large"
|
|
|
className="!rounded-md"
|
|
|
- value={email}
|
|
|
- readOnly
|
|
|
+ disabled={true}
|
|
|
prefix={<IconMail />}
|
|
|
+ placeholder={email ? '' : t('等待获取邮箱信息...')}
|
|
|
/>
|
|
|
|
|
|
{newPassword && (
|
|
|
@@ -113,14 +135,21 @@ const PasswordResetConfirm = () => {
|
|
|
name="newPassword"
|
|
|
size="large"
|
|
|
className="!rounded-md"
|
|
|
- value={newPassword}
|
|
|
- readOnly
|
|
|
+ disabled={true}
|
|
|
prefix={<IconLock />}
|
|
|
- onClick={(e) => {
|
|
|
- e.target.select();
|
|
|
- navigator.clipboard.writeText(newPassword);
|
|
|
- showNotice(`${t('密码已复制到剪贴板')}: ${newPassword}`);
|
|
|
- }}
|
|
|
+ suffix={
|
|
|
+ <Button
|
|
|
+ icon={<IconCopy />}
|
|
|
+ type="tertiary"
|
|
|
+ theme="borderless"
|
|
|
+ onClick={async () => {
|
|
|
+ await copy(newPassword);
|
|
|
+ showNotice(`${t('密码已复制到剪贴板:')} ${newPassword}`);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {t('复制')}
|
|
|
+ </Button>
|
|
|
+ }
|
|
|
/>
|
|
|
)}
|
|
|
|
|
|
@@ -133,9 +162,9 @@ const PasswordResetConfirm = () => {
|
|
|
size="large"
|
|
|
onClick={handleSubmit}
|
|
|
loading={loading}
|
|
|
- disabled={disableButton || newPassword}
|
|
|
+ disabled={disableButton || newPassword || !isValidResetLink}
|
|
|
>
|
|
|
- {newPassword ? t('密码重置完成') : t('提交')}
|
|
|
+ {newPassword ? t('密码重置完成') : t('确认重置密码')}
|
|
|
</Button>
|
|
|
</div>
|
|
|
</Form>
|