88 lines
4.1 KiB
TypeScript
88 lines
4.1 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"
|
|
|
|
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 style={{
|
|
backgroundImage: 'url("charmlessbg.png")', // wtf with this error? but however it worked somehow lol.
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: 'cover'
|
|
}}> { /* The error mentioned above have been fixed by adding this 'as any' */ }
|
|
|
|
|
|
<Box style={{ 'minWidth': '100%', 'minHeight': '100%', 'display': 'flex' }}>
|
|
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
|
|
<Paper style={{minWidth: '430px', minHeight: '330px', borderRadius: '30px'} as any} elevation={3}>
|
|
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}>
|
|
<Grid style={{ minWidth: '80%', minHeight: '100%', marginTop: '5%' }} item>
|
|
<Typography variant="h5">
|
|
登录到世界树
|
|
</Typography>
|
|
</Grid>
|
|
|
|
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
|
|
<Collapse in={illegal}>
|
|
<Alert severity="error">
|
|
用户名或密码不可以为空
|
|
</Alert>
|
|
</Collapse>
|
|
|
|
</Grid>
|
|
|
|
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
|
|
<TextField fullWidth required label="用户名" type="text" autoComplete="current-username" inputRef={usernameInput} onInput={() => setIllegal(false)} />
|
|
</Grid>
|
|
|
|
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
|
|
<TextField fullWidth required label="密码" type="password" autoComplete="current-password" inputRef={passwordInput} onInput={() => setIllegal(false)} />
|
|
</Grid>
|
|
|
|
<Grid style={{ minWidth: '80%',minHeight: '100%' }} item>
|
|
<Button onClick={handleLogin} style={{ minWidth: '100%', minHeight: '100%' }} variant="contained" color="primary" >
|
|
登录
|
|
</Button>
|
|
</Grid>
|
|
|
|
<Grid style={{ marginBottom: "2%" }} item>
|
|
<Link onClick={() => { navigate("/register") }} underline="always"> 没有账号? 点击注册 </Link>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
</Grid>
|
|
</Box>
|
|
</div>
|
|
</ThemeProvider>
|
|
}
|
|
|