hanna/fabrica

feat(web): card the sign-in and invite forms, centered

b21d224 · hanna committed on 2026-07-25

Wrap the login and invite-activation forms in a centered `.auth-card`
(flexbox, vertically and horizontally centered) and drop the unused
`.form-narrow` layout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +25 −3

crates/web/src/pages.rs +29 −25

   outline: none;
+}
-.form-narrow {
+/* Centered auth card (sign in, invite activation). */
-  max-width: 24rem;
+.auth-wrap {
-  margin: 3rem auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - var(--fb-topbar-h) - 4rem);
+  padding: 1rem 0;
+}
+.auth-card {
+  width: 100%;
+  max-width: 22rem;
+  background: var(--fb-bg-raised);
+  border: 1px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  padding: 1.75rem;
+}
+.auth-card h1 {
+  text-align: center;
+  margin-bottom: 1rem;
+}
+.auth-card form .btn {
+  width: 100%;
+  justify-content: center;
+  margin-top: 1.25rem;
+}
 /* ---- Flash / notices ---- */

 /// Render the login form with an optional error notice.
 fn login_body(csrf: &str, error: Option<&str>) -> Markup {
     html! {
-        div class="form-narrow" {
+        div class="auth-wrap" {
-            h1 { "Sign in" }
+            div class="auth-card" {
-            @if let Some(err) = error {
+                h1 { "Sign in" }
-                div class="notice notice-error" { (err) }
+                @if let Some(err) = error {
-            }
+                    div class="notice notice-error" { (err) }
-            form method="post" action="/login" {
+                }
-                input type="hidden" name="_csrf" value=(csrf);
+                form method="post" action="/login" {
-                label for="username" { "Username" }
+                    input type="hidden" name="_csrf" value=(csrf);
-                input type="text" id="username" name="username" autocomplete="username" required;
+                    label for="username" { "Username" }
-                label for="password" { "Password" }
+                    input type="text" id="username" name="username" autocomplete="username" required;
-                input type="password" id="password" name="password"
+                    label for="password" { "Password" }
-                      autocomplete="current-password" required;
+                    input type="password" id="password" name="password"
-                p { button class="btn btn-primary" type="submit" { "Sign in" } }
+                          autocomplete="current-password" required;
+                    button class="btn btn-primary" type="submit" { "Sign in" }
+                }
+            }
+        }
+    }
     let _ = invite;
     let (jar, chrome) = build_chrome(&state, jar, None, uri.path().to_string());
     let body = html! {
-        div class="form-narrow" {
+        div class="auth-wrap" {
-            h1 { "Set your password" }
+            div class="auth-card" {
-            p class="muted" { "Choose a password to activate your account." }
+                h1 { "Set your password" }
-            form method="post" action={ "/invite/" (token) } {
+                p class="muted" { "Choose a password to activate your account." }
-                input type="hidden" name="_csrf" value=(chrome.csrf);
+                form method="post" action={ "/invite/" (token) } {
-                label for="password" { "Password" }
+                    input type="hidden" name="_csrf" value=(chrome.csrf);
-                input type="password" id="password" name="password"
+                    label for="password" { "Password" }
-                      autocomplete="new-password" required minlength="8";
+                    input type="password" id="password" name="password"
-                label for="confirm" { "Confirm password" }
+                          autocomplete="new-password" required minlength="8";
-                input type="password" id="confirm" name="confirm"
+                    label for="confirm" { "Confirm password" }
-                      autocomplete="new-password" required;
+                    input type="password" id="confirm" name="confirm"
-                p { button class="btn btn-primary" type="submit" { "Activate account" } }
+                          autocomplete="new-password" required;
+                    button class="btn btn-primary" type="submit" { "Activate account" }
+                }
+            }
+        }
     };