diff --git a/frontend/src/apis/apis.ts b/frontend/src/apis/apis.ts index df5c794..ae89470 100644 --- a/frontend/src/apis/apis.ts +++ b/frontend/src/apis/apis.ts @@ -28,6 +28,5 @@ export async function register(email: string, username: string, password: string if (!v.ok) { throw data } - return data as tokenData - + return } \ No newline at end of file diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx new file mode 100644 index 0000000..95637f2 --- /dev/null +++ b/frontend/src/components/Loading.tsx @@ -0,0 +1,15 @@ +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; + +export default function Loading() { + return ( + <> + theme.zIndex.drawer + 1 }} + open={true} + > + + + + ) +} diff --git a/frontend/src/views/Login.tsx b/frontend/src/views/Login.tsx index 097b400..aaf5e85 100644 --- a/frontend/src/views/Login.tsx +++ b/frontend/src/views/Login.tsx @@ -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 ( - <> - theme.zIndex.drawer + 1 }} - open={true} - > - - - - ) -} +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>(new Map()) const handleSubmit = (event: React.FormEvent) => { 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() { 登录 - { + 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" diff --git a/frontend/src/views/Register.tsx b/frontend/src/views/Register.tsx index 5c0c6f8..921b9e5 100644 --- a/frontend/src/views/Register.tsx +++ b/frontend/src/views/Register.tsx @@ -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>(new Map()) const handleSubmit = (event: React.FormEvent) => { 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) }} /> - { + dom && checkList.current.set("2", dom) + }} + checkList={[ + { + errMsg: "长度在 3-16 之间", + reg: /.{3,16}/ + } + ]} required fullWidth name="username" label="角色名" - autoComplete="email" + autoComplete="username" /> - { + 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" /> - - -