前端重构

2023-02-03 00:21:17 +08:00
parent 2fdff3cb33
commit 3c6d8df6d6
31 changed files with 4649 additions and 705 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,31 @@
+<!--
+  ~ Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+<!--    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Yggdrasil Go</title>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<script type="module" src="src/main.tsx"></script>
+</body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "yggdrasil-go",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@fontsource/roboto": "^4.5.8",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.6",
+    "@react-three/drei": "^9.56.12",
+    "@react-three/fiber": "^8.10.1",
+    "@react-three/postprocessing": "^2.7.0",
+    "axios": "^1.2.6",
+    "notistack": "^2.0.8",
+    "postprocessing": "^6.29.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.0",
+    "three": "^0.148.0",
+    "three-stdlib": "^2.21.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@types/three": "^0.148.0",
+    "@vitejs/plugin-react": "^3.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vite-plugin-mock-dev-server": "^0.3.16"
+  }
+}
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+#root {
+  width: 100%;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -0,0 +1,105 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import './app.css';
+import Login from './login';
+import {Container} from '@mui/material';
+import {AppState} from './types';
+import User from './user';
+import axios from 'axios';
+import {useSnackbar} from 'notistack';
+
+function App() {
+    const {enqueueSnackbar} = useSnackbar();
+    const [appData, setAppData] = React.useState(() => {
+        const saved = localStorage.getItem('appData');
+        return (saved ? JSON.parse(saved) : {
+            login: false,
+            accessToken: '',
+            tokenValid: false,
+            loginTime: 0,
+            profileName: '',
+            uuid: ''
+        }) as AppState;
+    });
+
+    React.useEffect(() => {
+        localStorage.setItem('appData', JSON.stringify(appData));
+    }, [appData]);
+
+    const setTokenValid = (tokenValid: boolean) => appData.tokenValid != tokenValid && setAppData((oldData: AppState) => {
+        return tokenValid ? {
+            ...oldData,
+            tokenValid: true
+        } : {
+            ...oldData,
+            tokenValid: false,
+            accessToken: '',
+            loginTime: 0
+        };
+    });
+
+    setTokenValid((appData.accessToken && Date.now() - appData.loginTime < 30 * 86400 * 1000) as boolean)
+
+    if (appData.tokenValid) {
+        let postData = {
+            accessToken: appData.accessToken,
+        };
+        axios.post('/authserver/validate', postData)
+            .catch(e => {
+            const response = e.response;
+            if (response && response.status == 403) {
+                axios.post('/authserver/refresh', postData)
+                    .then(response => {
+                        const data = response.data;
+                        if (data && data.accessToken) {
+                            setAppData({
+                                ...appData,
+                                accessToken: data.accessToken,
+                                loginTime: Date.now(),
+                                profileName: data.selectedProfile?.name,
+                                uuid: data.selectedProfile?.id
+                            });
+                            enqueueSnackbar('刷新token成功，accessToken:' + data.accessToken, {variant: 'success'});
+                        } else {
+                            setTokenValid(false);
+                        }
+                    })
+                    .catch(e => {
+                        const response = e.response;
+                        if (response && response.status == 403) {
+                            enqueueSnackbar('登录已过期', {variant: 'warning'});
+                            setTokenValid(false);
+                        } else {
+                            enqueueSnackbar('网络错误:' + e.message, {variant: 'error'});
+                        }
+                    });
+            } else {
+                enqueueSnackbar('网络错误:' + e.message, {variant: 'error'});
+            }
+        });
+    }
+
+    return (
+        <Container maxWidth={'lg'}>
+            {appData.tokenValid ? <User appData={appData} setAppData={setAppData}/> : <Login appData={appData} setAppData={setAppData}/>}
+        </Container>
+    );
+}
+
+export default App;
--- a/frontend/src/components.tsx
+++ b/frontend/src/components.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Collapse, FormHelperText, FormHelperTextProps, useFormControl} from '@mui/material';
+
+export function FocusedShowHelperText(props: FormHelperTextProps) {
+    const {focused} = useFormControl() || {};
+
+    return <Collapse in={focused}><FormHelperText id={props.id}>{props.children}</FormHelperText></Collapse>;
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
--- a/frontend/src/login.css
+++ b/frontend/src/login.css
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.header {
+    text-align: center;
+}
+
+.login-card {
+    padding: 14px 24px;
+    margin: auto;
+}
+
+.username,
+.profileName,
+.password {
+    display: block;
+    width: 87%;
+    margin: 20px auto;
+}
+
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 87%;
+    margin: auto;
+}
+
+.button-container button {
+    margin: 3px;
+}
--- a/frontend/src/login.tsx
+++ b/frontend/src/login.tsx
@@ -0,0 +1,206 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import Button from '@mui/material/Button';
+import {
+    Box,
+    Collapse,
+    Container,
+    FilledInput,
+    FormControl,
+    IconButton,
+    InputAdornment,
+    InputLabel,
+    Paper,
+    TextField
+} from '@mui/material';
+import {Visibility, VisibilityOff} from '@mui/icons-material';
+import {AppState} from './types';
+import './login.css';
+import {SubmitHandler, useForm} from 'react-hook-form';
+import axios from 'axios';
+import {useSnackbar} from 'notistack';
+import {FocusedShowHelperText} from './components';
+
+type Inputs = {
+    username: string,
+    profileName: string,
+    password: string
+};
+
+function Login(props: { appData: AppState, setAppData: React.Dispatch<React.SetStateAction<AppState>> }) {
+    const {appData, setAppData} = props;
+    const {enqueueSnackbar} = useSnackbar();
+    const {register, handleSubmit, formState: {errors}} = useForm<Inputs>();
+    const [submitting, setSubmitting] = React.useState(false);
+    const onSubmit: SubmitHandler<Inputs> = data => {
+        setSubmitting(true)
+        if (appData.login) {
+            axios.post('/authserver/authenticate', {
+                username: data.username,
+                password: data.password
+            })
+                .then(response => {
+                    let data = response.data
+                    if (data && data.accessToken) {
+                        enqueueSnackbar("登录成功，accessToken:" + data.accessToken, {variant: 'success'});
+                        setAppData({
+                            ...appData,
+                            accessToken: data.accessToken,
+                            tokenValid: true,
+                            loginTime: Date.now(),
+                            profileName: data.selectedProfile?.name,
+                            uuid: data.selectedProfile?.id
+                        });
+                    } else {
+                        enqueueSnackbar(data && data.errorMessage ? "登录失败: " + data.errorMessage: "登陆失败", {variant: 'error'});
+                    }
+                })
+                .catch(e => {
+                    const response = e.response;
+                    if (response && response.status == 403) {
+                        enqueueSnackbar('登录失败: ' + response.data.errorMessage, {variant: 'error'});
+                    } else {
+                        enqueueSnackbar('网络错误:' + e.message, {variant: 'error'});
+                    }
+                })
+                .finally(() => setSubmitting(false))
+        } else {
+            axios.post('/authserver/register', {
+                username: data.username,
+                password: data.password,
+                profileName: data.profileName
+            })
+                .then(response => {
+                    let data = response.data
+                    if (data && data.id) {
+                        enqueueSnackbar("注册成功，uuid:" + data.id, {variant: 'success'});
+                        setLogin(true)
+                    } else {
+                        enqueueSnackbar(data && data.errorMessage ? "注册失败: " + data.errorMessage: "注册失败", {variant: 'error'});
+                    }
+                })
+                .catch(e => {
+                    const response = e.response;
+                    if (response && response.data) {
+                        let errorMessage = response.data.errorMessage;
+                        let message =  "注册失败: " + errorMessage;
+                        if (errorMessage === "profileName exist") {
+                            message = "注册失败: 角色名已存在";
+                        } else if (errorMessage === "profileName duplicate") {
+                            message = "注册失败: 角色名与正版用户冲突";
+                        }
+                        enqueueSnackbar(message, {variant: 'error'});
+                    } else {
+                        enqueueSnackbar('网络错误:' + e.message, {variant: 'error'});
+                    }
+                })
+                .finally(() => setSubmitting(false))
+        }
+    };
+
+    const [showPassword, setShowPassword] = React.useState(false);
+
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+    const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+    };
+
+    const setLogin = (login: boolean) => setAppData((oldData: AppState) => {
+        return {
+            ...oldData,
+            login
+        };
+    });
+
+    return (
+        <Container maxWidth={'sm'}>
+            <Paper className={'login-card'}>
+                <section className="header">
+                    <h1>简陋注册页</h1>
+                </section>
+                <Box component="form" autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
+                    <div className='username'>
+                        <TextField
+                            id="username-input"
+                            name='username'
+                            fullWidth
+                            label="邮箱"
+                            variant="filled"
+                            required
+                            error={errors.username && true}
+                            type='email'
+                            inputProps={{
+                                ...register('username', {required: true})
+                            }}
+                        />
+                    </div>
+                    <Collapse in={!appData.login} className='profileName'>
+                        <FormControl fullWidth variant="filled" required={!appData.login} error={errors.profileName && true}>
+                            <InputLabel htmlFor="profileName-input">角色名</InputLabel>
+                            <FilledInput
+                                id="profileName-input"
+                                name="profileName"
+                                required={!appData.login}
+                                inputProps={appData.login ? {} : {
+                                    minLength: '2', maxLength: 16,
+                                    ...register('profileName', {required: true, minLength: 2, pattern: /^[a-zA-Z0-9_]{1,16}$/, maxLength: 16})
+                                }}
+                            />
+                            <FocusedShowHelperText id="profileName-input-helper-text">字母，数字或下划线</FocusedShowHelperText>
+                        </FormControl>
+                    </Collapse>
+                    <div className='password'>
+                        <FormControl fullWidth variant="filled" required error={errors.password && true}>
+                            <InputLabel htmlFor="password-input">密码</InputLabel>
+                            <FilledInput
+                                id="password-input"
+                                name="password"
+                                required
+                                type={showPassword ? 'text' : 'password'}
+                                endAdornment={
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            aria-label="显示密码"
+                                            onClick={handleClickShowPassword}
+                                            onMouseDown={handleMouseDownPassword}
+                                            edge="end">
+                                            {showPassword ? <VisibilityOff/> : <Visibility/>}
+                                        </IconButton>
+                                    </InputAdornment>
+                                }
+                                inputProps={{
+                                    minLength: '6',
+                                    ...register('password', {required: true, minLength: 6})
+                                }}
+                            />
+                            <FocusedShowHelperText id="password-input-helper-text">警告: 暂无重置密码接口，请妥善保管密码</FocusedShowHelperText>
+                        </FormControl>
+                    </div>
+                    <div className='button-container'>
+                        <Button variant='contained' onClick={() => setLogin(!appData.login)} disabled={submitting}>{appData.login ? '注册' : '已有帐号登录'}</Button>
+                        <Button variant='contained' type='submit' disabled={submitting}>{appData.login ? '登录' : '注册'}</Button>
+                    </div>
+                </Box>
+            </Paper>
+        </Container>
+    );
+}
+
+export default Login;
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import { SnackbarProvider } from 'notistack';
+import {CssBaseline} from '@mui/material';
+import App from './app';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+        <CssBaseline/>
+        <SnackbarProvider maxSnack={3} anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
+            <App/>
+        </SnackbarProvider>
+    </React.StrictMode>,
+);
--- a/frontend/src/skinrender/skin-render.tsx
+++ b/frontend/src/skinrender/skin-render.tsx
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Box} from '@mui/material';
+import * as THREE from 'three';
+import {Canvas, RootState, useFrame, useLoader} from '@react-three/fiber';
+import React from 'react';
+import createPlayerModel from './utils';
+import {OrbitControls} from '@react-three/drei';
+import {EffectComposer, Vignette, SMAA, SSAO, SSR} from '@react-three/postprocessing';
+import {BlendFunction} from 'postprocessing';
+
+function PlayerModel(props: { skinUrl: string, capeUrl?: string, slim?: boolean }) {
+    const {skinUrl, capeUrl, slim} = props;
+    console.log(props);
+    const skinTexture: THREE.Texture = useLoader(THREE.TextureLoader, skinUrl);
+    skinTexture.magFilter = THREE.NearestFilter;
+    skinTexture.minFilter = THREE.NearestFilter;
+    skinTexture.anisotropy = 0;
+    skinTexture.needsUpdate = true;
+    let version = 0;
+    if (skinTexture.image.height > 32) {
+        version = 1;
+    }
+    let capeTexture: THREE.Texture | undefined = undefined;
+    if (capeUrl) {
+        capeTexture = useLoader(THREE.TextureLoader, capeUrl);
+        if (capeTexture) {
+            capeTexture.magFilter = THREE.NearestFilter;
+            capeTexture.minFilter = THREE.NearestFilter;
+            capeTexture.anisotropy = 0;
+            capeTexture.needsUpdate = true;
+        }
+    }
+    let playerModel = createPlayerModel(skinTexture, capeTexture, version, slim);
+    useFrame((state, delta) => {
+        playerModel.rotation.y += delta * 0.7;
+    });
+    return (
+        <primitive object={playerModel} position={[0, -10, 0]}/>
+    );
+}
+
+function SkinRender(props: { skinUrl: string, capeUrl?: string, slim?: boolean }) {
+    const onCanvasCreate = (state: RootState) => {
+        state.gl.shadowMap.enabled = true;
+        state.gl.shadowMap.type = THREE.PCFSoftShadowMap;
+    };
+    return (
+        <Box component="div" height="600px">
+            <section className="header">
+                <h3>预览</h3>
+            </section>
+
+            <Canvas
+                camera={{position: [0, 15, 35], near: 5}}
+                gl={{antialias: true, alpha: true, preserveDrawingBuffer: true}}
+                onCreated={onCanvasCreate}>
+                <ambientLight color={0xa0a0a0}/>
+                <PlayerModel {...props}/>
+                <OrbitControls makeDefault/>
+                <EffectComposer>
+                    <SSAO
+                        blendFunction={BlendFunction.OVERLAY}
+                        samples={30}
+                        rings={4}
+                        distanceThreshold={1.0}
+                        distanceFalloff={0.0}
+                        rangeThreshold={0.5}
+                        rangeFalloff={0.1}
+                        luminanceInfluence={0.9}
+                        radius={20}
+                        scale={0.5}
+                        bias={0.5}
+                    />
+                </EffectComposer>
+            </Canvas>
+        </Box>
+    );
+}
+
+export default SkinRender;
--- a/frontend/src/skinrender/texture-positions.ts
+++ b/frontend/src/skinrender/texture-positions.ts
--- a/frontend/src/skinrender/utils.ts
+++ b/frontend/src/skinrender/utils.ts
@@ -0,0 +1,314 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import * as THREE from 'three';
+import {texturePositions} from './texture-positions';
+import {BufferAttribute} from 'three';
+
+function createCube(texture: THREE.Texture, width: number, height: number, depth: number, textures: any, slim: boolean, name: string, transparent: boolean = false) {
+    let textureWidth: number = texture.image.width;
+    let textureHeight: number = texture.image.height;
+
+    let geometry = new THREE.BoxGeometry(width, height, depth);
+    let material = new THREE.MeshStandardMaterial({
+        /*color: 0x00ff00,*/
+        map: texture,
+        transparent: transparent || false,
+        alphaTest: 0.1,
+        side: transparent ? THREE.DoubleSide : THREE.FrontSide
+    });
+
+    geometry.computeBoundingBox();
+
+    const uvAttribute = geometry.getAttribute('uv') as BufferAttribute;
+
+    let faceNames = ['right', 'left', 'top', 'bottom', 'front', 'back'];
+    let faceUvs = [];
+    for (let i = 0; i < faceNames.length; i++) {
+        let face = textures[faceNames[i]];
+        // if (faceNames[i] === 'back') {
+            //     console.log(face)
+            // console.log("X: " + (slim && face.sx ? face.sx : face.x))
+            // console.log("W: " + (slim && face.sw ? face.sw : face.w))
+        // }
+        let w = textureWidth;
+        let h = textureHeight;
+        let tx1 = ((slim && face.sx ? face.sx : face.x) / w);
+        let ty1 = (face.y / h);
+        let tx2 = (((slim && face.sx ? face.sx : face.x) + (slim && face.sw ? face.sw : face.w)) / w);
+        let ty2 = ((face.y + face.h) / h);
+
+        faceUvs[i] = [
+            new THREE.Vector2(tx1, ty2),
+            new THREE.Vector2(tx1, ty1),
+            new THREE.Vector2(tx2, ty1),
+            new THREE.Vector2(tx2, ty2)
+        ];
+        // console.log(faceUvs[i])
+
+        let flipX = face.flipX;
+        let flipY = face.flipY;
+
+        let temp;
+        if (flipY) {
+            temp = faceUvs[i].slice(0);
+            faceUvs[i][0] = temp[2];
+            faceUvs[i][1] = temp[3];
+            faceUvs[i][2] = temp[0];
+            faceUvs[i][3] = temp[1];
+        }
+        if (flipX) {//flip x
+            temp = faceUvs[i].slice(0);
+            faceUvs[i][0] = temp[3];
+            faceUvs[i][1] = temp[2];
+            faceUvs[i][2] = temp[1];
+            faceUvs[i][3] = temp[0];
+        }
+    }
+
+    let j = 0;
+    for (let i = 0; i < faceUvs.length; i++) {
+        uvAttribute.setXY(j++, faceUvs[i][0].x, faceUvs[i][0].y);
+        uvAttribute.setXY(j++, faceUvs[i][3].x, faceUvs[i][3].y);
+        uvAttribute.setXY(j++, faceUvs[i][1].x, faceUvs[i][1].y);
+        uvAttribute.setXY(j++, faceUvs[i][2].x, faceUvs[i][2].y);
+    }
+    uvAttribute.needsUpdate = true;
+
+    let cube = new THREE.Mesh(geometry, material);
+    cube.name = name;
+    // cube.position.set(x, y, z);
+    cube.castShadow = true;
+    cube.receiveShadow = false;
+
+    return cube;
+}
+
+
+export default function createPlayerModel(skinTexture: THREE.Texture, capeTexture: THREE.Texture | null | undefined, v: number, slim: boolean = false, capeType?: string): THREE.Object3D<THREE.Event> {
+    let headGroup = new THREE.Object3D();
+    headGroup.name = 'headGroup';
+    headGroup.position.x = 0;
+    headGroup.position.y = 28;
+    headGroup.position.z = 0;
+    headGroup.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+    let head = createCube(skinTexture,
+        8, 8, 8,
+        texturePositions.head[v],
+        slim,
+        'head'
+    );
+    head.translateOnAxis(new THREE.Vector3(0, 1, 0), 4);
+    headGroup.add(head);
+    let hat = createCube(skinTexture,
+        8.667, 8.667, 8.667,
+        texturePositions.hat[v],
+        slim,
+        'hat',
+        true
+    );
+    hat.translateOnAxis(new THREE.Vector3(0, 1, 0), 4);
+    headGroup.add(hat);
+
+    let bodyGroup = new THREE.Object3D();
+    bodyGroup.name = 'bodyGroup';
+    bodyGroup.position.x = 0;
+    bodyGroup.position.y = 18;
+    bodyGroup.position.z = 0;
+    let body = createCube(skinTexture,
+        8, 12, 4,
+        texturePositions.body[v],
+        slim,
+        'body'
+    );
+    bodyGroup.add(body);
+    if (v >= 1) {
+        let jacket = createCube(skinTexture,
+            8.667, 12.667, 4.667,
+            texturePositions.jacket,
+            slim,
+            'jacket',
+            true
+        );
+        bodyGroup.add(jacket);
+    }
+
+    let leftArmGroup = new THREE.Object3D();
+    leftArmGroup.name = 'leftArmGroup';
+    leftArmGroup.position.x = slim ? -5.5 : -6;
+    leftArmGroup.position.y = 18;
+    leftArmGroup.position.z = 0;
+    leftArmGroup.translateOnAxis(new THREE.Vector3(0, 1, 0), 4);
+    let leftArm = createCube(skinTexture,
+        slim ? 3 : 4, 12, 4,
+        texturePositions.leftArm[v],
+        slim,
+        'leftArm'
+    );
+    leftArm.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+    leftArmGroup.add(leftArm);
+    if (v >= 1) {
+        let leftSleeve = createCube(skinTexture,
+            slim ? 3.667 : 4.667, 12.667, 4.667,
+            texturePositions.leftSleeve,
+            slim,
+            'leftSleeve',
+            true
+        );
+        leftSleeve.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+        leftArmGroup.add(leftSleeve);
+    }
+
+    let rightArmGroup = new THREE.Object3D();
+    rightArmGroup.name = 'rightArmGroup';
+    rightArmGroup.position.x = slim ? 5.5 : 6;
+    rightArmGroup.position.y = 18;
+    rightArmGroup.position.z = 0;
+    rightArmGroup.translateOnAxis(new THREE.Vector3(0, 1, 0), 4);
+    let rightArm = createCube(skinTexture,
+        slim ? 3 : 4, 12, 4,
+        texturePositions.rightArm[v],
+        slim,
+        'rightArm'
+    );
+    rightArm.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+    rightArmGroup.add(rightArm);
+    if (v >= 1) {
+        let rightSleeve = createCube(skinTexture,
+            slim ? 3.667 : 4.667, 12.667, 4.667,
+            texturePositions.rightSleeve,
+            slim,
+            'rightSleeve',
+            true
+        );
+        rightSleeve.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+        rightArmGroup.add(rightSleeve);
+    }
+
+    let leftLegGroup = new THREE.Object3D();
+    leftLegGroup.name = 'leftLegGroup';
+    leftLegGroup.position.x = -2;
+    leftLegGroup.position.y = 6;
+    leftLegGroup.position.z = 0;
+    leftLegGroup.translateOnAxis(new THREE.Vector3(0, 1, 0), 4);
+    let leftLeg = createCube(skinTexture,
+        4, 12, 4,
+        texturePositions.leftLeg[v],
+        slim,
+        'leftLeg'
+    );
+    leftLeg.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+    leftLegGroup.add(leftLeg);
+    if (v >= 1) {
+        let leftTrousers = createCube(skinTexture,
+            4.667, 12.667, 4.667,
+            texturePositions.leftTrousers,
+            slim,
+            'leftTrousers',
+            true
+        );
+        leftTrousers.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+        leftLegGroup.add(leftTrousers);
+    }
+
+    let rightLegGroup = new THREE.Object3D();
+    rightLegGroup.name = 'rightLegGroup';
+    rightLegGroup.position.x = 2;
+    rightLegGroup.position.y = 6;
+    rightLegGroup.position.z = 0;
+    rightLegGroup.translateOnAxis(new THREE.Vector3(0, 1, 0), 4);
+    let rightLeg = createCube(skinTexture,
+        4, 12, 4,
+        texturePositions.rightLeg[v],
+        slim,
+        'rightLeg'
+    );
+    rightLeg.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+    rightLegGroup.add(rightLeg);
+    if (v >= 1) {
+        let rightTrousers = createCube(skinTexture,
+            4.667, 12.667, 4.667,
+            texturePositions.rightTrousers,
+            slim,
+            'rightTrousers',
+            true
+        );
+        rightTrousers.translateOnAxis(new THREE.Vector3(0, 1, 0), -4);
+        rightLegGroup.add(rightTrousers);
+    }
+
+    let playerGroup = new THREE.Object3D();
+    playerGroup.add(headGroup);
+    playerGroup.add(bodyGroup);
+    playerGroup.add(leftArmGroup);
+    playerGroup.add(rightArmGroup);
+    playerGroup.add(leftLegGroup);
+    playerGroup.add(rightLegGroup);
+
+    if (capeTexture) {
+        console.log(texturePositions);
+        let capeTextureCoordinates = texturePositions.capeRelative;
+        if (capeType === 'optifine') {
+            capeTextureCoordinates = texturePositions.capeOptifineRelative;
+        }
+        if (capeType === 'labymod') {
+            capeTextureCoordinates = texturePositions.capeLabymodRelative;
+        }
+        capeTextureCoordinates = JSON.parse(JSON.stringify(capeTextureCoordinates)); // bad clone to keep the below scaling from affecting everything
+
+        console.log(capeTextureCoordinates);
+
+        type CubeTextureKey = 'left' | 'right' | 'front' | 'back' | 'top' | 'bottom'
+        // Multiply coordinates by image dimensions
+        for (let cord in capeTextureCoordinates) {
+            let key = cord as CubeTextureKey;
+            capeTextureCoordinates[key].x *= capeTexture.image.width;
+            capeTextureCoordinates[key].w *= capeTexture.image.width;
+            capeTextureCoordinates[key].y *= capeTexture.image.height;
+            capeTextureCoordinates[key].h *= capeTexture.image.height;
+        }
+
+        console.log(capeTextureCoordinates);
+
+        let capeGroup = new THREE.Object3D();
+        capeGroup.name = 'capeGroup';
+        capeGroup.position.x = 0;
+        capeGroup.position.y = 16;
+        capeGroup.position.z = -2.5;
+        capeGroup.translateOnAxis(new THREE.Vector3(0, 1, 0), 8);
+        capeGroup.translateOnAxis(new THREE.Vector3(0, 0, 1), 0.5);
+        let cape = createCube(capeTexture,
+            10, 16, 1,
+            capeTextureCoordinates,
+            false,
+            'cape');
+        cape.rotation.x = toRadians(10); // slight backward angle
+        cape.translateOnAxis(new THREE.Vector3(0, 1, 0), -8);
+        cape.translateOnAxis(new THREE.Vector3(0, 0, 1), -0.5);
+        cape.rotation.y = toRadians(180); // flip front&back to be correct
+        capeGroup.add(cape);
+
+        playerGroup.add(capeGroup);
+    }
+
+    return playerGroup;
+}
+
+
+function toRadians(angle: number) {
+    return angle * (Math.PI / 180);
+}
--- a/frontend/src/types.d.ts
+++ b/frontend/src/types.d.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export type AppState = {
+    login: boolean
+    accessToken: string
+    tokenValid: boolean
+    loginTime: number
+    profileName: string
+    uuid: string
+}
--- a/frontend/src/user.css
+++ b/frontend/src/user.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+.header {
+    text-align: center;
+}
+
+.user-card {
+    padding: 14px 24px;
+    margin: auto;
+}
+
+.model,
+.textureType,
+.url,
+.changeTo {
+    display: block;
+    width: 87%;
+    margin: 20px auto;
+}
+
+.file {
+    display: flex;
+    width: 87%;
+    margin: 20px auto;
+}
+
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 87%;
+    margin: auto;
+}
+
+.button-container button {
+    margin: 3px;
+}
+
--- a/frontend/src/user.tsx
+++ b/frontend/src/user.tsx
@@ -0,0 +1,474 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import {
+    Box,
+    Collapse,
+    Container,
+    Fade,
+    FilledInput,
+    FormControl,
+    FormControlLabel,
+    FormLabel,
+    IconButton,
+    InputAdornment,
+    InputLabel,
+    Paper,
+    Radio,
+    RadioGroup,
+    TextField
+} from '@mui/material';
+import './user.css';
+import {AppState} from './types';
+import {Delete} from '@mui/icons-material';
+import Button from '@mui/material/Button';
+import {useSnackbar} from 'notistack';
+import {FocusedShowHelperText} from './components';
+import {SubmitHandler, useForm} from 'react-hook-form';
+import axios from 'axios';
+import SkinRender from './skinrender/skin-render';
+
+function handleMouseDown(event: React.MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+}
+
+function UploadTextureForm(props: {
+    appData: AppState,
+    setAppData: React.Dispatch<React.SetStateAction<AppState>>,
+    skinData: SkinData | null,
+    setSkinData: React.Dispatch<React.SetStateAction<SkinData | null>>
+}) {
+    const {appData, skinData, setSkinData} = props;
+    const [submitting, setSubmitting] = React.useState(false);
+
+    const {enqueueSnackbar} = useSnackbar();
+
+    const fileInputElem = React.useRef<HTMLInputElement>(null);
+    const [filePath, setFilePath] = React.useState('');
+    const handleFilePathChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setFilePath(event.target.value);
+
+        if (skinData) {
+            if (type == 'cape' && skinData.capeUrl?.startsWith('blob:')) {
+                URL.revokeObjectURL(skinData.capeUrl);
+            } else if (skinData.skinUrl.startsWith('blob:')) {
+                URL.revokeObjectURL(skinData.skinUrl);
+            }
+        }
+
+        const fileInput = event.target;
+        const fileBlob = fileInput.files?.length ? fileInput.files[0] : null;
+        if (fileBlob && skinData) {
+            let data: SkinData = {
+                ...skinData
+            }
+            const fakeUrl = URL.createObjectURL(fileBlob);
+            if (type == 'cape') {
+                data.capeUrl = fakeUrl;
+            } else {
+                data.slim = model == 'slim';
+                data.skinUrl = fakeUrl;
+            }
+            setSkinData(data);
+        }
+    };
+
+    const [url, setUrl] = React.useState('');
+    const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setUrl(event.target.value);
+    };
+
+    const [type, setType] = React.useState('skin');
+    const handleTypeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setType(event.target.value);
+    };
+
+    const [model, setModel] = React.useState('default');
+    const handleModelChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setModel(event.target.value);
+
+        if (skinData) {
+            setSkinData({
+                ...skinData,
+                slim: event.target.value == 'slim'
+            })
+        }
+    };
+
+    const uploadTexture = (event: React.FormEvent) => {
+        event.preventDefault();
+        const fileInput = fileInputElem.current;
+        if (fileInput == null) {
+            console.error('#file-input-real is not a valid element');
+            return;
+        }
+        setSubmitting(true);
+        const fileBlob = fileInput.files?.length ? fileInput.files[0] : null;
+        if (filePath && fileBlob) {
+            const formData = new FormData();
+            formData.append('model', model);
+            formData.append('file', fileBlob);
+            axios.put(`/api/user/profile/${appData.uuid}/${type}`, formData, {
+                headers: {
+                    'Authorization': 'Bearer ' + appData.accessToken
+                }
+            }).then(() => {
+                enqueueSnackbar('上传成功', {variant: 'success'});
+            }).catch(e => {
+                const response = e.response;
+                if (response && response.data) {
+                    enqueueSnackbar(response.data.errorMessage, {variant: 'error'});
+                } else {
+                    enqueueSnackbar('网络错误:' + e.message, {variant: 'error'});
+                }
+            }).finally(() => setSubmitting(false));
+        } else if (url) {
+            axios.post(`/api/user/profile/${appData.uuid}/${type}`, {model, url}, {
+                headers: {
+                    'Authorization': 'Bearer ' + appData.accessToken
+                }
+            }).then(() => {
+                enqueueSnackbar('上传成功', {variant: 'success'});
+                axios.get('/sessionserver/session/minecraft/profile/' + appData.uuid).then(response => {
+                    let texturesProp = response.data.properties.find((v: any) => v.name == 'textures');
+                    let profile: any = {};
+                    if (texturesProp) {
+                        profile = JSON.parse(window.atob(texturesProp.value));
+                    }
+                    if (profile.textures) {
+                        let data: SkinData = {
+                            skinUrl: ''
+                        };
+                        if (profile.textures.SKIN) {
+                            data.skinUrl = profile.textures.SKIN.url;
+                            data.slim = profile.textures.SKIN.metadata ? profile.textures.SKIN.metadata.model == 'slim' : false;
+                        } else {
+                            let index = getUUIDHashCode(appData.uuid) % DEFAULT_SKINS.length;
+                            data.skinUrl = DEFAULT_SKINS[index].skinUrl;
+                            data.slim = DEFAULT_SKINS[index].slim;
+                        }
+                        if (profile.textures.CAPE) {
+                           data.capeUrl = profile.textures.CAPE.url;
+                        }
+                        setSkinData(data);
+                    }
+                });
+            }).catch(e => {
+                const response = e.response;
+                if (response && response.data) {
+                    enqueueSnackbar(response.data.errorMessage, {variant: 'error'});
+                } else {
+                    enqueueSnackbar('网络错误:' + e.message, {variant: 'error'});
+                }
+            }).finally(() => setSubmitting(false));
+        } else {
+            enqueueSnackbar('未选择文件', {variant: 'warning'});
+            setSubmitting(false);
+        }
+    };
+
+    const deleteTexture = () => {
+        setSubmitting(true);
+        axios.delete(`/api/user/profile/${appData.uuid}/${type}`, {
+            headers: {
+                'Authorization': 'Bearer ' + appData.accessToken
+            }
+        }).then(() => {
+            enqueueSnackbar('删除成功', {variant: 'success'});
+            if (skinData != null) {
+                if (type == 'cape') {
+                    setSkinData({
+                        ...skinData,
+                        capeUrl: undefined
+                    });
+                } else {
+                    // 显示默认材质
+                    let index = getUUIDHashCode(appData.uuid) % DEFAULT_SKINS.length;
+                    setSkinData({
+                        ...DEFAULT_SKINS[index],
+                        capeUrl: skinData.capeUrl
+                    });
+                }
+            }
+        }).catch(e => {
+            const response = e.response;
+            if (response && response.data) {
+                enqueueSnackbar(response.data.errorMessage, {variant: 'error'});
+            } else {
+                enqueueSnackbar('网络错误:' + e.message, {variant: 'error'});
+            }
+        }).finally(() => setSubmitting(false));
+    };
+
+    // noinspection JSUnusedGlobalSymbols
+    return (
+        <>
+            <section className="header">
+                <h3>上传材质</h3>
+            </section>
+
+            <Box component="form" autoComplete="off" onSubmit={uploadTexture}>
+                <Box component="div" width="50%" boxSizing="border-box" display="inline-block">
+                    <FormControl>
+                        <FormLabel id="texture-type-group-label">材质类别: </FormLabel>
+                        <RadioGroup
+                            row
+                            aria-labelledby="texture-type-group-label"
+                            value={type}
+                            onChange={handleTypeChange}
+                            name="type">
+                            <FormControlLabel value="skin" control={<Radio/>} label="皮肤"/>
+                            <FormControlLabel value="cape" control={<Radio/>} label="披风"/>
+                        </RadioGroup>
+                    </FormControl>
+                </Box>
+                <Fade in={type == 'skin'}>
+                    <Box component="div" width="50%" boxSizing="border-box" display="inline-block">
+                        <FormControl>
+                            <FormLabel id="texture-model-group-label">材质模型: </FormLabel>
+                            <RadioGroup
+                                row
+                                aria-labelledby="texture-model-group-label"
+                                value={model}
+                                onChange={handleModelChange}
+                                name="model">
+                                <FormControlLabel value="default" control={<Radio/>} label="Steve"/>
+                                <FormControlLabel value="slim" control={<Radio/>} label="Alex"/>
+                            </RadioGroup>
+                        </FormControl>
+                    </Box>
+                </Fade>
+                <Collapse in={!filePath} className="url">
+                    <TextField
+                        id="url-input"
+                        name="url"
+                        fullWidth
+                        label="材质 URL"
+                        variant="filled"
+                        required={!filePath}
+                        type="url"
+                        value={url}
+                        onChange={handleUrlChange}
+                    />
+                </Collapse>
+                <Collapse in={!url} className="file">
+                    <FormControl fullWidth variant="filled" required={!url}>
+                        <InputLabel htmlFor="file-input">或者选择一个图片</InputLabel>
+                        <FilledInput
+                            id="file-input"
+                            required={!url}
+                            endAdornment={
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        aria-label="清空选择"
+                                        edge="end"
+                                        onMouseDown={handleMouseDown}
+                                        onClick={() => setFilePath('')}>
+                                        <Delete/>
+                                    </IconButton>
+                                </InputAdornment>
+                            }
+                            value={filePath}
+                            inputProps={{
+                                onClick: () => fileInputElem.current?.click()
+                            }}
+                        />
+                        <input id="file-input-real" type="file" name="file" hidden ref={fileInputElem} accept="image/*" value={filePath} onChange={handleFilePathChange}/>
+                    </FormControl>
+                </Collapse>
+                <div className="button-container">
+                    <Button variant="contained" type="submit" disabled={submitting}>上传</Button>
+                    <Button variant="contained" onClick={deleteTexture} disabled={submitting}>删除材质</Button>
+                </div>
+            </Box>
+        </>
+    );
+}
+
+type ChangeProfileInputs = {
+    changeTo: string
+};
+
+function ChangeProfileForm(props: { appData: AppState, setAppData: React.Dispatch<React.SetStateAction<AppState>> }) {
+    const {appData, setAppData} = props;
+    const setProfileName = (profileName: string) => {
+        if (appData.profileName != profileName) {
+            setAppData(oldData => {
+                return {
+                    ...oldData,
+                    profileName
+                };
+            });
+        }
+    };
+
+    const [submitting, setSubmitting] = React.useState(false);
+
+    const {enqueueSnackbar} = useSnackbar();
+    const {register, handleSubmit, formState: {errors}} = useForm<ChangeProfileInputs>();
+    const onSubmit: SubmitHandler<ChangeProfileInputs> = data => {
+        setSubmitting(true);
+        axios.post('/authserver/change', {
+            accessToken: appData.accessToken,
+            changeTo: data.changeTo
+        }).then(() => {
+            enqueueSnackbar('更改成功', {variant: 'success'});
+            setProfileName(data.changeTo);
+        }).catch(e => {
+            const response = e.response;
+            if (response && response.data) {
+                let errorMessage = response.data.errorMessage;
+                let message = '更改失败: ' + errorMessage;
+                if (errorMessage === 'profileName exist') {
+                    message = '更改失败: 角色名已存在';
+                } else if (errorMessage === 'profileName duplicate') {
+                    message = '更改失败: 角色名与正版用户冲突';
+                }
+                enqueueSnackbar(message, {variant: 'error'});
+            } else {
+                enqueueSnackbar('网络错误:' + e.message, {variant: 'error'});
+            }
+        }).finally(() => setSubmitting(false));
+    };
+
+    return (
+        <>
+            <section className="header">
+                <h3>更改角色名</h3>
+            </section>
+
+            <Box component="form" autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
+                <div className="changeTo">
+                    <FormControl fullWidth variant="filled" required error={errors.changeTo != null}>
+                        <InputLabel htmlFor="changeTo-input">角色名</InputLabel>
+                        <FilledInput
+                            id="changeTo-input"
+                            name="changeTo"
+                            defaultValue={appData.profileName}
+                            required
+                            inputProps={{
+                                minLength: '2', maxLength: 16,
+                                ...register('changeTo', {required: true, minLength: 2, pattern: /^[a-zA-Z0-9_]{1,16}$/, maxLength: 16})
+                            }}
+                        />
+                        <FocusedShowHelperText id="profileName-input-helper-text">字母，数字或下划线</FocusedShowHelperText>
+                    </FormControl>
+                </div>
+                <div className="button-container">
+                    <Button variant="contained" type="submit" disabled={submitting}>更改</Button>
+                </div>
+            </Box>
+        </>
+    );
+}
+
+type SkinData = {
+    skinUrl: string
+    capeUrl?: string
+    slim?: boolean
+}
+
+const DEFAULT_SKINS: SkinData[] = [
+    {skinUrl: 'player/slim/alex.png', slim: true},
+    {skinUrl: 'player/slim/ari.png', slim: true},
+    {skinUrl: 'player/slim/efe.png', slim: true},
+    {skinUrl: 'player/slim/kai.png', slim: true},
+    {skinUrl: 'player/slim/makena.png', slim: true},
+    {skinUrl: 'player/slim/noor.png', slim: true},
+    {skinUrl: 'player/slim/steve.png', slim: true},
+    {skinUrl: 'player/slim/sunny.png', slim: true},
+    {skinUrl: 'player/slim/zuri.png', slim: true},
+
+    {skinUrl: 'player/wide/alex.png'},
+    {skinUrl: 'player/wide/ari.png'},
+    {skinUrl: 'player/wide/efe.png'},
+    {skinUrl: 'player/wide/kai.png'},
+    {skinUrl: 'player/wide/makena.png'},
+    {skinUrl: 'player/wide/noor.png'},
+    {skinUrl: 'player/wide/steve.png'},
+    {skinUrl: 'player/wide/sunny.png'},
+    {skinUrl: 'player/wide/zuri.png'},
+];
+
+function User(props: { appData: AppState, setAppData: React.Dispatch<React.SetStateAction<AppState>> }) {
+    const {appData, setAppData} = props;
+
+    const [skinData, setSkinData] = React.useState<SkinData | null>(null);
+
+    React.useEffect(() => {
+        setSkinData(null);
+        axios.get('/sessionserver/session/minecraft/profile/' + appData.uuid).then(response => {
+            let texturesProp = response.data.properties.find((v: any) => v.name == 'textures');
+            let profile: any = {};
+            if (texturesProp) {
+                profile = JSON.parse(window.atob(texturesProp.value));
+            }
+            if (profile.textures && profile.textures.SKIN) {
+                let skinUrl = profile.textures.SKIN.url;
+                let slim = profile.textures.SKIN.metadata ? profile.textures.SKIN.metadata.model == 'slim' : false;
+                let capeUrl = undefined;
+                if (profile.textures.CAPE) {
+                    capeUrl = profile.textures.CAPE.url;
+                }
+                setSkinData({
+                    skinUrl,
+                    capeUrl,
+                    slim
+                });
+            } else if (profile.textures && profile.textures.CAPE) {
+                // 显示默认材质
+                let index = getUUIDHashCode(appData.uuid) % DEFAULT_SKINS.length;
+                setSkinData({
+                    ...DEFAULT_SKINS[index],
+                    capeUrl: profile.textures.CAPE.url
+                });
+            } else {
+                // 显示默认材质
+                let index = getUUIDHashCode(appData.uuid) % DEFAULT_SKINS.length;
+                setSkinData(DEFAULT_SKINS[index]);
+            }
+        });
+    }, [appData]);
+
+    return (
+        <Container maxWidth={'sm'}>
+            <Paper className={'user-card'}>
+                <section className="header">
+                    <h1>简陋信息页</h1>
+                </section>
+
+                <UploadTextureForm appData={appData} setAppData={setAppData} skinData={skinData} setSkinData={setSkinData}/>
+
+                {skinData && <SkinRender skinUrl={skinData.skinUrl} capeUrl={skinData.capeUrl} slim={skinData.slim}/>}
+
+                <ChangeProfileForm appData={appData} setAppData={setAppData}/>
+            </Paper>
+        </Container>
+    );
+}
+
+function getUUIDHashCode(uuid: string) {
+    const uuidNoDash = uuid.replace(/-/g, '');
+    const mostMost = parseInt(uuidNoDash.substring(0, 8), 16);
+    const mostLeast = parseInt(uuidNoDash.substring(8, 16), 16);
+    const leastMost = parseInt(uuidNoDash.substring(16, 24), 16);
+    const leastLeast = parseInt(uuidNoDash.substring(24, 32), 16);
+    return mostMost ^ mostLeast ^ leastMost ^ leastLeast;
+}
+
+export default User;
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/// <reference types="vite/client" />
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2023. Gardel <sunxinao@hotmail.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), mockDevServerPlugin()],
+  server: {
+    proxy: {
+      '^/(authserver|users|sessionserver|textures|api|minecraftservices)': {
+        target: 'http://localhost:8080'
+      }
+    }
+  },
+  base: ''
+})
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock