Skip to content

Commit d3b9319

Browse files
author
Apple\Apple
committed
✨chore(PasswordResetConfirm): Improve password reset confirm UI and fix form data binding
- Replace error message div with Semi UI Banner component for better UX - Add rounded corners to Banner component with !rounded-lg class - Fix Form.Input not displaying values by implementing proper formApi usage - Use getFormApi callback to obtain form API instance - Replace manual value props with formApi.setValues() for dynamic updates - Set proper initValues for form initialization - Remove unused Input import and console.log statements - Clean up debugging code and optimize form state management This change enhances the visual consistency with Semi Design system and resolves the issue where email field was not showing URL parameter values.
1 parent fcc4d00 commit d3b9319

File tree

1 file changed

+20
-8
lines changed

1 file changed

+20
-8
lines changed

web/src/components/auth/PasswordResetConfirm.js

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from 'react';
22
import { API, copy, showError, showNotice, getLogo, getSystemName } from '../../helpers';
33
import { useSearchParams, Link } from 'react-router-dom';
4-
import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
4+
import { Button, Card, Form, Typography, Banner } from '@douyinfe/semi-ui';
55
import { IconMail, IconLock } from '@douyinfe/semi-icons';
66
import { useTranslation } from 'react-i18next';
77
import Background from '/example.png';
@@ -22,6 +22,7 @@ const PasswordResetConfirm = () => {
2222
const [countdown, setCountdown] = useState(30);
2323
const [newPassword, setNewPassword] = useState('');
2424
const [searchParams, setSearchParams] = useSearchParams();
25+
const [formApi, setFormApi] = useState(null);
2526

2627
const logo = getLogo();
2728
const systemName = getSystemName();
@@ -33,7 +34,13 @@ const PasswordResetConfirm = () => {
3334
token: token || '',
3435
email: email || '',
3536
});
36-
}, [searchParams]);
37+
if (formApi) {
38+
formApi.setValues({
39+
email: email || '',
40+
newPassword: newPassword || ''
41+
});
42+
}
43+
}, [searchParams, newPassword, formApi]);
3744

3845
useEffect(() => {
3946
let countdownInterval = null;
@@ -98,18 +105,24 @@ const PasswordResetConfirm = () => {
98105
</div>
99106
<div className="px-2 py-8">
100107
{!isValidResetLink && (
101-
<div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
102-
<Text>{t('无效的重置链接,请重新发起密码重置请求')}</Text>
103-
</div>
108+
<Banner
109+
type="danger"
110+
description={t('无效的重置链接,请重新发起密码重置请求')}
111+
className="mb-4 !rounded-lg"
112+
closeIcon={null}
113+
/>
104114
)}
105-
<Form className="space-y-3">
115+
<Form
116+
getFormApi={(api) => setFormApi(api)}
117+
initValues={{ email: email || '', newPassword: newPassword || '' }}
118+
className="space-y-4"
119+
>
106120
<Form.Input
107121
field="email"
108122
label={t('邮箱')}
109123
name="email"
110124
size="large"
111125
className="!rounded-md"
112-
value={email || ''}
113126
disabled={true}
114127
prefix={<IconMail />}
115128
placeholder={email ? '' : t('等待获取邮箱信息...')}
@@ -122,7 +135,6 @@ const PasswordResetConfirm = () => {
122135
name="newPassword"
123136
size="large"
124137
className="!rounded-md"
125-
value={newPassword}
126138
disabled={true}
127139
prefix={<IconLock />}
128140
onClick={(e) => {

0 commit comments

Comments
 (0)