Ecosystem/ai-gateway
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge 3f06711501 into fdd7bf41c0

Browse Source
This commit is contained in:
jinjianming 2024-09-23 08:48:47 +08:00 committed by GitHub
commit 2849908c91
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 222 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

419
web/berry/src/views/Authentication/AuthForms/AuthRegister.js
View File

@ -3,13 +3,13 @@ import { useSelector } from 'react-redux';
import useRegister from 'hooks/useRegister'; import useRegister from 'hooks/useRegister';
import Turnstile from 'react-turnstile'; import Turnstile from 'react-turnstile';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
// import { useSelector } from 'react-redux';
// material-ui // material-ui
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { import {
Box, Box,
Button, Button,
CircularProgress,
FormControl, FormControl,
FormHelperText, FormHelperText,
Grid, Grid,
@ -50,6 +50,9 @@ const RegisterForm = ({ ...others }) => {
const [strength, setStrength] = useState(0); const [strength, setStrength] = useState(0);
const [level, setLevel] = useState(); const [level, setLevel] = useState();
const [timer, setTimer] = useState(0);
const [loading, setLoading] = useState(false);
const handleClickShowPassword = () => { const handleClickShowPassword = () => {
setShowPassword(!showPassword); setShowPassword(!showPassword);
}; };
@ -74,11 +77,17 @@ const RegisterForm = ({ ...others }) => {
return; return;
} }
setLoading(true); // Start loading
const { success, message } = await sendVerificationCode(email, turnstileToken); const { success, message } = await sendVerificationCode(email, turnstileToken);
setLoading(false); // Stop loading
if (!success) { if (!success) {
showError(message); showError(message);
return; return;
} }
setTimer(60); // Start the 60-second timer
}; };
useEffect(() => { useEffect(() => {
@ -94,217 +103,233 @@ const RegisterForm = ({ ...others }) => {
} }
}, [siteInfo]); }, [siteInfo]);
useEffect(() => {
let interval;
if (timer > 0) {
interval = setInterval(() => {
setTimer((prevTimer) => prevTimer - 1);
}, 1000);
}
return () => clearInterval(interval);
}, [timer]);
return ( return (
<> <>
<Formik <Formik
initialValues={{ initialValues={{
username: '', username: '',
password: '', password: '',
confirmPassword: '', confirmPassword: '',
email: showEmailVerification ? '' : undefined, email: showEmailVerification ? '' : undefined,
verification_code: showEmailVerification ? '' : undefined, verification_code: showEmailVerification ? '' : undefined,
submit: null submit: null
}} }}
validationSchema={Yup.object().shape({ validationSchema={Yup.object().shape({
username: Yup.string().max(255).required('用户名是必填项'), username: Yup.string().max(255).required('用户名是必填项'),
password: Yup.string().max(255).required('密码是必填项'), password: Yup.string().max(255).required('密码是必填项'),
confirmPassword: Yup.string() confirmPassword: Yup.string()
.required('确认密码是必填项') .required('确认密码是必填项')
.oneOf([Yup.ref('password'), null], '两次输入的密码不一致'), .oneOf([Yup.ref('password'), null], '两次输入的密码不一致'),
email: showEmailVerification ? Yup.string().email('必须是有效的Email地址').max(255).required('Email是必填项') : Yup.mixed(), email: showEmailVerification ? Yup.string().email('必须是有效的Email地址').max(255).required('Email是必填项') : Yup.mixed(),
verification_code: showEmailVerification ? Yup.string().max(255).required('验证码是必填项') : Yup.mixed() verification_code: showEmailVerification ? Yup.string().max(255).required('验证码是必填项') : Yup.mixed()
})} })}
onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => { onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
if (turnstileEnabled && turnstileToken === '') { if (turnstileEnabled && turnstileToken === '') {
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！'); showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
setSubmitting(false); setSubmitting(false);
return; return;
} }
const { success, message } = await register(values, turnstileToken); const { success, message } = await register(values, turnstileToken);
if (success) { if (success) {
setStatus({ success: true }); setStatus({ success: true });
} else { } else {
setStatus({ success: false }); setStatus({ success: false });
if (message) { if (message) {
setErrors({ submit: 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>
<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, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
{errors.password} <form noValidate onSubmit={handleSubmit} {...others}>
</FormHelperText> <FormControl fullWidth error={Boolean(touched.username && errors.username)} sx={{ ...theme.typography.customInput }}>
)} <InputLabel htmlFor="outlined-adornment-username-register">用户名</InputLabel>
</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>
{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 <OutlinedInput
id="outlined-adornment-email-register" id="outlined-adornment-username-register"
type="text" type="text"
value={values.email} value={values.username}
name="email" name="username"
onBlur={handleBlur} onBlur={handleBlur}
onChange={handleChange} onChange={handleChange}
endAdornment={ inputProps={{ autoComplete: 'username' }}
<InputAdornment position="end">
<Button variant="contained" color="primary" onClick={() => handleSendCode(values.email)}>
发送验证码
</Button>
</InputAdornment>
}
inputProps={{}}
/> />
{touched.email && errors.email && ( {touched.username && errors.username && (
<FormHelperText error id="standard-weight-helper-text--register"> <FormHelperText error id="standard-weight-helper-text--register">
{errors.email} {errors.username}
</FormHelperText> </FormHelperText>
)}
</FormControl>
<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>
<FormControl <FormControl
fullWidth fullWidth
error={Boolean(touched.verification_code && errors.verification_code)} error={Boolean(touched.confirmPassword && errors.confirmPassword)}
sx={{ ...theme.typography.customInput }} sx={{ ...theme.typography.customInput }}
> >
<InputLabel htmlFor="outlined-adornment-verification_code-register">验证码</InputLabel> <InputLabel htmlFor="outlined-adornment-confirm-password-register">确认密码</InputLabel>
<OutlinedInput <OutlinedInput
id="outlined-adornment-verification_code-register" id="outlined-adornment-confirm-password-register"
type="text" type={showPassword ? 'text' : 'password'}
value={values.verification_code} value={values.confirmPassword}
name="verification_code" name="confirmPassword"
onBlur={handleBlur} label="Confirm Password"
onChange={handleChange} onBlur={handleBlur}
inputProps={{}} onChange={handleChange}
inputProps={{}}
/> />
{touched.verification_code && errors.verification_code && ( {touched.confirmPassword && errors.confirmPassword && (
<FormHelperText error id="standard-weight-helper-text--register"> <FormHelperText error id="standard-weight-helper-text-confirm-password-register">
{errors.verification_code} {errors.confirmPassword}
</FormHelperText> </FormHelperText>
)} )}
</FormControl> </FormControl>
</>
)}
{errors.submit && ( {strength !== 0 && (
<Box sx={{ mt: 3 }}> <FormControl fullWidth>
<FormHelperText error>{errors.submit}</FormHelperText> <Box sx={{ mb: 2 }}>
</Box> <Grid container spacing={2} alignItems="center">
)} <Grid item>
{turnstileEnabled ? ( <Box style={{ backgroundColor: level?.color }} sx={{ width: 85, height: 8, borderRadius: '7px' }} />
<Turnstile </Grid>
sitekey={turnstileSiteKey} <Grid item>
onVerify={(token) => { <Typography variant="subtitle1" fontSize="0.75rem">
setTurnstileToken(token); {level?.label}
}} </Typography>
/> </Grid>
) : ( </Grid>
<></> </Box>
)} </FormControl>
)}
<Box sx={{ mt: 2 }}> {showEmailVerification && (
<AnimateButton> <>
<Button disableElevation disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary"> <FormControl fullWidth error={Boolean(touched.email && errors.email)} sx={{ ...theme.typography.customInput }}>
注册 <InputLabel htmlFor="outlined-adornment-email-register">Email</InputLabel>
</Button> <OutlinedInput
</AnimateButton> id="outlined-adornment-email-register"
</Box> type="text"
</form> value={values.email}
)} name="email"
</Formik> 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>
</>
)}
{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;