fix(web): allow pasting PIN code from clipboard or password manager (#26944)

* fix(web): allow pasting PIN code from clipboard or password manager

The keydown handler was blocking Ctrl+V/Cmd+V since it called
preventDefault() on all non-numeric keys. Also adds an onpaste
handler to distribute pasted digits across the individual inputs.

* refactor: handle paste in handleInput, remove maxlength

* cleanup + fix digit focus

---------

Co-authored-by: Preslav Penchev <preslav.penchev@acronis.com>
Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

web/src/lib/components/user-settings-page/PinCodeInput.svelte

@@ -49,25 +49,22 @@
 
   const handleInput = (event: Event, index: number) => {
     const target = event.target as HTMLInputElement;
-    let currentPinValue = target.value;
+    const digits = target.value.replaceAll(/\D/g, '').slice(0, pinLength - index);
 
-    if (target.value.length > 1) {
+    if (digits.length === 0) {
-      currentPinValue = value.slice(0, 1);
-    }
-
-    if (Number.isNaN(Number(value))) {
       pinValues[index] = '';
-      target.value = '';
+      value = pinValues.join('').trim();
       return;
     }
 
-    pinValues[index] = currentPinValue;
+    for (let i = 0; i < digits.length; i++) {
+      pinValues[index + i] = digits[i];
+    }
 
     value = pinValues.join('').trim();
 
-    if (value && index < pinLength - 1) {
+    const lastFilledIndex = Math.min(index + digits.length, pinLength - 1);
-      focusNext(index);
+    pinCodeInputElements[lastFilledIndex]?.focus();
-    }
 
     if (value.length === pinLength) {
       onFilled?.(value);
@@ -104,12 +101,6 @@
         }
         return;
       }
-      default: {
-        if (Number.isNaN(Number(event.key))) {
-          event.preventDefault();
-        }
-        break;
-      }
     }
   }
 </script>
@@ -125,7 +116,6 @@
         {type}
         inputmode="numeric"
         pattern="[0-9]*"
-        maxlength="1"
         bind:this={pinCodeInputElements[index]}
         id="pin-code-{index}"
         class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light"