From e4d5f96571a47257fd4fc46b15ec3f073dea9221 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 16 May 2026 19:06:07 +0200 Subject: [PATCH] feat(14-01): create auth_components.templ and auth_layout.templ - auth_components.templ: AnimatedBackground (35 elements, /static/logo_dark.png, no light/dark pairs), GoogleButton (a/button variant, English label 'Sign in with Google'), AuthDivider ('or' divider) - auth_layout.templ: standalone HTML shell with .login-screen, @AnimatedBackground(), .card-wrap/.card-glow/.auth-card-shell, htmx.min.js only (no sortable/sse scripts) - No auth.User param on AuthLayout (auth pages always unauthenticated) - just generate exits 0, all Go tests pass --- backend/templates/auth_components.templ | 174 ++++++++++++++++++++++++ backend/templates/auth_layout.templ | 37 +++++ 2 files changed, 211 insertions(+) create mode 100644 backend/templates/auth_components.templ create mode 100644 backend/templates/auth_layout.templ diff --git a/backend/templates/auth_components.templ b/backend/templates/auth_components.templ new file mode 100644 index 0000000..e5c115e --- /dev/null +++ b/backend/templates/auth_components.templ @@ -0,0 +1,174 @@ +package templates + +// AnimatedBackground renders 35 decorative logo elements that animate across +// the auth page background. The .background-layer carries aria-hidden="true" +// so screen readers ignore all decorative content (T-14-01-03). +// +// Each element uses a single logo_dark.png image (dark-mode swap deferred per +// DEFERRED/DARK-01). Image paths use /static/logo_dark.png — backend serves +// static files under /static/ unlike go-backend which serves from /. +templ AnimatedBackground() { + +} + +// GoogleButton renders the Material Design Google Sign-In button. +// +// When configured=true the button is an element linking to the OAuth start +// URL. When configured=false the button is rendered as a disabled + } +} + +// AuthDivider renders a horizontal divider with an "or" pill separator. +// English label per D-G03 convention (not "Ou continuer avec" from go-backend). +templ AuthDivider() { +
+
+ or +
+
+} diff --git a/backend/templates/auth_layout.templ b/backend/templates/auth_layout.templ new file mode 100644 index 0000000..6a7103e --- /dev/null +++ b/backend/templates/auth_layout.templ @@ -0,0 +1,37 @@ +package templates + +// AuthLayout is the standalone HTML shell for auth pages (/login, /signup). +// +// It replaces @Layout(...) for these pages. Differences from Layout: +// - No header, footer, or
wrapper — auth pages are full-viewport centered +// - Body uses .login-screen (gradient bg, flex center) instead of min-h-screen bg-white +// - @AnimatedBackground() renders 35 animated logo elements behind the card +// - No auth.User param — auth pages are always unauthenticated (T-14-01-04) +// - Scripts: only htmx.min.js — sortable.min.js and discussion-sse.js are not needed +// +// csrfToken is threaded so page children (LoginPage, SignupPage) can forward it +// into their form fragments via ui.CSRFField(csrfToken). AuthLayout itself does +// not embed a CSRF field — only the form fragments do. +templ AuthLayout(title string, csrfToken string) { + + + + + + { title } + + + + + + + +}