From d18e6df1c06582c63d9c9d18afda5994f2b9e919 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 4 Jan 2025 16:33:33 +0800
Subject: [PATCH] pin code input supports pressing enter to confirm and
 pressing tab to switch to the next component

---
 src/components/common/PinCodeInput.vue                | 11 ++++++++++-
 src/components/mobile/PinCodeInputSheet.vue           |  2 +-
 src/views/desktop/UnlockPage.vue                      |  2 +-
 .../desktop/app/settings/tabs/AppLockSettingTab.vue   |  9 ++++++++-
 src/views/mobile/UnlockPage.vue                       |  2 +-
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/common/PinCodeInput.vue b/src/components/common/PinCodeInput.vue
index cd18043a..cb505b72 100644
--- a/src/components/common/PinCodeInput.vue
+++ b/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);
         }
     }
diff --git a/src/components/mobile/PinCodeInputSheet.vue b/src/components/mobile/PinCodeInputSheet.vue
index f2088ce3..b3fc2cec 100644
--- a/src/components/mobile/PinCodeInputSheet.vue
+++ b/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
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index 3d062541..10803fd6 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/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>
 
diff --git a/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue b/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
index 26793bd4..aabe3e7c 100644
--- a/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
+++ b/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');
diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
index 2e44cad7..199eb4cd 100644
--- a/src/views/mobile/UnlockPage.vue
+++ b/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>