Allow pasting in 6 digit auth code input (baserow#4475)

Author: bram2w

changelog/entries/unreleased/feature/allow_pasting_in_auth_code_input.json

@@ -0,0 +1,9 @@
+{
+  "type": "feature",
+  "message": "Allow pasting in 6 digit auth code input.",
+  "issue_origin": "github",
+  "issue_number": null,
+  "domain": "core",
+  "bullet_points": [],
+  "created_at": "2025-12-17"
+}

web-frontend/modules/core/components/settings/twoFactorAuth/AuthCodeInput.vue

@@ -13,8 +13,10 @@
       :class="{ 'auth-code-input__input--filled': allFilled }"
       @keyup="handleKeyUp"
       @keydown="handleKeyDown"
+      @paste="pasteAt(1, $event)"
     />
     <input
+      ref="input2"
       v-model="number2"
       type="text"
       maxlength="1"
@@ -23,8 +25,10 @@
       :class="{ 'auth-code-input__input--filled': allFilled }"
       @keyup="handleKeyUp"
       @keydown="handleKeyDown"
+      @paste="pasteAt(2, $event)"
     />
     <input
+      ref="input3"
       v-model="number3"
       type="text"
       maxlength="1"
@@ -33,8 +37,10 @@
       :class="{ 'auth-code-input__input--filled': allFilled }"
       @keyup="handleKeyUp"
       @keydown="handleKeyDown"
+      @paste="pasteAt(3, $event)"
     />
     <input
+      ref="input4"
       v-model="number4"
       type="text"
       maxlength="1"
@@ -43,8 +49,10 @@
       :class="{ 'auth-code-input__input--filled': allFilled }"
       @keyup="handleKeyUp"
       @keydown="handleKeyDown"
+      @paste="pasteAt(4, $event)"
     />
     <input
+      ref="input5"
       v-model="number5"
       type="text"
       maxlength="1"
@@ -53,8 +61,10 @@
       :class="{ 'auth-code-input__input--filled': allFilled }"
       @keyup="handleKeyUp"
       @keydown="handleKeyDown"
+      @paste="pasteAt(5, $event)"
     />
     <input
+      ref="input6"
       v-model="number6"
       type="text"
       maxlength="1"
@@ -63,6 +73,7 @@
       :class="{ 'auth-code-input__input--filled': allFilled }"
       @keyup="handleKeyUp"
       @keydown="handleKeyDown"
+      @paste="pasteAt(6, $event)"
     />
   </div>
 </template>
@@ -87,6 +98,7 @@ export default {
         number5: '',
         number6: '',
       },
+      hasEmitted: false,
     }
   },
   computed: {
@@ -152,10 +164,25 @@ export default {
       return this.code.length === 6
     },
   },
+  watch: {
+    allFilled(isFilled) {
+      if (isFilled && !this.hasEmitted) {
+        this.hasEmitted = true
+        this.$emit('all-filled', this.code)
+      }
+      if (!isFilled) {
+        this.hasEmitted = false
+      }
+    },
+  },
   mounted() {
     this.reset()
   },
   methods: {
+    focusIndex(i) {
+      const el = this.$refs[`input${i}`]
+      if (el && typeof el.focus === 'function') el.focus()
+    },
     reset() {
       this.values.number1 = ''
       this.values.number2 = ''
@@ -164,6 +191,7 @@ export default {
       this.values.number5 = ''
       this.values.number6 = ''
       this.$refs.input1.focus()
+      this.hasEmitted = false
     },
     sanitizeInput(value) {
       const sanitized = value.replace(/\D/g, '').slice(0, 1)
@@ -192,11 +220,31 @@ export default {
         if (nextInput && nextInput.tagName === 'INPUT') {
           nextInput.focus()
         }
+      }
+    },
+    pasteAt(startIndex, event) {
+      event.preventDefault()
 
-        if (this.allFilled) {
-          this.$emit('all-filled', this.code)
-        }
+      const raw =
+        (event.clipboardData && event.clipboardData.getData('text')) ||
+        (window.clipboardData && window.clipboardData.getData('Text')) ||
+        ''
+
+      const digits = raw.replace(/\D/g, '')
+      const maxLen = 7 - startIndex
+      const chunk = digits.slice(0, maxLen)
+
+      for (let i = startIndex; i <= 6; i++) {
+        this.values[`number${i}`] = ''
       }
+
+      for (let offset = 0; offset < chunk.length; offset++) {
+        const i = startIndex + offset
+        this.values[`number${i}`] = chunk[offset]
+      }
+
+      const nextIndex = Math.min(startIndex + chunk.length, 6)
+      this.$nextTick(() => this.focusIndex(nextIndex))
     },
   },
 }