96 lines
2.7 KiB
Text
96 lines
2.7 KiB
Text
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>
|
|
}
|
|
}
|