Upgrade to vue3 (#16)
* upgrade to vue 3.x and framework7 8.x * change calendar plugin to vue-datepicker * disable export button when user does not hava any transaction * implement new pin code input * append thousands separator in amount in exchange rates page
This commit is contained in:
mayswind
+32
-28
@@ -1,21 +1,23 @@
|
||||
<template>
|
||||
<f7-page no-toolbar no-navbar no-swipeback login-screen>
|
||||
<f7-login-screen-title>
|
||||
<img class="login-page-logo" src="img/ezbookkeeping-192.png" />
|
||||
<img alt="logo" class="login-page-logo" src="/img/ezbookkeeping-192.png" />
|
||||
<f7-block class="margin-vertical-half">{{ $t('global.app.title') }}</f7-block>
|
||||
</f7-login-screen-title>
|
||||
|
||||
<f7-list form>
|
||||
<f7-list-item-row class="justify-content-center padding-vertical-half">
|
||||
{{ $t('Unlock Application') }}
|
||||
</f7-list-item-row>
|
||||
<f7-list-item class="list-item-pincode-input">
|
||||
<pincode-input secure :length="6" v-model="pinCode" @keyup.native="unlockByPin" />
|
||||
<f7-list-item class="no-padding no-margin">
|
||||
<template #inner>
|
||||
<div class="display-flex justify-content-center full-line">{{ $t('Unlock Application') }}</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="list-item-pincode-input padding-horizontal margin-horizontal">
|
||||
<pin-code-input :secure="true" :length="6" v-model="pinCode" @pincode:confirm="unlockByPin" />
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list>
|
||||
<f7-list-button :class="{ 'disabled': !pinCodeValid }" :text="$t('Unlock By PIN Code')" @click="unlockByPin"></f7-list-button>
|
||||
<f7-list-button :class="{ 'disabled': !isPinCodeValid(pinCode) }" :text="$t('Unlock By PIN Code')" @click="unlockByPin"></f7-list-button>
|
||||
<f7-list-button v-if="isWebAuthnAvailable" :text="$t('Unlock By Face ID/Touch ID')" @click="unlockByWebAuthn"></f7-list-button>
|
||||
<f7-block-footer>
|
||||
<f7-link :text="$t('Re-login')" @click="relogin"></f7-link>
|
||||
@@ -37,15 +39,17 @@
|
||||
</f7-list>
|
||||
|
||||
<f7-popover class="lang-popover-menu">
|
||||
<f7-list>
|
||||
<f7-list dividers>
|
||||
<f7-list-item
|
||||
link="#" no-chevron popover-close
|
||||
v-for="(lang, locale) in allLanguages"
|
||||
:key="locale"
|
||||
:title="lang.displayName"
|
||||
:key="locale"
|
||||
v-for="(lang, locale) in allLanguages"
|
||||
@click="changeLanguage(locale)"
|
||||
>
|
||||
<f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="$i18n.locale === locale"></f7-icon>
|
||||
<template #after>
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="$i18n.locale === locale"></f7-icon>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</f7-popover>
|
||||
@@ -54,6 +58,9 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
pinCode: ''
|
||||
@@ -64,22 +71,19 @@ export default {
|
||||
return 'v' + this.$version;
|
||||
},
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguages();
|
||||
return this.$locale.getAllLanguageInfos();
|
||||
},
|
||||
isWebAuthnAvailable() {
|
||||
return this.$settings.isEnableApplicationLockWebAuthn()
|
||||
&& this.$user.getWebAuthnCredentialId()
|
||||
&& this.$webauthn.isSupported();
|
||||
},
|
||||
pinCodeValid() {
|
||||
return this.pinCode && this.pinCode.length === 6;
|
||||
},
|
||||
currentLanguageName() {
|
||||
const currentLocale = this.$i18n.locale;
|
||||
let lang = this.$locale.getLanguage(currentLocale);
|
||||
let lang = this.$locale.getLanguageInfo(currentLocale);
|
||||
|
||||
if (!lang) {
|
||||
lang = this.$locale.getLanguage(this.$locale.getDefaultLanguage());
|
||||
lang = this.$locale.getLanguageInfo(this.$locale.getDefaultLanguage());
|
||||
}
|
||||
|
||||
return lang.displayName;
|
||||
@@ -88,7 +92,7 @@ export default {
|
||||
methods: {
|
||||
unlockByWebAuthn() {
|
||||
const self = this;
|
||||
const router = self.$f7router;
|
||||
const router = self.f7router;
|
||||
|
||||
if (!self.$settings.isEnableApplicationLockWebAuthn() || !self.$user.getWebAuthnCredentialId()) {
|
||||
self.$toast('Face ID/Touch ID authentication is not enabled');
|
||||
@@ -131,19 +135,16 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
unlockByPin() {
|
||||
const app = this.$f7;
|
||||
const $$ = app.$;
|
||||
|
||||
if (!this.pinCodeValid) {
|
||||
unlockByPin(pinCode) {
|
||||
if (!this.isPinCodeValid(pinCode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ($$('.modal-in').length) {
|
||||
if (this.$ui.isModalShowing()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const router = this.$f7router;
|
||||
const router = this.f7router;
|
||||
const user = this.$store.state.currentUserInfo;
|
||||
|
||||
if (!user || !user.username) {
|
||||
@@ -152,7 +153,7 @@ export default {
|
||||
}
|
||||
|
||||
try {
|
||||
this.$user.unlockTokenByPinCode(user.username, this.pinCode);
|
||||
this.$user.unlockTokenByPinCode(user.username, pinCode);
|
||||
this.$store.dispatch('refreshTokenAndRevokeOldToken');
|
||||
|
||||
if (this.$settings.isAutoUpdateExchangeRatesData()) {
|
||||
@@ -167,7 +168,7 @@ export default {
|
||||
},
|
||||
relogin() {
|
||||
const self = this;
|
||||
const router = self.$f7router;
|
||||
const router = self.f7router;
|
||||
|
||||
self.$confirm('Are you sure you want to re-login?', () => {
|
||||
self.$user.clearTokenAndUserInfo(true);
|
||||
@@ -175,13 +176,16 @@ export default {
|
||||
self.$store.dispatch('clearUserInfoState');
|
||||
self.$store.dispatch('resetState');
|
||||
self.$settings.clearSettings();
|
||||
self.$locale.init();
|
||||
self.$locale.initLocale();
|
||||
|
||||
router.navigate('/login', {
|
||||
clearPreviousHistory: true
|
||||
});
|
||||
});
|
||||
},
|
||||
isPinCodeValid(pinCode) {
|
||||
return pinCode && pinCode.length === 6;
|
||||
},
|
||||
changeLanguage(locale) {
|
||||
this.$locale.setLanguage(locale);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user