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

@@ @@ -274,9 +274,31 @@ select:focus { @@
   outline: none;
+}
 .form-narrow {
   max-width: 24rem;
   margin: 3rem auto;
 /* Centered auth card (sign in, invite activation). */
 .auth-wrap {
   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 ---- */

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