migrate signup page to composition API and typescript

src/components/desktop/StepsBar.vue

@@ -46,7 +46,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-interface StepBarItem {
+export interface StepBarItem {
     name: string;
     title: string;
     subTitle: string;

src/consts/currency.ts

@@ -1,12 +1,4 @@
-export interface CurrencyInfo {
+import type { CurrencyInfo } from '@/core/currency.ts';
-    readonly code: string,
-    readonly fraction?: number,
-    readonly symbol?: {
-        readonly normal: string,
-        readonly plural?: string
-    },
-    readonly unit: string
-}
 
 // ISO 4217
 // Reference: https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml

src/core/currency.ts

@@ -1,5 +1,20 @@
 import type { TypeAndName } from './base.ts';
 
+export interface CurrencyInfo {
+    readonly code: string,
+    readonly fraction?: number,
+    readonly symbol?: {
+        readonly normal: string,
+        readonly plural?: string
+    },
+    readonly unit: string
+}
+
+export interface LocalizedCurrencyInfo {
+    readonly currencyCode: string,
+    readonly displayName: string
+}
+
 export enum CurrencyDisplaySymbol {
     None = 0,
     Symbol = 1,

src/lib/common.ts

@@ -1,3 +1,5 @@
+import type { TypeAndDisplayName } from '@/core/base.ts';
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function isFunction(val: unknown): val is Function {
     return typeof(val) === 'function';
@@ -310,6 +312,16 @@ export function getItemByKeyValue<T>(src: Record<string, T>[] | Record<string, R
     return null;
 }
 
+export function findDisplayNameByType(items: TypeAndDisplayName[], type: number): string | null {
+    for (const item of items) {
+        if (item.type === type) {
+            return item.displayName;
+        }
+    }
+
+    return null;
+}
+
 export function getNameByKeyValue<V, N>(src: Record<string, N | V>[] | Record<string, Record<string, N | V>>, value: V, keyField: string | null, nameField: string, defaultName?: N): N | undefined {
     if (isArray(src)) {
         const arr = src as Record<string, N | V>[];

src/locales/helpers.ts

@@ -38,6 +38,7 @@ import {
 } from '@/core/numeral.ts';
 
 import {
+    type LocalizedCurrencyInfo,
     type CurrencyPrependAndAppendText,
     CurrencyDisplayType,
     CurrencySortingType
@@ -615,6 +616,29 @@ export function useI18n() {
         }];
     }
 
+    function getAllCurrencies(): LocalizedCurrencyInfo[] {
+        const allCurrencies: LocalizedCurrencyInfo[] = [];
+
+        for (const currencyCode in ALL_CURRENCIES) {
+            if (!Object.prototype.hasOwnProperty.call(ALL_CURRENCIES, currencyCode)) {
+                continue;
+            }
+
+            const localizedCurrencyInfo: LocalizedCurrencyInfo = {
+                currencyCode: currencyCode,
+                displayName: getCurrencyName(currencyCode)
+            };
+
+            allCurrencies.push(localizedCurrencyInfo);
+        }
+
+        allCurrencies.sort(function(c1, c2) {
+            return c1.displayName.localeCompare(c2.displayName);
+        })
+
+        return allCurrencies;
+    }
+
     function getAllMeridiemIndicators(): LocalizedMeridiemIndicator {
         const allMeridiemIndicators = MeridiemIndicator.values();
         const meridiemIndicatorNames = [];
@@ -653,7 +677,7 @@ export function useI18n() {
         return getAllWeekdayNames('min');
     }
 
-    function getAllWeekDays(firstDayOfWeek: number): TypeAndDisplayName[] {
+    function getAllWeekDays(firstDayOfWeek?: number): TypeAndDisplayName[] {
         const ret: TypeAndDisplayName[] = [];
         const allWeekDays = WeekDay.values();
 
@@ -1323,6 +1347,7 @@ export function useI18n() {
         // get all localized info of specified type
         getAllLanguageOptions,
         getAllEnableDisableOptions,
+        getAllCurrencies,
         getAllMeridiemIndicators,
         getAllLongMonthNames,
         getAllShortMonthNames,

src/views/base/SignupPageBase.ts

@@ -0,0 +1,132 @@
+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 { useUserStore } from '@/stores/user.ts';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
+
+import { CategoryType } from '@/core/category.ts';
+import type { RegisterResponse } from '@/models/auth_response.ts';
+import type { User } from '@/models/user.ts';
+import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
+
+export function useSignupPageBase() {
+    const { tt, getCurrentLanguageTag, getLanguageInfo, setLanguage } = useI18n();
+
+    const rootStore = useRootStore();
+    const settingsStore = useSettingsStore();
+    const userStore = useUserStore();
+    const exchangeRatesStore = useExchangeRatesStore();
+
+    const user = ref<User>(userStore.generateNewUserModel(getCurrentLanguageTag()));
+    const submitting = ref<boolean>(false);
+
+    const currentLocale = computed<string>({
+        get: () => getCurrentLanguageTag(),
+        set: (value: string) => {
+            const isCurrencyDefault = user.value.defaultCurrency === settingsStore.localeDefaultSettings.currency;
+            const isFirstWeekDayDefault = user.value.firstDayOfWeek === settingsStore.localeDefaultSettings.firstDayOfWeek;
+
+            user.value.language = value;
+
+            const localeDefaultSettings = setLanguage(value);
+            settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+            if (isCurrencyDefault) {
+                user.value.defaultCurrency = settingsStore.localeDefaultSettings.currency;
+            }
+
+            if (isFirstWeekDayDefault) {
+                user.value.firstDayOfWeek = settingsStore.localeDefaultSettings.firstDayOfWeek;
+            }
+        },
+    });
+
+    const currentLanguageName = computed<string>(() => {
+        const languageInfo = getLanguageInfo(currentLocale.value);
+
+        if (!languageInfo) {
+            return '';
+        }
+
+        return languageInfo.displayName;
+    });
+
+    const inputEmptyProblemMessage = computed<string>(() => {
+        if (!user.value.username) {
+            return 'Username cannot be blank';
+        } else if (!user.value.password) {
+            return 'Password cannot be blank';
+        } else if (!user.value.confirmPassword) {
+            return 'Password confirmation cannot be blank';
+        } else if (!user.value.email) {
+            return 'Email address cannot be blank';
+        } else if (!user.value.nickname) {
+            return 'Nickname cannot be blank';
+        } else if (!user.value.defaultCurrency) {
+            return 'Default currency cannot be blank';
+        } else {
+            return '';
+        }
+    });
+
+    const inputInvalidProblemMessage = computed<string>(() => {
+        if (user.value.password && user.value.confirmPassword && user.value.password !== user.value.confirmPassword) {
+            return 'Password and password confirmation do not match';
+        } else {
+            return '';
+        }
+    });
+
+    const inputIsEmpty = computed<boolean>(() => !!inputEmptyProblemMessage.value);
+    const inputIsInvalid = computed<boolean>(() => !!inputInvalidProblemMessage.value);
+
+    function getCategoryTypeName(categoryType: CategoryType): string {
+        switch (categoryType) {
+            case CategoryType.Income:
+                return tt('Income Categories');
+            case CategoryType.Expense:
+                return tt('Expense Categories');
+            case CategoryType.Transfer:
+                return tt('Transfer Categories');
+            default:
+                return tt('Transaction Categories');
+        }
+    }
+
+    function doAfterSignupSuccess(response: RegisterResponse): void {
+        if (response.user) {
+            const localeDefaultSettings = setLanguage(response.user.language);
+            settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+            setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
+        }
+
+        if (settingsStore.appSettings.autoUpdateExchangeRatesData) {
+            exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
+        }
+
+        if (response.notificationContent) {
+            rootStore.setNotificationContent(response.notificationContent);
+        }
+    }
+
+    return {
+        // states
+        user,
+        submitting,
+        // computed states
+        currentLocale,
+        currentLanguageName,
+        inputEmptyProblemMessage,
+        inputInvalidProblemMessage,
+        inputIsEmpty,
+        inputIsInvalid,
+        // functions
+        getCategoryTypeName,
+        doAfterSignupSuccess
+    };
+}

src/views/desktop/SignupPage.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">
@@ -25,10 +25,10 @@
                     <v-window class="mt-5 disable-tab-transition" style="max-width: 700px" v-model="currentStep">
                         <v-form>
                             <v-window-item value="basicSetting">
-                                <h4 class="text-h4 mb-1">{{ $t('Basic Information') }}</h4>
+                                <h4 class="text-h4 mb-1">{{ tt('Basic Information') }}</h4>
                                 <p class="text-sm mt-2 mb-5">
-                                    <span>{{ $t('Already have an account?') }}</span>
+                                    <span>{{ tt('Already have an account?') }}</span>
-                                    <router-link class="ml-1" to="/login">{{ $t('Click here to log in') }}</router-link>
+                                    <router-link class="ml-1" to="/login">{{ tt('Click here to log in') }}</router-link>
                                 </p>
                                 <v-row>
                                     <v-col cols="12" md="6">
@@ -36,8 +36,8 @@
                                             type="text"
                                             autocomplete="username"
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="$t('Username')"
+                                            :label="tt('Username')"
-                                            :placeholder="$t('Your username')"
+                                            :placeholder="tt('Your username')"
                                             v-model="user.username"
                                         />
                                     </v-col>
@@ -47,8 +47,8 @@
                                             type="text"
                                             autocomplete="nickname"
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="$t('Nickname')"
+                                            :label="tt('Nickname')"
-                                            :placeholder="$t('Your nickname')"
+                                            :placeholder="tt('Your nickname')"
                                             v-model="user.nickname"
                                         />
                                     </v-col>
@@ -59,8 +59,8 @@
                                             type="email"
                                             autocomplete="email"
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="$t('E-mail')"
+                                            :label="tt('E-mail')"
-                                            :placeholder="$t('Your email address')"
+                                            :placeholder="tt('Your email address')"
                                             v-model="user.email"
                                         />
                                     </v-col>
@@ -71,8 +71,8 @@
                                             autocomplete="new-password"
                                             type="password"
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="$t('Password')"
+                                            :label="tt('Password')"
-                                            :placeholder="$t('Your password, at least 6 characters')"
+                                            :placeholder="tt('Your password, at least 6 characters')"
                                             v-model="user.password"
                                         />
                                     </v-col>
@@ -81,8 +81,8 @@
                                             autocomplete="new-password"
                                             type="password"
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="$t('Confirm Password')"
+                                            :label="tt('Confirm Password')"
-                                            :placeholder="$t('Re-enter the password')"
+                                            :placeholder="tt('Re-enter the password')"
                                             v-model="user.confirmPassword"
                                         />
                                     </v-col>
@@ -94,8 +94,8 @@
                                             item-title="displayName"
                                             item-value="languageTag"
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="$t('Language')"
+                                            :label="tt('Language')"
-                                            :placeholder="$t('Language')"
+                                            :placeholder="tt('Language')"
                                             :items="allLanguages"
                                             v-model="currentLocale"
                                         />
@@ -109,10 +109,10 @@
                                             item-value="currencyCode"
                                             auto-select-first
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="$t('Default Currency')"
+                                            :label="tt('Default Currency')"
-                                            :placeholder="$t('Default Currency')"
+                                            :placeholder="tt('Default Currency')"
                                             :items="allCurrencies"
-                                            :no-data-text="$t('No results')"
+                                            :no-data-text="tt('No results')"
                                             v-model="user.defaultCurrency"
                                         >
                                             <template #append-inner>
@@ -126,8 +126,8 @@
                                             item-title="displayName"
                                             item-value="type"
                                             :disabled="submitting || navigateToHomePage"
-                                            :label="$t('First Day of Week')"
+                                            :label="tt('First Day of Week')"
-                                            :placeholder="$t('First Day of Week')"
+                                            :placeholder="tt('First Day of Week')"
                                             :items="allWeekDays"
                                             v-model="user.firstDayOfWeek"
                                         />
@@ -136,13 +136,13 @@
                             </v-window-item>
 
                             <v-window-item value="presetCategories" class="signup-preset-categories">
-                                <h4 class="text-h4 mb-1">{{ $t('Preset Categories') }}</h4>
+                                <h4 class="text-h4 mb-1">{{ tt('Preset Categories') }}</h4>
-                                <p class="text-sm mt-2 mb-2">{{ $t('Set whether to use preset transaction categories') }}</p>
+                                <p class="text-sm mt-2 mb-2">{{ tt('Set whether to use preset transaction categories') }}</p>
 
                                 <v-row>
                                     <v-col cols="12" sm="6">
                                         <v-switch class="mb-2" :disabled="submitting || navigateToHomePage"
-                                                  :label="$t('Use Preset Transaction Categories')"
+                                                  :label="tt('Use Preset Transaction Categories')"
                                                   v-model="usePresetCategories"/>
                                     </v-col>
                                     <v-col cols="12" sm="6" class="text-right-sm">
@@ -198,7 +198,7 @@
                             </v-window-item>
 
                             <v-window-item value="finalResult" v-if="finalResultMessage">
-                                <h4 class="text-h4 mb-1">{{ $t('Registration Completed') }}</h4>
+                                <h4 class="text-h4 mb-1">{{ tt('Registration Completed') }}</h4>
                                 <p class="my-5">{{ finalResultMessage }}</p>
                             </v-window-item>
                         </v-form>
@@ -208,23 +208,23 @@
                         <v-btn :color="(currentStep === 'basicSetting' || currentStep === 'finalResult') ? 'default' : 'primary'"
                                :disabled="currentStep === 'basicSetting' || currentStep === 'finalResult' || submitting || navigateToHomePage"
                                :prepend-icon="icons.previous"
-                               @click="switchToPreviousTab">{{ $t('Previous') }}</v-btn>
+                               @click="switchToPreviousTab">{{ tt('Previous') }}</v-btn>
                         <v-btn :color="(currentStep === 'presetCategories' || currentStep === 'finalResult') ? 'secondary' : 'primary'"
                                :disabled="currentStep === 'presetCategories' || currentStep === 'finalResult' || submitting || navigateToHomePage"
                                :append-icon="icons.next"
                                @click="switchToNextTab"
-                               v-if="currentStep === 'basicSetting'">{{ $t('Next') }}</v-btn>
+                               v-if="currentStep === 'basicSetting'">{{ tt('Next') }}</v-btn>
                         <v-btn color="teal"
                                :disabled="submitting || navigateToHomePage"
                                :append-icon="!submitting ? icons.submit : null"
                                @click="submit"
                                v-if="currentStep === 'presetCategories'">
-                            {{ $t('Submit') }}
+                            {{ tt('Submit') }}
                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
                         </v-btn>
                         <v-btn :append-icon="icons.next"
                                @click="navigateToLogin"
-                               v-if="currentStep === 'finalResult'">{{ $t('Continue') }}</v-btn>
+                               v-if="currentStep === 'finalResult'">{{ tt('Continue') }}</v-btn>
                     </div>
                 </v-card>
             </v-col>
@@ -234,22 +234,28 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+import type { StepBarItem } from '@/components/desktop/StepsBar.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import { mapStores } from 'pinia';
+import type { LanguageOption } from '@/locales/index.ts';
-import { useRootStore } from '@/stores/index.js';
+import { useI18n } from '@/locales/helpers.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
+import { useSignupPageBase } from '@/views/base/SignupPageBase.ts';
-import { useUserStore } from '@/stores/user.ts';
-import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
-import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
+import { useRootStore } from '@/stores/index.js';
-import { CategoryType } from '@/core/category.ts';
+
+import type { PartialRecord, TypeAndDisplayName } from '@/core/base.ts';
+import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
+import { type LocalizedPresetCategory, CategoryType } from '@/core/category.ts';
 import { ThemeType } from '@/core/theme.ts';
+import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
+
 import { categorizedArrayToPlainArray } from '@/lib/common.ts';
 import { isUserLogined } from '@/lib/userstate.ts';
-import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
 import {
     mdiArrowLeft,
@@ -257,256 +263,162 @@ import {
     mdiCheck
 } from '@mdi/js';
 
-export default {
+type SnackBarType = InstanceType<typeof SnackBar>;
-    data() {
-        const userStore = useUserStore();
-        const newUser = userStore.generateNewUserModel(this.$locale.getCurrentLanguageTag());
 
-        return {
+const router = useRouter();
-            user: newUser,
+const theme = useTheme();
-            currentStep: 'basicSetting',
-            submitting: false,
-            usePresetCategories: false,
-            finalResultMessage: null,
-            navigateToHomePage: false,
-            icons: {
-                previous: mdiArrowLeft,
-                next: mdiArrowRight,
-                submit: mdiCheck
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useTransactionCategoriesStore, useExchangeRatesStore),
-        ezBookkeepingLogoPath() {
-            return APPLICATION_LOGO_PATH;
-        },
-        allLanguages() {
-            return this.$locale.getAllLanguageInfoArray(false);
-        },
-        allCurrencies() {
-            return this.$locale.getAllCurrencies();
-        },
-        allWeekDays() {
-            return this.$locale.getAllWeekDays();
-        },
-        allPresetCategories() {
-            return this.$locale.getAllTransactionDefaultCategories(0, this.currentLocale);
-        },
-        currentLocale: {
-            get: function () {
-                return this.$locale.getCurrentLanguageTag();
-            },
-            set: function (value) {
-                const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.localeDefaultSettings.currency;
-                const isFirstWeekDayDefault = this.user.firstDayOfWeek === this.settingsStore.localeDefaultSettings.firstDayOfWeek;
 
-                this.user.language = value;
+const { tt, getAllLanguageOptions, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories } = useI18n();
 
-                const localeDefaultSettings = this.$locale.setLanguage(value);
+const {
-                this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+    user,
+    submitting,
+    currentLocale,
+    currentLanguageName,
+    inputEmptyProblemMessage,
+    inputInvalidProblemMessage,
+    getCategoryTypeName,
+    doAfterSignupSuccess
+} = useSignupPageBase();
 
-                if (isCurrencyDefault) {
+const rootStore = useRootStore();
-                    this.user.defaultCurrency = this.settingsStore.localeDefaultSettings.currency;
-                }
 
-                if (isFirstWeekDayDefault) {
+const icons = {
-                    this.user.firstDayOfWeek = this.settingsStore.localeDefaultSettings.firstDayOfWeek;
+    previous: mdiArrowLeft,
-                }
+    next: mdiArrowRight,
-            }
+    submit: mdiCheck
-        },
+};
-        isDarkMode() {
-            return this.globalTheme.global.name.value === ThemeType.Dark;
-        },
-        currentLanguageName() {
-            const languageInfo = this.$locale.getLanguageInfo(this.currentLocale);
 
-            if (!languageInfo) {
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
-                return '';
-            }
 
-            return languageInfo.displayName;
+const currentStep = ref<string>('basicSetting');
-        },
+const usePresetCategories = ref<boolean>(false);
-        allSteps() {
+const finalResultMessage = ref<string | null>(null);
-            const allSteps = [
+const navigateToHomePage = ref<boolean>(false);
-                {
-                    name: 'basicSetting',
-                    title: this.$t('User Information'),
-                    subTitle: this.$t('Basic Information')
-                },
-                {
-                    name: 'presetCategories',
-                    title: this.$t('Transaction Categories'),
-                    subTitle: this.$t('Preset Categories')
-                }
-            ];
 
-            if (this.finalResultMessage) {
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
-                allSteps.push({
+const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
-                    name: 'finalResult',
+const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
-                    title: this.$t('Complete'),
+const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(0, currentLocale.value));
-                    subTitle: this.$t('Registration Completed')
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
-                });
-            }
 
-            return allSteps;
+const allSteps = computed<StepBarItem[]>(() => {
+    const allSteps = [
+        {
+            name: 'basicSetting',
+            title: tt('User Information'),
+            subTitle: tt('Basic Information')
         },
-        inputIsEmpty() {
+        {
-            return !!this.inputEmptyProblemMessage;
+            name: 'presetCategories',
-        },
+            title: tt('Transaction Categories'),
-        inputIsInvalid() {
+            subTitle: tt('Preset Categories')
-            return !!this.inputInvalidProblemMessage;
-        },
-        inputEmptyProblemMessage() {
-            if (!this.user.username) {
-                return 'Username cannot be blank';
-            } else if (!this.user.nickname) {
-                return 'Nickname cannot be blank';
-            } else if (!this.user.email) {
-                return 'Email address cannot be blank';
-            } else if (!this.user.password) {
-                return 'Password cannot be blank';
-            } else if (!this.user.confirmPassword) {
-                return 'Password confirmation cannot be blank';
-            } else if (!this.user.defaultCurrency) {
-                return 'Default currency cannot be blank';
-            } else {
-                return null;
-            }
-        },
-        inputInvalidProblemMessage() {
-            if (this.user.password && this.user.confirmPassword && this.user.password !== this.user.confirmPassword) {
-                return 'Password and password confirmation do not match';
-            } else {
-                return null;
-            }
         }
-    },
+    ];
-    setup() {
-        const theme = useTheme();
 
-        return {
+    if (finalResultMessage.value) {
-            globalTheme: theme
+        allSteps.push({
-        };
+            name: 'finalResult',
-    },
+            title: tt('Complete'),
-    methods: {
+            subTitle: tt('Registration Completed')
-        switchToTab(tabName) {
+        });
-            if (this.submitting || this.currentStep === 'finalResult' || this.navigateToHomePage) {
+    }
-                return;
-            }
 
-            if (tabName === 'basicSetting') {
+    return allSteps;
-                this.currentStep = 'basicSetting';
+});
-            } else if (tabName === 'presetCategories') {
-                const problemMessage = this.inputEmptyProblemMessage || this.inputInvalidProblemMessage;
 
-                if (problemMessage) {
+function switchToTab(tabName: string): void {
-                    this.$refs.snackbar.showMessage(problemMessage);
+    if (submitting.value || currentStep.value === 'finalResult' || navigateToHomePage.value) {
-                    return;
+        return;
-                }
+    }
 
-                this.currentStep = 'presetCategories';
+    if (tabName === 'basicSetting') {
-            }
+        currentStep.value = 'basicSetting';
-        },
+    } else if (tabName === 'presetCategories') {
-        switchToPreviousTab() {
+        const problemMessage = inputEmptyProblemMessage.value || inputInvalidProblemMessage.value;
-            this.switchToTab('basicSetting');
-        },
-        switchToNextTab() {
-            this.switchToTab('presetCategories');
-        },
-        submit() {
-            const self = this;
 
-            const problemMessage = self.inputEmptyProblemMessage || self.inputInvalidProblemMessage;
+        if (problemMessage) {
-
+            snackbar.value?.showMessage(problemMessage);
-            if (problemMessage) {
+            return;
-                self.$refs.snackbar.showMessage(problemMessage);
-                return;
-            }
-
-            self.navigateToHomePage = false;
-            self.submitting = true;
-
-            let presetCategories = [];
-
-            if (self.usePresetCategories) {
-                presetCategories = categorizedArrayToPlainArray(self.allPresetCategories);
-            }
-
-            self.rootStore.register({
-                user: self.user,
-                presetCategories: presetCategories
-            }).then(response => {
-                if (!isUserLogined()) {
-                    self.submitting = false;
-
-                    if (self.usePresetCategories && !response.presetCategoriesSaved) {
-                        self.finalResultMessage = self.$t('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
-                        self.currentStep = 'finalResult';
-                    } else if (response.needVerifyEmail) {
-                        self.finalResultMessage = self.$t('You have been successfully registered. An account activation link has been sent to your email address, please activate your account first.');
-                        self.currentStep = 'finalResult';
-                    } else {
-                        self.$refs.snackbar.showMessage('You have been successfully registered');
-                        self.navigateToHomePage = true;
-                    }
-
-                    return;
-                }
-
-                if (response.user) {
-                    const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                    setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
-                }
-
-                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
-                    self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
-                }
-
-                if (response.notificationContent) {
-                    self.rootStore.setNotificationContent(response.notificationContent);
-                }
-
-                self.submitting = false;
-
-                if (self.usePresetCategories && !response.presetCategoriesSaved) {
-                    self.$refs.snackbar.showMessage('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
-                } else {
-                    self.$refs.snackbar.showMessage('You have been successfully registered');
-                    self.$router.replace('/');
-                }
-
-                self.navigateToHomePage = true;
-            }).catch(error => {
-                self.submitting = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        navigateToLogin() {
-            this.$router.push('/');
-        },
-        onSnackbarShowStateChanged(newValue) {
-            if (!newValue && this.navigateToHomePage) {
-                this.$router.replace('/');
-            }
-        },
-        getCategoryTypeName(categoryType) {
-            switch (categoryType) {
-                case CategoryType.Income.toString():
-                    return this.$t('Income Categories');
-                case CategoryType.Expense.toString():
-                    return this.$t('Expense Categories');
-                case CategoryType.Transfer.toString():
-                    return this.$t('Transfer Categories');
-                default:
-                    return this.$t('Transaction Categories');
-            }
         }
+
+        currentStep.value = 'presetCategories';
+    }
+}
+
+function switchToPreviousTab(): void {
+    switchToTab('basicSetting');
+}
+
+function switchToNextTab(): void {
+    switchToTab('presetCategories');
+}
+
+function submit(): void {
+    const problemMessage = inputEmptyProblemMessage.value || inputInvalidProblemMessage.value;
+
+    if (problemMessage) {
+        snackbar.value?.showMessage(problemMessage);
+        return;
+    }
+
+    navigateToHomePage.value = false;
+    submitting.value = true;
+
+    let presetCategories: LocalizedPresetCategory[] = [];
+
+    if (usePresetCategories.value) {
+        presetCategories = categorizedArrayToPlainArray(allPresetCategories.value);
+    }
+
+    rootStore.register({
+        user: user.value,
+        presetCategories: presetCategories
+    }).then(response => {
+        if (!isUserLogined()) {
+            submitting.value = false;
+
+            if (usePresetCategories.value && !response.presetCategoriesSaved) {
+                finalResultMessage.value = tt('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
+                currentStep.value = 'finalResult';
+            } else if (response.needVerifyEmail) {
+                finalResultMessage.value = tt('You have been successfully registered. An account activation link has been sent to your email address, please activate your account first.');
+                currentStep.value = 'finalResult';
+            } else {
+                snackbar.value?.showMessage('You have been successfully registered');
+                navigateToHomePage.value = true;
+            }
+
+            return;
+        }
+
+        doAfterSignupSuccess(response);
+        submitting.value = false;
+
+        if (usePresetCategories.value && !response.presetCategoriesSaved) {
+            snackbar.value?.showMessage('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
+        } else {
+            snackbar.value?.showMessage('You have been successfully registered');
+            router.replace('/');
+        }
+
+        navigateToHomePage.value = true;
+    }).catch(error => {
+        submitting.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function navigateToLogin(): void {
+    router.push('/');
+}
+
+function onSnackbarShowStateChanged(newValue: boolean): void {
+    if (!newValue && navigateToHomePage.value) {
+        router.replace('/');
     }
 }
 </script>

src/views/mobile/SignupPage.vue

@@ -1,10 +1,10 @@
 <template>
     <f7-page>
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t('Sign Up')"></f7-nav-title>
+            <f7-nav-title :title="tt('Sign Up')"></f7-nav-title>
             <f7-nav-right>
-                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Submit')" @click="submit"></f7-link>
+                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt('Submit')" @click="submit"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -13,8 +13,8 @@
                 type="text"
                 autocomplete="username"
                 clear-button
-                :label="$t('Username')"
+                :label="tt('Username')"
-                :placeholder="$t('Your username')"
+                :placeholder="tt('Your username')"
                 v-model:value="user.username"
             ></f7-list-input>
 
@@ -22,8 +22,8 @@
                 type="password"
                 autocomplete="new-password"
                 clear-button
-                :label="$t('Password')"
+                :label="tt('Password')"
-                :placeholder="$t('Your password, at least 6 characters')"
+                :placeholder="tt('Your password, at least 6 characters')"
                 v-model:value="user.password"
             ></f7-list-input>
 
@@ -31,8 +31,8 @@
                 type="password"
                 autocomplete="new-password"
                 clear-button
-                :label="$t('Confirm Password')"
+                :label="tt('Confirm Password')"
-                :placeholder="$t('Re-enter the password')"
+                :placeholder="tt('Re-enter the password')"
                 v-model:value="user.confirmPassword"
             ></f7-list-input>
 
@@ -40,8 +40,8 @@
                 type="email"
                 autocomplete="email"
                 clear-button
-                :label="$t('E-mail')"
+                :label="tt('E-mail')"
-                :placeholder="$t('Your email address')"
+                :placeholder="tt('Your email address')"
                 v-model:value="user.email"
             ></f7-list-input>
 
@@ -49,21 +49,21 @@
                 type="text"
                 autocomplete="nickname"
                 clear-button
-                :label="$t('Nickname')"
+                :label="tt('Nickname')"
-                :placeholder="$t('Your nickname')"
+                :placeholder="tt('Your nickname')"
                 v-model:value="user.nickname"
             ></f7-list-input>
 
-            <f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
+            <f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="tt(inputInvalidProblemMessage)"></f7-list-item>
         </f7-list>
 
         <f7-list strong inset dividers class="margin-vertical">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :key="currentLocale + '_lang'"
-                :header="$t('Language')"
+                :header="tt('Language')"
                 :title="currentLanguageName"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Language'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Language'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Language'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="currentLocale">
                     <option :value="lang.languageTag"
@@ -75,8 +75,8 @@
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :key="currentLocale + '_currency'"
-                :header="$t('Default Currency')"
+                :header="tt('Default Currency')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Default Currency'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Default Currency'), popupCloseLinkText: tt('Done') }"
             >
                 <template #title>
                     <f7-block class="no-padding no-margin">
@@ -94,9 +94,9 @@
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :key="currentLocale + '_firstDayOfWeek'"
-                :header="$t('First Day of Week')"
+                :header="tt('First Day of Week')"
                 :title="currentDayOfWeekName"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('First Day of Week'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('First Day of Week'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="user.firstDayOfWeek">
                     <option :value="weekDay.type"
@@ -107,7 +107,7 @@
         </f7-list>
 
         <f7-list strong inset dividers class="margin-vertical">
-            <f7-list-item :title="$t('Use preset transaction categories')" link="#" @click="showPresetCategories = true">
+            <f7-list-item :title="tt('Use preset transaction categories')" link="#" @click="showPresetCategories = true">
                 <f7-toggle :checked="usePresetCategories" @toggle:change="usePresetCategories = $event"></f7-toggle>
             </f7-list-item>
         </f7-list>
@@ -117,13 +117,13 @@
             <f7-page>
                 <f7-navbar>
                     <f7-nav-left>
-                        <f7-link popup-close :text="$t('Back')"></f7-link>
+                        <f7-link popup-close :text="tt('Back')"></f7-link>
                     </f7-nav-left>
-                    <f7-nav-title :title="$t('Preset Categories')"></f7-nav-title>
+                    <f7-nav-title :title="tt('Preset Categories')"></f7-nav-title>
                     <f7-nav-right>
                         <f7-link icon-f7="ellipsis" @click="showPresetCategoriesMoreActionSheet = true"></f7-link>
-                        <f7-link close @click="usePresetCategories = true; showPresetCategories = false" v-if="!usePresetCategories">{{ $t('Enable') }}</f7-link>
+                        <f7-link close @click="usePresetCategories = true; showPresetCategories = false" v-if="!usePresetCategories">{{ tt('Enable') }}</f7-link>
-                        <f7-link close @click="usePresetCategories = false; showPresetCategories = false" v-if="usePresetCategories">{{ $t('Disable') }}</f7-link>
+                        <f7-link close @click="usePresetCategories = false; showPresetCategories = false" v-if="usePresetCategories">{{ tt('Disable') }}</f7-link>
                     </f7-nav-right>
                 </f7-navbar>
                 <f7-block class="no-padding no-margin"
@@ -156,10 +156,10 @@
 
             <f7-actions close-by-outside-click close-on-escape :opened="showPresetCategoriesMoreActionSheet" @actions:closed="showPresetCategoriesMoreActionSheet = false">
                 <f7-actions-group>
-                    <f7-actions-button @click="showPresetCategoriesChangeLocaleSheet = true">{{ $t('Change Language') }}</f7-actions-button>
+                    <f7-actions-button @click="showPresetCategoriesChangeLocaleSheet = true">{{ tt('Change Language') }}</f7-actions-button>
                 </f7-actions-group>
                 <f7-actions-group>
-                    <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                    <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
                 </f7-actions-group>
             </f7-actions>
 
@@ -174,205 +174,114 @@
     </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 { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
+import { useSignupPageBase } from '@/views/base/SignupPageBase.ts';
+
 import { useRootStore } from '@/stores/index.js';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
-import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
-import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
-import { CategoryType } from '@/core/category.ts';
+import type { PartialRecord, TypeAndDisplayName } from '@/core/base.ts';
-import { getNameByKeyValue, categorizedArrayToPlainArray } from '@/lib/common.ts';
+import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
+import { type LocalizedPresetCategory, CategoryType } from '@/core/category.ts';
+
+import { findDisplayNameByType, categorizedArrayToPlainArray } from '@/lib/common.ts';
 import { isUserLogined } from '@/lib/userstate.ts';
-import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
-export default {
+const props = defineProps<{
-    props: [
+    f7router: Router.Router;
-        'f7router'
+}>();
-    ],
-    data() {
-        const userStore = useUserStore();
-        const newUser = userStore.generateNewUserModel(this.$locale.getCurrentLanguageTag());
 
-        return {
+const { tt, getAllLanguageOptions, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories, getCurrencyName } = useI18n();
-            user: newUser,
+const { showAlert, showToast } = useI18nUIComponents();
-            submitting: false,
-            usePresetCategories: false,
-            showPresetCategories: false,
-            showPresetCategoriesMoreActionSheet: false,
-            showPresetCategoriesChangeLocaleSheet: false
-        };
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useTransactionCategoriesStore, useExchangeRatesStore),
-        allLanguages() {
-            return this.$locale.getAllLanguageInfoArray(false);
-        },
-        allCurrencies() {
-            return this.$locale.getAllCurrencies();
-        },
-        allWeekDays() {
-            return this.$locale.getAllWeekDays();
-        },
-        allPresetCategories() {
-            return this.$locale.getAllTransactionDefaultCategories(0, this.currentLocale);
-        },
-        currentLocale: {
-            get: function () {
-                return this.$locale.getCurrentLanguageTag();
-            },
-            set: function (value) {
-                const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.localeDefaultSettings.currency;
-                const isFirstWeekDayDefault = this.user.firstDayOfWeek === this.settingsStore.localeDefaultSettings.firstDayOfWeek;
 
-                this.user.language = value;
+const {
+    user,
+    submitting,
+    currentLocale,
+    currentLanguageName,
+    inputEmptyProblemMessage,
+    inputInvalidProblemMessage,
+    inputIsEmpty,
+    inputIsInvalid,
+    getCategoryTypeName,
+    doAfterSignupSuccess
+} = useSignupPageBase();
 
-                const localeDefaultSettings = this.$locale.setLanguage(value);
+const rootStore = useRootStore();
-                this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 
-                if (isCurrencyDefault) {
+const usePresetCategories = ref<boolean>(false);
-                    this.user.defaultCurrency = this.settingsStore.localeDefaultSettings.currency;
+const showPresetCategories = ref<boolean>(false);
-                }
+const showPresetCategoriesMoreActionSheet = ref<boolean>(false);
+const showPresetCategoriesChangeLocaleSheet = ref<boolean>(false);
 
-                if (isFirstWeekDayDefault) {
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
-                    this.user.firstDayOfWeek = this.settingsStore.localeDefaultSettings.firstDayOfWeek;
+const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
-                }
+const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
-            }
+const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(0, currentLocale.value));
-        },
+const currentDayOfWeekName = computed<string | null>(() => findDisplayNameByType(allWeekDays.value, user.value.firstDayOfWeek));
-        currentLanguageName() {
-            const languageInfo = this.$locale.getLanguageInfo(this.currentLocale);
 
-            if (!languageInfo) {
+function submit(): void {
-                return '';
+    const router = props.f7router;
-            }
 
-            return languageInfo.displayName;
+    const problemMessage = inputEmptyProblemMessage.value || inputInvalidProblemMessage.value;
-        },
-        currentDayOfWeekName() {
-            return getNameByKeyValue(this.allWeekDays, this.user.firstDayOfWeek, 'type', 'displayName');
-        },
-        inputIsEmpty() {
-            return !!this.inputEmptyProblemMessage;
-        },
-        inputIsInvalid() {
-            return !!this.inputInvalidProblemMessage;
-        },
-        inputEmptyProblemMessage() {
-            if (!this.user.username) {
-                return 'Username cannot be blank';
-            } else if (!this.user.password) {
-                return 'Password cannot be blank';
-            } else if (!this.user.confirmPassword) {
-                return 'Password confirmation cannot be blank';
-            } else if (!this.user.email) {
-                return 'Email address cannot be blank';
-            } else if (!this.user.nickname) {
-                return 'Nickname cannot be blank';
-            } else if (!this.user.defaultCurrency) {
-                return 'Default currency cannot be blank';
-            } else {
-                return null;
-            }
-        },
-        inputInvalidProblemMessage() {
-            if (this.user.password && this.user.confirmPassword && this.user.password !== this.user.confirmPassword) {
-                return 'Password and password confirmation do not match';
-            } else {
-                return null;
-            }
-        }
-    },
-    methods: {
-        submit() {
-            const self = this;
-            const router = self.f7router;
 
-            const problemMessage = self.inputEmptyProblemMessage || self.inputInvalidProblemMessage;
+    if (problemMessage) {
-
+        showAlert(problemMessage);
-            if (problemMessage) {
+        return;
-                self.$alert(problemMessage);
-                return;
-            }
-
-            self.submitting = true;
-            self.$showLoading(() => self.submitting);
-
-            let presetCategories = [];
-
-            if (self.usePresetCategories) {
-                presetCategories = categorizedArrayToPlainArray(self.allPresetCategories);
-            }
-
-            self.rootStore.register({
-                user: self.user,
-                presetCategories: presetCategories
-            }).then(response => {
-                if (!isUserLogined()) {
-                    self.submitting = false;
-                    self.$hideLoading();
-
-                    if (self.usePresetCategories && !response.presetCategoriesSaved) {
-                        self.$toast('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.', 5000);
-                    } else if (response.needVerifyEmail) {
-                        self.$toast('You have been successfully registered. An account activation link has been sent to your email address, please activate your account first.', 5000);
-                    } else {
-                        self.$toast('You have been successfully registered');
-                    }
-
-                    router.navigate('/');
-                    return;
-                }
-
-                if (response.user) {
-                    const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                    setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
-                }
-
-                if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
-                    self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
-                }
-
-                if (response.notificationContent) {
-                    self.rootStore.setNotificationContent(response.notificationContent);
-                }
-
-                self.submitting = false;
-                self.$hideLoading();
-
-                if (self.usePresetCategories && !response.presetCategoriesSaved) {
-                    self.$toast('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
-                } else {
-                    self.$toast('You have been successfully registered');
-                }
-
-                router.navigate('/');
-            }).catch(error => {
-                self.submitting = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        getCurrencyName(currencyCode) {
-            return this.$locale.getCurrencyName(currencyCode);
-        },
-        getCategoryTypeName(categoryType) {
-            switch (categoryType) {
-                case CategoryType.Income.toString():
-                    return this.$t('Income Categories');
-                case CategoryType.Expense.toString():
-                    return this.$t('Expense Categories');
-                case CategoryType.Transfer.toString():
-                    return this.$t('Transfer Categories');
-                default:
-                    return this.$t('Transaction Categories');
-            }
-        }
     }
-};
+
+    submitting.value = true;
+    showLoading(() => submitting.value);
+
+    let presetCategories: LocalizedPresetCategory[] = [];
+
+    if (usePresetCategories.value) {
+        presetCategories = categorizedArrayToPlainArray(allPresetCategories.value);
+    }
+
+    rootStore.register({
+        user: user.value,
+        presetCategories: presetCategories
+    }).then(response => {
+        if (!isUserLogined()) {
+            submitting.value = false;
+            hideLoading();
+
+            if (usePresetCategories.value && !response.presetCategoriesSaved) {
+                showToast('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.', 5000);
+            } else if (response.needVerifyEmail) {
+                showToast('You have been successfully registered. An account activation link has been sent to your email address, please activate your account first.', 5000);
+            } else {
+                showToast('You have been successfully registered');
+            }
+
+            router.navigate('/');
+            return;
+        }
+
+        doAfterSignupSuccess(response);
+        submitting.value = false;
+        hideLoading();
+
+        if (usePresetCategories.value && !response.presetCategoriesSaved) {
+            showToast('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
+        } else {
+            showToast('You have been successfully registered');
+        }
+
+        router.navigate('/');
+    }).catch(error => {
+        submitting.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
 </script>