chore: optimize frontend (#293)

* main

* chore: update style

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

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 = () => {
               <></>
             )}
             <Button
-              color=''
+              color='green'
               fluid
               size='large'
               onClick={handleSubmit}
               loading={loading}
+              disabled={disableButton}
             >
-              提交
+              {disableButton ? `重试 (${countdown})` : '提交'}
             </Button>
           </Segment>
         </Form>