feat(web): Added password field visibility toggle (#7368)

* Added password field visibility toggle

* improvements to password input field

* fix e2e and change tabindex

* add missing name=password

* remove unnecessary type prop

---------

Co-authored-by: Jan108 <dasJan108@gmail.com>
Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

web/src/lib/components/forms/admin-registration-form.svelte

@@ -4,14 +4,15 @@
   import { signUpAdmin } from '@immich/sdk';
   import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
+  import PasswordField from '../shared-components/password-field.svelte';
 
   let errorMessage: string;
   let password = '';
-  let confirmPassowrd = '';
+  let confirmPassword = '';
   let canRegister = false;
 
   $: {
-    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+    if (password !== confirmPassword && confirmPassword.length > 0) {
       errorMessage = 'Password does not match';
       canRegister = false;
     } else {
@@ -56,28 +57,12 @@
 
   <div class="flex flex-col gap-2">
     <label class="immich-form-label" for="password">Admin Password</label>
-    <input
-      class="immich-form-input"
-      id="password"
-      name="password"
-      type="password"
-      autocomplete="new-password"
-      required
-      bind:value={password}
-    />
+    <PasswordField id="password" name="password" bind:password autocomplete="new-password" />
   </div>
 
   <div class="flex flex-col gap-2">
     <label class="immich-form-label" for="confirmPassword">Confirm Admin Password</label>
-    <input
-      class="immich-form-input"
-      id="confirmPassword"
-      name="password"
-      type="password"
-      autocomplete="new-password"
-      required
-      bind:value={confirmPassowrd}
-    />
+    <PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
   </div>
 
   <div class="flex flex-col gap-2">

web/src/lib/components/forms/change-password-form.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
+  import PasswordField from '../shared-components/password-field.svelte';
   import { updateUser, type UserResponseDto } from '@immich/sdk';
 
   export let user: UserResponseDto;
@@ -46,28 +47,12 @@
 <form on:submit|preventDefault={changePassword} method="post" class="mt-5 flex flex-col gap-5">
   <div class="flex flex-col gap-2">
     <label class="immich-form-label" for="password">New Password</label>
-    <input
-      class="immich-form-input"
-      id="password"
-      name="password"
-      type="password"
-      autocomplete="new-password"
-      required
-      bind:value={password}
-    />
+    <PasswordField id="password" bind:password autocomplete="new-password" />
   </div>
 
   <div class="flex flex-col gap-2">
     <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
-    <input
-      class="immich-form-input"
-      id="confirmPassword"
-      name="password"
-      type="password"
-      autocomplete="current-password"
-      required
-      bind:value={passwordConfirm}
-    />
+    <PasswordField id="confirmPassword" bind:password={passwordConfirm} autocomplete="new-password" />
   </div>
 
   {#if errorMessage}

web/src/lib/components/forms/create-user-form.svelte

@@ -6,12 +6,13 @@
   import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import ImmichLogo from '../shared-components/immich-logo.svelte';
+  import PasswordField from '../shared-components/password-field.svelte';
 
   let error: string;
   let success: string;
 
   let password = '';
-  let confirmPassowrd = '';
+  let confirmPassword = '';
 
   let canCreateUser = false;
   let quotaSize: number | undefined;
@@ -20,7 +21,7 @@
   $: quotaSizeWarning = quotaSize && convertToBytes(Number(quotaSize), 'GiB') > $serverInfo.diskSizeRaw;
 
   $: {
-    if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
+    if (password !== confirmPassword && confirmPassword.length > 0) {
       error = 'Password does not match';
       canCreateUser = false;
     } else {
@@ -91,19 +92,12 @@
 
     <div class="m-4 flex flex-col gap-2">
       <label class="immich-form-label" for="password">Password</label>
-      <input class="immich-form-input" id="password" name="password" type="password" required bind:value={password} />
+      <PasswordField id="password" name="password" bind:password autocomplete="new-password" />
     </div>
 
     <div class="m-4 flex flex-col gap-2">
       <label class="immich-form-label" for="confirmPassword">Confirm Password</label>
-      <input
-        class="immich-form-input"
-        id="confirmPassword"
-        name="password"
-        type="password"
-        required
-        bind:value={confirmPassowrd}
-      />
+      <PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
     </div>
 
     <div class="m-4 flex flex-col gap-2">

web/src/lib/components/forms/login-form.svelte

@@ -9,6 +9,7 @@
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import Button from '../elements/buttons/button.svelte';
+  import PasswordField from '../shared-components/password-field.svelte';
 
   export let onSuccess: () => unknown | Promise<unknown>;
   export let onFirstLogin: () => unknown | Promise<unknown>;
@@ -112,15 +113,7 @@
 
     <div class="flex flex-col gap-2">
       <label class="immich-form-label" for="password">Password</label>
-      <input
-        class="immich-form-input"
-        id="password"
-        name="password"
-        type="password"
-        autocomplete="current-password"
-        bind:value={password}
-        required
-      />
+      <PasswordField id="password" bind:password autocomplete="current-password" />
     </div>
 
     <div class="my-5 flex w-full">