mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 23:47:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve user registration page

Browse Source
This commit is contained in:
MaysWind
2023-09-10 12:14:41 +08:00
parent ff07346fe9
commit 9f35c1eded
11 changed files with 196 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/services.js
+3 -2
View File
@@ -91,7 +91,7 @@ export default {
}
});
},
register: ({ username, email, nickname, password, language, defaultCurrency, firstDayOfWeek }) => {
register: ({ username, email, nickname, password, language, defaultCurrency, firstDayOfWeek, categories }) => {
return axios.post('register.json', {
username,
email,
@@ -99,7 +99,8 @@ export default {
password,
language,
defaultCurrency,
firstDayOfWeek
firstDayOfWeek,
categories
}, {
timeout: api.requestVerifyEmailTimeout
});
src/locales/en.js
+3
View File
@@ -1056,8 +1056,11 @@ export default {
'Use Preset Transaction Categories': 'Use Preset Transaction Categories',
'Preset Categories': 'Preset Categories',
'Set Whether You Use The Preset Transaction Categories': 'Set Whether You Use The Preset Transaction Categories',
'Complete': 'Complete',
'Registration Complete': 'Registration Complete',
'You have been successfully registered': 'You have been successfully registered',
'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': 'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.',
'You have been successfully registered. Account activation link has been sent to your email address, please activate your account first.': 'You have been successfully registered. Account activation link has been sent to your email address, please activate your account first.',
'Unable to sign up': 'Unable to sign up',
'User registration is disabled': 'User registration is disabled',
'Unable to get user profile': 'Unable to get user profile',
src/locales/zh_Hans.js
+4 -1
View File
@@ -1056,8 +1056,11 @@ export default {
'Use Preset Transaction Categories': '使用预设交易分类',
'Preset Categories': '预设分类',
'Set Whether You Use The Preset Transaction Categories': '设置是否使用预设交易分类',
'Complete': '完成',
'Registration Complete': '注册完成',
'You have been successfully registered': '注册成功',
'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': '注册成功，但是添加预设分类时出错。您可以随时在设置页面中重新添加预设分类。',
'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': '您已经注册成功，但是添加预设分类时出错。您可以随时在设置页面中重新添加预设分类。',
'You have been successfully registered. Account activation link has been sent to your email address, please activate your account first.': '您已经注册成功。账号激活链接已经发送到您的邮箱地址，请先激活您的账号。',
'Unable to sign up': '无法注册',
'User registration is disabled': '用户注册已禁用',
'Unable to get user profile': '无法获取用户信息',
src/stores/index.js
+3 -2
View File
@@ -159,7 +159,7 @@ export const useRootStore = defineStore('root', {
});
});
},
register({ user }) {
register({ user, presetCategories }) {
const settingsStore = useSettingsStore();
return new Promise((resolve, reject) => {
@@ -170,7 +170,8 @@ export const useRootStore = defineStore('root', {
nickname: user.nickname,
language: user.language,
defaultCurrency: user.defaultCurrency,
firstDayOfWeek: user.firstDayOfWeek
firstDayOfWeek: user.firstDayOfWeek,
categories: presetCategories
}).then(response => {
const data = response.data;
src/views/desktop/SignupPage.vue
+79 -54
View File
@@ -20,18 +20,7 @@
</v-col>
<v-col cols="12" md="8" class="auth-card d-flex align-center justify-center pa-10">
<v-card variant="flat" class="mt-12 mt-sm-0 pt-sm-12 pt-md-0">
<steps-bar min-width="700" :steps="[
{
'name': 'basicSetting',
'title': $t('User Information'),
'subTitle': $t('Basic Information')
},
{
'name': 'presetCategories',
'title': $t('Transaction Categories'),
'subTitle': $t('Preset Categories')
}
]" :current-step="currentStep" @step:change="switchToTab" />
<steps-bar min-width="700" :steps="allSteps" :current-step="currentStep" @step:change="switchToTab" />
<v-window class="mt-5 disable-tab-transition" style="max-width: 700px" v-model="currentStep">
<v-form>
@@ -47,7 +36,7 @@
type="text"
autocomplete="username"
clearable
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('Username')"
:placeholder="$t('Your username')"
v-model="user.username"
@@ -59,7 +48,7 @@
type="text"
autocomplete="nickname"
clearable
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('Nickname')"
:placeholder="$t('Your nickname')"
v-model="user.nickname"
@@ -72,7 +61,7 @@
type="email"
autocomplete="email"
clearable
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('E-mail')"
:placeholder="$t('Your email address')"
v-model="user.email"
@@ -84,7 +73,7 @@
<v-text-field
autocomplete="new-password"
clearable
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('Password')"
:placeholder="$t('Your password, at least 6 characters')"
:type="isPasswordVisible ? 'text' : 'password'"
@@ -97,7 +86,7 @@
<v-text-field
autocomplete="new-password"
clearable
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('Confirmation Password')"
:placeholder="$t('Re-enter the password')"
:type="isConfirmPasswordVisible ? 'text' : 'password'"
@@ -113,7 +102,7 @@
<v-select
item-title="displayName"
item-value="code"
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('Language')"
:placeholder="$t('Language')"
:items="allLanguages"
@@ -128,7 +117,7 @@
item-title="displayName"
item-value="code"
auto-select-first
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('Default Currency')"
:placeholder="$t('Default Currency')"
:items="allCurrencies"
@@ -145,7 +134,7 @@
<v-select
item-title="displayName"
item-value="type"
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('First Day of Week')"
:placeholder="$t('First Day of Week')"
:items="allWeekDays"
@@ -162,7 +151,7 @@
<v-row class="mb-5">
<v-col cols="12" sm="6">
<v-switch inset
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:label="$t('Use Preset Transaction Categories')"
v-model="usePresetCategories"/>
</v-col>
@@ -170,7 +159,7 @@
<v-menu location="bottom">
<template #activator="{ props }">
<v-btn variant="text"
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
@@ -186,7 +175,7 @@
</v-col>
</v-row>
<div class="overflow-y-auto px-3" :class="{ 'disabled': !usePresetCategories || submitting }" style="max-height: 323px">
<div class="overflow-y-auto px-3" :class="{ 'disabled': !usePresetCategories || submitting || navigateToHomePage }" style="max-height: 323px">
<v-row :key="categoryType" v-for="(categories, categoryType) in allPresetCategories">
<v-col cols="12" md="12">
<h4 class="mb-3">{{ getCategoryTypeName(categoryType) }}</h4>
@@ -217,33 +206,41 @@
</v-row>
</div>
</v-window-item>
<v-window-item value="finalResult" v-if="finalResultMessage">
<h5 class="text-h5 mb-1">{{ $t('Registration Complete') }}</h5>
<p class="my-5">{{ finalResultMessage }}</p>
</v-window-item>
</v-form>
</v-window>
<div class="d-flex justify-sm-space-between gap-4 flex-wrap justify-center mt-5">
<v-btn :color="currentStep === 'basicSetting' ? 'default' : 'primary'"
:disabled="currentStep === 'basicSetting' || submitting"
<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>
<v-btn :color="currentStep === 'presetCategories' ? 'secondary' : 'primary'"
:disabled="currentStep === 'presetCategories' || submitting"
<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 !== 'presetCategories'">{{ $t('Next') }}</v-btn>
v-if="currentStep === 'basicSetting'">{{ $t('Next') }}</v-btn>
<v-btn color="expense"
:disabled="submitting"
:disabled="submitting || navigateToHomePage"
:append-icon="!submitting ? icons.submit : null"
@click="submit"
v-if="currentStep === 'presetCategories'">
{{ $t('Submit') }}
<v-progress-circular indeterminate size="24" 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>
</div>
</v-card>
</v-col>
</v-row>
<snack-bar ref="snackbar" />
<snack-bar ref="snackbar" @update:show="onSnackbarShowStateChanged" />
</div>
</template>
@@ -281,6 +278,8 @@ export default {
isConfirmPasswordVisible: false,
submitting: false,
usePresetCategories: false,
finalResultMessage: null,
navigateToHomePage: false,
icons: {
previous: mdiArrowLeft,
next: mdiArrowRight,
@@ -341,6 +340,30 @@ export default {
return languageInfo.displayName;
},
allSteps() {
const allSteps = [
{
name: 'basicSetting',
title: this.$t('User Information'),
subTitle: this.$t('Basic Information')
},
{
name: 'presetCategories',
title: this.$t('Transaction Categories'),
subTitle: this.$t('Preset Categories')
}
];
if (this.finalResultMessage) {
allSteps.push({
name: 'finalResult',
title: this.$t('Complete'),
subTitle: this.$t('Registration Complete')
});
}
return allSteps;
},
inputIsEmpty() {
return !!this.inputEmptyProblemMessage;
},
@@ -381,7 +404,7 @@ export default {
},
methods: {
switchToTab(tabName) {
if (this.submitting) {
if (this.submitting || this.currentStep === 'finalResult' || this.navigateToHomePage) {
return;
}
@@ -414,27 +437,33 @@ export default {
return;
}
self.navigateToHomePage = false;
self.submitting = true;
let submitCategories = [];
let presetCategories = [];
if (self.usePresetCategories) {
submitCategories = categorizedArrayToPlainArray(self.allPresetCategories);
presetCategories = categorizedArrayToPlainArray(self.allPresetCategories);
}
self.rootStore.register({
user: self.user
user: self.user,
presetCategories: presetCategories
}).then(response => {
if (!self.$user.isUserLogined()) {
self.submitting = false;
if (self.usePresetCategories) {
self.$refs.snackbar.showMessage('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
if (self.usePresetCategories && !response.presetCategoriesSaved) {
self.finalResultMessage = self.$t('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
self.currentStep = 'finalResult';
} else if (response.needVerifyEmail) {
self.finalResultMessage = self.$t('You have been successfully registered. Account activation link has been sent to your email address, please activate your account first.');
self.currentStep = 'finalResult';
} else {
self.$refs.snackbar.showMessage('You have been successfully registered');
self.navigateToHomePage = true;
}
self.$router.replace('/');
return;
}
@@ -447,27 +476,15 @@ export default {
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
}
if (!self.usePresetCategories) {
self.submitting = false;
self.submitting = false;
if (self.usePresetCategories && !response.presetCategoriesSaved) {
self.$refs.snackbar.showMessage('You have been successfully registered, but something wrong with 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('/');
return;
}
self.transactionCategoriesStore.addCategories({
categories: submitCategories
}).then(() => {
self.submitting = false;
self.$refs.snackbar.showMessage('You have been successfully registered');
self.$router.replace('/');
}).catch(() => {
self.submitting = false;
self.$refs.snackbar.showMessage('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
self.$router.replace('/');
});
self.navigateToHomePage = true;
}).catch(error => {
self.submitting = false;
@@ -476,6 +493,14 @@ export default {
}
});
},
navigateToLogin() {
this.$router.push('/');
},
onSnackbarShowStateChanged(newValue) {
if (!newValue && this.navigateToHomePage) {
this.$router.replace('/');
}
},
getCategoryTypeName(categoryType) {
switch (categoryType) {
case categoryConstants.allCategoryTypes.Income.toString():
src/views/mobile/SignupPage.vue
+14 -25
View File
@@ -295,21 +295,24 @@ export default {
self.submitting = true;
self.$showLoading(() => self.submitting);
let submitCategories = [];
let presetCategories = [];
if (self.usePresetCategories) {
submitCategories = categorizedArrayToPlainArray(self.allPresetCategories);
presetCategories = categorizedArrayToPlainArray(self.allPresetCategories);
}
self.rootStore.register({
user: self.user
user: self.user,
presetCategories: presetCategories
}).then(response => {
if (!self.$user.isUserLogined()) {
self.submitting = false;
self.$hideLoading();
if (self.usePresetCategories) {
self.$toast('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
if (self.usePresetCategories && !response.presetCategoriesSaved) {
self.$toast('You have been successfully registered, but something wrong with 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. Account activation link has been sent to your email address, please activate your account first.', 5000);
} else {
self.$toast('You have been successfully registered');
}
@@ -327,30 +330,16 @@ export default {
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
}
if (!self.usePresetCategories) {
self.submitting = false;
self.$hideLoading();
self.submitting = false;
self.$hideLoading();
if (self.usePresetCategories && !response.presetCategoriesSaved) {
self.$toast('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
} else {
self.$toast('You have been successfully registered');
router.navigate('/');
return;
}
self.transactionCategoriesStore.addCategories({
categories: submitCategories
}).then(() => {
self.submitting = false;
self.$hideLoading();
self.$toast('You have been successfully registered');
router.navigate('/');
}).catch(() => {
self.submitting = false;
self.$hideLoading();
self.$toast('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
router.navigate('/');
});
router.navigate('/');
}).catch(error => {
self.submitting = false;
self.$hideLoading();