修改注册函数

frontend/src/store/store.ts

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

frontend/src/views/Login.tsx

@@ -11,38 +11,13 @@ 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 { loadable } from "jotai/utils"
-import { atom, useAtom } from "jotai"
 import Backdrop from '@mui/material/Backdrop';
 import CircularProgress from '@mui/material/CircularProgress';
-
+import { useSetAtom } from 'jotai';
-const loginData = atom({ email: "", password: "" })
+import { token, username } from '@/store/store'
-const loginErr = atom("")
-
-const fetchReg = loadable(atom(async (get) => {
-    const ld = get(loginData)
-    const v = await fetch(import.meta.env.VITE_APIADDR + "/api/yggdrasil/authserver/authenticate", {
-        method: "POST",
-        body: JSON.stringify({
-            "username": ld.email,
-            "password": ld.password,
-        })
-    })
-    const rData = await v.json()
-    return rData
-}))
 
 
-const ToLogin = React.memo(() => {
+function ToLogin() {
-    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 (
         <>
             <Backdrop
@@ -54,20 +29,36 @@ const ToLogin = React.memo(() => {
         </>
     )
 }
-    return (
-        <>
-            <p>{JSON.stringify(value.data)}</p>
-        </>
-    )
-})
 
+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", {
+        method: "POST",
+        body: JSON.stringify({
+            "username": username,
+            "password": password,
+        })
+    })
+    const data = await v.json()
+    if (!v.ok){
+        throw data?.errorMessage
+    }
+    return data as tokenData
+}
 
 
 export default function SignIn() {
     const [emailErr, setEmailErr] = useState("");
-    const [err, setErr] = useAtom(loginErr);
+    const [err, setErr] = useState("");
     const [login, setLogin] = useState(false);
-    const [, setloginData] = useAtom(loginData);
+    const setToken = useSetAtom(token)
+    const setUsername = useSetAtom(username)
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
@@ -80,17 +71,19 @@ export default function SignIn() {
             setEmailErr("需要为邮箱")
             return
         }
-        setloginData({
+        if (login) return
-            email: postData.email,
-            password: postData.password ?? ""
-        })
         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 (
         <Container component="main" maxWidth="xs">
@@ -151,8 +144,8 @@ export default function SignIn() {
                     </Grid>
                 </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>
             {login && <ToLogin></ToLogin>}
         </Container>