From 72061ba4278a007437cee3a205c3076d58bde644 Mon Sep 17 00:00:00 2001
From: Arne Skaar Fismen <arnefismen@gmail.com>
Date: Sat, 12 Apr 2025 04:27:01 +0200
Subject: [PATCH] feat(onboarding): Added button when you don't have a passkey
 added. (#426)

Co-authored-by: Kyle Mendell <kmendell@ofkm.us>
---
 .../src/routes/settings/account/+page.svelte    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/routes/settings/account/+page.svelte b/frontend/src/routes/settings/account/+page.svelte
index a330df35..3c44ee89 100644
--- a/frontend/src/routes/settings/account/+page.svelte
+++ b/frontend/src/routes/settings/account/+page.svelte
@@ -67,11 +67,18 @@
 {#if passkeys.length == 0}
 	<Alert.Root variant="warning" class="flex gap-3">
 		<LucideAlertTriangle class="size-4" />
-		<div>
-			<Alert.Title class="font-semibold">{m.passkey_missing()}</Alert.Title>
-			<Alert.Description class="text-sm">
-				{m.please_provide_a_passkey_to_prevent_losing_access_to_your_account()}
-			</Alert.Description>
+		<div class="md:flex md:w-full md:place-content-between">
+			<div>
+				<Alert.Title class="font-semibold">{m.passkey_missing()}</Alert.Title>
+				<Alert.Description class="text-sm">
+					{m.please_provide_a_passkey_to_prevent_losing_access_to_your_account()}
+				</Alert.Description>
+			</div>
+			<div>
+				<Button class="mt-2 md:mt-0" on:click={createPasskey}>
+					{m.add_passkey()}
+				</Button>
+			</div>
 		</div>
 	</Alert.Root>
 {:else if passkeys.length == 1}