修改注册函数

This commit is contained in:
xmdhs 2023-09-20 01:08:49 +08:00
parent 53813fa5bf
commit 19e31ce3a8
No known key found for this signature in database
GPG Key ID: E809D6D43DEFCC95
2 changed files with 49 additions and 52 deletions

View File

@ -0,0 +1,4 @@
import { atomWithStorage } from 'jotai/utils'
export const token = atomWithStorage("token", "")
export const username = atomWithStorage("username", "")

View File

@ -11,63 +11,54 @@ import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
import Snackbar from '@mui/material/Snackbar'; import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert'; import Alert from '@mui/material/Alert';
import { loadable } from "jotai/utils"
import { atom, useAtom } from "jotai"
import Backdrop from '@mui/material/Backdrop'; import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
import { useSetAtom } from 'jotai';
import { token, username } from '@/store/store'
const loginData = atom({ email: "", password: "" })
const loginErr = atom("")
const fetchReg = loadable(atom(async (get) => { function ToLogin() {
const ld = get(loginData) return (
<>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={true}
>
<CircularProgress color="inherit" />
</Backdrop>
</>
)
}
interface tokenData {
accessToken: string
selectedProfile: {
name: string
}
}
async function tologin(username: string, password: string) {
const v = await fetch(import.meta.env.VITE_APIADDR + "/api/yggdrasil/authserver/authenticate", { const v = await fetch(import.meta.env.VITE_APIADDR + "/api/yggdrasil/authserver/authenticate", {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
"username": ld.email, "username": username,
"password": ld.password, "password": password,
}) })
}) })
const rData = await v.json() const data = await v.json()
return rData if (!v.ok){
})) throw data?.errorMessage
const ToLogin = React.memo(() => {
const [, setErr] = useAtom(loginErr);
const [value] = useAtom(fetchReg)
if (value.state === 'hasError') {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setErr(String(value.error as any))
console.warn(value.error)
return <></>
} }
if (value.state === 'loading') { return data as tokenData
return ( }
<>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={true}
>
<CircularProgress color="inherit" />
</Backdrop>
</>
)
}
return (
<>
<p>{JSON.stringify(value.data)}</p>
</>
)
})
export default function SignIn() { export default function SignIn() {
const [emailErr, setEmailErr] = useState(""); const [emailErr, setEmailErr] = useState("");
const [err, setErr] = useAtom(loginErr); const [err, setErr] = useState("");
const [login, setLogin] = useState(false); const [login, setLogin] = useState(false);
const [, setloginData] = useAtom(loginData); const setToken = useSetAtom(token)
const setUsername = useSetAtom(username)
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
@ -80,17 +71,19 @@ export default function SignIn() {
setEmailErr("需要为邮箱") setEmailErr("需要为邮箱")
return return
} }
setloginData({ if (login) return
email: postData.email,
password: postData.password ?? ""
})
setLogin(true) setLogin(true)
tologin(postData.email, postData.password ?? "").
then(v => {
if (!v) return
setToken(v.accessToken)
setUsername(v.selectedProfile.name)
}).
catch(v => [setErr(String(v)), console.warn(v)]).
finally(() => setLogin(false))
}; };
const closeAlert = () => {
setLogin(false)
setErr("")
}
return ( return (
<Container component="main" maxWidth="xs"> <Container component="main" maxWidth="xs">
@ -151,8 +144,8 @@ export default function SignIn() {
</Grid> </Grid>
</Box> </Box>
</Box> </Box>
<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={err !== ""} onClose={closeAlert} > <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={err !== ""} onClose={() => setErr("")} >
<Alert onClose={closeAlert} severity="error">{err}</Alert> <Alert onClose={() => setErr("")} severity="error">{err}</Alert>
</Snackbar> </Snackbar>
{login && <ToLogin></ToLogin>} {login && <ToLogin></ToLogin>}
</Container> </Container>