add refresh browser cache when client version not match server version

src/views/base/AboutPageBase.ts

@@ -1,25 +1,41 @@
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+import { useSystemsStore } from '@/stores/system.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
+import type { VersionInfo } from '@/core/version.ts';
+
 import type { LatestExchangeRateResponse } from '@/models/exchange_rate.ts';
 
 import { getMapProvider } from '@/lib/server_settings.ts';
 import { getMapWebsite } from '@/lib/map/index.ts';
 import { getLicense, getThirdPartyLicenses } from '@/lib/licenses.ts';
-import { getVersion, getBuildTime } from '@/lib/version.ts';
+import { formatDisplayVersion, getClientDisplayVersion, getClientBuildTime } from '@/lib/version.ts';
+import { clearBrowserCaches } from '@/lib/ui/common.ts';
 
 export function useAboutPageBase() {
     const { tt, formatUnixTimeToLongDateTime } = useI18n();
 
+    const systemsStore = useSystemsStore();
     const exchangeRatesStore = useExchangeRatesStore();
 
-    const version = `v${getVersion()}`;
+    const clientVersion = `${getClientDisplayVersion()}`;
 
-    const buildTime = computed<string>(() => {
-        const time = getBuildTime();
+    const serverVersion = ref<VersionInfo | null>(null);
+    const clientVersionMatchServerVersion = ref<boolean>(true);
+
+    const serverDisplayVersion = computed<string>(() => {
+        if (!serverVersion.value) {
+            return '';
+        }
+
+        return formatDisplayVersion(serverVersion.value);
+    });
+
+    const clientBuildTime = computed<string>(() => {
+        const time = getClientBuildTime();
 
         if (!time) {
             return time;
@@ -40,16 +56,35 @@ export function useAboutPageBase() {
     const licenseLines = computed<string[]>(() => getLicense().replace(/\r/g, '').split('\n'));
     const thirdPartyLicenses = computed<LicenseInfo[]>(() => getThirdPartyLicenses());
 
+    function refreshBrowserCache(): void {
+        clearBrowserCaches().then(() => {
+            location.reload();
+        });
+    }
+
+    function init(): void {
+        systemsStore.checkIfClientVersionMatchServerVersion().then(({ match, version }) => {
+            serverVersion.value = version;
+            clientVersionMatchServerVersion.value = match;
+        });
+    }
+
     return {
         // constants
-        version,
+        clientVersion,
+        // states
+        clientVersionMatchServerVersion,
         // computed states
-        buildTime,
+        serverDisplayVersion,
+        clientBuildTime,
         exchangeRatesData,
         isUserCustomExchangeRates,
         mapProviderName,
         mapProviderWebsite,
         licenseLines,
-        thirdPartyLicenses
+        thirdPartyLicenses,
+        // functions
+        refreshBrowserCache,
+        init
     };
 }

src/views/base/LoginPageBase.ts

@@ -9,7 +9,7 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 import type { AuthResponse } from '@/models/auth_response.ts';
 
 import { getLoginPageTips } from '@/lib/server_settings.ts';
-import { getVersion } from '@/lib/version.ts';
+import { getClientDisplayVersion } from '@/lib/version.ts';
 import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
 export function useLoginPageBase() {
@@ -19,7 +19,7 @@ export function useLoginPageBase() {
     const settingsStore = useSettingsStore();
     const exchangeRatesStore = useExchangeRatesStore();
 
-    const version = `v${getVersion()}`;
+    const version = `${getClientDisplayVersion()}`;
 
     const username = ref<string>('');
     const password = ref<string>('');

src/views/base/UnlockPageBase.ts

@@ -11,7 +11,7 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { isWebAuthnSupported } from '@/lib/webauthn.ts';
 import { hasWebAuthnConfig } from '@/lib/userstate.ts';
-import { getVersion } from '@/lib/version.ts';
+import { getClientDisplayVersion } from '@/lib/version.ts';
 import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
 export function useUnlockPageBase() {
@@ -24,7 +24,7 @@ export function useUnlockPageBase() {
     const transactionsStore = useTransactionsStore();
     const exchangeRatesStore = useExchangeRatesStore();
 
-    const version: string = `v${getVersion()}`;
+    const version: string = `${getClientDisplayVersion()}`;
 
     const pinCode = ref<string>('');