feat(server,web,mobile): Add optional password option for share links. (#4655)

* feat(server,web,mobile): Add optional password option for share links.

Signed-off-by: jarvis2f <137974272+jarvis2f@users.noreply.github.com>

* feat(server,web): Update shared-link.controller and page.svelte for improved cookie handling and metadata updates.

Signed-off-by: jarvis2f <137974272+jarvis2f@users.noreply.github.com>

---------

Signed-off-by: jarvis2f <137974272+jarvis2f@users.noreply.github.com>

web/src/routes/(user)/share/[key]/+page.server.ts

@@ -2,12 +2,14 @@ import featurePanelUrl from '$lib/assets/feature-panel.png';
 import { api as clientApi, ThumbnailFormat } from '@api';
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
+import type { AxiosError } from 'axios';
 
-export const load = (async ({ params, locals: { api } }) => {
+export const load = (async ({ params, locals: { api }, cookies }) => {
   const { key } = params;
+  const token = cookies.get('immich_shared_link_token');
 
   try {
-    const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key });
+    const { data: sharedLink } = await api.sharedLinkApi.getMySharedLink({ key, token });
 
     const assetCount = sharedLink.assets.length;
     const assetId = sharedLink.album?.albumThumbnailAssetId || sharedLink.assets[0]?.id;
@@ -23,6 +25,17 @@ export const load = (async ({ params, locals: { api } }) => {
       },
     };
   } catch (e) {
+    // handle unauthorized error
+    if ((e as AxiosError).response?.status === 401) {
+      return {
+        passwordRequired: true,
+        sharedLinkKey: key,
+        meta: {
+          title: 'Password Required',
+        },
+      };
+    }
+
     throw error(404, {
       message: 'Invalid shared link',
     });

web/src/routes/(user)/share/[key]/+page.svelte

@@ -1,20 +1,79 @@
 <script lang="ts">
   import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
   import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
-  import { SharedLinkType } from '@api';
+  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import { api, SharedLinkType } from '@api';
   import type { PageData } from './$types';
+  import { handleError } from '$lib/utils/handle-error';
 
   export let data: PageData;
-  const { sharedLink } = data;
+  let { sharedLink, passwordRequired, sharedLinkKey: key } = data;
+  let { title, description } = data.meta;
 
-  let isOwned = data.user ? data.user.id === sharedLink.userId : false;
+  let isOwned = data.user ? data.user.id === sharedLink?.userId : false;
+  let password = '';
+
+  const handlePasswordSubmit = async () => {
+    try {
+      const result = await api.sharedLinkApi.getMySharedLink({ password, key });
+      passwordRequired = false;
+      sharedLink = result.data;
+      isOwned = data.user ? data.user.id === sharedLink.userId : false;
+      title = (sharedLink.album ? sharedLink.album.albumName : 'Public Share') + ' - Immich';
+      description = sharedLink.description || `${sharedLink.assets.length} shared photos & videos.`;
+    } catch (error) {
+      handleError(error, 'Failed to get shared link');
+    }
+  };
 </script>
 
-{#if sharedLink.type == SharedLinkType.Album}
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
+</svelte:head>
+{#if passwordRequired}
+  <header>
+    <ControlAppBar showBackButton={false}>
+      <svelte:fragment slot="leading">
+        <a
+          data-sveltekit-preload-data="hover"
+          class="ml-6 flex place-items-center gap-2 hover:cursor-pointer"
+          href="https://immich.app"
+        >
+          <ImmichLogo height={30} width={30} />
+          <h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">IMMICH</h1>
+        </a>
+      </svelte:fragment>
+
+      <svelte:fragment slot="trailing">
+        <ThemeButton />
+      </svelte:fragment>
+    </ControlAppBar>
+  </header>
+  <main
+    class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg sm:px-12 md:px-24 lg:px-40"
+  >
+    <div class="flex flex-col items-center justify-center mt-20">
+      <div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">Password Required</div>
+      <div class="mt-4 text-lg text-immich-primary dark:text-immich-dark-primary">
+        Please enter the password to view this page.
+      </div>
+      <div class="mt-4">
+        <input type="password" class="immich-form-input mr-2" placeholder="Password" bind:value={password} />
+        <Button on:click={handlePasswordSubmit}>Submit</Button>
+      </div>
+    </div>
+  </main>
+{/if}
+
+{#if !passwordRequired && sharedLink?.type == SharedLinkType.Album}
   <AlbumViewer {sharedLink} />
 {/if}
 
-{#if sharedLink.type == SharedLinkType.Individual}
+{#if !passwordRequired && sharedLink?.type == SharedLinkType.Individual}
   <div class="immich-scrollbar">
     <IndividualSharedViewer {sharedLink} {isOwned} />
   </div>