82 lines
3.3 KiB
TypeScript
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>
|
|
}
|
|
|