Merge 3f06711501 into fdd7bf41c0

web/berry/src/views/Authentication/AuthForms/AuthRegister.js

@@ -3,13 +3,13 @@ import { useSelector } from 'react-redux';
 import useRegister from 'hooks/useRegister';
 import Turnstile from 'react-turnstile';
 import { useSearchParams } from 'react-router-dom';
-// import { useSelector } from 'react-redux';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
 import {
   Box,
   Button,
+  CircularProgress,
   FormControl,
   FormHelperText,
   Grid,
@@ -50,6 +50,9 @@ const RegisterForm = ({ ...others }) => {
   const [strength, setStrength] = useState(0);
   const [level, setLevel] = useState();
 
+  const [timer, setTimer] = useState(0);
+  const [loading, setLoading] = useState(false);
+
   const handleClickShowPassword = () => {
     setShowPassword(!showPassword);
   };
@@ -74,11 +77,17 @@ const RegisterForm = ({ ...others }) => {
       return;
     }
 
+    setLoading(true); // Start loading
+
     const { success, message } = await sendVerificationCode(email, turnstileToken);
+    setLoading(false); // Stop loading
+
     if (!success) {
       showError(message);
       return;
     }
+
+    setTimer(60); // Start the 60-second timer
   };
 
   useEffect(() => {
@@ -94,6 +103,17 @@ const RegisterForm = ({ ...others }) => {
     }
   }, [siteInfo]);
 
+  useEffect(() => {
+    let interval;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prevTimer) => prevTimer - 1);
+      }, 1000);
+    }
+
+    return () => clearInterval(interval);
+  }, [timer]);
+
   return (
       <>
         <Formik
@@ -240,8 +260,13 @@ const RegisterForm = ({ ...others }) => {
                             onChange={handleChange}
                             endAdornment={
                               <InputAdornment position="end">
-                        <Button variant="contained" color="primary" onClick={() => handleSendCode(values.email)}>
-                          发送验证码
+                                <Button
+                                    variant="contained"
+                                    color="primary"
+                                    onClick={() => handleSendCode(values.email)}
+                                    disabled={timer > 0 || loading}
+                                >
+                                  {loading ? <CircularProgress size={24} /> : timer > 0 ? `${timer}s` : '发送验证码'}
                                 </Button>
                               </InputAdornment>
                             }