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

@@ -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();
+  });
 });

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">
+<section class="flex flex-col px-4 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>
+  <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>

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 { ThumbnailFormat, getMySharedLink, isHttpError } from '@immich/sdk';
-import { error as throwError, type HttpError } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
@@ -22,9 +21,7 @@ export const load = (async ({ params }) => {
       },
     };
   } catch (error) {
-    // handle unauthorized error
+    if (isHttpError(error) && error.data.message === 'Invalid password') {
-    // TODO this doesn't allow for 404 shared links anymore
-    if ((error as HttpError).status === 401) {
       return {
         passwordRequired: true,
         sharedLinkKey: key,
@@ -34,8 +31,6 @@ export const load = (async ({ params }) => {
       };
     }
 
-    throwError(404, {
+    throw error;
-      message: 'Invalid shared link',
-    });
   }
 }) satisfies PageLoad;