11import React , { useEffect , useState } from 'react' ;
22import { API , copy , showError , showNotice , getLogo , getSystemName } from '../../helpers' ;
33import { useSearchParams , Link } from 'react-router-dom' ;
4- import { Button , Card , Form , Typography } from '@douyinfe/semi-ui' ;
5- import { IconMail , IconLock } from '@douyinfe/semi-icons' ;
4+ import { Button , Card , Form , Typography , Banner } from '@douyinfe/semi-ui' ;
5+ import { IconMail , IconLock , IconCopy } from '@douyinfe/semi-icons' ;
66import { useTranslation } from 'react-i18next' ;
77import Background from '/example.png' ;
88
@@ -15,13 +15,14 @@ const PasswordResetConfirm = () => {
1515 token : '' ,
1616 } ) ;
1717 const { email, token } = inputs ;
18+ const isValidResetLink = email && token ;
1819
1920 const [ loading , setLoading ] = useState ( false ) ;
2021 const [ disableButton , setDisableButton ] = useState ( false ) ;
2122 const [ countdown , setCountdown ] = useState ( 30 ) ;
2223 const [ newPassword , setNewPassword ] = useState ( '' ) ;
23-
2424 const [ searchParams , setSearchParams ] = useSearchParams ( ) ;
25+ const [ formApi , setFormApi ] = useState ( null ) ;
2526
2627 const logo = getLogo ( ) ;
2728 const systemName = getSystemName ( ) ;
@@ -30,10 +31,16 @@ const PasswordResetConfirm = () => {
3031 let token = searchParams . get ( 'token' ) ;
3132 let email = searchParams . get ( 'email' ) ;
3233 setInputs ( {
33- token,
34- email,
34+ token : token || '' ,
35+ email : email || '' ,
3536 } ) ;
36- } , [ ] ) ;
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 ;
@@ -49,7 +56,10 @@ const PasswordResetConfirm = () => {
4956 } , [ disableButton , countdown ] ) ;
5057
5158 async function handleSubmit ( e ) {
52- if ( ! email || ! token ) return ;
59+ if ( ! email || ! token ) {
60+ showError ( t ( '无效的重置链接,请重新发起密码重置请求' ) ) ;
61+ return ;
62+ }
5363 setDisableButton ( true ) ;
5464 setLoading ( true ) ;
5565 const res = await API . post ( `/api/user/reset` , {
@@ -61,7 +71,7 @@ const PasswordResetConfirm = () => {
6171 let password = res . data . data ;
6272 setNewPassword ( password ) ;
6373 await copy ( password ) ;
64- showNotice ( `${ t ( '密码已重置并已复制到剪贴板' ) } : ${ password } ` ) ;
74+ showNotice ( `${ t ( '密码已重置并已复制到剪贴板: ' ) } ${ password } ` ) ;
6575 } else {
6676 showError ( message ) ;
6777 }
@@ -94,16 +104,28 @@ const PasswordResetConfirm = () => {
94104 < Title heading = { 3 } className = "text-gray-800 dark:text-gray-200" > { t ( '密码重置确认' ) } </ Title >
95105 </ div >
96106 < div className = "px-2 py-8" >
97- < Form className = "space-y-3" >
107+ { ! isValidResetLink && (
108+ < Banner
109+ type = "danger"
110+ description = { t ( '无效的重置链接,请重新发起密码重置请求' ) }
111+ className = "mb-4 !rounded-lg"
112+ closeIcon = { null }
113+ />
114+ ) }
115+ < Form
116+ getFormApi = { ( api ) => setFormApi ( api ) }
117+ initValues = { { email : email || '' , newPassword : newPassword || '' } }
118+ className = "space-y-4"
119+ >
98120 < Form . Input
99121 field = "email"
100122 label = { t ( '邮箱' ) }
101123 name = "email"
102124 size = "large"
103125 className = "!rounded-md"
104- value = { email }
105- readOnly
126+ disabled = { true }
106127 prefix = { < IconMail /> }
128+ placeholder = { email ? '' : t ( '等待获取邮箱信息...' ) }
107129 />
108130
109131 { newPassword && (
@@ -113,14 +135,21 @@ const PasswordResetConfirm = () => {
113135 name = "newPassword"
114136 size = "large"
115137 className = "!rounded-md"
116- value = { newPassword }
117- readOnly
138+ disabled = { true }
118139 prefix = { < IconLock /> }
119- onClick = { ( e ) => {
120- e . target . select ( ) ;
121- navigator . clipboard . writeText ( newPassword ) ;
122- showNotice ( `${ t ( '密码已复制到剪贴板' ) } : ${ newPassword } ` ) ;
123- } }
140+ suffix = {
141+ < Button
142+ icon = { < IconCopy /> }
143+ type = "tertiary"
144+ theme = "borderless"
145+ onClick = { async ( ) => {
146+ await copy ( newPassword ) ;
147+ showNotice ( `${ t ( '密码已复制到剪贴板:' ) } ${ newPassword } ` ) ;
148+ } }
149+ >
150+ { t ( '复制' ) }
151+ </ Button >
152+ }
124153 />
125154 ) }
126155
@@ -133,9 +162,9 @@ const PasswordResetConfirm = () => {
133162 size = "large"
134163 onClick = { handleSubmit }
135164 loading = { loading }
136- disabled = { disableButton || newPassword }
165+ disabled = { disableButton || newPassword || ! isValidResetLink }
137166 >
138- { newPassword ? t ( '密码重置完成' ) : t ( '提交 ' ) }
167+ { newPassword ? t ( '密码重置完成' ) : t ( '确认重置密码 ' ) }
139168 </ Button >
140169 </ div >
141170 </ Form >
0 commit comments