Skip to content

phsl / new-api

Go to a project
Commit 2b6c1792 by Apple\Apple
Options

♻️Refactor: PasswordResetConfirm and PasswordReset

parent d7e577cb
Showing with 208 additions and 106 deletions
web/src/components/LoginForm.js
...@@ -28,7 +28,7 @@ import Title from '@douyinfe/semi-ui/lib/es/typography/title'; ...@@ -28,7 +28,7 @@ import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import Text from '@douyinfe/semi-ui/lib/es/typography/text'; import Text from '@douyinfe/semi-ui/lib/es/typography/text';
import TelegramLoginButton from 'react-telegram-login'; import TelegramLoginButton from 'react-telegram-login';
import { IconGithubLogo, IconMail } from '@douyinfe/semi-icons'; import { IconGithubLogo, IconMail, IconLock } from '@douyinfe/semi-icons';
import OIDCIcon from './OIDCIcon.js'; import OIDCIcon from './OIDCIcon.js';
import WeChatIcon from './WeChatIcon'; import WeChatIcon from './WeChatIcon';
import { setUserData } from '../helpers/data.js'; import { setUserData } from '../helpers/data.js';
...@@ -53,7 +53,6 @@ const LoginForm = () => { ...@@ -53,7 +53,6 @@ const LoginForm = () => {
const [status, setStatus] = useState({}); const [status, setStatus] = useState({});
const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false); const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
const [showEmailLogin, setShowEmailLogin] = useState(false); const [showEmailLogin, setShowEmailLogin] = useState(false);
const [showOtherOptions, setShowOtherOptions] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
const logo = getLogo(); const logo = getLogo();
...@@ -318,6 +317,7 @@ const LoginForm = () => { ...@@ -318,6 +317,7 @@ const LoginForm = () => {
size="large" size="large"
className="!rounded-md" className="!rounded-md"
onChange={(value) => handleChange('username', value)} onChange={(value) => handleChange('username', value)}
prefix={<IconMail />}
/> />
<Form.Input <Form.Input
...@@ -325,10 +325,11 @@ const LoginForm = () => { ...@@ -325,10 +325,11 @@ const LoginForm = () => {
label={t('密码')} label={t('密码')}
placeholder={t('请输入您的密码')} placeholder={t('请输入您的密码')}
name="password" name="password"
type="password" mode="password"
size="large" size="large"
className="!rounded-md" className="!rounded-md"
onChange={(value) => handleChange('password', value)} onChange={(value) => handleChange('password', value)}
prefix={<IconLock />}
/> />
<div className="space-y-2 pt-2"> <div className="space-y-2 pt-2">
......
web/src/components/PasswordResetConfirm.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react'; import { API, copy, showError, showNotice, getLogo, getSystemName } from '../helpers';
import { API, copy, showError, showNotice } from '../helpers'; import { useSearchParams, Link } from 'react-router-dom';
import { useSearchParams } from 'react-router-dom'; import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
import { IconMail, IconLock } from '@douyinfe/semi-icons';
import { useTranslation } from 'react-i18next';
import Background from '../images/example.png';
const { Text, Title } = Typography;
const PasswordResetConfirm = () => { const PasswordResetConfirm = () => {
const { t } = useTranslation();
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
email: '', email: '',
token: '', token: '',
...@@ -11,13 +17,15 @@ const PasswordResetConfirm = () => { ...@@ -11,13 +17,15 @@ const PasswordResetConfirm = () => {
const { email, token } = inputs; const { email, token } = inputs;
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [disableButton, setDisableButton] = useState(false); const [disableButton, setDisableButton] = useState(false);
const [countdown, setCountdown] = useState(30); const [countdown, setCountdown] = useState(30);
const [newPassword, setNewPassword] = useState(''); const [newPassword, setNewPassword] = useState('');
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const logo = getLogo();
const systemName = getSystemName();
useEffect(() => { useEffect(() => {
let token = searchParams.get('token'); let token = searchParams.get('token');
let email = searchParams.get('email'); let email = searchParams.get('email');
...@@ -41,8 +49,8 @@ const PasswordResetConfirm = () => { ...@@ -41,8 +49,8 @@ const PasswordResetConfirm = () => {
}, [disableButton, countdown]); }, [disableButton, countdown]);
async function handleSubmit(e) { async function handleSubmit(e) {
if (!email || !token) return;
setDisableButton(true); setDisableButton(true);
if (!email) return;
setLoading(true); setLoading(true);
const res = await API.post(`/api/user/reset`, { const res = await API.post(`/api/user/reset`, {
email, email,
...@@ -53,7 +61,7 @@ const PasswordResetConfirm = () => { ...@@ -53,7 +61,7 @@ const PasswordResetConfirm = () => {
let password = res.data.data; let password = res.data.data;
setNewPassword(password); setNewPassword(password);
await copy(password); await copy(password);
showNotice(`新密码已复制到剪贴板：${password}`); showNotice(`${t('密码已重置并已复制到剪贴板')}: ${password}`);
} else { } else {
showError(message); showError(message);
} }
...@@ -61,52 +69,86 @@ const PasswordResetConfirm = () => { ...@@ -61,52 +69,86 @@ const PasswordResetConfirm = () => {
} }
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
<Grid.Column style={{ maxWidth: 450 }}> {/* 背景图片容器 - 放大并保持居中 */}
<Header as='h2' color='' textAlign='center'> <div
<Image src='/logo.png' /> 密码重置确认 className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
</Header> style={{
<Form size='large'> backgroundImage: `url(${Background})`
<Segment> }}
<Form.Input ></div>
fluid
icon='mail' {/* 半透明遮罩层 */}
iconPosition='left' <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
placeholder='邮箱地址'
name='email' <div className="w-full max-w-md relative z-10">
value={email} <div className="flex flex-col items-center">
readOnly <div className="w-full max-w-md">
/> <div className="flex items-center justify-center mb-6 gap-2">
{newPassword && ( <img src={logo} alt="Logo" className="h-10 rounded-full" />
<Form.Input <Title heading={3} className='!text-white'>{systemName}</Title>
fluid </div>
icon='lock'
iconPosition='left' <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
placeholder='新密码' <div className="flex justify-center pt-6 pb-2">
name='newPassword' <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('密码重置确认')}</Title>
value={newPassword} </div>
readOnly <div className="px-2 py-8">
onClick={(e) => { <Form className="space-y-3">
e.target.select(); <Form.Input
navigator.clipboard.writeText(newPassword); field="email"
showNotice(`密码已复制到剪贴板：${newPassword}`); label={t('邮箱')}
}} name="email"
/> size="large"
)} className="!rounded-md"
<Button value={email}
color='green' readOnly
fluid prefix={<IconMail />}
size='large' />
onClick={handleSubmit}
loading={loading} {newPassword && (
disabled={disableButton} <Form.Input
> field="newPassword"
{disableButton ? `密码重置完成` : '提交'} label={t('新密码')}
</Button> name="newPassword"
</Segment> size="large"
</Form> className="!rounded-md"
</Grid.Column> value={newPassword}
</Grid> readOnly
prefix={<IconLock />}
onClick={(e) => {
e.target.select();
navigator.clipboard.writeText(newPassword);
showNotice(`${t('密码已复制到剪贴板')}: ${newPassword}`);
}}
/>
)}
<div className="space-y-2 pt-2">
<Button
theme="solid"
className="w-full !rounded-full"
type="primary"
htmlType="submit"
size="large"
onClick={handleSubmit}
loading={loading}
disabled={disableButton || newPassword}
>
{newPassword ? t('密码重置完成') : t('提交')}
</Button>
</div>
</Form>
<div className="mt-6 text-center text-sm">
<Text><Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('返回登录')}</Link></Text>
</div>
</div>
</Card>
</div>
</div>
</div>
</div>
); );
}; };
......
web/src/components/PasswordResetForm.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react'; import { API, getLogo, showError, showInfo, showSuccess, getSystemName } from '../helpers';
import { API, showError, showInfo, showSuccess } from '../helpers';
import Turnstile from 'react-turnstile'; import Turnstile from 'react-turnstile';
import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
import { IconMail } from '@douyinfe/semi-icons';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Background from '../images/example.png';
const { Text, Title } = Typography;
const PasswordResetForm = () => { const PasswordResetForm = () => {
const { t } = useTranslation();
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
email: '', email: '',
}); });
...@@ -16,6 +23,20 @@ const PasswordResetForm = () => { ...@@ -16,6 +23,20 @@ const PasswordResetForm = () => {
const [disableButton, setDisableButton] = useState(false); const [disableButton, setDisableButton] = useState(false);
const [countdown, setCountdown] = useState(30); const [countdown, setCountdown] = useState(30);
const logo = getLogo();
const systemName = getSystemName();
useEffect(() => {
let status = localStorage.getItem('status');
if (status) {
status = JSON.parse(status);
if (status.turnstile_check) {
setTurnstileEnabled(true);
setTurnstileSiteKey(status.turnstile_site_key);
}
}
}, []);
useEffect(() => { useEffect(() => {
let countdownInterval = null; let countdownInterval = null;
if (disableButton && countdown > 0) { if (disableButton && countdown > 0) {
...@@ -29,25 +50,24 @@ const PasswordResetForm = () => { ...@@ -29,25 +50,24 @@ const PasswordResetForm = () => {
return () => clearInterval(countdownInterval); return () => clearInterval(countdownInterval);
}, [disableButton, countdown]); }, [disableButton, countdown]);
function handleChange(e) { function handleChange(value) {
const { name, value } = e.target; setInputs((inputs) => ({ ...inputs, email: value }));
setInputs((inputs) => ({ ...inputs, [name]: value }));
} }
async function handleSubmit(e) { async function handleSubmit(e) {
setDisableButton(true);
if (!email) return; if (!email) return;
if (turnstileEnabled && turnstileToken === '') { if (turnstileEnabled && turnstileToken === '') {
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); showInfo(t('请稍后几秒重试，Turnstile 正在检查用户环境！'));
return; return;
} }
setDisableButton(true);
setLoading(true); setLoading(true);
const res = await API.get( const res = await API.get(
`/api/reset_password?email=${email}&turnstile=${turnstileToken}`, `/api/reset_password?email=${email}&turnstile=${turnstileToken}`,
); );
const { success, message } = res.data; const { success, message } = res.data;
if (success) { if (success) {
showSuccess('重置邮件发送成功，请检查邮箱！'); showSuccess(t('重置邮件发送成功，请检查邮箱！'));
setInputs({ ...inputs, email: '' }); setInputs({ ...inputs, email: '' });
} else { } else {
showError(message); showError(message);
...@@ -56,46 +76,80 @@ const PasswordResetForm = () => { ...@@ -56,46 +76,80 @@ const PasswordResetForm = () => {
} }
return ( return (
<Grid textAlign='center' style={{ marginTop: '48px' }}> <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
<Grid.Column style={{ maxWidth: 450 }}> {/* 背景图片容器 - 放大并保持居中 */}
<Header as='h2' color='' textAlign='center'> <div
<Image src='/logo.png' /> 密码重置 className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
</Header> style={{
<Form size='large'> backgroundImage: `url(${Background})`
<Segment> }}
<Form.Input ></div>
fluid
icon='mail' {/* 半透明遮罩层 */}
iconPosition='left' <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
placeholder='邮箱地址'
name='email' <div className="w-full max-w-md relative z-10">
value={email} <div className="flex flex-col items-center">
onChange={handleChange} <div className="w-full max-w-md">
/> <div className="flex items-center justify-center mb-6 gap-2">
{turnstileEnabled ? ( <img src={logo} alt="Logo" className="h-10 rounded-full" />
<Turnstile <Title heading={3} className='!text-white'>{systemName}</Title>
sitekey={turnstileSiteKey} </div>
onVerify={(token) => {
setTurnstileToken(token); <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
}} <div className="flex justify-center pt-6 pb-2">
/> <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">
<Form.Input
field="email"
label={t('邮箱')}
placeholder={t('请输入您的邮箱地址')}
name="email"
size="large"
className="!rounded-md"
value={email}
onChange={handleChange}
prefix={<IconMail />}
/>
<div className="space-y-2 pt-2">
<Button
theme="solid"
className="w-full !rounded-full"
type="primary"
htmlType="submit"
size="large"
onClick={handleSubmit}
loading={loading}
disabled={disableButton}
>
{disableButton ? `${t('重试')} (${countdown})` : t('提交')}
</Button>
</div>
</Form>
<div className="mt-6 text-center text-sm">
<Text>{t('想起来了？')} <Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('登录')}</Link></Text>
</div>
</div>
</Card>
{turnstileEnabled && (
<div className="flex justify-center mt-6">
<Turnstile
sitekey={turnstileSiteKey}
onVerify={(token) => {
setTurnstileToken(token);
}}
/>
</div>
)} )}
<Button </div>
color='green' </div>
fluid </div>
size='large' </div>
onClick={handleSubmit}
loading={loading}
disabled={disableButton}
>
{disableButton ? `重试 (${countdown})` : '提交'}
</Button>
</Segment>
</Form>
</Grid.Column>
</Grid>
); );
}; };
......
web/src/components/RegisterForm.js
...@@ -21,7 +21,7 @@ import { ...@@ -21,7 +21,7 @@ import {
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import Title from '@douyinfe/semi-ui/lib/es/typography/title'; import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import Text from '@douyinfe/semi-ui/lib/es/typography/text'; import Text from '@douyinfe/semi-ui/lib/es/typography/text';
import { IconGithubLogo, IconMail } from '@douyinfe/semi-icons'; import { IconGithubLogo, IconMail, IconUser, IconLock, IconKey } from '@douyinfe/semi-icons';
import { import {
onGitHubOAuthClicked, onGitHubOAuthClicked,
onLinuxDOOAuthClicked, onLinuxDOOAuthClicked,
...@@ -334,6 +334,7 @@ const RegisterForm = () => { ...@@ -334,6 +334,7 @@ const RegisterForm = () => {
size="large" size="large"
className="!rounded-md" className="!rounded-md"
onChange={(value) => handleChange('username', value)} onChange={(value) => handleChange('username', value)}
prefix={<IconUser />}
/> />
<Form.Input <Form.Input
...@@ -341,10 +342,11 @@ const RegisterForm = () => { ...@@ -341,10 +342,11 @@ const RegisterForm = () => {
label={t('密码')} label={t('密码')}
placeholder={t('输入密码，最短 8 位，最长 20 位')} placeholder={t('输入密码，最短 8 位，最长 20 位')}
name="password" name="password"
type="password" mode="password"
size="large" size="large"
className="!rounded-md" className="!rounded-md"
onChange={(value) => handleChange('password', value)} onChange={(value) => handleChange('password', value)}
prefix={<IconLock />}
/> />
<Form.Input <Form.Input
...@@ -352,10 +354,11 @@ const RegisterForm = () => { ...@@ -352,10 +354,11 @@ const RegisterForm = () => {
label={t('确认密码')} label={t('确认密码')}
placeholder={t('确认密码')} placeholder={t('确认密码')}
name="password2" name="password2"
type="password" mode="password"
size="large" size="large"
className="!rounded-md" className="!rounded-md"
onChange={(value) => handleChange('password2', value)} onChange={(value) => handleChange('password2', value)}
prefix={<IconLock />}
/> />
{showEmailVerification && ( {showEmailVerification && (
...@@ -369,6 +372,7 @@ const RegisterForm = () => { ...@@ -369,6 +372,7 @@ const RegisterForm = () => {
size="large" size="large"
className="!rounded-md" className="!rounded-md"
onChange={(value) => handleChange('email', value)} onChange={(value) => handleChange('email', value)}
prefix={<IconMail />}
suffix={ suffix={
<Button <Button
onClick={sendVerificationCode} onClick={sendVerificationCode}
...@@ -388,6 +392,7 @@ const RegisterForm = () => { ...@@ -388,6 +392,7 @@ const RegisterForm = () => {
size="large" size="large"
className="!rounded-md" className="!rounded-md"
onChange={(value) => handleChange('verification_code', value)} onChange={(value) => handleChange('verification_code', value)}
prefix={<IconKey />}
/> />
</> </>
)} )}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment