feat: Add form validation for passkey credential input

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;