From 9b4d1964d4ee9694a5b47bd75bb0757d5f302b78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yolo=C2=B0?= <136311867+yangfan-sys@users.noreply.github.com> Date: Sun, 23 Jul 2023 13:25:28 +0800 Subject: [PATCH] chore: optimize frontend (#293) * main * chore: update style --------- Co-authored-by: JustSong --- controller/misc.go | 5 +- web/src/components/LoginForm.js | 69 +++++++++------------- web/src/components/PasswordResetConfirm.js | 47 +++++++++++++-- web/src/components/PasswordResetForm.js | 30 ++++++---- web/src/components/PersonalSetting.js | 20 ++++++- web/src/components/RegisterForm.js | 14 +---- web/src/pages/About/index.js | 4 +- web/src/pages/TopUp/index.js | 37 +++++++----- 8 files changed, 136 insertions(+), 90 deletions(-) diff --git a/controller/misc.go b/controller/misc.go index 755ccbd4..958a3716 100644 --- a/controller/misc.go +++ b/controller/misc.go @@ -127,8 +127,9 @@ func SendPasswordResetEmail(c *gin.Context) { link := fmt.Sprintf("%s/user/reset?email=%s&token=%s", common.ServerAddress, email, code) subject := fmt.Sprintf("%s密码重置", common.SystemName) content := fmt.Sprintf("

您好，你正在进行%s密码重置。

"+ - "

点击此处进行密码重置。

"+ - "

重置链接 %d 分钟内有效，如果不是本人操作，请忽略。

", common.SystemName, link, common.VerificationValidMinutes) + "

点击 此处 进行密码重置。

"+ + "

如果链接无法点击，请尝试点击下面的链接或将其复制到浏览器中打开：
%s

"+ + "

重置链接 %d 分钟内有效，如果不是本人操作，请忽略。

", common.SystemName, link, link, common.VerificationValidMinutes) err := common.SendEmail(subject, email, content) if err != nil { c.JSON(http.StatusOK, gin.H{ diff --git a/web/src/components/LoginForm.js b/web/src/components/LoginForm.js index bcc2df65..110dad46 100644 --- a/web/src/components/LoginForm.js +++ b/web/src/components/LoginForm.js @@ -1,36 +1,25 @@ import React, { useContext, useEffect, useState } from 'react'; -import { - Button, - Divider, - Form, - Grid, - Header, - Image, - Message, - Modal, - Segment, -} from 'semantic-ui-react'; +import { Button, Divider, Form, Grid, Header, Image, Message, Modal, Segment } from 'semantic-ui-react'; import { Link, useNavigate, useSearchParams } from 'react-router-dom'; import { UserContext } from '../context/User'; -import { API, getLogo, showError, showSuccess, showInfo } from '../helpers'; +import { API, getLogo, showError, showSuccess } from '../helpers'; const LoginForm = () => { const [inputs, setInputs] = useState({ username: '', password: '', - wechat_verification_code: '', + wechat_verification_code: '' }); const [searchParams, setSearchParams] = useSearchParams(); const [submitted, setSubmitted] = useState(false); const { username, password } = inputs; const [userState, userDispatch] = useContext(UserContext); let navigate = useNavigate(); - const [status, setStatus] = useState({}); const logo = getLogo(); useEffect(() => { - if (searchParams.get("expired")) { + if (searchParams.get('expired')) { showError('未登录或登录已过期，请重新登录！'); } let status = localStorage.getItem('status'); @@ -78,7 +67,7 @@ const LoginForm = () => { if (username && password) { const res = await API.post(`/api/user/login`, { username, - password, + password }); const { success, message, data } = res.data; if (success) { @@ -93,44 +82,44 @@ const LoginForm = () => { } return ( - + -
+
用户登录
-
+ -
忘记密码？ - + 点击重置 ； 没有账户？ - + 点击注册 @@ -140,8 +129,8 @@ const LoginForm = () => { {status.github_oauth ? ( - ); + ); }; export default PasswordResetConfirm; diff --git a/web/src/components/PasswordResetForm.js b/web/src/components/PasswordResetForm.js index 8de95d6c..f3610d3a 100644 --- a/web/src/components/PasswordResetForm.js +++ b/web/src/components/PasswordResetForm.js @@ -5,7 +5,7 @@ import Turnstile from 'react-turnstile'; const PasswordResetForm = () => { const [inputs, setInputs] = useState({ - email: '', + email: '' }); const { email } = inputs; @@ -13,24 +13,29 @@ const PasswordResetForm = () => { 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); - } + 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 })); + setInputs(inputs => ({ ...inputs, [name]: value })); } async function handleSubmit(e) { + setDisableButton(true); if (!email) return; if (turnstileEnabled && turnstileToken === '') { showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); @@ -78,13 +83,14 @@ const PasswordResetForm = () => { <> )} diff --git a/web/src/components/PersonalSetting.js b/web/src/components/PersonalSetting.js index 6c6ea49f..f201a3cd 100644 --- a/web/src/components/PersonalSetting.js +++ b/web/src/components/PersonalSetting.js @@ -17,6 +17,8 @@ const PersonalSetting = () => { const [turnstileSiteKey, setTurnstileSiteKey] = useState(''); const [turnstileToken, setTurnstileToken] = useState(''); const [loading, setLoading] = useState(false); + const [disableButton, setDisableButton] = useState(false); + const [countdown, setCountdown] = useState(30); useEffect(() => { let status = localStorage.getItem('status'); @@ -30,6 +32,19 @@ const PersonalSetting = () => { } }, []); + 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); // Clean up on unmount + }, [disableButton, countdown]); + const handleInputChange = (e, { name, value }) => { setInputs((inputs) => ({ ...inputs, [name]: value })); }; @@ -78,6 +93,7 @@ const PersonalSetting = () => { }; const sendVerificationCode = async () => { + setDisableButton(true); if (inputs.email === '') return; if (turnstileEnabled && turnstileToken === '') { showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); @@ -195,8 +211,8 @@ const PersonalSetting = () => { name='email' type='email' action={ - } /> diff --git a/web/src/components/RegisterForm.js b/web/src/components/RegisterForm.js index d70869e6..f91d6da0 100644 --- a/web/src/components/RegisterForm.js +++ b/web/src/components/RegisterForm.js @@ -1,13 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { - Button, - Form, - Grid, - Header, - Image, - Message, - Segment, -} from 'semantic-ui-react'; +import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'; import { Link, useNavigate } from 'react-router-dom'; import { API, getLogo, showError, showInfo, showSuccess } from '../helpers'; import Turnstile from 'react-turnstile'; @@ -18,7 +10,7 @@ const RegisterForm = () => { password: '', password2: '', email: '', - verification_code: '', + verification_code: '' }); const { username, password, password2 } = inputs; const [showEmailVerification, setShowEmailVerification] = useState(false); @@ -178,7 +170,7 @@ const RegisterForm = () => { <> )}