Add webui

webui/src/Request.jsx

@@ -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;

webui/src/home/Home.css

@@ -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;
+}

webui/src/home/Home.jsx

@@ -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;

webui/src/index.css

@@ -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;
+  }
+}

webui/src/login/Login.css

@@ -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;
+}

webui/src/login/Login.jsx

@@ -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;

webui/src/main.jsx

@@ -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>,
+)