From e8475dbd8df8049b1696eb2f342333f5f06fceb7 Mon Sep 17 00:00:00 2001
From: "Prad Nukala (aider)" <prad@sonr.io>
Date: Mon, 9 Dec 2024 14:51:59 -0500
Subject: [PATCH] feat: Add form validation for passkey credential input

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

diff --git a/pkg/blocks/forms/register_passkey.templ b/pkg/blocks/forms/register_passkey.templ
index e1be172cf..9a4a310a5 100644
--- a/pkg/blocks/forms/register_passkey.templ
+++ b/pkg/blocks/forms/register_passkey.templ
@@ -11,7 +11,7 @@ type RegisterPasskeyData struct {
 }
 
 templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
-	<form action={ templ.SafeURL(action) } method={ method }>
+	<form action={ templ.SafeURL(action) } method={ method } onsubmit="return validateCredential()">
 		<input type="hidden" name="credential" id="credential-data" required/>
 		<sl-card class="card-form gap-4 max-w-lg">
 			<div slot="header">
@@ -27,6 +27,16 @@ 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;