Lama3L9R/lsp-yggdrasil-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI optimize | Register UI

Browse Source
This commit is contained in:
Maxel Black
2022-07-07 03:15:23 +08:00
parent a59457d8fc
commit bf9480079f
5 changed files with 147 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/index.html
View File

@ -8,14 +8,24 @@
Do you like manifest, google? Here you are '<link rel="manifest" href="%PUBLIC_URL%/fucku.json" />' Do you like manifest, google? Here you are '<link rel="manifest" href="%PUBLIC_URL%/fucku.json" />'
--> -->
<title>Charmless Yggdrasil</title> <title>Charmless Yggdrasil</title>
<link rel="stylesheet" ref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" >
<style> <style>
@font-face {
font-family: "OPPO Sans";
src: url(https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2);
}
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: "OPPO Sans" !important;
}
div.rootPanel {
background-image: url("charmlessbg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} }
</style> </style>
<link rel="stylesheet" ref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
</head> </head>
<body> <body>
<script type="text/javascript" src="noie.js" /> <script type="text/javascript" src="noie.js" />

2
src/index.tsx
View File

@ -4,6 +4,7 @@ import { createTheme } from '@mui/material/styles'
import { PageLogin } from './pages/login' import { PageLogin } from './pages/login'
import { BrowserRouter, Route, Routes } from 'react-router-dom' import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { PageNotFound } from './pages/notfound' import { PageNotFound } from './pages/notfound'
import { PageRegister } from './pages/register'
const API_BASE_ADDRESS = "http://127.0.0.1:30" const API_BASE_ADDRESS = "http://127.0.0.1:30"
@ -39,6 +40,7 @@ const LSPYggdrasilWebApp = () => {
return <BrowserRouter> return <BrowserRouter>
<Routes> <Routes>
<Route path="/" element={ <PageLogin /> } /> <Route path="/" element={ <PageLogin /> } />
<Route path="/register" element={ <PageRegister /> } />
<Route path="*" element={ <PageNotFound /> } /> <Route path="*" element={ <PageNotFound /> } />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

37
src/pages/custom.css Normal file
View File

@ -0,0 +1,37 @@
.MuiBox-root {
min-width: 100%;
min-height: 100%;
display: flex;
}
.MuiGrid-item {
min-width: 100%;
min-height: 100%;
}
.MuiButton-root {
min-width: 100% !important;
border-radius: 18px !important;
}
.MuiAlert-root,.MuiOutlinedInput-root {
border-radius: 8px !important;
}
.MuiLink-root {
text-align: center;
min-width: 100%;
}
.MuiAlert-message,.MuiInputLabel-root,.MuiButton-contained {
font-family: "OPPO Sans" !important;
}
div.title {
font-size: 1.8rem !important;
min-width: unset;
}
div.inlineBox {
background-color: #0009;
padding: 2.6em;
border-radius: 30px;
min-width: 430px;
min-height: 330px;
max-width: 500px;
}

30
src/pages/login.tsx
View File

@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"
import { api, theme } from '../index' import { api, theme } from '../index'
import axios from "axios" import axios from "axios"
import { useRef, useState } from "react" import { useRef, useState } from "react"
import "./custom.css"
export const PageLogin = () => { export const PageLogin = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -33,48 +34,41 @@ export const PageLogin = () => {
return <ThemeProvider theme={theme}> return <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<div style={{ <div className="rootPanel">
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' }}> <Box>
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}> <Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
<Paper style={{minWidth: '430px', minHeight: '330px', borderRadius: '30px'} as any} elevation={3}> <Paper elevation={3} className="inlineBox">
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}> <Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}>
<Grid style={{ minWidth: '80%', minHeight: '100%', marginTop: '5%' }} item> <Grid item className="title">
<Typography variant="h5"> <Typography variant="h5">
登录到世界树 登录到世界树
</Typography> </Typography>
</Grid> </Grid>
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item> <Grid item>
<Collapse in={illegal}> <Collapse in={illegal}>
<Alert severity="error"> <Alert severity="error">
用户名或密码不可以为空 无效的用户名或密码
</Alert> </Alert>
</Collapse> </Collapse>
</Grid> </Grid>
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item> <Grid item>
<TextField fullWidth required label="用户名" type="text" autoComplete="current-username" inputRef={usernameInput} onInput={() => setIllegal(false)} /> <TextField fullWidth required label="用户名" type="text" autoComplete="current-username" inputRef={usernameInput} onInput={() => setIllegal(false)} />
</Grid> </Grid>
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item> <Grid item>
<TextField fullWidth required label="密码" type="password" autoComplete="current-password" inputRef={passwordInput} onInput={() => setIllegal(false)} /> <TextField fullWidth required label="密码" type="password" autoComplete="current-password" inputRef={passwordInput} onInput={() => setIllegal(false)} />
</Grid> </Grid>
<Grid style={{ minWidth: '80%',minHeight: '100%' }} item> <Grid item>
<Button onClick={handleLogin} style={{ minWidth: '100%', minHeight: '100%' }} variant="contained" color="primary" > <Button onClick={handleLogin} variant="contained" color="primary" >
登录 登录
</Button> </Button>
</Grid> </Grid>
<Grid style={{ marginBottom: "2%" }} item> <Grid item>
<Link onClick={() => { navigate("/register") }} underline="always"> 没有账号? 点击注册 </Link> <Link onClick={() => { navigate("/register") }} underline="always"> 没有账号? 点击注册 </Link>
</Grid> </Grid>
</Grid> </Grid>

82
src/pages/register.tsx Normal file
View File

@ -0,0 +1,82 @@
import { Box, Button, CssBaseline, Grid, 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 PageRegister = () => {
const navigate = useNavigate()
const [illegal1, setIllegal1] = useState(false)
const [illegal2, setIllegal2] = useState(false)
const [illegal3, setIllegal3] = useState(false)
//TODO
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 container spacing={2}>
<Grid item><Collapse in={illegal1}>
<Alert severity="error">
无效的用户名、密码或邮箱
</Alert>
</Collapse></Grid>
<Grid item><Collapse in={illegal2}>
<Alert severity="error">
无效的邀请码
</Alert>
</Collapse></Grid>
<Grid item><Collapse in={illegal3}>
<Alert severity="error">
无效的邀请码
</Alert>
</Collapse></Grid>
</Grid>
<Grid item>
<TextField fullWidth required label="用户名" type="text" /* inputRef={usernameInput} */ onInput={() => setIllegal1(false)} />
</Grid>
<Grid item>
<TextField fullWidth required label="密码" type="password" /* inputRef={passwordInput} */ onInput={() => setIllegal1(false)} />
</Grid>
<Grid item>
<TextField fullWidth required label="邮箱" type="text" /* inputRef={emailInput} */ onInput={() => setIllegal1(false)} />
</Grid>
<Grid item>
<TextField fullWidth required label="校验码" type="text" /* inputRef={validationCodeInput} */ onInput={() => setIllegal2(false)} />
</Grid>
<Grid item>
<TextField fullWidth label="邀请码" type="text" /* inputRef={invitationCodeInput} */ onInput={() => setIllegal3(false)} />
</Grid>
<Grid item>
<Button /* onClick={handleRegister} */ variant="contained" color="primary" >
注册
</Button>
</Grid>
</Grid>
</Paper>
</Grid>
</Box>
</div>
</ThemeProvider>
}