handle onboarding (set name)

internal/ui/pages/onboarding.templ

@@ -0,0 +1,86 @@
+package pages
+
+import (
+	"git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/csrf"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/form"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
+)
+
+templ Onboarding(errorMsg string) {
+	{{ cfg := ctxkeys.Config(ctx) }}
+	{{ user := ctxkeys.User(ctx) }}
+	@layouts.Auth(layouts.SEOProps{
+		Title:       "Complete Your Profile",
+		Description: "Tell us your name",
+		Path:        ctxkeys.URLPath(ctx),
+	}) {
+		<div class="min-h-screen flex items-center justify-center p-4">
+			<div class="w-full max-w-sm">
+				<div class="text-center mb-8">
+					<div class="mb-8">
+						@button.Button(button.Props{
+							Variant: button.VariantSecondary,
+							Size:    button.SizeLg,
+							Href:    "/",
+						}) {
+							@icon.Layers()
+							{ cfg.AppName }
+						}
+					</div>
+					<h2 class="text-3xl font-bold">Welcome!</h2>
+					if user != nil {
+						<p class="text-muted-foreground mt-2">Continue as <strong>{ user.Email }</strong></p>
+					} else {
+						<p class="text-muted-foreground mt-2">What should we call you?</p>
+					}
+				</div>
+				<form action="/auth/onboarding" method="POST" class="space-y-6">
+					@csrf.Token()
+					@form.Item() {
+						@label.Label(label.Props{
+							For:   "name",
+							Class: "block mb-2",
+						}) {
+							Your Name
+						}
+						@input.Input(input.Props{
+							ID:          "name",
+							Name:        "name",
+							Type:        input.TypeText,
+							Placeholder: "John Doe",
+							HasError:    errorMsg != "",
+							Attributes:  templ.Attributes{"autofocus": ""},
+						})
+						if errorMsg != "" {
+							@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+								{ errorMsg }
+							}
+						}
+					}
+					@button.Button(button.Props{
+						Type:      button.TypeSubmit,
+						FullWidth: true,
+					}) {
+						Continue
+					}
+				</form>
+				<form action="/auth/logout" method="POST" class="text-center mt-6">
+					@csrf.Token()
+					<span class="text-sm text-muted-foreground">Not you? </span>
+					@button.Button(button.Props{
+						Type:    button.TypeSubmit,
+						Variant: button.VariantLink,
+						Class:   "p-0 h-auto text-sm",
+					}) {
+						Sign out
+					}
+				</form>
+			</div>
+		</div>
+	}
+}