support application lock

This commit is contained in:
MaysWind
2020-11-21 02:31:37 +08:00
parent d59ff3180d
commit 7290835bb8
15 changed files with 374 additions and 22 deletions
+80
View File
@@ -0,0 +1,80 @@
<template>
<f7-page>
<f7-navbar>
<f7-nav-left back-link-force :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t('Application Lock')"></f7-nav-title>
</f7-navbar>
<f7-card v-if="isEnableApplicationLock">
<f7-card-content :padding="false">
<f7-list>
<f7-list-item :title="$t('Status')" :after="$t('Enabled')"></f7-list-item>
<f7-list-button @click="disable">{{ $t('Disable') }}</f7-list-button>
</f7-list>
</f7-card-content>
</f7-card>
<f7-card v-else-if="!isEnableApplicationLock">
<f7-card-content :padding="false">
<f7-list>
<f7-list-item :title="$t('Status')" :after="$t('Disabled')"></f7-list-item>
<f7-list-button @click="enable(null)">{{ $t('Enable') }}</f7-list-button>
</f7-list>
</f7-card-content>
</f7-card>
<f7-sheet
style="height:auto;"
:opened="showInputPinCodeSheetForEnable" @sheet:closed="showInputPinCodeSheetForEnable = false; currentPinCodeForEnable = ''"
>
<f7-page-content>
<div class="display-flex padding justify-content-space-between align-items-center">
<div style="font-size: 18px"><b>{{ $t('PIN Code') }}</b></div>
</div>
<div class="padding-horizontal padding-bottom">
<p class="no-margin-top margin-bottom-half">{{ $t('Please input a new PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.') }}</p>
<f7-list no-hairlines class="no-margin-top margin-bottom">
<f7-list-item class="list-item-pincode-input">
<PincodeInput secure :length="6" v-model="currentPinCodeForEnable" />
</f7-list-item>
</f7-list>
<f7-button large fill :class="{ 'disabled': !currentPinCodeForEnable }" :text="$t('Continue')" @click="enable(currentPinCodeForEnable)"></f7-button>
<div class="margin-top text-align-center">
<f7-link @click="showInputPinCodeSheetForEnable = false" :text="$t('Cancel')"></f7-link>
</div>
</div>
</f7-page-content>
</f7-sheet>
</f7-page>
</template>
<script>
export default {
data() {
return {
isEnableApplicationLock: this.$settings.isEnableApplicationLock(),
currentPinCodeForEnable: '',
showInputPinCodeSheetForEnable: false
};
},
methods: {
enable(pinCode) {
if (!pinCode) {
this.showInputPinCodeSheetForEnable = true;
return;
}
this.$user.encryptToken(pinCode);
this.$settings.setEnableApplicationLock(true);
this.isEnableApplicationLock = true;
this.showInputPinCodeSheetForEnable = false;
},
disable() {
this.$user.decryptToken();
this.$settings.setEnableApplicationLock(false);
this.isEnableApplicationLock = false;
}
}
}
</script>
+4 -2
View File
@@ -185,13 +185,14 @@ export default {
return;
}
self.$settings.setEnableApplicationLock(false);
self.$user.updateTokenAndUserInfo(data.result);
if (self.$settings.isAutoUpdateExchangeRatesData()) {
self.$services.autoRefreshLatestExchangeRates();
}
router.navigate('/');
router.refreshPage();
}).catch(error => {
self.logining = false;
self.$hideLoading();
@@ -256,6 +257,7 @@ export default {
return;
}
self.$settings.setEnableApplicationLock(false);
self.$user.updateTokenAndUserInfo(data.result);
if (self.$settings.isAutoUpdateExchangeRatesData()) {
@@ -263,7 +265,7 @@ export default {
}
self.show2faSheet = false;
router.navigate('/');
router.refreshPage();
}).catch(error => {
self.verifying = false;
self.$hideLoading();
+5
View File
@@ -29,6 +29,8 @@
</select>
</f7-list-item>
<f7-list-item :title="$t('Application Lock')" :after="isEnableApplicationLock ? $t('Enabled') : $t('Disabled')" link="/app_lock"></f7-list-item>
<f7-list-item :title="$t('Exchange Rates Data')" :after="exchangeRatesLastUpdateDate" link="/exchange_rates"></f7-list-item>
<f7-list-item>
@@ -100,6 +102,9 @@ export default {
this.$setLanguage(value);
}
},
isEnableApplicationLock() {
return this.$settings.isEnableApplicationLock();
},
exchangeRatesLastUpdateDate() {
const exchangeRates = this.$exchangeRates.getExchangeRates();
return exchangeRates && exchangeRates.date ? this.$moment(exchangeRates.date).format(this.$t('format.date.long')) : '';
+2
View File
@@ -157,6 +157,8 @@ export default {
return;
}
self.$settings.setEnableApplicationLock(false);
if (self.$utilities.isString(data.result.token)) {
self.$user.updateTokenAndUserInfo(data.result);
}
+64
View File
@@ -0,0 +1,64 @@
<template>
<f7-page no-toolbar no-navbar no-swipeback login-screen>
<f7-login-screen-title>{{ $t('PIN Code') }}</f7-login-screen-title>
<f7-list>
<f7-list-item class="list-item-pincode-input">
<PincodeInput secure :length="6" v-model="pinCode" @keyup.native="unlock" />
</f7-list-item>
</f7-list>
<f7-list>
<f7-list-button :class="{ 'disabled': !pinCodeValid }" :text="$t('Unlock')" @click="unlock"></f7-list-button>
<f7-block-footer>
<f7-link :text="$t('Re-login')" @click="relogin"></f7-link>
</f7-block-footer>
</f7-list>
</f7-page>
</template>
<script>
export default {
data() {
return {
pinCode: ''
}
},
computed: {
pinCodeValid() {
return this.pinCode && this.pinCode.length === 6;
}
},
methods: {
unlock() {
if (!this.pinCodeValid) {
return;
}
const router = this.$f7router;
try {
this.$user.unlockToken(this.pinCode);
this.$services.refreshToken();
if (this.$settings.isAutoUpdateExchangeRatesData()) {
this.$services.autoRefreshLatestExchangeRates();
}
router.refreshPage();
} catch (ex) {
this.$alert('PIN code is wrong');
}
},
relogin() {
const router = this.$f7router;
this.$user.clearTokenAndUserInfo();
this.$settings.clearSettings();
this.$exchangeRates.clearExchangeRates();
router.navigate('/login', {
clearPreviousHistory: true
});
}
}
}
</script>