pin code input supports pressing enter to confirm and pressing tab to switch to the next component

src/components/common/PinCodeInput.vue

@@ -33,6 +33,7 @@ const props = defineProps<{
     length: number;
     disabled?: boolean;
     autofocus?: boolean;
+    autoConfirm?: boolean;
     secure?: boolean;
 }>();
 
@@ -151,6 +152,14 @@ function onKeydown(index: number, event: KeyboardEvent): void {
         return;
     }
 
+    if (index <= 0 && (event.shiftKey && event.key === 'Tab')) {
+        return;
+    }
+
+    if (index >= props.length - 1 && (!event.shiftKey && event.key === 'Tab')) {
+        return;
+    }
+
     if (event.key === 'Enter' && finalPinCode.value.length === props.length) {
         emit('pincode:confirm', finalPinCode.value);
         event.preventDefault();
@@ -204,7 +213,7 @@ function onKeydown(index: number, event: KeyboardEvent): void {
         setInputType(index);
         setNextFocus(index);
 
-        if (finalPinCode.value.length === props.length) {
+        if (props.autoConfirm && finalPinCode.value.length === props.length) {
             emit('pincode:confirm', finalPinCode.value);
         }
     }

src/components/mobile/PinCodeInputSheet.vue

@@ -10,7 +10,7 @@
                 <p class="no-margin">{{ hint }}</p>
                 <f7-list class="no-margin">
                     <f7-list-item class="list-item-pincode-input padding-vertical-half">
-                        <pin-code-input :secure="true" :length="6" v-model="currentPinCode"/>
+                        <pin-code-input :secure="true" :length="6" v-model="currentPinCode" @pincode:confirm="confirm"/>
                     </f7-list-item>
                 </f7-list>
                 <f7-button large fill

src/views/desktop/UnlockPage.vue

@@ -32,7 +32,7 @@
                                 <v-row>
                                     <v-col cols="12">
                                         <pin-code-input :disabled="verifyingByWebAuthn" :autofocus="true"
-                                                        :secure="true" :length="6"
+                                                        :secure="true" :length="6" :auto-confirm="true"
                                                         v-model="pinCode" @pincode:confirm="unlockByPin" />
                                     </v-col>
 

src/views/desktop/app/settings/tabs/AppLockSettingTab.vue

@@ -33,7 +33,7 @@
                     <v-row class="mb-3">
                         <v-col cols="12" md="12">
                             <div style="max-width: 428px">
-                                <pin-code-input :secure="true" :length="6" v-model="pinCode" />
+                                <pin-code-input :secure="true" :length="6" v-model="pinCode" @pincode:confirm="confirm" />
                             </div>
                         </v-col>
                     </v-row>
@@ -147,6 +147,13 @@ export default {
         });
     },
     methods: {
+        confirm() {
+            if (this.isEnableApplicationLock) {
+                this.disable();
+            } else {
+                this.enable();
+            }
+        },
         enable() {
             if (this.settingsStore.appSettings.applicationLock) {
                 this.$refs.snackbar.showMessage('Application lock has been enabled');

src/views/mobile/UnlockPage.vue

@@ -12,7 +12,7 @@
                 </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" />
+                <pin-code-input :secure="true" :length="6" :auto-confirm="true" v-model="pinCode" @pincode:confirm="unlockByPin" />
             </f7-list-item>
         </f7-list>