Let the user know when using a remote frontend.

Note: this relies on the gateway Nginx server configurations
including an X-Dougal-Server header, as follows:

add_header X-Dougal-Server "remote-frontend" always;

lib/www/client/source/src/components/footer.vue

@@ -9,8 +9,14 @@
 
 	<v-spacer></v-spacer>
 
-	<v-icon v-if="serverConnected" class="mr-6" small title="Connected to server">mdi-lan-connect</v-icon>
+	<template v-if="isFrontendRemote">
-	<v-icon v-else class="mr-6" small color="red" title="Server connection lost (we'll reconnect automatically when the server comes back)">mdi-lan-disconnect</v-icon>
+      <v-icon v-if="serverConnected" class="mr-6" title="Connected to server via gateway">mdi-cloud-outline</v-icon>
+      <v-icon v-else class="mr-6" color="red" :title="`Server connection lost: the gateway cannot reach the remote server.\nWe will reconnect automatically when the connection with the remote server is restored.`">mdi-cloud-off</v-icon>
+	</template>
+	<template v-else>
+      <v-icon v-if="serverConnected" class="mr-6" small title="Connected to server">mdi-lan-connect</v-icon>
+      <v-icon v-else class="mr-6" small color="red" :title="`Server connection lost.\nWe will reconnect automatically when the server comes back.`">mdi-lan-disconnect</v-icon>
+	</template>
 
 	<dougal-notifications-control class="mr-6"></dougal-notifications-control>
 
@@ -57,7 +63,10 @@ export default {
       return date.getUTCFullYear();
     },
 
-    ...mapState({serverConnected: state => state.notify.serverConnected})
+    ...mapState({
+      serverConnected: state => state.notify.serverConnected,
+      isFrontendRemote: state => state.api.serverInfo?.["remote-frontend"] ?? false
+    })
   }
 };
 </script>

lib/www/client/source/src/store/modules/api/actions.js

@@ -79,6 +79,26 @@ async function api ({state, getters, commit, dispatch}, [resource, init = {}, cb
       await cb(null, res.clone());
     }
 
+    if (res.headers.has("x-dougal-server")) {
+      const header = res.headers.get("x-dougal-server")
+      const entries = header
+        .split(";")
+        .map(part => part.trim())
+        .filter(part => part.length > 0)
+        .map(part => {
+          const idx = part.indexOf('=');
+          if (idx === -1) {
+            return [part, true];
+          }
+          const key = part.slice(0, idx).trim();
+          const value = part.slice(idx + 1).trim();
+          return [key, value];
+        });
+        state.serverInfo = entries.length ? Object.fromEntries(entries) : {};
+        console.log("ENTRIES", entries);
+        console.log("SERVER INFO", state.serverInfo);
+    }
+
     if (res.ok) {
 
       if (!isCached) {

lib/www/client/source/src/store/modules/api/state.js

@@ -1,7 +1,8 @@
 const state = () => ({
   apiUrl: "/api",
   requestsCount: 0,
-  maxConcurrent: 15
+  maxConcurrent: 15,
+  serverInfo: {} // Contents of the last received X-Dougal-Server HTTP header
 });
 
 export default state;