mirror of
https://github.com/nikdoof/pocket-id.git
synced 2025-12-13 06:42:18 +00:00
feat: add warning for only having one passkey configured (#220)
Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user