code refactor

src/DesktopApp.vue

@@ -14,6 +14,7 @@ import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import { isProduction } from '@/lib/version.js';
 import { loadMapAssets } from '@/lib/map/index.js';
 import { getSystemTheme } from '@/lib/ui.js';
 
@@ -22,8 +23,8 @@ export default {
         const self = this;
 
         return {
-            isProduction: self.$settings.isProduction(),
-            devCookiePath: self.$settings.isProduction() ? '' : '/dev/cookies'
+            isProduction: isProduction(),
+            devCookiePath: isProduction() ? '' : '/dev/cookies'
         }
     },
     computed: {
@@ -33,16 +34,16 @@ export default {
         const self = this;
         const theme = useTheme();
 
-        if (self.$settings.getTheme() === 'light') {
+        if (self.settingsStore.appSettings.theme === 'light') {
             theme.global.name.value = 'light';
-        } else if (self.$settings.getTheme() === 'dark') {
+        } else if (self.settingsStore.appSettings.theme === 'dark') {
             theme.global.name.value = 'dark';
         } else {
             theme.global.name.value = getSystemTheme();
         }
 
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
-            if (self.$settings.getTheme() === 'auto') {
+            if (self.settingsStore.appSettings.theme === 'auto') {
                 if (e.matches) {
                     theme.global.name.value = 'dark';
                 } else {
@@ -51,11 +52,11 @@ export default {
             }
         });
 
-        let localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage);
+        let localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
         self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
         if (self.$user.isUserLogined()) {
-            if (!self.$settings.isEnableApplicationLock()) {
+            if (!self.settingsStore.appSettings.applicationLock) {
                 // refresh token if user is logined
                 self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
                     if (response.user && response.user.language) {
@@ -65,7 +66,7 @@ export default {
                 });
 
                 // auto refresh exchange rates data
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
             }

src/MobileApp.vue

@@ -15,6 +15,8 @@ import { useUserStore } from '@/stores/user.js';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import { isProduction } from '@/lib/version.js';
+import { getTheme, isEnableAnimate } from '@/lib/settings.js';
 import { loadMapAssets } from '@/lib/map/index.js';
 import { isModalShowing, setAppFontSize } from '@/lib/ui.mobile.js';
 
@@ -23,15 +25,15 @@ export default {
         const self = this;
         let darkMode = 'auto';
 
-        if (self.$settings.getTheme() === 'light') {
+        if (getTheme() === 'light') {
             darkMode = false;
-        } else if (self.$settings.getTheme() === 'dark') {
+        } else if (getTheme() === 'dark') {
             darkMode = true;
         }
 
         return {
-            isProduction: self.$settings.isProduction(),
-            devCookiePath: self.$settings.isProduction() ? '' : '/dev/cookies',
+            isProduction: isProduction(),
+            devCookiePath: isProduction() ? '' : '/dev/cookies',
             f7params: {
                 name: 'ezBookkeeping',
                 theme: 'ios',
@@ -45,31 +47,31 @@ export default {
                     tapHold: true
                 },
                 serviceWorker: {
-                    path: self.$settings.isProduction() ? './sw.js' : undefined,
+                    path: isProduction() ? './sw.js' : undefined,
                     scope: './',
                 },
                 actions: {
-                    animate: self.$settings.isEnableAnimate(),
+                    animate: isEnableAnimate(),
                     backdrop: true,
                     closeOnEscape: true
                 },
                 dialog: {
-                    animate: self.$settings.isEnableAnimate(),
+                    animate: isEnableAnimate(),
                     backdrop: true
                 },
                 popover: {
-                    animate: self.$settings.isEnableAnimate(),
+                    animate: isEnableAnimate(),
                     backdrop: true,
                     closeOnEscape: true
                 },
                 popup: {
-                    animate: self.$settings.isEnableAnimate(),
+                    animate: isEnableAnimate(),
                     backdrop: true,
                     closeOnEscape: true,
                     swipeToClose: true
                 },
                 sheet: {
-                    animate: self.$settings.isEnableAnimate(),
+                    animate: isEnableAnimate(),
                     backdrop: true,
                     closeOnEscape: true
                 },
@@ -77,7 +79,7 @@ export default {
                     routableModals: false
                 },
                 view: {
-                    animate: self.$settings.isEnableAnimate(),
+                    animate: isEnableAnimate(),
                     browserHistory: !self.isiOSHomeScreenMode(),
                     browserHistoryInitialMatch: true,
                     browserHistoryAnimate: false,
@@ -96,11 +98,11 @@ export default {
     created() {
         const self = this;
 
-        let localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage);
+        let localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
         self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
         if (self.$user.isUserLogined()) {
-            if (!self.$settings.isEnableApplicationLock()) {
+            if (!self.settingsStore.appSettings.applicationLock) {
                 // refresh token if user is logined
                 self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
                     if (response.user && response.user.language) {
@@ -110,14 +112,14 @@ export default {
                 });
 
                 // auto refresh exchange rates data
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
             }
         }
     },
     mounted() {
-        setAppFontSize(this.$settings.getFontSize());
+        setAppFontSize(this.settingsStore.appSettings.fontSize);
 
         f7ready((f7) => {
             this.isDarkMode = f7.darkMode;

src/desktop-main.js

@@ -44,8 +44,7 @@ import '@vuepic/vue-datepicker/dist/main.css';
 
 import router from '@/router/desktop.js';
 
-import version from '@/lib/version.js';
-import settings from '@/lib/settings.js';
+import { getVersion, getBuildTime } from '@/lib/version.js';
 import userstate from '@/lib/userstate.js';
 import {
     getI18nOptions,
@@ -324,10 +323,9 @@ app.component('VueDatePicker', VueDatePicker);
 app.component('AmountInput', AmountInput);
 app.component('ConfirmDialog', ConfirmDialog);
 
-app.config.globalProperties.$version = version.getVersion();
-app.config.globalProperties.$buildTime = version.getBuildTime();
+app.config.globalProperties.$version = getVersion();
+app.config.globalProperties.$buildTime = getBuildTime();
 
-app.config.globalProperties.$settings = settings;
 app.config.globalProperties.$locale = i18nFunctions(i18n.global);
 app.config.globalProperties.$tIf = (text, isTranslate) => translateIf(text, isTranslate, i18n.global.t);
 app.config.globalProperties.$tError = (message) => translateError(message, i18n.global.t);

src/lib/common.js

@@ -1,4 +1,4 @@
-import settings from './settings.js';
+import { isEnableThousandsSeparator } from './settings.js';
 
 export function isFunction(val) {
     return typeof(val) === 'function';
@@ -80,7 +80,7 @@ export function isEquals(obj1, obj2) {
 }
 
 export function appendThousandsSeparator(value) {
-    if (!settings.isEnableThousandsSeparator() || value.length <= 3) {
+    if (!isEnableThousandsSeparator() || value.length <= 3) {
         return value;
     }
 

src/lib/i18n.js

@@ -24,7 +24,7 @@ import {
 } from './currency.js';
 
 import logger from './logger.js';
-import settings from './settings.js';
+import { getCurrencyDisplayMode } from './settings.js';
 import services from './services.js';
 
 const apiNotFoundErrorCode = 100001;
@@ -530,7 +530,7 @@ function getDisplayCurrency(value, currencyCode, notConvertValue, translateFn) {
         }
     }
 
-    const currencyDisplayMode = settings.getCurrencyDisplayMode();
+    const currencyDisplayMode = getCurrencyDisplayMode();
 
     if (currencyCode && currencyDisplayMode === currency.allCurrencyDisplayModes.Symbol) {
         const currencyInfo = currency.all[currencyCode];
@@ -660,17 +660,15 @@ function setLanguage(i18nGlobal, locale, force) {
     };
 }
 
-function setTimezone(timezone) {
+function setTimeZone(timezone) {
     if (timezone) {
-        settings.setTimezone(timezone);
         moment.tz.setDefault(timezone);
     } else {
-        settings.setTimezone('');
         moment.tz.setDefault();
     }
 }
 
-function initLocale(i18nGlobal, lastUserLanguage) {
+function initLocale(i18nGlobal, lastUserLanguage, timezone) {
     let localeDefaultSettings = null;
 
     if (lastUserLanguage && getLanguageInfo(lastUserLanguage)) {
@@ -680,9 +678,9 @@ function initLocale(i18nGlobal, lastUserLanguage) {
         localeDefaultSettings = setLanguage(i18nGlobal, null, true);
     }
 
-    if (settings.getTimezone()) {
-        logger.info(`Current timezone is ${settings.getTimezone()}`);
-        setTimezone(settings.getTimezone());
+    if (timezone) {
+        logger.info(`Current timezone is ${timezone}`);
+        setTimeZone(timezone);
     } else {
         logger.info(`No timezone is set, use browser default ${getTimezoneOffset()} (maybe ${moment.tz.guess(true)})`);
     }
@@ -771,8 +769,6 @@ export function i18nFunctions(i18nGlobal) {
         getAllWeekDays: () => getAllWeekDays(i18nGlobal.t),
         getDisplayCurrency: (value, currencyCode, notConvertValue) => getDisplayCurrency(value, currencyCode, notConvertValue, i18nGlobal.t),
         setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force),
-        getTimezone: settings.getTimezone,
-        setTimezone: setTimezone,
-        initLocale: (lastUserLanguage) => initLocale(i18nGlobal, lastUserLanguage)
+        initLocale: (lastUserLanguage, timezone) => initLocale(i18nGlobal, lastUserLanguage, timezone)
     };
 }

src/lib/logger.js

@@ -1,7 +1,7 @@
-import settings from './settings.js';
+import { isEnableDebug } from './settings.js';
 
 function logDebug(msg, obj) {
-    if (settings.isEnableDebug()) {
+    if (isEnableDebug()) {
         if (obj) {
             console.debug('[ezBookkeeping Debug] ' + msg, obj);
         } else {

src/lib/map/amap.js

@@ -1,6 +1,10 @@
 import { asyncLoadAssets } from '@/lib/misc.js';
 import services from '@/lib/services.js';
-import settings from '@/lib/settings.js';
+import {
+    getAmapSecurityVerificationMethod,
+    getAmapApiExternalProxyUrl,
+    getAmapApplicationSecret
+} from '@/lib/server_settings.js';
 import logger from '@/lib/logger.js';
 
 const amapHolder = {
@@ -15,12 +19,12 @@ export function loadAmapAssets() {
     if (!window._AMapSecurityConfig) {
         const amapSecurityConfig = {};
 
-        if (settings.getAmapSecurityVerificationMethod() === 'internalproxy') {
+        if (getAmapSecurityVerificationMethod() === 'internalproxy') {
             amapSecurityConfig.serviceHost = services.generateAmapApiInternalProxyUrl();
-        } else if (settings.getAmapSecurityVerificationMethod() === 'externalproxy') {
-            amapSecurityConfig.serviceHost = settings.getAmapApiExternalProxyUrl();
-        } else if (settings.getAmapSecurityVerificationMethod() === 'plaintext') {
-            amapSecurityConfig.securityJsCode = settings.getAmapApplicationSecret();
+        } else if (getAmapSecurityVerificationMethod() === 'externalproxy') {
+            amapSecurityConfig.serviceHost = getAmapApiExternalProxyUrl();
+        } else if (getAmapSecurityVerificationMethod() === 'plaintext') {
+            amapSecurityConfig.securityJsCode = getAmapApplicationSecret();
         }
 
         window._AMapSecurityConfig = amapSecurityConfig;

src/lib/map/index.js

@@ -1,5 +1,7 @@
 import mapConstants from '@/consts/map.js';
-import settings from '@/lib/settings.js';
+import {
+    getMapProvider
+} from '@/lib/server_settings.js';
 
 import {
     loadLeafletMapAssets,
@@ -38,26 +40,26 @@ import {
 } from './amap.js';
 
 export function loadMapAssets(language) {
-    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
+    if (mapConstants.leafletTileSources[getMapProvider()]) {
         return loadLeafletMapAssets(language);
-    } else if (settings.getMapProvider() === 'googlemap') {
+    } else if (getMapProvider() === 'googlemap') {
         return loadGoogleMapAssets(language);
-    } else if (settings.getMapProvider() === 'baidumap') {
+    } else if (getMapProvider() === 'baidumap') {
         return loadBaiduMapAssets(language);
-    } else if (settings.getMapProvider() === 'amap') {
+    } else if (getMapProvider() === 'amap') {
         return loadAmapAssets(language);
     }
 }
 
 export function createMapHolder() {
-    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
-        return createLeafletMapHolder(settings.getMapProvider());
-    } else if (settings.getMapProvider() === 'googlemap') {
-        return createGoogleMapHolder(settings.getMapProvider());
-    } else if (settings.getMapProvider() === 'baidumap') {
-        return createBaiduMapHolder(settings.getMapProvider());
-    } else if (settings.getMapProvider() === 'amap') {
-        return createAmapHolder(settings.getMapProvider());
+    if (mapConstants.leafletTileSources[getMapProvider()]) {
+        return createLeafletMapHolder(getMapProvider());
+    } else if (getMapProvider() === 'googlemap') {
+        return createGoogleMapHolder(getMapProvider());
+    } else if (getMapProvider() === 'baidumap') {
+        return createBaiduMapHolder(getMapProvider());
+    } else if (getMapProvider() === 'amap') {
+        return createAmapHolder(getMapProvider());
     } else {
         return null;
     }
@@ -68,7 +70,7 @@ export function initMapInstance(mapHolder, mapContainer, options) {
         return;
     }
 
-    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
+    if (mapConstants.leafletTileSources[getMapProvider()]) {
         createLeafletMapInstance(mapHolder, mapContainer, options);
     } else if (mapHolder.mapProvider === 'googlemap') {
         createGoogleMapInstance(mapHolder, mapContainer, options);
@@ -84,7 +86,7 @@ export function setMapCenterTo(mapHolder, center, zoomLevel) {
         return;
     }
 
-    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
+    if (mapConstants.leafletTileSources[getMapProvider()]) {
         setLeafletMapCenterTo(mapHolder, center, zoomLevel);
     } else if (mapHolder.mapProvider === 'googlemap') {
         setGoogleMapCenterTo(mapHolder, center, zoomLevel);
@@ -100,7 +102,7 @@ export function setMapCenterMarker(mapHolder, position) {
         return;
     }
 
-    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
+    if (mapConstants.leafletTileSources[getMapProvider()]) {
         setLeafletMapCenterMaker(mapHolder, position);
     } else if (mapHolder.mapProvider === 'googlemap') {
         setGoogleMapCenterMaker(mapHolder, position);
@@ -116,7 +118,7 @@ export function removeMapCenterMarker(mapHolder) {
         return;
     }
 
-    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
+    if (mapConstants.leafletTileSources[getMapProvider()]) {
         removeLeafletMapCenterMaker(mapHolder);
     } else if (mapHolder.mapProvider === 'googlemap') {
         removeGoogleMapCenterMaker(mapHolder);

src/lib/map/leaflet.js

@@ -1,5 +1,5 @@
 import mapConstants from '@/consts/map.js';
-import settings from '@/lib/settings.js';
+import { isMapDataFetchProxyEnabled, getTomTomMapAPIKey } from '@/lib/server_settings.js';
 import services from '@/lib/services.js';
 
 const leafletHolder = {
@@ -48,7 +48,7 @@ export function createLeafletMapInstance(mapHolder, mapContainer, options) {
     });
     let mapTileSource = Object.assign({}, mapConstants.leafletTileSources[mapHolder.mapProvider]);
 
-    if (settings.isMapDataFetchProxyEnabled()) {
+    if (isMapDataFetchProxyEnabled()) {
         mapTileSource.tileUrlFormat = services.generateMapProxyTileImageUrl(mapHolder.mapProvider, options.language);
         mapTileSource.tileUrlSubDomains = '';
     } else if (mapTileSource.tileUrlExtraParams) {
@@ -58,7 +58,7 @@ export function createLeafletMapInstance(mapHolder, mapContainer, options) {
             const param = mapTileSource.tileUrlExtraParams[i];
 
             if (param.paramValueType === 'tomtom_key') {
-                params.push('key=' + settings.getTomTomMapAPIKey());
+                params.push('key=' + getTomTomMapAPIKey());
             } else if (param.paramValueType === 'language' && options.language) {
                 params.push('language=' + options.language);
             }

src/lib/server_settings.js

@@ -0,0 +1,74 @@
+import Cookies from 'js-cookie';
+
+import { base64decode } from '@/lib/common.js';
+
+const serverSettingsCookieKey = 'ebk_server_settings';
+
+function getServerSetting(key) {
+    const settings = Cookies.get(serverSettingsCookieKey) || '';
+    const settingsArr = settings.split('_');
+
+    for (let i = 0; i < settingsArr.length; i++) {
+        const pairs = settingsArr[i].split('.');
+
+        if (pairs[0] === key) {
+            return pairs[1];
+        }
+    }
+
+    return undefined;
+}
+
+function getServerDecodedSetting(key) {
+    const value = getServerSetting(key);
+
+    if (!value) {
+        return value;
+    }
+
+    return decodeURIComponent(base64decode(value));
+}
+
+export function isUserRegistrationEnabled() {
+    return getServerSetting('r') === '1';
+}
+
+export function isDataExportingEnabled() {
+    return getServerSetting('e') === '1';
+}
+
+export function getMapProvider() {
+    return getServerSetting('m');
+}
+
+export function isMapDataFetchProxyEnabled() {
+    return getServerSetting('mp') === '1';
+}
+
+export function getTomTomMapAPIKey() {
+    return getServerDecodedSetting('tmak');
+}
+
+export function getGoogleMapAPIKey() {
+    return getServerDecodedSetting('gmak');
+}
+
+export function getBaiduMapAK() {
+    return getServerDecodedSetting('bmak');
+}
+
+export function getAmapApplicationKey() {
+    return getServerDecodedSetting('amak');
+}
+
+export function getAmapSecurityVerificationMethod() {
+    return getServerSetting('amsv');
+}
+
+export function getAmapApiExternalProxyUrl() {
+    return getServerDecodedSetting('amep');
+}
+
+export function getAmapApplicationSecret() {
+    return getServerDecodedSetting('amas');
+}

src/lib/services.js

@@ -2,7 +2,11 @@ import axios from 'axios';
 
 import api from '@/consts/api.js';
 import userState from './userstate.js';
-import settings from './settings.js';
+import {
+    getGoogleMapAPIKey,
+    getBaiduMapAK,
+    getAmapApplicationKey
+} from './server_settings.js';
 import { getTimezoneOffsetMinutes } from './datetime.js';
 
 let needBlockRequest = false;
@@ -407,7 +411,7 @@ export default {
         return url;
     },
     generateGoogleMapJavascriptUrl: (language, callbackFnName) => {
-        let url = `${api.googleMapJavascriptUrl}?key=${settings.getGoogleMapAPIKey()}&libraries=core,marker&callback=${callbackFnName}`;
+        let url = `${api.googleMapJavascriptUrl}?key=${getGoogleMapAPIKey()}&libraries=core,marker&callback=${callbackFnName}`;
 
         if (language) {
             url = url + `&language=${language}`;
@@ -416,10 +420,10 @@ export default {
         return url;
     },
     generateBaiduMapJavascriptUrl: (callbackFnName) => {
-        return `${api.baiduMapJavascriptUrl}&ak=${settings.getBaiduMapAK()}&callback=${callbackFnName}`;
+        return `${api.baiduMapJavascriptUrl}&ak=${getBaiduMapAK()}&callback=${callbackFnName}`;
     },
     generateAmapJavascriptUrl: (callbackFnName) => {
-        return `${api.amapJavascriptUrl}&key=${settings.getAmapApplicationKey()}&plugin=AMap.ToolBar&callback=${callbackFnName}`;
+        return `${api.amapJavascriptUrl}&key=${getAmapApplicationKey()}&plugin=AMap.ToolBar&callback=${callbackFnName}`;
     },
     generateAmapApiInternalProxyUrl: () => {
         return `${window.location.origin}${api.baseAmapApiProxyUrlPath}`;

src/lib/settings.js

@@ -1,12 +1,7 @@
-import Cookies from 'js-cookie';
-
 import currencyConstants from '@/consts/currency.js';
 import statisticsConstants from '@/consts/statistics.js';
 
-import { base64decode } from '@/lib/common.js';
-
 const settingsLocalStorageKey = 'ebk_app_settings';
-const serverSettingsCookieKey = 'ebk_server_settings';
 
 const defaultSettings = {
     theme: 'auto',
@@ -106,87 +101,162 @@ function setSubOption(key, subKey, value) {
     return setSettings(settings);
 }
 
-function getServerSetting(key) {
-    const settings = Cookies.get(serverSettingsCookieKey) || '';
-    const settingsArr = settings.split('_');
-
-    for (let i = 0; i < settingsArr.length; i++) {
-        const pairs = settingsArr[i].split('.');
-
-        if (pairs[0] === key) {
-            return pairs[1];
-        }
-    }
-
-    return undefined;
+export function isEnableDebug() {
+    return getOption('debug');
 }
 
-function getServerDecodedSetting(key) {
-    const value = getServerSetting(key);
-
-    if (!value) {
-        return value;
-    }
-
-    return decodeURIComponent(base64decode(value));
+export function getTheme() {
+    return getOption('theme');
 }
 
-function clearSettings() {
+export function setTheme(value) {
+    return setOption('theme', value);
+}
+
+export function getFontSize() {
+    return getOption('fontSize');
+}
+
+export function setFontSize(value) {
+    return setOption('fontSize', value);
+}
+
+export function getTimeZone() {
+    return getOption('timeZone');
+}
+
+export function setTimeZone(value) {
+    return setOption('timeZone', value);
+}
+
+export function isEnableApplicationLock() {
+    return getOption('applicationLock');
+}
+
+export function setEnableApplicationLock(value) {
+    return setOption('applicationLock', value);
+}
+
+export function isEnableApplicationLockWebAuthn() {
+    return getOption('applicationLockWebAuthn');
+}
+
+export function setEnableApplicationLockWebAuthn(value) {
+    return setOption('applicationLockWebAuthn', value);
+}
+
+export function isAutoUpdateExchangeRatesData() {
+    return getOption('autoUpdateExchangeRatesData');
+}
+
+export function setAutoUpdateExchangeRatesData(value) {
+    setOption('autoUpdateExchangeRatesData', value);
+}
+
+export function isAutoGetCurrentGeoLocation() {
+    return getOption('autoGetCurrentGeoLocation');
+}
+
+export function setAutoGetCurrentGeoLocation(value) {
+    setOption('autoGetCurrentGeoLocation', value);
+}
+
+export function isEnableThousandsSeparator() {
+    return getOption('thousandsSeparator');
+}
+
+export function setEnableThousandsSeparator(value) {
+    setOption('thousandsSeparator', value);
+}
+
+export function getCurrencyDisplayMode() {
+    return getOption('currencyDisplayMode');
+}
+
+export function setCurrencyDisplayMode(value) {
+    setOption('currencyDisplayMode', value);
+}
+
+export function isShowAmountInHomePage() {
+    return getOption('showAmountInHomePage');
+}
+
+export function setShowAmountInHomePage(value) {
+    setOption('showAmountInHomePage', value);
+}
+
+export function isShowTotalAmountInTransactionListPage() {
+    return getOption('showTotalAmountInTransactionListPage');
+}
+
+export function setShowTotalAmountInTransactionListPage(value) {
+    setOption('showTotalAmountInTransactionListPage', value);
+}
+
+export function isShowAccountBalance() {
+    return getOption('showAccountBalance');
+}
+
+export function setShowAccountBalance(value) {
+    setOption('showAccountBalance', value);
+}
+
+export function getStatisticsDefaultChartType() {
+    return getSubOption('statistics', 'defaultChartType');
+}
+
+export function setStatisticsDefaultChartType(value) {
+    setSubOption('statistics', 'defaultChartType', value);
+}
+
+export function getStatisticsDefaultChartDataType() {
+    return getSubOption('statistics', 'defaultChartDataType');
+}
+
+export function setStatisticsDefaultChartDataType(value) {
+    setSubOption('statistics', 'defaultChartDataType', value);
+}
+
+export function getStatisticsDefaultDateRange() {
+    return getSubOption('statistics', 'defaultDataRangeType');
+}
+
+export function setStatisticsDefaultDateRange(value) {
+    setSubOption('statistics', 'defaultDataRangeType', value);
+}
+
+export function getStatisticsDefaultAccountFilter() {
+    return getSubOption('statistics', 'defaultAccountFilter');
+}
+
+export function setStatisticsDefaultAccountFilter(value) {
+    setSubOption('statistics', 'defaultAccountFilter', value);
+}
+
+export function getStatisticsDefaultTransactionCategoryFilter() {
+    return getSubOption('statistics', 'defaultTransactionCategoryFilter');
+}
+
+export function setStatisticsDefaultTransactionCategoryFilter(value) {
+    setSubOption('statistics', 'defaultTransactionCategoryFilter', value);
+}
+
+export function getStatisticsSortingType() {
+    return getSubOption('statistics', 'defaultSortingType');
+}
+
+export function setStatisticsSortingType(value) {
+    setSubOption('statistics', 'defaultSortingType', value);
+}
+
+export function isEnableAnimate() {
+    return getOption('animate');
+}
+
+export function setEnableAnimate(value) {
+    return setOption('animate', value);
+}
+
+export function clearSettings() {
     localStorage.removeItem(settingsLocalStorageKey);
 }
-
-export default {
-    isProduction: () => process.env.NODE_ENV === 'production',
-    getTheme: () => getOption('theme'),
-    setTheme: value => setOption('theme', value),
-    getFontSize: () => getOption('fontSize'),
-    setFontSize: value => setOption('fontSize', value),
-    getTimezone: () => getOption('timeZone'),
-    setTimezone: value => setOption('timeZone', value),
-    isEnableDebug: () => getOption('debug'),
-    setEnableDebug: value => setOption('debug', value),
-    isEnableApplicationLock: () => getOption('applicationLock'),
-    setEnableApplicationLock: value => setOption('applicationLock', value),
-    isEnableApplicationLockWebAuthn: () => getOption('applicationLockWebAuthn'),
-    setEnableApplicationLockWebAuthn: value => setOption('applicationLockWebAuthn', value),
-    isAutoUpdateExchangeRatesData: () => getOption('autoUpdateExchangeRatesData'),
-    setAutoUpdateExchangeRatesData: value => setOption('autoUpdateExchangeRatesData', value),
-    isAutoGetCurrentGeoLocation: () => getOption('autoGetCurrentGeoLocation'),
-    setAutoGetCurrentGeoLocation: value => setOption('autoGetCurrentGeoLocation', value),
-    isEnableThousandsSeparator: () => getOption('thousandsSeparator'),
-    setEnableThousandsSeparator: value => setOption('thousandsSeparator', value),
-    getCurrencyDisplayMode: () => getOption('currencyDisplayMode'),
-    setCurrencyDisplayMode: value => setOption('currencyDisplayMode', value),
-    isShowAmountInHomePage: () => getOption('showAmountInHomePage'),
-    setShowAmountInHomePage: value => setOption('showAmountInHomePage', value),
-    isShowTotalAmountInTransactionListPage: () => getOption('showTotalAmountInTransactionListPage'),
-    setShowTotalAmountInTransactionListPage: value => setOption('showTotalAmountInTransactionListPage', value),
-    isShowAccountBalance: () => getOption('showAccountBalance'),
-    setShowAccountBalance: value => setOption('showAccountBalance', value),
-    getStatisticsDefaultChartType: () => getSubOption('statistics', 'defaultChartType'),
-    setStatisticsDefaultChartType: value => setSubOption('statistics', 'defaultChartType', value),
-    getStatisticsDefaultChartDataType: () => getSubOption('statistics', 'defaultChartDataType'),
-    setStatisticsDefaultChartDataType: value => setSubOption('statistics', 'defaultChartDataType', value),
-    getStatisticsDefaultDateRange: () => getSubOption('statistics', 'defaultDataRangeType'),
-    setStatisticsDefaultDateRange: value => setSubOption('statistics', 'defaultDataRangeType', value),
-    getStatisticsDefaultAccountFilter: () => getSubOption('statistics', 'defaultAccountFilter'),
-    setStatisticsDefaultAccountFilter: value => setSubOption('statistics', 'defaultAccountFilter', value),
-    getStatisticsDefaultTransactionCategoryFilter: () => getSubOption('statistics', 'defaultTransactionCategoryFilter'),
-    setStatisticsDefaultTransactionCategoryFilter: value => setSubOption('statistics', 'defaultTransactionCategoryFilter', value),
-    getStatisticsSortingType: () => getSubOption('statistics', 'defaultSortingType'),
-    setStatisticsSortingType: value => setSubOption('statistics', 'defaultSortingType', value),
-    isEnableAnimate: () => getOption('animate'),
-    setEnableAnimate: value => setOption('animate', value),
-    isUserRegistrationEnabled: () => getServerSetting('r') === '1',
-    isDataExportingEnabled: () => getServerSetting('e') === '1',
-    getMapProvider: () => getServerSetting('m'),
-    isMapDataFetchProxyEnabled: () => getServerSetting('mp') === '1',
-    getTomTomMapAPIKey: () => getServerDecodedSetting('tmak'),
-    getGoogleMapAPIKey: () => getServerDecodedSetting('gmak'),
-    getBaiduMapAK: () => getServerDecodedSetting('bmak'),
-    getAmapApplicationKey: () => getServerDecodedSetting('amak'),
-    getAmapSecurityVerificationMethod: () => getServerSetting('amsv'),
-    getAmapApiExternalProxyUrl: () => getServerDecodedSetting('amep'),
-    getAmapApplicationSecret: () => getServerDecodedSetting('amas'),
-    clearSettings: clearSettings
-};

src/lib/ui.mobile.js

@@ -1,7 +1,7 @@
 import { f7, f7ready } from 'framework7-vue';
 
 import fontConstants from '@/consts/font.js';
-import settings from './settings.js';
+import { isEnableAnimate } from './settings.js';
 import { translateError } from './i18n.js';
 
 export function showAlert(message, confirmCallback, translateFn) {
@@ -9,7 +9,7 @@ export function showAlert(message, confirmCallback, translateFn) {
         f7.dialog.create({
             title: translateFn('global.app.title'),
             text: translateError(message, translateFn),
-            animate: settings.isEnableAnimate(),
+            animate: isEnableAnimate(),
             buttons: [
                 {
                     text: translateFn('OK'),
@@ -25,7 +25,7 @@ export function showConfirm(message, confirmCallback, cancelCallback, translateF
         f7.dialog.create({
             title: translateFn('global.app.title'),
             text: translateFn(message),
-            animate: settings.isEnableAnimate(),
+            animate: isEnableAnimate(),
             buttons: [
                 {
                     text: translateFn('Cancel'),

src/lib/userstate.js

@@ -1,7 +1,7 @@
 import CryptoJS from 'crypto-js';
 
-import settings from './settings.js';
 import { isString, isObject } from './common.js';
+import { isEnableApplicationLock } from './settings.js';
 
 const appLockSecretBaseStringPrefix = 'EBK_LOCK_SECRET_';
 
@@ -29,7 +29,7 @@ function getDecryptedToken(encryptedToken, appLockState) {
 }
 
 function getToken() {
-    if (settings.isEnableApplicationLock()) {
+    if (isEnableApplicationLock()) {
         return sessionStorage.getItem(tokenSessionStorageKey);
     } else {
         return localStorage.getItem(tokenLocalStorageKey);
@@ -55,7 +55,7 @@ function isUserUnlocked() {
         return false;
     }
 
-    if (!settings.isEnableApplicationLock()) {
+    if (!isEnableApplicationLock()) {
         return true;
     }
 
@@ -142,7 +142,7 @@ function isCorrectPinCode(pinCode) {
 
 function updateToken(token) {
     if (isString(token)) {
-        if (settings.isEnableApplicationLock()) {
+        if (isEnableApplicationLock()) {
             sessionStorage.setItem(tokenSessionStorageKey, token);
 
             const appLockState = getUserAppLockState();

src/lib/version.js

@@ -1,15 +1,18 @@
-export default {
-    getVersion: () => {
-        let version = __EZBOOKKEEPING_VERSION__ || 'unknown'; // eslint-disable-line
-        let commitHash = __EZBOOKKEEPING_BUILD_COMMIT_HASH__; // eslint-disable-line
+export function isProduction() {
+    return process.env.NODE_ENV === 'production';
+}
 
-        if (commitHash) {
-            return `${version} (${commitHash.substring(0, Math.min(7, commitHash.length))})`
-        } else {
-            return version;
-        }
-    },
-    getBuildTime: () => {
-        return __EZBOOKKEEPING_BUILD_UNIX_TIME__; // eslint-disable-line
+export function getVersion() {
+    let version = __EZBOOKKEEPING_VERSION__ || 'unknown'; // eslint-disable-line
+    let commitHash = __EZBOOKKEEPING_BUILD_COMMIT_HASH__; // eslint-disable-line
+
+    if (commitHash) {
+        return `${version} (${commitHash.substring(0, Math.min(7, commitHash.length))})`
+    } else {
+        return version;
     }
-};
+}
+
+export function getBuildTime() {
+    return __EZBOOKKEEPING_BUILD_UNIX_TIME__; // eslint-disable-line
+}

src/mobile-main.js

@@ -73,8 +73,7 @@ import 'line-awesome/dist/line-awesome/css/line-awesome.css';
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
-import version from '@/lib/version.js';
-import settings from '@/lib/settings.js';
+import { getVersion, getBuildTime } from '@/lib/version.js';
 import userstate from '@/lib/userstate.js';
 import {
     getI18nOptions,
@@ -183,10 +182,9 @@ app.component('TransactionTagSelectionSheet', TransactionTagSelectionSheet);
 
 app.directive('TextareaAutoSize', TextareaAutoSize);
 
-app.config.globalProperties.$version = version.getVersion();
-app.config.globalProperties.$buildTime = version.getBuildTime();
+app.config.globalProperties.$version = getVersion();
+app.config.globalProperties.$buildTime = getBuildTime();
 
-app.config.globalProperties.$settings = settings;
 app.config.globalProperties.$locale = i18nFunctions(i18n.global);
 app.config.globalProperties.$tIf = (text, isTranslate) => translateIf(text, isTranslate, i18n.global.t);
 

src/stores/index.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 
+import { useSettingsStore } from './setting.js';
 import { useUserStore } from './user.js';
 import { useAccountsStore } from './account.js';
 import { useTransactionCategoriesStore } from './transactionCategory.js';
@@ -11,7 +12,6 @@ import { useExchangeRatesStore } from './exchangeRates.js';
 
 import userState from '@/lib/userstate.js';
 import services from '@/lib/services.js';
-import settings from '@/lib/settings.js';
 import logger from '@/lib/logger.js';
 import { isObject, isString } from '@/lib/common.js';
 
@@ -43,6 +43,8 @@ export const useRootStore = defineStore('root', {
             userStore.resetUserInfo();
         },
         authorize({ loginName, password }) {
+            const settingsStore = useSettingsStore();
+
             return new Promise((resolve, reject) => {
                 services.authorize({
                     loginName: loginName,
@@ -60,13 +62,13 @@ export const useRootStore = defineStore('root', {
                         return;
                     }
 
-                    if (settings.isEnableApplicationLock() || userState.getUserAppLockState()) {
+                    if (settingsStore.appSettings.applicationLock || userState.getUserAppLockState()) {
                         const appLockState = userState.getUserAppLockState();
 
                         if (!appLockState || appLockState.username !== data.result.user.username) {
                             userState.clearTokenAndUserInfo(true);
-                            settings.setEnableApplicationLock(false);
-                            settings.setEnableApplicationLockWebAuthn(false);
+                            settingsStore.setEnableApplicationLock(false);
+                            settingsStore.setEnableApplicationLockWebAuthn(false);
                             userState.clearWebAuthnConfig();
                         }
                     }
@@ -93,6 +95,8 @@ export const useRootStore = defineStore('root', {
             });
         },
         authorize2FA({ token, passcode, recoveryCode }) {
+            const settingsStore = useSettingsStore();
+
             return new Promise((resolve, reject) => {
                 let promise = null;
 
@@ -119,13 +123,13 @@ export const useRootStore = defineStore('root', {
                         return;
                     }
 
-                    if (settings.isEnableApplicationLock() || userState.getUserAppLockState()) {
+                    if (settingsStore.appSettings.applicationLock || userState.getUserAppLockState()) {
                         const appLockState = userState.getUserAppLockState();
 
                         if (!appLockState || appLockState.username !== data.result.user.username) {
                             userState.clearTokenAndUserInfo(true);
-                            settings.setEnableApplicationLock(false);
-                            settings.setEnableApplicationLockWebAuthn(false);
+                            settingsStore.setEnableApplicationLock(false);
+                            settingsStore.setEnableApplicationLockWebAuthn(false);
                             userState.clearWebAuthnConfig();
                         }
                     }
@@ -152,6 +156,8 @@ export const useRootStore = defineStore('root', {
             });
         },
         register({ user }) {
+            const settingsStore = useSettingsStore();
+
             return new Promise((resolve, reject) => {
                 services.register({
                     username: user.username,
@@ -169,9 +175,9 @@ export const useRootStore = defineStore('root', {
                         return;
                     }
 
-                    if (settings.isEnableApplicationLock()) {
-                        settings.setEnableApplicationLock(false);
-                        settings.setEnableApplicationLockWebAuthn(false);
+                    if (settingsStore.appSettings.applicationLock) {
+                        settingsStore.setEnableApplicationLock(false);
+                        settingsStore.setEnableApplicationLockWebAuthn(false);
                         userState.clearWebAuthnConfig();
                     }
 

src/stores/setting.js

@@ -2,27 +2,125 @@ import { defineStore } from 'pinia';
 
 import currencyConstants from '@/consts/currency.js';
 import datetimeConstants from '@/consts/datetime.js';
+import * as settings from '@/lib/settings.js';
 
 export const useSettingsStore = defineStore('settings', {
     state: () => ({
-        defaultSetting: {
-            language: '',
+        appSettings: {
+            theme: settings.getTheme(),
+            fontSize: settings.getFontSize(),
+            timeZone: settings.getTimeZone(),
+            applicationLock: settings.isEnableApplicationLock(),
+            applicationLockWebAuthn: settings.isEnableApplicationLockWebAuthn(),
+            autoUpdateExchangeRatesData: settings.isAutoUpdateExchangeRatesData(),
+            autoGetCurrentGeoLocation: settings.isAutoGetCurrentGeoLocation(),
+            thousandsSeparator: settings.isEnableThousandsSeparator(),
+            currencyDisplayMode: settings.getCurrencyDisplayMode(),
+            showAmountInHomePage: settings.isShowAmountInHomePage(),
+            showTotalAmountInTransactionListPage: settings.isShowTotalAmountInTransactionListPage(),
+            showAccountBalance: settings.isShowAccountBalance(),
+            statistics: {
+                defaultChartType: settings.getStatisticsDefaultChartType(),
+                defaultChartDataType: settings.getStatisticsDefaultChartDataType(),
+                defaultDataRangeType: settings.getStatisticsDefaultDateRange(),
+                defaultAccountFilter: settings.getStatisticsDefaultAccountFilter(),
+                defaultTransactionCategoryFilter: settings.getStatisticsDefaultTransactionCategoryFilter(),
+                defaultSortingType: settings.getStatisticsSortingType()
+            },
+            animate: settings.isEnableAnimate()
+        },
+        localeDefaultSettings: {
             currency: currencyConstants.defaultCurrency,
-            firstDayOfWeek: datetimeConstants.defaultFirstDayOfWeek,
-            longDateFormat: 0,
-            shortDateFormat: 0,
-            longTimeFormat: 0,
-            shortTimeFormat: 0
+            firstDayOfWeek: datetimeConstants.defaultFirstDayOfWeek
         }
     }),
     actions: {
+        setTheme(value) {
+            settings.setTheme(value);
+            this.appSettings.theme = value;
+        },
+        setFontSize(value) {
+            settings.setFontSize(value);
+            this.appSettings.fontSize = value;
+        },
+        setTimeZone(value) {
+            settings.setTimeZone(value);
+            this.appSettings.timeZone = value;
+        },
+        setEnableApplicationLock(value) {
+            settings.setEnableApplicationLock(value);
+            this.appSettings.applicationLock = value;
+        },
+        setEnableApplicationLockWebAuthn(value) {
+            settings.setEnableApplicationLockWebAuthn(value);
+            this.appSettings.applicationLockWebAuthn = value;
+        },
+        setAutoUpdateExchangeRatesData(value) {
+            settings.setAutoUpdateExchangeRatesData(value);
+            this.appSettings.autoUpdateExchangeRatesData = value;
+        },
+        setAutoGetCurrentGeoLocation(value) {
+            settings.setAutoGetCurrentGeoLocation(value);
+            this.appSettings.autoGetCurrentGeoLocation = value;
+        },
+        setEnableThousandsSeparator(value) {
+            settings.setEnableThousandsSeparator(value);
+            this.appSettings.thousandsSeparator = value;
+        },
+        setCurrencyDisplayMode(value) {
+            settings.setCurrencyDisplayMode(value);
+            this.appSettings.currencyDisplayMode = value;
+        },
+        setShowAmountInHomePage(value) {
+            settings.setShowAmountInHomePage(value);
+            this.appSettings.showAmountInHomePage = value;
+        },
+        setShowTotalAmountInTransactionListPage(value) {
+            settings.setShowTotalAmountInTransactionListPage(value);
+            this.appSettings.showTotalAmountInTransactionListPage = value;
+        },
+        setShowAccountBalance(value) {
+            settings.setShowAccountBalance(value);
+            this.appSettings.showAccountBalance = value;
+        },
+        setStatisticsDefaultChartType(value) {
+            settings.setStatisticsDefaultChartType(value);
+            this.appSettings.statistics.defaultChartType = value;
+        },
+        setStatisticsDefaultChartDataType(value) {
+            settings.setStatisticsDefaultChartDataType(value);
+            this.appSettings.statistics.defaultChartDataType = value;
+        },
+        setStatisticsDefaultDateRange(value) {
+            settings.setStatisticsDefaultDateRange(value);
+            this.appSettings.statistics.defaultDataRangeType = value;
+        },
+        setStatisticsDefaultAccountFilter(value) {
+            settings.setStatisticsDefaultAccountFilter(value);
+            this.appSettings.statistics.defaultAccountFilter = value;
+        },
+        setStatisticsDefaultTransactionCategoryFilter(value) {
+            settings.setStatisticsDefaultTransactionCategoryFilter(value);
+            this.appSettings.statistics.defaultTransactionCategoryFilter = value;
+        },
+        setStatisticsSortingType(value) {
+            settings.setStatisticsSortingType(value);
+            this.appSettings.statistics.defaultSortingType = value;
+        },
+        setEnableAnimate(value) {
+            settings.setEnableAnimate(value);
+            this.appSettings.animate = value;
+        },
+        clearAppSettings() {
+            settings.clearSettings();
+        },
         updateLocalizedDefaultSettings(localeDefaultSettings) {
             if (!localeDefaultSettings) {
                 return;
             }
 
-            this.defaultSetting.currency = localeDefaultSettings.defaultCurrency;
-            this.defaultSetting.firstDayOfWeek = localeDefaultSettings.defaultFirstDayOfWeek;
+            this.localeDefaultSettings.currency = localeDefaultSettings.defaultCurrency;
+            this.localeDefaultSettings.firstDayOfWeek = localeDefaultSettings.defaultFirstDayOfWeek;
         }
     }
 });

src/views/desktop/LoginPage.vue

@@ -80,7 +80,7 @@
                             </v-btn>
                         </v-col>
 
-                        <v-col cols="12" class="text-center text-base">
+                        <v-col cols="12" class="text-center text-base" v-if="isUserRegistrationEnabled">
                             <span>{{ $t('Don\'t have an account?') }}</span>&nbsp;
                             <router-link class="text-primary ms-2" to="/signup">
                                 {{ $t('Create an account') }}
@@ -141,6 +141,8 @@ import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import { isUserRegistrationEnabled } from '@/lib/server_settings.js';
+
 import {
     mdiEyeOutline,
     mdiEyeOffOutline,
@@ -181,7 +183,7 @@ export default {
             return this.$locale.getAllLanguageInfos();
         },
         isUserRegistrationEnabled() {
-            return this.$settings.isUserRegistrationEnabled();
+            return isUserRegistrationEnabled();
         },
         inputIsEmpty() {
             return !this.username || !this.password;
@@ -255,8 +257,8 @@ export default {
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
                 }
 
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
-                    self.exchangeRatesStore.getLatestExchangeRates({silent: true, force: false});
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
+                    self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
                 this.$router.replace('/');
@@ -297,7 +299,7 @@ export default {
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
                 }
 
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 

src/views/desktop/MainLayout.vue

@@ -97,8 +97,8 @@
                         </div>
                         <v-spacer />
                         <v-btn color="primary" variant="text" class="me-2"
-                               :icon="true" @click="(currentTheme === 'light' ? currentTheme = 'dark' : (currentTheme === 'dark' ? currentTheme = 'auto' : currentTheme = 'light'))">
-                            <v-icon :icon="(currentTheme === 'light' ? icons.themeLight : (currentTheme === 'dark' ? icons.themeDark : icons.themeAuto))" size="24" />
+                               :icon="true" @click="(theme === 'light' ? theme = 'dark' : (theme === 'dark' ? theme = 'auto' : theme = 'light'))">
+                            <v-icon :icon="(theme === 'light' ? icons.themeLight : (theme === 'dark' ? icons.themeDark : icons.themeAuto))" size="24" />
                         </v-btn>
                         <v-avatar class="cursor-pointer" color="primary" variant="tonal">
                             <v-icon :icon="icons.user"/>
@@ -197,10 +197,7 @@ import {
 
 export default {
     data() {
-        const self = this;
-
         return {
-            theme: self.$settings.getTheme(),
             logouting: false,
             isVerticalNavScrolled: false,
             showVerticalOverlayMenu: false,
@@ -236,14 +233,13 @@ export default {
         currentNickName() {
             return this.userStore.currentUserNickname || this.$t('User');
         },
-        currentTheme: {
+        theme: {
             get: function () {
-                return this.theme;
+                return this.settingsStore.appSettings.theme;
             },
             set: function (value) {
-                if (value !== this.$settings.getTheme()) {
-                    this.theme = value;
-                    this.$settings.setTheme(value);
+                if (value !== this.settingsStore.appSettings.theme) {
+                    this.settingsStore.setTheme(value);
 
                     if (value === 'light' || value === 'dark') {
                         this.globalTheme.global.name.value = value;
@@ -275,9 +271,9 @@ export default {
                 self.logouting = false;
                 self.showLoading = false;
 
-                self.$settings.clearSettings();
+                self.settingsStore.clearAppSettings();
 
-                const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage);
+                const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
                 self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
                 this.$router.replace('/login');

src/views/desktop/user/settings/UserDataManagementSettingTab.vue

@@ -76,7 +76,7 @@
             </v-card>
         </v-col>
 
-        <v-col cols="12">
+        <v-col cols="12" v-if="isDataExportingEnabled">
             <v-card :class="{ 'disabled': exportingData }" :title="$t('Export Data')">
                 <v-card-text>
                     <span class="text-subtitle-1">{{ $t('Export all data to csv file.') }}&nbsp;{{ $t('It may take a long time, please wait for a few minutes.') }}</span>
@@ -153,6 +153,7 @@ import { useRootStore } from '@/stores/index.js';
 import { useUserStore } from '@/stores/user.js';
 
 import { appendThousandsSeparator } from '@/lib/common.js';
+import { isDataExportingEnabled } from '@/lib/server_settings.js';
 import { startDownloadFile } from '@/lib/ui.js';
 
 import {
@@ -206,7 +207,7 @@ export default {
             };
         },
         isDataExportingEnabled() {
-            return this.$settings.isDataExportingEnabled();
+            return isDataExportingEnabled();
         },
         exportFileName() {
             const nickname = this.userStore.currentUserNickname;

src/views/mobile/ApplicationLockPage.vue

@@ -37,6 +37,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
 import logger from '@/lib/logger.js';
@@ -46,8 +47,6 @@ export default {
     data() {
         return {
             isSupportedWebAuthn: false,
-            isEnableApplicationLock: this.$settings.isEnableApplicationLock(),
-            isEnableApplicationLockWebAuthn: this.$settings.isEnableApplicationLockWebAuthn(),
             currentPinCodeForEnable: '',
             currentPinCodeForDisable: '',
             showInputPinCodeSheetForEnable: false,
@@ -55,7 +54,23 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useUserStore)
+        ...mapStores(useSettingsStore, useUserStore),
+        isEnableApplicationLock: {
+            get: function () {
+                return this.settingsStore.appSettings.applicationLock;
+            },
+            set: function (value) {
+                this.settingsStore.setEnableApplicationLock(value);
+            }
+        },
+        isEnableApplicationLockWebAuthn: {
+            get: function () {
+                return this.settingsStore.appSettings.applicationLockWebAuthn;
+            },
+            set: function (value) {
+                this.settingsStore.setEnableApplicationLockWebAuthn(value);
+            }
+        }
     },
     watch: {
         isEnableApplicationLockWebAuthn: function (newValue) {
@@ -71,7 +86,7 @@ export default {
                     self.$hideLoading();
 
                     self.$user.saveWebAuthnConfig(id);
-                    self.$settings.setEnableApplicationLockWebAuthn(true);
+                    self.settingsStore.setEnableApplicationLockWebAuthn(true);
                     self.$toast('You have enabled WebAuthn successfully');
                 }).catch(error => {
                     logger.error('failed to enable WebAuthn', error);
@@ -89,11 +104,11 @@ export default {
                     }
 
                     self.isEnableApplicationLockWebAuthn = false;
-                    self.$settings.setEnableApplicationLockWebAuthn(false);
+                    self.settingsStore.setEnableApplicationLockWebAuthn(false);
                     self.$user.clearWebAuthnConfig();
                 });
             } else {
-                self.$settings.setEnableApplicationLockWebAuthn(false);
+                self.settingsStore.setEnableApplicationLockWebAuthn(false);
                 self.$user.clearWebAuthnConfig();
             }
         }
@@ -106,7 +121,7 @@ export default {
     },
     methods: {
         enable(pinCode) {
-            if (this.$settings.isEnableApplicationLock()) {
+            if (this.settingsStore.appSettings.applicationLock) {
                 this.$alert('Application lock has been enabled');
                 return;
             }
@@ -129,17 +144,15 @@ export default {
             }
 
             this.$user.encryptToken(user.username, pinCode);
-            this.$settings.setEnableApplicationLock(true);
-            this.isEnableApplicationLock = true;
+            this.settingsStore.setEnableApplicationLock(true);
 
-            this.$settings.setEnableApplicationLockWebAuthn(false);
+            this.settingsStore.setEnableApplicationLockWebAuthn(false);
             this.$user.clearWebAuthnConfig();
-            this.isEnableApplicationLockWebAuthn = false;
 
             this.showInputPinCodeSheetForEnable = false;
         },
         disable(pinCode) {
-            if (!this.$settings.isEnableApplicationLock()) {
+            if (!this.settingsStore.appSettings.applicationLock) {
                 this.$alert('Application lock is not enabled');
                 return;
             }
@@ -155,12 +168,10 @@ export default {
             }
 
             this.$user.decryptToken();
-            this.$settings.setEnableApplicationLock(false);
-            this.isEnableApplicationLock = false;
+            this.settingsStore.setEnableApplicationLock(false);
 
-            this.$settings.setEnableApplicationLockWebAuthn(false);
+            this.settingsStore.setEnableApplicationLockWebAuthn(false);
             this.$user.clearWebAuthnConfig();
-            this.isEnableApplicationLockWebAuthn = false;
 
             this.showInputPinCodeSheetForDisable = false;
         }

src/views/mobile/HomePage.vue

@@ -21,7 +21,7 @@
                 <p class="no-margin">
                     <span class="month-expense" v-if="loading">0.00 USD</span>
                     <span class="month-expense" v-else-if="!loading">{{ transactionOverview.thisMonth.expenseAmount }}</span>
-                    <f7-link class="margin-left-half" @click="toggleShowAmountInHomePage()">
+                    <f7-link class="margin-left-half" @click="showAmountInHomePage = !showAmountInHomePage">
                         <f7-icon class="ebk-hide-icon" :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
                     </f7-link>
                 </p>
@@ -189,6 +189,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useOverviewStore } from '@/stores/overview.js';
 
@@ -212,14 +213,25 @@ export default {
         return {
             loading: true,
             todayFirstUnixTime: getTodayFirstUnixTime(),
-            todayLastUnixTime: getTodayLastUnixTime(),
-            showAmountInHomePage: self.$settings.isShowAmountInHomePage(),
-            isEnableThousandsSeparator: self.$settings.isEnableThousandsSeparator(),
-            currencyDisplayMode: self.$settings.getCurrencyDisplayMode()
+            todayLastUnixTime: getTodayLastUnixTime()
         };
     },
     computed: {
-        ...mapStores(useUserStore, useOverviewStore),
+        ...mapStores(useSettingsStore, useUserStore, useOverviewStore),
+        showAmountInHomePage: {
+            get: function() {
+                return this.settingsStore.appSettings.showAmountInHomePage;
+            },
+            set: function(value) {
+                this.settingsStore.setShowAmountInHomePage(value);
+            }
+        },
+        isEnableThousandsSeparator() {
+            return this.settingsStore.appSettings.thousandsSeparator;
+        },
+        currencyDisplayMode() {
+            return this.settingsStore.appSettings.currencyDisplayMode;
+        },
         defaultCurrency() {
             return this.userStore.currentUserDefaultCurrency;
         },
@@ -330,14 +342,6 @@ export default {
     },
     methods: {
         onPageAfterIn() {
-            this.showAmountInHomePage = this.$settings.isShowAmountInHomePage();
-
-            if (this.isEnableThousandsSeparator !== this.$settings.isEnableThousandsSeparator() || this.currencyDisplayMode !== this.$settings.getCurrencyDisplayMode()) {
-                this.isEnableThousandsSeparator = this.$settings.isEnableThousandsSeparator();
-                this.currencyDisplayMode = this.$settings.getCurrencyDisplayMode();
-                this.$forceUpdate();
-            }
-
             let dateChanged = false;
 
             if (this.todayFirstUnixTime !== getTodayFirstUnixTime()) {
@@ -377,10 +381,6 @@ export default {
                 }
             });
         },
-        toggleShowAmountInHomePage() {
-            this.showAmountInHomePage = !this.showAmountInHomePage;
-            this.$settings.setShowAmountInHomePage(this.showAmountInHomePage);
-        },
         getDisplayAmount(amount, incomplete) {
             if (!this.showAmountInHomePage) {
                 return this.$locale.getDisplayCurrency('***', this.defaultCurrency);

src/views/mobile/LoginPage.vue

@@ -115,6 +115,7 @@ import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
+import { isUserRegistrationEnabled } from '@/lib/server_settings.js';
 import { isModalShowing } from '@/lib/ui.mobile.js';
 
 export default {
@@ -143,7 +144,7 @@ export default {
             return this.$locale.getAllLanguageInfos();
         },
         isUserRegistrationEnabled() {
-            return this.$settings.isUserRegistrationEnabled();
+            return isUserRegistrationEnabled();
         },
         inputIsEmpty() {
             return !this.username || !this.password;
@@ -214,7 +215,7 @@ export default {
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
                 }
 
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
@@ -267,7 +268,7 @@ export default {
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
                 }
 
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 

src/views/mobile/SettingsPage.vue

@@ -32,10 +32,10 @@
                 :key="currentLocale + '_timezone'"
                 :title="$t('Timezone')"
                 smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
-                <select v-model="currentTimezone">
-                    <option :value="timezone.name"
-                            :key="timezone.name"
-                            v-for="timezone in allTimezones">{{ `(UTC${timezone.utcOffset}) ${timezone.displayName}` }}</option>
+                <select v-model="timeZone">
+                    <option :value="tz.name"
+                            :key="tz.name"
+                            v-for="tz in allTimezones">{{ `(UTC${tz.utcOffset}) ${tz.displayName}` }}</option>
                 </select>
             </f7-list-item>
 
@@ -114,8 +114,7 @@ export default {
         const self = this;
 
         return {
-            currentLocale: this.$i18n.locale,
-            isEnableApplicationLock: self.$settings.isEnableApplicationLock(),
+            currentLocale: self.$i18n.locale,
             logouting: false
         };
     },
@@ -127,98 +126,101 @@ export default {
         allTimezones() {
             return this.$locale.getAllTimezones(true);
         },
+        allCurrencyDisplayModes() {
+            return currencyConstants.allCurrencyDisplayModes;
+        },
+        currentNickName() {
+            return this.userStore.currentUserNickname || this.$t('User');
+        },
         theme: {
             get: function () {
-                return this.$settings.getTheme();
+                return this.settingsStore.appSettings.theme;
             },
             set: function (value) {
-                if (value !== this.$settings.getTheme()) {
-                    this.$settings.setTheme(value);
+                if (value !== this.settingsStore.appSettings.theme) {
+                    this.settingsStore.setTheme(value);
                     location.reload();
                 }
             }
         },
-        currentTimezone: {
+        timeZone: {
             get: function () {
-                return this.$locale.getTimezone();
+                return this.settingsStore.appSettings.timeZone;
             },
             set: function (value) {
-                this.$locale.setTimezone(value);
+                this.settingsStore.setTimeZone(value);
             }
         },
-        currentNickName() {
-            return this.userStore.currentUserNickname || this.$t('User');
-        },
         exchangeRatesLastUpdateDate() {
             const exchangeRatesLastUpdateTime = this.exchangeRatesStore.exchangeRatesLastUpdateTime;
             return exchangeRatesLastUpdateTime ? this.$locale.formatUnixTimeToLongDate(this.userStore, exchangeRatesLastUpdateTime) : '';
         },
-        allCurrencyDisplayModes() {
-            return currencyConstants.allCurrencyDisplayModes;
-        },
         isAutoUpdateExchangeRatesData: {
             get: function () {
-                return this.$settings.isAutoUpdateExchangeRatesData();
+                return this.settingsStore.appSettings.autoUpdateExchangeRatesData;
             },
             set: function (value) {
-                this.$settings.setAutoUpdateExchangeRatesData(value);
+                this.settingsStore.setAutoUpdateExchangeRatesData(value);
             }
         },
+        isEnableApplicationLock() {
+            return this.settingsStore.appSettings.applicationLock;
+        },
         isAutoGetCurrentGeoLocation: {
             get: function () {
-                return this.$settings.isAutoGetCurrentGeoLocation();
+                return this.settingsStore.appSettings.autoGetCurrentGeoLocation;
             },
             set: function (value) {
-                this.$settings.setAutoGetCurrentGeoLocation(value);
+                this.settingsStore.setAutoGetCurrentGeoLocation(value);
             }
         },
         isEnableThousandsSeparator: {
             get: function () {
-                return this.$settings.isEnableThousandsSeparator();
+                return this.settingsStore.appSettings.thousandsSeparator;
             },
             set: function (value) {
-                this.$settings.setEnableThousandsSeparator(value);
+                this.settingsStore.setEnableThousandsSeparator(value);
             }
         },
         currencyDisplayMode: {
             get: function () {
-                return this.$settings.getCurrencyDisplayMode();
+                return this.settingsStore.appSettings.currencyDisplayMode;
             },
             set: function (value) {
-                this.$settings.setCurrencyDisplayMode(value);
+                this.settingsStore.setCurrencyDisplayMode(value);
             }
         },
         showAmountInHomePage: {
             get: function () {
-                return this.$settings.isShowAmountInHomePage();
+                return this.settingsStore.appSettings.showAmountInHomePage;
             },
             set: function (value) {
-                this.$settings.setShowAmountInHomePage(value);
+                this.settingsStore.setShowAmountInHomePage(value);
             }
         },
         showAccountBalance: {
             get: function () {
-                return this.$settings.isShowAccountBalance();
+                return this.settingsStore.appSettings.showAccountBalance;
             },
             set: function (value) {
-                this.$settings.setShowAccountBalance(value);
+                this.settingsStore.setShowAccountBalance(value);
             }
         },
         showTotalAmountInTransactionListPage: {
             get: function () {
-                return this.$settings.isShowTotalAmountInTransactionListPage();
+                return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
             },
             set: function (value) {
-                this.$settings.setShowTotalAmountInTransactionListPage(value);
+                this.settingsStore.setShowTotalAmountInTransactionListPage(value);
             }
         },
         isEnableAnimate: {
             get: function () {
-                return this.$settings.isEnableAnimate();
+                return this.settingsStore.appSettings.animate;
             },
             set: function (value) {
-                if (value !== this.$settings.isEnableAnimate()) {
-                    this.$settings.setEnableAnimate(value);
+                if (value !== this.settingsStore.appSettings.animate) {
+                    this.settingsStore.setEnableAnimate(value);
                     location.reload();
                 }
             }
@@ -227,7 +229,6 @@ export default {
     methods: {
         onPageAfterIn() {
             this.currentLocale = this.$i18n.locale;
-            this.isEnableApplicationLock = this.$settings.isEnableApplicationLock();
         },
         logout() {
             const self = this;
@@ -241,9 +242,9 @@ export default {
                     self.logouting = false;
                     self.$hideLoading();
 
-                    self.$settings.clearSettings();
+                    self.settingsStore.clearAppSettings();
 
-                    const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage);
+                    const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
                     router.navigate('/');

src/views/mobile/SignupPage.vue

@@ -199,8 +199,8 @@ export default {
                 email: '',
                 nickname: '',
                 language: self.$i18n.locale,
-                defaultCurrency: settingsStore.defaultSetting.currency,
-                firstDayOfWeek: settingsStore.defaultSetting.firstDayOfWeek,
+                defaultCurrency: settingsStore.localeDefaultSettings.currency,
+                firstDayOfWeek: settingsStore.localeDefaultSettings.firstDayOfWeek,
             },
             submitting: false,
             presetCategories: {
@@ -230,8 +230,8 @@ export default {
                 return this.$i18n.locale;
             },
             set: function (value) {
-                const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.defaultSetting.currency;
-                const isFirstWeekDayDefault = this.user.firstDayOfWeek === this.settingsStore.defaultSetting.firstDayOfWeek;
+                const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.localeDefaultSettings.currency;
+                const isFirstWeekDayDefault = this.user.firstDayOfWeek === this.settingsStore.localeDefaultSettings.firstDayOfWeek;
 
                 this.user.language = value;
 
@@ -239,11 +239,11 @@ export default {
                 this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
                 if (isCurrencyDefault) {
-                    this.user.defaultCurrency = this.settingsStore.defaultSetting.currency;
+                    this.user.defaultCurrency = this.settingsStore.localeDefaultSettings.currency;
                 }
 
                 if (isFirstWeekDayDefault) {
-                    this.user.firstDayOfWeek = this.settingsStore.defaultSetting.firstDayOfWeek;
+                    this.user.firstDayOfWeek = this.settingsStore.localeDefaultSettings.firstDayOfWeek;
                 }
             }
         },
@@ -362,7 +362,7 @@ export default {
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
                 }
 
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 

src/views/mobile/UnlockPage.vue

@@ -86,7 +86,7 @@ export default {
             return this.$locale.getAllLanguageInfos();
         },
         isWebAuthnAvailable() {
-            return this.$settings.isEnableApplicationLockWebAuthn()
+            return this.settingsStore.appSettings.applicationLockWebAuthn
                 && this.$user.getWebAuthnCredentialId()
                 && webauthn.isSupported();
         },
@@ -106,7 +106,7 @@ export default {
             const self = this;
             const router = self.f7router;
 
-            if (!self.$settings.isEnableApplicationLockWebAuthn() || !self.$user.getWebAuthnCredentialId()) {
+            if (!self.settingsStore.appSettings.applicationLockWebAuthn || !self.$user.getWebAuthnCredentialId()) {
                 self.$toast('WebAuthn is not enabled');
                 return;
             }
@@ -132,7 +132,7 @@ export default {
                     }
                 });
 
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
@@ -180,7 +180,7 @@ export default {
                     }
                 });
 
-                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
                     self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
                 }
 
@@ -196,9 +196,9 @@ export default {
 
             self.$confirm('Are you sure you want to re-login?', () => {
                 self.rootStore.forceLogout();
-                self.$settings.clearSettings();
+                self.settingsStore.clearAppSettings();
 
-                const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage);
+                const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
                 self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
                 router.navigate('/login', {

src/views/mobile/accounts/ListPage.vue

@@ -19,7 +19,7 @@
                 <p class="no-margin">
                     <span class="net-assets" v-if="loading">0.00 USD</span>
                     <span class="net-assets" v-else-if="!loading">{{ netAssets }}</span>
-                    <f7-link class="margin-left-half" @click="toggleShowAccountBalance()">
+                    <f7-link class="margin-left-half" @click="showAccountBalance = !showAccountBalance">
                         <f7-icon class="ebk-hide-icon" :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
                     </f7-link>
                 </p>
@@ -166,6 +166,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
@@ -184,7 +185,6 @@ export default {
             showHidden: false,
             sortable: false,
             accountToDelete: null,
-            showAccountBalance: this.$settings.isShowAccountBalance(),
             showMoreActionSheet: false,
             showDeleteActionSheet: false,
             displayOrderModified: false,
@@ -192,7 +192,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useUserStore, useAccountsStore, useExchangeRatesStore),
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useExchangeRatesStore),
         defaultCurrency() {
             return this.userStore.currentUserDefaultCurrency;
         },
@@ -232,6 +232,14 @@ export default {
         totalLiabilities() {
             const totalLiabilities = this.accountsStore.getTotalLiabilities(this.showAccountBalance);
             return this.$locale.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
+        },
+        showAccountBalance: {
+            get: function () {
+                return this.settingsStore.appSettings.showAccountBalance;
+            },
+            set: function (value) {
+                this.settingsStore.setShowAccountBalance(value);
+            }
         }
     },
     created() {
@@ -295,10 +303,6 @@ export default {
         hasVisibleSubAccount(account) {
             return this.accountsStore.hasVisibleSubAccount(this.showHidden, account);
         },
-        toggleShowAccountBalance() {
-            this.showAccountBalance = !this.showAccountBalance;
-            this.$settings.setShowAccountBalance(this.showAccountBalance);
-        },
         accountBalance(account) {
             const balance = this.accountsStore.getAccountBalance(this.showAccountBalance, account);
             return this.$locale.getDisplayCurrency(balance, account.currency);

src/views/mobile/settings/TextSizeSettingsPage.vue

@@ -106,6 +106,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
 import fontConstants from '@/consts/font.js';
@@ -117,15 +118,15 @@ export default {
         'f7router'
     ],
     data() {
-        const self = this;
+        const settingsStore = useSettingsStore();
 
         return {
             currentTime: getCurrentUnixTime(),
-            fontSize: self.$settings.getFontSize()
+            fontSize: settingsStore.appSettings.fontSize
         }
     },
     computed: {
-        ...mapStores(useUserStore),
+        ...mapStores(useSettingsStore, useUserStore),
         minFontSizeType() {
             return 0;
         },
@@ -152,8 +153,8 @@ export default {
         setFontSize() {
             const router = this.f7router;
 
-            if (this.fontSize !== this.$settings.getFontSize()) {
-                this.$settings.setFontSize(this.fontSize);
+            if (this.fontSize !== this.settingsStore.appSettings.fontSize) {
+                this.settingsStore.setFontSize(this.fontSize);
                 setAppFontSize(this.fontSize);
             }
 

src/views/mobile/statistics/AccountFilterSettingsPage.vue

@@ -115,6 +115,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
 
@@ -140,7 +141,7 @@ export default {
         }
     },
     computed: {
-        ...mapStores(useAccountsStore, useStatisticsStore),
+        ...mapStores(useSettingsStore, useAccountsStore, useStatisticsStore),
         title() {
             if (this.modifyDefault) {
                 return 'Default Account Filter';
@@ -188,7 +189,7 @@ export default {
             }
 
             if (self.modifyDefault) {
-                self.filterAccountIds = copyObjectTo(self.$settings.getStatisticsDefaultAccountFilter(), allAccountIds);
+                self.filterAccountIds = copyObjectTo(self.settingsStore.appSettings.statistics.defaultAccountFilter, allAccountIds);
             } else {
                 self.filterAccountIds = copyObjectTo(self.statisticsStore.transactionStatisticsFilter.filterAccountIds, allAccountIds);
             }
@@ -222,7 +223,7 @@ export default {
             }
 
             if (self.modifyDefault) {
-                self.$settings.setStatisticsDefaultAccountFilter(filteredAccountIds);
+                self.settingsStore.setStatisticsDefaultAccountFilter(filteredAccountIds);
             } else {
                 self.statisticsStore.updateTransactionStatisticsFilter({
                     filterAccountIds: filteredAccountIds

src/views/mobile/statistics/CategoryFilterSettingsPage.vue

@@ -124,6 +124,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 import { useStatisticsStore } from '@/stores/statistics.js';
 
@@ -149,7 +150,7 @@ export default {
         }
     },
     computed: {
-        ...mapStores(useTransactionCategoriesStore, useStatisticsStore),
+        ...mapStores(useSettingsStore, useTransactionCategoriesStore, useStatisticsStore),
 
         title() {
             if (this.modifyDefault) {
@@ -221,7 +222,7 @@ export default {
             }
 
             if (self.modifyDefault) {
-                self.filterCategoryIds = copyObjectTo(self.$settings.getStatisticsDefaultTransactionCategoryFilter(), allCategoryIds);
+                self.filterCategoryIds = copyObjectTo(self.settingsStore.appSettings.statistics.defaultTransactionCategoryFilter, allCategoryIds);
             } else {
                 self.filterCategoryIds = copyObjectTo(self.statisticsStore.transactionStatisticsFilter.filterCategoryIds, allCategoryIds);
             }
@@ -255,7 +256,7 @@ export default {
             }
 
             if (self.modifyDefault) {
-                self.$settings.setStatisticsDefaultTransactionCategoryFilter(filteredCategoryIds);
+                self.settingsStore.setStatisticsDefaultTransactionCategoryFilter(filteredCategoryIds);
             } else {
                 self.statisticsStore.updateTransactionStatisticsFilter({
                     filterCategoryIds: filteredCategoryIds

src/views/mobile/statistics/SettingsPage.vue

@@ -50,11 +50,15 @@
 </template>
 
 <script>
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+
 import datetimeConstants from '@/consts/datetime.js';
 import statisticsConstants from '@/consts/statistics.js';
 
 export default {
     computed: {
+        ...mapStores(useSettingsStore),
         allChartTypes() {
             return statisticsConstants.allChartTypes;
         },
@@ -83,34 +87,34 @@ export default {
         },
         defaultChartType: {
             get: function () {
-                return this.$settings.getStatisticsDefaultChartType();
+                return this.settingsStore.appSettings.statistics.defaultChartType;
             },
             set: function (value) {
-                this.$settings.setStatisticsDefaultChartType(value);
+                this.settingsStore.setStatisticsDefaultChartType(value);
             }
         },
         defaultChartDataType: {
             get: function () {
-                return this.$settings.getStatisticsDefaultChartDataType();
+                return this.settingsStore.appSettings.statistics.defaultChartDataType;
             },
             set: function (value) {
-                this.$settings.setStatisticsDefaultChartDataType(value);
+                this.settingsStore.setStatisticsDefaultChartDataType(value);
             }
         },
         defaultDateRange: {
             get: function () {
-                return this.$settings.getStatisticsDefaultDateRange();
+                return this.settingsStore.appSettings.statistics.defaultDataRangeType;
             },
             set: function (value) {
-                this.$settings.setStatisticsDefaultDateRange(value);
+                this.settingsStore.setStatisticsDefaultDateRange(value);
             }
         },
         defaultSortingType: {
             get: function () {
-                return this.$settings.getStatisticsSortingType();
+                return this.settingsStore.appSettings.statistics.defaultSortingType;
             },
             set: function (value) {
-                this.$settings.setStatisticsSortingType(value);
+                this.settingsStore.setStatisticsSortingType(value);
             }
         }
     }

src/views/mobile/statistics/TransactionPage.vue

@@ -251,6 +251,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
@@ -273,12 +274,9 @@ export default {
         'f7router'
     ],
     data() {
-        const self = this;
-
         return {
             loading: true,
             loadingError: null,
-            showAccountBalance: self.$settings.isShowAccountBalance(),
             showChartDataTypePopover: false,
             showSortingTypePopover: false,
             showDatePopover: false,
@@ -287,7 +285,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useUserStore, useAccountsStore, useTransactionCategoriesStore, useStatisticsStore),
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useStatisticsStore),
         defaultCurrency() {
             return this.userStore.currentUserDefaultCurrency;
         },
@@ -323,6 +321,9 @@ export default {
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
+        showAccountBalance() {
+            return this.settingsStore.appSettings.showAccountBalance;
+        },
         totalAmountName() {
             if (this.query.chartDataType === this.allChartDataTypes.IncomeByAccount.type
                 || this.query.chartDataType === this.allChartDataTypes.IncomeByPrimaryCategory.type
@@ -431,25 +432,25 @@ export default {
     created() {
         const self = this;
 
-        let defaultChartType = self.$settings.getStatisticsDefaultChartType();
+        let defaultChartType = self.settingsStore.appSettings.statistics.defaultChartType;
 
         if (defaultChartType !== self.allChartTypes.Pie && defaultChartType !== self.allChartTypes.Bar) {
             defaultChartType = statisticsConstants.defaultChartType;
         }
 
-        let defaultChartDataType = self.$settings.getStatisticsDefaultChartDataType();
+        let defaultChartDataType = self.settingsStore.appSettings.statistics.defaultChartDataType;
 
         if (defaultChartDataType < self.allChartDataTypes.ExpenseByAccount.type || defaultChartDataType > self.allChartDataTypes.AccountTotalLiabilities.type) {
             defaultChartDataType = statisticsConstants.defaultChartDataType;
         }
 
-        let defaultDateRange = self.$settings.getStatisticsDefaultDateRange();
+        let defaultDateRange = self.settingsStore.appSettings.statistics.defaultDataRangeType;
 
         if (defaultDateRange < self.allDateRanges.All.type || defaultDateRange >= self.allDateRanges.Custom.type) {
             defaultDateRange = statisticsConstants.defaultDataRangeType;
         }
 
-        let defaultSortType = self.$settings.getStatisticsSortingType();
+        let defaultSortType = self.settingsStore.appSettings.statistics.defaultSortingType;
 
         if (defaultSortType < self.allSortingTypes.Amount.type || defaultSortType > self.allSortingTypes.Name.type) {
             defaultSortType = statisticsConstants.defaultSortingType;
@@ -463,8 +464,8 @@ export default {
             endTime: dateRange ? dateRange.maxTime : undefined,
             chartType: defaultChartType,
             chartDataType: defaultChartDataType,
-            filterAccountIds: self.$settings.getStatisticsDefaultAccountFilter() || {},
-            filterCategoryIds: self.$settings.getStatisticsDefaultTransactionCategoryFilter() || {},
+            filterAccountIds: self.settingsStore.appSettings.statistics.defaultAccountFilter || {},
+            filterCategoryIds: self.settingsStore.appSettings.statistics.defaultTransactionCategoryFilter || {},
             sortingType: defaultSortType,
         });
 

src/views/mobile/transactions/EditPage.vue

@@ -303,7 +303,7 @@
                 <f7-actions-button v-if="mode !== 'view'" @click="updateGeoLocation(true)">{{ $t('Update Geographic Location') }}</f7-actions-button>
                 <f7-actions-button v-if="mode !== 'view'" @click="clearGeoLocation">{{ $t('Clear Geographic Location') }}</f7-actions-button>
             </f7-actions-group>
-            <f7-actions-group v-if="$settings.getMapProvider()">
+            <f7-actions-group v-if="mapProvider">
                 <f7-actions-button :class="{ 'disabled': !transaction.geoLocation }" @click="showGeoLocationMapSheet = true">{{ $t('Show on the map') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
@@ -331,6 +331,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
@@ -367,6 +368,7 @@ import {
     getTransactionPrimaryCategoryName,
     getTransactionSecondaryCategoryName
 } from '@/lib/category.js';
+import { getMapProvider } from '@/lib/server_settings.js';
 
 export default {
     props: [
@@ -375,9 +377,10 @@ export default {
     ],
     data() {
         const self = this;
+        const settingsStore = useSettingsStore();
         const query = self.f7route.query;
         const now = getCurrentUnixTime();
-        const currentTimezone = self.$locale.getTimezone();
+        const currentTimezone = settingsStore.appSettings.timeZone;
 
         let defaultType = transactionConstants.allTransactionTypes.Expense;
 
@@ -412,7 +415,6 @@ export default {
             geoLocationStatus: null,
             submitting: false,
             isSupportGeoLocation: !!navigator.geolocation,
-            showAccountBalance: self.$settings.isShowAccountBalance(),
             showGeoLocationActionSheet: false,
             showMoreActionSheet: false,
             showSourceAmountSheet: false,
@@ -426,7 +428,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useExchangeRatesStore),
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useExchangeRatesStore),
         title() {
             if (this.mode === 'add') {
                 return 'Add Transaction';
@@ -672,6 +674,12 @@ export default {
         allowedMaxAmount() {
             return transactionConstants.maxAmount;
         },
+        showAccountBalance() {
+            return this.settingsStore.appSettings.showAccountBalance;
+        },
+        mapProvider() {
+            return getMapProvider();
+        },
         inputIsEmpty() {
             return !!this.inputEmptyProblemMessage;
         },
@@ -898,7 +906,7 @@ export default {
         onPageAfterIn() {
             this.$routeBackOnError(this.f7router, 'loadingError');
 
-            if (this.$settings.isAutoGetCurrentGeoLocation() && this.mode === 'add'
+            if (this.settingsStore.appSettings.autoGetCurrentGeoLocation && this.mode === 'add'
                 && !this.geoLocationStatus && !this.transaction.geoLocation) {
                 this.updateGeoLocation(false);
             }

src/views/mobile/transactions/ListPage.vue

@@ -413,6 +413,7 @@
 
 <script>
 import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 import { useAccountsStore } from '@/stores/account.js';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
@@ -441,14 +442,11 @@ export default {
         'f7router'
     ],
     data() {
-        const self = this;
-
         return {
             loading: true,
             loadingError: null,
             loadingMore: false,
             transactionToDelete: null,
-            showTotalAmountInTransactionListPage: self.$settings.isShowTotalAmountInTransactionListPage(),
             showDatePopover: false,
             showTypePopover: false,
             showCategoryPopover: false,
@@ -458,7 +456,7 @@ export default {
         };
     },
     computed: {
-        ...mapStores(useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionsStore),
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionsStore),
         defaultCurrency() {
             if (this.query.accountId && this.query.accountId !== '0') {
                 const account = this.allAccounts[this.query.accountId];
@@ -551,6 +549,9 @@ export default {
         },
         allDateRanges() {
             return datetimeConstants.allDateRanges;
+        },
+        showTotalAmountInTransactionListPage() {
+            return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
         }
     },
     created() {

src/views/mobile/users/DataManagementPage.vue

@@ -61,6 +61,7 @@ import { useRootStore } from '@/stores/index.js';
 import { useUserStore } from '@/stores/user.js';
 
 import { appendThousandsSeparator } from '@/lib/common.js';
+import { isDataExportingEnabled } from '@/lib/server_settings.js';
 
 export default {
     props: [
@@ -96,7 +97,7 @@ export default {
             };
         },
         isDataExportingEnabled() {
-            return this.$settings.isDataExportingEnabled();
+            return isDataExportingEnabled();
         },
         exportFileName() {
             const nickname = this.userStore.currentUserNickname;