From e36b65c2df5ea839c6e2c0890fa096297e33be98 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Tue, 28 Jun 2022 21:55:05 +0800
Subject: [PATCH] Add frontend version

---
 config/vite.config.js             |  3 +++
 src/components/settings/About.vue | 15 +++++++++++++++
 src/mixins/socket.js              | 22 ++++++++++++++++++++++
 3 files changed, 40 insertions(+)

diff --git a/config/vite.config.js b/config/vite.config.js
index c8bba853..84de961d 100644
--- a/config/vite.config.js
+++ b/config/vite.config.js
@@ -11,6 +11,9 @@ const viteCompressionFilter = /\.(js|mjs|json|css|html|svg)$/i;
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    define: {
+        "FRONTEND_VERSION": JSON.stringify(process.env.npm_package_version),
+    },
     plugins: [
         vue(),
         legacy({
diff --git a/src/components/settings/About.vue b/src/components/settings/About.vue
index a71e38af..3ef9e6d7 100644
--- a/src/components/settings/About.vue
+++ b/src/components/settings/About.vue
@@ -4,6 +4,11 @@
             <object class="my-4" width="200" height="200" data="/icon.svg" />
             <div class="fs-4 fw-bold">Uptime Kuma</div>
             <div>{{ $t("Version") }}: {{ $root.info.version }}</div>
+            <div class="frontend-version">{{ $t("Frontend Version") }}: {{ $root.frontendVersion }}</div>
+
+            <div v-if="!$root.isFrontendBackendVersionMatched" class="alert alert-warning mt-4" role="alert">
+                ⚠️ {{ $t("Frontend Version do not match backend version!") }}
+            </div>
 
             <div class="my-3 update-link"><a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a></div>
 
@@ -46,6 +51,16 @@ export default {
 }
 
 .update-link {
+    font-size: 0.8em;
+}
+
+.frontend-version {
     font-size: 0.9em;
+    color: #cccccc;
+
+    .dark & {
+        color: #333333;
+    }
 }
+
 </style>
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 04785b2d..ed1620bf 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -601,6 +601,28 @@ export default {
 
             return result;
         },
+
+        /**
+         *  Frontend Version
+         *  It should be compiled to a static value while building the frontend.
+         *  Please see ./config/vite.config.js, it is defined via vite.js
+         * @returns {string}
+         */
+        frontendVersion() {
+            // eslint-disable-next-line no-undef
+            return FRONTEND_VERSION;
+        },
+
+        /**
+         * Are both frontend and backend in the same version?
+         * @returns {boolean}
+         */
+        isFrontendBackendVersionMatched() {
+            if (!this.info.version) {
+                return true;
+            }
+            return this.info.version === this.frontendVersion;
+        }
     },
 
     watch: {