support use face id/touch id for application lock

src/views/mobile/ApplicationLock.vue

@@ -9,6 +9,10 @@
             <f7-card-content :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('Status')" :after="$t('Enabled')"></f7-list-item>
+                    <f7-list-item v-if="isSupportedWebAuthn">
+                        <span>{{ $t('Face ID / Touch ID') }}</span>
+                        <f7-toggle :checked="isEnableApplicationLockWebAuthn" @toggle:change="isEnableApplicationLockWebAuthn = $event"></f7-toggle>
+                    </f7-list-item>
                     <f7-list-button @click="disable(null)">{{ $t('Disable') }}</f7-list-button>
                 </f7-list>
             </f7-card-content>
@@ -75,7 +79,9 @@
 export default {
     data() {
         return {
+            isSupportedWebAuthn: false,
             isEnableApplicationLock: this.$settings.isEnableApplicationLock(),
+            isEnableApplicationLockWebAuthn: this.$settings.isEnableApplicationLockWebAuthn(),
             currentPinCodeForEnable: '',
             currentPinCodeForDisable: '',
             showInputPinCodeSheetForEnable: false,
@@ -88,8 +94,51 @@ export default {
         },
         currentPinCodeForDisableValid() {
             return this.currentPinCodeForDisable && this.currentPinCodeForDisable.length === 6;
+        },
+    },
+    watch: {
+        isEnableApplicationLockWebAuthn: function (newValue) {
+            const self = this;
+
+            if (newValue) {
+                self.$showLoading();
+
+                self.$webauthn.registerCredential(
+                    self.$user.getUserInfo(),
+                    self.$user.getUserAppLockSecret(),
+                ).then(({ id }) => {
+                    self.$hideLoading();
+
+                    self.$user.saveWebAuthnConfig(id);
+                    self.$settings.setEnableApplicationLockWebAuthn(true);
+                    self.$toast('You have enabled Face ID/Touch ID successfully');
+                }).catch(({ notSupported, invalid }) => {
+                    self.$hideLoading();
+
+                    if (notSupported) {
+                        self.$toast('This device does not support Face ID/Touch ID');
+                    } else if (invalid) {
+                        self.$toast('Failed to enable Face ID/Touch ID');
+                    } else {
+                        self.$toast('User has canceled or this device does not support Face ID/Touch ID');
+                    }
+
+                    self.isEnableApplicationLockWebAuthn = false;
+                    self.$settings.setEnableApplicationLockWebAuthn(false);
+                    self.$user.clearWebAuthnConfig();
+                });
+            } else {
+                self.$settings.setEnableApplicationLockWebAuthn(false);
+                self.$user.clearWebAuthnConfig();
+            }
         }
     },
+    created() {
+        const self = this;
+        self.$webauthn.isCompletelySupported().then(result => {
+            self.isSupportedWebAuthn = result;
+        });
+    },
     methods: {
         enable(pinCode) {
             if (this.$settings.isEnableApplicationLock()) {
@@ -111,6 +160,10 @@ export default {
             this.$settings.setEnableApplicationLock(true);
             this.isEnableApplicationLock = true;
 
+            this.$settings.setEnableApplicationLockWebAuthn(false);
+            this.$user.clearWebAuthnConfig();
+            this.isEnableApplicationLockWebAuthn = false;
+
             this.showInputPinCodeSheetForEnable = false;
         },
         disable(pinCode) {
@@ -133,6 +186,10 @@ export default {
             this.$settings.setEnableApplicationLock(false);
             this.isEnableApplicationLock = false;
 
+            this.$settings.setEnableApplicationLockWebAuthn(false);
+            this.$user.clearWebAuthnConfig();
+            this.isEnableApplicationLockWebAuthn = false;
+
             this.showInputPinCodeSheetForDisable = false;
         }
     }

src/views/mobile/Unlock.vue

@@ -1,7 +1,7 @@
 <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 form>
             <f7-list-item class="list-item-pincode-input">
                 <PincodeInput secure :length="6" v-model="pinCode" @keyup.native="unlock" />
             </f7-list-item>
@@ -27,6 +27,33 @@ export default {
             return this.pinCode && this.pinCode.length === 6;
         }
     },
+    created() {
+        const self = this;
+        const router = self.$f7router;
+
+        if (self.$settings.isEnableApplicationLockWebAuthn() && self.$user.getWebAuthnCredentialId()) {
+            self.$webauthn.verifyCredential(
+                self.$user.getWebAuthnCredentialId()
+            ).then(({ id, userSecret }) => {
+                self.$user.unlockTokenByWebAuthn(id, userSecret);
+                self.$services.refreshToken();
+
+                if (self.$settings.isAutoUpdateExchangeRatesData()) {
+                    self.$services.autoRefreshLatestExchangeRates();
+                }
+
+                router.refreshPage();
+            }).catch(({ notSupported, invalid }) => {
+                if (notSupported) {
+                    self.$toast('This device does not support Face ID/Touch ID');
+                } else if (invalid) {
+                    self.$toast('Failed to authenticate by Face ID/Touch ID');
+                } else {
+                    self.$toast('User has canceled or this device does not support Face ID/Touch ID');
+                }
+            });
+        }
+    },
     methods: {
         unlock() {
             if (!this.pinCodeValid) {
@@ -36,7 +63,7 @@ export default {
             const router = this.$f7router;
 
             try {
-                this.$user.unlockToken(this.pinCode);
+                this.$user.unlockTokenByPinCode(this.pinCode);
                 this.$services.refreshToken();
 
                 if (this.$settings.isAutoUpdateExchangeRatesData()) {