helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: locked/private view (#18268)

Browse source 
* feat: locked/private view

* feat: locked/private view

* pr feedback

* fix: redirect loop

* pr feedback
This commit is contained in:
Alex 2025-05-15 09:35:21 -06:00 • committed by GitHub
parent 4935f3e0bb
commit b7b0b9b6d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
61 changed files with 1018 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

29
web/src/lib/components/user-settings-page/PinCodeInput.svelte
View file

@ -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)}