From 7ef06e8d05cd4586dd64f9af8660b727c02efec9 Mon Sep 17 00:00:00 2001
From: "Prad Nukala (aider)" <prad@sonr.io>
Date: Mon, 9 Dec 2024 14:53:59 -0500
Subject: [PATCH] feat: Add credential details row with icon after passkey
 creation

---
 pkg/blocks/forms/register_passkey.templ | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/pkg/blocks/forms/register_passkey.templ b/pkg/blocks/forms/register_passkey.templ
index 9a4a310a5..d311afa8d 100644
--- a/pkg/blocks/forms/register_passkey.templ
+++ b/pkg/blocks/forms/register_passkey.templ
@@ -49,7 +49,16 @@ templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
 }
 
 templ passkeyDropzone(addr string, userHandle string, challenge string) {
-	<div class="w-full flex flex-col items-center justify-center">
+	<div class="w-full flex flex-col items-center justify-center gap-4">
+		<div id="credential-details" class="w-full p-4 border border-neutral-200 rounded-md hidden">
+			<div class="flex items-center gap-3">
+				<sl-icon name="fingerprint" library="sonr" style="font-size: 24px;" class="text-primary-500"></sl-icon>
+				<div class="flex flex-col">
+					<span class="text-sm font-medium" id="credential-name">Platform Authenticator</span>
+					<span class="text-xs text-neutral-500" id="credential-id"></span>
+				</div>
+			</div>
+		</div>
 		<div class="w-full p-4 border-dashed border-2 border-neutral-500 cursor-pointer rounded-md hover:border-neutral-400 transition-colors" onclick={ createPasskey(addr, userHandle, challenge) }>
 			<div class="flex flex-col items-center gap-2">
 				<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 24px;" class="text-neutral-500"></sl-icon>
@@ -107,6 +116,9 @@ navigator.credentials
       type: newCredentialInfo.type
     });
     document.getElementById('credential-data').value = btoa(credentialJSON);
+    // Show credential details
+    document.getElementById('credential-details').classList.remove('hidden');
+    document.getElementById('credential-id').textContent = newCredentialInfo.id;
   })
   .catch((err) => {
   console.error(err);