Add webui
This commit is contained in:
Ethan O'Brien
21
webui/.eslintrc.cjs
Normal file
21
webui/.eslintrc.cjs
Normal file
@ -0,0 +1,21 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react/jsx-no-target-blank': 'off',
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
24
webui/.gitignore
vendored
Normal file
24
webui/.gitignore
vendored
Normal file
@ -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?
|
||||
8
webui/README.md
Normal file
8
webui/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
13
webui/index.html
Normal file
13
webui/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!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>Vite + React</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4502
webui/package-lock.json
generated
Normal file
4502
webui/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
webui/package.json
Normal file
27
webui/package.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "webui",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.10.2",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
}
|
||||
1
webui/public/vite.svg
Normal file
1
webui/public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
18
webui/src/Request.jsx
Normal file
18
webui/src/Request.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
const serverUrl = "";
|
||||
|
||||
async function api(url, body) {
|
||||
try {
|
||||
let options = body ? {method: "POST", body: JSON.stringify(body)} : {}
|
||||
const resp = await fetch(serverUrl + url, options);
|
||||
const text = await resp.text();
|
||||
return JSON.parse(text);
|
||||
} catch(e) {
|
||||
return {
|
||||
result: "ERR",
|
||||
message: e.message
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default api;
|
||||
31
webui/src/home/Home.css
Normal file
31
webui/src/home/Home.css
Normal file
@ -0,0 +1,31 @@
|
||||
body {
|
||||
background-color: #616161;
|
||||
}
|
||||
|
||||
#home {
|
||||
width: 90%;
|
||||
margin: 50px auto;
|
||||
background-color: #43A047;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
font-family: "Poppins", sans-serif;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
#logout {
|
||||
border: none;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
transition-duration: 0.4s;
|
||||
float: right;
|
||||
background-color: yellow;
|
||||
border-radius: 30px;
|
||||
padding: 5px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#logout:hover {
|
||||
background-color: red;
|
||||
}
|
||||
42
webui/src/home/Home.jsx
Normal file
42
webui/src/home/Home.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { useState, useParams, useEffect } from 'react'
|
||||
import './Home.css'
|
||||
import Request from '../Request.jsx'
|
||||
|
||||
function Home() {
|
||||
const [user, userdata] = useState();
|
||||
|
||||
const logout = () => {
|
||||
window.location.href = "/webui/logout";
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (user) return;
|
||||
(async () => {
|
||||
let resp = await Request("/api/webui/userInfo");
|
||||
if (resp.result !== "OK") {
|
||||
window.location.href = "/?message=" + encodeURIComponent(resp.message);
|
||||
return;
|
||||
}
|
||||
let user = resp.data.userdata;
|
||||
//let login = resp.data.loginbonus;
|
||||
userdata(
|
||||
<div>
|
||||
<p>User id: { user.user.id } </p>
|
||||
<p>Rank: { user.user.rank } ({ user.user.exp } exp)</p>
|
||||
<p>Last Login: { (new Date(user.user.last_login_time * 1000)).toString() } </p>
|
||||
</div>
|
||||
);
|
||||
})();
|
||||
});
|
||||
|
||||
return (
|
||||
<div id="home">
|
||||
<button id="logout" onClick={logout}>Logout</button>
|
||||
<h1>Home</h1>
|
||||
|
||||
{ user ? <div> { user } </div> : <p>Loading...</p> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
68
webui/src/index.css
Normal file
68
webui/src/index.css
Normal file
@ -0,0 +1,68 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
71
webui/src/login/Login.css
Normal file
71
webui/src/login/Login.css
Normal file
@ -0,0 +1,71 @@
|
||||
body {
|
||||
background-color: #616161;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
margin: 50px auto;
|
||||
background-color: green;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
#login-form h1 {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 20px 0;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#login-form form {
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
#login-form form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: black;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
#login-form form input[type="text"],
|
||||
#login-form form input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid lightgray;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#login-form form input[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: dodgerblue;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#login-form form input[type="submit"]:hover {
|
||||
background-color: deepskyblue;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#error {
|
||||
color: red;
|
||||
}
|
||||
43
webui/src/login/Login.jsx
Normal file
43
webui/src/login/Login.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { useState } from 'react'
|
||||
import './Login.css'
|
||||
import Request from '../Request.jsx'
|
||||
|
||||
function Login() {
|
||||
const error = useState(new URL(window.location).searchParams.get("message") || "");
|
||||
const uid = useState((window.localStorage && window.localStorage.getItem("ew_uid")) || "");
|
||||
let password;
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
if (!uid[0] || !password || isNaN(uid[0])) return;
|
||||
if (window.localStorage) window.localStorage.setItem("ew_uid", uid[0]);
|
||||
let resp = await Request(
|
||||
"/api/webui/login",
|
||||
{
|
||||
uid: parseInt(uid[0]),
|
||||
password: password
|
||||
}
|
||||
);
|
||||
if (resp.result == "OK") {
|
||||
window.location.href = "/home/";
|
||||
} else {
|
||||
error[1](resp.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="login-form">
|
||||
<h1>Login</h1>
|
||||
<form>
|
||||
<label htmlFor="id">SIF2 ID:</label>
|
||||
<input type="text" id="id" name="id" onChange={(event) => {uid[1](event.target.value)}} value={uid[0]} />
|
||||
<label htmlFor="password">Transfer passcode:</label>
|
||||
<input type="password" id="password" name="password" onChange={(event) => {password = event.target.value}} />
|
||||
<input type="submit" value="Submit" onClick={handleSubmit}/>
|
||||
{ error[0] && <p id="error">Error: { error[0] } </p> }
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Login;
|
||||
23
webui/src/main.jsx
Normal file
23
webui/src/main.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import Login from './login/Login.jsx'
|
||||
import Home from './home/Home.jsx'
|
||||
//import './index.css'
|
||||
|
||||
let Elem;
|
||||
switch (window.location.pathname) {
|
||||
case "/":
|
||||
Elem = Login;
|
||||
break;
|
||||
case "/home/":
|
||||
Elem = Home;
|
||||
break;
|
||||
default:
|
||||
window.location.pathname = "/";
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<Elem />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
15
webui/vite.config.js
Normal file
15
webui/vite.config.js
Normal file
@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: 'index.js',
|
||||
assetFileNames: 'index.css',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user