From 39e403d00f3870f9e960427653a1d9697da27a6f Mon Sep 17 00:00:00 2001
From: Kyle Mendell <kmendell@outlook.com>
Date: Wed, 12 Feb 2025 09:29:08 -0600
Subject: [PATCH] feat: add warning for only having one passkey configured
 (#220)

Co-authored-by: Elias Schneider <login@eliasschneider.com>
---
 .../src/lib/components/ui/alert/alert.svelte  | 34 ++++++++++++++++---
 .../src/routes/settings/account/+page.svelte  | 13 ++++++-
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/ui/alert/alert.svelte b/frontend/src/lib/components/ui/alert/alert.svelte
index 93877a3..6fc0c1f 100644
--- a/frontend/src/lib/components/ui/alert/alert.svelte
+++ b/frontend/src/lib/components/ui/alert/alert.svelte
@@ -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}
diff --git a/frontend/src/routes/settings/account/+page.svelte b/frontend/src/routes/settings/account/+page.svelte
index 6050343..db7bd35 100644
--- a/frontend/src/routes/settings/account/+page.svelte
+++ b/frontend/src/routes/settings/account/+page.svelte
@@ -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>