Преглед изворни кода

fix: 注册时发送邮件验证码没有等待时间

creamlike1024 пре 6 месеци
родитељ
комит
b77d64bc9f
1 измењених фајлова са 18 додато и 1 уклоњено
  1. 18 1
      web/src/components/auth/RegisterForm.js

+ 18 - 1
web/src/components/auth/RegisterForm.js

@@ -80,6 +80,8 @@ const RegisterForm = () => {
   const [verificationCodeLoading, setVerificationCodeLoading] = useState(false);
   const [otherRegisterOptionsLoading, setOtherRegisterOptionsLoading] = useState(false);
   const [wechatCodeSubmitLoading, setWechatCodeSubmitLoading] = useState(false);
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
 
   const logo = getLogo();
   const systemName = getSystemName();
@@ -106,6 +108,19 @@ const RegisterForm = () => {
     }
   }, [status]);
 
+  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 onWeChatLoginClicked = () => {
     setWechatLoading(true);
     setShowWeChatLoginModal(true);
@@ -198,6 +213,7 @@ const RegisterForm = () => {
       const { success, message } = res.data;
       if (success) {
         showSuccess('验证码发送成功,请检查你的邮箱!');
+        setDisableButton(true); // 发送成功后禁用按钮,开始倒计时
       } else {
         showError(message);
       }
@@ -454,9 +470,10 @@ const RegisterForm = () => {
                         <Button
                           onClick={sendVerificationCode}
                           loading={verificationCodeLoading}
+                          disabled={disableButton || verificationCodeLoading}
                           size="small"
                         >
-                          {t('获取验证码')}
+                          {disableButton ? `${t('重新发送')} (${countdown})` : t('获取验证码')}
                         </Button>
                       }
                     />