From 48fdd39d30010e5f23588014c5b75b4fd01216c1 Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Thu, 26 Mar 2026 19:24:46 +0100
Subject: [PATCH] feat(web): use ui pin input element (#27200)

---
 pnpm-lock.yaml                                |  34 ++---
 .../PinCodeChangeForm.svelte                  |  15 +-
 .../PinCodeCreateForm.svelte                  |  11 +-
 .../user-settings-page/PinCodeInput.svelte    | 129 ------------------
 web/src/routes/auth/pin-prompt/+page.svelte   |  13 +-
 5 files changed, 36 insertions(+), 166 deletions(-)
 delete mode 100644 web/src/lib/components/user-settings-page/PinCodeInput.svelte

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75ccb8fe35..1837d2c60a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3192,8 +3192,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@internationalized/date@3.10.0':
-    resolution: {integrity: sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==}
+  '@internationalized/date@3.12.0':
+    resolution: {integrity: sha512-/PyIMzK29jtXaGU23qTvNZxvBXRtKbNnGDFD+PY6CZw/Y8Ex8pFUzkuCJCG9aOqmShjqhS9mPqP6Dk5onQY8rQ==}
 
   '@ioredis/commands@1.5.0':
     resolution: {integrity: sha512-eUgLqrMf8nJkZxT24JvVRrQya1vZkQh8BBeYNwGDqa5I0VUi8ACx7uFvAaLxintokpTenkK6DASvo/bvNbBGow==}
@@ -5821,8 +5821,8 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  bits-ui@2.16.0:
-    resolution: {integrity: sha512-utsUZE7W7MxOQF1jmSYfzUrt2nZxgkq0yPqQcBQ0WQDMq8ETd1yEiHlPpqhMrpKU7IivjSf4XVysDDy+UVkMUw==}
+  bits-ui@2.16.3:
+    resolution: {integrity: sha512-5hJ5dEhf5yPzkRFcxzgQHScGodeo0gK0MUUXrdLlRHWaBOBGZiacWLG96j/wwFatKwZvouw7q+sn14i0fx3RIg==}
     engines: {node: '>=20'}
     peerDependencies:
       '@internationalized/date': ^3.8.1
@@ -8825,8 +8825,8 @@ packages:
     engines: {node: '>= 20'}
     hasBin: true
 
-  marked@17.0.3:
-    resolution: {integrity: sha512-jt1v2ObpyOKR8p4XaUJVk3YWRJ5n+i4+rjQopxvV32rSndTJXvIzuUdWWIy/1pFQMkQmvTXawzDNqOH/CUmx6A==}
+  marked@17.0.5:
+    resolution: {integrity: sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==}
     engines: {node: '>= 20'}
     hasBin: true
 
@@ -10987,8 +10987,8 @@ packages:
     resolution: {integrity: sha512-i/w5Ie4tENfGYbdCo2iJ+oies0vOFd8QXWHopKOUzudfLCvnmeheF2PpHp89Z2azpc+c2su3lMiWO/SpP+429A==}
     engines: {node: '>=0.12.18'}
 
-  simple-icons@16.9.0:
-    resolution: {integrity: sha512-aKst2C7cLkFyaiQ/Crlwxt9xYOpGPk05XuJZ0ZTJNNCzHCKYrGWz2ebJSi5dG8CmTCxUF/BGs6A8uyJn/EQxqw==}
+  simple-icons@16.13.0:
+    resolution: {integrity: sha512-N4AMZvFERU5YLEtUudtUesiM2H4O5xQ9qfS3K0oOV5II5KVtxOUAlmZ7KqBgiTSGBgCVkuLD/Z9dJKBtnI3kKQ==}
     engines: {node: '>=0.12.18'}
 
   sirv@2.0.4:
@@ -15130,18 +15130,18 @@ snapshots:
   '@immich/svelte-markdown-preprocess@0.2.1(svelte@5.54.1)':
     dependencies:
       front-matter: 4.0.2
-      marked: 17.0.3
+      marked: 17.0.5
       node-emoji: 2.2.0
       svelte: 5.54.1
 
   '@immich/ui@0.69.0(@sveltejs/kit@2.55.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.54.1)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)(typescript@5.9.3)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)':
     dependencies:
       '@immich/svelte-markdown-preprocess': 0.2.1(svelte@5.54.1)
-      '@internationalized/date': 3.10.0
+      '@internationalized/date': 3.12.0
       '@mdi/js': 7.4.47
-      bits-ui: 2.16.0(@internationalized/date@3.10.0)(@sveltejs/kit@2.55.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.54.1)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)(typescript@5.9.3)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)
+      bits-ui: 2.16.3(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.54.1)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)(typescript@5.9.3)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)
       luxon: 3.7.2
-      simple-icons: 16.9.0
+      simple-icons: 16.13.0
       svelte: 5.54.1
       svelte-highlight: 7.9.0
       tailwind-merge: 3.5.0
@@ -15290,7 +15290,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.12.0
 
-  '@internationalized/date@3.10.0':
+  '@internationalized/date@3.12.0':
     dependencies:
       '@swc/helpers': 0.5.17
 
@@ -18126,11 +18126,11 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bits-ui@2.16.0(@internationalized/date@3.10.0)(@sveltejs/kit@2.55.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.54.1)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)(typescript@5.9.3)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1):
+  bits-ui@2.16.3(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.54.1)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)(typescript@5.9.3)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1):
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.4
-      '@internationalized/date': 3.10.0
+      '@internationalized/date': 3.12.0
       esm-env: 1.2.2
       runed: 0.35.1(@sveltejs/kit@2.55.0(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.54.1)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)(typescript@5.9.3)(vite@8.0.1(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.6.1)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.3)))(svelte@5.54.1)
       svelte: 5.54.1
@@ -21579,7 +21579,7 @@ snapshots:
 
   marked@16.4.2: {}
 
-  marked@17.0.3: {}
+  marked@17.0.5: {}
 
   math-intrinsics@1.1.0: {}
 
@@ -24323,7 +24323,7 @@ snapshots:
 
   simple-icons@15.22.0: {}
 
-  simple-icons@16.9.0: {}
+  simple-icons@16.13.0: {}
 
   sirv@2.0.4:
     dependencies:
diff --git a/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte b/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
index f230a01ba5..afab0c6819 100644
--- a/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
   import PinCodeResetModal from '$lib/modals/PinCodeResetModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { changePinCode } from '@immich/sdk';
-  import { Button, Heading, modalManager, Text, toastManager } from '@immich/ui';
+  import { Button, Field, Heading, modalManager, PinInput, Text, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   let currentPinCode = $state('');
@@ -40,9 +39,15 @@
 <form autocomplete="off" onsubmit={handleSubmit}>
   <div class="flex flex-col gap-6 place-items-center place-content-center">
     <Heading>{$t('change_pin_code')}</Heading>
-    <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
-    <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
-    <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
+    <Field label={$t('current_pin_code')}>
+      <PinInput bind:value={currentPinCode} />
+    </Field>
+    <Field label={$t('new_pin_code')}>
+      <PinInput bind:value={newPinCode} />
+    </Field>
+    <Field label={$t('confirm_new_pin_code')}>
+      <PinInput bind:value={confirmPinCode} />
+    </Field>
     <button type="button" onclick={() => modalManager.show(PinCodeResetModal, {})}>
       <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
     </button>
diff --git a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
index 7ee9fb3565..3bf2c93e92 100644
--- a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { setupPinCode } from '@immich/sdk';
-  import { Button, Heading, toastManager } from '@immich/ui';
+  import { Button, Field, Heading, PinInput, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -47,8 +46,12 @@
     {#if showLabel}
       <Heading>{$t('setup_pin_code')}</Heading>
     {/if}
-    <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={1} pinLength={6} />
-    <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={7} pinLength={6} />
+    <Field label={$t('new_pin_code')}>
+      <PinInput bind:value={newPinCode} />
+    </Field>
+    <Field label={$t('confirm_new_pin_code')}>
+      <PinInput bind:value={confirmPinCode} />
+    </Field>
   </div>
 
   <div class="flex justify-end gap-2 mt-4">
diff --git a/web/src/lib/components/user-settings-page/PinCodeInput.svelte b/web/src/lib/components/user-settings-page/PinCodeInput.svelte
deleted file mode 100644
index 2ab48c0afe..0000000000
--- a/web/src/lib/components/user-settings-page/PinCodeInput.svelte
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts">
-  import { Label } from '@immich/ui';
-  import { onMount } from 'svelte';
-
-  interface Props {
-    label: string;
-    value?: string;
-    pinLength?: number;
-    tabindexStart?: number;
-    autofocus?: boolean;
-    onFilled?: (value: string) => void;
-    type?: 'text' | 'password';
-  }
-
-  let {
-    label,
-    value = $bindable(''),
-    pinLength = 6,
-    tabindexStart = 0,
-    autofocus = false,
-    onFilled,
-    type = 'text',
-  }: Props = $props();
-
-  let pinValues = $state(Array.from({ length: pinLength }).fill(''));
-  let pinCodeInputElements: HTMLInputElement[] = $state([]);
-
-  $effect(() => {
-    if (value === '') {
-      pinValues = Array.from({ length: pinLength }).fill('');
-    }
-  });
-
-  onMount(() => {
-    if (autofocus) {
-      pinCodeInputElements[0]?.focus();
-    }
-  });
-
-  const focusNext = (index: number) => {
-    pinCodeInputElements[Math.min(index + 1, pinLength - 1)]?.focus();
-  };
-
-  const focusPrev = (index: number) => {
-    if (index > 0) {
-      pinCodeInputElements[index - 1]?.focus();
-    }
-  };
-
-  const handleInput = (event: Event, index: number) => {
-    const target = event.target as HTMLInputElement;
-    const digits = target.value.replaceAll(/\D/g, '').slice(0, pinLength - index);
-
-    if (digits.length === 0) {
-      pinValues[index] = '';
-      value = pinValues.join('').trim();
-      return;
-    }
-
-    for (let i = 0; i < digits.length; i++) {
-      pinValues[index + i] = digits[i];
-    }
-
-    value = pinValues.join('').trim();
-
-    const lastFilledIndex = Math.min(index + digits.length, pinLength - 1);
-    pinCodeInputElements[lastFilledIndex]?.focus();
-
-    if (value.length === pinLength) {
-      onFilled?.(value);
-    }
-  };
-
-  function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) {
-    const target = event.currentTarget as HTMLInputElement;
-    const index = pinCodeInputElements.indexOf(target);
-
-    switch (event.key) {
-      case 'Tab': {
-        return;
-      }
-      case 'Backspace': {
-        if (target.value === '' && index > 0) {
-          focusPrev(index);
-          pinValues[index - 1] = '';
-        } else if (target.value !== '') {
-          pinValues[index] = '';
-        }
-        value = pinValues.join('').trim();
-        return;
-      }
-      case 'ArrowLeft': {
-        if (index > 0) {
-          focusPrev(index);
-        }
-        return;
-      }
-      case 'ArrowRight': {
-        if (index < pinLength - 1) {
-          focusNext(index);
-        }
-        return;
-      }
-    }
-  }
-</script>
-
-<div class="flex flex-col gap-1">
-  {#if label}
-    <Label for={pinCodeInputElements[0]?.id}>{label}</Label>
-  {/if}
-  <div class="flex gap-2">
-    {#each { length: pinLength } as _, index (index)}
-      <input
-        tabindex={tabindexStart + index}
-        {type}
-        inputmode="numeric"
-        pattern="[0-9]*"
-        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"
-        bind:value={pinValues[index]}
-        onkeydown={handleKeydown}
-        oninput={(event) => handleInput(event, index)}
-        aria-label={`PIN digit ${index + 1} of ${pinLength}${label ? ` for ${label}` : ''}`}
-      />
-    {/each}
-  </div>
-</div>
diff --git a/web/src/routes/auth/pin-prompt/+page.svelte b/web/src/routes/auth/pin-prompt/+page.svelte
index c14d4cf423..a0f8bdcc36 100644
--- a/web/src/routes/auth/pin-prompt/+page.svelte
+++ b/web/src/routes/auth/pin-prompt/+page.svelte
@@ -2,11 +2,10 @@
   import { goto } from '$app/navigation';
   import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
   import PinCodeCreateForm from '$lib/components/user-settings-page/PinCodeCreateForm.svelte';
-  import PincodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
   import { Route } from '$lib/route';
   import { handleError } from '$lib/utils/handle-error';
   import { unlockAuthSession } from '@immich/sdk';
-  import { Button, Icon } from '@immich/ui';
+  import { Button, Icon, PinInput } from '@immich/ui';
   import { mdiLockOpenVariantOutline, mdiLockOutline, mdiLockSmart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -55,15 +54,7 @@
 
         <p class="text-center text-sm" style="text-wrap: pretty;">{$t('enter_your_pin_code_subtitle')}</p>
 
-        <PincodeInput
-          type="password"
-          autofocus
-          label=""
-          bind:value={pinCode}
-          tabindexStart={1}
-          pinLength={6}
-          onFilled={handleUnlockSession}
-        />
+        <PinInput password autofocus bind:value={pinCode} onComplete={handleUnlockSession} />
       {:else}
         <div class="text-primary">
           <Icon icon={mdiLockSmart} size="64" />