From a39fbcb8ac2ab3c6c48bbaea1e2fafb568affe51 Mon Sep 17 00:00:00 2001
From: imakida <makida.ian@gmail.com>
Date: Sat, 11 Jan 2025 18:08:08 -1000
Subject: [PATCH] feat: #15237 toggle password visibility on shared albums
 (#15238)

* feat: toggle password visibility on shared albums

* feat: toggle password visibility on shared albums

* use password-field component

* remove div wrapping PasswordField

---------

Co-authored-by: Ian <ian@zetabyte.dev>
---
 e2e/src/web/specs/shared-link.e2e-spec.ts     | 34 ++++++++++++++++++-
 .../[[assetId=id]]/+page.svelte               |  5 +--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/e2e/src/web/specs/shared-link.e2e-spec.ts b/e2e/src/web/specs/shared-link.e2e-spec.ts
index 2a02e429a5..ed81db4ef5 100644
--- a/e2e/src/web/specs/shared-link.e2e-spec.ts
+++ b/e2e/src/web/specs/shared-link.e2e-spec.ts
@@ -6,7 +6,7 @@ import {
   SharedLinkType,
   createAlbum,
 } from '@immich/sdk';
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { asBearerAuth, utils } from 'src/utils';
 
 test.describe('Shared Links', () => {
@@ -65,6 +65,38 @@ test.describe('Shared Links', () => {
     await page.getByRole('heading', { name: 'Test Album' }).waitFor();
   });
 
+  test('show-password button visible', async ({ page }) => {
+    await page.goto(`/share/${sharedLinkPassword.key}`);
+    await page.getByPlaceholder('Password').fill('test-password');
+    await page.getByRole('button', { name: 'Show password' }).waitFor();
+  });
+
+  test('view password for shared link', async ({ page }) => {
+    await page.goto(`/share/${sharedLinkPassword.key}`);
+    const input = page.getByPlaceholder('Password');
+    await input.fill('test-password');
+    await page.getByRole('button', { name: 'Show password' }).click();
+    // await page.getByText('test-password', { exact: true }).waitFor();
+    await expect(input).toHaveAttribute('type', 'text');
+  });
+
+  test('hide-password button visible', async ({ page }) => {
+    await page.goto(`/share/${sharedLinkPassword.key}`);
+    const input = page.getByPlaceholder('Password');
+    await input.fill('test-password');
+    await page.getByRole('button', { name: 'Show password' }).click();
+    await page.getByRole('button', { name: 'Hide password' }).waitFor();
+  });
+
+  test('hide password for shared link', async ({ page }) => {
+    await page.goto(`/share/${sharedLinkPassword.key}`);
+    const input = page.getByPlaceholder('Password');
+    await input.fill('test-password');
+    await page.getByRole('button', { name: 'Show password' }).click();
+    await page.getByRole('button', { name: 'Hide password' }).click();
+    await expect(input).toHaveAttribute('type', 'password');
+  });
+
   test('show error for invalid shared link', async ({ page }) => {
     await page.goto('/share/invalid');
     await page.getByRole('heading', { name: 'Invalid share key' }).waitFor();
diff --git a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index dfe465f94d..83dc40598a 100644
--- a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -5,6 +5,7 @@
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import ImmichLogoSmallLink from '$lib/components/shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
+  import PasswordField from '$lib/components/shared-components/password-field.svelte';
   import { user } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
   import { getMySharedLink, SharedLinkType } from '@immich/sdk';
@@ -80,8 +81,8 @@
         {$t('sharing_enter_password')}
       </div>
       <div class="mt-4">
-        <form novalidate autocomplete="off" {onsubmit}>
-          <input type="password" class="immich-form-input mr-2" placeholder={$t('password')} bind:value={password} />
+        <form class="flex gap-x-2" novalidate {onsubmit}>
+          <PasswordField autocomplete="off" bind:password placeholder="Password" />
           <Button type="submit">{$t('submit')}</Button>
         </form>
       </div>