xtablo-source/backend/templates/auth_layout.templ
Arthur Belleville 4624fb305a
fix(14-02): load Roboto font and fix Google button SVG icon sizing
Per Google's branding guidelines, the gsi-material-button requires Roboto
Medium. Add Google Fonts preconnect + stylesheet link to AuthLayout head.
Also add display:block + 100% dimensions to the SVG inside the icon
container to prevent inline baseline gaps.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
2026-05-16 19:18:58 +02:00

40 lines
1.6 KiB
Text

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 <main> 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) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{ title }</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"/>
<link rel="stylesheet" href="/static/tailwind.css"/>
</head>
<body>
<div class="login-screen">
@AnimatedBackground()
<div class="card-wrap">
<div class="card-glow"></div>
<div class="auth-card-shell">
{ children... }
</div>
</div>
</div>
<script src="/static/htmx.min.js" defer></script>
</body>
</html>
}