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 ( - <> - { - 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 }) => ( -
- - 用户名 - - {touched.username && errors.username && ( - - {errors.username} - - )} - + return () => clearInterval(interval); + }, [timer]); - - 密码 - { - handleChange(e); - changePassword(e.target.value); - }} - endAdornment={ - - - {showPassword ? : } - - - } - inputProps={{}} - /> - {touched.password && errors.password && ( - - {errors.password} - - )} - - - 确认密码 - - {touched.confirmPassword && errors.confirmPassword && ( - - {errors.confirmPassword} - - )} - + return ( + <> + { + if (turnstileEnabled && turnstileToken === '') { + showInfo('请稍后几秒重试,Turnstile 正在检查用户环境!'); + setSubmitting(false); + return; + } - {strength !== 0 && ( - - - - - - - - - {level?.label} - - - - - - )} + 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 }) => ( + + + 用户名 + + {touched.username && errors.username && ( + + {errors.username} + + )} + - {showEmailVerification && ( - <> - - Email + + 密码 - - - } - 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={ + + + {showPassword ? : } + + + } + inputProps={{}} /> - {touched.email && errors.email && ( - - {errors.email} - + {touched.password && errors.password && ( + + {errors.password} + )} - 验证码 + 确认密码 - {touched.verification_code && errors.verification_code && ( - - {errors.verification_code} - + {touched.confirmPassword && errors.confirmPassword && ( + + {errors.confirmPassword} + )} - - )} - {errors.submit && ( - - {errors.submit} - - )} - {turnstileEnabled ? ( - { - setTurnstileToken(token); - }} - /> - ) : ( - <> - )} + {strength !== 0 && ( + + + + + + + + + {level?.label} + + + + + + )} + + {showEmailVerification && ( + <> + + Email + + + + } + inputProps={{}} + /> + {touched.email && errors.email && ( + + {errors.email} + + )} + + + 验证码 + + {touched.verification_code && errors.verification_code && ( + + {errors.verification_code} + + )} + + + )} - - - - - - - )} -
- + {errors.submit && ( + + {errors.submit} + + )} + {turnstileEnabled ? ( + { + setTurnstileToken(token); + }} + /> + ) : ( + <> + )} + + + + + + + + )} +
+ ); }; -export default RegisterForm; +export default RegisterForm; \ No newline at end of file