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

@@ -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,
         },

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
@@ -25,13 +25,28 @@
             type="password"
           ></v-text-field>
 
+          <v-switch
+            v-model="showAdvancedOptions"
+            :label="$t('connection.advanced-options')"
+            inset
+            dense
+          />
+
+          <v-expand-transition>
+            <div v-if="showAdvancedOptions">
               <v-switch
                 v-model="wsOnly"
                 :label="$t('connection.websocket-only')"
                 inset
                 dense
+                v-show="showAdvancedOptions"
               />
 
+              <v-text-field
+                v-model="namespace"
+                :label="$t('connection.namespace')"
+              ></v-text-field>
+
               <v-text-field
                 v-model="path"
                 :label="$t('connection.path')"
@@ -42,6 +57,8 @@
                 :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,

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",

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",

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);
       }
     },