From 1f02e642981e8aced92391c5e47de0b3dcfac09e Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@erdgeist.org>
Date: Sun, 16 Aug 2026 13:42:01 +0200
Subject: Give the pre-authentication pages one card

.auth_card nowcarries the login form and the second-factor challenge.
---
 app/views/otp_challenges/new.html.erb | 28 +++++++++++++---------------
 app/views/sessions/new.html.erb       |  2 +-
 public/stylesheets/admin.css          | 16 ++++++++--------
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/app/views/otp_challenges/new.html.erb b/app/views/otp_challenges/new.html.erb
index ff7df222..551d798c 100644
--- a/app/views/otp_challenges/new.html.erb
+++ b/app/views/otp_challenges/new.html.erb
@@ -1,18 +1,16 @@
-<h1><%= t(".title") %></h1>
+<div class="auth_card">
+  <h1><%= t(".title") %></h1>
 
-<div class="admin_layout">
-  <div class="layout_row">
-    <div class="layout_row_label"> <%= t(".code") %> </div>
-    <div class="layout_row_content">
-      <%= form_tag otp_challenge_path, :method => :post, :class => "otp_form" do %>
-        <%= text_field_tag :code, nil, :autofocus => true,
-              :autocomplete => "one-time-code", :inputmode => "numeric",
-              :maxlength => 6, :pattern => "[0-9]{6}", :class => "otp_code" %>
-        <span class="field_hint"> <%= t(".hint") %> </span>
-        <%= button_tag :type => "submit", :class => "action_button" do %>
-          <%= icon("shield-check", library: "tabler", "aria-hidden": true) %> <%= t(".log_in") %>
-        <% end %>
-      <% end %>
+  <%= form_tag otp_challenge_path, :method => :post, :class => "otp_form" do %>
+    <div class="login_field">
+      <%= label_tag :code, t(".code") %>
+      <%= text_field_tag :code, nil, :autofocus => true,
+            :autocomplete => "one-time-code", :inputmode => "numeric",
+            :maxlength => 6, :pattern => "[0-9]{6}", :class => "otp_code" %>
     </div>
-  </div>
+    <span class="field_hint"><%= t(".hint") %></span>
+    <%= button_tag :type => "submit", :class => "action_button" do %>
+      <%= icon("shield-check", library: "tabler", "aria-hidden": true) %> <%= t(".log_in") %>
+    <% end %>
+  <% end %>
 </div>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index a57b1ba4..4afa38ad 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -1,4 +1,4 @@
-<div id="login_form">
+<div class="auth_card">
   <h1><%= t(".heading") %></h1>
 
   <%= form_tag session_path do -%>
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 0dc1a048..33fd6062 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -164,35 +164,35 @@ input[type=radio] {
 
 .right { text-align: right; }
 
-#login_form {
-  max-width: 18rem;
+.auth_card {
+  max-width: 21rem;
   margin: 2rem auto;
   padding: 1.25rem;
   border: 1px solid var(--border);
   border-radius: var(--radius-card);
 }
 
-#login_form input[type=submit] {
+.auth_card input[type=submit] {
   margin-top: 1.5rem;
 }
 
-#login_form h1 {
+.auth_card h1 {
   margin: 0 auto 1.5rem auto;
   font-size: var(--text-xl);
 }
 
-#login_form label {
+.auth_card label {
   display: block;
   margin-bottom: 0.25rem;
   text-transform: lowercase;
 }
 
-#login_form .login_field {
+.auth_card .login_field {
   margin-bottom: 1rem;
 }
 
-#login_form input[type=text],
-#login_form input[type=password] {
+.auth_card input[type=text],
+.auth_card input[type=password] {
   width: 100%;
   box-sizing: border-box;
 }
-- 
cgit v1.3