mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
migrate unlock page to composition API and typescript
This commit is contained in:
MaysWind
@@ -0,0 +1,91 @@
|
||||
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 { useTokensStore } from '@/stores/token.ts';
|
||||
// @ts-expect-error the above file is migrating to ts
|
||||
import { useTransactionsStore } from '@/stores/transaction.js';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { isWebAuthnSupported } from '@/lib/webauthn.ts';
|
||||
import { hasWebAuthnConfig } from '@/lib/userstate.ts';
|
||||
import { getVersion } from '@/lib/version.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
|
||||
export function useUnlockPageBase() {
|
||||
const { setLanguage, initLocale } = useI18n();
|
||||
|
||||
const rootStore = useRootStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
const tokensStore = useTokensStore();
|
||||
const transactionsStore = useTransactionsStore();
|
||||
const exchangeRatesStore = useExchangeRatesStore();
|
||||
|
||||
const version: string = `v${getVersion()}`;
|
||||
|
||||
const pinCode = ref<string>('');
|
||||
|
||||
const isWebAuthnAvailable = computed<boolean>(() => {
|
||||
return settingsStore.appSettings.applicationLockWebAuthn
|
||||
&& hasWebAuthnConfig()
|
||||
&& isWebAuthnSupported();
|
||||
});
|
||||
|
||||
function isPinCodeValid(pinCode: string): boolean {
|
||||
return !!pinCode && pinCode.length === 6;
|
||||
}
|
||||
|
||||
function changeLanguage(locale: string): void {
|
||||
const localeDefaultSettings = setLanguage(locale);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
}
|
||||
|
||||
function doAfterUnlocked(): void {
|
||||
transactionsStore.initTransactionDraft();
|
||||
tokensStore.refreshTokenAndRevokeOldToken().then(response => {
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = setLanguage(response.user.language);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (response.notificationContent) {
|
||||
rootStore.setNotificationContent(response.notificationContent);
|
||||
}
|
||||
});
|
||||
|
||||
if (settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
}
|
||||
|
||||
function doRelogin(): void {
|
||||
rootStore.forceLogout();
|
||||
settingsStore.clearAppSettings();
|
||||
|
||||
const localeDefaultSettings = initLocale(userStore.currentUserLanguage, settingsStore.appSettings.timeZone);
|
||||
settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(userStore.currentUserExpenseAmountColor, userStore.currentUserIncomeAmountColor);
|
||||
}
|
||||
|
||||
return {
|
||||
// constants
|
||||
version,
|
||||
// states
|
||||
pinCode,
|
||||
// computed states
|
||||
isWebAuthnAvailable,
|
||||
// methods
|
||||
isPinCodeValid,
|
||||
changeLanguage,
|
||||
doAfterUnlocked,
|
||||
doRelogin
|
||||
};
|
||||
}
|
||||
+109
-166
@@ -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,9 +22,9 @@
|
||||
<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('Unlock Application') }}</h4>
|
||||
<p class="mb-0" v-if="isWebAuthnAvailable">{{ $t('Please enter your PIN code or use WebAuthn to unlock application') }}</p>
|
||||
<p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ $t('Please enter your PIN code to unlock application') }}</p>
|
||||
<h4 class="text-h4 mb-2">{{ tt('Unlock Application') }}</h4>
|
||||
<p class="mb-0" v-if="isWebAuthnAvailable">{{ tt('Please enter your PIN code or use WebAuthn to unlock application') }}</p>
|
||||
<p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ tt('Please enter your PIN code to unlock application') }}</p>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="pb-0 mb-6">
|
||||
@@ -39,22 +39,22 @@
|
||||
<v-col cols="12">
|
||||
<v-btn block :disabled="!isPinCodeValid(pinCode) || verifyingByWebAuthn"
|
||||
@click="unlockByPin(pinCode)">
|
||||
{{ $t('Unlock with PIN Code') }}
|
||||
{{ tt('Unlock with PIN Code') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" v-if="isWebAuthnAvailable">
|
||||
<v-btn block variant="tonal" :disabled="verifyingByWebAuthn"
|
||||
@click="unlockByWebAuthn">
|
||||
{{ $t('Unlock with WebAuthn') }}
|
||||
{{ tt('Unlock with WebAuthn') }}
|
||||
<v-progress-circular indeterminate size="22" class="ml-2" v-if="verifyingByWebAuthn"></v-progress-circular>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" class="text-center">
|
||||
<span class="me-1">{{ $t('Can\'t Unlock?') }}</span>
|
||||
<span class="me-1">{{ tt('Can\'t Unlock?') }}</span>
|
||||
<a class="text-primary" href="javascript:void(0);" @click="relogin">
|
||||
{{ $t('Re-login') }}
|
||||
{{ tt('Re-login') }}
|
||||
</a>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -106,16 +106,21 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
|
||||
import SnackBar from '@/components/desktop/SnackBar.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 type { LanguageOption } from '@/locales/index.ts';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useUnlockPageBase } from '@/views/base/UnlockPageBase.ts';
|
||||
|
||||
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useTokensStore } from '@/stores/token.ts';
|
||||
import { useTransactionsStore } from '@/stores/transaction.js';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
|
||||
import { ThemeType } from '@/core/theme.ts';
|
||||
@@ -129,165 +134,103 @@ import {
|
||||
hasWebAuthnConfig,
|
||||
getWebAuthnCredentialId
|
||||
} from '@/lib/userstate.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
import logger from '@/lib/logger.ts';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pinCode: '',
|
||||
verifyingByWebAuthn: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useTransactionsStore, useExchangeRatesStore),
|
||||
ezBookkeepingLogoPath() {
|
||||
return APPLICATION_LOGO_PATH;
|
||||
},
|
||||
version() {
|
||||
return 'v' + this.$version;
|
||||
},
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(false);
|
||||
},
|
||||
isWebAuthnAvailable() {
|
||||
return this.settingsStore.appSettings.applicationLockWebAuthn
|
||||
&& hasWebAuthnConfig()
|
||||
&& isWebAuthnSupported();
|
||||
},
|
||||
isDarkMode() {
|
||||
return this.globalTheme.global.name.value === ThemeType.Dark;
|
||||
},
|
||||
currentLanguageName() {
|
||||
return this.$locale.getCurrentLanguageDisplayName();
|
||||
type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
|
||||
const router = useRouter();
|
||||
const theme = useTheme();
|
||||
|
||||
const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
|
||||
const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, changeLanguage, doAfterUnlocked, doRelogin } = useUnlockPageBase();
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
|
||||
const verifyingByWebAuthn = ref<boolean>(false);
|
||||
|
||||
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
|
||||
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
|
||||
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
|
||||
|
||||
function unlockByWebAuthn(): void {
|
||||
const webAuthnCredentialId = getWebAuthnCredentialId();
|
||||
|
||||
if (!userStore.currentUserBasicInfo || !webAuthnCredentialId) {
|
||||
snackbar.value?.showMessage('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!settingsStore.appSettings.applicationLockWebAuthn || !hasWebAuthnConfig()) {
|
||||
snackbar.value?.showMessage('WebAuthn is not enabled');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isWebAuthnSupported()) {
|
||||
snackbar.value?.showMessage('WebAuth is not supported on this device');
|
||||
return;
|
||||
}
|
||||
|
||||
verifyingByWebAuthn.value = true;
|
||||
|
||||
verifyWebAuthnCredential(
|
||||
userStore.currentUserBasicInfo,
|
||||
webAuthnCredentialId
|
||||
).then(({ id, userName, userSecret }) => {
|
||||
verifyingByWebAuthn.value = false;
|
||||
|
||||
unlockTokenByWebAuthn(id, userName, userSecret);
|
||||
doAfterUnlocked();
|
||||
|
||||
router.replace('/');
|
||||
}).catch(error => {
|
||||
verifyingByWebAuthn.value = false;
|
||||
logger.error('failed to use webauthn to verify', error);
|
||||
|
||||
if (error.notSupported) {
|
||||
snackbar.value?.showMessage('WebAuth is not supported on this device');
|
||||
} else if (error.name === 'NotAllowedError') {
|
||||
snackbar.value?.showMessage('User has canceled authentication');
|
||||
} else if (error.invalid) {
|
||||
snackbar.value?.showMessage('Failed to authenticate with WebAuthn');
|
||||
} else {
|
||||
snackbar.value?.showMessage('User has canceled or this device does not support WebAuthn');
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const theme = useTheme();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
globalTheme: theme
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
unlockByWebAuthn() {
|
||||
const self = this;
|
||||
function unlockByPin(pinCode: string): void {
|
||||
if (!isPinCodeValid(pinCode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!self.settingsStore.appSettings.applicationLockWebAuthn || !hasWebAuthnConfig()) {
|
||||
self.$refs.snackbar.showMessage('WebAuthn is not enabled');
|
||||
return;
|
||||
}
|
||||
const user = userStore.currentUserBasicInfo;
|
||||
|
||||
if (!isWebAuthnSupported()) {
|
||||
self.$refs.snackbar.showMessage('WebAuth is not supported on this device');
|
||||
return;
|
||||
}
|
||||
if (!user || !user.username) {
|
||||
snackbar.value?.showMessage('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
self.verifyingByWebAuthn = true;
|
||||
try {
|
||||
unlockTokenByPinCode(user.username, pinCode);
|
||||
doAfterUnlocked();
|
||||
|
||||
verifyWebAuthnCredential(
|
||||
self.userStore.currentUserBasicInfo,
|
||||
getWebAuthnCredentialId()
|
||||
).then(({ id, userName, userSecret }) => {
|
||||
self.verifyingByWebAuthn = false;
|
||||
|
||||
unlockTokenByWebAuthn(id, userName, userSecret);
|
||||
self.transactionsStore.initTransactionDraft();
|
||||
self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (response.notificationContent) {
|
||||
self.rootStore.setNotificationContent(response.notificationContent);
|
||||
}
|
||||
});
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
self.$router.replace('/');
|
||||
}).catch(error => {
|
||||
self.verifyingByWebAuthn = false;
|
||||
logger.error('failed to use webauthn to verify', error);
|
||||
|
||||
if (error.notSupported) {
|
||||
self.$refs.snackbar.showMessage('WebAuth is not supported on this device');
|
||||
} else if (error.name === 'NotAllowedError') {
|
||||
self.$refs.snackbar.showMessage('User has canceled authentication');
|
||||
} else if (error.invalid) {
|
||||
self.$refs.snackbar.showMessage('Failed to authenticate with WebAuthn');
|
||||
} else {
|
||||
self.$refs.snackbar.showMessage('User has canceled or this device does not support WebAuthn');
|
||||
}
|
||||
});
|
||||
},
|
||||
unlockByPin(pinCode) {
|
||||
const self = this;
|
||||
|
||||
if (!self.isPinCodeValid(pinCode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const user = self.userStore.currentUserBasicInfo;
|
||||
|
||||
if (!user || !user.username) {
|
||||
self.$refs.snackbar.showMessage('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
unlockTokenByPinCode(user.username, pinCode);
|
||||
self.transactionsStore.initTransactionDraft();
|
||||
self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (response.notificationContent) {
|
||||
self.rootStore.setNotificationContent(response.notificationContent);
|
||||
}
|
||||
});
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
self.$router.replace('/');
|
||||
} catch (ex) {
|
||||
logger.error('failed to unlock with pin code', ex);
|
||||
self.$refs.snackbar.showMessage('Incorrect PIN code');
|
||||
}
|
||||
},
|
||||
relogin() {
|
||||
const self = this;
|
||||
|
||||
self.$refs.confirmDialog.open('Are you sure you want to re-login?').then(() => {
|
||||
self.rootStore.forceLogout();
|
||||
self.settingsStore.clearAppSettings();
|
||||
|
||||
const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(self.userStore.currentUserExpenseAmountColor, self.userStore.currentUserIncomeAmountColor);
|
||||
|
||||
self.$router.replace('/login');
|
||||
});
|
||||
},
|
||||
isPinCodeValid(pinCode) {
|
||||
return pinCode && pinCode.length === 6;
|
||||
},
|
||||
changeLanguage(locale) {
|
||||
const localeDefaultSettings = this.$locale.setLanguage(locale);
|
||||
this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
}
|
||||
router.replace('/');
|
||||
} catch (ex) {
|
||||
logger.error('failed to unlock with pin code', ex);
|
||||
snackbar.value?.showMessage('Incorrect PIN code');
|
||||
}
|
||||
}
|
||||
|
||||
function relogin(): void {
|
||||
confirmDialog.value?.open('Are you sure you want to re-login?').then(() => {
|
||||
doRelogin();
|
||||
|
||||
router.replace('/login');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
+107
-166
@@ -1,14 +1,14 @@
|
||||
<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 form>
|
||||
<f7-list-item class="no-padding no-margin">
|
||||
<template #inner>
|
||||
<div class="display-flex justify-content-center full-line">{{ $t('Unlock Application') }}</div>
|
||||
<div class="display-flex justify-content-center full-line">{{ tt('Unlock Application') }}</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="list-item-pincode-input padding-horizontal margin-horizontal">
|
||||
@@ -17,10 +17,10 @@
|
||||
</f7-list>
|
||||
|
||||
<f7-list>
|
||||
<f7-list-button :class="{ 'disabled': !isPinCodeValid(pinCode) }" :text="$t('Unlock with PIN Code')" @click="unlockByPin"></f7-list-button>
|
||||
<f7-list-button v-if="isWebAuthnAvailable" :text="$t('Unlock with WebAuthn')" @click="unlockByWebAuthn"></f7-list-button>
|
||||
<f7-list-button :class="{ 'disabled': !isPinCodeValid(pinCode) }" :text="tt('Unlock with PIN Code')" @click="unlockByPin"></f7-list-button>
|
||||
<f7-list-button v-if="isWebAuthnAvailable" :text="tt('Unlock with WebAuthn')" @click="unlockByWebAuthn"></f7-list-button>
|
||||
<f7-block-footer>
|
||||
<f7-link :text="$t('Re-login')" @click="relogin"></f7-link>
|
||||
<f7-link :text="tt('Re-login')" @click="relogin"></f7-link>
|
||||
</f7-block-footer>
|
||||
<f7-block-footer class="padding-bottom">
|
||||
</f7-block-footer>
|
||||
@@ -64,14 +64,17 @@
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
<script setup lang="ts">
|
||||
import { 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 { useUnlockPageBase } from '@/views/base/UnlockPageBase.ts';
|
||||
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useTokensStore } from '@/stores/token.ts';
|
||||
import { useTransactionsStore } from '@/stores/transaction.js';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
|
||||
import {
|
||||
@@ -84,170 +87,108 @@ import {
|
||||
hasWebAuthnConfig,
|
||||
getWebAuthnCredentialId
|
||||
} from '@/lib/userstate.ts';
|
||||
import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
|
||||
import { isModalShowing } from '@/lib/ui/mobile.ts';
|
||||
import logger from '@/lib/logger.ts';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
pinCode: ''
|
||||
const { tt, getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
|
||||
const { showToast, showConfirm } = useI18nUIComponents();
|
||||
const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, changeLanguage, doAfterUnlocked, doRelogin } = useUnlockPageBase();
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const props = defineProps<{
|
||||
f7router: Router.Router;
|
||||
}>();
|
||||
|
||||
const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
|
||||
const currentLanguageCode = computed<string>(() => getCurrentLanguageTag());
|
||||
const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());
|
||||
|
||||
function unlockByWebAuthn(): void {
|
||||
const router = props.f7router;
|
||||
const webAuthnCredentialId = getWebAuthnCredentialId();
|
||||
|
||||
if (!userStore.currentUserBasicInfo || !webAuthnCredentialId) {
|
||||
showToast('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!settingsStore.appSettings.applicationLockWebAuthn || !hasWebAuthnConfig()) {
|
||||
showToast('WebAuthn is not enabled');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isWebAuthnSupported()) {
|
||||
showToast('WebAuth is not supported on this device');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading();
|
||||
|
||||
verifyWebAuthnCredential(
|
||||
userStore.currentUserBasicInfo,
|
||||
webAuthnCredentialId
|
||||
).then(({ id, userName, userSecret }) => {
|
||||
hideLoading();
|
||||
|
||||
unlockTokenByWebAuthn(id, userName, userSecret);
|
||||
doAfterUnlocked();
|
||||
|
||||
router.refreshPage();
|
||||
}).catch(error => {
|
||||
hideLoading();
|
||||
logger.error('failed to use webauthn to verify', error);
|
||||
|
||||
if (error.notSupported) {
|
||||
showToast('WebAuth is not supported on this device');
|
||||
} else if (error.name === 'NotAllowedError') {
|
||||
showToast('User has canceled authentication');
|
||||
} else if (error.invalid) {
|
||||
showToast('Failed to authenticate with WebAuthn');
|
||||
} else {
|
||||
showToast('User has canceled or this device does not support WebAuthn');
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore, useTransactionsStore, useExchangeRatesStore),
|
||||
ezBookkeepingLogoPath() {
|
||||
return APPLICATION_LOGO_PATH;
|
||||
},
|
||||
version() {
|
||||
return 'v' + this.$version;
|
||||
},
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(false);
|
||||
},
|
||||
isWebAuthnAvailable() {
|
||||
return this.settingsStore.appSettings.applicationLockWebAuthn
|
||||
&& hasWebAuthnConfig()
|
||||
&& isWebAuthnSupported();
|
||||
},
|
||||
currentLanguageCode() {
|
||||
return this.$locale.getCurrentLanguageTag();
|
||||
},
|
||||
currentLanguageName() {
|
||||
return this.$locale.getCurrentLanguageDisplayName();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
unlockByWebAuthn() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
});
|
||||
}
|
||||
|
||||
if (!self.settingsStore.appSettings.applicationLockWebAuthn || !hasWebAuthnConfig()) {
|
||||
self.$toast('WebAuthn is not enabled');
|
||||
return;
|
||||
}
|
||||
function unlockByPin(pinCode: string): void {
|
||||
if (!isPinCodeValid(pinCode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isWebAuthnSupported()) {
|
||||
self.$toast('WebAuth is not supported on this device');
|
||||
return;
|
||||
}
|
||||
if (isModalShowing()) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.$showLoading();
|
||||
const router = props.f7router;
|
||||
const user = userStore.currentUserBasicInfo;
|
||||
|
||||
verifyWebAuthnCredential(
|
||||
self.userStore.currentUserBasicInfo,
|
||||
getWebAuthnCredentialId()
|
||||
).then(({ id, userName, userSecret }) => {
|
||||
self.$hideLoading();
|
||||
if (!user || !user.username) {
|
||||
showToast('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
unlockTokenByWebAuthn(id, userName, userSecret);
|
||||
self.transactionsStore.initTransactionDraft();
|
||||
self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
try {
|
||||
unlockTokenByPinCode(user.username, pinCode);
|
||||
doAfterUnlocked();
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (response.notificationContent) {
|
||||
self.rootStore.setNotificationContent(response.notificationContent);
|
||||
}
|
||||
});
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
router.refreshPage();
|
||||
}).catch(error => {
|
||||
self.$hideLoading();
|
||||
logger.error('failed to use webauthn to verify', error);
|
||||
|
||||
if (error.notSupported) {
|
||||
self.$toast('WebAuth is not supported on this device');
|
||||
} else if (error.name === 'NotAllowedError') {
|
||||
self.$toast('User has canceled authentication');
|
||||
} else if (error.invalid) {
|
||||
self.$toast('Failed to authenticate with WebAuthn');
|
||||
} else {
|
||||
self.$toast('User has canceled or this device does not support WebAuthn');
|
||||
}
|
||||
});
|
||||
},
|
||||
unlockByPin(pinCode) {
|
||||
const self = this;
|
||||
|
||||
if (!self.isPinCodeValid(pinCode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isModalShowing()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const router = self.f7router;
|
||||
const user = self.userStore.currentUserBasicInfo;
|
||||
|
||||
if (!user || !user.username) {
|
||||
self.$alert('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
unlockTokenByPinCode(user.username, pinCode);
|
||||
self.transactionsStore.initTransactionDraft();
|
||||
self.tokensStore.refreshTokenAndRevokeOldToken().then(response => {
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
|
||||
}
|
||||
|
||||
if (response.notificationContent) {
|
||||
self.rootStore.setNotificationContent(response.notificationContent);
|
||||
}
|
||||
});
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
router.refreshPage();
|
||||
} catch (ex) {
|
||||
logger.error('failed to unlock with pin code', ex);
|
||||
self.$toast('Incorrect PIN code');
|
||||
}
|
||||
},
|
||||
relogin() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
|
||||
self.$confirm('Are you sure you want to re-login?', () => {
|
||||
self.rootStore.forceLogout();
|
||||
self.settingsStore.clearAppSettings();
|
||||
|
||||
const localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage, self.settingsStore.appSettings.timeZone);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
setExpenseAndIncomeAmountColor(self.userStore.currentUserExpenseAmountColor, self.userStore.currentUserIncomeAmountColor);
|
||||
|
||||
router.navigate('/login', {
|
||||
clearPreviousHistory: true
|
||||
});
|
||||
});
|
||||
},
|
||||
isPinCodeValid(pinCode) {
|
||||
return pinCode && pinCode.length === 6;
|
||||
},
|
||||
changeLanguage(locale) {
|
||||
const localeDefaultSettings = this.$locale.setLanguage(locale);
|
||||
this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
}
|
||||
router.refreshPage();
|
||||
} catch (ex) {
|
||||
logger.error('failed to unlock with pin code', ex);
|
||||
showToast('Incorrect PIN code');
|
||||
}
|
||||
}
|
||||
|
||||
function relogin(): void {
|
||||
const router = props.f7router;
|
||||
|
||||
showConfirm('Are you sure you want to re-login?', () => {
|
||||
doRelogin();
|
||||
|
||||
router.navigate('/login', {
|
||||
clearPreviousHistory: true
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user