Merge branch 'master' into feature/request-with-http-proxy

# Conflicts:
#	package-lock.json
#	package.json
#	server/database.js
#	src/languages/en.js
#	src/mixins/socket.js

src/mixins/socket.js

@@ -1,16 +1,21 @@
 import { io } from "socket.io-client";
 import { useToast } from "vue-toastification";
 import jwt_decode from "jwt-decode";
+import Favico from "favico.js";
 const toast = useToast();
 
 let socket;
 
 const noSocketIOPages = [
-    "/status-page",
-    "/status",
-    "/"
+    /^\/status-page$/,  //  /status-page
+    /^\/status/,    // /status**
+    /^\/$/      //  /
 ];
 
+const favicon = new Favico({
+    animation: "none"
+});
+
 export default {
 
     data() {
@@ -33,8 +38,19 @@ export default {
             uptimeList: { },
             tlsInfoList: {},
             notificationList: [],
+            statusPageListLoaded: false,
+            statusPageList: [],
             proxyList: [],
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
+            showReverseProxyGuide: true,
+            cloudflared: {
+                cloudflareTunnelToken: "",
+                installed: null,
+                running: false,
+                message: "",
+                errorMessage: "",
+                currentPassword: "",
+            }
         };
     },
 
@@ -52,8 +68,12 @@ export default {
             }
 
             // No need to connect to the socket.io for status page
-            if (! bypass && noSocketIOPages.includes(location.pathname)) {
-                return;
+            if (! bypass && location.pathname) {
+                for (let page of noSocketIOPages) {
+                    if (location.pathname.match(page)) {
+                        return;
+                    }
+                }
             }
 
             this.socket.initedSocketIO = true;
@@ -104,6 +124,11 @@ export default {
                 this.notificationList = data;
             });
 
+            socket.on("statusPageList", (data) => {
+                this.statusPageListLoaded = true;
+                this.statusPageList = data;
+            });
+
             socket.on("proxyList", (data) => {
                 this.proxyList = data.map(item => {
                     item.auth = !!item.auth;
@@ -180,6 +205,7 @@ export default {
             socket.on("connect_error", (err) => {
                 console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
                 this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
+                this.showReverseProxyGuide = true;
                 this.socket.connected = false;
                 this.socket.firstConnect = false;
             });
@@ -194,6 +220,7 @@ export default {
                 console.log("Connected to the socket server");
                 this.socket.connectCount++;
                 this.socket.connected = true;
+                this.showReverseProxyGuide = false;
 
                 // Reset Heartbeat list if it is re-connect
                 if (this.socket.connectCount >= 2) {
@@ -223,6 +250,12 @@ export default {
                 this.socket.firstConnect = false;
             });
 
+            // cloudflared
+            socket.on("cloudflared_installed", (res) => this.cloudflared.installed = res);
+            socket.on("cloudflared_running", (res) => this.cloudflared.running = res);
+            socket.on("cloudflared_message", (res) => this.cloudflared.message = res);
+            socket.on("cloudflared_errorMessage", (res) => this.cloudflared.errorMessage = res);
+            socket.on("cloudflared_token", (res) => this.cloudflared.cloudflareTunnelToken = res);
         },
 
         storage() {
@@ -250,6 +283,14 @@ export default {
             }
         },
 
+        toastSuccess(msg) {
+            toast.success(msg);
+        },
+
+        toastError(msg) {
+            toast.error(msg);
+        },
+
         login(username, password, token, callback) {
             socket.emit("login", {
                 username,
@@ -403,10 +444,49 @@ export default {
 
             return result;
         },
+
+        stats() {
+            let result = {
+                up: 0,
+                down: 0,
+                unknown: 0,
+                pause: 0,
+            };
+
+            for (let monitorID in this.$root.monitorList) {
+                let beat = this.$root.lastHeartbeatList[monitorID];
+                let monitor = this.$root.monitorList[monitorID];
+
+                if (monitor && ! monitor.active) {
+                    result.pause++;
+                } else if (beat) {
+                    if (beat.status === 1) {
+                        result.up++;
+                    } else if (beat.status === 0) {
+                        result.down++;
+                    } else if (beat.status === 2) {
+                        result.up++;
+                    } else {
+                        result.unknown++;
+                    }
+                } else {
+                    result.unknown++;
+                }
+            }
+
+            return result;
+        },
     },
 
     watch: {
 
+        // Update Badge
+        "stats.down"(to, from) {
+            if (to !== from) {
+                favicon.badge(to);
+            }
+        },
+
         // Reload the SPA if the server version is changed.
         "info.version"(to, from) {
             if (from && from !== to) {
@@ -420,9 +500,15 @@ export default {
 
         // Reconnect the socket io, if status-page to dashboard
         "$route.fullPath"(newValue, oldValue) {
-            if (noSocketIOPages.includes(newValue)) {
-                return;
+
+            if (newValue) {
+                for (let page of noSocketIOPages) {
+                    if (newValue.match(page)) {
+                        return;
+                    }
+                }
             }
+
             this.initSocketIO();
         },
 

src/mixins/theme.js

@@ -33,7 +33,7 @@ export default {
                 return "light";
             }
 
-            if (this.path === "/status-page" || this.path === "/status") {
+            if (this.path.startsWith("/status-page") || this.path.startsWith("/status")) {
                 return this.statusPageTheme;
             } else {
                 if (this.userTheme === "auto") {