93 lines
2.9 KiB
Text
93 lines
2.9 KiB
Text
package templates
|
|
|
|
import "backend/internal/web/ui"
|
|
|
|
// LoginPage renders the full /login page wrapped in the base Layout.
|
|
// It delegates the form section to LoginFormFragment so HTMX can swap just the
|
|
// form on validation errors without re-rendering the surrounding shell.
|
|
templ LoginPage(form LoginForm, errs LoginErrors, csrfToken string, providers AuthProviderButtons) {
|
|
@Layout("Sign in", nil, csrfToken) {
|
|
<div class="flex min-h-[60vh] items-start justify-center pt-16">
|
|
@ui.Card(nil) {
|
|
<div class="w-full max-w-sm px-6 py-8">
|
|
<h1 class="mb-6 text-2xl font-semibold">Sign in to your account</h1>
|
|
@AuthProviderButtonsBlock(providers)
|
|
@LoginFormFragment(form, errs, csrfToken)
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
|
|
// LoginFormFragment 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-20).
|
|
// The outer id="login-form" must match the hx-target on this element.
|
|
templ LoginFormFragment(form LoginForm, errs LoginErrors, csrfToken string) {
|
|
<form
|
|
id="login-form"
|
|
method="POST"
|
|
action="/login"
|
|
hx-post="/login"
|
|
hx-target="#login-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="current-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="Your password"
|
|
/>
|
|
@FieldError(errs.Password)
|
|
</div>
|
|
@ui.Button(ui.ButtonProps{
|
|
Label: "Sign in",
|
|
Variant: ui.ButtonVariantDefault,
|
|
Tone: ui.ButtonToneSolid,
|
|
Size: ui.SizeMD,
|
|
Type: "submit",
|
|
})
|
|
</form>
|
|
}
|
|
|
|
templ AuthProviderButtonsBlock(providers AuthProviderButtons) {
|
|
<div class="auth-provider-stack">
|
|
@AuthProviderButtonControl(providers.Google)
|
|
@AuthProviderButtonControl(providers.Apple)
|
|
</div>
|
|
<div class="auth-provider-separator" aria-hidden="true">
|
|
<span></span>
|
|
<em>or</em>
|
|
<span></span>
|
|
</div>
|
|
}
|
|
|
|
templ AuthProviderButtonControl(provider AuthProviderButton) {
|
|
if provider.Configured {
|
|
<a class="auth-provider-button" href={ templ.SafeURL(provider.StartURL) }>{ provider.Label }</a>
|
|
} else {
|
|
<button type="button" class="auth-provider-button auth-provider-button-disabled" disabled aria-disabled="true">{ provider.DisabledLabel }</button>
|
|
}
|
|
}
|