refactor: use immich/ui PasswordInput (#22099)

refactor: password-input

web/src/lib/components/shared-components/password-field.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { Icon } from '@immich/ui';
-  import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import type { HTMLInputAttributes } from 'svelte/elements';
-
-  interface Props extends HTMLInputAttributes {
-    password: string;
-    autocomplete: AutoFill;
-    required?: boolean;
-    onInput?: (value: string) => void;
-  }
-
-  let { password = $bindable(), required = true, onInput = undefined, ...rest }: Props = $props();
-
-  let showPassword = $state(false);
-</script>
-
-<div class="relative w-full">
-  <input
-    {...rest}
-    class="immich-form-input w-full pe-12!"
-    type={showPassword ? 'text' : 'password'}
-    {required}
-    value={password}
-    oninput={(e) => {
-      password = e.currentTarget.value;
-      onInput?.(password);
-    }}
-  />
-
-  {#if password.length > 0}
-    <button
-      type="button"
-      tabindex="-1"
-      class="absolute inset-y-0 end-0 px-4 text-gray-700 dark:text-gray-200"
-      onclick={() => (showPassword = !showPassword)}
-      title={showPassword ? $t('hide_password') : $t('show_password')}
-    >
-      <Icon icon={showPassword ? mdiEyeOffOutline : mdiEyeOutline} size="1.25em" />
-    </button>
-  {/if}
-</div>
-
-<style>
-  input::-ms-reveal {
-    display: none;
-  }
-</style>

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
   import { SettingInputFieldType } from '$lib/constants';
+  import { PasswordInput } from '@immich/ui';
   import { onMount, tick, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import type { FormEventHandler } from 'svelte/elements';
   import { fly } from 'svelte/transition';
-  import PasswordField from '../password-field.svelte';
 
-  interface Props {
-    inputType: SettingInputFieldType;
-    value: string | number | undefined | null;
+  type Props = {
     min?: number;
     max?: number;
     step?: string;
@@ -23,7 +21,14 @@
     passwordAutocomplete?: AutoFill;
     descriptionSnippet?: Snippet;
     trailingSnippet?: Snippet;
-  }
+  } & (
+    | { inputType: SettingInputFieldType.PASSWORD; value: string }
+    | { inputType: SettingInputFieldType.NUMBER; value: number | null | undefined }
+    | {
+        inputType: SettingInputFieldType.TEXT | SettingInputFieldType.COLOR | SettingInputFieldType.EMAIL;
+        value: string | null | undefined;
+      }
+  );
 
   let {
     inputType,
@@ -145,15 +150,15 @@
       {@render trailingSnippet?.()}
     </div>
   {:else}
-    <PasswordField
+    <PasswordInput
       aria-describedby={description ? `${label}-desc` : undefined}
       aria-labelledby="{label}-label"
+      size="small"
       id={label}
       name={label}
       autocomplete={passwordAutocomplete}
       {required}
-      password={(value || '').toString()}
-      onInput={(passwordValue) => (value = passwordValue)}
+      bind:value={value as string}
       {disabled}
       {title}
     />