migrate login page to composition API and typescript

src/lib/server_settings.ts

@@ -1,4 +1,4 @@
-function getServerSetting(key: string): string | number | boolean | undefined | null {
+function getServerSetting(key: string): string | number | boolean | Record<string, string> | undefined | null {
     const settings = window.EZBOOKKEEPING_SERVER_SETTINGS || {};
     return settings[key];
 }
@@ -31,8 +31,8 @@ export function isDataImportingEnabled(): boolean {
     return getServerSetting('i') === 1;
 }
 
-export function getLoginPageTips(): string {
+export function getLoginPageTips(): Record<string, string>{
-    return getServerSetting('lpt') as string;
+    return getServerSetting('lpt') as Record<string, string>;
 }
 
 export function getMapProvider(): string {

src/locales/helpers.ts

@@ -528,6 +528,20 @@ export function useI18n() {
         return textArray.join(separator);
     }
 
+    function getServerTipContent(tipConfig: Record<string, string>): string {
+        if (!tipConfig) {
+            return '';
+        }
+
+        const currentLanguage = getCurrentLanguageTag();
+
+        if (isString(tipConfig[currentLanguage])) {
+            return tipConfig[currentLanguage];
+        }
+
+        return tipConfig['default'] || '';
+    }
+
     function getCurrentLanguageTag(): string {
         return locale.value;
     }
@@ -1298,6 +1312,7 @@ export function useI18n() {
         ti: translateIf,
         te: translateError,
         joinMultiText,
+        getServerTipContent,
         // get current language info
         getCurrentLanguageTag,
         getCurrentLanguageInfo,

src/views/base/LoginPageBase.ts

@@ -0,0 +1,87 @@
+import { ref, computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+// @ts-expect-error the above file is migrating to ts
+import { useRootStore } from '@/stores/index.js';
+import { useSettingsStore } from '@/stores/setting.ts';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import type { AuthResponse } from '@/models/auth_response.ts';
+
+import { getLoginPageTips } from '@/lib/server_settings.ts';
+import { getVersion } from '@/lib/version.ts';
+import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
+
+export function useLoginPageBase() {
+    const { getServerTipContent, setLanguage } = useI18n();
+
+    const rootStore = useRootStore();
+    const settingsStore = useSettingsStore();
+    const exchangeRatesStore = useExchangeRatesStore();
+
+    const version = `v${getVersion()}`;
+
+    const username = ref<string>('');
+    const password = ref<string>('');
+    const passcode = ref<string>('');
+    const backupCode = ref<string>('');
+    const tempToken = ref<string>('');
+    const twoFAVerifyType = ref<string>('passcode');
+
+    const logining = ref<boolean>(false);
+    const verifying = ref<boolean>(false);
+
+    const inputIsEmpty = computed<boolean>(() => !username.value || !password.value);
+    const twoFAInputIsEmpty = computed<boolean>(() => {
+        if (twoFAVerifyType.value === 'backupcode') {
+            return !backupCode.value;
+        } else {
+            return !passcode.value;
+        }
+    });
+
+    const tips = computed<string>(() => getServerTipContent(getLoginPageTips()));
+
+    function changeLanguage(locale: string): void {
+        const localeDefaultSettings = setLanguage(locale);
+        settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+    }
+
+    function doAfterLogin(authResponse: AuthResponse): void {
+        if (authResponse.user) {
+            const localeDefaultSettings = setLanguage(authResponse.user.language);
+            settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+            setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
+        }
+
+        if (settingsStore.appSettings.autoUpdateExchangeRatesData) {
+            exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
+        }
+
+        if (authResponse.notificationContent) {
+            rootStore.setNotificationContent(authResponse.notificationContent);
+        }
+    }
+
+    return {
+        // constants
+        version,
+        // states
+        username,
+        password,
+        passcode,
+        backupCode,
+        tempToken,
+        twoFAVerifyType,
+        logining,
+        verifying,
+        inputIsEmpty,
+        twoFAInputIsEmpty,
+        tips,
+        // functions
+        changeLanguage,
+        doAfterLogin
+    }
+}

src/views/desktop/LoginPage.vue

@@ -2,8 +2,8 @@
     <div class="layout-wrapper">
         <router-link to="/">
             <div class="auth-logo d-flex align-start gap-x-3">
-                <img alt="logo" class="login-page-logo" :src="ezBookkeepingLogoPath" />
+                <img alt="logo" class="login-page-logo" :src="APPLICATION_LOGO_PATH" />
-                <h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
+                <h1 class="font-weight-medium leading-normal text-2xl">{{ tt('global.app.title') }}</h1>
             </div>
         </router-link>
         <v-row no-gutters class="auth-wrapper">
@@ -22,8 +22,8 @@
                 <div class="d-flex align-center justify-center h-100">
                     <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
                         <v-card-text>
-                            <h4 class="text-h4 mb-2">{{ $t('Welcome to ezBookkeeping') }}</h4>
+                            <h4 class="text-h4 mb-2">{{ tt('Welcome to ezBookkeeping') }}</h4>
-                            <p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
+                            <p class="mb-0">{{ tt('Please log in with your ezBookkeeping account') }}</p>
                             <p class="mt-1 mb-0" v-if="tips">{{ tips }}</p>
                         </v-card-text>
 
@@ -36,11 +36,11 @@
                                             autocomplete="username"
                                             autofocus="autofocus"
                                             :disabled="show2faInput || logining || verifying"
-                                            :label="$t('Username')"
+                                            :label="tt('Username')"
-                                            :placeholder="$t('Your username or email')"
+                                            :placeholder="tt('Your username or email')"
                                             v-model="username"
                                             @input="tempToken = ''"
-                                            @keyup.enter="$refs.passwordInput.focus()"
+                                            @keyup.enter="passwordInput?.focus()"
                                         />
                                     </v-col>
 
@@ -50,8 +50,8 @@
                                             ref="passwordInput"
                                             type="password"
                                             :disabled="show2faInput || logining || verifying"
-                                            :label="$t('Password')"
+                                            :label="tt('Password')"
-                                            :placeholder="$t('Your password')"
+                                            :placeholder="tt('Your password')"
                                             v-model="password"
                                             @input="tempToken = ''"
                                             @keyup.enter="login"
@@ -64,8 +64,8 @@
                                             autocomplete="one-time-code"
                                             ref="passcodeInput"
                                             :disabled="logining || verifying"
-                                            :label="$t('Passcode')"
+                                            :label="tt('Passcode')"
-                                            :placeholder="$t('Passcode')"
+                                            :placeholder="tt('Passcode')"
                                             :append-inner-icon="icons.backupCode"
                                             v-model="passcode"
                                             @click:append-inner="twoFAVerifyType = 'backupcode'"
@@ -75,8 +75,8 @@
                                         <v-text-field
                                             type="text"
                                             :disabled="logining || verifying"
-                                            :label="$t('Backup Code')"
+                                            :label="tt('Backup Code')"
-                                            :placeholder="$t('Backup Code')"
+                                            :placeholder="tt('Backup Code')"
                                             :append-inner-icon="icons.passcode"
                                             v-model="backupCode"
                                             @click:append-inner="twoFAVerifyType = 'passcode'"
@@ -88,12 +88,12 @@
                                     <v-col cols="12" class="py-0 mt-1 mb-4">
                                         <div class="d-flex align-center justify-space-between flex-wrap">
                                             <a href="javascript:void(0);" @click="showMobileQrCode = true">
-                                                <span class="nav-item-title">{{ $t('Use on Mobile Device') }}</span>
+                                                <span class="nav-item-title">{{ tt('Use on Mobile Device') }}</span>
                                             </a>
                                             <v-spacer/>
                                             <router-link class="text-primary" to="/forgetpassword"
-                                                         :class="{'disabled': !isUserForgetPasswordEnabled}">
+                                                         :class="{'disabled': !isUserForgetPasswordEnabled()}">
-                                                {{ $t('Forget Password?') }}
+                                                {{ tt('Forget Password?') }}
                                             </router-link>
                                         </div>
                                     </v-col>
@@ -101,21 +101,21 @@
                                     <v-col cols="12">
                                         <v-btn block :disabled="inputIsEmpty || logining || verifying"
                                                @click="login" v-if="!show2faInput">
-                                            {{ $t('Log In') }}
+                                            {{ tt('Log In') }}
                                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="logining"></v-progress-circular>
                                         </v-btn>
                                         <v-btn block :disabled="twoFAInputIsEmpty || logining || verifying"
                                                @click="verify" v-else-if="show2faInput">
-                                            {{ $t('Continue') }}
+                                            {{ tt('Continue') }}
                                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="verifying"></v-progress-circular>
                                         </v-btn>
                                     </v-col>
 
                                     <v-col cols="12" class="text-center text-base">
-                                        <span class="me-1">{{ $t('Don\'t have an account?') }}</span>
+                                        <span class="me-1">{{ tt('Don\'t have an account?') }}</span>
                                         <router-link class="text-primary" to="/signup"
-                                                     :class="{'disabled': !isUserRegistrationEnabled}">
+                                                     :class="{'disabled': !isUserRegistrationEnabled()}">
-                                            {{ $t('Create an account') }}
+                                            {{ tt('Create an account') }}
                                         </router-link>
                                     </v-col>
                                 </v-row>
@@ -167,222 +167,160 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { VTextField } from 'vuetify/components/VTextField';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import { mapStores } from 'pinia';
+import type { LanguageOption } from '@/locales/index.ts';
+import { useI18n } from '@/locales/helpers.ts';
+import { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
+
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { KnownErrorCode } from '@/consts/api.ts';
 import { ThemeType } from '@/core/theme.ts';
-import {
+import { isUserRegistrationEnabled, isUserForgetPasswordEnabled, isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
-    isUserRegistrationEnabled,
-    isUserForgetPasswordEnabled,
-    isUserVerifyEmailEnabled,
-    getLoginPageTips
-} from '@/lib/server_settings.ts';
-import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
 import {
     mdiOnepassword,
     mdiHelpCircleOutline
 } from '@mdi/js';
 
-export default {
+type SnackBarType = InstanceType<typeof SnackBar>;
-    data() {
+
-        return {
+const router = useRouter();
-            username: '',
-            password: '',
-            passcode: '',
-            backupCode: '',
-            tempToken: '',
-            logining: false,
-            verifying: false,
-            show2faInput: false,
-            twoFAVerifyType: 'passcode',
-            showMobileQrCode: false,
-            icons: {
-                passcode: mdiOnepassword,
-                backupCode: mdiHelpCircleOutline
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useExchangeRatesStore),
-        ezBookkeepingLogoPath() {
-            return APPLICATION_LOGO_PATH;
-        },
-        version() {
-            return 'v' + this.$version;
-        },
-        allLanguages() {
-            return this.$locale.getAllLanguageInfoArray(false);
-        },
-        isUserRegistrationEnabled() {
-            return isUserRegistrationEnabled();
-        },
-        isUserForgetPasswordEnabled() {
-            return isUserForgetPasswordEnabled();
-        },
-        tips() {
-            return this.$locale.getServerTipContent(getLoginPageTips());
-        },
-        inputIsEmpty() {
-            return !this.username || !this.password;
-        },
-        twoFAInputIsEmpty() {
-            if (this.twoFAVerifyType === 'backupcode') {
-                return !this.backupCode;
-            } else {
-                return !this.passcode;
-            }
-        },
-        isDarkMode() {
-            return this.globalTheme.global.name.value === ThemeType.Dark;
-        },
-        currentLanguageName() {
-            return this.$locale.getCurrentLanguageDisplayName();
-        },
-        isUserVerifyEmailEnabled() {
-            return isUserVerifyEmailEnabled();
-        }
-    },
-    setup() {
 const theme = useTheme();
 
-        return {
+const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
-            globalTheme: theme
+
+const rootStore = useRootStore();
+
+const {
+    version,
+    username,
+    password,
+    passcode,
+    backupCode,
+    tempToken,
+    twoFAVerifyType,
+    logining,
+    verifying,
+    inputIsEmpty,
+    twoFAInputIsEmpty,
+    tips,
+    changeLanguage,
+    doAfterLogin
+} = useLoginPageBase();
+
+const icons = {
+    passcode: mdiOnepassword,
+    backupCode: mdiHelpCircleOutline
 };
-    },
-    methods: {
-        login() {
-            const self = this;
 
-            if (!self.username) {
+const passwordInput = useTemplateRef<VTextField>('passwordInput');
-                self.$refs.snackbar.showMessage('Username cannot be blank');
+const passcodeInput = useTemplateRef<VTextField>('passcodeInput');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const show2faInput = ref<boolean>(false);
+const showMobileQrCode = ref<boolean>(false);
+
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
+
+function login(): void {
+    if (!username.value) {
+        snackbar.value?.showMessage('Username cannot be blank');
         return;
     }
 
-            if (!self.password) {
+    if (!password.value) {
-                self.$refs.snackbar.showMessage('Password cannot be blank');
+        snackbar.value?.showMessage('Password cannot be blank');
         return;
     }
 
-            if (self.tempToken) {
+    if (tempToken.value) {
-                self.show2faInput = true;
+        show2faInput.value = true;
         return;
     }
 
-            if (self.logining) {
+    if (logining.value) {
         return;
     }
 
-            self.logining = true;
+    logining.value = true;
 
-            self.rootStore.authorize({
+    rootStore.authorize({
-                loginName: self.username,
+        loginName: username.value,
-                password: self.password
+        password: password.value
     }).then(authResponse => {
-                self.logining = false;
+        logining.value = false;
 
         if (authResponse.need2FA) {
-                    self.tempToken = authResponse.token;
+            tempToken.value = authResponse.token;
-                    self.show2faInput = true;
+            show2faInput.value = true;
 
-                    self.$nextTick(() => {
+            nextTick(() => {
-                        if (self.$refs.passcodeInput) {
+                if (passcodeInput.value) {
-                            self.$refs.passcodeInput.focus();
+                    passcodeInput.value.focus();
-                            self.$refs.passcodeInput.select();
+                    passcodeInput.value.select();
                 }
             });
 
             return;
         }
 
-                if (authResponse.user) {
+        doAfterLogin(authResponse);
-                    const localeDefaultSettings = self.$locale.setLanguage(authResponse.user.language);
+        router.replace('/');
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                    setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
-                }
-
-                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
-                    self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
-                }
-
-                if (authResponse.notificationContent) {
-                    self.rootStore.setNotificationContent(authResponse.notificationContent);
-                }
-
-                self.$router.replace('/');
     }).catch(error => {
-                self.logining = false;
+        logining.value = false;
 
-                if (self.isUserVerifyEmailEnabled && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
+        if (isUserVerifyEmailEnabled() && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
-                    self.$router.push(`/verify_email?email=${encodeURIComponent(error.error.context.email)}&emailSent=${error.error.context.hasValidEmailVerifyToken || false}`);
+            router.push(`/verify_email?email=${encodeURIComponent(error.error.context.email)}&emailSent=${error.error.context.hasValidEmailVerifyToken || false}`);
             return;
         }
 
         if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
+            snackbar.value?.showError(error);
         }
     });
-        },
+}
-        verify() {
-            const self = this;
 
-            if (self.twoFAInputIsEmpty || self.verifying) {
+function verify(): void {
+    if (twoFAInputIsEmpty.value || verifying.value) {
         return;
     }
 
-            if (self.twoFAVerifyType === 'passcode' && !self.passcode) {
+    if (twoFAVerifyType.value === 'passcode' && !passcode.value) {
-                self.$refs.snackbar.showMessage('Passcode cannot be blank');
+        snackbar.value?.showMessage('Passcode cannot be blank');
         return;
-            } else if (self.twoFAVerifyType === 'backupcode' && !self.backupCode) {
+    } else if (twoFAVerifyType.value === 'backupcode' && !backupCode.value) {
-                self.$refs.snackbar.showMessage('Backup code cannot be blank');
+        snackbar.value?.showMessage('Backup code cannot be blank');
         return;
     }
 
-            self.verifying = true;
+    verifying.value = true;
 
-            self.rootStore.authorize2FA({
+    rootStore.authorize2FA({
-                token: self.tempToken,
+        token: tempToken.value,
-                passcode: self.twoFAVerifyType === 'passcode' ? self.passcode : null,
+        passcode: twoFAVerifyType.value === 'passcode' ? passcode.value : null,
-                recoveryCode: self.twoFAVerifyType === 'backupcode' ? self.backupCode : null
+        recoveryCode: twoFAVerifyType.value === 'backupcode' ? backupCode.value : null
     }).then(authResponse => {
-                self.verifying = false;
+        verifying.value = false;
 
-                if (authResponse.user) {
+        doAfterLogin(authResponse);
-                    const localeDefaultSettings = self.$locale.setLanguage(authResponse.user.language);
+        router.replace('/');
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                    setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
-                }
-
-                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
-                    self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
-                }
-
-                if (authResponse.notificationContent) {
-                    self.rootStore.setNotificationContent(authResponse.notificationContent);
-                }
-
-                self.$router.replace('/');
     }).catch(error => {
-                self.verifying = false;
+        verifying.value = false;
 
         if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
+            snackbar.value?.showError(error);
         }
     });
-        },
-        changeLanguage(locale) {
-            const localeDefaultSettings = this.$locale.setLanguage(locale);
-            this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-        }
-    }
 }
 </script>

src/views/mobile/LoginPage.vue

@@ -1,8 +1,8 @@
 <template>
     <f7-page no-navbar no-swipeback login-screen hide-toolbar-on-scroll>
         <f7-login-screen-title>
-            <img alt="logo" class="login-page-logo" :src="ezBookkeepingLogoPath" />
+            <img alt="logo" class="login-page-logo" :src="APPLICATION_LOGO_PATH" />
-            <f7-block class="login-page-tile margin-vertical-half">{{ $t('global.app.title') }}</f7-block>
+            <f7-block class="login-page-tile margin-vertical-half">{{ tt('global.app.title') }}</f7-block>
         </f7-login-screen-title>
 
         <f7-list inset v-if="tips">
@@ -14,8 +14,8 @@
                 type="text"
                 autocomplete="username"
                 clear-button
-                :label="$t('Username')"
+                :label="tt('Username')"
-                :placeholder="$t('Your username or email')"
+                :placeholder="tt('Your username or email')"
                 v-model:value="username"
                 @input="tempToken = ''"
             ></f7-list-input>
@@ -23,8 +23,8 @@
                 type="password"
                 autocomplete="current-password"
                 clear-button
-                :label="$t('Password')"
+                :label="tt('Password')"
-                :placeholder="$t('Your password')"
+                :placeholder="tt('Your password')"
                 v-model:value="password"
                 @input="tempToken = ''"
                 @keyup.enter="loginByPressEnter"
@@ -35,22 +35,22 @@
             <f7-list-item>
                 <template #title>
                     <small>
-                        <f7-link external :href="desktopVersionPath">{{ $t('Switch to Desktop Version') }}</f7-link>
+                        <f7-link external :href="getDesktopVersionPath()">{{ tt('Switch to Desktop Version') }}</f7-link>
                     </small>
                 </template>
                 <template #after>
                     <small>
-                        <f7-link :class="{'disabled': !isUserForgetPasswordEnabled}" @click="forgetPasswordEmail = ''; showForgetPasswordSheet = true">{{ $t('Forget Password?') }}</f7-link>
+                        <f7-link :class="{'disabled': !isUserForgetPasswordEnabled()}" @click="forgetPasswordEmail = ''; showForgetPasswordSheet = true">{{ tt('Forget Password?') }}</f7-link>
                     </small>
                 </template>
             </f7-list-item>
         </f7-list>
 
         <f7-list class="margin-vertical-half">
-            <f7-list-button :class="{ 'disabled': inputIsEmpty || logining }" :text="$t('Log In')" @click="login"></f7-list-button>
+            <f7-list-button :class="{ 'disabled': inputIsEmpty || logining }" :text="tt('Log In')" @click="login"></f7-list-button>
             <f7-block-footer>
-                <span>{{ $t('Don\'t have an account?') }}</span>&nbsp;
+                <span>{{ tt('Don\'t have an account?') }}</span>&nbsp;
-                <f7-link :class="{'disabled': !isUserRegistrationEnabled}" href="/signup" :text="$t('Create an account')"></f7-link>
+                <f7-link :class="{'disabled': !isUserRegistrationEnabled()}" href="/signup" :text="tt('Create an account')"></f7-link>
             </f7-block-footer>
             <f7-block-footer class="padding-bottom">
             </f7-block-footer>
@@ -98,7 +98,7 @@
         >
             <f7-page-content>
                 <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div class="ebk-sheet-title"><b>{{ $t('Two-Factor Authentication') }}</b></div>
+                    <div class="ebk-sheet-title"><b>{{ tt('Two-Factor Authentication') }}</b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
                     <f7-list strong class="no-margin">
@@ -110,8 +110,8 @@
                             clear-button
                             class="no-margin no-padding-bottom"
                             v-if="twoFAVerifyType === 'passcode'"
-                            :label="$t('Passcode')"
+                            :label="tt('Passcode')"
-                            :placeholder="$t('Passcode')"
+                            :placeholder="tt('Passcode')"
                             v-model:value="passcode"
                             @keyup.enter="verify"
                         ></f7-list-input>
@@ -121,15 +121,15 @@
                             clear-button
                             class="no-margin no-padding-bottom"
                             v-if="twoFAVerifyType === 'backupcode'"
-                            :label="$t('Backup Code')"
+                            :label="tt('Backup Code')"
-                            :placeholder="$t('Backup Code')"
+                            :placeholder="tt('Backup Code')"
                             v-model:value="backupCode"
                             @keyup.enter="verify"
                         ></f7-list-input>
                     </f7-list>
-                    <f7-button large fill :class="{ 'disabled': twoFAInputIsEmpty || verifying }" :text="$t('Verify')" @click="verify"></f7-button>
+                    <f7-button large fill :class="{ 'disabled': twoFAInputIsEmpty || verifying }" :text="tt('Verify')" @click="verify"></f7-button>
                     <div class="margin-top text-align-center">
-                        <f7-link @click="switch2FAVerifyType" :text="$t(twoFAVerifyTypeSwitchName)"></f7-link>
+                        <f7-link @click="switch2FAVerifyType" :text="tt(twoFAVerifyTypeSwitchName)"></f7-link>
                     </div>
                 </div>
             </f7-page-content>
@@ -142,11 +142,11 @@
             <div class="swipe-handler" style="z-index: 10"></div>
             <f7-page-content>
                 <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div class="ebk-sheet-title"><b>{{ $t('Forget Password?') }}</b></div>
+                    <div class="ebk-sheet-title"><b>{{ tt('Forget Password?') }}</b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
                     <p class="no-margin">
-                        <span>{{ $t('Please enter your email address used for registration and we\'ll send you an email with a reset password link') }}</span>
+                        <span>{{ tt('Please enter your email address used for registration and we\'ll send you an email with a reset password link') }}</span>
                     </p>
                     <f7-list strong class="no-margin">
                         <f7-list-input
@@ -156,22 +156,22 @@
                             floating-label
                             clear-button
                             class="no-margin no-padding-bottom"
-                            :label="$t('E-mail')"
+                            :label="tt('E-mail')"
-                            :placeholder="$t('Your email address')"
+                            :placeholder="tt('Your email address')"
                             v-model:value="forgetPasswordEmail"
                             @keyup.enter="requestResetPassword"
                         ></f7-list-input>
                     </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !forgetPasswordEmail || requestingForgetPassword }" :text="$t('Send Reset Link')" @click="requestResetPassword"></f7-button>
+                    <f7-button large fill :class="{ 'disabled': !forgetPasswordEmail || requestingForgetPassword }" :text="tt('Send Reset Link')" @click="requestResetPassword"></f7-button>
                     <div class="margin-top text-align-center">
-                        <f7-link :class="{ 'disabled': requestingForgetPassword }" @click="showForgetPasswordSheet = false" :text="$t('Cancel')"></f7-link>
+                        <f7-link :class="{ 'disabled': requestingForgetPassword }" @click="showForgetPasswordSheet = false" :text="tt('Cancel')"></f7-link>
                     </div>
                 </div>
             </f7-page-content>
         </f7-sheet>
 
-        <password-input-sheet :title="$t('Verify your email')"
+        <password-input-sheet :title="tt('Verify your email')"
-                              :hint="$t(hasValidEmailVerifyToken ? 'format.misc.accountActivationAndResendValidationEmailTip' : 'format.misc.resendValidationEmailTip', { email: resendVerifyEmail })"
+                              :hint="tt(hasValidEmailVerifyToken ? 'format.misc.accountActivationAndResendValidationEmailTip' : 'format.misc.resendValidationEmailTip', { email: resendVerifyEmail })"
                               :confirm-disabled="requestingResendVerifyEmail"
                               :cancel-disabled="requestingResendVerifyEmail"
                               v-model:show="showVerifyEmailSheet"
@@ -181,299 +181,233 @@
     </f7-page>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import { ref, computed } from 'vue';
+import type { Router } from 'framework7/types';
+
+import type { LanguageOption } from '@/locales/index.ts';
+import { useI18n } from '@/locales/helpers.ts';
+import { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
+
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
 import { KnownErrorCode } from '@/consts/api.ts';
-import {
+import { isUserRegistrationEnabled, isUserForgetPasswordEnabled, isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
-    isUserRegistrationEnabled,
-    isUserForgetPasswordEnabled,
-    isUserVerifyEmailEnabled,
-    getLoginPageTips
-} from '@/lib/server_settings.ts';
 import { getDesktopVersionPath } from '@/lib/version.ts';
-import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
+import { useI18nUIComponents, showLoading, hideLoading, isModalShowing } from '@/lib/ui/mobile.ts';
-import { isModalShowing } from '@/lib/ui/mobile.ts';
 
-export default {
+const props = defineProps<{
-    props: [
+    f7router: Router.Router;
-        'f7router'
+}>();
-    ],
+
-    data() {
+const { tt, getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
-        return {
+const { showAlert, showToast } = useI18nUIComponents();
-            username: '',
+
-            password: '',
+const rootStore = useRootStore();
-            passcode: '',
+
-            backupCode: '',
+const {
-            tempToken: '',
+    version,
-            forgetPasswordEmail: '',
+    username,
-            resendVerifyEmail: '',
+    password,
-            hasValidEmailVerifyToken: false,
+    passcode,
-            currentPasswordForResendVerifyEmail: '',
+    backupCode,
-            logining: false,
+    tempToken,
-            verifying: false,
+    twoFAVerifyType,
-            requestingForgetPassword: false,
+    logining,
-            requestingResendVerifyEmail: false,
+    verifying,
-            show2faSheet: false,
+    inputIsEmpty,
-            showForgetPasswordSheet: false,
+    twoFAInputIsEmpty,
-            showVerifyEmailSheet: false,
+    tips,
-            twoFAVerifyType: 'passcode'
+    changeLanguage,
-        };
+    doAfterLogin
-    },
+} = useLoginPageBase();
-    computed: {
+
-        ...mapStores(useRootStore, useSettingsStore, useExchangeRatesStore),
+const forgetPasswordEmail = ref<string>('');
-        ezBookkeepingLogoPath() {
+const resendVerifyEmail = ref<string>('');
-            return APPLICATION_LOGO_PATH;
+const hasValidEmailVerifyToken = ref<boolean>(false);
-        },
+const currentPasswordForResendVerifyEmail = ref<string>('');
-        version() {
+const requestingForgetPassword = ref<boolean>(false);
-            return 'v' + this.$version;
+const requestingResendVerifyEmail = ref<boolean>(false);
-        },
+const show2faSheet = ref<boolean>(false);
-        desktopVersionPath() {
+const showForgetPasswordSheet = ref<boolean>(false);
-            return getDesktopVersionPath();
+const showVerifyEmailSheet = ref<boolean>(false);
-        },
+
-        allLanguages() {
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
-            return this.$locale.getAllLanguageInfoArray(false);
+const currentLanguageCode = computed<string>(() => getCurrentLanguageTag());
-        },
+const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
-        isUserRegistrationEnabled() {
+const twoFAVerifyTypeSwitchName = computed<string>(() => {
-            return isUserRegistrationEnabled();
+    if (twoFAVerifyType.value === 'backupcode') {
-        },
-        isUserForgetPasswordEnabled() {
-            return isUserForgetPasswordEnabled();
-        },
-        tips() {
-            return this.$locale.getServerTipContent(getLoginPageTips());
-        },
-        inputIsEmpty() {
-            return !this.username || !this.password;
-        },
-        twoFAInputIsEmpty() {
-            if (this.twoFAVerifyType === 'backupcode') {
-                return !this.backupCode;
-            } else {
-                return !this.passcode;
-            }
-        },
-        twoFAVerifyTypeSwitchName() {
-            if (this.twoFAVerifyType === 'backupcode') {
         return 'Use Passcode';
     } else {
         return 'Use Backup Code';
     }
-        },
+});
-        currentLanguageCode() {
-            return this.$locale.getCurrentLanguageTag();
-        },
-        currentLanguageName() {
-            return this.$locale.getCurrentLanguageDisplayName();
-        },
-        isUserVerifyEmailEnabled() {
-            return isUserVerifyEmailEnabled();
-        }
-    },
-    methods: {
-        login() {
-            const self = this;
-            const router = self.f7router;
 
-            if (!this.username) {
+function login(): void {
-                self.$alert('Username cannot be blank');
+    const router = props.f7router;
+
+    if (!username.value) {
+        showAlert('Username cannot be blank');
         return;
     }
 
-            if (!this.password) {
+    if (!password.value) {
-                self.$alert('Password cannot be blank');
+        showAlert('Password cannot be blank');
         return;
     }
 
-            if (self.tempToken) {
+    if (tempToken.value) {
-                self.show2faSheet = true;
+        show2faSheet.value = true;
         return;
     }
 
-            self.logining = true;
+    logining.value = true;
-            self.resendVerifyEmail = '';
+    resendVerifyEmail.value = '';
-            self.hasValidEmailVerifyToken = false;
+    hasValidEmailVerifyToken.value = false;
-            self.currentPasswordForResendVerifyEmail = '';
+    currentPasswordForResendVerifyEmail.value = '';
-            self.$showLoading(() => self.logining);
+    showLoading(() => logining.value);
 
-            self.rootStore.authorize({
+    rootStore.authorize({
-                loginName: self.username,
+        loginName: username.value,
-                password: self.password
+        password: password.value
     }).then(authResponse => {
-                self.logining = false;
+        logining.value = false;
-                self.$hideLoading();
+        hideLoading();
 
         if (authResponse.need2FA) {
-                    self.tempToken = authResponse.token;
+            tempToken.value = authResponse.token;
-                    self.show2faSheet = true;
+            show2faSheet.value = true;
             return;
         }
 
-                if (authResponse.user) {
+        doAfterLogin(authResponse);
-                    const localeDefaultSettings = self.$locale.setLanguage(authResponse.user.language);
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                    setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
-                }
-
-                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
-                    self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
-                }
-
-                if (authResponse.notificationContent) {
-                    self.rootStore.setNotificationContent(authResponse.notificationContent);
-                }
-
         router.refreshPage();
     }).catch(error => {
-                self.logining = false;
+        logining.value = false;
-                self.$hideLoading();
+        hideLoading();
 
-                if (self.isUserVerifyEmailEnabled && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
+        if (isUserVerifyEmailEnabled() && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
-                    self.resendVerifyEmail = error.error.context.email;
+            resendVerifyEmail.value = error.error.context.email;
-                    self.hasValidEmailVerifyToken = error.error.context.hasValidEmailVerifyToken || false;
+            hasValidEmailVerifyToken.value = error.error.context.hasValidEmailVerifyToken || false;
-                    self.currentPasswordForResendVerifyEmail = '';
+            currentPasswordForResendVerifyEmail.value = '';
-                    self.showVerifyEmailSheet = true;
+            showVerifyEmailSheet.value = true;
             return;
         }
 
         if (!error.processed) {
-                    self.$toast(error.message || error);
+            showToast(error.message || error);
         }
     });
-        },
+}
-        loginByPressEnter() {
+
+function loginByPressEnter(): void {
     if (isModalShowing()) {
         return;
     }
 
-            return this.login();
+    return login();
-        },
+}
-        verify() {
-            const self = this;
-            const router = self.f7router;
 
-            if (self.twoFAInputIsEmpty || self.verifying) {
+function verify(): void {
+    const router = props.f7router;
+
+    if (twoFAInputIsEmpty.value || verifying.value) {
         return;
     }
 
-            if (this.twoFAVerifyType === 'passcode' && !this.passcode) {
+    if (twoFAVerifyType.value === 'passcode' && !passcode.value) {
-                self.$alert('Passcode cannot be blank');
+        showAlert('Passcode cannot be blank');
         return;
-            } else if (this.twoFAVerifyType === 'backupcode' && !this.backupCode) {
+    } else if (twoFAVerifyType.value === 'backupcode' && !backupCode.value) {
-                self.$alert('Backup code cannot be blank');
+        showAlert('Backup code cannot be blank');
         return;
     }
 
-            self.verifying = true;
+    verifying.value = true;
-            self.$showLoading(() => self.verifying);
+    showLoading(() => verifying.value);
 
-            self.rootStore.authorize2FA({
+    rootStore.authorize2FA({
-                token: self.tempToken,
+        token: tempToken.value,
-                passcode: self.twoFAVerifyType === 'passcode' ? self.passcode : null,
+        passcode: twoFAVerifyType.value === 'passcode' ? passcode.value : null,
-                recoveryCode: self.twoFAVerifyType === 'backupcode' ? self.backupCode : null
+        recoveryCode: twoFAVerifyType.value === 'backupcode' ? backupCode.value : null
     }).then(authResponse => {
-                self.verifying = false;
+        verifying.value = false;
-                self.$hideLoading();
+        hideLoading();
 
-                if (authResponse.user) {
+        doAfterLogin(authResponse);
-                    const localeDefaultSettings = self.$locale.setLanguage(authResponse.user.language);
+        show2faSheet.value = false;
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                    setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
-                }
-
-                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
-                    self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
-                }
-
-                if (authResponse.notificationContent) {
-                    self.rootStore.setNotificationContent(authResponse.notificationContent);
-                }
-
-                self.show2faSheet = false;
         router.refreshPage();
     }).catch(error => {
-                self.verifying = false;
+        verifying.value = false;
-                self.$hideLoading();
+        hideLoading();
 
         if (!error.processed) {
-                    self.$toast(error.message || error);
+            showToast(error.message || error);
         }
     });
-        },
+}
-        requestResetPassword() {
-            const self = this;
 
-            if (!self.forgetPasswordEmail) {
+function requestResetPassword(): void {
-                self.$alert('Email address cannot be blank');
+    if (!forgetPasswordEmail.value) {
+        showAlert('Email address cannot be blank');
         return;
     }
 
-            self.requestingForgetPassword = true;
+    requestingForgetPassword.value = true;
-            self.$showLoading(() => self.requestingForgetPassword);
+    showLoading(() => requestingForgetPassword.value);
 
-            self.rootStore.requestResetPassword({
+    rootStore.requestResetPassword({
-                email: self.forgetPasswordEmail
+        email: forgetPasswordEmail.value
     }).then(() => {
-                self.requestingForgetPassword = false;
+        requestingForgetPassword.value = false;
-                self.$hideLoading();
+        hideLoading();
 
-                self.$toast('Password reset email has been sent');
+        showToast('Password reset email has been sent');
-                self.showForgetPasswordSheet = false;
+        showForgetPasswordSheet.value = false;
     }).catch(error => {
-                self.requestingForgetPassword = false;
+        requestingForgetPassword.value = false;
-                self.$hideLoading();
+        hideLoading();
 
         if (!error.processed) {
-                    self.$toast(error.message || error);
+            showToast(error.message || error);
         }
     });
-        },
+}
-        requestResendVerifyEmail() {
-            const self = this;
 
-            if (!self.currentPasswordForResendVerifyEmail) {
+function requestResendVerifyEmail(): void {
-                self.$toast('Current password cannot be blank');
+    if (!currentPasswordForResendVerifyEmail.value) {
+        showToast('Current password cannot be blank');
         return;
     }
 
-            self.requestingResendVerifyEmail = true;
+    requestingResendVerifyEmail.value = true;
-            self.$showLoading(() => self.requestingResendVerifyEmail);
+    showLoading(() => requestingResendVerifyEmail.value);
 
-            self.rootStore.resendVerifyEmailByUnloginUser({
+    rootStore.resendVerifyEmailByUnloginUser({
-                email: self.resendVerifyEmail,
+        email: resendVerifyEmail.value,
-                password: self.currentPasswordForResendVerifyEmail
+        password: currentPasswordForResendVerifyEmail.value
     }).then(() => {
-                self.requestingResendVerifyEmail = false;
+        requestingResendVerifyEmail.value = false;
-                self.$hideLoading();
+        hideLoading();
 
-                self.$toast('Validation email has been sent');
+        showToast('Validation email has been sent');
-                self.showVerifyEmailSheet = false;
+        showVerifyEmailSheet.value = false;
     }).catch(error => {
-                self.requestingResendVerifyEmail = false;
+        requestingResendVerifyEmail.value = false;
-                self.$hideLoading();
+        hideLoading();
 
         if (!error.processed) {
-                    self.$toast(error.message || error);
+            showToast(error.message || error);
         }
     });
-        },
+}
-        switch2FAVerifyType() {
+
-            if (this.twoFAVerifyType === 'passcode') {
+function switch2FAVerifyType(): void {
-                this.twoFAVerifyType = 'backupcode';
+    if (twoFAVerifyType.value === 'passcode') {
+        twoFAVerifyType.value = 'backupcode';
     } else {
-                this.twoFAVerifyType = 'passcode';
+        twoFAVerifyType.value = 'passcode';
-            }
-        },
-        changeLanguage(locale) {
-            const localeDefaultSettings = this.$locale.setLanguage(locale);
-            this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
     }
 }
-};
 </script>