zhushenwudi/ew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement webui import

Browse Source
This commit is contained in:
Ethan O'Brien
2024-04-25 12:54:20 -05:00
parent 5ccb65732f
commit 32c331c7a9
12 changed files with 295 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
webui/src/import/Import.css Normal file
View File

@ -0,0 +1,95 @@
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="file"],
#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);
}
#sub_div p {
color: red;
grid-template-columns: auto auto auto;
}
#sub_div {
padding-top: 10px;
}
#sub_div button {
width: 40%;
padding: 12px;
background-color: blue;
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;
}
#sub_div button:hover {
background-color: green;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

84
webui/src/import/Import.jsx Normal file
View File

@ -0,0 +1,84 @@
import { useState } from 'react'
import './Import.css'
import Request from '../Request.jsx'
function Login() {
const error = useState(new URL(window.location).searchParams.get("message") || "");
const status = useState("");
const uid = useState((window.localStorage && window.localStorage.getItem("ew_uid")) || "");
let file=[], file1=[], file2=[], file3=[], password;
let has_imported = false;
const handleSubmit = async (event) => {
event.preventDefault();
if (!file[0] || !file1[0] || has_imported || !password) return;
try {
has_imported = true;
let data = {
userdata: JSON.parse(await file[0].text()),
home: JSON.parse(await file1[0].text()),
missions: file2[0] ? JSON.parse(await file2[0].text()) : undefined,
sif_cards: file3[0] ? JSON.parse(await file3[0].text()) : undefined,
password: password,
jp: true
};
if (!data.userdata || !data.userdata.user || !data.userdata.user.id) {
error[1]("Incorrect user data file format");
return;
}
if (!data.home || !data.home.home || !data.home.home.information_list) {
error[1]("Incorrect home data file format");
return;
}
if (!Array.isArray(data.missions) && data.missions) {
error[1]("Incorrect mission data file format");
return;
}
if (!Array.isArray(data.sif_cards) && data.sif_cards) {
error[1]("Incorrect sif card data file format");
return;
}
let resp = await Request(
"/api/webui/import",
data
);
if (resp.result == "OK") {
status[1](<div><p>Account imported!</p><p>User id: {resp.uid}</p><p>Migration token: {resp.migration_token}</p></div>);
} else {
error[1](resp.message);
}
} catch(e) {
error[1](e.message);
}
};
return (
<div id="login-form">
<h1>Transfer</h1>
<form>
{ <p>{ status[0] } </p> }
<label htmlFor="id">User data file (required):</label>
<input type="file" id="id" name="id" onChange={(event) => {file = event.target.files}} accept="application/json"/>
<label htmlFor="file1">User Home data file (required):</label>
<input type="file" id="file1" name="file1" onChange={(event) => {file1 = event.target.files}} accept="application/json"/>
<label htmlFor="file2">User Missions data file (optional):</label>
<input type="file" id="file2" name="file2" onChange={(event) => {file2 = event.target.files}} accept="application/json"/>
<label htmlFor="file3">Sif cards data file (optional):</label>
<input type="file" id="file3" name="file3" onChange={(event) => {file3 = event.target.files}} accept="application/json"/>
<label htmlFor="password">Transfer passcode (game will not recognize special characters, only use letters and numbers or you will be locked out):</label>
<input type="password" id="password" name="password" onChange={(event) => {password = event.target.value}} />
<input type="submit" value="Submit" onClick={handleSubmit}/>
<div id="sub_div">
{ error[0] ? <p>Error: { error[0] }. Please reload the page and try again.</p> : <p></p> }
</div>
</form>
</div>
);
}
export default Login;

68
webui/src/index.css
View File

@ -1,68 +0,0 @@
: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;
}
}

28
webui/src/login/Login.css
View File

@ -66,6 +66,30 @@ body {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
#error {
color: red;
#sub_div p {
color: red;
grid-template-columns: auto auto auto;
}
#sub_div {
padding-top: 10px;
}
#sub_div button {
width: 40%;
padding: 12px;
background-color: blue;
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;
}
#sub_div button:hover {
background-color: green;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

10
webui/src/login/Login.jsx
View File

@ -24,6 +24,11 @@ function Login() {
error[1](resp.message);
}
};
const import_user = (e) => {
e.preventDefault();
window.location.href = "/import/";
}
return (
<div id="login-form">
@ -34,7 +39,10 @@ function Login() {
<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> }
<div id="sub_div">
<button onClick={import_user}>Import User</button>
{ error[0] ? <p>Error: { error[0] } </p> : <p></p> }
</div>
</form>
</div>
);

5
webui/src/main.jsx
View File

@ -2,7 +2,7 @@ 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'
import Import from './import/Import.jsx'
let Elem;
switch (window.location.pathname) {
@ -12,6 +12,9 @@ switch (window.location.pathname) {
case "/home/":
Elem = Home;
break;
case "/import/":
Elem = Import;
break;
default:
window.location.pathname = "/";
}