From aff4e3523c760be5d4f9ef8dd11b780d128dbd6c Mon Sep 17 00:00:00 2001
From: "Prad Nukala (aider)" <prad@sonr.io>
Date: Mon, 9 Dec 2024 15:09:05 -0500
Subject: [PATCH] feat: Streamline passkey registration with automatic form
 submission

---
 pkg/blocks/forms/register_passkey.templ | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/pkg/blocks/forms/register_passkey.templ b/pkg/blocks/forms/register_passkey.templ
index 38e00afae..3527f5cb8 100644
--- a/pkg/blocks/forms/register_passkey.templ
+++ b/pkg/blocks/forms/register_passkey.templ
@@ -9,7 +9,7 @@ type RegisterPasskeyData struct {
 }
 
 templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
-	<form action={ templ.SafeURL(action) } method={ method } onsubmit="return validateCredential()">
+	<form action={ templ.SafeURL(action) } method={ method } id="passkey-form">
 		<input type="hidden" name="credential" id="credential-data" required/>
 		<sl-card class="card-form gap-4 max-w-lg">
 			<div slot="header">
@@ -25,16 +25,6 @@ templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
 					<sl-icon slot="suffix" name="arrow-outbound" library="sonr"></sl-icon>
 				</sl-button>
 			</div>
-			<script>
-				function validateCredential() {
-					const credentialInput = document.getElementById('credential-data');
-					if (!credentialInput.value) {
-						alert('Please create a passkey before submitting');
-						return false;
-					}
-					return true;
-				}
-			</script>
 			<style>
   		.card-form [slot='footer'] {
     		display: flex;
@@ -98,12 +88,12 @@ navigator.credentials
     });
     document.getElementById('credential-data').value = btoa(credentialJSON);
     // Show credential details
-    document.getElementById('credential-details').classList.remove('hidden');
-    document.getElementById('credential-id').textContent = newCredentialInfo.id;
+    // Submit the form automatically
+    document.getElementById('passkey-form').submit();
   })
   .catch((err) => {
-  console.error(err);
-    // No acceptable authenticator or user refused consent. Handle appropriately.
+    console.error(err);
+    alert('Failed to create passkey. Please try again.');
   });
 }