Implement webui import

webui/src/import/Import.css

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

webui/src/import/Import.jsx

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