migrate user profile page to composition API and typescript

src/core/datetime.ts

@@ -62,6 +62,12 @@ export interface LocalizedMeridiemIndicator {
     readonly displayValues: string[];
 }
 
+export interface LocalizedDateTimeFormat extends TypeAndDisplayName {
+    readonly type: number;
+    readonly format: string;
+    readonly displayName: string;
+}
+
 export interface LocalizedDateRange extends TypeAndDisplayName {
     readonly type: number;
     readonly displayName: string;

src/locales/helper.js

@@ -2,11 +2,10 @@ import moment from 'moment-timezone';
 
 import { DEFAULT_LANGUAGE, ALL_LANGUAGES } from '@/locales/index.ts';
 
-import { Month, WeekDay, MeridiemIndicator, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE } from '@/core/datetime.ts';
+import { Month, WeekDay, MeridiemIndicator, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange } from '@/core/datetime.ts';
 import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
 import { DecimalSeparator, DigitGroupingSymbol, DigitGroupingType } from '@/core/numeral.ts';
-import { CurrencyDisplayType, CurrencySortingType } from '@/core/currency.ts';
+import { CurrencyDisplayType, CurrencySortingType } from '@/core/currency.ts'
-import { PresetAmountColor } from '@/core/color.ts';
 import { AccountType, AccountCategory } from '@/core/account.ts';
 import { CategoryType } from '@/core/category.ts';
 import { TransactionEditScopeType, TransactionTagFilterType } from '@/core/transaction.ts';
@@ -30,7 +29,6 @@ import {
     isPM,
     parseDateFromUnixTime,
     formatUnixTime,
-    formatCurrentTime,
     getYear,
     getTimezoneOffset,
     getTimezoneOffsetMinutes,
@@ -67,42 +65,6 @@ function getLanguageDisplayName(translateFn, languageName) {
     return translateFn(`language.${languageName}`);
 }
 
-function getAllLanguageInfoArray(translateFn, includeSystemDefault) {
-    const ret = [];
-
-    for (const languageTag in ALL_LANGUAGES) {
-        if (!Object.prototype.hasOwnProperty.call(ALL_LANGUAGES, languageTag)) {
-            continue;
-        }
-
-        const languageInfo = ALL_LANGUAGES[languageTag];
-        let displayName = languageInfo.displayName;
-        let languageNameInCurrentLanguage = getLanguageDisplayName(translateFn, languageInfo.name);
-
-        if (languageNameInCurrentLanguage && languageNameInCurrentLanguage !== displayName) {
-            displayName = `${languageNameInCurrentLanguage} (${displayName})`;
-        }
-
-        ret.push({
-            languageTag: languageTag,
-            displayName: displayName
-        });
-    }
-
-    ret.sort(function (lang1, lang2) {
-        return lang1.languageTag.localeCompare(lang2.languageTag);
-    });
-
-    if (includeSystemDefault) {
-        ret.splice(0, 0, {
-            languageTag: '',
-            displayName: translateFn('System Default')
-        });
-    }
-
-    return ret;
-}
-
 function getLanguageInfo(locale) {
     return ALL_LANGUAGES[locale];
 }
@@ -302,26 +264,6 @@ function getAllMinWeekdayNames(translateFn) {
     return ret;
 }
 
-function getAllLongDateFormats(translateFn) {
-    const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
-    return getDateTimeFormats(translateFn, LongDateFormat.all(), LongDateFormat.values(), 'format.longDate', defaultLongDateFormatTypeName, LongDateFormat.Default);
-}
-
-function getAllShortDateFormats(translateFn) {
-    const defaultShortDateFormatTypeName = translateFn('default.shortDateFormat');
-    return getDateTimeFormats(translateFn, ShortDateFormat.all(), ShortDateFormat.values(), 'format.shortDate', defaultShortDateFormatTypeName, ShortDateFormat.Default);
-}
-
-function getAllLongTimeFormats(translateFn) {
-    const defaultLongTimeFormatTypeName = translateFn('default.longTimeFormat');
-    return getDateTimeFormats(translateFn, LongTimeFormat.all(), LongTimeFormat.values(), 'format.longTime', defaultLongTimeFormatTypeName, LongTimeFormat.Default);
-}
-
-function getAllShortTimeFormats(translateFn) {
-    const defaultShortTimeFormatTypeName = translateFn('default.shortTimeFormat');
-    return getDateTimeFormats(translateFn, ShortTimeFormat.all(), ShortTimeFormat.values(), 'format.shortTime', defaultShortTimeFormatTypeName, ShortTimeFormat.Default);
-}
-
 function getMonthdayOrdinal(monthDay, translateFn) {
     return translateFn(`datetime.monthDayOrdinal.${monthDay}`);
 }
@@ -445,31 +387,6 @@ function formatYearQuarter(translateFn, year, quarter) {
     }
 }
 
-function getDateTimeFormats(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType) {
-    const defaultFormat = getDateTimeFormat(translateFn, allFormatMap, allFormatArray,
-        localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE);
-    const ret = [];
-
-    ret.push({
-        type: LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE,
-        format: defaultFormat,
-        displayName: `${translateFn('Language Default')} (${formatCurrentTime(defaultFormat)})`
-    });
-
-    for (let i = 0; i < allFormatArray.length; i++) {
-        const formatType = allFormatArray[i];
-        const format = translateFn(`${localeFormatPathPrefix}.${formatType.key}`);
-
-        ret.push({
-            type: formatType.type,
-            format: format,
-            displayName: formatCurrentTime(format)
-        });
-    }
-
-    return ret;
-}
-
 function getDateTimeFormat(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, formatTypeValue) {
     const type = getDateTimeFormatType(allFormatMap, allFormatArray, formatTypeValue, localeDefaultFormatTypeName, systemDefaultFormatType);
     return translateFn(`${localeFormatPathPrefix}.${type.key}`);
@@ -974,39 +891,6 @@ function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRat
     return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions);
 }
 
-function getAllExpenseIncomeAmountColors(translateFn, expenseOrIncome) {
-    const ret = [];
-    let defaultAmountName = '';
-
-    if (expenseOrIncome === 1) { // expense
-        defaultAmountName = PresetAmountColor.DefaultExpenseColor.name;
-    } else if (expenseOrIncome === 2) { // income
-        defaultAmountName = PresetAmountColor.DefaultIncomeColor.name;
-    }
-
-    if (defaultAmountName) {
-        defaultAmountName = translateFn('color.amount.' + defaultAmountName);
-    }
-
-    ret.push({
-        type: PresetAmountColor.SystemDefaultType,
-        displayName: translateFn('System Default') + (defaultAmountName ? ` (${defaultAmountName})` : '')
-    });
-
-    const allPresetAmountColors = PresetAmountColor.values();
-
-    for (let i = 0; i < allPresetAmountColors.length; i++) {
-        const amountColor = allPresetAmountColors[i];
-
-        ret.push({
-            type: amountColor.type,
-            displayName: translateFn('color.amount.' + amountColor.name)
-        });
-    }
-
-    return ret;
-}
-
 function getAllAccountCategories(translateFn) {
     const ret = [];
     const allCategories = AccountCategory.values();
@@ -1373,14 +1257,9 @@ export function translateError(message, translateFn) {
 
 export function i18nFunctions(i18nGlobal) {
     return {
-        getAllLanguageInfoArray: (includeSystemDefault) => getAllLanguageInfoArray(i18nGlobal.t, includeSystemDefault),
         getDefaultCurrency: () => getDefaultCurrency(i18nGlobal.t),
         getDefaultFirstDayOfWeek: () => getDefaultFirstDayOfWeek(i18nGlobal.t),
         getCurrencyName: (currencyCode) => getCurrencyName(currencyCode, i18nGlobal.t),
-        getAllLongDateFormats: () => getAllLongDateFormats(i18nGlobal.t),
-        getAllShortDateFormats: () => getAllShortDateFormats(i18nGlobal.t),
-        getAllLongTimeFormats: () => getAllLongTimeFormats(i18nGlobal.t),
-        getAllShortTimeFormats: () => getAllShortTimeFormats(i18nGlobal.t),
         getMonthdayShortName: (monthDay) => getMonthdayShortName(monthDay, i18nGlobal.t),
         getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
         getWeekdayLongName: (weekDay) => getWeekdayLongName(weekDay, i18nGlobal.t),
@@ -1420,8 +1299,6 @@ export function i18nFunctions(i18nGlobal) {
         formatAmount: (userStore, value, currencyCode) => getFormattedAmount(value, i18nGlobal.t, userStore, currencyCode),
         formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
         getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
-        getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
-        getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),
         getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),
         getAllAccountTypes: () => getAllAccountTypes(i18nGlobal.t),
         getAllCategoricalChartTypes: () => getAllCategoricalChartTypes(i18nGlobal.t),

src/locales/helpers.ts

@@ -9,6 +9,7 @@ import {
     type DateFormat,
     type TimeFormat,
     type LocalizedMeridiemIndicator,
+    type LocalizedDateTimeFormat,
     type LocalizedDateRange,
     type LocalizedRecentMonthDateRange,
     Month,
@@ -19,7 +20,8 @@ import {
     LongTimeFormat,
     ShortTimeFormat,
     DateRange,
-    DateRangeScene
+    DateRangeScene,
+    LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE
 } from '@/core/datetime.ts';
 
 import {
@@ -44,6 +46,10 @@ import {
     CurrencySortingType
 } from '@/core/currency.ts';
 
+import {
+    PresetAmountColor
+} from '@/core/color.ts';
+
 import {
     type LocalizedAccountCategory,
     AccountType,
@@ -98,6 +104,7 @@ import {
 import {
     isPM,
     formatUnixTime,
+    formatCurrentTime,
     getTimezoneOffset,
     getTimezoneOffsetMinutes,
     getBrowserTimezoneOffset,
@@ -706,6 +713,30 @@ export function useI18n() {
         return ret;
     }
 
+    function getLocalizedDateTimeFormats<T extends DateFormat | TimeFormat>(type: string, allFormatMap: Record<string, T>, allFormatArray: T[], languageDefaultTypeNameKey: string, systemDefaultFormatType: T): LocalizedDateTimeFormat[] {
+        const defaultFormat = getLocalizedDateTimeFormat<T>(type, allFormatMap, allFormatArray, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE, languageDefaultTypeNameKey, systemDefaultFormatType);
+        const ret: LocalizedDateTimeFormat[] = [];
+
+        ret.push({
+            type: LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE,
+            format: defaultFormat,
+            displayName: `${t('Language Default')} (${formatCurrentTime(defaultFormat)})`
+        });
+
+        for (let i = 0; i < allFormatArray.length; i++) {
+            const formatType = allFormatArray[i];
+            const format = t(`format.${type}.${formatType.key}`);
+
+            ret.push({
+                type: formatType.type,
+                format: format,
+                displayName: formatCurrentTime(format)
+            });
+        }
+
+        return ret;
+    }
+
     function getAllDateRanges(scene: DateRangeScene, includeCustom?: boolean, includeBillingCycle?: boolean): LocalizedDateRange[] {
         const ret: LocalizedDateRange[] = [];
         const allDateRanges = DateRange.values();
@@ -869,6 +900,39 @@ export function useI18n() {
         return ret;
     }
 
+    function getAllExpenseIncomeAmountColors(categoryType: CategoryType): TypeAndDisplayName[] {
+        const ret: TypeAndDisplayName[] = [];
+        let defaultAmountName = '';
+
+        if (categoryType === CategoryType.Expense) {
+            defaultAmountName = PresetAmountColor.DefaultExpenseColor.name;
+        } else if (categoryType === CategoryType.Income) { // income
+            defaultAmountName = PresetAmountColor.DefaultIncomeColor.name;
+        }
+
+        if (defaultAmountName) {
+            defaultAmountName = t('color.amount.' + defaultAmountName);
+        }
+
+        ret.push({
+            type: PresetAmountColor.SystemDefaultType,
+            displayName: t('System Default') + (defaultAmountName ? ` (${defaultAmountName})` : '')
+        });
+
+        const allPresetAmountColors = PresetAmountColor.values();
+
+        for (let i = 0; i < allPresetAmountColors.length; i++) {
+            const amountColor = allPresetAmountColors[i];
+
+            ret.push({
+                type: amountColor.type,
+                displayName: t('color.amount.' + amountColor.name)
+            });
+        }
+
+        return ret;
+    }
+
     function getAllAccountCategories(): LocalizedAccountCategory[] {
         const ret: LocalizedAccountCategory[] = [];
         const allCategories = AccountCategory.values();
@@ -1359,6 +1423,10 @@ export function useI18n() {
         getAllShortWeekdayNames,
         getAllMinWeekdayNames,
         getAllWeekDays,
+        getAllLongDateFormats: () => getLocalizedDateTimeFormats<LongDateFormat>('longDate', LongDateFormat.all(), LongDateFormat.values(), 'longDateFormat', LongDateFormat.Default),
+        getAllShortDateFormats: () => getLocalizedDateTimeFormats<ShortDateFormat>('shortDate', ShortDateFormat.all(), ShortDateFormat.values(), 'shortDateFormat', ShortDateFormat.Default),
+        getAllLongTimeFormats: () => getLocalizedDateTimeFormats<LongTimeFormat>('longTime', LongTimeFormat.all(), LongTimeFormat.values(), 'longTimeFormat', LongTimeFormat.Default),
+        getAllShortTimeFormats: () => getLocalizedDateTimeFormats<ShortTimeFormat>('shortTime', ShortTimeFormat.all(), ShortTimeFormat.values(), 'shortTimeFormat', ShortTimeFormat.Default),
         getAllDateRanges,
         getAllRecentMonthDateRanges,
         getAllTimezones,
@@ -1368,6 +1436,8 @@ export function useI18n() {
         getAllDigitGroupingTypes,
         getAllCurrencyDisplayTypes,
         getAllCurrencySortingTypes: () => getLocalizedDisplayNameAndType(CurrencySortingType.values()),
+        getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(CategoryType.Expense),
+        getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(CategoryType.Income),
         getAllAccountCategories,
         getAllAccountTypes: () => getLocalizedDisplayNameAndType(AccountType.values()),
         getAllCategoricalChartTypes: () => getLocalizedDisplayNameAndType(CategoricalChartType.values()),

src/models/account.ts

@@ -215,6 +215,16 @@ export class Account implements AccountInfoResponse {
 
         return accounts;
     }
+
+    public static findAccountNameById(accounts: Account[], accountId: string, defaultName?: string): string | undefined {
+        for (const account of accounts) {
+            if (account.id === accountId) {
+                return account.name;
+            }
+        }
+
+        return defaultName;
+    }
 }
 
 export interface AccountCreateRequest {

src/models/user.ts

@@ -15,18 +15,18 @@ export class User {
     public defaultCurrency: string;
     public firstDayOfWeek: number;
 
-    public defaultAccountId?: string;
+    public defaultAccountId: string = '';
-    public transactionEditScope?: number;
+    public transactionEditScope: number = 1;
-    public longDateFormat?: number;
+    public longDateFormat: number = 0;
-    public shortDateFormat?: number;
+    public shortDateFormat: number = 0;
-    public longTimeFormat?: number;
+    public longTimeFormat: number = 0;
-    public shortTimeFormat?: number;
+    public shortTimeFormat: number = 0;
-    public decimalSeparator?: number;
+    public decimalSeparator: number = 0;
-    public digitGroupingSymbol?: number;
+    public digitGroupingSymbol: number = 0;
-    public digitGrouping?: number;
+    public digitGrouping: number = 0;
-    public currencyDisplayType?: number;
+    public currencyDisplayType: number = 0;
-    public expenseAmountColor?: number;
+    public expenseAmountColor: number = 0;
-    public incomeAmountColor?: number;
+    public incomeAmountColor: number = 0;
 
     private constructor(language: string, defaultCurrency: string, firstDayOfWeek: number) {
         this.language = language;
@@ -34,6 +34,27 @@ export class User {
         this.firstDayOfWeek = firstDayOfWeek;
     }
 
+    public from(user: User | UserBasicInfo | UserProfileResponse): void {
+        this.username = user.username;
+        this.email = user.email;
+        this.nickname = user.nickname;
+        this.language = user.language;
+        this.defaultCurrency = user.defaultCurrency;
+        this.firstDayOfWeek = user.firstDayOfWeek;
+        this.defaultAccountId = user.defaultAccountId;
+        this.transactionEditScope = user.transactionEditScope;
+        this.longDateFormat = user.longDateFormat;
+        this.shortDateFormat = user.shortDateFormat;
+        this.longTimeFormat = user.longTimeFormat;
+        this.shortTimeFormat = user.shortTimeFormat;
+        this.decimalSeparator = user.decimalSeparator;
+        this.digitGroupingSymbol = user.digitGroupingSymbol;
+        this.digitGrouping = user.digitGrouping;
+        this.currencyDisplayType = user.currencyDisplayType;
+        this.expenseAmountColor = user.expenseAmountColor;
+        this.incomeAmountColor = user.incomeAmountColor;
+    }
+
     public toRegisterRequest(categories?: LocalizedPresetCategory[]): UserRegisterRequest {
         return {
             username: this.username,
@@ -71,20 +92,20 @@ export class User {
         };
     }
 
-    public static of(profileResponse: UserProfileResponse): User {
+    public static of(userInfo: UserBasicInfo): User {
-        const user = new User(profileResponse.language, profileResponse.defaultCurrency, profileResponse.firstDayOfWeek);
+        const user = new User(userInfo.language, userInfo.defaultCurrency, userInfo.firstDayOfWeek);
-        user.defaultAccountId = profileResponse.defaultAccountId;
+        user.defaultAccountId = userInfo.defaultAccountId;
-        user.transactionEditScope = profileResponse.transactionEditScope;
+        user.transactionEditScope = userInfo.transactionEditScope;
-        user.longDateFormat = profileResponse.longDateFormat;
+        user.longDateFormat = userInfo.longDateFormat;
-        user.shortDateFormat = profileResponse.shortDateFormat;
+        user.shortDateFormat = userInfo.shortDateFormat;
-        user.longTimeFormat = profileResponse.longTimeFormat;
+        user.longTimeFormat = userInfo.longTimeFormat;
-        user.shortTimeFormat = profileResponse.shortTimeFormat;
+        user.shortTimeFormat = userInfo.shortTimeFormat;
-        user.decimalSeparator = profileResponse.decimalSeparator;
+        user.decimalSeparator = userInfo.decimalSeparator;
-        user.digitGroupingSymbol = profileResponse.digitGroupingSymbol;
+        user.digitGroupingSymbol = userInfo.digitGroupingSymbol;
-        user.digitGrouping = profileResponse.digitGrouping;
+        user.digitGrouping = userInfo.digitGrouping;
-        user.currencyDisplayType = profileResponse.currencyDisplayType;
+        user.currencyDisplayType = userInfo.currencyDisplayType;
-        user.expenseAmountColor = profileResponse.expenseAmountColor;
+        user.expenseAmountColor = userInfo.expenseAmountColor;
-        user.incomeAmountColor = profileResponse.incomeAmountColor;
+        user.incomeAmountColor = userInfo.incomeAmountColor;
 
         return user;
     }

src/stores/index.ts

@@ -372,27 +372,7 @@ export const useRootStore = defineStore('root', () => {
 
     function updateUserProfile({ profile, currentPassword }: { profile: User, currentPassword?: string }): Promise<UserProfileUpdateResponse> {
         return new Promise((resolve, reject) => {
-            services.updateProfile({
+            services.updateProfile(profile.toProfileUpdateRequest(currentPassword)).then(response => {
-                password: profile.password,
-                oldPassword: currentPassword,
-                email: profile.email,
-                nickname: profile.nickname,
-                defaultAccountId: profile.defaultAccountId,
-                transactionEditScope: profile.transactionEditScope,
-                language: profile.language,
-                defaultCurrency: profile.defaultCurrency,
-                firstDayOfWeek: profile.firstDayOfWeek,
-                longDateFormat: profile.longDateFormat,
-                shortDateFormat: profile.shortDateFormat,
-                longTimeFormat: profile.longTimeFormat,
-                shortTimeFormat: profile.shortTimeFormat,
-                decimalSeparator: profile.decimalSeparator,
-                digitGroupingSymbol: profile.digitGroupingSymbol,
-                digitGrouping: profile.digitGrouping,
-                currencyDisplayType: profile.currencyDisplayType,
-                expenseAmountColor: profile.expenseAmountColor,
-                incomeAmountColor: profile.incomeAmountColor
-            }).then(response => {
                 const data = response.data;
 
                 if (!data || !data.success || !data.result) {

src/stores/user.ts

@@ -19,6 +19,7 @@ import type {
 
 import {
     isObject,
+    isString,
     isNumber
 } from '@/lib/common.ts';
 
@@ -289,12 +290,20 @@ export const useUserStore = defineStore('user', () => {
         });
     }
 
-    function getUserAvatarUrl(userInfo: UserBasicInfo, disableBrowserCache: boolean | string): string | null {
+    function getUserAvatarUrl(userInfoOrAvatarUrl: UserBasicInfo | string, disableBrowserCache: boolean | string): string | null {
-        if (!userInfo || !userInfo.avatar) {
+        let avatarUrl = '';
+
+        if (isObject(userInfoOrAvatarUrl)) {
+            avatarUrl = userInfoOrAvatarUrl.avatar;
+        } else if (isString(userInfoOrAvatarUrl)) {
+            avatarUrl = userInfoOrAvatarUrl;
+        }
+
+        if (!avatarUrl) {
             return null;
         }
 
-        return services.getInternalAvatarUrlWithToken(userInfo.avatar, disableBrowserCache);
+        return services.getInternalAvatarUrlWithToken(avatarUrl, disableBrowserCache);
     }
 
     return {

src/views/base/users/UserProfilePageBase.ts

@@ -0,0 +1,212 @@
+import { ref, computed } from 'vue';
+
+import { type LanguageOption } from '@/locales/index.ts';
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+import { useAccountsStore } from '@/stores/account.ts';
+import { useOverviewStore } from '@/stores/overview.ts';
+
+import type { TypeAndDisplayName } from '@/core/base.ts';
+import { WeekDay } from '@/core/datetime.ts';
+import type { LocalizedDigitGroupingType } from '@/core/numeral.ts';
+import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
+
+import { type UserBasicInfo, User } from '@/models/user.ts';
+import { type CategorizedAccount, Account} from '@/models/account.ts';
+
+import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
+import { getCategorizedAccounts } from '@/lib/account.ts';
+
+export function useUserProfilePageBase() {
+    const {
+        getDefaultCurrency,
+        getDefaultFirstDayOfWeek,
+        getAllLanguageOptions,
+        getAllCurrencies,
+        getAllWeekDays,
+        getAllLongDateFormats,
+        getAllShortDateFormats,
+        getAllLongTimeFormats,
+        getAllShortTimeFormats,
+        getAllDecimalSeparators,
+        getAllDigitGroupingSymbols,
+        getAllDigitGroupingTypes,
+        getAllCurrencyDisplayTypes,
+        getAllExpenseAmountColors,
+        getAllIncomeAmountColors,
+        getAllTransactionEditScopeTypes,
+        setLanguage
+    } = useI18n();
+
+    const settingsStore = useSettingsStore();
+    const accountsStore = useAccountsStore();
+    const overviewStore = useOverviewStore();
+
+    const defaultFirstDayOfWeekName = getDefaultFirstDayOfWeek();
+    const defaultFirstDayOfWeek = WeekDay.parse(defaultFirstDayOfWeekName) ? (WeekDay.parse(defaultFirstDayOfWeekName) as WeekDay).type : WeekDay.DefaultFirstDay.type;
+
+    const newProfile = ref<User>(User.createNewUser('', getDefaultCurrency(), defaultFirstDayOfWeek));
+    const oldProfile = ref<User>(User.createNewUser('', getDefaultCurrency(), defaultFirstDayOfWeek));
+
+    const emailVerified = ref<boolean>(false);
+    const loading = ref<boolean>(false);
+    const resending = ref<boolean>(false);
+    const saving = ref<boolean>(false);
+
+    const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));
+    const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
+    const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
+    const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
+    const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value));
+    const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
+    const allLongDateFormats = computed<TypeAndDisplayName[]>(() => getAllLongDateFormats());
+    const allShortDateFormats = computed<TypeAndDisplayName[]>(() => getAllShortDateFormats());
+    const allLongTimeFormats = computed<TypeAndDisplayName[]>(() => getAllLongTimeFormats());
+    const allShortTimeFormats = computed<TypeAndDisplayName[]>(() => getAllShortTimeFormats());
+    const allDecimalSeparators = computed<TypeAndDisplayName[]>(() => getAllDecimalSeparators());
+    const allDigitGroupingSymbols = computed<TypeAndDisplayName[]>(() => getAllDigitGroupingSymbols());
+    const allDigitGroupingTypes = computed<LocalizedDigitGroupingType[]>(() => getAllDigitGroupingTypes());
+    const allCurrencyDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCurrencyDisplayTypes());
+    const allExpenseAmountColorTypes = computed<TypeAndDisplayName[]>(() => getAllExpenseAmountColors());
+    const allIncomeAmountColorTypes = computed<TypeAndDisplayName[]>(() => getAllIncomeAmountColors());
+    const allTransactionEditScopeTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionEditScopeTypes());
+
+    const supportDigitGroupingSymbol = computed<boolean>(() => {
+        for (const digitGroupingType of allDigitGroupingTypes.value) {
+            if (digitGroupingType.type === newProfile.value.digitGrouping) {
+                return digitGroupingType.enabled;
+            }
+        }
+
+        return false;
+    });
+
+    const inputIsNotChangedProblemMessage = computed<string | null>(() => {
+        if (!newProfile.value.password && !newProfile.value.confirmPassword && !newProfile.value.email && !newProfile.value.nickname) {
+            return 'Nothing has been modified';
+        } else if (!newProfile.value.password && !newProfile.value.confirmPassword &&
+            newProfile.value.email === oldProfile.value.email &&
+            newProfile.value.nickname === oldProfile.value.nickname &&
+            newProfile.value.defaultAccountId === oldProfile.value.defaultAccountId &&
+            newProfile.value.transactionEditScope === oldProfile.value.transactionEditScope &&
+            newProfile.value.language === oldProfile.value.language &&
+            newProfile.value.defaultCurrency === oldProfile.value.defaultCurrency &&
+            newProfile.value.firstDayOfWeek === oldProfile.value.firstDayOfWeek &&
+            newProfile.value.longDateFormat === oldProfile.value.longDateFormat &&
+            newProfile.value.shortDateFormat === oldProfile.value.shortDateFormat &&
+            newProfile.value.longTimeFormat === oldProfile.value.longTimeFormat &&
+            newProfile.value.shortTimeFormat === oldProfile.value.shortTimeFormat &&
+            newProfile.value.decimalSeparator === oldProfile.value.decimalSeparator &&
+            newProfile.value.digitGroupingSymbol === oldProfile.value.digitGroupingSymbol &&
+            newProfile.value.digitGrouping === oldProfile.value.digitGrouping &&
+            newProfile.value.currencyDisplayType === oldProfile.value.currencyDisplayType &&
+            newProfile.value.expenseAmountColor === oldProfile.value.expenseAmountColor &&
+            newProfile.value.incomeAmountColor === oldProfile.value.incomeAmountColor) {
+            return 'Nothing has been modified';
+        } else if (!newProfile.value.password && newProfile.value.confirmPassword) {
+            return 'Password cannot be blank';
+        } else if (newProfile.value.password && !newProfile.value.confirmPassword) {
+            return 'Password confirmation cannot be blank';
+        } else {
+            return null;
+        }
+    });
+
+    const inputInvalidProblemMessage = computed<string | null>(() => {
+        if (newProfile.value.password && newProfile.value.confirmPassword && newProfile.value.password !== newProfile.value.confirmPassword) {
+            return 'Password and password confirmation do not match';
+        } else if (!newProfile.value.email) {
+            return 'Email address cannot be blank';
+        } else if (!newProfile.value.nickname) {
+            return 'Nickname cannot be blank';
+        } else if (!newProfile.value.defaultCurrency) {
+            return 'Default currency cannot be blank';
+        } else {
+            return null;
+        }
+    });
+
+    const langAndRegionInputInvalidProblemMessage = computed<string | null>(() => {
+        if (!newProfile.value.defaultCurrency) {
+            return 'Default currency cannot be blank';
+        } else {
+            return null;
+        }
+    });
+
+    const extendInputInvalidProblemMessage = computed<string | null>(() => {
+        return null;
+    });
+
+    const inputIsNotChanged = computed<boolean>(() => !!inputIsNotChangedProblemMessage.value);
+    const inputIsInvalid = computed<boolean>(() => !!inputInvalidProblemMessage.value);
+    const langAndRegionInputIsInvalid = computed<boolean>(() => !!langAndRegionInputInvalidProblemMessage.value);
+    const extendInputIsInvalid = computed<boolean>(() => !!extendInputInvalidProblemMessage.value);
+
+    function setCurrentUserProfile(profile: UserBasicInfo): void {
+        emailVerified.value = profile.emailVerified;
+        oldProfile.value.from(profile);
+        newProfile.value.from(oldProfile.value);
+    }
+
+    function reset(): void {
+        newProfile.value.from(oldProfile.value);
+    }
+
+    function doAfterProfileUpdate(user: UserBasicInfo): void {
+        if (user) {
+            if (user.firstDayOfWeek !== oldProfile.value.firstDayOfWeek) {
+                overviewStore.resetTransactionOverview();
+            }
+
+            setCurrentUserProfile(user);
+
+            const localeDefaultSettings = setLanguage(user.language);
+            settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+            setExpenseAndIncomeAmountColor(user.expenseAmountColor, user.incomeAmountColor);
+        }
+    }
+
+    return {
+        // states
+        newProfile,
+        oldProfile,
+        emailVerified,
+        loading,
+        resending,
+        saving,
+        // computed states
+        allLanguages,
+        allCurrencies,
+        allAccounts,
+        allVisibleAccounts,
+        allVisibleCategorizedAccounts,
+        allWeekDays,
+        allLongDateFormats,
+        allShortDateFormats,
+        allLongTimeFormats,
+        allShortTimeFormats,
+        allDecimalSeparators,
+        allDigitGroupingSymbols,
+        allDigitGroupingTypes,
+        allCurrencyDisplayTypes,
+        allExpenseAmountColorTypes,
+        allIncomeAmountColorTypes,
+        allTransactionEditScopeTypes,
+        supportDigitGroupingSymbol,
+        inputIsNotChangedProblemMessage,
+        inputInvalidProblemMessage,
+        langAndRegionInputInvalidProblemMessage,
+        extendInputInvalidProblemMessage,
+        inputIsNotChanged,
+        inputIsInvalid,
+        langAndRegionInputIsInvalid,
+        extendInputIsInvalid,
+        // functions
+        setCurrentUserProfile,
+        reset,
+        doAfterProfileUpdate
+    };
+}

src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue

@@ -3,13 +3,13 @@
         <v-col cols="12">
             <v-card :class="{ 'disabled': loading || saving }">
                 <template #title>
-                    <span>{{ $t('Basic Settings') }}</span>
+                    <span>{{ tt('Basic Settings') }}</span>
                     <v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
                 </template>
 
                 <v-card-text class="d-flex">
                     <v-avatar rounded="lg" variant="tonal" size="100" class="me-4 user-profile-avatar-icon"
-                              :class="{ 'cursor-pointer': oldProfile.avatarProvider === 'internal', 'user-profile-avatar-icon-modifiable': oldProfile.avatarProvider === 'internal' }"
+                              :class="{ 'cursor-pointer': avatarProvider === 'internal', 'user-profile-avatar-icon-modifiable': avatarProvider === 'internal' }"
                               :color="currentUserAvatar ? 'rgba(0,0,0,0)' : 'primary'">
                         <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
                             <template #placeholder>
@@ -19,28 +19,28 @@
                             </template>
                         </v-img>
                         <v-icon size="48" class="user-profile-avatar-placeholder" :icon="icons.user" v-else-if="!currentUserAvatar"/>
-                        <div class="avatar-edit-icon" v-if="oldProfile.avatarProvider === 'internal'">
+                        <div class="avatar-edit-icon" v-if="avatarProvider === 'internal'">
                             <v-icon size="48" :icon="icons.pencil"/>
                         </div>
-                        <v-menu activator="parent" width="200" location="bottom" offset="14px" v-if="oldProfile.avatarProvider === 'internal'">
+                        <v-menu activator="parent" width="200" location="bottom" offset="14px" v-if="avatarProvider === 'internal'">
                             <v-list>
-                                <v-list-item :disabled="saving" :title="$t('Update Avatar')" @click="showOpenAvatarDialog"></v-list-item>
+                                <v-list-item :disabled="saving" :title="tt('Update Avatar')" @click="showOpenAvatarDialog"></v-list-item>
-                                <v-list-item :disabled="!currentUserAvatar || saving" :title="$t('Remove Avatar')" @click="removeAvatar"></v-list-item>
+                                <v-list-item :disabled="!currentUserAvatar || saving" :title="tt('Remove Avatar')" @click="removeAvatar"></v-list-item>
                             </v-list>
                         </v-menu>
                     </v-avatar>
                     <div class="d-flex flex-column justify-center gap-3">
                         <div class="d-flex text-body-1">
-                            <span class="me-1">{{ $t('Username:') }}</span>
+                            <span class="me-1">{{ tt('Username:') }}</span>
                             <v-skeleton-loader class="skeleton-no-margin" type="text" style="width: 100px" :loading="true" v-if="loading"></v-skeleton-loader>
                             <span v-if="!loading">{{ oldProfile.username }}</span>
                         </div>
                         <div class="d-flex text-body-1 align-center" style="height: 40px;">
-                            <span v-if="!loading && emailVerified">{{ $t('Email address is verified') }}</span>
+                            <span v-if="!loading && emailVerified">{{ tt('Email address is verified') }}</span>
-                            <span v-if="!loading && !emailVerified">{{ $t('Email address is not verified') }}</span>
+                            <span v-if="!loading && !emailVerified">{{ tt('Email address is not verified') }}</span>
                             <v-btn class="ml-2 px-2" size="small" variant="text" :disabled="loading || resending"
-                                   @click="resendVerifyEmail" v-if="isUserVerifyEmailEnabled && !loading && !emailVerified">
+                                   @click="resendVerifyEmail" v-if="isUserVerifyEmailEnabled() && !loading && !emailVerified">
-                                {{ $t('Resend Validation Email') }}
+                                {{ tt('Resend Validation Email') }}
                                 <v-progress-circular indeterminate size="18" class="ml-2" v-if="resending"></v-progress-circular>
                             </v-btn>
                             <v-skeleton-loader class="skeleton-no-margin mt-2 mb-1" type="text" style="width: 160px" :loading="true" v-if="loading"></v-skeleton-loader>
@@ -59,8 +59,8 @@
                                     autocomplete="nickname"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Nickname')"
+                                    :label="tt('Nickname')"
-                                    :placeholder="$t('Your nickname')"
+                                    :placeholder="tt('Your nickname')"
                                     v-model="newProfile.nickname"
                                 />
                             </v-col>
@@ -71,8 +71,8 @@
                                     autocomplete="email"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('E-mail')"
+                                    :label="tt('E-mail')"
-                                    :placeholder="$t('Your email address')"
+                                    :placeholder="tt('Your email address')"
                                     v-model="newProfile.email"
                                 />
                             </v-col>
@@ -87,10 +87,10 @@
                                                    secondary-title-field="name"
                                                    secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
                                                    :disabled="loading || saving || !allVisibleAccounts.length"
-                                                   :label="$t('Default Account')"
+                                                   :label="tt('Default Account')"
-                                                   :placeholder="$t('Default Account')"
+                                                   :placeholder="tt('Default Account')"
                                                    :items="allVisibleCategorizedAccounts"
-                                                   :no-item-text="$t('Unspecified')"
+                                                   :no-item-text="tt('Unspecified')"
                                                    v-model="newProfile.defaultAccountId">
                                 </two-column-select>
                             </v-col>
@@ -101,8 +101,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Editable Transaction Range')"
+                                    :label="tt('Editable Transaction Range')"
-                                    :placeholder="$t('Editable Transaction Range')"
+                                    :placeholder="tt('Editable Transaction Range')"
                                     :items="allTransactionEditScopeTypes"
                                     v-model="newProfile.transactionEditScope"
                                 />
@@ -120,8 +120,8 @@
                                     item-value="languageTag"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Language')"
+                                    :label="tt('Language')"
-                                    :placeholder="$t('Language')"
+                                    :placeholder="tt('Language')"
                                     :items="allLanguages"
                                     v-model="newProfile.language"
                                 />
@@ -134,10 +134,10 @@
                                     auto-select-first
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :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="newProfile.defaultCurrency"
                                 >
                                     <template #append-inner>
@@ -152,8 +152,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :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="newProfile.firstDayOfWeek"
                                 />
@@ -171,8 +171,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Long Date Format')"
+                                    :label="tt('Long Date Format')"
-                                    :placeholder="$t('Long Date Format')"
+                                    :placeholder="tt('Long Date Format')"
                                     :items="allLongDateFormats"
                                     v-model="newProfile.longDateFormat"
                                 />
@@ -184,8 +184,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Short Date Format')"
+                                    :label="tt('Short Date Format')"
-                                    :placeholder="$t('Short Date Format')"
+                                    :placeholder="tt('Short Date Format')"
                                     :items="allShortDateFormats"
                                     v-model="newProfile.shortDateFormat"
                                 />
@@ -197,8 +197,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Long Time Format')"
+                                    :label="tt('Long Time Format')"
-                                    :placeholder="$t('Long Time Format')"
+                                    :placeholder="tt('Long Time Format')"
                                     :items="allLongTimeFormats"
                                     v-model="newProfile.longTimeFormat"
                                 />
@@ -210,8 +210,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Short Time Format')"
+                                    :label="tt('Short Time Format')"
-                                    :placeholder="$t('Short Time Format')"
+                                    :placeholder="tt('Short Time Format')"
                                     :items="allShortTimeFormats"
                                     v-model="newProfile.shortTimeFormat"
                                 />
@@ -229,8 +229,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Currency Display Mode')"
+                                    :label="tt('Currency Display Mode')"
-                                    :placeholder="$t('Currency Display Mode')"
+                                    :placeholder="tt('Currency Display Mode')"
                                     :items="allCurrencyDisplayTypes"
                                     v-model="newProfile.currencyDisplayType"
                                 />
@@ -242,8 +242,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Digit Grouping')"
+                                    :label="tt('Digit Grouping')"
-                                    :placeholder="$t('Digit Grouping')"
+                                    :placeholder="tt('Digit Grouping')"
                                     :items="allDigitGroupingTypes"
                                     v-model="newProfile.digitGrouping"
                                 />
@@ -254,9 +254,9 @@
                                     item-title="displayName"
                                     item-value="type"
                                     persistent-placeholder
-                                    :disabled="loading || saving || !getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'enabled')"
+                                    :disabled="loading || saving || !supportDigitGroupingSymbol"
-                                    :label="$t('Digit Grouping Symbol')"
+                                    :label="tt('Digit Grouping Symbol')"
-                                    :placeholder="$t('Digit Grouping Symbol')"
+                                    :placeholder="tt('Digit Grouping Symbol')"
                                     :items="allDigitGroupingSymbols"
                                     v-model="newProfile.digitGroupingSymbol"
                                 />
@@ -268,8 +268,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Decimal Separator')"
+                                    :label="tt('Decimal Separator')"
-                                    :placeholder="$t('Decimal Separator')"
+                                    :placeholder="tt('Decimal Separator')"
                                     :items="allDecimalSeparators"
                                     v-model="newProfile.decimalSeparator"
                                 />
@@ -287,8 +287,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Expense Amount Color')"
+                                    :label="tt('Expense Amount Color')"
-                                    :placeholder="$t('Expense Amount Color')"
+                                    :placeholder="tt('Expense Amount Color')"
                                     :items="allExpenseAmountColorTypes"
                                     v-model="newProfile.expenseAmountColor"
                                 />
@@ -300,8 +300,8 @@
                                     item-value="type"
                                     persistent-placeholder
                                     :disabled="loading || saving"
-                                    :label="$t('Income Amount Color')"
+                                    :label="tt('Income Amount Color')"
-                                    :placeholder="$t('Income Amount Color')"
+                                    :placeholder="tt('Income Amount Color')"
                                     :items="allIncomeAmountColorTypes"
                                     v-model="newProfile.incomeAmountColor"
                                 />
@@ -311,12 +311,12 @@
 
                     <v-card-text class="d-flex flex-wrap gap-4">
                         <v-btn :disabled="inputIsNotChanged || inputIsInvalid || saving" @click="save">
-                            {{ $t('Save Changes') }}
+                            {{ tt('Save Changes') }}
                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="saving"></v-progress-circular>
                         </v-btn>
 
                         <v-btn color="default" variant="tonal" @click="reset">
-                            {{ $t('Reset') }}
+                            {{ tt('Reset') }}
                         </v-btn>
                     </v-card-text>
                 </v-form>
@@ -326,388 +326,228 @@
 
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
-    <input ref="avatarInput" type="file" style="display: none" :accept="supportedImageExtensions" @change="updateAvatar($event)" />
+    <input ref="avatarInput" type="file" style="display: none" :accept="SUPPORTED_IMAGE_EXTENSIONS" @change="updateAvatar($event)" />
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useUserProfilePageBase } from '@/views/base/users/UserProfilePageBase.ts';
+
 import { useRootStore } from '@/stores/index.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
-import { useOverviewStore } from '@/stores/overview.ts';
 
-import { WeekDay } from '@/core/datetime.ts';
 import { SUPPORTED_IMAGE_EXTENSIONS } from '@/consts/file.ts';
-import { getNameByKeyValue } from '@/lib/common.ts';
+import type { UserProfileResponse } from '@/models/user.ts';
+
 import { generateRandomUUID } from '@/lib/misc.ts';
-import { getCategorizedAccounts } from '@/lib/account.ts';
 import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
-import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
 import {
     mdiAccount,
     mdiAccountEditOutline
 } from '@mdi/js';
 
-export default {
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
-    data() {
+type SnackBarType = InstanceType<typeof SnackBar>;
-        const self = this;
-        const defaultFirstDayOfWeekName = self.$locale.getDefaultFirstDayOfWeek();
-        const defaultFirstDayOfWeek = WeekDay.parse(defaultFirstDayOfWeekName) ? WeekDay.parse(defaultFirstDayOfWeekName).type : WeekDay.DefaultFirstDay.type;
 
-        return {
+const { tt } = useI18n();
-            newProfile: {
+
-                email: '',
+const {
-                nickname: '',
+    newProfile,
-                defaultAccountId: 0,
+    oldProfile,
-                transactionEditScope: 1,
+    emailVerified,
-                language: '',
+    loading,
-                defaultCurrency: self.$locale.getDefaultCurrency(),
+    resending,
-                firstDayOfWeek: defaultFirstDayOfWeek,
+    saving,
-                longDateFormat: 0,
+    allLanguages,
-                shortDateFormat: 0,
+    allCurrencies,
-                longTimeFormat: 0,
+    allVisibleAccounts,
-                shortTimeFormat: 0,
+    allVisibleCategorizedAccounts,
-                decimalSeparator: 0,
+    allWeekDays,
-                digitGroupingSymbol: 0,
+    allLongDateFormats,
-                digitGrouping: 0,
+    allShortDateFormats,
-                currencyDisplayType: 0,
+    allLongTimeFormats,
-                expenseAmountColor: 0,
+    allShortTimeFormats,
-                incomeAmountColor: 0
+    allDecimalSeparators,
-            },
+    allDigitGroupingSymbols,
-            oldProfile: {
+    allDigitGroupingTypes,
-                email: '',
+    allCurrencyDisplayTypes,
-                nickname: '',
+    allExpenseAmountColorTypes,
-                defaultAccountId: 0,
+    allIncomeAmountColorTypes,
-                transactionEditScope: 1,
+    allTransactionEditScopeTypes,
-                language: '',
+    supportDigitGroupingSymbol,
-                defaultCurrency: self.$locale.getDefaultCurrency(),
+    inputIsNotChangedProblemMessage,
-                firstDayOfWeek: defaultFirstDayOfWeek,
+    inputInvalidProblemMessage,
-                longDateFormat: 0,
+    langAndRegionInputInvalidProblemMessage,
-                shortDateFormat: 0,
+    extendInputInvalidProblemMessage,
-                longTimeFormat: 0,
+    inputIsNotChanged,
-                shortTimeFormat: 0,
+    inputIsInvalid,
-                decimalSeparator: 0,
+    setCurrentUserProfile,
-                digitGroupingSymbol: 0,
+    reset,
-                digitGrouping: 0,
+    doAfterProfileUpdate
-                currencyDisplayType: 0,
+} = useUserProfilePageBase();
-                expenseAmountColor: 0,
+
-                incomeAmountColor: 0
+const rootStore = useRootStore();
-            },
+const userStore = useUserStore();
-            avatarNoCacheId: '',
+const accountsStore = useAccountsStore();
-            emailVerified: false,
+
-            loading: true,
+const icons = {
-            resending: false,
+    user: mdiAccount,
-            saving: false,
+    pencil: mdiAccountEditOutline,
-            icons: {
+};
-                user: mdiAccount,
+
-                pencil: mdiAccountEditOutline,
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
-            }
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
-        };
+const avatarInput = useTemplateRef<HTMLInputElement>('avatarInput');
-    },
+
-    computed: {
+const avatarUrl = ref<string>('');
-        ...mapStores(useRootStore, useSettingsStore, useUserStore, useAccountsStore, useOverviewStore),
+const avatarProvider = ref<string | undefined>('');
-        allLanguages() {
+const avatarNoCacheId = ref<string>('');
-            return this.$locale.getAllLanguageInfoArray(true);
+
-        },
+const currentUserAvatar = computed<string | null>(() => {
-        allCurrencies() {
+    return userStore.getUserAvatarUrl(avatarUrl.value, avatarNoCacheId.value);
-            return this.$locale.getAllCurrencies();
+});
-        },
+
-        allAccounts() {
+function init(): void {
-            return this.accountsStore.allPlainAccounts;
+    loading.value = true;
-        },
+
-        allVisibleAccounts() {
+    const promises = [
-            return this.accountsStore.allVisiblePlainAccounts;
+        accountsStore.loadAllAccounts({ force: false }),
-        },
+        userStore.getCurrentUserProfile()
-        allVisibleCategorizedAccounts() {
+    ];
-            return getCategorizedAccounts(this.allVisibleAccounts);
+
-        },
+    Promise.all(promises).then(responses => {
-        allWeekDays() {
+        const profile = responses[1] as UserProfileResponse;
-            return this.$locale.getAllWeekDays();
+        setCurrentUserProfile(profile);
-        },
+        avatarUrl.value = profile.avatar;
-        allLongDateFormats() {
+        avatarProvider.value = profile.avatarProvider;
-            return this.$locale.getAllLongDateFormats();
+        loading.value = false;
-        },
+    }).catch(error => {
-        allShortDateFormats() {
+        oldProfile.value.nickname = '';
-            return this.$locale.getAllShortDateFormats();
+        oldProfile.value.email = '';
-        },
+        newProfile.value.nickname = '';
-        allLongTimeFormats() {
+        newProfile.value.email = '';
-            return this.$locale.getAllLongTimeFormats();
+        loading.value = false;
-        },
+
-        allShortTimeFormats() {
+        if (!error.processed) {
-            return this.$locale.getAllShortTimeFormats();
+            snackbar.value?.showError(error);
-        },
-        allDecimalSeparators() {
-            return this.$locale.getAllDecimalSeparators();
-        },
-        allDigitGroupingSymbols() {
-            return this.$locale.getAllDigitGroupingSymbols();
-        },
-        allDigitGroupingTypes() {
-            return this.$locale.getAllDigitGroupingTypes();
-        },
-        allCurrencyDisplayTypes() {
-            return this.$locale.getAllCurrencyDisplayTypes(this.settingsStore, this.userStore);
-        },
-        allExpenseAmountColorTypes() {
-            return this.$locale.getAllExpenseAmountColors();
-        },
-        allIncomeAmountColorTypes() {
-            return this.$locale.getAllIncomeAmountColors();
-        },
-        allTransactionEditScopeTypes() {
-            return this.$locale.getAllTransactionEditScopeTypes();
-        },
-        supportedImageExtensions() {
-            return SUPPORTED_IMAGE_EXTENSIONS;
-        },
-        currentUserAvatar() {
-            return this.userStore.getUserAvatarUrl(this.oldProfile, this.avatarNoCacheId);
-        },
-        isUserVerifyEmailEnabled() {
-            return isUserVerifyEmailEnabled();
-        },
-        inputIsNotChanged() {
-            return !!this.inputIsNotChangedProblemMessage;
-        },
-        inputIsInvalid() {
-            return !!this.inputInvalidProblemMessage;
-        },
-        inputIsNotChangedProblemMessage() {
-            if (!this.newProfile.email && !this.newProfile.nickname) {
-                return 'Nothing has been modified';
-            } else if (this.newProfile.email === this.oldProfile.email &&
-                this.newProfile.nickname === this.oldProfile.nickname &&
-                this.newProfile.defaultAccountId === this.oldProfile.defaultAccountId &&
-                this.newProfile.transactionEditScope === this.oldProfile.transactionEditScope &&
-                this.newProfile.language === this.oldProfile.language &&
-                this.newProfile.defaultCurrency === this.oldProfile.defaultCurrency &&
-                this.newProfile.firstDayOfWeek === this.oldProfile.firstDayOfWeek &&
-                this.newProfile.longDateFormat === this.oldProfile.longDateFormat &&
-                this.newProfile.shortDateFormat === this.oldProfile.shortDateFormat &&
-                this.newProfile.longTimeFormat === this.oldProfile.longTimeFormat &&
-                this.newProfile.shortTimeFormat === this.oldProfile.shortTimeFormat &&
-                this.newProfile.decimalSeparator === this.oldProfile.decimalSeparator &&
-                this.newProfile.digitGroupingSymbol === this.oldProfile.digitGroupingSymbol &&
-                this.newProfile.digitGrouping === this.oldProfile.digitGrouping &&
-                this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType &&
-                this.newProfile.expenseAmountColor === this.oldProfile.expenseAmountColor &&
-                this.newProfile.incomeAmountColor === this.oldProfile.incomeAmountColor) {
-                return 'Nothing has been modified';
-            } else {
-                return null;
-            }
-        },
-        inputInvalidProblemMessage() {
-            if (!this.newProfile.email) {
-                return 'Email address cannot be blank';
-            } else if (!this.newProfile.nickname) {
-                return 'Nickname cannot be blank';
-            } else if (!this.newProfile.defaultCurrency) {
-                return 'Default currency cannot be blank';
-            } else {
-                return null;
-            }
-        },
-        extendInputInvalidProblemMessage() {
-            return null;
-        },
-        langAndRegionInputInvalidProblemMessage() {
-            if (!this.newProfile.defaultCurrency) {
-                return 'Default currency cannot be blank';
-            } else {
-                return null;
-            }
         }
-    },
+    });
-    created() {
+}
-        const self = this;
 
-        self.loading = true;
+function save(): void {
+    const problemMessage = inputIsNotChangedProblemMessage.value || inputInvalidProblemMessage.value || extendInputInvalidProblemMessage.value || langAndRegionInputInvalidProblemMessage.value;
 
-        const promises = [
+    if (problemMessage) {
-            self.accountsStore.loadAllAccounts({ force: false }),
+        snackbar.value?.showMessage(problemMessage);
-            self.userStore.getCurrentUserProfile()
+        return;
-        ];
+    }
 
-        Promise.all(promises).then(responses => {
+    saving.value = true;
-            const profile = responses[1];
+
-            self.setCurrentUserProfile(profile);
+    rootStore.updateUserProfile({
-            self.emailVerified = profile.emailVerified;
+        profile: newProfile.value
-            self.loading = false;
+    }).then(response => {
+        saving.value = false;
+
+        doAfterProfileUpdate(response.user);
+        snackbar.value?.showMessage('Your profile has been successfully updated');
+    }).catch(error => {
+        saving.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function updateAvatar(event: Event): void {
+    if (!event || !event.target) {
+        return;
+    }
+
+    const el = event.target as HTMLInputElement;
+
+    if (!el.files || !el.files.length) {
+        return;
+    }
+
+    const avatarFile = el.files[0];
+
+    el.value = '';
+
+    saving.value = true;
+
+    userStore.updateUserAvatar({ avatarFile }).then(response => {
+        saving.value = false;
+
+        if (response) {
+            avatarUrl.value = response.avatar;
+            avatarProvider.value = response.avatarProvider;
+            avatarNoCacheId.value = generateRandomUUID();
+            setCurrentUserProfile(response);
+        }
+
+        snackbar.value?.showMessage('Your avatar has been successfully updated');
+    }).catch(error => {
+        saving.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function removeAvatar(): void {
+    confirmDialog.value?.open('Are you sure you want to remove avatar?').then(() => {
+        saving.value = true;
+
+        userStore.removeUserAvatar().then(response => {
+            saving.value = false;
+
+            if (response) {
+                avatarUrl.value = response.avatar;
+                avatarProvider.value = response.avatarProvider;
+                setCurrentUserProfile(response);
+            }
+
+            snackbar.value?.showMessage('Your profile has been successfully updated');
         }).catch(error => {
-            self.oldProfile.nickname = '';
+            saving.value = false;
-            self.oldProfile.email = '';
-            self.newProfile.nickname = '';
-            self.newProfile.email = '';
-            self.loading = false;
 
             if (!error.processed) {
-                self.$refs.snackbar.showError(error);
+                snackbar.value?.showError(error);
             }
         });
-    },
+    });
-    methods: {
+}
-        save() {
-            const self = this;
 
-            const problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage || self.langAndRegionInputInvalidProblemMessage;
+function resendVerifyEmail(): void {
+    resending.value = true;
 
-            if (problemMessage) {
+    rootStore.resendVerifyEmailByLoginedUser().then(() => {
-                self.$refs.snackbar.showMessage(problemMessage);
+        resending.value = false;
-                return;
+        snackbar.value?.showMessage('Validation email has been sent');
-            }
+    }).catch(error => {
+        resending.value = false;
 
-            self.saving = true;
+        if (!error.processed) {
-
+            snackbar.value?.showError(error);
-            self.rootStore.updateUserProfile({
-                profile: self.newProfile
-            }).then(response => {
-                self.saving = false;
-
-                if (response.user) {
-                    if (response.user.firstDayOfWeek !== self.oldProfile.firstDayOfWeek) {
-                        this.overviewStore.resetTransactionOverview();
-                    }
-
-                    self.setCurrentUserProfile(response.user);
-                    self.emailVerified = response.user.emailVerified;
-
-                    const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                    setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
-                }
-
-                self.$refs.snackbar.showMessage('Your profile has been successfully updated');
-            }).catch(error => {
-                self.saving = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        showOpenAvatarDialog() {
-            this.$refs.avatarInput.click();
-        },
-        updateAvatar(event) {
-            if (!event || !event.target || !event.target.files || !event.target.files.length) {
-                return;
-            }
-
-            const self = this;
-            const avatarFile = event.target.files[0];
-
-            event.target.value = null;
-
-            self.saving = true;
-
-            self.userStore.updateUserAvatar({ avatarFile }).then(response => {
-                self.saving = false;
-
-                if (response) {
-                    self.avatarNoCacheId = generateRandomUUID();
-                    self.setCurrentUserProfile(response);
-                }
-
-                self.$refs.snackbar.showMessage('Your avatar has been successfully updated');
-            }).catch(error => {
-                self.saving = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        removeAvatar() {
-            const self = this;
-
-            self.$refs.confirmDialog.open('Are you sure you want to remove avatar?').then(() => {
-                self.saving = true;
-
-                self.userStore.removeUserAvatar().then(response => {
-                    self.saving = false;
-
-                    if (response) {
-                        self.setCurrentUserProfile(response);
-                    }
-
-                    self.$refs.snackbar.showMessage('Your profile has been successfully updated');
-                }).catch(error => {
-                    self.saving = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            });
-        },
-        reset() {
-            this.setCurrentUserProfile(this.oldProfile);
-        },
-        resendVerifyEmail() {
-            const self = this;
-
-            self.resending = true;
-
-            self.rootStore.resendVerifyEmailByLoginedUser().then(() => {
-                self.resending = false;
-                self.$refs.snackbar.showMessage('Validation email has been sent');
-            }).catch(error => {
-                self.resending = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        getNameByKeyValue(src, value, keyField, nameField, defaultName) {
-            return getNameByKeyValue(src, value, keyField, nameField, defaultName);
-        },
-        setCurrentUserProfile(profile) {
-            this.oldProfile.username = profile.username;
-            this.oldProfile.email = profile.email;
-            this.oldProfile.nickname = profile.nickname;
-            this.oldProfile.avatar = profile.avatar;
-            this.oldProfile.avatarProvider = profile.avatarProvider;
-            this.oldProfile.defaultAccountId = profile.defaultAccountId;
-            this.oldProfile.transactionEditScope = profile.transactionEditScope;
-            this.oldProfile.language = profile.language;
-            this.oldProfile.defaultCurrency = profile.defaultCurrency;
-            this.oldProfile.firstDayOfWeek = profile.firstDayOfWeek;
-            this.oldProfile.longDateFormat = profile.longDateFormat;
-            this.oldProfile.shortDateFormat = profile.shortDateFormat;
-            this.oldProfile.longTimeFormat = profile.longTimeFormat;
-            this.oldProfile.shortTimeFormat = profile.shortTimeFormat;
-            this.oldProfile.decimalSeparator = profile.decimalSeparator;
-            this.oldProfile.digitGroupingSymbol = profile.digitGroupingSymbol;
-            this.oldProfile.digitGrouping = profile.digitGrouping;
-            this.oldProfile.currencyDisplayType = profile.currencyDisplayType;
-            this.oldProfile.expenseAmountColor = profile.expenseAmountColor;
-            this.oldProfile.incomeAmountColor = profile.incomeAmountColor;
-
-            this.newProfile.email = this.oldProfile.email
-            this.newProfile.nickname = this.oldProfile.nickname;
-            this.newProfile.defaultAccountId = this.oldProfile.defaultAccountId;
-            this.newProfile.transactionEditScope = this.oldProfile.transactionEditScope;
-            this.newProfile.language = this.oldProfile.language;
-            this.newProfile.defaultCurrency = this.oldProfile.defaultCurrency;
-            this.newProfile.firstDayOfWeek = this.oldProfile.firstDayOfWeek;
-            this.newProfile.longDateFormat = this.oldProfile.longDateFormat;
-            this.newProfile.shortDateFormat = this.oldProfile.shortDateFormat;
-            this.newProfile.longTimeFormat = this.oldProfile.longTimeFormat;
-            this.newProfile.shortTimeFormat = this.oldProfile.shortTimeFormat;
-            this.newProfile.decimalSeparator = this.oldProfile.decimalSeparator;
-            this.newProfile.digitGroupingSymbol = this.oldProfile.digitGroupingSymbol;
-            this.newProfile.digitGrouping = this.oldProfile.digitGrouping;
-            this.newProfile.currencyDisplayType = this.oldProfile.currencyDisplayType;
-            this.newProfile.expenseAmountColor = this.oldProfile.expenseAmountColor;
-            this.newProfile.incomeAmountColor = this.oldProfile.incomeAmountColor;
         }
-    }
+    });
-};
+}
+
+function showOpenAvatarDialog(): void {
+    avatarInput.value?.click();
+}
+
+init();
 </script>
 
 <style>

src/views/mobile/users/UserProfilePage.vue

@@ -1,11 +1,11 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <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('User Profile')"></f7-nav-title>
+            <f7-nav-title :title="tt('User Profile')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
-                <f7-link icon-f7="ellipsis" :class="{ 'disabled': !isUserVerifyEmailEnabled || loading || emailVerified }" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link icon-f7="ellipsis" :class="{ 'disabled': !isUserVerifyEmailEnabled() || loading || emailVerified }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" :text="$t('Save')" @click="save"></f7-link>
+                <f7-link :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" :text="tt('Save')" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -51,8 +51,8 @@
                 type="password"
                 autocomplete="new-password"
                 clear-button
-                :label="$t('Password')"
+                :label="tt('Password')"
-                :placeholder="$t('Your password')"
+                :placeholder="tt('Your password')"
                 v-model:value="newProfile.password"
             ></f7-list-input>
 
@@ -60,8 +60,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="newProfile.confirmPassword"
             ></f7-list-input>
 
@@ -69,8 +69,8 @@
                 type="email"
                 autocomplete="email"
                 clear-button
-                :label="$t('E-mail') + ' ' + (emailVerified ? $t('(Verified)') : $t('(Not Verified)'))"
+                :label="tt('E-mail') + ' ' + (emailVerified ? tt('(Verified)') : tt('(Not Verified)'))"
-                :placeholder="$t('Your email address')"
+                :placeholder="tt('Your email address')"
                 v-model:value="newProfile.email"
             ></f7-list-input>
 
@@ -78,12 +78,12 @@
                 type="text"
                 autocomplete="nickname"
                 clear-button
-                :label="$t('Nickname')"
+                :label="tt('Nickname')"
-                :placeholder="$t('Your nickname')"
+                :placeholder="tt('Your nickname')"
                 v-model:value="newProfile.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 form strong inset dividers class="margin-vertical" v-if="!loading">
@@ -91,8 +91,8 @@
                 class="list-item-with-header-and-title"
                 link="#" no-chevron
                 :class="{ 'disabled': !allVisibleAccounts.length }"
-                :header="$t('Default Account')"
+                :header="tt('Default Account')"
-                :title="getNameByKeyValue(allAccounts, newProfile.defaultAccountId, 'id', 'name', $t('Unspecified'))"
+                :title="Account.findAccountNameById(allAccounts, newProfile.defaultAccountId, tt('Unspecified'))"
                 @click="showAccountSheet = true"
             >
                 <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category"
@@ -111,9 +111,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Editable Transaction Range')"
+                :header="tt('Editable Transaction Range')"
-                :title="getNameByKeyValue(allTransactionEditScopeTypes, newProfile.transactionEditScope, 'type', 'displayName')"
+                :title="findDisplayNameByType(allTransactionEditScopeTypes, newProfile.transactionEditScope)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Editable Transaction Range'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Editable Transaction Range'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.transactionEditScope">
                     <option :value="option.type"
@@ -122,15 +122,15 @@
                 </select>
             </f7-list-item>
 
-            <f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="$t(extendInputInvalidProblemMessage)"></f7-list-item>
+            <f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="tt(extendInputInvalidProblemMessage || '')"></f7-list-item>
         </f7-list>
 
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :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="newProfile.language">
                     <option :value="language.languageTag"
                             :key="language.languageTag"
@@ -140,8 +140,8 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :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">
@@ -158,9 +158,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :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="newProfile.firstDayOfWeek">
                     <option :value="weekDay.type"
@@ -173,9 +173,9 @@
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Long Date Format')"
+                :header="tt('Long Date Format')"
-                :title="getNameByKeyValue(allLongDateFormats, newProfile.longDateFormat, 'type', 'displayName')"
+                :title="findDisplayNameByType(allLongDateFormats, newProfile.longDateFormat)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Long Date Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Long Date Format'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Long Date Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Long Date Format'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.longDateFormat">
                     <option :value="format.type"
@@ -186,9 +186,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Short Date Format')"
+                :header="tt('Short Date Format')"
-                :title="getNameByKeyValue(allShortDateFormats, newProfile.shortDateFormat, 'type', 'displayName')"
+                :title="findDisplayNameByType(allShortDateFormats, newProfile.shortDateFormat)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Short Date Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Short Date Format'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Short Date Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Short Date Format'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.shortDateFormat">
                     <option :value="format.type"
@@ -199,9 +199,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Long Time Format')"
+                :header="tt('Long Time Format')"
-                :title="getNameByKeyValue(allLongTimeFormats, newProfile.longTimeFormat, 'type', 'displayName')"
+                :title="findDisplayNameByType(allLongTimeFormats, newProfile.longTimeFormat)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Long Time Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Long Time Format'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Long Time Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Long Time Format'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.longTimeFormat">
                     <option :value="format.type"
@@ -212,9 +212,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Short Time Format')"
+                :header="tt('Short Time Format')"
-                :title="getNameByKeyValue(allShortTimeFormats, newProfile.shortTimeFormat, 'type', 'displayName')"
+                :title="findDisplayNameByType(allShortTimeFormats, newProfile.shortTimeFormat)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Short Time Format'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Short Time Format'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Short Time Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Short Time Format'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.shortTimeFormat">
                     <option :value="format.type"
@@ -227,9 +227,9 @@
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Currency Display Mode')"
+                :header="tt('Currency Display Mode')"
-                :title="getNameByKeyValue(allCurrencyDisplayTypes, newProfile.currencyDisplayType, 'type', 'displayName')"
+                :title="findDisplayNameByType(allCurrencyDisplayTypes, newProfile.currencyDisplayType)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Display Mode'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Currency Display Mode'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Display Mode'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Currency Display Mode'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.currencyDisplayType">
                     <option :value="format.type"
@@ -240,9 +240,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Digit Grouping')"
+                :header="tt('Digit Grouping')"
-                :title="getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'displayName')"
+                :title="findDisplayNameByType(allDigitGroupingTypes, newProfile.digitGrouping)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Digit Grouping'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Digit Grouping'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Digit Grouping'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Digit Grouping'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.digitGrouping">
                     <option :value="format.type"
@@ -253,10 +253,10 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :disabled="!getNameByKeyValue(allDigitGroupingTypes, newProfile.digitGrouping, 'type', 'enabled')"
+                :disabled="!supportDigitGroupingSymbol"
-                :header="$t('Digit Grouping Symbol')"
+                :header="tt('Digit Grouping Symbol')"
-                :title="getNameByKeyValue(allDigitGroupingSymbols, newProfile.digitGroupingSymbol, 'type', 'displayName')"
+                :title="findDisplayNameByType(allDigitGroupingSymbols, newProfile.digitGroupingSymbol)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Digit Grouping Symbol'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Digit Grouping Symbol'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Digit Grouping Symbol'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Digit Grouping Symbol'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.digitGroupingSymbol">
                     <option :value="format.type"
@@ -267,9 +267,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Decimal Separator')"
+                :header="tt('Decimal Separator')"
-                :title="getNameByKeyValue(allDecimalSeparators, newProfile.decimalSeparator, 'type', 'displayName')"
+                :title="findDisplayNameByType(allDecimalSeparators, newProfile.decimalSeparator)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Decimal Separator'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Decimal Separator'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Decimal Separator'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Decimal Separator'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.decimalSeparator">
                     <option :value="format.type"
@@ -282,9 +282,9 @@
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Expense Amount Color')"
+                :header="tt('Expense Amount Color')"
-                :title="getNameByKeyValue(allExpenseAmountColorTypes, newProfile.expenseAmountColor, 'type', 'displayName')"
+                :title="findDisplayNameByType(allExpenseAmountColorTypes, newProfile.expenseAmountColor)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Color'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Expense Amount Color'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Color'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Expense Amount Color'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.expenseAmountColor">
                     <option :value="format.type"
@@ -295,9 +295,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Income Amount Color')"
+                :header="tt('Income Amount Color')"
-                :title="getNameByKeyValue(allIncomeAmountColorTypes, newProfile.incomeAmountColor, 'type', 'displayName')"
+                :title="findDisplayNameByType(allIncomeAmountColorTypes, newProfile.incomeAmountColor)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Color'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Income Amount Color'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Color'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Income Amount Color'), popupCloseLinkText: tt('Done') }"
             >
                 <select v-model="newProfile.incomeAmountColor">
                     <option :value="format.type"
@@ -306,22 +306,22 @@
                 </select>
             </f7-list-item>
 
-            <f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="$t(langAndRegionInputInvalidProblemMessage)"></f7-list-item>
+            <f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="tt(langAndRegionInputInvalidProblemMessage || '')"></f7-list-item>
         </f7-list>
 
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
                 <f7-actions-button :class="{ 'disabled': loading || resending }" @click="resendVerifyEmail"
-                                   v-if="isUserVerifyEmailEnabled && !loading && !emailVerified"
+                                   v-if="isUserVerifyEmailEnabled() && !loading && !emailVerified"
-                >{{ $t('Resend Validation Email') }}</f7-actions-button>
+                >{{ tt('Resend Validation Email') }}</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>
 
-        <password-input-sheet :title="$t('Modify Password')"
+        <password-input-sheet :title="tt('Modify Password')"
-                              :hint="$t('Please enter your current password when modifying your password')"
+                              :hint="tt('Please enter your current password when modifying your password')"
                               :confirm-disabled="saving"
                               :cancel-disabled="saving"
                               v-model:show="showInputPasswordSheet"
@@ -331,356 +331,175 @@
     </f7-page>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import { ref, computed } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
+import { useUserProfilePageBase } from '@/views/base/users/UserProfilePageBase.ts';
+
 import { useRootStore } from '@/stores/index.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
-import { useOverviewStore } from '@/stores/overview.ts';
 
-import { getNameByKeyValue } from '@/lib/common.ts';
+import type { UserProfileResponse } from '@/models/user.ts';
-import { getCategorizedAccounts } from '@/lib/account.ts';
+import { Account } from '@/models/account.ts';
+
+import { findDisplayNameByType } from '@/lib/common.ts';
 import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
-import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
-export default {
+const props = defineProps<{
-    props: [
+    f7router: Router.Router;
-        'f7router'
+}>();
-    ],
-    data() {
-        return {
-            newProfile: {
-                password: '',
-                confirmPassword: '',
-                email: '',
-                nickname: '',
-                defaultAccountId: '',
-                transactionEditScope: 1,
-                language: '',
-                defaultCurrency: '',
-                firstDayOfWeek: 0,
-                longDateFormat: 0,
-                shortDateFormat: 0,
-                longTimeFormat: 0,
-                shortTimeFormat: 0,
-                decimalSeparator: 0,
-                digitGroupingSymbol: 0,
-                digitGrouping: 0,
-                currencyDisplayType: 0,
-                expenseAmountColor: 0,
-                incomeAmountColor: 0
-            },
-            oldProfile: {
-                email: '',
-                nickname: '',
-                defaultAccountId: '',
-                transactionEditScope: 1,
-                language: '',
-                defaultCurrency: '',
-                firstDayOfWeek: 0,
-                longDateFormat: 0,
-                shortDateFormat: 0,
-                longTimeFormat: 0,
-                shortTimeFormat: 0,
-                decimalSeparator: 0,
-                digitGroupingSymbol: 0,
-                digitGrouping: 0,
-                currencyDisplayType: 0,
-                expenseAmountColor: 0,
-                incomeAmountColor: 0
-            },
-            emailVerified: false,
-            currentPassword: '',
-            loading: true,
-            loadingError: null,
-            resending: false,
-            saving: false,
-            showInputPasswordSheet: false,
-            showAccountSheet: false,
-            showMoreActionSheet: false
-        };
-    },
-    computed: {
-        ...mapStores(useRootStore, useSettingsStore, useUserStore, useAccountsStore, useOverviewStore),
-        allLanguages() {
-            return this.$locale.getAllLanguageInfoArray(true);
-        },
-        allCurrencies() {
-            return this.$locale.getAllCurrencies();
-        },
-        allAccounts() {
-            return this.accountsStore.allPlainAccounts;
-        },
-        allVisibleAccounts() {
-            return this.accountsStore.allVisiblePlainAccounts;
-        },
-        allVisibleCategorizedAccounts() {
-            return getCategorizedAccounts(this.allVisibleAccounts);
-        },
-        allWeekDays() {
-            return this.$locale.getAllWeekDays();
-        },
-        allLongDateFormats() {
-            return this.$locale.getAllLongDateFormats();
-        },
-        allShortDateFormats() {
-            return this.$locale.getAllShortDateFormats();
-        },
-        allLongTimeFormats() {
-            return this.$locale.getAllLongTimeFormats();
-        },
-        allShortTimeFormats() {
-            return this.$locale.getAllShortTimeFormats();
-        },
-        allDecimalSeparators() {
-            return this.$locale.getAllDecimalSeparators();
-        },
-        allDigitGroupingSymbols() {
-            return this.$locale.getAllDigitGroupingSymbols();
-        },
-        allDigitGroupingTypes() {
-            return this.$locale.getAllDigitGroupingTypes();
-        },
-        allCurrencyDisplayTypes() {
-            return this.$locale.getAllCurrencyDisplayTypes(this.settingsStore, this.userStore);
-        },
-        allExpenseAmountColorTypes() {
-            return this.$locale.getAllExpenseAmountColors();
-        },
-        allIncomeAmountColorTypes() {
-            return this.$locale.getAllIncomeAmountColors();
-        },
-        allTransactionEditScopeTypes() {
-            return this.$locale.getAllTransactionEditScopeTypes();
-        },
-        currentLanguageName() {
-            for (let i = 0; i < this.allLanguages.length; i++) {
-                if (this.allLanguages[i].languageTag === this.newProfile.language) {
-                    return this.allLanguages[i].displayName;
-                }
-            }
 
-            return this.$t('Unknown');
+const { tt, getCurrencyName } = useI18n();
-        },
+const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
-        currentDayOfWeekName() {
-            return getNameByKeyValue(this.allWeekDays, this.newProfile.firstDayOfWeek, 'type', 'displayName');
-        },
-        isUserVerifyEmailEnabled() {
-            return isUserVerifyEmailEnabled();
-        },
-        inputIsNotChanged() {
-            return !!this.inputIsNotChangedProblemMessage;
-        },
-        inputIsInvalid() {
-            return !!this.inputInvalidProblemMessage;
-        },
-        extendInputIsInvalid() {
-            return !!this.extendInputInvalidProblemMessage;
-        },
-        langAndRegionInputIsInvalid() {
-            return !!this.langAndRegionInputInvalidProblemMessage;
-        },
-        inputIsNotChangedProblemMessage() {
-            if (!this.newProfile.password && !this.newProfile.confirmPassword && !this.newProfile.email && !this.newProfile.nickname) {
-                return 'Nothing has been modified';
-            } else if (!this.newProfile.password && !this.newProfile.confirmPassword &&
-                this.newProfile.email === this.oldProfile.email &&
-                this.newProfile.nickname === this.oldProfile.nickname &&
-                this.newProfile.defaultAccountId === this.oldProfile.defaultAccountId &&
-                this.newProfile.transactionEditScope === this.oldProfile.transactionEditScope &&
-                this.newProfile.language === this.oldProfile.language &&
-                this.newProfile.defaultCurrency === this.oldProfile.defaultCurrency &&
-                this.newProfile.firstDayOfWeek === this.oldProfile.firstDayOfWeek &&
-                this.newProfile.longDateFormat === this.oldProfile.longDateFormat &&
-                this.newProfile.shortDateFormat === this.oldProfile.shortDateFormat &&
-                this.newProfile.longTimeFormat === this.oldProfile.longTimeFormat &&
-                this.newProfile.shortTimeFormat === this.oldProfile.shortTimeFormat &&
-                this.newProfile.decimalSeparator === this.oldProfile.decimalSeparator &&
-                this.newProfile.digitGroupingSymbol === this.oldProfile.digitGroupingSymbol &&
-                this.newProfile.digitGrouping === this.oldProfile.digitGrouping &&
-                this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType &&
-                this.newProfile.expenseAmountColor === this.oldProfile.expenseAmountColor &&
-                this.newProfile.incomeAmountColor === this.oldProfile.incomeAmountColor) {
-                return 'Nothing has been modified';
-            } else if (!this.newProfile.password && this.newProfile.confirmPassword) {
-                return 'Password cannot be blank';
-            } else if (this.newProfile.password && !this.newProfile.confirmPassword) {
-                return 'Password confirmation cannot be blank';
-            } else {
-                return null;
-            }
-        },
-        inputInvalidProblemMessage() {
-            if (this.newProfile.password && this.newProfile.confirmPassword && this.newProfile.password !== this.newProfile.confirmPassword) {
-                return 'Password and password confirmation do not match';
-            } else if (!this.newProfile.email) {
-                return 'Email address cannot be blank';
-            } else if (!this.newProfile.nickname) {
-                return 'Nickname cannot be blank';
-            } else if (!this.newProfile.defaultCurrency) {
-                return 'Default currency cannot be blank';
-            } else {
-                return null;
-            }
-        },
-        extendInputInvalidProblemMessage() {
-            return null;
-        },
-        langAndRegionInputInvalidProblemMessage() {
-            if (!this.newProfile.defaultCurrency) {
-                return 'Default currency cannot be blank';
-            } else {
-                return null;
-            }
-        }
-    },
-    created() {
-        const self = this;
 
-        self.loading = true;
+const {
+    newProfile,
+    emailVerified,
+    loading,
+    resending,
+    saving,
+    allLanguages,
+    allCurrencies,
+    allAccounts,
+    allVisibleAccounts,
+    allVisibleCategorizedAccounts,
+    allWeekDays,
+    allLongDateFormats,
+    allShortDateFormats,
+    allLongTimeFormats,
+    allShortTimeFormats,
+    allDecimalSeparators,
+    allDigitGroupingSymbols,
+    allDigitGroupingTypes,
+    allCurrencyDisplayTypes,
+    allExpenseAmountColorTypes,
+    allIncomeAmountColorTypes,
+    allTransactionEditScopeTypes,
+    supportDigitGroupingSymbol,
+    inputIsNotChangedProblemMessage,
+    inputInvalidProblemMessage,
+    langAndRegionInputInvalidProblemMessage,
+    extendInputInvalidProblemMessage,
+    inputIsNotChanged,
+    inputIsInvalid,
+    langAndRegionInputIsInvalid,
+    extendInputIsInvalid,
+    setCurrentUserProfile,
+    doAfterProfileUpdate
+} = useUserProfilePageBase();
 
-        const promises = [
+const rootStore = useRootStore();
-            self.accountsStore.loadAllAccounts({ force: false }),
+const userStore = useUserStore();
-            self.userStore.getCurrentUserProfile()
+const accountsStore = useAccountsStore();
-        ];
 
-        Promise.all(promises).then(responses => {
+const currentPassword = ref<string>('');
-            const profile = responses[1];
+const loadingError = ref<unknown | null>(null);
-            self.setCurrentUserProfile(profile);
+const showInputPasswordSheet = ref<boolean>(false);
-            self.loading = false;
+const showAccountSheet = ref<boolean>(false);
-        }).catch(error => {
+const showMoreActionSheet = ref<boolean>(false);
-            if (error.processed) {
-                self.loading = false;
-            } else {
-                self.loadingError = error;
-                self.$toast(error.message || error);
-            }
-        });
-    },
-    methods: {
-        onPageAfterIn() {
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        save() {
-            const self = this;
-            const router = self.f7router;
 
-            self.showInputPasswordSheet = false;
+const currentLanguageName = computed<string>(() => {
-
+    for (let i = 0; i < allLanguages.value.length; i++) {
-            const problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage || self.langAndRegionInputInvalidProblemMessage;
+        if (allLanguages.value[i].languageTag === newProfile.value.language) {
-
+            return allLanguages.value[i].displayName;
-            if (problemMessage) {
-                self.$alert(problemMessage);
-                return;
-            }
-
-            if (self.newProfile.password && !self.currentPassword) {
-                self.showInputPasswordSheet = true;
-                return;
-            }
-
-            self.saving = true;
-            self.$showLoading(() => self.saving);
-
-            self.rootStore.updateUserProfile({
-                profile: self.newProfile,
-                currentPassword: self.currentPassword
-            }).then(response => {
-                self.saving = false;
-                self.$hideLoading();
-                self.currentPassword = '';
-
-                if (response.user) {
-                    if (response.user.firstDayOfWeek !== self.oldProfile.firstDayOfWeek) {
-                        this.overviewStore.resetTransactionOverview();
-                    }
-
-                    self.setCurrentUserProfile(response.user);
-
-                    const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
-                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
-
-                    setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
-                }
-
-                self.$toast('Your profile has been successfully updated');
-                router.back();
-            }).catch(error => {
-                self.saving = false;
-                self.$hideLoading();
-                self.currentPassword = '';
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        resendVerifyEmail() {
-            const self = this;
-
-            self.resending = true;
-            self.$showLoading(() => self.resending);
-
-            self.rootStore.resendVerifyEmailByLoginedUser().then(() => {
-                self.resending = false;
-                self.$hideLoading();
-
-                self.$toast('Validation email has been sent');
-            }).catch(error => {
-                self.resending = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        getNameByKeyValue(src, value, keyField, nameField, defaultName) {
-            return getNameByKeyValue(src, value, keyField, nameField, defaultName);
-        },
-        getCurrencyName(currencyCode) {
-            return this.$locale.getCurrencyName(currencyCode);
-        },
-        setCurrentUserProfile(profile) {
-            this.emailVerified = profile.emailVerified;
-
-            this.oldProfile.email = profile.email;
-            this.oldProfile.nickname = profile.nickname;
-            this.oldProfile.defaultAccountId = profile.defaultAccountId;
-            this.oldProfile.transactionEditScope = profile.transactionEditScope;
-            this.oldProfile.language = profile.language;
-            this.oldProfile.defaultCurrency = profile.defaultCurrency;
-            this.oldProfile.firstDayOfWeek = profile.firstDayOfWeek;
-            this.oldProfile.longDateFormat = profile.longDateFormat;
-            this.oldProfile.shortDateFormat = profile.shortDateFormat;
-            this.oldProfile.longTimeFormat = profile.longTimeFormat;
-            this.oldProfile.shortTimeFormat = profile.shortTimeFormat;
-            this.oldProfile.decimalSeparator = profile.decimalSeparator;
-            this.oldProfile.digitGroupingSymbol = profile.digitGroupingSymbol;
-            this.oldProfile.digitGrouping = profile.digitGrouping;
-            this.oldProfile.currencyDisplayType = profile.currencyDisplayType;
-            this.oldProfile.expenseAmountColor = profile.expenseAmountColor;
-            this.oldProfile.incomeAmountColor = profile.incomeAmountColor;
-
-            this.newProfile.email = this.oldProfile.email
-            this.newProfile.nickname = this.oldProfile.nickname;
-            this.newProfile.defaultAccountId = this.oldProfile.defaultAccountId;
-            this.newProfile.transactionEditScope = this.oldProfile.transactionEditScope;
-            this.newProfile.language = this.oldProfile.language;
-            this.newProfile.defaultCurrency = this.oldProfile.defaultCurrency;
-            this.newProfile.firstDayOfWeek = this.oldProfile.firstDayOfWeek;
-            this.newProfile.longDateFormat = this.oldProfile.longDateFormat;
-            this.newProfile.shortDateFormat = this.oldProfile.shortDateFormat;
-            this.newProfile.longTimeFormat = this.oldProfile.longTimeFormat;
-            this.newProfile.shortTimeFormat = this.oldProfile.shortTimeFormat;
-            this.newProfile.decimalSeparator = this.oldProfile.decimalSeparator;
-            this.newProfile.digitGroupingSymbol = this.oldProfile.digitGroupingSymbol;
-            this.newProfile.digitGrouping = this.oldProfile.digitGrouping;
-            this.newProfile.currencyDisplayType = this.oldProfile.currencyDisplayType;
-            this.newProfile.expenseAmountColor = this.oldProfile.expenseAmountColor;
-            this.newProfile.incomeAmountColor = this.oldProfile.incomeAmountColor;
         }
     }
-};
+
+    return tt('Unknown');
+});
+
+const currentDayOfWeekName = computed<string | null>(() => findDisplayNameByType(allWeekDays.value, newProfile.value.firstDayOfWeek));
+
+function init(): void {
+    loading.value = true;
+
+    const promises = [
+        accountsStore.loadAllAccounts({ force: false }),
+        userStore.getCurrentUserProfile()
+    ];
+
+    Promise.all(promises).then(responses => {
+        const profile = responses[1] as UserProfileResponse;
+        setCurrentUserProfile(profile);
+        loading.value = false;
+    }).catch(error => {
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
+        }
+    });
+}
+
+function save(): void {
+    const router = props.f7router;
+
+    showInputPasswordSheet.value = false;
+
+    const problemMessage = inputIsNotChangedProblemMessage.value || inputInvalidProblemMessage.value || extendInputInvalidProblemMessage.value || langAndRegionInputInvalidProblemMessage.value;
+
+    if (problemMessage) {
+        showAlert(problemMessage);
+        return;
+    }
+
+    if (newProfile.value.password && !currentPassword.value) {
+        showInputPasswordSheet.value = true;
+        return;
+    }
+
+    saving.value = true;
+    showLoading(() => saving.value);
+
+    rootStore.updateUserProfile({
+        profile: newProfile.value,
+        currentPassword: currentPassword.value
+    }).then(response => {
+        saving.value = false;
+        hideLoading();
+        currentPassword.value = '';
+
+        doAfterProfileUpdate(response.user);
+        showToast('Your profile has been successfully updated');
+        router.back();
+    }).catch(error => {
+        saving.value = false;
+        hideLoading();
+        currentPassword.value = '';
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function resendVerifyEmail(): void {
+    resending.value = true;
+    showLoading(() => resending.value);
+
+    rootStore.resendVerifyEmailByLoginedUser().then(() => {
+        resending.value = false;
+        hideLoading();
+
+        showToast('Validation email has been sent');
+    }).catch(error => {
+        resending.value = false;
+        hideLoading();
+
+        if (!error.processed) {
+            showToast(error.message || error);
+        }
+    });
+}
+
+function onPageAfterIn(): void {
+    routeBackOnError(props.f7router, loadingError);
+}
+
+init();
 </script>