更改校验
This commit is contained in:
xmdhs
parent
e5ffe96294
commit
51e86f469b
@ -28,6 +28,5 @@ export async function register(email: string, username: string, password: string
|
||||
if (!v.ok) {
|
||||
throw data
|
||||
}
|
||||
return data as tokenData
|
||||
|
||||
return
|
||||
}
|
||||
15
frontend/src/components/Loading.tsx
Normal file
15
frontend/src/components/Loading.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import Backdrop from "@mui/material/Backdrop";
|
||||
import CircularProgress from "@mui/material/CircularProgress";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<>
|
||||
<Backdrop
|
||||
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
||||
open={true}
|
||||
>
|
||||
<CircularProgress color="inherit" />
|
||||
</Backdrop>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -11,49 +11,35 @@ import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { token, username } from '@/store/store'
|
||||
import { login } from '@/apis/apis'
|
||||
import { checkEmail } from '@/utils/email'
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
|
||||
function Loading() {
|
||||
return (
|
||||
<>
|
||||
<Backdrop
|
||||
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
||||
open={true}
|
||||
>
|
||||
<CircularProgress color="inherit" />
|
||||
</Backdrop>
|
||||
</>
|
||||
)
|
||||
}
|
||||
import Loading from '@/components/Loading'
|
||||
import CheckInput, { refType } from '@/components/CheckInput'
|
||||
|
||||
|
||||
|
||||
export default function SignIn() {
|
||||
const [emailErr, setEmailErr] = useState("");
|
||||
const [err, setErr] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const setToken = useSetAtom(token)
|
||||
const setUsername = useSetAtom(username)
|
||||
const checkList = React.useRef<Map<string, refType>>(new Map<string, refType>())
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (loading) return
|
||||
setLoading(true)
|
||||
|
||||
const data = new FormData(event.currentTarget);
|
||||
const postData = {
|
||||
email: data.get('email')?.toString(),
|
||||
password: data.get('password')?.toString(),
|
||||
}
|
||||
if (!checkEmail(postData.email ?? "")) {
|
||||
setEmailErr("需要为邮箱")
|
||||
if (!Array.from(checkList.current.values()).every(v => v.verify())) {
|
||||
return
|
||||
}
|
||||
if (loading) return
|
||||
setLoading(true)
|
||||
login(postData.email!, postData.password ?? "").
|
||||
then(v => {
|
||||
if (!v) return
|
||||
@ -83,9 +69,16 @@ export default function SignIn() {
|
||||
登录
|
||||
</Typography>
|
||||
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
|
||||
<TextField
|
||||
error={emailErr != ""}
|
||||
helperText={emailErr}
|
||||
<CheckInput
|
||||
ref={(dom) => {
|
||||
dom && checkList.current.set("1", dom)
|
||||
}}
|
||||
checkList={[
|
||||
{
|
||||
errMsg: "需为邮箱",
|
||||
reg: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
|
||||
}
|
||||
]}
|
||||
margin="normal"
|
||||
fullWidth
|
||||
id="email"
|
||||
|
||||
@ -2,7 +2,6 @@ import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Link from '@mui/material/Link';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
@ -12,22 +11,37 @@ import Container from '@mui/material/Container';
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { register } from '@/apis/apis'
|
||||
import CheckInput, { refType } from '@/components/CheckInput'
|
||||
import { useState } from 'react';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import Loading from '@/components/Loading'
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function SignUp() {
|
||||
const checkList = React.useRef<{ [id: string]: refType }>({})
|
||||
const [regErr, setRegErr] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
||||
const checkList = React.useRef<Map<string, refType>>(new Map<string, refType>())
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (loading) return
|
||||
setLoading(true)
|
||||
const data = new FormData(event.currentTarget);
|
||||
const d = {
|
||||
email: data.get('email')?.toString(),
|
||||
password: data.get('password')?.toString(),
|
||||
password1: data.get('password1')?.toString(),
|
||||
username: data.get("username")?.toString()
|
||||
}
|
||||
console.log(Object.values(checkList.current).every(v => v.verify()))
|
||||
|
||||
register(d.email ?? "", d.username ?? "", d.password ?? "")
|
||||
if (!Array.from(checkList.current.values()).every(v => v.verify())) {
|
||||
return
|
||||
}
|
||||
register(d.email ?? "", d.username ?? "", d.password ?? "").
|
||||
then(() => navigate("/login")).
|
||||
catch(v => [setRegErr(String(v)), console.warn(v)]).
|
||||
finally(() => setLoading(false))
|
||||
};
|
||||
|
||||
return (
|
||||
@ -54,7 +68,7 @@ export default function SignUp() {
|
||||
checkList={[
|
||||
{
|
||||
errMsg: "需为邮箱",
|
||||
reg: /^hello/
|
||||
reg: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
|
||||
}
|
||||
]}
|
||||
required
|
||||
@ -63,21 +77,39 @@ export default function SignUp() {
|
||||
label="邮箱"
|
||||
autoComplete="email"
|
||||
ref={(dom) => {
|
||||
dom && [checkList.current["1"] = dom]
|
||||
dom && checkList.current.set("1", dom)
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
<CheckInput
|
||||
ref={(dom) => {
|
||||
dom && checkList.current.set("2", dom)
|
||||
}}
|
||||
checkList={[
|
||||
{
|
||||
errMsg: "长度在 3-16 之间",
|
||||
reg: /.{3,16}/
|
||||
}
|
||||
]}
|
||||
required
|
||||
fullWidth
|
||||
name="username"
|
||||
label="角色名"
|
||||
autoComplete="email"
|
||||
autoComplete="username"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
<CheckInput
|
||||
ref={(dom) => {
|
||||
dom && checkList.current.set("3", dom)
|
||||
}}
|
||||
checkList={[
|
||||
{
|
||||
errMsg: "长度在 6-50 之间",
|
||||
reg: /.{6,50}/
|
||||
}
|
||||
]}
|
||||
required
|
||||
fullWidth
|
||||
label="密码"
|
||||
@ -86,16 +118,6 @@ export default function SignUp() {
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
required
|
||||
fullWidth
|
||||
label="确认密码"
|
||||
type="password"
|
||||
name="password1"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
type="submit"
|
||||
@ -114,6 +136,10 @@ export default function SignUp() {
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={regErr !== ""} onClose={() => setRegErr("")} >
|
||||
<Alert onClose={() => setRegErr("")} severity="error">{regErr}</Alert>
|
||||
</Snackbar>
|
||||
{loading && <Loading />}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user