refactor: Move registration form components to dedicated directory

app/gateway/internal/pages/register/profile.templ

@@ -0,0 +1,78 @@
+package register
+
+import (
+	"fmt"
+	"github.com/onsonr/sonr/pkg/common/styles/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)
+}
+
+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>
+}
+
+// ╭──────────────────────────────────────────────────────╮
+// │                  Passkey Components                  │
+// ╰──────────────────────────────────────────────────────╯