lsp-yggdrasil-web/src/pages/login.tsx

82 lines
3.3 KiB
TypeScript

import { Box, Button, CssBaseline, Grid, Link, Paper, TextField, ThemeProvider, Typography, Alert, Collapse } from "@mui/material"
import { useNavigate } from "react-router-dom"
import { api, theme } from '../index'
import axios from "axios"
import { useRef, useState } from "react"
import "./custom.css"
export const PageLogin = () => {
const navigate = useNavigate()
const usernameInput = useRef<HTMLInputElement>(null)
const passwordInput = useRef<HTMLInputElement>(null)
const [illegal, setIllegal] = useState(false)
const handleLogin = () => {
const username = usernameInput.current?.value
const password = passwordInput.current?.value
if(!username || !password) {
return setIllegal(true)
}
axios.post(api("/api/login"), {
username,
password,
createToken: false
}).then((response) => {
window.sessionStorage.setItem('identifier', response.data.identifier)
window.sessionStorage.setItem('textures', response.data.texturs)
window.sessionStorage.setItem('username', response.data.username)
window.sessionStorage.setItem('uuid', response.data.uuid)
})
}
return <ThemeProvider theme={theme}>
<CssBaseline />
<div className="rootPanel">
<Box>
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
<Paper elevation={3} className="inlineBox">
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}>
<Grid item className="title">
<Typography variant="h5">
</Typography>
</Grid>
<Grid item>
<Collapse in={illegal}>
<Alert severity="error">
</Alert>
</Collapse>
</Grid>
<Grid item>
<TextField fullWidth required label="用户名" type="text" autoComplete="current-username" inputRef={usernameInput} onInput={() => setIllegal(false)} />
</Grid>
<Grid item>
<TextField fullWidth required label="密码" type="password" autoComplete="current-password" inputRef={passwordInput} onInput={() => setIllegal(false)} />
</Grid>
<Grid item>
<Button onClick={handleLogin} variant="contained" color="primary" >
</Button>
</Grid>
<Grid item>
<Link onClick={() => { navigate("/register") }} underline="always"> ? </Link>
</Grid>
</Grid>
</Paper>
</Grid>
</Box>
</div>
</ThemeProvider>
}