nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-16 00:02:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/lib/components/ui/alert/alert.svelte
View File

@@ -1,17 +1,43 @@
<script lang="ts"> <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 { HTMLAttributes } from 'svelte/elements';
import { type Variant, alertVariants } from './index.js'; import { type Variant, alertVariants } from './index.js';
import { cn } from '$lib/utils/style.js';
type $$Props = HTMLAttributes<HTMLDivElement> & { type $$Props = HTMLAttributes<HTMLDivElement> & {
variant?: Variant; variant?: Variant;
dismissibleId?: string;
}; };
let className: $$Props['class'] = undefined; let className: $$Props['class'] = undefined;
export let variant: $$Props['variant'] = 'default'; export let variant: $$Props['variant'] = 'default';
export let dismissibleId: $$Props['dismissibleId'] = undefined;
export { className as class }; 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> </script>
<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert"> {#if isVisible}
<slot /> <div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
</div> <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}

13
frontend/src/routes/settings/account/+page.svelte
View File

@@ -62,9 +62,20 @@
>Please add a passkey to prevent losing access to your account.</Alert.Description >Please add a passkey to prevent losing access to your account.</Alert.Description
> >
</Alert.Root> </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} {/if}
<fieldset disabled={!$appConfigStore.allowOwnAccountEdit || (!!account.ldapId && $appConfigStore.ldapEnabled)}> <fieldset
disabled={!$appConfigStore.allowOwnAccountEdit ||
(!!account.ldapId && $appConfigStore.ldapEnabled)}
>
<Card.Root> <Card.Root>
<Card.Header> <Card.Header>
<Card.Title>Account Details</Card.Title> <Card.Title>Account Details</Card.Title>