feat: locked/private view (#18268)

* feat: locked/private view * feat: locked/private view * pr feedback * fix: redirect loop * pr feedback
2025-12-19 01:11:07 +03:00 · 2025-05-15 09:35:21 -06:00
parent 4935f3e0bb
commit b7b0b9b6d8
61 changed files with 1018 additions and 186 deletions
--- a/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { changePinCode } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+
+  let currentPinCode = $state('');
+  let newPinCode = $state('');
+  let confirmPinCode = $state('');
+  let isLoading = $state(false);
+  let canSubmit = $derived(currentPinCode.length === 6 && confirmPinCode.length === 6 && newPinCode === confirmPinCode);
+
+  interface Props {
+    onChanged?: () => void;
+  }
+
+  let { onChanged }: Props = $props();
+
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault();
+    await handleChangePinCode();
+  };
+
+  const handleChangePinCode = async () => {
+    isLoading = true;
+    try {
+      await changePinCode({ pinCodeChangeDto: { pinCode: currentPinCode, newPinCode } });
+
+      resetForm();
+
+      notificationController.show({
+        message: $t('pin_code_changed_successfully'),
+        type: NotificationType.Info,
+      });
+
+      onChanged?.();
+    } catch (error) {
+      handleError(error, $t('unable_to_change_pin_code'));
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  const resetForm = () => {
+    currentPinCode = '';
+    newPinCode = '';
+    confirmPinCode = '';
+  };
+</script>
+
+<section class="my-4">
+  <div in:fade={{ duration: 200 }}>
+    <form autocomplete="off" onsubmit={handleSubmit} class="mt-6">
+      <div class="flex flex-col gap-6 place-items-center place-content-center">
+        <p class="text-dark">{$t('change_pin_code')}</p>
+        <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
+
+        <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
+
+        <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
+      </div>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
+          {$t('clear')}
+        </Button>
+        <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
+          {$t('save')}
+        </Button>
+      </div>
+    </form>
+  </div>
+</section>
--- a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { setupPinCode } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    onCreated?: (pinCode: string) => void;
+    showLabel?: boolean;
+  }
+
+  let { onCreated, showLabel = true }: Props = $props();
+
+  let newPinCode = $state('');
+  let confirmPinCode = $state('');
+  let isLoading = $state(false);
+  let canSubmit = $derived(confirmPinCode.length === 6 && newPinCode === confirmPinCode);
+
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault();
+    await createPinCode();
+  };
+
+  const createPinCode = async () => {
+    isLoading = true;
+    try {
+      await setupPinCode({ pinCodeSetupDto: { pinCode: newPinCode } });
+
+      notificationController.show({
+        message: $t('pin_code_setup_successfully'),
+        type: NotificationType.Info,
+      });
+
+      onCreated?.(newPinCode);
+      resetForm();
+    } catch (error) {
+      handleError(error, $t('unable_to_setup_pin_code'));
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  const resetForm = () => {
+    newPinCode = '';
+    confirmPinCode = '';
+  };
+</script>
+
+<form autocomplete="off" onsubmit={handleSubmit}>
+  <div class="flex flex-col gap-6 place-items-center place-content-center">
+    {#if showLabel}
+      <p class="text-dark">{$t('setup_pin_code')}</p>
+    {/if}
+    <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={1} pinLength={6} />
+
+    <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={7} pinLength={6} />
+  </div>
+
+  <div class="flex justify-end gap-2 mt-4">
+    <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
+      {$t('clear')}
+    </Button>
+    <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
+      {$t('create')}
+    </Button>
+  </div>
+</form>
--- a/web/src/lib/components/user-settings-page/PinCodeInput.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeInput.svelte
@@ -1,12 +1,25 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+
  interface Props {
    label: string;
    value?: string;
    pinLength?: number;
    tabindexStart?: number;
+    autofocus?: boolean;
+    onFilled?: (value: string) => void;
+    type?: 'text' | 'password';
  }

-  let { label, value = $bindable(''), pinLength = 6, tabindexStart = 0 }: Props = $props();
+  let {
+    label,
+    value = $bindable(''),
+    pinLength = 6,
+    tabindexStart = 0,
+    autofocus = false,
+    onFilled,
+    type = 'text',
+  }: Props = $props();

  let pinValues = $state(Array.from({ length: pinLength }).fill(''));
  let pinCodeInputElements: HTMLInputElement[] = $state([]);
@@ -17,6 +30,12 @@
    }
  });

+  onMount(() => {
+    if (autofocus) {
+      pinCodeInputElements[0]?.focus();
+    }
+  });
+
  const focusNext = (index: number) => {
    pinCodeInputElements[Math.min(index + 1, pinLength - 1)]?.focus();
  };
@@ -48,6 +67,10 @@
    if (value && index < pinLength - 1) {
      focusNext(index);
    }
+
+    if (value.length === pinLength) {
+      onFilled?.(value);
+    }
  };

  function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) {
@@ -97,13 +120,13 @@
    {#each { length: pinLength } as _, index (index)}
      <input
        tabindex={tabindexStart + index}
-        type="text"
+        {type}
        inputmode="numeric"
        pattern="[0-9]*"
        maxlength="1"
        bind:this={pinCodeInputElements[index]}
        id="pin-code-{index}"
-        class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 bg-transparent text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono"
+        class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 bg-transparent text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light"
        bind:value={pinValues[index]}
        onkeydown={handleKeydown}
        oninput={(event) => handleInput(event, index)}
--- a/web/src/lib/components/user-settings-page/PinCodeSettings.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeSettings.svelte
@@ -1,116 +1,26 @@
 <script lang="ts">
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
-  import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { changePinCode, getAuthStatus, setupPinCode } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import PinCodeChangeForm from '$lib/components/user-settings-page/PinCodeChangeForm.svelte';
+  import PinCodeCreateForm from '$lib/components/user-settings-page/PinCodeCreateForm.svelte';
+  import { getAuthStatus } from '@immich/sdk';
  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
  import { fade } from 'svelte/transition';

  let hasPinCode = $state(false);
-  let currentPinCode = $state('');
-  let newPinCode = $state('');
-  let confirmPinCode = $state('');
-  let isLoading = $state(false);
-  let canSubmit = $derived(
-    (hasPinCode ? currentPinCode.length === 6 : true) && confirmPinCode.length === 6 && newPinCode === confirmPinCode,
-  );

  onMount(async () => {
-    const authStatus = await getAuthStatus();
-    hasPinCode = authStatus.pinCode;
+    const { pinCode } = await getAuthStatus();
+    hasPinCode = pinCode;
  });
-
-  const handleSubmit = async (event: Event) => {
-    event.preventDefault();
-    await (hasPinCode ? handleChange() : handleSetup());
-  };
-
-  const handleSetup = async () => {
-    isLoading = true;
-    try {
-      await setupPinCode({ pinCodeSetupDto: { pinCode: newPinCode } });
-
-      resetForm();
-
-      notificationController.show({
-        message: $t('pin_code_setup_successfully'),
-        type: NotificationType.Info,
-      });
-    } catch (error) {
-      handleError(error, $t('unable_to_setup_pin_code'));
-    } finally {
-      isLoading = false;
-      hasPinCode = true;
-    }
-  };
-
-  const handleChange = async () => {
-    isLoading = true;
-    try {
-      await changePinCode({ pinCodeChangeDto: { pinCode: currentPinCode, newPinCode } });
-
-      resetForm();
-
-      notificationController.show({
-        message: $t('pin_code_changed_successfully'),
-        type: NotificationType.Info,
-      });
-    } catch (error) {
-      handleError(error, $t('unable_to_change_pin_code'));
-    } finally {
-      isLoading = false;
-    }
-  };
-
-  const resetForm = () => {
-    currentPinCode = '';
-    newPinCode = '';
-    confirmPinCode = '';
-  };
 </script>

 <section class="my-4">
-  <div in:fade={{ duration: 200 }}>
-    <form autocomplete="off" onsubmit={handleSubmit} class="mt-6">
-      <div class="flex flex-col gap-6 place-items-center place-content-center">
-        {#if hasPinCode}
-          <p class="text-dark">{$t('change_pin_code')}</p>
-          <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
-
-          <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
-
-          <PinCodeInput
-            label={$t('confirm_new_pin_code')}
-            bind:value={confirmPinCode}
-            tabindexStart={13}
-            pinLength={6}
-          />
-        {:else}
-          <p class="text-dark">{$t('setup_pin_code')}</p>
-          <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={1} pinLength={6} />
-
-          <PinCodeInput
-            label={$t('confirm_new_pin_code')}
-            bind:value={confirmPinCode}
-            tabindexStart={7}
-            pinLength={6}
-          />
-        {/if}
-      </div>
-
-      <div class="flex justify-end gap-2 mt-4">
-        <Button shape="round" color="secondary" type="button" size="small" onclick={resetForm}>
-          {$t('clear')}
-        </Button>
-        <Button shape="round" type="submit" size="small" loading={isLoading} disabled={!canSubmit}>
-          {hasPinCode ? $t('save') : $t('create')}
-        </Button>
-      </div>
-    </form>
-  </div>
+  {#if hasPinCode}
+    <div in:fade={{ duration: 200 }} class="mt-6">
+      <PinCodeChangeForm />
+    </div>
+  {:else}
+    <div in:fade={{ duration: 200 }} class="mt-6">
+      <PinCodeCreateForm onCreated={() => (hasPinCode = true)} />
+    </div>
+  {/if}
 </section>