From 5a8a75edc0787fd4515b832e35c1868182d35d36 Mon Sep 17 00:00:00 2001
From: Damien Arrachequesne <damien.arrachequesne@gmail.com>
Date: Thu, 23 Jun 2022 14:50:00 +0200
Subject: [PATCH] feat(ui): separate the namespace from the server URL

This should help prevent people from connecting to the main namespace,
when they forget to include the namespace at the end of the server URL.

Related:

- https://github.com/socketio/socket.io-admin-ui/issues/26
- https://github.com/socketio/socket.io-admin-ui/issues/42
---
 ui/src/App.vue                        |  9 ++++--
 ui/src/components/ConnectionModal.vue | 45 ++++++++++++++++++++-------
 ui/src/locales/en.json                |  4 ++-
 ui/src/locales/fr.json                |  7 ++++-
 ui/src/store/modules/connection.js    | 13 ++++++--
 5 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 2824e16..d0ad542 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -17,6 +17,7 @@
       :initial-server-url="serverUrl"
       :initial-ws-only="wsOnly"
       :initial-path="path"
+      :initial-namespace="namespace"
       :initial-parser="parser"
       :is-connecting="isConnecting"
       :error="connectionError"
@@ -70,6 +71,7 @@ export default {
       serverUrl: (state) => state.connection.serverUrl,
       wsOnly: (state) => state.connection.wsOnly,
       path: (state) => state.connection.path,
+      namespace: (state) => state.connection.namespace,
       parser: (state) => state.connection.parser,
       backgroundColor: (state) =>
         state.config.darkTheme ? "" : "grey lighten-5",
@@ -92,7 +94,7 @@ export default {
   },
 
   methods: {
-    tryConnect(serverUrl, auth, wsOnly, path, parser) {
+    tryConnect(serverUrl, namespace, auth, wsOnly, path, parser) {
       this.isConnecting = true;
       if (SocketHolder.socket) {
         SocketHolder.socket.disconnect();
@@ -100,7 +102,7 @@ export default {
         SocketHolder.socket.off("connect_error");
         SocketHolder.socket.off("disconnect");
       }
-      const socket = io(serverUrl, {
+      const socket = io(serverUrl + namespace, {
         forceNew: true,
         reconnection: false,
         withCredentials: true, // needed for cookie-based sticky-sessions
@@ -119,6 +121,7 @@ export default {
           serverUrl,
           wsOnly,
           path,
+          namespace,
           parser,
         });
         SocketHolder.socket = socket;
@@ -210,6 +213,7 @@ export default {
     onSubmit(form) {
       this.tryConnect(
         form.serverUrl,
+        form.namespace,
         {
           username: form.username,
           password: form.password,
@@ -231,6 +235,7 @@ export default {
       const sessionId = this.$store.state.connection.sessionId;
       this.tryConnect(
         this.serverUrl,
+        this.namespace,
         {
           sessionId,
         },
diff --git a/ui/src/components/ConnectionModal.vue b/ui/src/components/ConnectionModal.vue
index 80adb04..9b0667f 100644
--- a/ui/src/components/ConnectionModal.vue
+++ b/ui/src/components/ConnectionModal.vue
@@ -12,7 +12,7 @@
           <v-text-field
             v-model="serverUrl"
             :label="$t('connection.serverUrl')"
-            placeholder="https://example.com/admin"
+            placeholder="https://example.com"
             required
           ></v-text-field>
           <v-text-field
@@ -26,22 +26,39 @@
           ></v-text-field>
 
           <v-switch
-            v-model="wsOnly"
-            :label="$t('connection.websocket-only')"
+            v-model="showAdvancedOptions"
+            :label="$t('connection.advanced-options')"
             inset
             dense
           />
 
-          <v-text-field
-            v-model="path"
-            :label="$t('connection.path')"
-          ></v-text-field>
+          <v-expand-transition>
+            <div v-if="showAdvancedOptions">
+              <v-switch
+                v-model="wsOnly"
+                :label="$t('connection.websocket-only')"
+                inset
+                dense
+                v-show="showAdvancedOptions"
+              />
 
-          <v-select
-            v-model="parser"
-            :label="$t('connection.parser')"
-            :items="parserOptions"
-          />
+              <v-text-field
+                v-model="namespace"
+                :label="$t('connection.namespace')"
+              ></v-text-field>
+
+              <v-text-field
+                v-model="path"
+                :label="$t('connection.path')"
+              ></v-text-field>
+
+              <v-select
+                v-model="parser"
+                :label="$t('connection.parser')"
+                :items="parserOptions"
+              />
+            </div>
+          </v-expand-transition>
 
           <v-btn
             :loading="isConnecting"
@@ -69,15 +86,18 @@ export default {
     initialServerUrl: String,
     initialWsOnly: Boolean,
     initialPath: String,
+    initialNamespace: String,
     initialParser: String,
     error: String,
   },
 
   data() {
     return {
+      showAdvancedOptions: false,
       serverUrl: this.initialServerUrl,
       wsOnly: this.initialWsOnly,
       path: this.initialPath,
+      namespace: this.initialNamespace,
       username: "",
       password: "",
       parser: this.initialParser,
@@ -111,6 +131,7 @@ export default {
         serverUrl: this.serverUrl,
         wsOnly: this.wsOnly,
         path: this.path,
+        namespace: this.namespace,
         username: this.username,
         password: this.password,
         parser: this.parser,
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 397ac77..54dc095 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -29,7 +29,9 @@
     "path": "Path",
     "parser": "Parser",
     "default-parser": "Built-in parser",
-    "msgpack-parser": "MessagePack parser"
+    "msgpack-parser": "MessagePack parser",
+    "namespace": "Admin namespace",
+    "advanced-options": "Advanced options"
   },
   "dashboard": {
     "title": "Dashboard",
diff --git a/ui/src/locales/fr.json b/ui/src/locales/fr.json
index 5346b9a..9732d84 100644
--- a/ui/src/locales/fr.json
+++ b/ui/src/locales/fr.json
@@ -26,7 +26,12 @@
     "invalid-credentials": "Identifiants invalides",
     "error": "Erreur",
     "websocket-only": "WebSocket uniquement ?",
-    "path": "Chemin HTTP"
+    "path": "Chemin HTTP",
+    "parser": "Encodeur",
+    "default-parser": "Encodeur par défaut",
+    "msgpack-parser": "Encodeur basé sur MessagePack",
+    "namespace": "Espace de nom d'administration",
+    "advanced-options": "Options avancées"
   },
   "dashboard": {
     "title": "Accueil",
diff --git a/ui/src/store/modules/connection.js b/ui/src/store/modules/connection.js
index 9900723..e306279 100644
--- a/ui/src/store/modules/connection.js
+++ b/ui/src/store/modules/connection.js
@@ -6,6 +6,7 @@ export default {
     serverUrl: "",
     wsOnly: false,
     path: "/socket.io",
+    namespace: "/admin",
     parser: "default",
     sessionId: "",
     connected: false,
@@ -13,22 +14,30 @@ export default {
   mutations: {
     init(state) {
       if (isLocalStorageAvailable) {
-        state.serverUrl = localStorage.getItem("server_url");
+        state.serverUrl = localStorage.getItem("server_url") || "";
+        if (state.serverUrl.endsWith("/admin")) {
+          // for backward compatibility
+          state.serverUrl = state.serverUrl.slice(0, -6);
+        } else {
+          state.namespace = localStorage.getItem("namespace") || "/admin";
+        }
         state.wsOnly = localStorage.getItem("ws_only") === "true";
         state.sessionId = localStorage.getItem("session_id");
         state.path = localStorage.getItem("path") || "/socket.io";
         state.parser = localStorage.getItem("parser") || "default";
       }
     },
-    saveConfig(state, { serverUrl, wsOnly, path, parser }) {
+    saveConfig(state, { serverUrl, wsOnly, path, namespace, parser }) {
       state.serverUrl = serverUrl;
       state.wsOnly = wsOnly;
       state.path = path;
+      state.namespace = namespace;
       state.parser = parser;
       if (isLocalStorageAvailable) {
         localStorage.setItem("server_url", serverUrl);
         localStorage.setItem("ws_only", wsOnly);
         localStorage.setItem("path", path);
+        localStorage.setItem("namespace", namespace);
         localStorage.setItem("parser", parser);
       }
     },