refactor: use immich/ui PasswordInput (#22099)

refactor: password-input

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}
     />