UI optimize | Register UI
This commit is contained in:
Maxel Black
parent
a59457d8fc
commit
bf9480079f
|
|
@ -8,14 +8,24 @@
|
|||
Do you like manifest, google? Here you are '<link rel="manifest" href="%PUBLIC_URL%/fucku.json" />'
|
||||
-->
|
||||
<title>Charmless Yggdrasil</title>
|
||||
|
||||
<link rel="stylesheet" ref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" >
|
||||
<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 {
|
||||
width: 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>
|
||||
<link rel="stylesheet" ref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="noie.js" />
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { createTheme } from '@mui/material/styles'
|
|||
import { PageLogin } from './pages/login'
|
||||
import { BrowserRouter, Route, Routes } from 'react-router-dom'
|
||||
import { PageNotFound } from './pages/notfound'
|
||||
import { PageRegister } from './pages/register'
|
||||
|
||||
const API_BASE_ADDRESS = "http://127.0.0.1:30"
|
||||
|
||||
|
|
@ -39,6 +40,7 @@ const LSPYggdrasilWebApp = () => {
|
|||
return <BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={ <PageLogin /> } />
|
||||
<Route path="/register" element={ <PageRegister /> } />
|
||||
<Route path="*" element={ <PageNotFound /> } />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ 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()
|
||||
|
|
@ -33,48 +34,41 @@ export const PageLogin = () => {
|
|||
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' */ }
|
||||
<div className="rootPanel">
|
||||
|
||||
|
||||
<Box style={{ 'minWidth': '100%', 'minHeight': '100%', 'display': 'flex' }}>
|
||||
<Box>
|
||||
<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 style={{ minWidth: '80%', minHeight: '100%', marginTop: '5%' }} item>
|
||||
<Grid item className="title">
|
||||
<Typography variant="h5">
|
||||
登录到世界树
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
|
||||
<Grid item>
|
||||
<Collapse in={illegal}>
|
||||
<Alert severity="error">
|
||||
用户名或密码不可以为空
|
||||
无效的用户名或密码
|
||||
</Alert>
|
||||
</Collapse>
|
||||
|
||||
</Grid>
|
||||
|
||||
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
|
||||
<Grid item>
|
||||
<TextField fullWidth required label="用户名" type="text" autoComplete="current-username" inputRef={usernameInput} onInput={() => setIllegal(false)} />
|
||||
</Grid>
|
||||
|
||||
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
|
||||
<Grid 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" >
|
||||
<Grid item>
|
||||
<Button onClick={handleLogin} variant="contained" color="primary" >
|
||||
登录
|
||||
</Button>
|
||||
</Grid>
|
||||
|
||||
<Grid style={{ marginBottom: "2%" }} item>
|
||||
<Grid item>
|
||||
<Link onClick={() => { navigate("/register") }} underline="always"> 没有账号? 点击注册 </Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
Loading…
Reference in New Issue