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/shared-components/password-field.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { mdiEyeOffOutline, mdiEyeOutline } from '@mdi/js';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import Icon from '../elements/icon.svelte';
+
+  interface $$Props extends HTMLInputAttributes {
+    password: string;
+    autocomplete: string;
+    required?: boolean;
+    onInput?: (value: string) => void;
+  }
+
+  export let password: $$Props['password'];
+  export let required = true;
+  export let onInput: $$Props['onInput'] = undefined;
+
+  let showPassword = false;
+</script>
+
+<div class="relative w-full">
+  <input
+    {...$$restProps}
+    class="immich-form-input w-full !pr-12"
+    type={showPassword ? 'text' : 'password'}
+    {required}
+    value={password}
+    on:input={(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"
+      on:click={() => (showPassword = !showPassword)}
+      title={showPassword ? 'Hide password' : 'Show password'}
+    >
+      <Icon path={showPassword ? mdiEyeOffOutline : mdiEyeOutline} size="1.25em" />
+    </button>
+  {/if}
+</div>
+
+<style>
+  input::-ms-reveal {
+    display: none;
+  }
+</style>