Implement webui import

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;