@geekity/cms 0.21.0 → 0.23.0

package/admin/components/flash.njk

@@ -1,5 +1,12 @@
-{# Messages queued by the request that redirected here. They were cleared as
-   they were read, so this is the only page that shows them. #}
-{% for entry in flash %}
-  <p class="admin-flash admin-flash-{{ entry.kind }}" role="status">{{ entry.message }}</p>
-{% endfor %}
+{# Messages queued by the request that redirected here, one alert each in the
+   colour of its kind. They were cleared as they were read, so this is the only
+   page that shows them. #}
+{% from "components/alert.njk" import alert %}
+{% set KINDS = { notice: 'success', warning: 'warning', error: 'error' } %}
+{% if flash and flash.length %}
+<div class="mb-6 flex flex-col gap-2">
+  {% for entry in flash %}
+    {% call alert(color=KINDS[entry.kind], polite=true) %}<span>{{ entry.message }}</span>{% endcall %}
+  {% endfor %}
+</div>
+{% endif %}

package/admin/components/menu.njk

@@ -0,0 +1,51 @@
+{# A menu: a list of links, down the side or across the top.
+
+   `menu(items, …)` emits
+
+     <ul class="menu w-full">
+       <li>
+         <a class="{RING}" href="…">Posts</a>
+         <ul>
+           <li><a class="{RING} menu-active" href="…" aria-current="page">All posts</a></li>
+         </ul>
+       </li>
+     </ul>
+
+   Each item is `{ label, url, current, open, children }`, as
+   `src/admin/menu.ts` builds it: `current` marks the screen being looked at
+   with `menu-active` and `aria-current`, and an item's `children` are listed
+   only while it is `open`. Labels are escaped. No `<nav>` is emitted; the
+   screen wraps the menu in one where it is a landmark.
+
+   `{RING}` is the focus-ring classes on every link: DaisyUI's menu sets
+   `outline-style: none` on `:focus-visible` and skips `.menu-active`.
+
+   Modifiers:
+
+     direction  vertical (the default, filling its column), horizontal, or
+                responsive (down on a phone, across from `lg` up)
+     size       xs, sm, md, lg, xl
+
+   A value outside its set is a render error. #}
+
+{% set DIRECTIONS = {
+  vertical: 'w-full',
+  horizontal: 'menu-horizontal',
+  responsive: 'menu-vertical lg:menu-horizontal'
+} %}
+{% set SIZES = { xs: 'menu-xs', sm: 'menu-sm', md: 'menu-md', lg: 'menu-lg', xl: 'menu-xl' } %}
+
+{% macro _items(items) -%}
+{% for item in items %}
+<li>
+  <a class="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-base-content{% if item.current %} menu-active{% endif %}" href="{{ item.url }}"{% if item.current %} aria-current="page"{% endif %}>{{ item.label }}</a>
+  {% if item.open and item.children.length %}
+  <ul>{{ _items(item.children) }}</ul>
+  {% endif %}
+</li>
+{% endfor %}
+{%- endmacro %}
+
+{% macro menu(items, direction='vertical', size=none) -%}
+<ul class="menu{{ DIRECTIONS | modifier(direction) }}{{ SIZES | modifier(size) }}">{{ _items(items) }}</ul>
+{%- endmacro %}

package/admin/components/navbar.njk

@@ -0,0 +1,23 @@
+{# A navbar, the bar across the top of a page.
+
+   `{% call navbar() %}…{% endcall %}` emits
+   `<div class="navbar bg-base-100 shadow-sm">` around its body. Inside it,
+   `navbarStart()`, `navbarCenter()` and `navbarEnd()`, each optional, take a
+   body through `{% call %}` and emit `<div class="navbar-start">`,
+   `navbar-center` and `navbar-end`. Every body is markup. #}
+
+{% macro navbar() -%}
+<div class="navbar bg-base-100 shadow-sm">{{ caller() }}</div>
+{%- endmacro %}
+
+{% macro navbarStart() -%}
+<div class="navbar-start">{{ caller() }}</div>
+{%- endmacro %}
+
+{% macro navbarCenter() -%}
+<div class="navbar-center">{{ caller() }}</div>
+{%- endmacro %}
+
+{% macro navbarEnd() -%}
+<div class="navbar-end">{{ caller() }}</div>
+{%- endmacro %}

package/admin/components/pagination.njk

@@ -0,0 +1,47 @@
+{# Pagination: newer, where you are, and older, joined into one group of
+   buttons.
+
+   `pagination(page, pages=…, previousUrl=…, nextUrl=…)` emits
+
+     <nav aria-label="Pages">
+       <div class="join">
+         <a class="join-item btn btn-sm" rel="prev" href="…">Newer</a>
+         <span class="join-item btn btn-sm btn-active" aria-current="page">Page 2 of 5</span>
+         <a class="join-item btn btn-sm" rel="next" href="…">Older</a>
+       </div>
+     </nav>
+
+   An end with nowhere to go is a `btn-disabled` span. `pages` is left out of
+   the middle when it is not given. With neither a newer nor an older page it
+   draws nothing.
+
+   `previousLabel`, `nextLabel` and `label` change the words; all three are
+   escaped. #}
+
+{% macro _end(url, rel, text) -%}
+{% if url %}
+<a class="join-item btn btn-sm" rel="{{ rel }}" href="{{ url }}">{{ text }}</a>
+{% else %}
+<span class="join-item btn btn-sm btn-disabled" aria-disabled="true">{{ text }}</span>
+{% endif %}
+{%- endmacro %}
+
+{% macro pagination(
+  page,
+  pages=none,
+  previousUrl='',
+  nextUrl='',
+  previousLabel='Newer',
+  nextLabel='Older',
+  label='Pages'
+) -%}
+{% if previousUrl or nextUrl %}
+<nav aria-label="{{ label }}">
+  <div class="join">
+    {{ _end(previousUrl, 'prev', previousLabel) }}
+    <span class="join-item btn btn-sm btn-active" aria-current="page">Page {{ page }}{% if pages %} of {{ pages }}{% endif %}</span>
+    {{ _end(nextUrl, 'next', nextLabel) }}
+  </div>
+</nav>
+{% endif %}
+{%- endmacro %}

package/admin/components/public-admin-bar.njk

@@ -1,43 +1,6 @@
-{# The admin bar as the public site draws it for a signed-in user (TASK-183),
-   put straight after the theme's <body> tag.
-
-   Whatever theme the site wears has never heard of it, so it keeps to a shadow
-   root: no selector of the theme's reaches the markup inside, and the
-   stylesheet inside reaches nothing outside. The stylesheet is inlined rather
-   than linked so the bar is never drawn unstyled; the public site has no
-   content CSP to refuse it.
-
-   The host is fixed to the top of the window, as WordPress's is. In normal
-   flow it sat inside whatever padding or margin the theme gave <body>, so it
-   stopped short of the window's edges. Out of flow, nothing the theme does to
-   <body> moves it, and the inline reset keeps the theme's rules for the host
-   element itself, a `body > *` or a grid on <body>, from restyling it; only an
-   `!important` rule can, which is also how a theme that insists hides it. The
-   page is pushed down from outside, by a stylesheet the CMS puts in <head>
-   (OFFSET_STYLE in src/web/admin-bar.ts) reading --geekity-admin-bar-height.
-
-   The script does two things. It measures the bar and sets that height on
-   <html>, so a bar that wraps to two lines on a phone, or one a theme has
-   hidden, pushes the page down by what it really is. And it gives focus back
-   to the greeting when the menu closes with focus inside it: Chrome does that
-   for a popover in the light DOM, not from inside a shadow root, where the
-   focus is simply lost. A click elsewhere has already moved focus by then,
-   and keeps it. #}
-<geekity-admin-bar style="all: initial; display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 99999"><template shadowrootmode="open"><style>{% include "static/admin-bar.css" %}</style>{% include "components/admin-bar.njk" %}<script>
-(() => {
-  const host = document.querySelector('geekity-admin-bar');
-  const root = host.shadowRoot;
-  new ResizeObserver(() => {
-    const height = host.getBoundingClientRect().height;
-    document.documentElement.style.setProperty('--geekity-admin-bar-height', `${height}px`);
-  }).observe(host);
-  const menu = root.getElementById('admin-account-menu');
-  menu?.addEventListener('beforetoggle', (event) => {
-    if (event.newState === 'closed' && menu.contains(root.activeElement)) {
-      setTimeout(() => root.querySelector('.admin-bar-account').focus());
-    }
-  });
-})();
-</script></template></geekity-admin-bar>{% if notice %}
+{# The admin bar as the public site includes it (TASK-183, decision-30),
+   straight after the theme's <body> tag, with the unpublished notice under
+   it. #}
+{% include "components/admin-bar.njk" %}{% if notice %}
 <p class="geekity-unpublished-notice" style="all: initial; display: block; box-sizing: border-box; margin: 0; padding: 8px 16px; background: #fcf9e8; color: #1d2327; border-bottom: 1px solid #dba617; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif">{{ notice }}</p>
 {%- endif %}

package/admin/components/stat.njk

@@ -0,0 +1,35 @@
+{# Stats, numbers set out in a row.
+
+   `{% call stats(…) %}…{% endcall %}` emits
+   `<div class="stats bg-base-100 shadow">` around its body, and
+   `stat(title, value, desc='', href='')` inside it emits one
+   `<div class="stat">` holding a `stat-title`, a `stat-value` and, when it is
+   given one, a `stat-desc`. Title, value and description are escaped.
+
+   Given an `href`, the stat is an `<a class="stat">` instead, so the whole
+   stat is the link and its name is the title and the value together; the
+   value is drawn in the primary colour to say it leads somewhere.
+
+   `direction` is horizontal, vertical, or responsive (a column on a phone, a
+   row from `lg` up); left out, the stats lie in a row. Any other value is a
+   render error. #}
+
+{% set DIRECTIONS = {
+  horizontal: 'stats-horizontal',
+  vertical: 'stats-vertical',
+  responsive: 'stats-vertical lg:stats-horizontal'
+} %}
+
+{% macro stats(direction=none) -%}
+<div class="stats bg-base-100 shadow{{ DIRECTIONS | modifier(direction) }}">{{ caller() }}</div>
+{%- endmacro %}
+
+{% macro stat(title, value, desc='', href='') -%}
+{% if href %}<a class="stat hover:bg-base-200" href="{{ href }}">{% else %}<div class="stat">{% endif %}
+  <div class="stat-title">{{ title }}</div>
+  <div class="stat-value{% if href %} text-primary{% endif %}">{{ value }}</div>
+  {% if desc %}
+  <div class="stat-desc">{{ desc }}</div>
+  {% endif %}
+{% if href %}</a>{% else %}</div>{% endif %}
+{%- endmacro %}

package/admin/components/table.njk

@@ -0,0 +1,74 @@
+{# A table on a surface of its own, scrolling sideways inside it instead of
+   widening the page.
+
+   `{% call table(caption, …) %}<thead>…</thead><tbody>…</tbody>{% endcall %}`
+   emits
+
+     <div class="max-w-full overflow-x-auto contain-inline-size rounded-box bg-base-100 p-2 shadow-sm">
+       <table class="table table-sm">
+         <caption class="sr-only">caption</caption>
+         body
+       </table>
+     </div>
+
+   The caption is required and escaped. The body is the rows.
+
+   `contain-inline-size` keeps the table's intrinsic width from sizing the
+   card or grid cell around it.
+
+   Modifiers:
+
+     size     xs, sm (the default), md, lg, xl
+     zebra    true stripes the rows
+     pinRows  true keeps the head and foot in view as the rows scroll
+     pinCols  true keeps the `th` cells of each row in view
+     inCard   true leaves off the surface, for a table already in a card's body
+
+   A size outside its set is a render error.
+
+   Rows that stack below lg instead of scrolling the table sideways. Each
+   row is a `{% call row() %}`. Its first cell is written out and ends with
+   `rowToggle(name)`; every other cell is
+   `{% call cell(label, nowrap) %}value{% endcall %}`, and every heading
+   after the first is `heading(label)`, with the same label:
+
+     <tr class="group …">
+       <td>title, row actions <details><summary>Details of name</summary></details></td>
+       <td data-label="Author" class="…">ada</td>
+     </tr>
+
+   From lg up the row is a table row and the toggle is not drawn. Below lg
+   the row shows its first cell with the toggle at its end, and opening the
+   toggle shows each other cell under it as a line of label then value. #}
+
+{% set SIZES = { xs: 'table-xs', sm: 'table-sm', md: 'table-md', lg: 'table-lg', xl: 'table-xl' } %}
+
+{% macro table(caption, size='sm', zebra=false, pinRows=false, pinCols=false, inCard=false) -%}
+<div class="max-w-full overflow-x-auto contain-inline-size{% if not inCard %} rounded-box bg-base-100 p-2 shadow-sm {%- endif %}">
+  <table class="table{{ SIZES | modifier(size) }}{% if zebra %} table-zebra {%- endif %}{% if pinRows %} table-pin-rows {%- endif %}{% if pinCols %} table-pin-cols {%- endif %}">
+    <caption class="sr-only">{{ caption }}</caption>
+    {{ caller() }}
+  </table>
+</div>
+{%- endmacro %}
+
+{% macro row() -%}
+<tr class="group *:align-top max-lg:relative max-lg:block max-lg:pe-10 max-lg:not-last:border-b max-lg:border-base-content/5 max-lg:*:border-b-0">{{ caller() }}</tr>
+{%- endmacro %}
+
+{% macro heading(label) -%}
+<th scope="col" class="max-lg:hidden">{{ label }}</th>
+{%- endmacro %}
+
+{% macro cell(label, nowrap=false) -%}
+<td data-label="{{ label }}" class="{% if nowrap %}whitespace-nowrap {% endif %}max-lg:hidden max-lg:gap-2 max-lg:py-1 max-lg:group-has-open:flex max-lg:before:w-24 max-lg:before:shrink-0 max-lg:before:font-semibold max-lg:before:text-base-content/60 max-lg:before:content-[attr(data-label)]">{{ caller() }}</td>
+{%- endmacro %}
+
+{% macro rowToggle(name) -%}
+<details class="absolute end-1 top-1 lg:hidden">
+  <summary class="btn btn-ghost btn-sm btn-square">
+    <span class="sr-only">Details of {{ name }}</span>
+    <span aria-hidden="true" class="-mt-1 size-2 rotate-45 border-e-2 border-b-2 transition-transform group-has-open:mt-1 group-has-open:rotate-225"></span>
+  </summary>
+</details>
+{%- endmacro %}

package/admin/components/tabs.njk

@@ -0,0 +1,33 @@
+{# Tabs: a row of links between views of one screen.
+
+   `tabs(items, label, …)` emits
+
+     <nav class="tabs tabs-box" aria-label="label">
+       <a class="tab tab-active" href="…" aria-current="page">All (3)</a>
+       <a class="tab" href="…">Spam (0)</a>
+     </nav>
+
+   Each item is `{ label, url, current, count }`: `current` marks the view
+   being looked at, and `count`, when there is one, is printed after the
+   label. Labels are escaped.
+
+   No `role="tablist"` or `role="tab"`: those ARIA roles promise panels and
+   arrow keys, and these are plain links.
+
+   Modifiers:
+
+     style  box (the default, a segmented control), border, lift
+     size   xs, sm, md, lg, xl
+
+   A value outside its set is a render error. #}
+
+{% set STYLES = { box: 'tabs-box', border: 'tabs-border', lift: 'tabs-lift' } %}
+{% set SIZES = { xs: 'tabs-xs', sm: 'tabs-sm', md: 'tabs-md', lg: 'tabs-lg', xl: 'tabs-xl' } %}
+
+{% macro tabs(items, label, style='box', size=none) -%}
+<nav class="tabs{{ STYLES | modifier(style) }}{{ SIZES | modifier(size) }}" aria-label="{{ label }}">
+  {% for item in items %}
+  <a class="tab{% if item.current %} tab-active{% endif %}" href="{{ item.url }}"{% if item.current %} aria-current="page"{% endif %}>{{ item.label }}{% if item.count is defined %} ({{ item.count }}){% endif %}</a>
+  {% endfor %}
+</nav>
+{%- endmacro %}

package/admin/components/theme-choice.njk

@@ -0,0 +1,18 @@
+{% import "components/fields.njk" as field %}
+{% from "components/card.njk" import card, cardActions %}
+{% from "components/button.njk" import button %}
+
+{% call card(title='Theme') %}
+  <form method="post" action="{{ userThemeUrl }}">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+    {% call field.select('admin-theme', fields.adminTheme, 'Draw the admin in',
+         hint='Only you see it. Follow the system draws light or dark as your device is set.') %}
+      {% for choice in themeChoices %}
+        <option value="{{ choice.value }}"{% if choice.chosen %} selected{% endif %}>{{ choice.label }}</option>
+      {% endfor %}
+    {% endcall %}
+    {% call cardActions() %}
+      {{ button('Save theme', type='submit', color='primary') }}
+    {% endcall %}
+  </form>
+{% endcall %}

package/admin/layouts/base.njk

@@ -1,29 +1,22 @@
-{# The admin's base layout. It lives outside the theme search path on purpose:
-   a site's theme/ can override any public template, and must never be able to
-   shadow the login form.
-
-   This is the bare page: head, stylesheet and one centred column. Screens that
-   need the navigation extend layouts/shell.njk, which extends this and wraps
-   the same content block in the admin chrome. Login and setup extend this one
-   directly, because a visitor who cannot log in yet has nowhere to navigate. #}
+{# The admin's base layout, the bare page: head, the compiled stylesheet and
+   one column. `dataTheme` is the signed-in user's theme; with none, the light
+   and dark defaults follow the system. #}
 <!doctype html>
-<html lang="en">
+<html lang="en"{% if dataTheme %} data-theme="{{ dataTheme }}"{% endif %}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{% block title %}Admin{% endblock %}{% if site.title %} · {{ site.title }}{% endif %}</title>
     <meta name="robots" content="noindex, nofollow" />
-    <link rel="stylesheet" href="{{ assetPrefix }}admin-bar.css" />
     <link rel="stylesheet" href="{{ assetPrefix }}admin.css" />
   </head>
-  <body>
-    {# First on every screen, so a keyboard gets past the bar and the menu
-       in one key. It moves no focus of its own: a refused form's summary
-       still takes focus on load (TASK-142). #}
-    <a class="admin-skip-link" href="#main">Skip to main content</a>
+  <body class="min-h-screen bg-base-200 text-base-content">
+    {# First on every screen, so a keyboard gets past the bar and the menu in
+       one key. #}
+    <a class="fixed top-(--geekity-admin-bar-height) left-0 z-50 -translate-y-full bg-base-100 p-3 font-semibold focus:translate-y-0" href="#main">Skip to main content</a>
     {% block chrome %}{% endblock %}
     {% block main %}
-      <main id="main" class="admin-plain">
+      <main id="main" class="mx-auto flex min-h-screen max-w-md flex-col justify-center p-6">
         {% include "components/flash.njk" %}
         {% block content %}{% endblock %}
       </main>

package/admin/layouts/settings-page.njk

@@ -1,31 +1,36 @@
 {# What every settings page is: a heading, one form that saves the fields that
-   page carries, and whatever panels sit under it. A page fills in the two
+   page carries, and whatever panels sit under it. A page fills in the three
    blocks, and names in `settingsProblems` each field a save can refuse, so
    the summary at the top links to it; nothing about the chrome is written six
    times. #}
 {% extends "layouts/shell.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/button.njk" import button %}
 
 {% block title %}{{ settingsLabel }} settings{% endblock %}
 
 {% block content %}
-  <h1>{{ settingsLabel }}</h1>
+  <h1 class="mb-6 text-2xl font-bold">{{ settingsLabel }}</h1>
 
   {% if hasProblems %}
-    {% call field.summary('Nothing was saved. Fix the fields marked below and try again.') %}
-      {% block settingsProblems %}{% endblock %}
-    {% endcall %}
+    <div class="mb-6 max-w-2xl">
+      {% call field.summary('Nothing was saved. Fix the fields marked below and try again.') %}
+        {% block settingsProblems %}{% endblock %}
+      {% endcall %}
+    </div>
   {% endif %}
 
-  <form class="admin-settings" method="post" action="{{ settingsUrl }}">
+  <form class="flex max-w-2xl flex-col gap-2" method="post" action="{{ settingsUrl }}">
     <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
 
     {% block settingsFields %}{% endblock %}
 
-    <p class="admin-settings-buttons">
-      <button type="submit">Save settings</button>
-    </p>
+    <div class="mt-4">
+      {{ button('Save settings', type='submit', color='primary') }}
+    </div>
   </form>
 
-  {% block settingsPanels %}{% endblock %}
+  <div class="mt-10 flex max-w-2xl flex-col gap-6">
+    {% block settingsPanels %}{% endblock %}
+  </div>
 {% endblock %}

package/admin/layouts/shell.njk

@@ -1,6 +1,8 @@
-{# The signed-in admin: a bar across the top, the sections down the left, the
-   screen itself in the middle. Every screen behind the login extends this. #}
+{# The signed-in admin: the bar across the top, the sections down the left,
+   the screen itself beside them. Every screen behind the login extends this
+   and fills in `content`, starting with its own <h1>. #}
 {% extends "layouts/base.njk" %}
+{% from "components/menu.njk" import menu %}
 
 {% block chrome %}
   {# View site, because in here you are not looking at it; + New, as on the
@@ -15,34 +17,24 @@
 {% endblock %}
 
 {% block main %}
-  <div class="admin-shell">
-    {# WordPress classic: a section is a heading over its screens. The heading
-       goes to the first of them, the open section shows the rest, and the one
-       you are on carries aria-current. Nothing here is scripted — the server
-       already knows which section is open, so expanding one is a page the
-       browser asks for rather than a class JavaScript toggles. #}
-    <nav class="admin-nav" aria-label="Sections">
-      <ul>
-        {% for item in navigation %}
-          <li class="admin-nav-section{% if item.open %} admin-nav-open{% endif %}">
-            <a class="admin-nav-heading" href="{{ item.url }}">{{ item.label }}</a>
-            {% if item.open %}
-              <ul class="admin-nav-children">
-                {% for entry in item.children %}
-                  <li>
-                    <a href="{{ entry.url }}"{% if entry.current %} aria-current="page"{% endif %}>{{ entry.label }}</a>
-                  </li>
-                {% endfor %}
-              </ul>
-            {% endif %}
-          </li>
-        {% endfor %}
-      </ul>
-    </nav>
-
-    <main id="main" class="admin-main">
-      {% include "components/flash.njk" %}
-      {% block content %}{% endblock %}
-    </main>
+  <div class="drawer lg:drawer-open">
+    {# `autocomplete="off"`: a browser going back restores a checkbox's state
+       otherwise. #}
+    <input id="admin-menu" type="checkbox" class="drawer-toggle" autocomplete="off" />
+    {# Before the screen, so a keyboard meets the menu first; DaisyUI's
+       drawer places both by grid column. #}
+    <div class="drawer-side lg:top-(--geekity-admin-bar-height) lg:h-[calc(100dvh-var(--geekity-admin-bar-height))]">
+      <label for="admin-menu" class="drawer-overlay" aria-hidden="true"></label>
+      <nav aria-label="Sections" class="min-h-full w-64 bg-base-100 pt-(--geekity-admin-bar-height) lg:pt-0">
+        {{ menu(navigation) }}
+      </nav>
+    </div>
+    <div class="drawer-content">
+      <label for="admin-menu" class="btn btn-sm drawer-button mx-4 mt-4 lg:hidden">Menu</label>
+      <main id="main" class="p-4 sm:p-6 lg:p-8">
+        {% include "components/flash.njk" %}
+        {% block content %}{% endblock %}
+      </main>
+    </div>
   </div>
 {% endblock %}

package/admin/pages/account/forgot.njk

@@ -6,42 +6,48 @@
    out which accounts a site has. #}
 {% extends "layouts/base.njk" %}
 {% import "components/fields.njk" as field %}
+{% from "components/button.njk" import button %}
+{% from "components/card.njk" import card %}
 
 {% block title %}Forgotten password{% endblock %}
 
 {% block content %}
-  <h1>Forgotten password</h1>
-
-  {% if not configured %}
-    {# No provider and no credential, so there is nothing to send a link with.
-       Saying so beats a form that quietly does nothing. #}
-    <p>This site cannot send email, so a password cannot be reset from here.</p>
-    <p>
-      Whoever runs the server can add an account from a shell with
-      <code>geekity user add &lt;username&gt;</code>, and sign in with that to
-      change anything else. Turning on a mail provider under
-      <strong>Settings &rarr; Email</strong> makes this page work.
-    </p>
-    <p><a href="{{ loginUrl }}">Back to the login form</a></p>
-  {% elif sent %}
-    <p>{{ answer }}</p>
-    <p><a href="{{ loginUrl }}">Back to the login form</a></p>
-  {% else %}
-    <p>Type your username or your email address, and a link to set a new password is sent to the address on your account.</p>
-
-    {% if error %}
-      {{ field.summary(error) }}
+  {% call card() %}
+    <h1 class="card-title text-2xl">Forgotten password</h1>
+
+    {% if not configured %}
+      {# No provider and no credential, so there is nothing to send a link
+         with. Saying so beats a form that quietly does nothing. #}
+      <p>This site cannot send email, so a password cannot be reset from here.</p>
+      <p>
+        Whoever runs the server can add an account from a shell with
+        <code>geekity user add &lt;username&gt;</code>, and sign in with that to
+        change anything else. Turning on a mail provider under
+        <strong>Settings &rarr; Email</strong> makes this page work.
+      </p>
+      <p><a class="link" href="{{ loginUrl }}">Back to the login form</a></p>
+    {% elif sent %}
+      <p>{{ answer }}</p>
+      <p><a class="link" href="{{ loginUrl }}">Back to the login form</a></p>
+    {% else %}
+      <p>Type your username or your email address, and a link to set a new password is sent to the address on your account.</p>
+
+      {% if error %}
+        {{ field.summary(error) }}
+      {% endif %}
+
+      <form class="flex flex-col gap-2" method="post" action="{{ forgotUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+
+        {{ field.text('identifier', fields.identifier, 'Username or email address',
+             autocomplete='username', required=true, autofocus=true) }}
+
+        <div class="mt-4">
+          {{ button('Send a reset link', type='submit', color='primary', shape='block') }}
+        </div>
+      </form>
+
+      <p class="text-sm"><a class="link" href="{{ loginUrl }}">Back to the login form</a></p>
     {% endif %}
-
-    <form method="post" action="{{ forgotUrl }}">
-      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
-
-      {{ field.text('identifier', fields.identifier, 'Username or email address',
-           autocomplete='username', required=true, autofocus=true) }}
-
-      <button type="submit">Send a reset link</button>
-    </form>
-
-    <p class="admin-hint"><a href="{{ loginUrl }}">Back to the login form</a></p>
-  {% endif %}
+  {% endcall %}
 {% endblock %}