128 lines
5.6 KiB
TypeScript
128 lines
5.6 KiB
TypeScript
import { Box, Button, CssBaseline, Grid, Paper, TextField, ThemeProvider, Typography, Alert, Collapse, Dialog, DialogTitle, DialogContentText, DialogActions, DialogContent, Link } 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 [disableBtn, setDisableBtn] = useState(false)
|
|
const [cors, setCors] = useState(false)
|
|
const [illegal, setIllegal] = useState(false)
|
|
const [illegalMessgae, setIllegalMessgae] = useState("")
|
|
|
|
const handleLogin = () => {
|
|
setDisableBtn(true);
|
|
(async () => {
|
|
const username = usernameInput.current?.value
|
|
const password = passwordInput.current?.value
|
|
if(!username || !password) {
|
|
setIllegalMessgae("请输入用户名或密码")
|
|
return setIllegal(true)
|
|
}
|
|
|
|
try {
|
|
let response = await axios.post(api("/api/login"), {
|
|
username,
|
|
password,
|
|
})
|
|
|
|
if(response.data.err !== 1.048596) {
|
|
setIllegalMessgae(`登录失败! 错误代码 ${response.data.err} 原因: ${response.data.msg}`)
|
|
setIllegal(true)
|
|
}
|
|
|
|
|
|
if(response.data.err !== 1.048596) {
|
|
setIllegalMessgae(`登录失败! 错误代码 ${response.data.err} 原因: ${response.data.msg}`)
|
|
return setIllegal(true)
|
|
}
|
|
|
|
console.log(response.data)
|
|
|
|
window.sessionStorage.setItem('identifier', response.data.extra.identifier)
|
|
window.sessionStorage.setItem('textures', JSON.stringify(response.data.extra.textures))
|
|
window.sessionStorage.setItem('username', response.data.extra.username)
|
|
window.sessionStorage.setItem('uuid', response.data.extra.uuid)
|
|
|
|
navigate("/info")
|
|
} catch (err: any) {
|
|
if(err.code === "ERR_NETWORK") {
|
|
return setCors(true)
|
|
}
|
|
setIllegalMessgae(`登录失败! 错误代码 ${err.code} 原因: ${err.message}`)
|
|
setIllegal(true)
|
|
}
|
|
|
|
})().finally(() => {
|
|
setDisableBtn(false);
|
|
})
|
|
|
|
}
|
|
|
|
return <ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
|
|
<Dialog open={cors} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
|
|
<DialogTitle id="alert-dialog-title">
|
|
{"无法发送请求!"}
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText id="alert-dialog-description">
|
|
由于您的浏览器有 CORS 限制导致页面无法向 Mojang API/LSP-Yggdrasil API 发送请求。您可以选择 <Link href="https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino">点我安装绕过CORS Chrome浏览器插件</Link>。或者添加 Chrome 启动参数: --disable-web-security 来解决。
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => {setCors(false)}}>我知道了</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
<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">
|
|
{illegalMessgae}
|
|
</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" disabled={disableBtn} >
|
|
登录
|
|
</Button>
|
|
</Grid>
|
|
|
|
<Grid item>
|
|
<Link onClick={() => { navigate("/register") }} underline="always"> 没有账号? 点击注册 </Link>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
</Grid>
|
|
</Box>
|
|
</div>
|
|
</ThemeProvider>
|
|
}
|
|
|