152 lines
4.5 KiB
JavaScript
152 lines
4.5 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Button,
|
||
Form,
|
||
Grid,
|
||
Header,
|
||
Image,
|
||
Card,
|
||
Message,
|
||
} from 'semantic-ui-react';
|
||
import { API, showError, showInfo, showSuccess } from '../helpers';
|
||
import Turnstile from 'react-turnstile';
|
||
|
||
const PasswordResetForm = () => {
|
||
const [inputs, setInputs] = useState({
|
||
email: '',
|
||
});
|
||
const { email } = inputs;
|
||
|
||
const [loading, setLoading] = useState(false);
|
||
const [turnstileEnabled, setTurnstileEnabled] = useState(false);
|
||
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
|
||
const [turnstileToken, setTurnstileToken] = useState('');
|
||
const [disableButton, setDisableButton] = useState(false);
|
||
const [countdown, setCountdown] = useState(30);
|
||
|
||
useEffect(() => {
|
||
let status = localStorage.getItem('status');
|
||
if (status) {
|
||
status = JSON.parse(status);
|
||
if (status.turnstile_check) {
|
||
setTurnstileEnabled(true);
|
||
setTurnstileSiteKey(status.turnstile_site_key);
|
||
}
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
let countdownInterval = null;
|
||
if (disableButton && countdown > 0) {
|
||
countdownInterval = setInterval(() => {
|
||
setCountdown(countdown - 1);
|
||
}, 1000);
|
||
} else if (countdown === 0) {
|
||
setDisableButton(false);
|
||
setCountdown(30);
|
||
}
|
||
return () => clearInterval(countdownInterval);
|
||
}, [disableButton, countdown]);
|
||
|
||
function handleChange(e) {
|
||
const { name, value } = e.target;
|
||
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
||
}
|
||
|
||
async function handleSubmit(e) {
|
||
setDisableButton(true);
|
||
if (!email) return;
|
||
if (turnstileEnabled && turnstileToken === '') {
|
||
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
|
||
return;
|
||
}
|
||
setLoading(true);
|
||
const res = await API.get(
|
||
`/api/reset_password?email=${email}&turnstile=${turnstileToken}`
|
||
);
|
||
const { success, message } = res.data;
|
||
if (success) {
|
||
showSuccess('重置邮件发送成功，请检查邮箱！');
|
||
setInputs({ ...inputs, email: '' });
|
||
} else {
|
||
showError(message);
|
||
}
|
||
setLoading(false);
|
||
}
|
||
|
||
return (
|
||
<Grid textAlign='center' style={{ marginTop: '48px' }}>
|
||
<Grid.Column style={{ maxWidth: 450 }}>
|
||
<Card
|
||
fluid
|
||
className='chart-card'
|
||
style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }}
|
||
>
|
||
<Card.Content>
|
||
<Card.Header>
|
||
<Header
|
||
as='h2'
|
||
textAlign='center'
|
||
style={{ marginBottom: '1.5em' }}
|
||
>
|
||
<Image src='/logo.png' style={{ marginBottom: '10px' }} />
|
||
<Header.Content>密码重置</Header.Content>
|
||
</Header>
|
||
</Card.Header>
|
||
<Form size='large'>
|
||
<Form.Input
|
||
fluid
|
||
icon='mail'
|
||
iconPosition='left'
|
||
placeholder='邮箱地址'
|
||
name='email'
|
||
value={email}
|
||
onChange={handleChange}
|
||
style={{ marginBottom: '1em' }}
|
||
/>
|
||
{turnstileEnabled && (
|
||
<div
|
||
style={{
|
||
marginBottom: '1em',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
}}
|
||
>
|
||
<Turnstile
|
||
sitekey={turnstileSiteKey}
|
||
onVerify={(token) => {
|
||
setTurnstileToken(token);
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
<Button
|
||
color='blue'
|
||
fluid
|
||
size='large'
|
||
onClick={handleSubmit}
|
||
loading={loading}
|
||
disabled={disableButton}
|
||
style={{
|
||
background: '#2F73FF', // 使用更现代的蓝色
|
||
color: 'white',
|
||
marginBottom: '1.5em',
|
||
}}
|
||
>
|
||
{disableButton ? `重试 (${countdown})` : '提交'}
|
||
</Button>
|
||
</Form>
|
||
<Message style={{ background: 'transparent', boxShadow: 'none' }}>
|
||
<p style={{ fontSize: '0.9em', color: '#666' }}>
|
||
系统将向您的邮箱发送一封包含重置链接的邮件，请注意查收。
|
||
</p>
|
||
</Message>
|
||
</Card.Content>
|
||
</Card>
|
||
</Grid.Column>
|
||
</Grid>
|
||
);
|
||
};
|
||
|
||
export default PasswordResetForm;
|