From 3f0671150115c26234ba0ad599b71ffba7e1702c Mon Sep 17 00:00:00 2001
From: jinjianmingming <17610798380@163.com>
Date: Fri, 19 Jul 2024 11:43:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20berry=E4=B8=BB=E9=A2=98=E5=8F=91?=
 =?UTF-8?q?=E9=80=81=E9=82=AE=E7=AE=B1=E9=AA=8C=E8=AF=81=E7=A0=81=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0loading=E6=95=88=E6=9E=9C=E5=92=8C=E5=80=92=E8=AE=A1?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=A4=9A=E6=AC=A1=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=AF=BC=E8=87=B4=E5=8F=91=E9=80=81=E5=A4=9A=E4=B8=AA?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Authentication/AuthForms/AuthRegister.js  | 417 ++++++++++--------
 1 file changed, 221 insertions(+), 196 deletions(-)

diff --git a/web/berry/src/views/Authentication/AuthForms/AuthRegister.js b/web/berry/src/views/Authentication/AuthForms/AuthRegister.js
index 8d58869612..0deea60c83 100644
--- a/web/berry/src/views/Authentication/AuthForms/AuthRegister.js
+++ b/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,217 +103,233 @@ const RegisterForm = ({ ...others }) => {
     }
   }, [siteInfo]);
 
-  return (
-    <>
-      <Formik
-        initialValues={{
-          username: '',
-          password: '',
-          confirmPassword: '',
-          email: showEmailVerification ? '' : undefined,
-          verification_code: showEmailVerification ? '' : undefined,
-          submit: null
-        }}
-        validationSchema={Yup.object().shape({
-          username: Yup.string().max(255).required('用户名是必填项'),
-          password: Yup.string().max(255).required('密码是必填项'),
-          confirmPassword: Yup.string()
-            .required('确认密码是必填项')
-            .oneOf([Yup.ref('password'), null], '两次输入的密码不一致'),
-          email: showEmailVerification ? Yup.string().email('必须是有效的Email地址').max(255).required('Email是必填项') : Yup.mixed(),
-          verification_code: showEmailVerification ? Yup.string().max(255).required('验证码是必填项') : Yup.mixed()
-        })}
-        onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
-          if (turnstileEnabled && turnstileToken === '') {
-            showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
-            setSubmitting(false);
-            return;
-          }
+  useEffect(() => {
+    let interval;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prevTimer) => prevTimer - 1);
+      }, 1000);
+    }
 
-          const { success, message } = await register(values, turnstileToken);
-          if (success) {
-            setStatus({ success: true });
-          } else {
-            setStatus({ success: false });
-            if (message) {
-              setErrors({ submit: message });
-            }
-          }
-        }}
-      >
-        {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
-          <form noValidate onSubmit={handleSubmit} {...others}>
-            <FormControl fullWidth error={Boolean(touched.username && errors.username)} sx={{ ...theme.typography.customInput }}>
-              <InputLabel htmlFor="outlined-adornment-username-register">用户名</InputLabel>
-              <OutlinedInput
-                id="outlined-adornment-username-register"
-                type="text"
-                value={values.username}
-                name="username"
-                onBlur={handleBlur}
-                onChange={handleChange}
-                inputProps={{ autoComplete: 'username' }}
-              />
-              {touched.username && errors.username && (
-                <FormHelperText error id="standard-weight-helper-text--register">
-                  {errors.username}
-                </FormHelperText>
-              )}
-            </FormControl>
+    return () => clearInterval(interval);
+  }, [timer]);
 
-            <FormControl fullWidth error={Boolean(touched.password && errors.password)} sx={{ ...theme.typography.customInput }}>
-              <InputLabel htmlFor="outlined-adornment-password-register">密码</InputLabel>
-              <OutlinedInput
-                id="outlined-adornment-password-register"
-                type={showPassword ? 'text' : 'password'}
-                value={values.password}
-                name="password"
-                label="Password"
-                onBlur={handleBlur}
-                onChange={(e) => {
-                  handleChange(e);
-                  changePassword(e.target.value);
-                }}
-                endAdornment={
-                  <InputAdornment position="end">
-                    <IconButton
-                      aria-label="toggle password visibility"
-                      onClick={handleClickShowPassword}
-                      onMouseDown={handleMouseDownPassword}
-                      edge="end"
-                      size="large"
-                      color={'primary'}
-                    >
-                      {showPassword ? <Visibility /> : <VisibilityOff />}
-                    </IconButton>
-                  </InputAdornment>
-                }
-                inputProps={{}}
-              />
-              {touched.password && errors.password && (
-                <FormHelperText error id="standard-weight-helper-text-password-register">
-                  {errors.password}
-                </FormHelperText>
-              )}
-            </FormControl>
-            <FormControl
-              fullWidth
-              error={Boolean(touched.confirmPassword && errors.confirmPassword)}
-              sx={{ ...theme.typography.customInput }}
-            >
-              <InputLabel htmlFor="outlined-adornment-confirm-password-register">确认密码</InputLabel>
-              <OutlinedInput
-                id="outlined-adornment-confirm-password-register"
-                type={showPassword ? 'text' : 'password'}
-                value={values.confirmPassword}
-                name="confirmPassword"
-                label="Confirm Password"
-                onBlur={handleBlur}
-                onChange={handleChange}
-                inputProps={{}}
-              />
-              {touched.confirmPassword && errors.confirmPassword && (
-                <FormHelperText error id="standard-weight-helper-text-confirm-password-register">
-                  {errors.confirmPassword}
-                </FormHelperText>
-              )}
-            </FormControl>
+  return (
+      <>
+        <Formik
+            initialValues={{
+              username: '',
+              password: '',
+              confirmPassword: '',
+              email: showEmailVerification ? '' : undefined,
+              verification_code: showEmailVerification ? '' : undefined,
+              submit: null
+            }}
+            validationSchema={Yup.object().shape({
+              username: Yup.string().max(255).required('用户名是必填项'),
+              password: Yup.string().max(255).required('密码是必填项'),
+              confirmPassword: Yup.string()
+                  .required('确认密码是必填项')
+                  .oneOf([Yup.ref('password'), null], '两次输入的密码不一致'),
+              email: showEmailVerification ? Yup.string().email('必须是有效的Email地址').max(255).required('Email是必填项') : Yup.mixed(),
+              verification_code: showEmailVerification ? Yup.string().max(255).required('验证码是必填项') : Yup.mixed()
+            })}
+            onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
+              if (turnstileEnabled && turnstileToken === '') {
+                showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+                setSubmitting(false);
+                return;
+              }
 
-            {strength !== 0 && (
-              <FormControl fullWidth>
-                <Box sx={{ mb: 2 }}>
-                  <Grid container spacing={2} alignItems="center">
-                    <Grid item>
-                      <Box style={{ backgroundColor: level?.color }} sx={{ width: 85, height: 8, borderRadius: '7px' }} />
-                    </Grid>
-                    <Grid item>
-                      <Typography variant="subtitle1" fontSize="0.75rem">
-                        {level?.label}
-                      </Typography>
-                    </Grid>
-                  </Grid>
-                </Box>
-              </FormControl>
-            )}
+              const { success, message } = await register(values, turnstileToken);
+              if (success) {
+                setStatus({ success: true });
+              } else {
+                setStatus({ success: false });
+                if (message) {
+                  setErrors({ submit: message });
+                }
+              }
+            }}
+        >
+          {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
+              <form noValidate onSubmit={handleSubmit} {...others}>
+                <FormControl fullWidth error={Boolean(touched.username && errors.username)} sx={{ ...theme.typography.customInput }}>
+                  <InputLabel htmlFor="outlined-adornment-username-register">用户名</InputLabel>
+                  <OutlinedInput
+                      id="outlined-adornment-username-register"
+                      type="text"
+                      value={values.username}
+                      name="username"
+                      onBlur={handleBlur}
+                      onChange={handleChange}
+                      inputProps={{ autoComplete: 'username' }}
+                  />
+                  {touched.username && errors.username && (
+                      <FormHelperText error id="standard-weight-helper-text--register">
+                        {errors.username}
+                      </FormHelperText>
+                  )}
+                </FormControl>
 
-            {showEmailVerification && (
-              <>
-                <FormControl fullWidth error={Boolean(touched.email && errors.email)} sx={{ ...theme.typography.customInput }}>
-                  <InputLabel htmlFor="outlined-adornment-email-register">Email</InputLabel>
+                <FormControl fullWidth error={Boolean(touched.password && errors.password)} sx={{ ...theme.typography.customInput }}>
+                  <InputLabel htmlFor="outlined-adornment-password-register">密码</InputLabel>
                   <OutlinedInput
-                    id="outlined-adornment-email-register"
-                    type="text"
-                    value={values.email}
-                    name="email"
-                    onBlur={handleBlur}
-                    onChange={handleChange}
-                    endAdornment={
-                      <InputAdornment position="end">
-                        <Button variant="contained" color="primary" onClick={() => handleSendCode(values.email)}>
-                          发送验证码
-                        </Button>
-                      </InputAdornment>
-                    }
-                    inputProps={{}}
+                      id="outlined-adornment-password-register"
+                      type={showPassword ? 'text' : 'password'}
+                      value={values.password}
+                      name="password"
+                      label="Password"
+                      onBlur={handleBlur}
+                      onChange={(e) => {
+                        handleChange(e);
+                        changePassword(e.target.value);
+                      }}
+                      endAdornment={
+                        <InputAdornment position="end">
+                          <IconButton
+                              aria-label="toggle password visibility"
+                              onClick={handleClickShowPassword}
+                              onMouseDown={handleMouseDownPassword}
+                              edge="end"
+                              size="large"
+                              color={'primary'}
+                          >
+                            {showPassword ? <Visibility /> : <VisibilityOff />}
+                          </IconButton>
+                        </InputAdornment>
+                      }
+                      inputProps={{}}
                   />
-                  {touched.email && errors.email && (
-                    <FormHelperText error id="standard-weight-helper-text--register">
-                      {errors.email}
-                    </FormHelperText>
+                  {touched.password && errors.password && (
+                      <FormHelperText error id="standard-weight-helper-text-password-register">
+                        {errors.password}
+                      </FormHelperText>
                   )}
                 </FormControl>
                 <FormControl
-                  fullWidth
-                  error={Boolean(touched.verification_code && errors.verification_code)}
-                  sx={{ ...theme.typography.customInput }}
+                    fullWidth
+                    error={Boolean(touched.confirmPassword && errors.confirmPassword)}
+                    sx={{ ...theme.typography.customInput }}
                 >
-                  <InputLabel htmlFor="outlined-adornment-verification_code-register">验证码</InputLabel>
+                  <InputLabel htmlFor="outlined-adornment-confirm-password-register">确认密码</InputLabel>
                   <OutlinedInput
-                    id="outlined-adornment-verification_code-register"
-                    type="text"
-                    value={values.verification_code}
-                    name="verification_code"
-                    onBlur={handleBlur}
-                    onChange={handleChange}
-                    inputProps={{}}
+                      id="outlined-adornment-confirm-password-register"
+                      type={showPassword ? 'text' : 'password'}
+                      value={values.confirmPassword}
+                      name="confirmPassword"
+                      label="Confirm Password"
+                      onBlur={handleBlur}
+                      onChange={handleChange}
+                      inputProps={{}}
                   />
-                  {touched.verification_code && errors.verification_code && (
-                    <FormHelperText error id="standard-weight-helper-text--register">
-                      {errors.verification_code}
-                    </FormHelperText>
+                  {touched.confirmPassword && errors.confirmPassword && (
+                      <FormHelperText error id="standard-weight-helper-text-confirm-password-register">
+                        {errors.confirmPassword}
+                      </FormHelperText>
                   )}
                 </FormControl>
-              </>
-            )}
 
-            {errors.submit && (
-              <Box sx={{ mt: 3 }}>
-                <FormHelperText error>{errors.submit}</FormHelperText>
-              </Box>
-            )}
-            {turnstileEnabled ? (
-              <Turnstile
-                sitekey={turnstileSiteKey}
-                onVerify={(token) => {
-                  setTurnstileToken(token);
-                }}
-              />
-            ) : (
-              <></>
-            )}
+                {strength !== 0 && (
+                    <FormControl fullWidth>
+                      <Box sx={{ mb: 2 }}>
+                        <Grid container spacing={2} alignItems="center">
+                          <Grid item>
+                            <Box style={{ backgroundColor: level?.color }} sx={{ width: 85, height: 8, borderRadius: '7px' }} />
+                          </Grid>
+                          <Grid item>
+                            <Typography variant="subtitle1" fontSize="0.75rem">
+                              {level?.label}
+                            </Typography>
+                          </Grid>
+                        </Grid>
+                      </Box>
+                    </FormControl>
+                )}
+
+                {showEmailVerification && (
+                    <>
+                      <FormControl fullWidth error={Boolean(touched.email && errors.email)} sx={{ ...theme.typography.customInput }}>
+                        <InputLabel htmlFor="outlined-adornment-email-register">Email</InputLabel>
+                        <OutlinedInput
+                            id="outlined-adornment-email-register"
+                            type="text"
+                            value={values.email}
+                            name="email"
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            endAdornment={
+                              <InputAdornment position="end">
+                                <Button
+                                    variant="contained"
+                                    color="primary"
+                                    onClick={() => handleSendCode(values.email)}
+                                    disabled={timer > 0 || loading}
+                                >
+                                  {loading ? <CircularProgress size={24} /> : timer > 0 ? `${timer}s` : '发送验证码'}
+                                </Button>
+                              </InputAdornment>
+                            }
+                            inputProps={{}}
+                        />
+                        {touched.email && errors.email && (
+                            <FormHelperText error id="standard-weight-helper-text--register">
+                              {errors.email}
+                            </FormHelperText>
+                        )}
+                      </FormControl>
+                      <FormControl
+                          fullWidth
+                          error={Boolean(touched.verification_code && errors.verification_code)}
+                          sx={{ ...theme.typography.customInput }}
+                      >
+                        <InputLabel htmlFor="outlined-adornment-verification_code-register">验证码</InputLabel>
+                        <OutlinedInput
+                            id="outlined-adornment-verification_code-register"
+                            type="text"
+                            value={values.verification_code}
+                            name="verification_code"
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            inputProps={{}}
+                        />
+                        {touched.verification_code && errors.verification_code && (
+                            <FormHelperText error id="standard-weight-helper-text--register">
+                              {errors.verification_code}
+                            </FormHelperText>
+                        )}
+                      </FormControl>
+                    </>
+                )}
 
-            <Box sx={{ mt: 2 }}>
-              <AnimateButton>
-                <Button disableElevation disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
-                  注册
-                </Button>
-              </AnimateButton>
-            </Box>
-          </form>
-        )}
-      </Formik>
-    </>
+                {errors.submit && (
+                    <Box sx={{ mt: 3 }}>
+                      <FormHelperText error>{errors.submit}</FormHelperText>
+                    </Box>
+                )}
+                {turnstileEnabled ? (
+                    <Turnstile
+                        sitekey={turnstileSiteKey}
+                        onVerify={(token) => {
+                          setTurnstileToken(token);
+                        }}
+                    />
+                ) : (
+                    <></>
+                )}
+
+                <Box sx={{ mt: 2 }}>
+                  <AnimateButton>
+                    <Button disableElevation disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
+                      注册
+                    </Button>
+                  </AnimateButton>
+                </Box>
+              </form>
+          )}
+        </Formik>
+      </>
   );
 };
 
-export default RegisterForm;
+export default RegisterForm;
\ No newline at end of file