xtablo-source/backend/templates/auth_signup.templ
Arthur Belleville a30a6f9088
feat(13-02): replace CSS files, migrate card.templ to typed API, update all template hardcodes
- button.css: replaced with go-backend multi-class selector version + ghost variant rules
- badge.css: replaced with go-backend pill-shape version + primary variant
- card.css: replaced with go-backend token-based header/body/footer version
- card.templ: migrated from children passthrough to typed CardProps{Header/Body/Footer}
- ui_test.go: rewrote TestCard_RendersChildren -> TestCard_RendersTypedRegions; added TestBadge_PrimaryVariant; added textComponent helper + io import
- auth_login.templ, auth_signup.templ: migrated Card usage to typed CardProps API
- tablos.templ: migrated TabloCard to typed CardProps API with extracted tabloCardBody
- planning.templ, tasks.templ, events.templ, etapes.templ: all compound button class strings updated to multi-class pattern
- go test ./... passes (all packages green)
- just generate succeeds
2026-05-16 13:55:30 +02:00

75 lines
2.4 KiB
Text

package templates
import "backend/internal/web/ui"
// SignupPage renders the full /signup page wrapped in the base Layout.
// It delegates the form section to SignupFormFragment so HTMX can swap just the
// form on validation errors without re-rendering the surrounding shell.
templ SignupPage(form SignupForm, errs SignupErrors, csrfToken string, providers AuthProviderButtons) {
@Layout("Sign up", nil, csrfToken) {
<div class="flex min-h-[60vh] items-start justify-center pt-16">
@ui.Card(ui.CardProps{Body: signupCardBody(form, errs, csrfToken, providers)})
</div>
}
}
templ signupCardBody(form SignupForm, errs SignupErrors, csrfToken string, providers AuthProviderButtons) {
<div class="w-full max-w-sm px-6 py-8">
<h1 class="mb-6 text-2xl font-semibold">Create your account</h1>
@AuthProviderButtonsBlock(providers)
@SignupFormFragment(form, errs, csrfToken)
</div>
}
// SignupFormFragment is the bare form used for HTMX swaps.
// hx-post targets this component itself so the form can be replaced inline
// on validation failure (D-19, D-25).
// The outer id="signup-form" must match the hx-target on this element.
templ SignupFormFragment(form SignupForm, errs SignupErrors, csrfToken string) {
<form
id="signup-form"
method="POST"
action="/signup"
hx-post="/signup"
hx-target="#signup-form"
hx-swap="outerHTML"
class="space-y-5"
>
@ui.CSRFField(csrfToken)
@GeneralError(errs.General)
<div>
<label for="email" class="block text-sm font-medium text-slate-700">Email address</label>
<input
id="email"
type="email"
name="email"
value={ form.Email }
required
autocomplete="email"
class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
placeholder="you@example.com"
/>
@FieldError(errs.Email)
</div>
<div>
<label for="password" class="block text-sm font-medium text-slate-700">Password</label>
<input
id="password"
type="password"
name="password"
required
autocomplete="new-password"
class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
placeholder="12 characters minimum"
/>
@FieldError(errs.Password)
</div>
@ui.Button(ui.ButtonProps{
Label: "Create account",
Variant: ui.ButtonVariantDefault,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "submit",
})
</form>
}