feat: add warning for only having one passkey configured (#220)

Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
Kyle Mendell
2025-02-12 09:29:08 -06:00
committed by GitHub
parent 4e858420e9
commit 39e403d00f
2 changed files with 42 additions and 5 deletions

View File

@@ -1,17 +1,43 @@
<script lang="ts">
import { cn } from '$lib/utils/style.js';
import { LucideX } from 'lucide-svelte';
import { onMount } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import { type Variant, alertVariants } from './index.js';
import { cn } from '$lib/utils/style.js';
type $$Props = HTMLAttributes<HTMLDivElement> & {
variant?: Variant;
dismissibleId?: string;
};
let className: $$Props['class'] = undefined;
export let variant: $$Props['variant'] = 'default';
export let dismissibleId: $$Props['dismissibleId'] = undefined;
export { className as class };
let isVisible = !dismissibleId;
onMount(() => {
if (dismissibleId) {
const dismissedAlerts = JSON.parse(localStorage.getItem('dismissed-alerts') || '[]');
isVisible = !dismissedAlerts.includes(dismissibleId);
}
});
function dismiss() {
if (dismissibleId) {
const dismissedAlerts = JSON.parse(localStorage.getItem('dismissed-alerts') || '[]');
localStorage.setItem('dismissed-alerts', JSON.stringify([...dismissedAlerts, dismissibleId]));
isVisible = false;
}
}
</script>
<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
<slot />
</div>
{#if isVisible}
<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
<slot />
{#if dismissibleId}
<button on:click={dismiss} class="absolute top-0 right-0 m-3 text-black dark:text-white"><LucideX class="w-4" /></button>
{/if}
</div>
{/if}

View File

@@ -62,9 +62,20 @@
>Please add a passkey to prevent losing access to your account.</Alert.Description
>
</Alert.Root>
{:else if passkeys.length == 1}
<Alert.Root variant="warning" dismissibleId="single-passkey">
<LucideAlertTriangle class="size-4" />
<Alert.Title>Single Passkey Configured</Alert.Title>
<Alert.Description
>It is recommended to add more than one passkey to avoid loosing access to your account.</Alert.Description
>
</Alert.Root>
{/if}
<fieldset disabled={!$appConfigStore.allowOwnAccountEdit || (!!account.ldapId && $appConfigStore.ldapEnabled)}>
<fieldset
disabled={!$appConfigStore.allowOwnAccountEdit ||
(!!account.ldapId && $appConfigStore.ldapEnabled)}
>
<Card.Root>
<Card.Header>
<Card.Title>Account Details</Card.Title>