修复 typo

Merge branch 'master' of direct-git.186526.xyz:Lama3L9R/lsp-yggdrasil-web
Production Ready
2022-07-14 15:10:21 +08:00 · 2022-07-14 12:23:12 +08:00 · 2022-07-14 12:23:05 +08:00 · 2022-07-14 04:12:57 +00:00 · 2022-07-14 00:51:34 +00:00 · 2022-07-14 08:42:56 +08:00
7 changed files with 407 additions and 67 deletions
--- a/public/index.html
+++ b/public/index.html
@ -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%;
+          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" />
--- a/src/index.tsx
+++ b/src/index.tsx
@ -4,8 +4,10 @@ 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'
+import { PageInfo } from './pages/info'

-const API_BASE_ADDRESS = "http://127.0.0.1:30"
+const API_BASE_ADDRESS = "https://api.charmless.today"

 export const api = (path: string) => API_BASE_ADDRESS + path

@ -39,6 +41,8 @@ const LSPYggdrasilWebApp = () => {
    return <BrowserRouter>
        <Routes>
            <Route path="/" element={ <PageLogin /> } />
+            <Route path="/register" element={ <PageRegister /> } />
+            <Route path="/info" element={ <PageInfo /> } />
            <Route path="*" element={ <PageNotFound /> } />
        </Routes>
    </BrowserRouter>
--- a/src/pages/custom.css
+++ b/src/pages/custom.css
@ -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,.MuiTypography-root {
+    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;
+}
--- a/src/pages/info.tsx
+++ b/src/pages/info.tsx
@ -0,0 +1,59 @@
+import { useRef, useState } from "react"
+import axios from "axios"
+import { api } from ".."
+
+export const PageInfo = () => {
+    const fileRef = useRef<HTMLInputElement>(null)
+    const [error, setError] = useState("没上传/没报错")
+    const [disableBtn, setDisableBtn] = useState(false)
+
+    return <div>
+        <h1>
+            总之如果你能看到这里说明你登陆成功了，下面是你的账号信息: Key（别发给别人）={window.sessionStorage.getItem('identifier')}, Textures={window.sessionStorage.getItem('textures')}, Username={window.sessionStorage.getItem('username')}, UUID={window.sessionStorage.getItem('uuid')}
+        </h1>
+
+        <h2>
+            神马？你问我改密码？我懒得做，真要改找lama
+        </h2>
+
+        <h3>
+            为什么这个页面成这个B样子了？因为我没时间做了，你就说能不能用吧
+        </h3>
+
+        <h4>
+            登出？自己关了这个页面就登出了
+        </h4>
+
+        <input type="file" accept=".png" ref={fileRef}></input>
+        <button disabled={disableBtn} onClick={() => {
+            setDisableBtn(true)
+            setError("正传着呢")
+            const file = fileRef.current?.files?.[0]
+            if(!file) {
+                return setError("你选了个寄吧，服务端不接受你不选文件谢谢")
+            }
+
+            (async () => {
+                const r = await axios({
+                    method: 'put',
+                    url: api('/api/textures/skin'),
+                    data: file,
+                    headers: {
+                        'content-type': 'image/png',
+                        'x-lsp-identifier': window.sessionStorage.getItem('identifier') as string
+                    }
+                })
+                if(r.data.err !== 1.048596) {
+                    return setError(`上传失败! 错误代码 ${r.data.err} 原因: ${r.data.msg}`)
+                } else {
+                    return setError("上传成功 msg=" + r.data.msg)
+                }
+            })().finally(() => {
+                setDisableBtn(false)
+            })
+        }}>上传（皮肤）</button>
+        <button disabled={disableBtn}>上传（披风）</button>
+
+        <p>皮肤上传报错：{error}</p>
+    </div>
+}
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@ -1,31 +1,64 @@
-import { Box, Button, CssBaseline, Grid, Link, Paper, TextField, ThemeProvider, Typography, Alert, Collapse } from "@mui/material"
+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 = () => {
-        const username = usernameInput.current?.value
-        const password = passwordInput.current?.value
-        if(!username || !password) {
-            return setIllegal(true)
-        }
+        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)
+                }

-        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)
+                
+                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);
        })
        
    }
@ -33,48 +66,55 @@ 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' */ }
-            
+        <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>

-            <Box style={{ 'minWidth': '100%', 'minHeight': '100%', 'display': 'flex' }}>
+        <div className="rootPanel">  
+
+            <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">
-                                        用户名或密码不可以为空
+                                        {illegalMessgae}
                                    </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" disabled={disableBtn} > 
                                    登录
                                </Button>
                            </Grid>

-                            <Grid style={{ marginBottom: "2%" }} item>
+                            <Grid item>
                                <Link onClick={() => { navigate("/register") }} underline="always"> 没有账号? 点击注册 </Link>
                            </Grid>
                        </Grid>
--- a/src/pages/notfound.tsx
+++ b/src/pages/notfound.tsx
@ -1,42 +1,59 @@
-import { Box, Button, CssBaseline, Grid, Typography } from "@mui/material"
+import { Paper, Box, Button, CssBaseline, Grid, Typography } from "@mui/material"
 import { ThemeProvider } from "@mui/material/styles"
 import { theme } from ".."
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 import { useNavigate } from "react-router-dom"
+import "./custom.css"

 export const PageNotFound = () => {
    const navigate = useNavigate()

    return <ThemeProvider theme={theme}>
        <CssBaseline />
-        <Box style={{ 'minWidth': '100%', 'minHeight': '100%', 'display': 'flex' }}>
-            <Grid container direction="row" justifyContent="center" alignItems="center" spacing={3}>
-                <Grid item> 
-                    <ErrorOutlineIcon style={{width: '11rem', height: '11rem'}}/>
+        <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={3}>
+                            <Grid item><Grid container direction="row" alignItems="center">
+                                <ErrorOutlineIcon style={{
+                                    width: '3rem',
+                                    height: '3rem',
+                                    marginRight: '0.5rem'
+                                }}/>
+                                <Typography variant="h5">
+                                    Oops! 网页娘迷路了~
+                                </Typography>
+                            </Grid></Grid>
+
+                            <Grid item style={{
+                                color: "pink",
+                                lineHeight: "5px"
+                            }}>
+                                <Typography>
+                                    如果你看到这个页面，那大概率是你乱访问了一个不存在的地址。
+                                </Typography>
+                            </Grid>
+                            <Grid item>
+                                <Typography>
+                                    如果不是这样的，那可能是网页出现了Bug，请截图发送给开发者 Qumolama.d 以寻求帮助。
+                                </Typography>
+                            </Grid>
+                            <Grid item>
+                                <Button variant="contained" color="primary" onClick={() => { navigate('/') }}>
+                                    返回主页
+                                </Button>
+                            </Grid>
+                            <Grid item>
+                                <Button variant="contained" color="primary" href="https://t.me/qumolama" target="_blank">
+                                    找开发者击剑
+                                </Button>
+                            </Grid>
+                        </Grid>
+                    </Paper>
                </Grid>
-
-                <Grid item style={{ 'maxWidth': '50%', 'maxHeight': '80%'}}> 
-                    <Grid container direction="column" justifyContent="center" alignItems="flex-start" spacing={1}>
-                        <Grid item>
-                            <Typography variant="h3">
-                                Oops! Page not found!
-                            </Typography>
-                        </Grid>
-
-                        <Grid item  style={{ 'maxWidth': '85%', 'maxHeight': '60%'}}>
-                            <Typography variant="body1" display="block" gutterBottom>
-                                您要访问的页面不存在！请确认您是不是瞎几把输入了个URL然后就访问。如果不是那就是出bug了，带上你访问的URL截图发给<strong> Lama </strong><div style={{'color': 'rgba(0,0,0,0)'}}>也解决不了</div>
-                            </Typography>
-                        </Grid>
-
-                        <Grid item>
-                            <Button variant="contained" color="primary" onClick={() => { navigate('/') }}>
-                                返回主页
-                            </Button>
-                        </Grid>
-                    </Grid>
-                </Grid>
-            </Grid>
-        </Box>
+            </Box>
+        </div>
    </ThemeProvider>
 }
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@ -0,0 +1,173 @@
+import { Box, Button, CssBaseline, Grid, Paper, TextField, Link, ThemeProvider, Typography, Alert, Collapse, Checkbox, FormGroup, FormControlLabel, Dialog, DialogTitle, DialogContentText, DialogActions, DialogContent } 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 usernameInput = useRef<HTMLInputElement>(null)
+    const passwordInput = useRef<HTMLInputElement>(null)
+    const emailInput = useRef<HTMLInputElement>(null)
+    const invitationCodeInput = useRef<HTMLInputElement>(null)
+    const validationCodeInput = useRef<HTMLInputElement>(null)
+    const [useMojangSkin, setUseMojangSkin] = useState(false)
+    const [disableBtn, setDisableBtn] = useState(false)
+    const [cors, setCors] = useState(false)
+    const [illegal, setIllegal] = useState(false)
+    const [illegalMessgae, setIllegalMessgae] = useState("")
+
+
+    const handleRegister = () => {
+        setDisableBtn(true);
+        (async () => {
+            const username = usernameInput.current?.value
+            const password = passwordInput.current?.value
+            const email = emailInput.current?.value
+            const invitationCode = invitationCodeInput.current?.value
+            const validationCode = validationCodeInput.current?.value
+            if(!username || !password) {
+                setIllegalMessgae("请将以下内容全部输入")
+                setIllegal(true)
+            }
+    
+            let textureMigrations = undefined
+    
+            if(useMojangSkin) {
+                try {
+                    const response = await axios.get("https://api.mojang.com/users/profiles/minecraft/" + username)
+                    const profile = await axios.get("https://sessionserver.mojang.com/session/minecraft/profile/" + response.data.id)
+                    profile.data.properties.forEach((prop: any) => {
+                        if(prop.name === "textures") {
+                            const texture = JSON.parse(atob(prop.value)).textures
+                            
+                            if(texture.SKIN || texture.CAPE) {
+                                textureMigrations = {
+                                    skin: texture.SKIN?.url ?? undefined,
+                                    cape: texture.CAPE?.url ?? undefined,
+                                }
+                            }
+                        }
+                    })
+                } catch(err: any) {
+                    if(err.code === "ERR_NETWORK") {
+                        setCors(true)
+                        return
+                    }
+                    setIllegalMessgae(`无法同步正版皮肤，可能是用户不存在`)
+                    setIllegal(true)
+                }
+            }
+
+            console.log(textureMigrations)
+    
+            try {
+                const response = await axios.post(api("/api/register"), {
+                    username,
+                    password,
+                    email,
+                    invitationCode,
+                    validationCode,
+                    textureMigrations
+                })
+    
+                if(response.data.err !== 1.048596) {
+                    setIllegalMessgae(`注册失败! 错误代码 ${response.data.err} 原因: ${response.data.msg}`)
+                    setIllegal(true)
+                } else {
+                    navigate("/")
+                }
+            } catch (err: any) {
+                if(err.code === "ERR_NETWORK") {
+                    setCors(true)
+                    return
+                }
+                setIllegalMessgae(`注册失败! 错误代码 ${err.code} 原因: ${err.message}`)
+                setIllegal(true)
+            }
+        })().finally(() => {
+            setDisableBtn(false);
+        })
+    }
+
+    //TODO
+
+    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 container style={{maxWidth: '100%'}}  spacing={2}>
+                                <Grid style={{maxWidth: '100%'}} item>
+                                    <Collapse style={{maxWidth: '100%'}}  in={illegal}>
+                                        <Alert style={{paddingRight: '1%', marginTop: '2px', maxWidth: '100%'}}  severity="error">
+                                            {illegalMessgae}
+                                        </Alert>
+                                    </Collapse>
+                                </Grid>
+
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth required label="用户名" type="text" inputRef={usernameInput} onInput={() => setIllegal(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth required label="密码" type="password" inputRef={passwordInput} onInput={() => setIllegal(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth required label="邮箱" type="text" inputRef={emailInput} onInput={() => setIllegal(false)} />
+                            </Grid>
+                            
+                            <Grid item>
+                                <TextField fullWidth required label="邀请码" type="text" inputRef={invitationCodeInput} onInput={() => setIllegal(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth required label="校验码" type="text" inputRef={validationCodeInput} onInput={() => setIllegal(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <FormGroup>
+                                    <FormControlLabel label="使用同名正版用户皮肤"  control={<Checkbox required checked={useMojangSkin} onClick={() => {setUseMojangSkin(!useMojangSkin)}} />}/>
+                                </FormGroup>
+                            </Grid>
+
+                            <Grid item>
+                                <Button onClick={handleRegister} variant="contained" color="primary" disabled={disableBtn} >
+                                    注册
+                                </Button>
+                            </Grid>
+                        </Grid>
+                    </Paper>
+                </Grid>
+            </Box>
+        </div>
+    </ThemeProvider>
+}
Author	SHA1	Message	Date
Qumolama.d	5a56b240e9	修复 typo	2022-07-14 15:10:21 +08:00
Qumolama.d	f579c37908	Merge branch 'master' of direct-git.186526.xyz:Lama3L9R/lsp-yggdrasil-web	2022-07-14 12:23:12 +08:00
Qumolama.d	4ebb1d8e88	Production Ready	2022-07-14 12:23:05 +08:00
Lama3L9R	716b287e29	Merge pull request 'Fix 404 page bug' (#2 ) from maxelblack/lsp-yggdrasil-web:master into master Reviewed-on: #2	2022-07-14 04:12:57 +00:00
Maxel Black	38c8d59224	Merge branch 'master' into master	2022-07-14 00:51:34 +00:00
Maxel Black	7b5a08a2ad	Fix 404 page bug	2022-07-14 08:42:56 +08:00
Lama3L9R	b621b71494	Merge pull request '整体UI优化和船新Register界面' (#1 ) from maxelblack/lsp-yggdrasil-web:master into master Reviewed-on: #1	2022-07-13 14:59:42 +00:00
Maxel Black	bf9480079f	UI optimize \| Register UI	2022-07-07 03:15:23 +08:00