From 21feb690839bc5b8584dcdf1b62a3c6cb0a0de24 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 27 Feb 2024 16:25:57 +0100
Subject: [PATCH] fix(web): don't ask password for invalid shared link (#7456)

* fix(web): don't ask password for invalid shared link

* use apiUtils for e2e test
---
 e2e/src/web/specs/shared-link.e2e-spec.ts     | 32 +++++++++++++------
 .../routes/(user)/share/[key]/+error.svelte   | 11 +++++--
 web/src/routes/(user)/share/[key]/+page.ts    | 11 ++-----
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/e2e/src/web/specs/shared-link.e2e-spec.ts b/e2e/src/web/specs/shared-link.e2e-spec.ts
index faa7b34255..ce79ed5454 100644
--- a/e2e/src/web/specs/shared-link.e2e-spec.ts
+++ b/e2e/src/web/specs/shared-link.e2e-spec.ts
@@ -15,6 +15,7 @@ test.describe('Shared Links', () => {
   let asset: AssetResponseDto;
   let album: AlbumResponseDto;
   let sharedLink: SharedLinkResponseDto;
+  let sharedLinkPassword: SharedLinkResponseDto;
 
   test.beforeAll(async () => {
     apiUtils.setup();
@@ -29,17 +30,16 @@ test.describe('Shared Links', () => {
         },
       },
       { headers: asBearerAuth(admin.accessToken) }
-      // { headers: asBearerAuth(admin.accessToken)},
-    );
-    sharedLink = await createSharedLink(
-      {
-        sharedLinkCreateDto: {
-          type: SharedLinkType.Album,
-          albumId: album.id,
-        },
-      },
-      { headers: asBearerAuth(admin.accessToken) }
     );
+    sharedLink = await apiUtils.createSharedLink(admin.accessToken, {
+      type: SharedLinkType.Album,
+      albumId: album.id,
+    });
+    sharedLinkPassword = await apiUtils.createSharedLink(admin.accessToken, {
+      type: SharedLinkType.Album,
+      albumId: album.id,
+      password: 'test-password',
+    });
   });
 
   test.afterAll(async () => {
@@ -55,4 +55,16 @@ test.describe('Shared Links', () => {
     await page.getByRole('button', { name: 'Download' }).click();
     await page.getByText('DOWNLOADING').waitFor();
   });
+
+  test('enter password for a shared link', async ({ page }) => {
+    await page.goto(`/share/${sharedLinkPassword.key}`);
+    await page.getByPlaceholder('Password').fill('test-password');
+    await page.getByRole('button', { name: 'Submit' }).click();
+    await page.getByRole('heading', { name: 'Test Album' }).waitFor();
+  });
+
+  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]/+error.svelte b/web/src/routes/(user)/share/[key]/+error.svelte
index fb1f0d766c..c68b534a90 100644
--- a/web/src/routes/(user)/share/[key]/+error.svelte
+++ b/web/src/routes/(user)/share/[key]/+error.svelte
@@ -1,7 +1,14 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+</script>
+
 <svelte:head>
   <title>Opps! Error - Immich</title>
 </svelte:head>
 
-<section class="flex h-screen w-screen place-content-center place-items-center">
-  <div class="p-20 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</div>
+<section class="flex flex-col px-4 h-screen w-screen place-content-center place-items-center">
+  <h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1>
+  {#if $page.error?.message}
+    <h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{$page.error.message}</h2>
+  {/if}
 </section>
diff --git a/web/src/routes/(user)/share/[key]/+page.ts b/web/src/routes/(user)/share/[key]/+page.ts
index dd34b47e4b..380c9d0024 100644
--- a/web/src/routes/(user)/share/[key]/+page.ts
+++ b/web/src/routes/(user)/share/[key]/+page.ts
@@ -1,7 +1,6 @@
 import { getAssetThumbnailUrl } from '$lib/utils';
 import { authenticate } from '$lib/utils/auth';
-import { ThumbnailFormat, getMySharedLink } from '@immich/sdk';
-import { error as throwError, type HttpError } from '@sveltejs/kit';
+import { ThumbnailFormat, getMySharedLink, isHttpError } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
@@ -22,9 +21,7 @@ export const load = (async ({ params }) => {
       },
     };
   } catch (error) {
-    // handle unauthorized error
-    // TODO this doesn't allow for 404 shared links anymore
-    if ((error as HttpError).status === 401) {
+    if (isHttpError(error) && error.data.message === 'Invalid password') {
       return {
         passwordRequired: true,
         sharedLinkKey: key,
@@ -34,8 +31,6 @@ export const load = (async ({ params }) => {
       };
     }
 
-    throwError(404, {
-      message: 'Invalid shared link',
-    });
+    throw error;
   }
 }) satisfies PageLoad;