From 808eaecc85e8fd4b90e9835985d5c8a84757dec4 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 16 May 2026 19:10:08 +0200
Subject: [PATCH] feat(14-02): migrate auth_login.templ to AuthLayout with
 ui.FormField inputs

- Replace Layout+Card pattern with AuthLayout("Sign in to Xtablo", csrfToken)
- Wire GoogleButton and AuthDivider into LoginPage body
- Replace raw <input> elements with @ui.FormField/@ui.Input design system components
- Add signup-copy nav link ("Don't have an account? Sign up")
- Preserve HTMX swap: hx-post="/login" hx-target="#login-form" hx-swap="outerHTML"
- Remove loginCardBody, AuthProviderButtonsBlock, AuthProviderButtonControl helpers
- Update test assertions for new GoogleButton labels ("Sign in with Google" / disabled attr)
---
 backend/internal/web/handlers_auth_test.go |  14 +--
 backend/templates/auth_login.templ         | 106 +++++++++------------
 2 files changed, 54 insertions(+), 66 deletions(-)

diff --git a/backend/internal/web/handlers_auth_test.go b/backend/internal/web/handlers_auth_test.go
index 7e94997..27c638a 100644
--- a/backend/internal/web/handlers_auth_test.go
+++ b/backend/internal/web/handlers_auth_test.go
@@ -167,7 +167,7 @@ func TestSignupProviderButtonsConfigured(t *testing.T) {
 
 	body := rec.Body.String()
 	for _, want := range []string{
-		"Continue with Google",
+		"Sign in with Google",
 		`href="/auth/google/start"`,
 		">or<",
 		`name="email"`,
@@ -192,9 +192,10 @@ func TestSignupProviderButtonsDisabledWhenConfigMissing(t *testing.T) {
 	router.ServeHTTP(rec, req)
 
 	body := rec.Body.String()
-	for _, want := range []string{"Google sign-in not configured"} {
+	// GoogleButton renders a disabled <button> when not configured; check for the disabled attribute
+	for _, want := range []string{`class="gsi-material-button" disabled`} {
 		if !strings.Contains(body, want) {
-			t.Fatalf("signup page missing disabled copy %q; body: %s", want, body)
+			t.Fatalf("signup page missing disabled Google button %q; body: %s", want, body)
 		}
 	}
 	for _, notWant := range []string{"Apple sign-in", `href="/auth/apple/start"`} {
@@ -557,7 +558,7 @@ func TestLoginProviderButtonsConfigured(t *testing.T) {
 
 	body := rec.Body.String()
 	for _, want := range []string{
-		"Continue with Google",
+		"Sign in with Google",
 		`href="/auth/google/start"`,
 		">or<",
 		`name="email"`,
@@ -582,9 +583,10 @@ func TestLoginProviderButtonsDisabledWhenConfigMissing(t *testing.T) {
 	router.ServeHTTP(rec, req)
 
 	body := rec.Body.String()
-	for _, want := range []string{"Google sign-in not configured"} {
+	// GoogleButton renders a disabled <button> when not configured; check for the disabled attribute
+	for _, want := range []string{`class="gsi-material-button" disabled`} {
 		if !strings.Contains(body, want) {
-			t.Fatalf("login page missing disabled copy %q; body: %s", want, body)
+			t.Fatalf("login page missing disabled Google button %q; body: %s", want, body)
 		}
 	}
 	for _, notWant := range []string{"Apple sign-in", `href="/auth/apple/start"`} {
diff --git a/backend/templates/auth_login.templ b/backend/templates/auth_login.templ
index 5f10a02..c0ab6b0 100644
--- a/backend/templates/auth_login.templ
+++ b/backend/templates/auth_login.templ
@@ -2,25 +2,26 @@ package templates
 
 import "backend/internal/web/ui"
 
-// LoginPage renders the full /login page wrapped in the base Layout.
+// LoginPage renders the full /login page wrapped in AuthLayout.
 // 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(ui.CardProps{Body: loginCardBody(form, errs, csrfToken, providers)})
+	@AuthLayout("Sign in to Xtablo", csrfToken) {
+		<div class="auth-card-topbar"></div>
+		<div class="brand-header">
+			<img class="brand-logo" src="/static/logo_dark.png" alt="Xtablo"/>
+		</div>
+		<div class="title-group">
+			<h1>Sign in to Xtablo</h1>
+		</div>
+		<div class="auth-body">
+			@GoogleButton(providers.Google.StartURL, providers.Google.Configured)
+			@AuthDivider()
+			@LoginFormFragment(form, errs, csrfToken)
 		</div>
 	}
 }
 
-templ loginCardBody(form LoginForm, errs LoginErrors, csrfToken string, providers AuthProviderButtons) {
-	<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>
-}
-
 // 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).
@@ -33,62 +34,47 @@ templ LoginFormFragment(form LoginForm, errs LoginErrors, csrfToken string) {
 		hx-post="/login"
 		hx-target="#login-form"
 		hx-swap="outerHTML"
-		class="space-y-5"
+		class="login-form"
 	>
 		@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.FormField(ui.FormFieldProps{
+			Label: "Email address",
+			For:   "email",
+			Field: ui.Input(ui.InputProps{
+				ID:          "email",
+				Name:        "email",
+				Type:        "email",
+				Placeholder: "you@example.com",
+				Value:       form.Email,
+				Required:    true,
+				Attrs:       templ.Attributes{"autocomplete": "email"},
+			}),
+			Error: errs.Email,
+		})
+		@ui.FormField(ui.FormFieldProps{
+			Label: "Password",
+			For:   "password",
+			Field: ui.Input(ui.InputProps{
+				ID:          "password",
+				Name:        "password",
+				Type:        "password",
+				Placeholder: "Your password",
+				Required:    true,
+				Attrs:       templ.Attributes{"autocomplete": "current-password"},
+			}),
+			Error: errs.Password,
+		})
 		@ui.Button(ui.ButtonProps{
-			Label:   "Sign in",
+			Label:   "Sign in to Xtablo",
 			Variant: ui.ButtonVariantDefault,
 			Tone:    ui.ButtonToneSolid,
 			Size:    ui.SizeMD,
 			Type:    "submit",
 		})
+		<p class="signup-copy">
+			Don't have an account?
+			<a class="signup-link" href="/signup">Sign up</a>
+		</p>
 	</form>
 }
-
-templ AuthProviderButtonsBlock(providers AuthProviderButtons) {
-	<div class="auth-provider-stack">
-		@AuthProviderButtonControl(providers.Google)
-	</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>
-	}
-}