fix(frontend): allow using token with every action

ravenclaw900 · Nov 20, 2021 · 109ddc7 · 109ddc7
1 parent db7032e
commit 109ddc7
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 41 deletions.
diff --git a/src/frontend/src/App.svelte b/src/frontend/src/App.svelte
@@ -114,6 +114,7 @@
                     loginDialog = true;
                 }
             } else {
+                localStorage.removeItem("token");
                 pollServer(window.location.pathname);
             }
         }
@@ -192,6 +193,23 @@
         );
     }
 
+    function socketSend(cmd, args) {
+        let json;
+        if (login) {
+            json = JSON.stringify({
+                cmd,
+                args,
+                token,
+            });
+        } else {
+            json = JSON.stringify({
+                cmd,
+                args,
+            });
+        }
+        socket.send(json);
+    }
+
     onMount(() => {
         socketCloseListener();
     });
@@ -281,21 +299,25 @@
             {#if shown}
                 <Router {url}>
                     <Route path="process"
-                        ><Process {socketData} {socket} /></Route
+                        ><Process {socketData} {socketSend} /></Route
                     >
                     <Route path="/"><Home {socketData} {darkMode} /></Route>
                     <Route path="software"
-                        ><Software {socketData} {socket} /></Route
+                        ><Software {socketData} {socketSend} /></Route
                     >
                     <Route path="terminal"><Terminal /></Route>
                     <Route path="management"
-                        ><Management {socket} {socketData} /></Route
+                        ><Management {socketSend} {socketData} /></Route
                     >
                     <Route path="browser"
-                        ><FileBrowser {socket} {socketData} {binData} /></Route
+                        ><FileBrowser
+                            {socketSend}
+                            {socketData}
+                            {binData}
+                        /></Route
                     >
                     <Route path="service"
-                        ><Service {socket} {socketData} /></Route
+                        ><Service {socketSend} {socketData} /></Route
                     >
                     <Route path=""><h3>Page not found</h3></Route>
                 </Router>

diff --git a/src/frontend/src/pages/FileBrowser.svelte b/src/frontend/src/pages/FileBrowser.svelte
@@ -20,7 +20,7 @@
     } from "@fortawesome/free-solid-svg-icons";
     import Fa from "svelte-fa";
 
-    export let socket;
+    export let socketSend = (cmd, args) => {};
     export let socketData: broserList;
     export let binData;
 
@@ -78,7 +78,7 @@
             prettytype: "",
             size: 0,
         };
-        socket.send(JSON.stringify({ cmd: cmd, args: [path] }));
+        socketSend(cmd, [path]);
         fileDataSet = false;
     }
 
@@ -91,9 +91,7 @@
             prettytype: "",
             size: 0,
         };
-        socket.send(
-            JSON.stringify({ cmd: "rename", args: [oldname, newname] })
-        );
+        socketSend("rename", [oldname, newname]);
         fileDataSet = false;
     }
 
@@ -142,10 +140,6 @@
         }
     }
 
-    function sendFile(path: string) {
-        socket.send(JSON.stringify({ cmd: "save", args: [path, fileData] }));
-    }
-
     function unitCalc(num: number) {
         if (num > 1000000000) {
             return Math.round((num / 1000000000) * 100) / 100 + " GB";
@@ -326,7 +320,7 @@
             {:else if socketData.textdata != undefined}
                 <span
                     class="cursor-pointer"
-                    on:click={() => sendFile(currentPath)}
+                    on:click={() => socketSend("save", [currentPath, fileData])}
                     ><Fa icon={faSave} size="lg" /></span
                 >{/if}
         </div>

diff --git a/src/frontend/src/pages/Management.svelte b/src/frontend/src/pages/Management.svelte
@@ -3,7 +3,7 @@
     import humanizeDuration from "humanize-duration";
     import { fade } from "svelte/transition";
 
-    export let socket;
+    export let socketSend = (cmd, args) => {};
     export let socketData;
 
     let uptime;
@@ -15,7 +15,7 @@
         (dialog = false));
 
     function sendData(data) {
-        socket.send(JSON.stringify({ cmd: data }));
+        socketSend(data, []);
         // Give backend an extra second to loop again
         setTimeout(() => {
             dialog = true;

diff --git a/src/frontend/src/pages/Process.svelte b/src/frontend/src/pages/Process.svelte
@@ -11,7 +11,7 @@
     } from "@fortawesome/free-solid-svg-icons";
 
     export let socketData: processData;
-    export let socket;
+    export let socketSend = (cmd, args) => {};
 
     interface processData {
         processes?: processes[];
@@ -221,10 +221,6 @@
             statusIcon = faSortUp;
         }
     }
-
-    function sendSignal(signal, pid) {
-        socket.send(JSON.stringify({ cmd: signal, args: [pid.toString()] }));
-    }
 </script>
 
 <main>
@@ -288,7 +284,9 @@
                         {#if process.name != "dietpi-dashboard"}
                             <span
                                 on:click={() =>
-                                    sendSignal("terminate", process.pid)}
+                                    socketSend("terminate", [
+                                        process.pid.toString(),
+                                    ])}
                                 title="Terminate"
                                 ><Fa
                                     icon={faBan}
@@ -297,7 +295,10 @@
                                 /></span
                             >
                             <span
-                                on:click={() => sendSignal("kill", process.pid)}
+                                on:click={() =>
+                                    socketSend("kill", [
+                                        process.pid.toString(),
+                                    ])}
                                 title="Kill"
                                 ><Fa
                                     icon={faSkull}
@@ -308,7 +309,9 @@
                             {#if process.status != "stopped"}
                                 <span
                                     on:click={() =>
-                                        sendSignal("suspend", process.pid)}
+                                        socketSend("suspend", [
+                                            process.pid.toString(),
+                                        ])}
                                     title="Suspend"
                                     ><Fa
                                         icon={faPause}
@@ -319,7 +322,9 @@
                             {:else}
                                 <span
                                     on:click={() =>
-                                        sendSignal("resume", process.pid)}
+                                        socketSend("resume", [
+                                            process.pid.toString(),
+                                        ])}
                                     title="Resume"
                                     ><Fa
                                         icon={faPlay}

diff --git a/src/frontend/src/pages/Service.svelte b/src/frontend/src/pages/Service.svelte
@@ -6,7 +6,7 @@
     } from "@fortawesome/free-solid-svg-icons";
     import Fa from "svelte-fa";
 
-    export let socket;
+    export let socketSend = (cmd, args) => {};
     export let socketData: serviceData;
 
     interface serviceData {
@@ -19,10 +19,6 @@
         log: string;
         start: string;
     }
-
-    function sendAction(action, name) {
-        socket.send(JSON.stringify({ cmd: action, args: [name] }));
-    }
 </script>
 
 <main>
@@ -56,7 +52,7 @@
                         {#if service.status == "dead" || service.status == "failed"}
                             <span
                                 on:click={() =>
-                                    sendAction("start", service.name)}
+                                    socketSend("start", [service.name])}
                                 title="Start"
                                 ><Fa
                                     icon={faPlay}
@@ -67,7 +63,7 @@
                         {:else}
                             <span
                                 on:click={() =>
-                                    sendAction("stop", service.name)}
+                                    socketSend("stop", [service.name])}
                                 title="Stop"
                                 ><Fa
                                     icon={faSquare}
@@ -76,7 +72,7 @@
                                 /></span
                             ><span
                                 on:click={() =>
-                                    sendAction("restart", service.name)}
+                                    socketSend("restart", [service.name])}
                                 title="Restart"
                                 ><Fa
                                     icon={faRedoAlt}

diff --git a/src/frontend/src/pages/Software.svelte b/src/frontend/src/pages/Software.svelte
@@ -3,7 +3,7 @@
     import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 
     export let socketData: softwareData;
-    export let socket;
+    export let socketSend = (cmd, args) => {};
 
     interface softwareData {
         software?: software[];
@@ -74,12 +74,10 @@
     }
 
     function sendSoftware() {
-        socket.send(
-            JSON.stringify({
-                cmd: uninstall == true ? "uninstall" : "install",
-                args: installArray.map((val) => {
-                    return val.toString();
-                }),
+        socketSend(
+            uninstall == true ? "uninstall" : "install",
+            installArray.map((val) => {
+                return val.toString();
             })
         );
         running = true;