feat: implement passkey registration flow

onsonr · Dec 9, 2024 · 0e8b92e · 0e8b92e
1 parent 27d4dfc
commit 0e8b92e
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 82 deletions.
diff --git a/pkg/blocks/forms/create_profile.templ b/pkg/blocks/forms/create_profile.templ
@@ -1,9 +1,22 @@
 package forms
 
-import "github.com/onsonr/sonr/pkg/blocks/layout"
+import (
+	"fmt"
+	"github.com/onsonr/sonr/pkg/blocks/layout"
+)
+
+type CreateProfileData struct {
+	TurnstileSiteKey string
+	FirstNumber      int
+	LastNumber       int
+}
+
+func (d CreateProfileData) IsHumanLabel() string {
+	return fmt.Sprintf("What is %d + %d?", d.FirstNumber, d.LastNumber)
+}
 
 // ProfileForm is a standard form styled like a card
-templ CreateProfile(action string, method string) {
+templ CreateProfile(action string, method string, data CreateProfileData) {
 	<form action={ templ.SafeURL(action) } method={ method }>
 		<sl-card class="card-form gap-4 max-w-lg">
 			<div slot="header">
@@ -21,6 +34,8 @@ templ CreateProfile(action string, method string) {
 					<sl-icon name="at-sign" library="sonr"></sl-icon>
 				</div>
 			</sl-input>
+			@layout.Spacer()
+			<sl-range name="is_human" label={ data.IsHumanLabel() } help-text="Prove you are a human." min="0" max="9" step="1"></sl-range>
 			<div slot="footer">
 				<sl-button href="/" outline>
 					<sl-icon slot="prefix" name="arrow-left" library="sonr"></sl-icon>
@@ -41,3 +56,6 @@ templ CreateProfile(action string, method string) {
 		</sl-card>
 	</form>
 }
+
+templ isHumanSlider(targetSum string) {
+}
diff --git a/pkg/blocks/forms/create_profile_templ.go b/pkg/blocks/forms/create_profile_templ.go
diff --git a/pkg/blocks/forms/register_passkey.templ b/pkg/blocks/forms/register_passkey.templ
@@ -13,22 +13,20 @@ templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
 		<input type="hidden" name="credential" id="credential-data" required/>
 		<sl-card class="card-form gap-4 max-w-lg">
 			<div slot="header">
-				<div class="w-full py-1">
+				<div class="w-full py-2">
 					@sonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
 				</div>
 			</div>
-			@passkeyDropzone(data.Address, data.Handle, data.Challenge)
-			<div slot="footer">
-				<sl-button type="submit" pill style="width: 100%;" variant="primary">
-					<sl-icon slot="prefix" name="shield-fill-check"></sl-icon>
-					Register Vault
-					<sl-icon slot="suffix" name="arrow-outbound" library="sonr"></sl-icon>
+			<div slot="footer" class="space-y-2">
+				@passkeyDropzone(data.Address, data.Handle, data.Challenge)
+				<sl-button href="/" style="width: 100%;" outline>
+					<sl-icon slot="prefix" name="x-lg"></sl-icon>
+					Cancel
 				</sl-button>
 			</div>
 			<style>
   		.card-form [slot='footer'] {
-    		display: flex;
-    		justify-content: space-between;
+    		justify-content: space-evenly;
     		align-items: center;
   		}
 		</style>
@@ -37,7 +35,7 @@ templ RegisterPasskey(action, method string, data RegisterPasskeyData) {
 }
 
 templ passkeyDropzone(addr string, userHandle string, challenge string) {
-	<sl-button pill style="width: 100%;" onclick={ createPasskey(addr, userHandle, challenge) }>
+	<sl-button style="width: 100%;" onclick={ createPasskey(addr, userHandle, challenge) }>
 		<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 24px;" class="text-neutral-500"></sl-icon>
 		Register Passkey
 	</sl-button>

diff --git a/pkg/blocks/forms/register_passkey_templ.go b/pkg/blocks/forms/register_passkey_templ.go
diff --git a/pkg/gateway/handlers/register_handler.go b/pkg/gateway/handlers/register_handler.go
@@ -11,14 +11,16 @@ import (
 	"github.com/onsonr/sonr/crypto/mpc"
 	"github.com/onsonr/sonr/pkg/blocks/forms"
 	"github.com/onsonr/sonr/pkg/common/response"
-	"github.com/onsonr/sonr/pkg/gateway/config"
+	"github.com/onsonr/sonr/pkg/gateway/internal/database"
 	"github.com/onsonr/sonr/pkg/gateway/internal/pages/register"
 )
 
-func HandleRegisterView(env config.Env) echo.HandlerFunc {
-	return func(c echo.Context) error {
-		return response.TemplEcho(c, register.ProfileFormView(env.GetTurnstileSiteKey()))
+func HandleRegisterView(c echo.Context) error {
+	dat := forms.CreateProfileData{
+		FirstNumber: 1,
+		LastNumber:  2,
 	}
+	return response.TemplEcho(c, register.ProfileFormView(dat))
 }
 
 func HandleRegisterStart(c echo.Context) error {
@@ -47,21 +49,7 @@ func HandleRegisterFinish(c echo.Context) error {
 	if credentialJSON == "" {
 		return echo.NewHTTPError(http.StatusBadRequest, "missing credential data")
 	}
-
-	// Define the credential structure matching our frontend data
-	var cred struct {
-		ID                     string                 `json:"id"`
-		RawID                  string                 `json:"rawId"`
-		Type                   string                 `json:"type"`
-		AuthenticatorAttachment string                `json:"authenticatorAttachment"`
-		Transports            []string               `json:"transports"`
-		ClientExtensionResults map[string]interface{} `json:"clientExtensionResults"`
-		Response              struct {
-			AttestationObject string `json:"attestationObject"`
-			ClientDataJSON    string `json:"clientDataJSON"`
-		} `json:"response"`
-	}
-
+	cred := database.Credential{}
 	// Unmarshal the credential JSON
 	if err := json.Unmarshal([]byte(credentialJSON), &cred); err != nil {
 		return echo.NewHTTPError(http.StatusBadRequest, fmt.Sprintf("invalid credential format: %v", err))
@@ -106,12 +94,5 @@ func HandleRegisterFinish(c echo.Context) error {
 		len(attestationObj),
 		len(clientData))
 
-	// TODO: Verify the attestation and store the credential
-	// This is where you would:
-	// 1. Verify the attestation signature
-	// 2. Check the origin in client data
-	// 3. Verify the challenge
-	// 4. Store the credential for future authentications
-
 	return response.TemplEcho(c, register.LoadingVaultView())
 }