feat: implement passkey-based authentication

onsonr · Dec 10, 2024 · f366dd8 · f366dd8
1 parent dc6f02a
commit f366dd8
Show file tree

Hide file tree

Showing 35 changed files with 751 additions and 1,039 deletions.
diff --git a/internal/gateway/handlers/index/handlers.go b/internal/gateway/handlers/index/handlers.go
@@ -0,0 +1,13 @@
+package index
+
+import (
+	"github.com/labstack/echo/v4"
+	"github.com/onsonr/sonr/pkg/common/response"
+)
+
+func Handler(c echo.Context) error {
+	if isExpired(c) {
+		return response.TemplEcho(c, ReturningView())
+	}
+	return response.TemplEcho(c, InitialView())
+}
diff --git a/internal/gateway/handlers/index_handler.go → internal/gateway/handlers/index/model.go b/internal/gateway/handlers/index_handler.go → internal/gateway/handlers/index/model.go
@@ -1,23 +1,10 @@
-package handlers
+package index
 
 import (
 	"github.com/labstack/echo/v4"
-	"github.com/onsonr/sonr/internal/gateway/pages/index"
 	"github.com/onsonr/sonr/internal/gateway/session"
-	"github.com/onsonr/sonr/pkg/common/response"
 )
 
-func HandleIndex(c echo.Context) error {
-	if isExpired(c) {
-		return response.TemplEcho(c, index.ReturningView())
-	}
-	return response.TemplEcho(c, index.InitialView())
-}
-
-// ╭─────────────────────────────────────────────────────────╮
-// │                    Utility Functions                    │
-// ╰─────────────────────────────────────────────────────────╯
-
 // Initial users have no authorization, user handle, or vault address
 func isInitial(c echo.Context) bool {
 	sess, err := session.Get(c)

diff --git a/internal/gateway/pages/index/page.templ → internal/gateway/handlers/index/views.templ b/internal/gateway/pages/index/page.templ → internal/gateway/handlers/index/views.templ
diff --git a/internal/gateway/pages/index/page_templ.go → ...nal/gateway/handlers/index/views_templ.go b/internal/gateway/pages/index/page_templ.go → ...nal/gateway/handlers/index/views_templ.go
diff --git a/internal/gateway/handlers/register/forms.templ b/internal/gateway/handlers/register/forms.templ
@@ -0,0 +1,189 @@
+package register
+
+import "github.com/onsonr/sonr/pkg/common/styles/layout"
+
+templ formCreateProfile(action string, method string, data CreateProfileData) {
+	<form action={ templ.SafeURL(action) } method={ method }>
+		<sl-card class="card-form gap-4 w-full max-w-lg mx-auto px-4 sm:px-6">
+			<div slot="header">
+				<div class="w-full py-1">
+					<sl-progress-bar value="50"></sl-progress-bar>
+				</div>
+			</div>
+			@layout.Rows() {
+				<sl-input name="first_name" placeholder="Satoshi" type="text" label="First Name" required autofocus></sl-input>
+				<sl-input name="last_name" placeholder="N" maxlength="1" type="text" label="Last Initial"></sl-input>
+			}
+			@layout.Spacer()
+			<sl-input name="handle" placeholder="digitalgold" type="text" label="Handle" minlength="4" maxlength="12" required>
+				<div slot="prefix">
+					<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>
+					Cancel
+				</sl-button>
+				<sl-button type="submit">
+					Next
+					<sl-icon slot="suffix" name="arrow-right" library="sonr"></sl-icon>
+				</sl-button>
+			</div>
+			<style>
+				.card-form {
+					margin: 1rem;
+				}
+				.card-form [slot='footer'] {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					flex-wrap: wrap;
+					gap: 1rem;
+				}
+				@media (max-width: 640px) {
+					.card-form {
+						margin: 0.5rem;
+					}
+					.card-form [slot='footer'] {
+						flex-direction: column-reverse;
+						width: 100%;
+					}
+					.card-form [slot='footer'] sl-button {
+						width: 100%;
+					}
+				}
+			</style>
+		</sl-card>
+	</form>
+}
+
+templ formRegisterPasskey(action, method string, data RegisterPasskeyData) {
+	<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">
+				<div class="w-full py-2">
+					@sonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
+				</div>
+			</div>
+			<sl-select
+				label="Accounts"
+				value="SNR BTC ETH"
+				help-text="Select Blockchains to connect with your Vault"
+				multiple
+				class="custom-tag py-2"
+			>
+				@cryptoWalletOption("SNR", "Sonr", true)
+				@cryptoWalletOption("BTC", "Bitcoin", true)
+				@cryptoWalletOption("ETH", "Ethereum", true)
+				@cryptoWalletOption("SOL", "Solana", false)
+				@cryptoWalletOption("LTC", "Litecoin", false)
+				@cryptoWalletOption("DOGE", "Dogecoin", false)
+				@cryptoWalletOption("XRP", "Ripple", false)
+				@cryptoWalletOption("OSMO", "Osmosis", false)
+				@cryptoWalletOption("ATOM", "Cosmos", false)
+				@cryptoWalletOption("STARZ", "Stargaze", false)
+				@cryptoWalletOption("AKT", "Akash", false)
+				@cryptoWalletOption("EVMOS", "Evmos", false)
+				@cryptoWalletOption("FIL", "Filecoin", false)
+				@cryptoWalletOption("AXL", "Axelar", false)
+			</sl-select>
+			<script type="module">
+          const select = document.querySelector('.custom-tag');
+
+          select.getTag = (option, index) => {
+            // Use the same icon used in the <sl-option>
+            const name = option.querySelector('sl-icon[slot="prefix"]').name;
+
+            // You can return a string, a Lit Template, or an HTMLElement here
+            return `
+              <sl-tag removable>
+                <sl-icon name="${name}" library="crypto" style="padding-inline-end: .5rem;"></sl-icon>
+                ${option.getTextLabel()}
+              </sl-tag>
+            `;
+          };
+        </script>
+			<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'] {
+    		justify-content: space-evenly;
+    		align-items: center;
+  		}
+		</style>
+		</sl-card>
+	</form>
+}
+
+templ formRegisterPasskey(action, method string, data RegisterPasskeyData) {
+	<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">
+				<div class="w-full py-2">
+					@sonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
+				</div>
+			</div>
+			<sl-select
+				label="Accounts"
+				value="SNR BTC ETH"
+				help-text="Select Blockchains to connect with your Vault"
+				multiple
+				class="custom-tag py-2"
+			>
+				@cryptoWalletOption("SNR", "Sonr", true)
+				@cryptoWalletOption("BTC", "Bitcoin", true)
+				@cryptoWalletOption("ETH", "Ethereum", true)
+				@cryptoWalletOption("SOL", "Solana", false)
+				@cryptoWalletOption("LTC", "Litecoin", false)
+				@cryptoWalletOption("DOGE", "Dogecoin", false)
+				@cryptoWalletOption("XRP", "Ripple", false)
+				@cryptoWalletOption("OSMO", "Osmosis", false)
+				@cryptoWalletOption("ATOM", "Cosmos", false)
+				@cryptoWalletOption("STARZ", "Stargaze", false)
+				@cryptoWalletOption("AKT", "Akash", false)
+				@cryptoWalletOption("EVMOS", "Evmos", false)
+				@cryptoWalletOption("FIL", "Filecoin", false)
+				@cryptoWalletOption("AXL", "Axelar", false)
+			</sl-select>
+			<script type="module">
+          const select = document.querySelector('.custom-tag');
+
+          select.getTag = (option, index) => {
+            // Use the same icon used in the <sl-option>
+            const name = option.querySelector('sl-icon[slot="prefix"]').name;
+
+            // You can return a string, a Lit Template, or an HTMLElement here
+            return `
+              <sl-tag removable>
+                <sl-icon name="${name}" library="crypto" style="padding-inline-end: .5rem;"></sl-icon>
+                ${option.getTextLabel()}
+              </sl-tag>
+            `;
+          };
+        </script>
+			<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'] {
+    		justify-content: space-evenly;
+    		align-items: center;
+  		}
+		</style>
+		</sl-card>
+	</form>
+}