feat: locked/private view (#18268)

* feat: locked/private view * feat: locked/private view * pr feedback * fix: redirect loop * pr feedback
2025-05-15 09:35:21 -06:00
parent 4935f3e0bb
commit b7b0b9b6d8
61 changed files with 1018 additions and 186 deletions
@@ -0,0 +1,76 @@
+<script lang="ts">
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
+  import ChangeLocation from '$lib/components/photos-page/actions/change-location-action.svelte';
+  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import { AssetAction } from '$lib/constants';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { AssetStore } from '$lib/stores/assets-store.svelte';
+  import { AssetVisibility } from '@immich/sdk';
+  import { mdiDotsVertical } from '@mdi/js';
+  import { onDestroy } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  const assetStore = new AssetStore();
+  void assetStore.updateOptions({ visibility: AssetVisibility.Locked });
+  onDestroy(() => assetStore.destroy());
+
+  const assetInteraction = new AssetInteraction();
+
+  const handleEscape = () => {
+    if (assetInteraction.selectionActive) {
+      assetInteraction.clearMultiselect();
+      return;
+    }
+  };
+
+  const handleMoveOffLockedFolder = (assetIds: string[]) => {
+    assetInteraction.clearMultiselect();
+    assetStore.removeAssets(assetIds);
+  };
+</script>
+
+<!-- Multi-selection mode app bar -->
+{#if assetInteraction.selectionActive}
+  <AssetSelectControlBar
+    assets={assetInteraction.selectedAssets}
+    clearSelect={() => assetInteraction.clearMultiselect()}
+  >
+    <SelectAllAssets withText {assetStore} {assetInteraction} />
+    <SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
+    <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+      <DownloadAction menuItem />
+      <ChangeDate menuItem />
+      <ChangeLocation menuItem />
+      <DeleteAssets menuItem force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+    </ButtonContextMenu>
+  </AssetSelectControlBar>
+{/if}
+
+<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
+  <AssetGrid
+    enableRouting={true}
+    {assetStore}
+    {assetInteraction}
+    onEscape={handleEscape}
+    removeAction={AssetAction.SET_VISIBILITY_TIMELINE}
+  >
+    {#snippet empty()}
+      <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
+    {/snippet}
+  </AssetGrid>
+</UserPageLayout>
@@ -0,0 +1,28 @@
+import { AppRoute } from '$lib/constants';
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
+import { getAuthStatus } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params, url }) => {
+  await authenticate();
+  const { isElevated, pinCode } = await getAuthStatus();
+
+  if (!isElevated || !pinCode) {
+    const continuePath = encodeURIComponent(url.pathname);
+    const redirectPath = `${AppRoute.AUTH_PIN_PROMPT}?continue=${continuePath}`;
+
+    redirect(302, redirectPath);
+  }
+  const asset = await getAssetInfoFromParam(params);
+  const $t = await getFormatter();
+
+  return {
+    asset,
+    meta: {
+      title: $t('locked_folder'),
+    },
+  };
+}) satisfies PageLoad;
@@ -12,6 +12,7 @@
  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
  import LinkLivePhotoAction from '$lib/components/photos-page/actions/link-live-photo-action.svelte';
  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
  import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
  import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
@@ -75,6 +76,11 @@
    assetStore.updateAssets([still]);
  };

+  const handleSetVisibility = (assetIds: string[]) => {
+    assetStore.removeAssets(assetIds);
+    assetInteraction.clearMultiselect();
+  };
+
  beforeNavigate(() => {
    isFaceEditMode.value = false;
  });
@@ -142,6 +148,7 @@
        <TagAction menuItem />
      {/if}
      <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+      <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
      <hr />
      <AssetJobActions />
    </ButtonContextMenu>
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
+  import PinCodeCreateForm from '$lib/components/user-settings-page/PinCodeCreateForm.svelte';
+  import PincodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { verifyPinCode } from '@immich/sdk';
+  import { Icon } from '@immich/ui';
+  import { mdiLockOpenVariantOutline, mdiLockOutline, mdiLockSmart } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  let isVerified = $state(false);
+  let isBadPinCode = $state(false);
+  let hasPinCode = $derived(data.hasPinCode);
+  let pinCode = $state('');
+
+  const onPinFilled = async (code: string, withDelay = false) => {
+    try {
+      await verifyPinCode({ pinCodeSetupDto: { pinCode: code } });
+
+      isVerified = true;
+
+      if (withDelay) {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+
+      void goto(data.continuePath ?? AppRoute.LOCKED);
+    } catch (error) {
+      handleError(error, $t('wrong_pin_code'));
+      isBadPinCode = true;
+    }
+  };
+</script>
+
+<AuthPageLayout withHeader={false}>
+  {#if hasPinCode}
+    <div class="flex items-center justify-center">
+      <div class="w-96 flex flex-col gap-6 items-center justify-center">
+        {#if isVerified}
+          <div in:fade={{ duration: 200 }}>
+            <Icon icon={mdiLockOpenVariantOutline} size="64" class="text-success/90" />
+          </div>
+        {:else}
+          <div class:text-danger={isBadPinCode} class:text-primary={!isBadPinCode}>
+            <Icon icon={mdiLockOutline} size="64" />
+          </div>
+        {/if}
+
+        <p class="text-center text-sm" style="text-wrap: pretty;">{$t('enter_your_pin_code_subtitle')}</p>
+
+        <PincodeInput
+          type="password"
+          autofocus
+          label=""
+          bind:value={pinCode}
+          tabindexStart={1}
+          pinLength={6}
+          onFilled={(pinCode) => onPinFilled(pinCode, true)}
+        />
+      </div>
+    </div>
+  {:else}
+    <div class="flex items-center justify-center">
+      <div class="w-96 flex flex-col gap-6 items-center justify-center">
+        <div class="text-primary">
+          <Icon icon={mdiLockSmart} size="64" />
+        </div>
+        <p class="text-center text-sm mb-4" style="text-wrap: pretty;">
+          {$t('new_pin_code_subtitle')}
+        </p>
+        <PinCodeCreateForm showLabel={false} onCreated={() => (hasPinCode = true)} />
+      </div>
+    </div>
+  {/if}
+</AuthPageLayout>
@@ -0,0 +1,22 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getAuthStatus } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate();
+
+  const { pinCode } = await getAuthStatus();
+
+  const continuePath = url.searchParams.get('continue');
+
+  const $t = await getFormatter();
+
+  return {
+    meta: {
+      title: $t('pin_verification'),
+    },
+    hasPinCode: !!pinCode,
+    continuePath,
+  };
+}) satisfies PageLoad;