render auth and password pages

internal/ui/pages/auth_password.templ

@@ -0,0 +1,96 @@
+package pages
+
+import (
+	"git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+	"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/icon"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+)
+
+templ AuthPassword(errorMsg string) {
+	{{ cfg := ctxkeys.Config(ctx) }}
+	@layouts.Auth(layouts.SEOProps{
+		Title:       "Sign In",
+		Description: "Sign in with your password",
+		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">Sign In</h2>
+					<p class="text-muted-foreground mt-2">Sign in with your password</p>
+				</div>
+				<form action="/auth/password" method="POST" class="space-y-4">
+					@csrf.Token()
+					@form.Item() {
+						@label.Label(label.Props{
+							For:   "email",
+							Class: "block mb-2",
+						}) {
+							Email
+						}
+						@input.Input(input.Props{
+							ID:          "email",
+							Name:        "email",
+							Type:        input.TypeEmail,
+							Placeholder: "name@example.com",
+							HasError:    errorMsg != "",
+							Attributes:  templ.Attributes{"autofocus": ""},
+						})
+						if errorMsg != "" {
+							@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+								{ errorMsg }
+							}
+						}
+					}
+					@form.Item() {
+						@label.Label(label.Props{
+							For:   "password",
+							Class: "block mb-2",
+						}) {
+							Password
+						}
+						@input.Input(input.Props{
+							ID:          "password",
+							Name:        "password",
+							Type:        input.TypePassword,
+							Placeholder: "••••••••",
+						})
+						<div class="text-right mt-1">
+							<a href="/auth/forgot-password" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+								Forgot password?
+							</a>
+						</div>
+					}
+					@button.Button(button.Props{
+						Type:      button.TypeSubmit,
+						FullWidth: true,
+					}) {
+						Sign In
+					}
+				</form>
+				<!-- Magic Link option -->
+				<p class="mt-6 text-center text-sm text-muted-foreground">
+					Don't have an account?
+					<a href="/auth" class="text-primary hover:underline ml-1">
+						Sign up with magic link
+					</a>
+				</p>
+			</div>
+		</div>
+	}
+}