migrate login page to composition API and typescript
This commit is contained in:
MaysWind
@@ -1,4 +1,4 @@
|
||||
function getServerSetting(key: string): string | number | boolean | undefined | null {
|
||||
function getServerSetting(key: string): string | number | boolean | Record<string, string> | undefined | null {
|
||||
const settings = window.EZBOOKKEEPING_SERVER_SETTINGS || {};
|
||||
return settings[key];
|
||||
}
|
||||
@@ -31,8 +31,8 @@ export function isDataImportingEnabled(): boolean {
|
||||
return getServerSetting('i') === 1;
|
||||
}
|
||||
|
||||
export function getLoginPageTips(): string {
|
||||
return getServerSetting('lpt') as string;
|
||||
export function getLoginPageTips(): Record<string, string>{
|
||||
return getServerSetting('lpt') as Record<string, string>;
|
||||
}
|
||||
|
||||
export function getMapProvider(): string {
|
||||
|
||||
@@ -528,6 +528,20 @@ export function useI18n() {
|
||||
return textArray.join(separator);
|
||||
}
|
||||
|
||||
function getServerTipContent(tipConfig: Record<string, string>): string {
|
||||
if (!tipConfig) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const currentLanguage = getCurrentLanguageTag();
|
||||
|
||||
if (isString(tipConfig[currentLanguage])) {
|
||||
return tipConfig[currentLanguage];
|
||||
}
|
||||
|
||||
return tipConfig['default'] || '';
|
||||
}
|
||||
|
||||
function getCurrentLanguageTag(): string {
|
||||
return locale.value;
|
||||
}
|
||||
@@ -1298,6 +1312,7 @@ export function useI18n() {
|
||||
ti: translateIf,
|
||||
te: translateError,
|
||||
joinMultiText,
|
||||
getServerTipContent,
|
||||
// get current language info
|
||||
getCurrentLanguageTag,
|
||||
getCurrentLanguageInfo,
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
// @ts-expect-error the above file is migrating to ts
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import type { AuthResponse } from '@/models/auth_response.ts';
|
||||
|
||||
import { getLoginPageTips } from '@/lib/server_settings.ts';
|
||||
import { getVersion } from '@/lib/version.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
|
||||
export function useLoginPageBase() {
|
||||
const { getServerTipContent, setLanguage } = useI18n();
|
||||
|
||||
const rootStore = useRootStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const exchangeRatesStore = useExchangeRatesStore();
|
||||
|
||||
const version = `v${getVersion()}`;
|
||||
|
||||
const username = ref<string>('');
|
||||
const password = ref<string>('');
|
||||
const passcode = ref<string>('');
|
||||
const backupCode = ref<string>('');
|
||||
const tempToken = ref<string>('');
|
||||
const twoFAVerifyType = ref<string>('passcode');
|
||||
|
||||
const logining = ref<boolean>(false);
|
||||
const verifying = ref<boolean>(false);
|
||||
|
||||
const inputIsEmpty = computed<boolean>(() => !username.value || !password.value);
|
||||
const twoFAInputIsEmpty = computed<boolean>(() => {
|
||||
if (twoFAVerifyType.value === 'backupcode') {
|
||||
return !backupCode.value;
|
||||
} else {
|
||||
return !passcode.value;
|
||||
}
|
||||
});
|
||||
|
||||
const tips = computed<string>(() => getServerTipContent(getLoginPageTips()));
|
||||
|
||||
function changeLanguage(locale: string): void {
|
||||
const localeDefaultSettings = setLanguage(locale);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
}
|
||||
|
||||
function doAfterLogin(authResponse: AuthResponse): void {
|
||||
if (authResponse.user) {
|
||||
const localeDefaultSettings = setLanguage(authResponse.user.language);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (authResponse.notificationContent) {
|
||||
rootStore.setNotificationContent(authResponse.notificationContent);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// constants
|
||||
version,
|
||||
// states
|
||||
username,
|
||||
password,
|
||||
passcode,
|
||||
backupCode,
|
||||
tempToken,
|
||||
twoFAVerifyType,
|
||||
logining,
|
||||
verifying,
|
||||
inputIsEmpty,
|
||||
twoFAInputIsEmpty,
|
||||
tips,
|
||||
// functions
|
||||
changeLanguage,
|
||||
doAfterLogin
|
||||
}
|
||||
}
|
||||
+153
-215
@@ -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">
|
||||
@@ -22,8 +22,8 @@
|
||||
<div class="d-flex align-center justify-center h-100">
|
||||
<v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
|
||||
<v-card-text>
|
||||
<h4 class="text-h4 mb-2">{{ $t('Welcome to ezBookkeeping') }}</h4>
|
||||
<p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
|
||||
<h4 class="text-h4 mb-2">{{ tt('Welcome to ezBookkeeping') }}</h4>
|
||||
<p class="mb-0">{{ tt('Please log in with your ezBookkeeping account') }}</p>
|
||||
<p class="mt-1 mb-0" v-if="tips">{{ tips }}</p>
|
||||
</v-card-text>
|
||||
|
||||
@@ -36,11 +36,11 @@
|
||||
autocomplete="username"
|
||||
autofocus="autofocus"
|
||||
:disabled="show2faInput || logining || verifying"
|
||||
:label="$t('Username')"
|
||||
:placeholder="$t('Your username or email')"
|
||||
:label="tt('Username')"
|
||||
:placeholder="tt('Your username or email')"
|
||||
v-model="username"
|
||||
@input="tempToken = ''"
|
||||
@keyup.enter="$refs.passwordInput.focus()"
|
||||
@keyup.enter="passwordInput?.focus()"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
@@ -50,8 +50,8 @@
|
||||
ref="passwordInput"
|
||||
type="password"
|
||||
:disabled="show2faInput || logining || verifying"
|
||||
:label="$t('Password')"
|
||||
:placeholder="$t('Your password')"
|
||||
:label="tt('Password')"
|
||||
:placeholder="tt('Your password')"
|
||||
v-model="password"
|
||||
@input="tempToken = ''"
|
||||
@keyup.enter="login"
|
||||
@@ -64,8 +64,8 @@
|
||||
autocomplete="one-time-code"
|
||||
ref="passcodeInput"
|
||||
:disabled="logining || verifying"
|
||||
:label="$t('Passcode')"
|
||||
:placeholder="$t('Passcode')"
|
||||
:label="tt('Passcode')"
|
||||
:placeholder="tt('Passcode')"
|
||||
:append-inner-icon="icons.backupCode"
|
||||
v-model="passcode"
|
||||
@click:append-inner="twoFAVerifyType = 'backupcode'"
|
||||
@@ -75,8 +75,8 @@
|
||||
<v-text-field
|
||||
type="text"
|
||||
:disabled="logining || verifying"
|
||||
:label="$t('Backup Code')"
|
||||
:placeholder="$t('Backup Code')"
|
||||
:label="tt('Backup Code')"
|
||||
:placeholder="tt('Backup Code')"
|
||||
:append-inner-icon="icons.passcode"
|
||||
v-model="backupCode"
|
||||
@click:append-inner="twoFAVerifyType = 'passcode'"
|
||||
@@ -88,12 +88,12 @@
|
||||
<v-col cols="12" class="py-0 mt-1 mb-4">
|
||||
<div class="d-flex align-center justify-space-between flex-wrap">
|
||||
<a href="javascript:void(0);" @click="showMobileQrCode = true">
|
||||
<span class="nav-item-title">{{ $t('Use on Mobile Device') }}</span>
|
||||
<span class="nav-item-title">{{ tt('Use on Mobile Device') }}</span>
|
||||
</a>
|
||||
<v-spacer/>
|
||||
<router-link class="text-primary" to="/forgetpassword"
|
||||
:class="{'disabled': !isUserForgetPasswordEnabled}">
|
||||
{{ $t('Forget Password?') }}
|
||||
:class="{'disabled': !isUserForgetPasswordEnabled()}">
|
||||
{{ tt('Forget Password?') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</v-col>
|
||||
@@ -101,21 +101,21 @@
|
||||
<v-col cols="12">
|
||||
<v-btn block :disabled="inputIsEmpty || logining || verifying"
|
||||
@click="login" v-if="!show2faInput">
|
||||
{{ $t('Log In') }}
|
||||
{{ tt('Log In') }}
|
||||
<v-progress-circular indeterminate size="22" class="ml-2" v-if="logining"></v-progress-circular>
|
||||
</v-btn>
|
||||
<v-btn block :disabled="twoFAInputIsEmpty || logining || verifying"
|
||||
@click="verify" v-else-if="show2faInput">
|
||||
{{ $t('Continue') }}
|
||||
{{ tt('Continue') }}
|
||||
<v-progress-circular indeterminate size="22" class="ml-2" v-if="verifying"></v-progress-circular>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" class="text-center text-base">
|
||||
<span class="me-1">{{ $t('Don\'t have an account?') }}</span>
|
||||
<span class="me-1">{{ tt('Don\'t have an account?') }}</span>
|
||||
<router-link class="text-primary" to="/signup"
|
||||
:class="{'disabled': !isUserRegistrationEnabled}">
|
||||
{{ $t('Create an account') }}
|
||||
:class="{'disabled': !isUserRegistrationEnabled()}">
|
||||
{{ tt('Create an account') }}
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -167,222 +167,160 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { VTextField } from 'vuetify/components/VTextField';
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
|
||||
import { ref, computed, useTemplateRef, nextTick } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import type { LanguageOption } from '@/locales/index.ts';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
|
||||
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
|
||||
import { KnownErrorCode } from '@/consts/api.ts';
|
||||
import { ThemeType } from '@/core/theme.ts';
|
||||
import {
|
||||
isUserRegistrationEnabled,
|
||||
isUserForgetPasswordEnabled,
|
||||
isUserVerifyEmailEnabled,
|
||||
getLoginPageTips
|
||||
} from '@/lib/server_settings.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
import { isUserRegistrationEnabled, isUserForgetPasswordEnabled, isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
|
||||
|
||||
import {
|
||||
mdiOnepassword,
|
||||
mdiHelpCircleOutline
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
passcode: '',
|
||||
backupCode: '',
|
||||
tempToken: '',
|
||||
logining: false,
|
||||
verifying: false,
|
||||
show2faInput: false,
|
||||
twoFAVerifyType: 'passcode',
|
||||
showMobileQrCode: false,
|
||||
icons: {
|
||||
passcode: mdiOnepassword,
|
||||
backupCode: mdiHelpCircleOutline
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useExchangeRatesStore),
|
||||
ezBookkeepingLogoPath() {
|
||||
return APPLICATION_LOGO_PATH;
|
||||
},
|
||||
version() {
|
||||
return 'v' + this.$version;
|
||||
},
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(false);
|
||||
},
|
||||
isUserRegistrationEnabled() {
|
||||
return isUserRegistrationEnabled();
|
||||
},
|
||||
isUserForgetPasswordEnabled() {
|
||||
return isUserForgetPasswordEnabled();
|
||||
},
|
||||
tips() {
|
||||
return this.$locale.getServerTipContent(getLoginPageTips());
|
||||
},
|
||||
inputIsEmpty() {
|
||||
return !this.username || !this.password;
|
||||
},
|
||||
twoFAInputIsEmpty() {
|
||||
if (this.twoFAVerifyType === 'backupcode') {
|
||||
return !this.backupCode;
|
||||
} else {
|
||||
return !this.passcode;
|
||||
}
|
||||
},
|
||||
isDarkMode() {
|
||||
return this.globalTheme.global.name.value === ThemeType.Dark;
|
||||
},
|
||||
currentLanguageName() {
|
||||
return this.$locale.getCurrentLanguageDisplayName();
|
||||
},
|
||||
isUserVerifyEmailEnabled() {
|
||||
return isUserVerifyEmailEnabled();
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const theme = useTheme();
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
|
||||
return {
|
||||
globalTheme: theme
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
const self = this;
|
||||
const router = useRouter();
|
||||
const theme = useTheme();
|
||||
|
||||
if (!self.username) {
|
||||
self.$refs.snackbar.showMessage('Username cannot be blank');
|
||||
return;
|
||||
}
|
||||
const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
|
||||
|
||||
if (!self.password) {
|
||||
self.$refs.snackbar.showMessage('Password cannot be blank');
|
||||
return;
|
||||
}
|
||||
const rootStore = useRootStore();
|
||||
|
||||
if (self.tempToken) {
|
||||
self.show2faInput = true;
|
||||
return;
|
||||
}
|
||||
const {
|
||||
version,
|
||||
username,
|
||||
password,
|
||||
passcode,
|
||||
backupCode,
|
||||
tempToken,
|
||||
twoFAVerifyType,
|
||||
logining,
|
||||
verifying,
|
||||
inputIsEmpty,
|
||||
twoFAInputIsEmpty,
|
||||
tips,
|
||||
changeLanguage,
|
||||
doAfterLogin
|
||||
} = useLoginPageBase();
|
||||
|
||||
if (self.logining) {
|
||||
return;
|
||||
}
|
||||
const icons = {
|
||||
passcode: mdiOnepassword,
|
||||
backupCode: mdiHelpCircleOutline
|
||||
};
|
||||
|
||||
self.logining = true;
|
||||
const passwordInput = useTemplateRef<VTextField>('passwordInput');
|
||||
const passcodeInput = useTemplateRef<VTextField>('passcodeInput');
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
|
||||
self.rootStore.authorize({
|
||||
loginName: self.username,
|
||||
password: self.password
|
||||
}).then(authResponse => {
|
||||
self.logining = false;
|
||||
const show2faInput = ref<boolean>(false);
|
||||
const showMobileQrCode = ref<boolean>(false);
|
||||
|
||||
if (authResponse.need2FA) {
|
||||
self.tempToken = authResponse.token;
|
||||
self.show2faInput = true;
|
||||
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
|
||||
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
|
||||
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
|
||||
|
||||
self.$nextTick(() => {
|
||||
if (self.$refs.passcodeInput) {
|
||||
self.$refs.passcodeInput.focus();
|
||||
self.$refs.passcodeInput.select();
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (authResponse.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(authResponse.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (authResponse.notificationContent) {
|
||||
self.rootStore.setNotificationContent(authResponse.notificationContent);
|
||||
}
|
||||
|
||||
self.$router.replace('/');
|
||||
}).catch(error => {
|
||||
self.logining = false;
|
||||
|
||||
if (self.isUserVerifyEmailEnabled && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
|
||||
self.$router.push(`/verify_email?email=${encodeURIComponent(error.error.context.email)}&emailSent=${error.error.context.hasValidEmailVerifyToken || false}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
verify() {
|
||||
const self = this;
|
||||
|
||||
if (self.twoFAInputIsEmpty || self.verifying) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (self.twoFAVerifyType === 'passcode' && !self.passcode) {
|
||||
self.$refs.snackbar.showMessage('Passcode cannot be blank');
|
||||
return;
|
||||
} else if (self.twoFAVerifyType === 'backupcode' && !self.backupCode) {
|
||||
self.$refs.snackbar.showMessage('Backup code cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
self.verifying = true;
|
||||
|
||||
self.rootStore.authorize2FA({
|
||||
token: self.tempToken,
|
||||
passcode: self.twoFAVerifyType === 'passcode' ? self.passcode : null,
|
||||
recoveryCode: self.twoFAVerifyType === 'backupcode' ? self.backupCode : null
|
||||
}).then(authResponse => {
|
||||
self.verifying = false;
|
||||
|
||||
if (authResponse.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(authResponse.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (authResponse.notificationContent) {
|
||||
self.rootStore.setNotificationContent(authResponse.notificationContent);
|
||||
}
|
||||
|
||||
self.$router.replace('/');
|
||||
}).catch(error => {
|
||||
self.verifying = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
changeLanguage(locale) {
|
||||
const localeDefaultSettings = this.$locale.setLanguage(locale);
|
||||
this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
}
|
||||
function login(): void {
|
||||
if (!username.value) {
|
||||
snackbar.value?.showMessage('Username cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password.value) {
|
||||
snackbar.value?.showMessage('Password cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
if (tempToken.value) {
|
||||
show2faInput.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (logining.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
logining.value = true;
|
||||
|
||||
rootStore.authorize({
|
||||
loginName: username.value,
|
||||
password: password.value
|
||||
}).then(authResponse => {
|
||||
logining.value = false;
|
||||
|
||||
if (authResponse.need2FA) {
|
||||
tempToken.value = authResponse.token;
|
||||
show2faInput.value = true;
|
||||
|
||||
nextTick(() => {
|
||||
if (passcodeInput.value) {
|
||||
passcodeInput.value.focus();
|
||||
passcodeInput.value.select();
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
doAfterLogin(authResponse);
|
||||
router.replace('/');
|
||||
}).catch(error => {
|
||||
logining.value = false;
|
||||
|
||||
if (isUserVerifyEmailEnabled() && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
|
||||
router.push(`/verify_email?email=${encodeURIComponent(error.error.context.email)}&emailSent=${error.error.context.hasValidEmailVerifyToken || false}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function verify(): void {
|
||||
if (twoFAInputIsEmpty.value || verifying.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (twoFAVerifyType.value === 'passcode' && !passcode.value) {
|
||||
snackbar.value?.showMessage('Passcode cannot be blank');
|
||||
return;
|
||||
} else if (twoFAVerifyType.value === 'backupcode' && !backupCode.value) {
|
||||
snackbar.value?.showMessage('Backup code cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
verifying.value = true;
|
||||
|
||||
rootStore.authorize2FA({
|
||||
token: tempToken.value,
|
||||
passcode: twoFAVerifyType.value === 'passcode' ? passcode.value : null,
|
||||
recoveryCode: twoFAVerifyType.value === 'backupcode' ? backupCode.value : null
|
||||
}).then(authResponse => {
|
||||
verifying.value = false;
|
||||
|
||||
doAfterLogin(authResponse);
|
||||
router.replace('/');
|
||||
}).catch(error => {
|
||||
verifying.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
+243
-309
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<f7-page no-navbar no-swipeback login-screen hide-toolbar-on-scroll>
|
||||
<f7-login-screen-title>
|
||||
<img alt="logo" class="login-page-logo" :src="ezBookkeepingLogoPath" />
|
||||
<f7-block class="login-page-tile margin-vertical-half">{{ $t('global.app.title') }}</f7-block>
|
||||
<img alt="logo" class="login-page-logo" :src="APPLICATION_LOGO_PATH" />
|
||||
<f7-block class="login-page-tile margin-vertical-half">{{ tt('global.app.title') }}</f7-block>
|
||||
</f7-login-screen-title>
|
||||
|
||||
<f7-list inset v-if="tips">
|
||||
@@ -14,8 +14,8 @@
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
clear-button
|
||||
:label="$t('Username')"
|
||||
:placeholder="$t('Your username or email')"
|
||||
:label="tt('Username')"
|
||||
:placeholder="tt('Your username or email')"
|
||||
v-model:value="username"
|
||||
@input="tempToken = ''"
|
||||
></f7-list-input>
|
||||
@@ -23,8 +23,8 @@
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
clear-button
|
||||
:label="$t('Password')"
|
||||
:placeholder="$t('Your password')"
|
||||
:label="tt('Password')"
|
||||
:placeholder="tt('Your password')"
|
||||
v-model:value="password"
|
||||
@input="tempToken = ''"
|
||||
@keyup.enter="loginByPressEnter"
|
||||
@@ -35,22 +35,22 @@
|
||||
<f7-list-item>
|
||||
<template #title>
|
||||
<small>
|
||||
<f7-link external :href="desktopVersionPath">{{ $t('Switch to Desktop Version') }}</f7-link>
|
||||
<f7-link external :href="getDesktopVersionPath()">{{ tt('Switch to Desktop Version') }}</f7-link>
|
||||
</small>
|
||||
</template>
|
||||
<template #after>
|
||||
<small>
|
||||
<f7-link :class="{'disabled': !isUserForgetPasswordEnabled}" @click="forgetPasswordEmail = ''; showForgetPasswordSheet = true">{{ $t('Forget Password?') }}</f7-link>
|
||||
<f7-link :class="{'disabled': !isUserForgetPasswordEnabled()}" @click="forgetPasswordEmail = ''; showForgetPasswordSheet = true">{{ tt('Forget Password?') }}</f7-link>
|
||||
</small>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list class="margin-vertical-half">
|
||||
<f7-list-button :class="{ 'disabled': inputIsEmpty || logining }" :text="$t('Log In')" @click="login"></f7-list-button>
|
||||
<f7-list-button :class="{ 'disabled': inputIsEmpty || logining }" :text="tt('Log In')" @click="login"></f7-list-button>
|
||||
<f7-block-footer>
|
||||
<span>{{ $t('Don\'t have an account?') }}</span>
|
||||
<f7-link :class="{'disabled': !isUserRegistrationEnabled}" href="/signup" :text="$t('Create an account')"></f7-link>
|
||||
<span>{{ tt('Don\'t have an account?') }}</span>
|
||||
<f7-link :class="{'disabled': !isUserRegistrationEnabled()}" href="/signup" :text="tt('Create an account')"></f7-link>
|
||||
</f7-block-footer>
|
||||
<f7-block-footer class="padding-bottom">
|
||||
</f7-block-footer>
|
||||
@@ -98,7 +98,7 @@
|
||||
>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div class="ebk-sheet-title"><b>{{ $t('Two-Factor Authentication') }}</b></div>
|
||||
<div class="ebk-sheet-title"><b>{{ tt('Two-Factor Authentication') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<f7-list strong class="no-margin">
|
||||
@@ -110,8 +110,8 @@
|
||||
clear-button
|
||||
class="no-margin no-padding-bottom"
|
||||
v-if="twoFAVerifyType === 'passcode'"
|
||||
:label="$t('Passcode')"
|
||||
:placeholder="$t('Passcode')"
|
||||
:label="tt('Passcode')"
|
||||
:placeholder="tt('Passcode')"
|
||||
v-model:value="passcode"
|
||||
@keyup.enter="verify"
|
||||
></f7-list-input>
|
||||
@@ -121,15 +121,15 @@
|
||||
clear-button
|
||||
class="no-margin no-padding-bottom"
|
||||
v-if="twoFAVerifyType === 'backupcode'"
|
||||
:label="$t('Backup Code')"
|
||||
:placeholder="$t('Backup Code')"
|
||||
:label="tt('Backup Code')"
|
||||
:placeholder="tt('Backup Code')"
|
||||
v-model:value="backupCode"
|
||||
@keyup.enter="verify"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill :class="{ 'disabled': twoFAInputIsEmpty || verifying }" :text="$t('Verify')" @click="verify"></f7-button>
|
||||
<f7-button large fill :class="{ 'disabled': twoFAInputIsEmpty || verifying }" :text="tt('Verify')" @click="verify"></f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="switch2FAVerifyType" :text="$t(twoFAVerifyTypeSwitchName)"></f7-link>
|
||||
<f7-link @click="switch2FAVerifyType" :text="tt(twoFAVerifyTypeSwitchName)"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
@@ -142,11 +142,11 @@
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div class="ebk-sheet-title"><b>{{ $t('Forget Password?') }}</b></div>
|
||||
<div class="ebk-sheet-title"><b>{{ tt('Forget Password?') }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin">
|
||||
<span>{{ $t('Please enter your email address used for registration and we\'ll send you an email with a reset password link') }}</span>
|
||||
<span>{{ tt('Please enter your email address used for registration and we\'ll send you an email with a reset password link') }}</span>
|
||||
</p>
|
||||
<f7-list strong class="no-margin">
|
||||
<f7-list-input
|
||||
@@ -156,22 +156,22 @@
|
||||
floating-label
|
||||
clear-button
|
||||
class="no-margin no-padding-bottom"
|
||||
:label="$t('E-mail')"
|
||||
:placeholder="$t('Your email address')"
|
||||
:label="tt('E-mail')"
|
||||
:placeholder="tt('Your email address')"
|
||||
v-model:value="forgetPasswordEmail"
|
||||
@keyup.enter="requestResetPassword"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill :class="{ 'disabled': !forgetPasswordEmail || requestingForgetPassword }" :text="$t('Send Reset Link')" @click="requestResetPassword"></f7-button>
|
||||
<f7-button large fill :class="{ 'disabled': !forgetPasswordEmail || requestingForgetPassword }" :text="tt('Send Reset Link')" @click="requestResetPassword"></f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link :class="{ 'disabled': requestingForgetPassword }" @click="showForgetPasswordSheet = false" :text="$t('Cancel')"></f7-link>
|
||||
<f7-link :class="{ 'disabled': requestingForgetPassword }" @click="showForgetPasswordSheet = false" :text="tt('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
|
||||
<password-input-sheet :title="$t('Verify your email')"
|
||||
:hint="$t(hasValidEmailVerifyToken ? 'format.misc.accountActivationAndResendValidationEmailTip' : 'format.misc.resendValidationEmailTip', { email: resendVerifyEmail })"
|
||||
<password-input-sheet :title="tt('Verify your email')"
|
||||
:hint="tt(hasValidEmailVerifyToken ? 'format.misc.accountActivationAndResendValidationEmailTip' : 'format.misc.resendValidationEmailTip', { email: resendVerifyEmail })"
|
||||
:confirm-disabled="requestingResendVerifyEmail"
|
||||
:cancel-disabled="requestingResendVerifyEmail"
|
||||
v-model:show="showVerifyEmailSheet"
|
||||
@@ -181,299 +181,233 @@
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 { useLoginPageBase } from '@/views/base/LoginPageBase.ts';
|
||||
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
|
||||
import { KnownErrorCode } from '@/consts/api.ts';
|
||||
import {
|
||||
isUserRegistrationEnabled,
|
||||
isUserForgetPasswordEnabled,
|
||||
isUserVerifyEmailEnabled,
|
||||
getLoginPageTips
|
||||
} from '@/lib/server_settings.ts';
|
||||
import { isUserRegistrationEnabled, isUserForgetPasswordEnabled, isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
|
||||
import { getDesktopVersionPath } from '@/lib/version.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
import { isModalShowing } from '@/lib/ui/mobile.ts';
|
||||
import { useI18nUIComponents, showLoading, hideLoading, isModalShowing } from '@/lib/ui/mobile.ts';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
passcode: '',
|
||||
backupCode: '',
|
||||
tempToken: '',
|
||||
forgetPasswordEmail: '',
|
||||
resendVerifyEmail: '',
|
||||
hasValidEmailVerifyToken: false,
|
||||
currentPasswordForResendVerifyEmail: '',
|
||||
logining: false,
|
||||
verifying: false,
|
||||
requestingForgetPassword: false,
|
||||
requestingResendVerifyEmail: false,
|
||||
show2faSheet: false,
|
||||
showForgetPasswordSheet: false,
|
||||
showVerifyEmailSheet: false,
|
||||
twoFAVerifyType: 'passcode'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useExchangeRatesStore),
|
||||
ezBookkeepingLogoPath() {
|
||||
return APPLICATION_LOGO_PATH;
|
||||
},
|
||||
version() {
|
||||
return 'v' + this.$version;
|
||||
},
|
||||
desktopVersionPath() {
|
||||
return getDesktopVersionPath();
|
||||
},
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(false);
|
||||
},
|
||||
isUserRegistrationEnabled() {
|
||||
return isUserRegistrationEnabled();
|
||||
},
|
||||
isUserForgetPasswordEnabled() {
|
||||
return isUserForgetPasswordEnabled();
|
||||
},
|
||||
tips() {
|
||||
return this.$locale.getServerTipContent(getLoginPageTips());
|
||||
},
|
||||
inputIsEmpty() {
|
||||
return !this.username || !this.password;
|
||||
},
|
||||
twoFAInputIsEmpty() {
|
||||
if (this.twoFAVerifyType === 'backupcode') {
|
||||
return !this.backupCode;
|
||||
} else {
|
||||
return !this.passcode;
|
||||
}
|
||||
},
|
||||
twoFAVerifyTypeSwitchName() {
|
||||
if (this.twoFAVerifyType === 'backupcode') {
|
||||
return 'Use Passcode';
|
||||
} else {
|
||||
return 'Use Backup Code';
|
||||
}
|
||||
},
|
||||
currentLanguageCode() {
|
||||
return this.$locale.getCurrentLanguageTag();
|
||||
},
|
||||
currentLanguageName() {
|
||||
return this.$locale.getCurrentLanguageDisplayName();
|
||||
},
|
||||
isUserVerifyEmailEnabled() {
|
||||
return isUserVerifyEmailEnabled();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
const props = defineProps<{
|
||||
f7router: Router.Router;
|
||||
}>();
|
||||
|
||||
if (!this.username) {
|
||||
self.$alert('Username cannot be blank');
|
||||
return;
|
||||
}
|
||||
const { tt, getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
|
||||
const { showAlert, showToast } = useI18nUIComponents();
|
||||
|
||||
if (!this.password) {
|
||||
self.$alert('Password cannot be blank');
|
||||
return;
|
||||
}
|
||||
const rootStore = useRootStore();
|
||||
|
||||
if (self.tempToken) {
|
||||
self.show2faSheet = true;
|
||||
return;
|
||||
}
|
||||
const {
|
||||
version,
|
||||
username,
|
||||
password,
|
||||
passcode,
|
||||
backupCode,
|
||||
tempToken,
|
||||
twoFAVerifyType,
|
||||
logining,
|
||||
verifying,
|
||||
inputIsEmpty,
|
||||
twoFAInputIsEmpty,
|
||||
tips,
|
||||
changeLanguage,
|
||||
doAfterLogin
|
||||
} = useLoginPageBase();
|
||||
|
||||
self.logining = true;
|
||||
self.resendVerifyEmail = '';
|
||||
self.hasValidEmailVerifyToken = false;
|
||||
self.currentPasswordForResendVerifyEmail = '';
|
||||
self.$showLoading(() => self.logining);
|
||||
const forgetPasswordEmail = ref<string>('');
|
||||
const resendVerifyEmail = ref<string>('');
|
||||
const hasValidEmailVerifyToken = ref<boolean>(false);
|
||||
const currentPasswordForResendVerifyEmail = ref<string>('');
|
||||
const requestingForgetPassword = ref<boolean>(false);
|
||||
const requestingResendVerifyEmail = ref<boolean>(false);
|
||||
const show2faSheet = ref<boolean>(false);
|
||||
const showForgetPasswordSheet = ref<boolean>(false);
|
||||
const showVerifyEmailSheet = ref<boolean>(false);
|
||||
|
||||
self.rootStore.authorize({
|
||||
loginName: self.username,
|
||||
password: self.password
|
||||
}).then(authResponse => {
|
||||
self.logining = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (authResponse.need2FA) {
|
||||
self.tempToken = authResponse.token;
|
||||
self.show2faSheet = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (authResponse.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(authResponse.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (authResponse.notificationContent) {
|
||||
self.rootStore.setNotificationContent(authResponse.notificationContent);
|
||||
}
|
||||
|
||||
router.refreshPage();
|
||||
}).catch(error => {
|
||||
self.logining = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (self.isUserVerifyEmailEnabled && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
|
||||
self.resendVerifyEmail = error.error.context.email;
|
||||
self.hasValidEmailVerifyToken = error.error.context.hasValidEmailVerifyToken || false;
|
||||
self.currentPasswordForResendVerifyEmail = '';
|
||||
self.showVerifyEmailSheet = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
loginByPressEnter() {
|
||||
if (isModalShowing()) {
|
||||
return;
|
||||
}
|
||||
|
||||
return this.login();
|
||||
},
|
||||
verify() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
|
||||
if (self.twoFAInputIsEmpty || self.verifying) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.twoFAVerifyType === 'passcode' && !this.passcode) {
|
||||
self.$alert('Passcode cannot be blank');
|
||||
return;
|
||||
} else if (this.twoFAVerifyType === 'backupcode' && !this.backupCode) {
|
||||
self.$alert('Backup code cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
self.verifying = true;
|
||||
self.$showLoading(() => self.verifying);
|
||||
|
||||
self.rootStore.authorize2FA({
|
||||
token: self.tempToken,
|
||||
passcode: self.twoFAVerifyType === 'passcode' ? self.passcode : null,
|
||||
recoveryCode: self.twoFAVerifyType === 'backupcode' ? self.backupCode : null
|
||||
}).then(authResponse => {
|
||||
self.verifying = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (authResponse.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(authResponse.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(authResponse.user.expenseAmountColor, authResponse.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (authResponse.notificationContent) {
|
||||
self.rootStore.setNotificationContent(authResponse.notificationContent);
|
||||
}
|
||||
|
||||
self.show2faSheet = false;
|
||||
router.refreshPage();
|
||||
}).catch(error => {
|
||||
self.verifying = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
requestResetPassword() {
|
||||
const self = this;
|
||||
|
||||
if (!self.forgetPasswordEmail) {
|
||||
self.$alert('Email address cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
self.requestingForgetPassword = true;
|
||||
self.$showLoading(() => self.requestingForgetPassword);
|
||||
|
||||
self.rootStore.requestResetPassword({
|
||||
email: self.forgetPasswordEmail
|
||||
}).then(() => {
|
||||
self.requestingForgetPassword = false;
|
||||
self.$hideLoading();
|
||||
|
||||
self.$toast('Password reset email has been sent');
|
||||
self.showForgetPasswordSheet = false;
|
||||
}).catch(error => {
|
||||
self.requestingForgetPassword = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
requestResendVerifyEmail() {
|
||||
const self = this;
|
||||
|
||||
if (!self.currentPasswordForResendVerifyEmail) {
|
||||
self.$toast('Current password cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
self.requestingResendVerifyEmail = true;
|
||||
self.$showLoading(() => self.requestingResendVerifyEmail);
|
||||
|
||||
self.rootStore.resendVerifyEmailByUnloginUser({
|
||||
email: self.resendVerifyEmail,
|
||||
password: self.currentPasswordForResendVerifyEmail
|
||||
}).then(() => {
|
||||
self.requestingResendVerifyEmail = false;
|
||||
self.$hideLoading();
|
||||
|
||||
self.$toast('Validation email has been sent');
|
||||
self.showVerifyEmailSheet = false;
|
||||
}).catch(error => {
|
||||
self.requestingResendVerifyEmail = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
switch2FAVerifyType() {
|
||||
if (this.twoFAVerifyType === 'passcode') {
|
||||
this.twoFAVerifyType = 'backupcode';
|
||||
} else {
|
||||
this.twoFAVerifyType = 'passcode';
|
||||
}
|
||||
},
|
||||
changeLanguage(locale) {
|
||||
const localeDefaultSettings = this.$locale.setLanguage(locale);
|
||||
this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
}
|
||||
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
|
||||
const currentLanguageCode = computed<string>(() => getCurrentLanguageTag());
|
||||
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
|
||||
const twoFAVerifyTypeSwitchName = computed<string>(() => {
|
||||
if (twoFAVerifyType.value === 'backupcode') {
|
||||
return 'Use Passcode';
|
||||
} else {
|
||||
return 'Use Backup Code';
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
function login(): void {
|
||||
const router = props.f7router;
|
||||
|
||||
if (!username.value) {
|
||||
showAlert('Username cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password.value) {
|
||||
showAlert('Password cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
if (tempToken.value) {
|
||||
show2faSheet.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
logining.value = true;
|
||||
resendVerifyEmail.value = '';
|
||||
hasValidEmailVerifyToken.value = false;
|
||||
currentPasswordForResendVerifyEmail.value = '';
|
||||
showLoading(() => logining.value);
|
||||
|
||||
rootStore.authorize({
|
||||
loginName: username.value,
|
||||
password: password.value
|
||||
}).then(authResponse => {
|
||||
logining.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (authResponse.need2FA) {
|
||||
tempToken.value = authResponse.token;
|
||||
show2faSheet.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
doAfterLogin(authResponse);
|
||||
router.refreshPage();
|
||||
}).catch(error => {
|
||||
logining.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (isUserVerifyEmailEnabled() && error.error && error.error.errorCode === KnownErrorCode.UserEmailNotVerified && error.error.context && error.error.context.email) {
|
||||
resendVerifyEmail.value = error.error.context.email;
|
||||
hasValidEmailVerifyToken.value = error.error.context.hasValidEmailVerifyToken || false;
|
||||
currentPasswordForResendVerifyEmail.value = '';
|
||||
showVerifyEmailSheet.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loginByPressEnter(): void {
|
||||
if (isModalShowing()) {
|
||||
return;
|
||||
}
|
||||
|
||||
return login();
|
||||
}
|
||||
|
||||
function verify(): void {
|
||||
const router = props.f7router;
|
||||
|
||||
if (twoFAInputIsEmpty.value || verifying.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (twoFAVerifyType.value === 'passcode' && !passcode.value) {
|
||||
showAlert('Passcode cannot be blank');
|
||||
return;
|
||||
} else if (twoFAVerifyType.value === 'backupcode' && !backupCode.value) {
|
||||
showAlert('Backup code cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
verifying.value = true;
|
||||
showLoading(() => verifying.value);
|
||||
|
||||
rootStore.authorize2FA({
|
||||
token: tempToken.value,
|
||||
passcode: twoFAVerifyType.value === 'passcode' ? passcode.value : null,
|
||||
recoveryCode: twoFAVerifyType.value === 'backupcode' ? backupCode.value : null
|
||||
}).then(authResponse => {
|
||||
verifying.value = false;
|
||||
hideLoading();
|
||||
|
||||
doAfterLogin(authResponse);
|
||||
show2faSheet.value = false;
|
||||
router.refreshPage();
|
||||
}).catch(error => {
|
||||
verifying.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function requestResetPassword(): void {
|
||||
if (!forgetPasswordEmail.value) {
|
||||
showAlert('Email address cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
requestingForgetPassword.value = true;
|
||||
showLoading(() => requestingForgetPassword.value);
|
||||
|
||||
rootStore.requestResetPassword({
|
||||
email: forgetPasswordEmail.value
|
||||
}).then(() => {
|
||||
requestingForgetPassword.value = false;
|
||||
hideLoading();
|
||||
|
||||
showToast('Password reset email has been sent');
|
||||
showForgetPasswordSheet.value = false;
|
||||
}).catch(error => {
|
||||
requestingForgetPassword.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function requestResendVerifyEmail(): void {
|
||||
if (!currentPasswordForResendVerifyEmail.value) {
|
||||
showToast('Current password cannot be blank');
|
||||
return;
|
||||
}
|
||||
|
||||
requestingResendVerifyEmail.value = true;
|
||||
showLoading(() => requestingResendVerifyEmail.value);
|
||||
|
||||
rootStore.resendVerifyEmailByUnloginUser({
|
||||
email: resendVerifyEmail.value,
|
||||
password: currentPasswordForResendVerifyEmail.value
|
||||
}).then(() => {
|
||||
requestingResendVerifyEmail.value = false;
|
||||
hideLoading();
|
||||
|
||||
showToast('Validation email has been sent');
|
||||
showVerifyEmailSheet.value = false;
|
||||
}).catch(error => {
|
||||
requestingResendVerifyEmail.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function switch2FAVerifyType(): void {
|
||||
if (twoFAVerifyType.value === 'passcode') {
|
||||
twoFAVerifyType.value = 'backupcode';
|
||||
} else {
|
||||
twoFAVerifyType.value = 'passcode';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user