migrate signup page to composition API and typescript
This commit is contained in:
MaysWind
@@ -46,7 +46,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface StepBarItem {
|
||||
export interface StepBarItem {
|
||||
name: string;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
export interface CurrencyInfo {
|
||||
readonly code: string,
|
||||
readonly fraction?: number,
|
||||
readonly symbol?: {
|
||||
readonly normal: string,
|
||||
readonly plural?: string
|
||||
},
|
||||
readonly unit: string
|
||||
}
|
||||
import type { CurrencyInfo } from '@/core/currency.ts';
|
||||
|
||||
// ISO 4217
|
||||
// Reference: https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
import type { TypeAndName } from './base.ts';
|
||||
|
||||
export interface CurrencyInfo {
|
||||
readonly code: string,
|
||||
readonly fraction?: number,
|
||||
readonly symbol?: {
|
||||
readonly normal: string,
|
||||
readonly plural?: string
|
||||
},
|
||||
readonly unit: string
|
||||
}
|
||||
|
||||
export interface LocalizedCurrencyInfo {
|
||||
readonly currencyCode: string,
|
||||
readonly displayName: string
|
||||
}
|
||||
|
||||
export enum CurrencyDisplaySymbol {
|
||||
None = 0,
|
||||
Symbol = 1,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import type { TypeAndDisplayName } from '@/core/base.ts';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
|
||||
export function isFunction(val: unknown): val is Function {
|
||||
return typeof(val) === 'function';
|
||||
@@ -310,6 +312,16 @@ export function getItemByKeyValue<T>(src: Record<string, T>[] | Record<string, R
|
||||
return null;
|
||||
}
|
||||
|
||||
export function findDisplayNameByType(items: TypeAndDisplayName[], type: number): string | null {
|
||||
for (const item of items) {
|
||||
if (item.type === type) {
|
||||
return item.displayName;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function getNameByKeyValue<V, N>(src: Record<string, N | V>[] | Record<string, Record<string, N | V>>, value: V, keyField: string | null, nameField: string, defaultName?: N): N | undefined {
|
||||
if (isArray(src)) {
|
||||
const arr = src as Record<string, N | V>[];
|
||||
|
||||
+26
-1
@@ -38,6 +38,7 @@ import {
|
||||
} from '@/core/numeral.ts';
|
||||
|
||||
import {
|
||||
type LocalizedCurrencyInfo,
|
||||
type CurrencyPrependAndAppendText,
|
||||
CurrencyDisplayType,
|
||||
CurrencySortingType
|
||||
@@ -615,6 +616,29 @@ export function useI18n() {
|
||||
}];
|
||||
}
|
||||
|
||||
function getAllCurrencies(): LocalizedCurrencyInfo[] {
|
||||
const allCurrencies: LocalizedCurrencyInfo[] = [];
|
||||
|
||||
for (const currencyCode in ALL_CURRENCIES) {
|
||||
if (!Object.prototype.hasOwnProperty.call(ALL_CURRENCIES, currencyCode)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const localizedCurrencyInfo: LocalizedCurrencyInfo = {
|
||||
currencyCode: currencyCode,
|
||||
displayName: getCurrencyName(currencyCode)
|
||||
};
|
||||
|
||||
allCurrencies.push(localizedCurrencyInfo);
|
||||
}
|
||||
|
||||
allCurrencies.sort(function(c1, c2) {
|
||||
return c1.displayName.localeCompare(c2.displayName);
|
||||
})
|
||||
|
||||
return allCurrencies;
|
||||
}
|
||||
|
||||
function getAllMeridiemIndicators(): LocalizedMeridiemIndicator {
|
||||
const allMeridiemIndicators = MeridiemIndicator.values();
|
||||
const meridiemIndicatorNames = [];
|
||||
@@ -653,7 +677,7 @@ export function useI18n() {
|
||||
return getAllWeekdayNames('min');
|
||||
}
|
||||
|
||||
function getAllWeekDays(firstDayOfWeek: number): TypeAndDisplayName[] {
|
||||
function getAllWeekDays(firstDayOfWeek?: number): TypeAndDisplayName[] {
|
||||
const ret: TypeAndDisplayName[] = [];
|
||||
const allWeekDays = WeekDay.values();
|
||||
|
||||
@@ -1323,6 +1347,7 @@ export function useI18n() {
|
||||
// get all localized info of specified type
|
||||
getAllLanguageOptions,
|
||||
getAllEnableDisableOptions,
|
||||
getAllCurrencies,
|
||||
getAllMeridiemIndicators,
|
||||
getAllLongMonthNames,
|
||||
getAllShortMonthNames,
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
// @ts-expect-error the above file is migrating to ts
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import type { RegisterResponse } from '@/models/auth_response.ts';
|
||||
import type { User } from '@/models/user.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
|
||||
export function useSignupPageBase() {
|
||||
const { tt, getCurrentLanguageTag, getLanguageInfo, setLanguage } = useI18n();
|
||||
|
||||
const rootStore = useRootStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
const exchangeRatesStore = useExchangeRatesStore();
|
||||
|
||||
const user = ref<User>(userStore.generateNewUserModel(getCurrentLanguageTag()));
|
||||
const submitting = ref<boolean>(false);
|
||||
|
||||
const currentLocale = computed<string>({
|
||||
get: () => getCurrentLanguageTag(),
|
||||
set: (value: string) => {
|
||||
const isCurrencyDefault = user.value.defaultCurrency === settingsStore.localeDefaultSettings.currency;
|
||||
const isFirstWeekDayDefault = user.value.firstDayOfWeek === settingsStore.localeDefaultSettings.firstDayOfWeek;
|
||||
|
||||
user.value.language = value;
|
||||
|
||||
const localeDefaultSettings = setLanguage(value);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
if (isCurrencyDefault) {
|
||||
user.value.defaultCurrency = settingsStore.localeDefaultSettings.currency;
|
||||
}
|
||||
|
||||
if (isFirstWeekDayDefault) {
|
||||
user.value.firstDayOfWeek = settingsStore.localeDefaultSettings.firstDayOfWeek;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const currentLanguageName = computed<string>(() => {
|
||||
const languageInfo = getLanguageInfo(currentLocale.value);
|
||||
|
||||
if (!languageInfo) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return languageInfo.displayName;
|
||||
});
|
||||
|
||||
const inputEmptyProblemMessage = computed<string>(() => {
|
||||
if (!user.value.username) {
|
||||
return 'Username cannot be blank';
|
||||
} else if (!user.value.password) {
|
||||
return 'Password cannot be blank';
|
||||
} else if (!user.value.confirmPassword) {
|
||||
return 'Password confirmation cannot be blank';
|
||||
} else if (!user.value.email) {
|
||||
return 'Email address cannot be blank';
|
||||
} else if (!user.value.nickname) {
|
||||
return 'Nickname cannot be blank';
|
||||
} else if (!user.value.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
const inputInvalidProblemMessage = computed<string>(() => {
|
||||
if (user.value.password && user.value.confirmPassword && user.value.password !== user.value.confirmPassword) {
|
||||
return 'Password and password confirmation do not match';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
const inputIsEmpty = computed<boolean>(() => !!inputEmptyProblemMessage.value);
|
||||
const inputIsInvalid = computed<boolean>(() => !!inputInvalidProblemMessage.value);
|
||||
|
||||
function getCategoryTypeName(categoryType: CategoryType): string {
|
||||
switch (categoryType) {
|
||||
case CategoryType.Income:
|
||||
return tt('Income Categories');
|
||||
case CategoryType.Expense:
|
||||
return tt('Expense Categories');
|
||||
case CategoryType.Transfer:
|
||||
return tt('Transfer Categories');
|
||||
default:
|
||||
return tt('Transaction Categories');
|
||||
}
|
||||
}
|
||||
|
||||
function doAfterSignupSuccess(response: RegisterResponse): void {
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = setLanguage(response.user.language);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (response.notificationContent) {
|
||||
rootStore.setNotificationContent(response.notificationContent);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// states
|
||||
user,
|
||||
submitting,
|
||||
// computed states
|
||||
currentLocale,
|
||||
currentLanguageName,
|
||||
inputEmptyProblemMessage,
|
||||
inputInvalidProblemMessage,
|
||||
inputIsEmpty,
|
||||
inputIsInvalid,
|
||||
// functions
|
||||
getCategoryTypeName,
|
||||
doAfterSignupSuccess
|
||||
};
|
||||
}
|
||||
+137
-225
@@ -2,8 +2,8 @@
|
||||
<div class="layout-wrapper">
|
||||
<router-link to="/">
|
||||
<div class="auth-logo d-flex align-start gap-x-3">
|
||||
<img alt="logo" class="login-page-logo" :src="ezBookkeepingLogoPath" />
|
||||
<h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
|
||||
<img alt="logo" class="login-page-logo" :src="APPLICATION_LOGO_PATH" />
|
||||
<h1 class="font-weight-medium leading-normal text-2xl">{{ tt('global.app.title') }}</h1>
|
||||
</div>
|
||||
</router-link>
|
||||
<v-row no-gutters class="auth-wrapper">
|
||||
@@ -25,10 +25,10 @@
|
||||
<v-window class="mt-5 disable-tab-transition" style="max-width: 700px" v-model="currentStep">
|
||||
<v-form>
|
||||
<v-window-item value="basicSetting">
|
||||
<h4 class="text-h4 mb-1">{{ $t('Basic Information') }}</h4>
|
||||
<h4 class="text-h4 mb-1">{{ tt('Basic Information') }}</h4>
|
||||
<p class="text-sm mt-2 mb-5">
|
||||
<span>{{ $t('Already have an account?') }}</span>
|
||||
<router-link class="ml-1" to="/login">{{ $t('Click here to log in') }}</router-link>
|
||||
<span>{{ tt('Already have an account?') }}</span>
|
||||
<router-link class="ml-1" to="/login">{{ tt('Click here to log in') }}</router-link>
|
||||
</p>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
@@ -36,8 +36,8 @@
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:label="$t('Username')"
|
||||
:placeholder="$t('Your username')"
|
||||
:label="tt('Username')"
|
||||
:placeholder="tt('Your username')"
|
||||
v-model="user.username"
|
||||
/>
|
||||
</v-col>
|
||||
@@ -47,8 +47,8 @@
|
||||
type="text"
|
||||
autocomplete="nickname"
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:label="$t('Nickname')"
|
||||
:placeholder="$t('Your nickname')"
|
||||
:label="tt('Nickname')"
|
||||
:placeholder="tt('Your nickname')"
|
||||
v-model="user.nickname"
|
||||
/>
|
||||
</v-col>
|
||||
@@ -59,8 +59,8 @@
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:label="$t('E-mail')"
|
||||
:placeholder="$t('Your email address')"
|
||||
:label="tt('E-mail')"
|
||||
:placeholder="tt('Your email address')"
|
||||
v-model="user.email"
|
||||
/>
|
||||
</v-col>
|
||||
@@ -71,8 +71,8 @@
|
||||
autocomplete="new-password"
|
||||
type="password"
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:label="$t('Password')"
|
||||
:placeholder="$t('Your password, at least 6 characters')"
|
||||
:label="tt('Password')"
|
||||
:placeholder="tt('Your password, at least 6 characters')"
|
||||
v-model="user.password"
|
||||
/>
|
||||
</v-col>
|
||||
@@ -81,8 +81,8 @@
|
||||
autocomplete="new-password"
|
||||
type="password"
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:label="$t('Confirm Password')"
|
||||
:placeholder="$t('Re-enter the password')"
|
||||
:label="tt('Confirm Password')"
|
||||
:placeholder="tt('Re-enter the password')"
|
||||
v-model="user.confirmPassword"
|
||||
/>
|
||||
</v-col>
|
||||
@@ -94,8 +94,8 @@
|
||||
item-title="displayName"
|
||||
item-value="languageTag"
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:label="$t('Language')"
|
||||
:placeholder="$t('Language')"
|
||||
:label="tt('Language')"
|
||||
:placeholder="tt('Language')"
|
||||
:items="allLanguages"
|
||||
v-model="currentLocale"
|
||||
/>
|
||||
@@ -109,10 +109,10 @@
|
||||
item-value="currencyCode"
|
||||
auto-select-first
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:label="$t('Default Currency')"
|
||||
:placeholder="$t('Default Currency')"
|
||||
:label="tt('Default Currency')"
|
||||
:placeholder="tt('Default Currency')"
|
||||
:items="allCurrencies"
|
||||
:no-data-text="$t('No results')"
|
||||
:no-data-text="tt('No results')"
|
||||
v-model="user.defaultCurrency"
|
||||
>
|
||||
<template #append-inner>
|
||||
@@ -126,8 +126,8 @@
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:label="$t('First Day of Week')"
|
||||
:placeholder="$t('First Day of Week')"
|
||||
:label="tt('First Day of Week')"
|
||||
:placeholder="tt('First Day of Week')"
|
||||
:items="allWeekDays"
|
||||
v-model="user.firstDayOfWeek"
|
||||
/>
|
||||
@@ -136,13 +136,13 @@
|
||||
</v-window-item>
|
||||
|
||||
<v-window-item value="presetCategories" class="signup-preset-categories">
|
||||
<h4 class="text-h4 mb-1">{{ $t('Preset Categories') }}</h4>
|
||||
<p class="text-sm mt-2 mb-2">{{ $t('Set whether to use preset transaction categories') }}</p>
|
||||
<h4 class="text-h4 mb-1">{{ tt('Preset Categories') }}</h4>
|
||||
<p class="text-sm mt-2 mb-2">{{ tt('Set whether to use preset transaction categories') }}</p>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-switch class="mb-2" :disabled="submitting || navigateToHomePage"
|
||||
:label="$t('Use Preset Transaction Categories')"
|
||||
:label="tt('Use Preset Transaction Categories')"
|
||||
v-model="usePresetCategories"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" class="text-right-sm">
|
||||
@@ -198,7 +198,7 @@
|
||||
</v-window-item>
|
||||
|
||||
<v-window-item value="finalResult" v-if="finalResultMessage">
|
||||
<h4 class="text-h4 mb-1">{{ $t('Registration Completed') }}</h4>
|
||||
<h4 class="text-h4 mb-1">{{ tt('Registration Completed') }}</h4>
|
||||
<p class="my-5">{{ finalResultMessage }}</p>
|
||||
</v-window-item>
|
||||
</v-form>
|
||||
@@ -208,23 +208,23 @@
|
||||
<v-btn :color="(currentStep === 'basicSetting' || currentStep === 'finalResult') ? 'default' : 'primary'"
|
||||
:disabled="currentStep === 'basicSetting' || currentStep === 'finalResult' || submitting || navigateToHomePage"
|
||||
:prepend-icon="icons.previous"
|
||||
@click="switchToPreviousTab">{{ $t('Previous') }}</v-btn>
|
||||
@click="switchToPreviousTab">{{ tt('Previous') }}</v-btn>
|
||||
<v-btn :color="(currentStep === 'presetCategories' || currentStep === 'finalResult') ? 'secondary' : 'primary'"
|
||||
:disabled="currentStep === 'presetCategories' || currentStep === 'finalResult' || submitting || navigateToHomePage"
|
||||
:append-icon="icons.next"
|
||||
@click="switchToNextTab"
|
||||
v-if="currentStep === 'basicSetting'">{{ $t('Next') }}</v-btn>
|
||||
v-if="currentStep === 'basicSetting'">{{ tt('Next') }}</v-btn>
|
||||
<v-btn color="teal"
|
||||
:disabled="submitting || navigateToHomePage"
|
||||
:append-icon="!submitting ? icons.submit : null"
|
||||
@click="submit"
|
||||
v-if="currentStep === 'presetCategories'">
|
||||
{{ $t('Submit') }}
|
||||
{{ tt('Submit') }}
|
||||
<v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
|
||||
</v-btn>
|
||||
<v-btn :append-icon="icons.next"
|
||||
@click="navigateToLogin"
|
||||
v-if="currentStep === 'finalResult'">{{ $t('Continue') }}</v-btn>
|
||||
v-if="currentStep === 'finalResult'">{{ tt('Continue') }}</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
@@ -234,22 +234,28 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
import type { StepBarItem } from '@/components/desktop/StepsBar.vue';
|
||||
|
||||
import { ref, computed, useTemplateRef } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
import type { LanguageOption } from '@/locales/index.ts';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useSignupPageBase } from '@/views/base/SignupPageBase.ts';
|
||||
|
||||
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
|
||||
import type { PartialRecord, TypeAndDisplayName } from '@/core/base.ts';
|
||||
import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
|
||||
import { type LocalizedPresetCategory, CategoryType } from '@/core/category.ts';
|
||||
import { ThemeType } from '@/core/theme.ts';
|
||||
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
|
||||
|
||||
import { categorizedArrayToPlainArray } from '@/lib/common.ts';
|
||||
import { isUserLogined } from '@/lib/userstate.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
|
||||
import {
|
||||
mdiArrowLeft,
|
||||
@@ -257,256 +263,162 @@ import {
|
||||
mdiCheck
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const userStore = useUserStore();
|
||||
const newUser = userStore.generateNewUserModel(this.$locale.getCurrentLanguageTag());
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
|
||||
return {
|
||||
user: newUser,
|
||||
currentStep: 'basicSetting',
|
||||
submitting: false,
|
||||
usePresetCategories: false,
|
||||
finalResultMessage: null,
|
||||
navigateToHomePage: false,
|
||||
icons: {
|
||||
const router = useRouter();
|
||||
const theme = useTheme();
|
||||
|
||||
const { tt, getAllLanguageOptions, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories } = useI18n();
|
||||
|
||||
const {
|
||||
user,
|
||||
submitting,
|
||||
currentLocale,
|
||||
currentLanguageName,
|
||||
inputEmptyProblemMessage,
|
||||
inputInvalidProblemMessage,
|
||||
getCategoryTypeName,
|
||||
doAfterSignupSuccess
|
||||
} = useSignupPageBase();
|
||||
|
||||
const rootStore = useRootStore();
|
||||
|
||||
const icons = {
|
||||
previous: mdiArrowLeft,
|
||||
next: mdiArrowRight,
|
||||
submit: mdiCheck
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useTransactionCategoriesStore, useExchangeRatesStore),
|
||||
ezBookkeepingLogoPath() {
|
||||
return APPLICATION_LOGO_PATH;
|
||||
},
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(false);
|
||||
},
|
||||
allCurrencies() {
|
||||
return this.$locale.getAllCurrencies();
|
||||
},
|
||||
allWeekDays() {
|
||||
return this.$locale.getAllWeekDays();
|
||||
},
|
||||
allPresetCategories() {
|
||||
return this.$locale.getAllTransactionDefaultCategories(0, this.currentLocale);
|
||||
},
|
||||
currentLocale: {
|
||||
get: function () {
|
||||
return this.$locale.getCurrentLanguageTag();
|
||||
},
|
||||
set: function (value) {
|
||||
const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.localeDefaultSettings.currency;
|
||||
const isFirstWeekDayDefault = this.user.firstDayOfWeek === this.settingsStore.localeDefaultSettings.firstDayOfWeek;
|
||||
};
|
||||
|
||||
this.user.language = value;
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
|
||||
const localeDefaultSettings = this.$locale.setLanguage(value);
|
||||
this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
const currentStep = ref<string>('basicSetting');
|
||||
const usePresetCategories = ref<boolean>(false);
|
||||
const finalResultMessage = ref<string | null>(null);
|
||||
const navigateToHomePage = ref<boolean>(false);
|
||||
|
||||
if (isCurrencyDefault) {
|
||||
this.user.defaultCurrency = this.settingsStore.localeDefaultSettings.currency;
|
||||
}
|
||||
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
|
||||
const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
|
||||
const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
|
||||
const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(0, currentLocale.value));
|
||||
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
|
||||
|
||||
if (isFirstWeekDayDefault) {
|
||||
this.user.firstDayOfWeek = this.settingsStore.localeDefaultSettings.firstDayOfWeek;
|
||||
}
|
||||
}
|
||||
},
|
||||
isDarkMode() {
|
||||
return this.globalTheme.global.name.value === ThemeType.Dark;
|
||||
},
|
||||
currentLanguageName() {
|
||||
const languageInfo = this.$locale.getLanguageInfo(this.currentLocale);
|
||||
|
||||
if (!languageInfo) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return languageInfo.displayName;
|
||||
},
|
||||
allSteps() {
|
||||
const allSteps = computed<StepBarItem[]>(() => {
|
||||
const allSteps = [
|
||||
{
|
||||
name: 'basicSetting',
|
||||
title: this.$t('User Information'),
|
||||
subTitle: this.$t('Basic Information')
|
||||
title: tt('User Information'),
|
||||
subTitle: tt('Basic Information')
|
||||
},
|
||||
{
|
||||
name: 'presetCategories',
|
||||
title: this.$t('Transaction Categories'),
|
||||
subTitle: this.$t('Preset Categories')
|
||||
title: tt('Transaction Categories'),
|
||||
subTitle: tt('Preset Categories')
|
||||
}
|
||||
];
|
||||
|
||||
if (this.finalResultMessage) {
|
||||
if (finalResultMessage.value) {
|
||||
allSteps.push({
|
||||
name: 'finalResult',
|
||||
title: this.$t('Complete'),
|
||||
subTitle: this.$t('Registration Completed')
|
||||
title: tt('Complete'),
|
||||
subTitle: tt('Registration Completed')
|
||||
});
|
||||
}
|
||||
|
||||
return allSteps;
|
||||
},
|
||||
inputIsEmpty() {
|
||||
return !!this.inputEmptyProblemMessage;
|
||||
},
|
||||
inputIsInvalid() {
|
||||
return !!this.inputInvalidProblemMessage;
|
||||
},
|
||||
inputEmptyProblemMessage() {
|
||||
if (!this.user.username) {
|
||||
return 'Username cannot be blank';
|
||||
} else if (!this.user.nickname) {
|
||||
return 'Nickname cannot be blank';
|
||||
} else if (!this.user.email) {
|
||||
return 'Email address cannot be blank';
|
||||
} else if (!this.user.password) {
|
||||
return 'Password cannot be blank';
|
||||
} else if (!this.user.confirmPassword) {
|
||||
return 'Password confirmation cannot be blank';
|
||||
} else if (!this.user.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
inputInvalidProblemMessage() {
|
||||
if (this.user.password && this.user.confirmPassword && this.user.password !== this.user.confirmPassword) {
|
||||
return 'Password and password confirmation do not match';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const theme = useTheme();
|
||||
});
|
||||
|
||||
return {
|
||||
globalTheme: theme
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
switchToTab(tabName) {
|
||||
if (this.submitting || this.currentStep === 'finalResult' || this.navigateToHomePage) {
|
||||
function switchToTab(tabName: string): void {
|
||||
if (submitting.value || currentStep.value === 'finalResult' || navigateToHomePage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (tabName === 'basicSetting') {
|
||||
this.currentStep = 'basicSetting';
|
||||
currentStep.value = 'basicSetting';
|
||||
} else if (tabName === 'presetCategories') {
|
||||
const problemMessage = this.inputEmptyProblemMessage || this.inputInvalidProblemMessage;
|
||||
const problemMessage = inputEmptyProblemMessage.value || inputInvalidProblemMessage.value;
|
||||
|
||||
if (problemMessage) {
|
||||
this.$refs.snackbar.showMessage(problemMessage);
|
||||
snackbar.value?.showMessage(problemMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentStep = 'presetCategories';
|
||||
currentStep.value = 'presetCategories';
|
||||
}
|
||||
},
|
||||
switchToPreviousTab() {
|
||||
this.switchToTab('basicSetting');
|
||||
},
|
||||
switchToNextTab() {
|
||||
this.switchToTab('presetCategories');
|
||||
},
|
||||
submit() {
|
||||
const self = this;
|
||||
}
|
||||
|
||||
const problemMessage = self.inputEmptyProblemMessage || self.inputInvalidProblemMessage;
|
||||
function switchToPreviousTab(): void {
|
||||
switchToTab('basicSetting');
|
||||
}
|
||||
|
||||
function switchToNextTab(): void {
|
||||
switchToTab('presetCategories');
|
||||
}
|
||||
|
||||
function submit(): void {
|
||||
const problemMessage = inputEmptyProblemMessage.value || inputInvalidProblemMessage.value;
|
||||
|
||||
if (problemMessage) {
|
||||
self.$refs.snackbar.showMessage(problemMessage);
|
||||
snackbar.value?.showMessage(problemMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
self.navigateToHomePage = false;
|
||||
self.submitting = true;
|
||||
navigateToHomePage.value = false;
|
||||
submitting.value = true;
|
||||
|
||||
let presetCategories = [];
|
||||
let presetCategories: LocalizedPresetCategory[] = [];
|
||||
|
||||
if (self.usePresetCategories) {
|
||||
presetCategories = categorizedArrayToPlainArray(self.allPresetCategories);
|
||||
if (usePresetCategories.value) {
|
||||
presetCategories = categorizedArrayToPlainArray(allPresetCategories.value);
|
||||
}
|
||||
|
||||
self.rootStore.register({
|
||||
user: self.user,
|
||||
rootStore.register({
|
||||
user: user.value,
|
||||
presetCategories: presetCategories
|
||||
}).then(response => {
|
||||
if (!isUserLogined()) {
|
||||
self.submitting = false;
|
||||
submitting.value = false;
|
||||
|
||||
if (self.usePresetCategories && !response.presetCategoriesSaved) {
|
||||
self.finalResultMessage = self.$t('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
|
||||
self.currentStep = 'finalResult';
|
||||
if (usePresetCategories.value && !response.presetCategoriesSaved) {
|
||||
finalResultMessage.value = tt('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
|
||||
currentStep.value = 'finalResult';
|
||||
} else if (response.needVerifyEmail) {
|
||||
self.finalResultMessage = self.$t('You have been successfully registered. An account activation link has been sent to your email address, please activate your account first.');
|
||||
self.currentStep = 'finalResult';
|
||||
finalResultMessage.value = tt('You have been successfully registered. An account activation link has been sent to your email address, please activate your account first.');
|
||||
currentStep.value = 'finalResult';
|
||||
} else {
|
||||
self.$refs.snackbar.showMessage('You have been successfully registered');
|
||||
self.navigateToHomePage = true;
|
||||
snackbar.value?.showMessage('You have been successfully registered');
|
||||
navigateToHomePage.value = true;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
doAfterSignupSuccess(response);
|
||||
submitting.value = false;
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (response.notificationContent) {
|
||||
self.rootStore.setNotificationContent(response.notificationContent);
|
||||
}
|
||||
|
||||
self.submitting = false;
|
||||
|
||||
if (self.usePresetCategories && !response.presetCategoriesSaved) {
|
||||
self.$refs.snackbar.showMessage('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
|
||||
if (usePresetCategories.value && !response.presetCategoriesSaved) {
|
||||
snackbar.value?.showMessage('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
|
||||
} else {
|
||||
self.$refs.snackbar.showMessage('You have been successfully registered');
|
||||
self.$router.replace('/');
|
||||
snackbar.value?.showMessage('You have been successfully registered');
|
||||
router.replace('/');
|
||||
}
|
||||
|
||||
self.navigateToHomePage = true;
|
||||
navigateToHomePage.value = true;
|
||||
}).catch(error => {
|
||||
self.submitting = false;
|
||||
submitting.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
navigateToLogin() {
|
||||
this.$router.push('/');
|
||||
},
|
||||
onSnackbarShowStateChanged(newValue) {
|
||||
if (!newValue && this.navigateToHomePage) {
|
||||
this.$router.replace('/');
|
||||
}
|
||||
},
|
||||
getCategoryTypeName(categoryType) {
|
||||
switch (categoryType) {
|
||||
case CategoryType.Income.toString():
|
||||
return this.$t('Income Categories');
|
||||
case CategoryType.Expense.toString():
|
||||
return this.$t('Expense Categories');
|
||||
case CategoryType.Transfer.toString():
|
||||
return this.$t('Transfer Categories');
|
||||
default:
|
||||
return this.$t('Transaction Categories');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function navigateToLogin(): void {
|
||||
router.push('/');
|
||||
}
|
||||
|
||||
function onSnackbarShowStateChanged(newValue: boolean): void {
|
||||
if (!newValue && navigateToHomePage.value) {
|
||||
router.replace('/');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+95
-186
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<f7-page>
|
||||
<f7-navbar>
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t('Sign Up')"></f7-nav-title>
|
||||
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="tt('Sign Up')"></f7-nav-title>
|
||||
<f7-nav-right>
|
||||
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Submit')" @click="submit"></f7-link>
|
||||
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt('Submit')" @click="submit"></f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
clear-button
|
||||
:label="$t('Username')"
|
||||
:placeholder="$t('Your username')"
|
||||
:label="tt('Username')"
|
||||
:placeholder="tt('Your username')"
|
||||
v-model:value="user.username"
|
||||
></f7-list-input>
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
clear-button
|
||||
:label="$t('Password')"
|
||||
:placeholder="$t('Your password, at least 6 characters')"
|
||||
:label="tt('Password')"
|
||||
:placeholder="tt('Your password, at least 6 characters')"
|
||||
v-model:value="user.password"
|
||||
></f7-list-input>
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
clear-button
|
||||
:label="$t('Confirm Password')"
|
||||
:placeholder="$t('Re-enter the password')"
|
||||
:label="tt('Confirm Password')"
|
||||
:placeholder="tt('Re-enter the password')"
|
||||
v-model:value="user.confirmPassword"
|
||||
></f7-list-input>
|
||||
|
||||
@@ -40,8 +40,8 @@
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
clear-button
|
||||
:label="$t('E-mail')"
|
||||
:placeholder="$t('Your email address')"
|
||||
:label="tt('E-mail')"
|
||||
:placeholder="tt('Your email address')"
|
||||
v-model:value="user.email"
|
||||
></f7-list-input>
|
||||
|
||||
@@ -49,21 +49,21 @@
|
||||
type="text"
|
||||
autocomplete="nickname"
|
||||
clear-button
|
||||
:label="$t('Nickname')"
|
||||
:placeholder="$t('Your nickname')"
|
||||
:label="tt('Nickname')"
|
||||
:placeholder="tt('Your nickname')"
|
||||
v-model:value="user.nickname"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
|
||||
<f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="tt(inputInvalidProblemMessage)"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical">
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:key="currentLocale + '_lang'"
|
||||
:header="$t('Language')"
|
||||
:header="tt('Language')"
|
||||
:title="currentLanguageName"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Language'), popupCloseLinkText: $t('Done') }"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Language'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Language'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="currentLocale">
|
||||
<option :value="lang.languageTag"
|
||||
@@ -75,8 +75,8 @@
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:key="currentLocale + '_currency'"
|
||||
:header="$t('Default Currency')"
|
||||
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') }"
|
||||
:header="tt('Default Currency')"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Default Currency'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<template #title>
|
||||
<f7-block class="no-padding no-margin">
|
||||
@@ -94,9 +94,9 @@
|
||||
<f7-list-item
|
||||
class="list-item-with-header-and-title list-item-no-item-after"
|
||||
:key="currentLocale + '_firstDayOfWeek'"
|
||||
:header="$t('First Day of Week')"
|
||||
:header="tt('First Day of Week')"
|
||||
:title="currentDayOfWeekName"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('First Day of Week'), popupCloseLinkText: $t('Done') }"
|
||||
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('First Day of Week'), popupCloseLinkText: tt('Done') }"
|
||||
>
|
||||
<select v-model="user.firstDayOfWeek">
|
||||
<option :value="weekDay.type"
|
||||
@@ -107,7 +107,7 @@
|
||||
</f7-list>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical">
|
||||
<f7-list-item :title="$t('Use preset transaction categories')" link="#" @click="showPresetCategories = true">
|
||||
<f7-list-item :title="tt('Use preset transaction categories')" link="#" @click="showPresetCategories = true">
|
||||
<f7-toggle :checked="usePresetCategories" @toggle:change="usePresetCategories = $event"></f7-toggle>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
@@ -117,13 +117,13 @@
|
||||
<f7-page>
|
||||
<f7-navbar>
|
||||
<f7-nav-left>
|
||||
<f7-link popup-close :text="$t('Back')"></f7-link>
|
||||
<f7-link popup-close :text="tt('Back')"></f7-link>
|
||||
</f7-nav-left>
|
||||
<f7-nav-title :title="$t('Preset Categories')"></f7-nav-title>
|
||||
<f7-nav-title :title="tt('Preset Categories')"></f7-nav-title>
|
||||
<f7-nav-right>
|
||||
<f7-link icon-f7="ellipsis" @click="showPresetCategoriesMoreActionSheet = true"></f7-link>
|
||||
<f7-link close @click="usePresetCategories = true; showPresetCategories = false" v-if="!usePresetCategories">{{ $t('Enable') }}</f7-link>
|
||||
<f7-link close @click="usePresetCategories = false; showPresetCategories = false" v-if="usePresetCategories">{{ $t('Disable') }}</f7-link>
|
||||
<f7-link close @click="usePresetCategories = true; showPresetCategories = false" v-if="!usePresetCategories">{{ tt('Enable') }}</f7-link>
|
||||
<f7-link close @click="usePresetCategories = false; showPresetCategories = false" v-if="usePresetCategories">{{ tt('Disable') }}</f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
<f7-block class="no-padding no-margin"
|
||||
@@ -156,10 +156,10 @@
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showPresetCategoriesMoreActionSheet" @actions:closed="showPresetCategoriesMoreActionSheet = false">
|
||||
<f7-actions-group>
|
||||
<f7-actions-button @click="showPresetCategoriesChangeLocaleSheet = true">{{ $t('Change Language') }}</f7-actions-button>
|
||||
<f7-actions-button @click="showPresetCategoriesChangeLocaleSheet = true">{{ tt('Change Language') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
<f7-actions-group>
|
||||
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
|
||||
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
</f7-actions>
|
||||
|
||||
@@ -174,205 +174,114 @@
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import type { Router } from 'framework7/types';
|
||||
|
||||
import type { LanguageOption } from '@/locales/index.ts';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
|
||||
import { useSignupPageBase } from '@/views/base/SignupPageBase.ts';
|
||||
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { CategoryType } from '@/core/category.ts';
|
||||
import { getNameByKeyValue, categorizedArrayToPlainArray } from '@/lib/common.ts';
|
||||
import type { PartialRecord, TypeAndDisplayName } from '@/core/base.ts';
|
||||
import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
|
||||
import { type LocalizedPresetCategory, CategoryType } from '@/core/category.ts';
|
||||
|
||||
import { findDisplayNameByType, categorizedArrayToPlainArray } from '@/lib/common.ts';
|
||||
import { isUserLogined } from '@/lib/userstate.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
const userStore = useUserStore();
|
||||
const newUser = userStore.generateNewUserModel(this.$locale.getCurrentLanguageTag());
|
||||
const props = defineProps<{
|
||||
f7router: Router.Router;
|
||||
}>();
|
||||
|
||||
return {
|
||||
user: newUser,
|
||||
submitting: false,
|
||||
usePresetCategories: false,
|
||||
showPresetCategories: false,
|
||||
showPresetCategoriesMoreActionSheet: false,
|
||||
showPresetCategoriesChangeLocaleSheet: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useTransactionCategoriesStore, useExchangeRatesStore),
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(false);
|
||||
},
|
||||
allCurrencies() {
|
||||
return this.$locale.getAllCurrencies();
|
||||
},
|
||||
allWeekDays() {
|
||||
return this.$locale.getAllWeekDays();
|
||||
},
|
||||
allPresetCategories() {
|
||||
return this.$locale.getAllTransactionDefaultCategories(0, this.currentLocale);
|
||||
},
|
||||
currentLocale: {
|
||||
get: function () {
|
||||
return this.$locale.getCurrentLanguageTag();
|
||||
},
|
||||
set: function (value) {
|
||||
const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.localeDefaultSettings.currency;
|
||||
const isFirstWeekDayDefault = this.user.firstDayOfWeek === this.settingsStore.localeDefaultSettings.firstDayOfWeek;
|
||||
const { tt, getAllLanguageOptions, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories, getCurrencyName } = useI18n();
|
||||
const { showAlert, showToast } = useI18nUIComponents();
|
||||
|
||||
this.user.language = value;
|
||||
const {
|
||||
user,
|
||||
submitting,
|
||||
currentLocale,
|
||||
currentLanguageName,
|
||||
inputEmptyProblemMessage,
|
||||
inputInvalidProblemMessage,
|
||||
inputIsEmpty,
|
||||
inputIsInvalid,
|
||||
getCategoryTypeName,
|
||||
doAfterSignupSuccess
|
||||
} = useSignupPageBase();
|
||||
|
||||
const localeDefaultSettings = this.$locale.setLanguage(value);
|
||||
this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
const rootStore = useRootStore();
|
||||
|
||||
if (isCurrencyDefault) {
|
||||
this.user.defaultCurrency = this.settingsStore.localeDefaultSettings.currency;
|
||||
}
|
||||
const usePresetCategories = ref<boolean>(false);
|
||||
const showPresetCategories = ref<boolean>(false);
|
||||
const showPresetCategoriesMoreActionSheet = ref<boolean>(false);
|
||||
const showPresetCategoriesChangeLocaleSheet = ref<boolean>(false);
|
||||
|
||||
if (isFirstWeekDayDefault) {
|
||||
this.user.firstDayOfWeek = this.settingsStore.localeDefaultSettings.firstDayOfWeek;
|
||||
}
|
||||
}
|
||||
},
|
||||
currentLanguageName() {
|
||||
const languageInfo = this.$locale.getLanguageInfo(this.currentLocale);
|
||||
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
|
||||
const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
|
||||
const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
|
||||
const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(0, currentLocale.value));
|
||||
const currentDayOfWeekName = computed<string | null>(() => findDisplayNameByType(allWeekDays.value, user.value.firstDayOfWeek));
|
||||
|
||||
if (!languageInfo) {
|
||||
return '';
|
||||
}
|
||||
function submit(): void {
|
||||
const router = props.f7router;
|
||||
|
||||
return languageInfo.displayName;
|
||||
},
|
||||
currentDayOfWeekName() {
|
||||
return getNameByKeyValue(this.allWeekDays, this.user.firstDayOfWeek, 'type', 'displayName');
|
||||
},
|
||||
inputIsEmpty() {
|
||||
return !!this.inputEmptyProblemMessage;
|
||||
},
|
||||
inputIsInvalid() {
|
||||
return !!this.inputInvalidProblemMessage;
|
||||
},
|
||||
inputEmptyProblemMessage() {
|
||||
if (!this.user.username) {
|
||||
return 'Username cannot be blank';
|
||||
} else if (!this.user.password) {
|
||||
return 'Password cannot be blank';
|
||||
} else if (!this.user.confirmPassword) {
|
||||
return 'Password confirmation cannot be blank';
|
||||
} else if (!this.user.email) {
|
||||
return 'Email address cannot be blank';
|
||||
} else if (!this.user.nickname) {
|
||||
return 'Nickname cannot be blank';
|
||||
} else if (!this.user.defaultCurrency) {
|
||||
return 'Default currency cannot be blank';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
inputInvalidProblemMessage() {
|
||||
if (this.user.password && this.user.confirmPassword && this.user.password !== this.user.confirmPassword) {
|
||||
return 'Password and password confirmation do not match';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
|
||||
const problemMessage = self.inputEmptyProblemMessage || self.inputInvalidProblemMessage;
|
||||
const problemMessage = inputEmptyProblemMessage.value || inputInvalidProblemMessage.value;
|
||||
|
||||
if (problemMessage) {
|
||||
self.$alert(problemMessage);
|
||||
showAlert(problemMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
self.submitting = true;
|
||||
self.$showLoading(() => self.submitting);
|
||||
submitting.value = true;
|
||||
showLoading(() => submitting.value);
|
||||
|
||||
let presetCategories = [];
|
||||
let presetCategories: LocalizedPresetCategory[] = [];
|
||||
|
||||
if (self.usePresetCategories) {
|
||||
presetCategories = categorizedArrayToPlainArray(self.allPresetCategories);
|
||||
if (usePresetCategories.value) {
|
||||
presetCategories = categorizedArrayToPlainArray(allPresetCategories.value);
|
||||
}
|
||||
|
||||
self.rootStore.register({
|
||||
user: self.user,
|
||||
rootStore.register({
|
||||
user: user.value,
|
||||
presetCategories: presetCategories
|
||||
}).then(response => {
|
||||
if (!isUserLogined()) {
|
||||
self.submitting = false;
|
||||
self.$hideLoading();
|
||||
submitting.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (self.usePresetCategories && !response.presetCategoriesSaved) {
|
||||
self.$toast('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.', 5000);
|
||||
if (usePresetCategories.value && !response.presetCategoriesSaved) {
|
||||
showToast('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.', 5000);
|
||||
} else if (response.needVerifyEmail) {
|
||||
self.$toast('You have been successfully registered. An account activation link has been sent to your email address, please activate your account first.', 5000);
|
||||
showToast('You have been successfully registered. An account activation link has been sent to your email address, please activate your account first.', 5000);
|
||||
} else {
|
||||
self.$toast('You have been successfully registered');
|
||||
showToast('You have been successfully registered');
|
||||
}
|
||||
|
||||
router.navigate('/');
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
doAfterSignupSuccess(response);
|
||||
submitting.value = false;
|
||||
hideLoading();
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (response.notificationContent) {
|
||||
self.rootStore.setNotificationContent(response.notificationContent);
|
||||
}
|
||||
|
||||
self.submitting = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (self.usePresetCategories && !response.presetCategoriesSaved) {
|
||||
self.$toast('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
|
||||
if (usePresetCategories.value && !response.presetCategoriesSaved) {
|
||||
showToast('You have been successfully registered, but there was an failure when adding preset categories. You can re-add preset categories in settings page anytime.');
|
||||
} else {
|
||||
self.$toast('You have been successfully registered');
|
||||
showToast('You have been successfully registered');
|
||||
}
|
||||
|
||||
router.navigate('/');
|
||||
}).catch(error => {
|
||||
self.submitting = false;
|
||||
self.$hideLoading();
|
||||
submitting.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
getCurrencyName(currencyCode) {
|
||||
return this.$locale.getCurrencyName(currencyCode);
|
||||
},
|
||||
getCategoryTypeName(categoryType) {
|
||||
switch (categoryType) {
|
||||
case CategoryType.Income.toString():
|
||||
return this.$t('Income Categories');
|
||||
case CategoryType.Expense.toString():
|
||||
return this.$t('Expense Categories');
|
||||
case CategoryType.Transfer.toString():
|
||||
return this.$t('Transfer Categories');
|
||||
default:
|
||||
return this.$t('Transaction Categories');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user