feat: add passkey creation functionality

pkg/blocks/form/form.templ

@@ -1,6 +1,9 @@
 package form
 
-import "github.com/onsonr/sonr/pkg/blocks/layout"
+import (
+	"github.com/go-webauthn/webauthn/protocol"
+	"github.com/onsonr/sonr/pkg/blocks/layout"
+)
 
 // Form is a standard form styled like a card
 templ Form(action string, method string, submit templ.Component, progress string, enableCancel bool) {
@@ -51,14 +54,30 @@ templ CodeInput(id string) {
 	<sl-input id={ id } placeholder="●" type="text" maxlength="1" pill class="w-min"></sl-input>
 }
 
-// Hidden input and button which calls a javascript function to generate a passkey
-templ PasskeyInput(id string) {
+script createPasskey(options protocol.PublicKeyCredentialCreationOptions) {
+	navigator.credentials.create(options).then(function(credential) {
+		// Dispatch event with credential data
+		window.dispatchEvent(new CustomEvent('credentialCreated', {
+			detail: credential
+		}));
+	}).catch(function(err) {
+		window.dispatchEvent(new CustomEvent('credentialError', {
+			detail: err.message
+		}));
+	});
+}
+
+// Hidden input and button which calls a JavaScript function to generate a passkey
+templ PasskeyInput(options protocol.PublicKeyCredentialCreationOptions) {
 	@CredentialsScripts()
-	<sl-button type="submit" pill style="width: 100%;">
-		<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 20px;"></sl-icon>
-		Create PassKey
-		<sl-icon slot="suffix" name="arrow-right" library="sonr" style="font-size: 20px;"></sl-icon>
-	</sl-button>
+	<form>
+		<input type="hidden" name="passkey"/>
+		<sl-button pill style="width: 100%;" onclick="createPasskey(this)">
+			<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 20px;"></sl-icon>
+			Create PassKey
+			<sl-icon slot="suffix" name="arrow-right" library="sonr" style="font-size: 20px;"></sl-icon>
+		</sl-button>
+	</form>
 }
 
 templ TurnstileWidget(sitekey string) {