@geekity/cms 0.3.0 → 0.4.0

package/admin/pages/media/library.njk

@@ -0,0 +1,160 @@
+{# /admin/media: everything under content/uploads, what links to it, and the
+   two things that can be done to it. The directory is walked on every request,
+   so a file copied in by hand is here without a restart.
+
+   Everything works with JavaScript switched off. The URL and the Markdown are
+   readonly fields, which select and copy like any other text; copy.js adds a
+   button beside each of them and nothing else. #}
+{% extends "layouts/shell.njk" %}
+
+{% block title %}{{ heading }}{% endblock %}
+
+{% block content %}
+  <h1>{{ heading }}</h1>
+
+  {% if confirm %}
+    <form class="admin-settings" method="post" action="{{ deleteUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      <input type="hidden" name="{{ fields.path }}" value="{{ confirm.path }}" />
+      <input type="hidden" name="{{ fields.confirm }}" value="1" />
+
+      <h2>Delete {{ confirm.url }}?</h2>
+
+      <p>
+        {{ confirm.references.length }}
+        {% if confirm.references.length == 1 %}document still points{% else %}documents still point{% endif %}
+        at it. Deleting the file does not change them, so they will point at nothing.
+      </p>
+
+      <ul class="admin-references">
+        {% for reference in confirm.references %}
+          <li>
+            <a href="{{ reference.editUrl }}">{{ reference.title }}</a>
+            {% if reference.trashed %}<span class="admin-status admin-status-trashed">Trash</span>{% endif %}
+            <code>{{ reference.path }}</code>
+          </li>
+        {% endfor %}
+      </ul>
+
+      <p class="admin-settings-buttons">
+        <button type="submit">Delete it anyway</button>
+        <a href="{{ listUrl }}">Cancel</a>
+      </p>
+    </form>
+  {% endif %}
+
+  <form class="admin-settings admin-media-upload" method="post" action="{{ uploadUrl }}" enctype="multipart/form-data">
+    <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+    <label for="media-file">Add a file</label>
+    <input id="media-file" name="{{ fields.file }}" type="file" accept="{{ accepts }}" required />
+    <p class="admin-hint">
+      This site accepts {{ accepts | replace(',', ', ') }}, up to {{ maxBytes }} bytes. The same
+      rules the editor’s upload control enforces.
+    </p>
+    <p class="admin-settings-buttons">
+      <button type="submit">Upload</button>
+    </p>
+  </form>
+
+  {% if total == 0 %}
+    <p class="admin-empty">Nothing has been uploaded yet.</p>
+  {% else %}
+    <table class="admin-list admin-media">
+      <thead>
+        <tr>
+          <th scope="col">File</th>
+          <th scope="col">Uploaded</th>
+          <th scope="col">Size</th>
+          <th scope="col">Link</th>
+          <th scope="col">Used by</th>
+          <th scope="col">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for file in files %}
+          <tr>
+            <td class="admin-media-file">
+              {% if file.image %}
+                <a href="{{ file.url }}">
+                  <img class="admin-media-thumbnail" src="{{ file.url }}" alt="" width="60" height="60" />
+                </a>
+              {% else %}
+                <span class="admin-media-icon" aria-hidden="true">{{ file.extension | replace('.', '') | upper }}</span>
+              {% endif %}
+              <a href="{{ file.url }}">{{ file.path }}</a>
+            </td>
+            <td>{{ file.modified | date('html') }}</td>
+            <td>{{ file.bytes }}</td>
+            <td class="admin-media-links">
+              <label class="admin-visually-hidden" for="media-url-{{ loop.index }}">
+                URL of {{ file.name }}
+              </label>
+              <span class="admin-copy">
+                <input id="media-url-{{ loop.index }}" type="text" value="{{ file.url }}" readonly />
+                <button type="button" class="admin-copy-button" data-copy="media-url-{{ loop.index }}" hidden>
+                  Copy
+                </button>
+              </span>
+
+              <label class="admin-visually-hidden" for="media-markdown-{{ loop.index }}">
+                Markdown for {{ file.name }}
+              </label>
+              <span class="admin-copy">
+                <input id="media-markdown-{{ loop.index }}" type="text" value="{{ file.markdown }}" readonly />
+                <button type="button" class="admin-copy-button" data-copy="media-markdown-{{ loop.index }}" hidden>
+                  Copy
+                </button>
+              </span>
+            </td>
+            <td>
+              {% if file.references.length %}
+                <ul class="admin-references">
+                  {% for reference in file.references %}
+                    <li>
+                      <a href="{{ reference.editUrl }}">{{ reference.title }}</a>
+                      {% if reference.trashed %}
+                        <span class="admin-status admin-status-trashed">Trash</span>
+                      {% endif %}
+                    </li>
+                  {% endfor %}
+                </ul>
+              {% else %}
+                <span class="admin-status">Nothing</span>
+              {% endif %}
+            </td>
+            <td class="admin-actions">
+              <form method="post" action="{{ deleteUrl }}">
+                <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+                <input type="hidden" name="{{ fields.path }}" value="{{ file.path }}" />
+                <button type="submit">Delete</button>
+              </form>
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+
+    {% if previousUrl or nextUrl %}
+      <nav class="admin-pagination" aria-label="Pages">
+        {% if previousUrl %}
+          <a rel="prev" href="{{ previousUrl }}">Newer</a>
+        {% endif %}
+        <span>Page {{ page }} of {{ pages }}</span>
+        {% if nextUrl %}
+          <a rel="next" href="{{ nextUrl }}">Older</a>
+        {% endif %}
+      </nav>
+    {% endif %}
+
+    <p class="admin-hint">
+      The list is the <code>content/uploads</code> directory itself, read afresh on every request,
+      so a file copied in by hand is here without a restart. Deleting one removes the file and
+      whatever was derived from it; it does not touch the documents that link to it, which is why
+      a file something still points at asks first.
+    </p>
+  {% endif %}
+
+  {# The one enhancement on this screen. The fields above are readonly inputs
+     and already copy by hand; this adds a button beside each of them. #}
+  <script defer src="{{ assetPrefix }}copy.js"></script>
+{% endblock %}

package/admin/pages/messages/all.njk

@@ -0,0 +1,110 @@
+{# /admin/messages: what the contact form left behind (TASK-56).
+
+   A message is a file under data/contact/ and nothing else, so the two buttons
+   here are a rewrite and an unlink. Every button is a form of its own, so the
+   whole screen works with JavaScript switched off. #}
+{% extends "layouts/shell.njk" %}
+
+{% block title %}{{ heading }}{% endblock %}
+
+{% block content %}
+  <h1>{{ heading }}</h1>
+
+  <nav class="admin-filters" aria-label="Message status">
+    <ul>
+      {% for tab in tabs %}
+        <li>
+          <a href="{{ tab.url }}"{% if tab.current %} aria-current="page"{% endif %}>
+            {{ tab.label }} ({{ tab.count }})
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+
+  {% if rows.length == 0 %}
+    <p class="admin-empty">Nothing here.</p>
+  {% else %}
+    <ul class="admin-comments">
+      {% for row in rows %}
+        <li class="admin-comment{% if not row.read %} admin-comment-unread{% endif %}">
+          <div class="admin-comment-meta">
+            <span class="admin-comment-author">{{ row.author }}</span>
+            <a class="admin-comment-email" href="mailto:{{ row.email }}">{{ row.email }}</a>
+            {% if not row.read %}
+              <span class="admin-status admin-status-pending">unread</span>
+            {% endif %}
+            {% if row.status == 'spam' %}
+              <span class="admin-status admin-status-spam">spam</span>
+            {% endif %}
+          </div>
+
+          <p class="admin-comment-where">
+            <time>{{ row.received }}</time>
+            from
+            {% if row.pageUrl %}
+              <a href="{{ row.pageUrl }}">{{ row.page }}</a>
+            {% else %}
+              {{ row.page }}
+            {% endif %}
+            {% if row.address %}
+              &middot; <code title="A salted hash of the address it came from">{{ row.address }}</code>
+            {% endif %}
+          </p>
+
+          {% if row.subject %}
+            <p class="admin-message-subject"><strong>{{ row.subject }}</strong></p>
+          {% endif %}
+
+          {# Printed, never rendered: a contact message is plain text, and
+             nothing a stranger typed is turned into markup here. #}
+          <div class="admin-comment-body admin-message-body">{{ row.message }}</div>
+
+          <div class="admin-actions">
+            <a class="admin-button admin-button-quiet" href="{{ row.replyUrl }}">Reply</a>
+
+            <form method="post" action="{{ readUrl }}">
+              <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+              <input type="hidden" name="{{ fields.id }}" value="{{ row.id }}" />
+              <input type="hidden" name="{{ fields.status }}" value="{{ status }}" />
+              {% if row.read %}
+                <button type="submit" name="{{ fields.read }}" value="">Mark unread</button>
+              {% else %}
+                <button type="submit" name="{{ fields.read }}" value="1">Mark read</button>
+              {% endif %}
+            </form>
+
+            <form method="post" action="{{ deleteUrl }}">
+              <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+              <input type="hidden" name="{{ fields.id }}" value="{{ row.id }}" />
+              <input type="hidden" name="{{ fields.status }}" value="{{ status }}" />
+              <button type="submit">Delete</button>
+            </form>
+          </div>
+        </li>
+      {% endfor %}
+    </ul>
+
+    {% if previousUrl or nextUrl %}
+      <nav class="admin-pagination" aria-label="Pages">
+        {% if previousUrl %}
+          <a rel="prev" href="{{ previousUrl }}">Newer</a>
+        {% endif %}
+        <span>Page {{ page }} of {{ pages }}</span>
+        {% if nextUrl %}
+          <a rel="next" href="{{ nextUrl }}">Older</a>
+        {% endif %}
+      </nav>
+    {% endif %}
+  {% endif %}
+
+  <p class="admin-hint">
+    A page carrying <code>contact: true</code> in its front matter offers a contact form, and every
+    message it takes is one JSON file under <code>data/contact/</code> &mdash; written before
+    anything is emailed, so a message survives a mail outage and a site with no mail configured
+    still collects them. They are under <code>data/</code> rather than <code>content/</code>
+    because they carry somebody&rsquo;s address and were never meant to be published. Where a
+    message is sent is the contact address on the Settings screen; deleting one here deletes its
+    file.
+  </p>
+{% endblock %}

package/admin/{layouts → pages}/placeholder.njk

@@ -4,7 +4,11 @@
 
 {% block content %}
   {# A screen a later task builds. It exists so the navigation goes somewhere
-     and the guard covers it from the start. #}
+     and the guard covers it from the start.
+
+     It sits at the top of `pages/` rather than inside one of the section
+     folders because it is not any one section's screen: it stands in for
+     whichever section has nothing built yet, and the route heads it. #}
   <h1>{{ heading }}{% if slug %}: {{ slug }}{% endif %}</h1>
   <p class="admin-note">This screen is not built yet.</p>
 {% endblock %}

package/admin/pages/settings/discussion.njk

@@ -0,0 +1,99 @@
+{# /admin/settings/discussion: comments, webmentions, and what checks them. #}
+{% extends "layouts/settings-page.njk" %}
+{% import "components/fields.njk" as field %}
+
+{% block settingsFields %}
+  <h2>Comments</h2>
+
+  {% set commentsHint %}
+    Clear this and no post shows a comment form and every submission is
+    refused. Fediverse replies keep arriving and keep being shown either way:
+    a remote server sends those, and nothing here can stop it.
+  {% endset %}
+  {{ field.checkbox('settings-comments', fields.comments, 'Take comments on this site',
+       checked=form.comments, hint=commentsHint) }}
+
+  {% set closeHint %}
+    Days after a post's date that it stops taking comments; <code>0</code>
+    never closes one. A post overrides this for itself with
+    <code>comments: true</code> or <code>comments: false</code>, which the
+    editor offers as a field. Pages are closed unless they say otherwise.
+  {% endset %}
+  {{ field.text('settings-comments-close', fields.commentsCloseAfterDays, 'Close comments after',
+       form.commentsCloseAfterDays, type='number', min='0', step='1',
+       error=problems.commentsCloseAfterDays, hint=closeHint) }}
+
+  <h2>Webmentions</h2>
+
+  {% set sendHint %}
+    When a post is published or edited, every external page it links to is
+    asked whether it takes webmentions and told about the post if it does.
+    The Resend button on the federation screen sends them again.
+  {% endset %}
+  {{ field.checkbox('settings-webmentions-send', fields.webmentionsSend,
+       'Tell the pages a post links to', checked=form.webmentionsSend, hint=sendHint) }}
+
+  {% set receiveHint %}
+    Every post advertises an endpoint, and a page that links to one and says
+    so lands in the comment queue like a comment. Clear this and the endpoint
+    is gone from the pages and answers nothing; what has already arrived
+    stays where it is.
+  {% endset %}
+  {{ field.checkbox('settings-webmentions-receive', fields.webmentionsReceive,
+       'Accept webmentions sent here', checked=form.webmentionsReceive, hint=receiveHint) }}
+{% endblock %}
+
+{% block settingsPanels %}
+  {# Akismet is its own pair of forms for the reason the avatar is: the key is
+     a credential in data/akismet.json rather than a setting in site.json, and
+     a key Akismet will not take must not lose an edit to the fields above. #}
+  <section class="admin-settings admin-akismet-panel">
+    <h2>Spam checking</h2>
+
+    <p class="admin-akismet-state admin-akismet-{{ akismetState }}">
+      {% if akismetState == 'valid' %}
+        <strong>Connected</strong> &mdash; key {{ akismetKeyHint }}, checked {{ akismetCheckedAt }}.
+      {% elif akismetState == 'invalid' %}
+        <strong>Akismet does not recognise this key</strong> &mdash; key {{ akismetKeyHint }}, checked {{ akismetCheckedAt }}.
+      {% elif akismetState == 'unchecked' %}
+        <strong>Akismet could not be reached</strong> to check key {{ akismetKeyHint }}.
+      {% else %}
+        <strong>Not connected</strong> &mdash; this site has no key.
+      {% endif %}
+    </p>
+    <p class="admin-hint">{{ akismetHint }}</p>
+
+    <form method="post" action="{{ akismetUrl }}">
+      <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+      {% if akismetPresent %}
+        {% set akismetPlaceholder = 'Replace the stored key' %}
+      {% else %}
+        {% set akismetPlaceholder = 'Paste your key' %}
+      {% endif %}
+      {{ field.password('settings-akismet-key', akismetFields.key, 'Akismet API key',
+           autocomplete='off', spellcheck='false', placeholder=akismetPlaceholder) }}
+      <p class="admin-settings-buttons">
+        <button type="submit">{% if akismetPresent %}Replace key{% else %}Save key{% endif %}</button>
+      </p>
+    </form>
+
+    {% if akismetPresent %}
+      <form method="post" action="{{ akismetUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="{{ akismetFields.action }}" value="{{ akismetRemove }}" />
+        <p class="admin-settings-buttons">
+          <button type="submit">Remove key</button>
+        </p>
+      </form>
+    {% endif %}
+
+    <p class="admin-hint">
+      A key from <a href="https://akismet.com/">akismet.com</a> turns on spam
+      checking for native comments and incoming webmentions. It is checked with
+      Akismet when it is saved and kept in <code>data/akismet.json</code>, never
+      in <code>site.json</code> and never on the public site. Marking something
+      spam or not spam on the Comments screen tells Akismet, which is the only
+      way it learns. Fediverse replies are never sent to it.
+    </p>
+  </section>
+{% endblock %}

package/admin/pages/settings/email.njk

@@ -0,0 +1,203 @@
+{# /admin/settings/email: how the site sends mail, and where a message written
+   to it goes. #}
+{% extends "layouts/settings-page.njk" %}
+{% import "components/fields.njk" as field %}
+
+{% block settingsFields %}
+  {% set providerHint %}
+    The key or password each one needs is a credential and is saved below,
+    in <code>data/mail.json</code> rather than in <code>site.json</code>.
+  {% endset %}
+  {% call field.select('settings-mail-provider', fields.mailProvider, 'Provider',
+       error=problems.mailProvider, hint=providerHint) %}
+    {% for provider in mailProviders %}
+      <option value="{{ provider }}"{% if form.mailProvider == provider %} selected{% endif %}>
+        {% if provider == 'none' %}None &mdash; this site sends no email{% elif provider == 'brevo' %}Brevo (transactional API){% else %}SMTP{% endif %}
+      </option>
+    {% endfor %}
+  {% endcall %}
+
+  {{ field.text('settings-mail-from-name', fields.mailFromName, 'From name', form.mailFromName,
+       hint='The name on the From line. Empty uses the site title.') }}
+
+  {% set fromAddressHint %}
+    Providers only send from an address they have verified, so this should be
+    one you own. Empty falls back to <code>no-reply@</code> at the site's host.
+  {% endset %}
+  {{ field.text('settings-mail-from-address', fields.mailFromAddress, 'From address',
+       form.mailFromAddress, error=problems.mailFromAddress, hint=fromAddressHint,
+       inputmode='email') }}
+
+  {{ field.text('settings-mail-reply-to', fields.mailReplyTo, 'Reply-to', form.mailReplyTo,
+       error=problems.mailReplyTo, inputmode='email',
+       hint='Where a reply goes. Empty replies to the From address.') }}
+
+  {% set contactHint %}
+    Where a message from a page&rsquo;s contact form is sent, with reply-to set to whoever
+    wrote it. Empty writes to the first admin with an email address. It is read when a
+    message arrives and never appears on the public site.
+  {% endset %}
+  {{ field.text('settings-contact-email', fields.contactEmail, 'Contact address',
+       form.contactEmail, error=problems.contactEmail, hint=contactHint, inputmode='email') }}
+{% endblock %}
+
+{% block settingsPanels %}
+  {# The mail credential is its own pair of forms for the reason the Akismet
+     key is: an API key and an SMTP password belong in data/mail.json, not in
+     the public site.json, and a mistyped one must not lose an edit to the
+     From line. #}
+  <section class="admin-settings admin-mail-panel">
+    <h2>Mail credentials</h2>
+
+    <p class="admin-mail-state admin-mail-{{ mailProvider }}">
+      {% if mailConfigured %}
+        <strong>Configured</strong> &mdash; sending through {{ mailProvider }}.
+      {% elif mailProvider == 'none' %}
+        <strong>Not sending</strong> &mdash; no provider is chosen.
+      {% else %}
+        <strong>Not configured</strong> &mdash; {{ mailProvider }} is chosen but has no credential.
+      {% endif %}
+    </p>
+    <p class="admin-hint">{{ mailHint }}</p>
+
+    {# One provider's boxes, never both. A site sending through Brevo has no
+       use for an SMTP port and a site sending through SMTP has none for an API
+       key, and seven boxes where one is wanted is how a screen teaches people
+       to stop reading it.
+
+       The provider branched on is the saved one, from `site.json`, not
+       whatever the select above happens to be showing: that select belongs to
+       the settings form and nothing it shows is true until Save settings is
+       pressed. Saying so is the paragraph below — without it, somebody who
+       picks SMTP, looks straight down for a Host box and finds an API key
+       would reasonably call this broken. Doing it the other way round would
+       take JavaScript, and no other admin screen needs any. #}
+    {% if mailProvider == 'none' %}
+      <p class="admin-hint">
+        No provider is <em>saved</em>, so there is no credential to give and no
+        box here to give it in. Choose one under <strong>Provider</strong> above
+        and press <strong>Save settings</strong> &mdash; picking it in the select
+        alone changes nothing &mdash; and the boxes it needs appear here.
+      </p>
+    {% else %}
+      <p class="admin-hint">
+        These are the boxes
+        <strong>{% if mailProvider == 'brevo' %}Brevo{% else %}SMTP{% endif %}</strong>
+        needs, and they follow the provider this site has <em>saved</em> &mdash; not
+        the one the select above is showing. Change <strong>Provider</strong> and
+        press <strong>Save settings</strong> first, and the boxes here change with it.
+      </p>
+
+      <form method="post" action="{{ mailUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+
+        {% if mailProvider == 'brevo' %}
+          <h3>Brevo</h3>
+          {% if mailBrevoPresent %}
+            <p class="admin-hint">A key is stored, ending {{ mailBrevoKeyHint }}.</p>
+            {% set brevoPlaceholder = 'Leave blank to keep the stored key' %}
+          {% else %}
+            {% set brevoPlaceholder = 'Paste your key' %}
+          {% endif %}
+          {{ field.password('settings-mail-brevo-key', mailFields.brevoApiKey, 'API key',
+               autocomplete='off', spellcheck='false', placeholder=brevoPlaceholder) }}
+        {% else %}
+          <h3>SMTP</h3>
+          {{ field.text('settings-mail-smtp-host', mailFields.smtpHost, 'Host', mailSmtp.host,
+               autocomplete='off') }}
+
+          {{ field.text('settings-mail-smtp-port', mailFields.smtpPort, 'Port',
+               mailSmtp.port if mailSmtp else 587, inputmode='numeric') }}
+
+          {# Its own box with the sentence beside it, like every other switch in
+             the admin. It used to be a label wrapped round the tick in a class the
+             stylesheet has never heard of, so it was the one switch here that
+             rendered unstyled. #}
+          {{ field.checkbox('settings-mail-smtp-secure', mailFields.smtpSecure,
+               'TLS from the first byte (port 465)', checked=mailSmtp.secure,
+               hint='Leave this off for port 587, which upgrades with STARTTLS.') }}
+
+          {{ field.text('settings-mail-smtp-user', mailFields.smtpUser, 'Username', mailSmtp.user,
+               autocomplete='off') }}
+
+          {% if mailSmtp.hasPassword %}
+            {% set smtpPlaceholder = 'Leave blank to keep the stored password' %}
+          {% else %}
+            {% set smtpPlaceholder = 'The SMTP password' %}
+          {% endif %}
+          {{ field.password('settings-mail-smtp-password', mailFields.smtpPassword, 'Password',
+               autocomplete='off', spellcheck='false', placeholder=smtpPlaceholder) }}
+        {% endif %}
+
+        <p class="admin-settings-buttons">
+          <button type="submit">Save credentials</button>
+        </p>
+      </form>
+    {% endif %}
+
+    {# A credential kept for a provider that is not the chosen one. Its boxes
+       are gone but the secret is still on disk, and this panel is the only
+       place in the admin that says so, so it is reported in words instead.
+       Hiding a stored API key would be the screen lying about what the site
+       holds. #}
+    {% set brevoStoredElsewhere = mailBrevoPresent and mailProvider != 'brevo' %}
+    {% set smtpStoredElsewhere = mailSmtpPresent and mailProvider != 'smtp' %}
+    {% if brevoStoredElsewhere or smtpStoredElsewhere %}
+      <h3>Also stored</h3>
+
+      {% if brevoStoredElsewhere %}
+        <p class="admin-field-static">
+          A <strong>Brevo</strong> API key, ending {{ mailBrevoKeyHint }}.
+        </p>
+      {% endif %}
+      {% if smtpStoredElsewhere %}
+        <p class="admin-field-static">
+          An <strong>SMTP</strong> server:
+          {% if mailSmtp.user %}{{ mailSmtp.user }} at {% endif %}{{ mailSmtp.host }}
+          port {{ mailSmtp.port }}{% if mailSmtp.hasPassword %}, with a password{% endif %}.
+        </p>
+      {% endif %}
+
+      <p class="admin-hint">
+        Kept in <code>data/mail.json</code> and used by nothing while
+        {% if mailProvider == 'none' %}no provider is chosen{% else %}{% if mailProvider == 'brevo' %}Brevo{% else %}SMTP{% endif %} is the chosen provider{% endif %}.
+        Choose that provider above to edit it, or press
+        <strong>Remove credentials</strong> to forget every credential this site
+        holds, this one included.
+      </p>
+    {% endif %}
+
+    {% if mailBrevoPresent or mailSmtpPresent %}
+      <form method="post" action="{{ mailUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        <input type="hidden" name="{{ mailFields.action }}" value="{{ mailRemove }}" />
+        <p class="admin-settings-buttons">
+          <button type="submit">Remove credentials</button>
+        </p>
+      </form>
+    {% endif %}
+
+    {# Only where there is something to send with, the way the notice switches
+       on a user's page are drawn only where there is both a provider and an
+       address (TASK-97). A Send test email button on a site with no credential
+       can do one thing, which is say it did nothing. #}
+    {% if mailConfigured %}
+      <form method="post" action="{{ mailTestUrl }}">
+        <input type="hidden" name="csrf_token" value="{{ csrfToken }}" />
+        {{ field.text('settings-mail-test-to', mailTestFields.to, 'Send a test message to', '',
+             inputmode='email', placeholder='you@example.com') }}
+        <p class="admin-settings-buttons">
+          <button type="submit">Send test email</button>
+        </p>
+      </form>
+    {% endif %}
+
+    <p class="admin-hint">
+      Neither the API key nor the SMTP password is ever printed back into this
+      page. Both are kept in <code>data/mail.json</code> at mode
+      <code>0600</code>, beside the password hashes and the actor's private
+      keys, and never in <code>site.json</code>, which is public and in git.
+      Leaving a secret blank keeps the one already stored.
+    </p>
+  </section>
+{% endblock %}

package/admin/pages/settings/federation.njk

@@ -0,0 +1,75 @@
+{# /admin/settings/federation: which relays boost the site, and whether it is
+   still answering the paths a WordPress site arrived with. Who the site's
+   people are on the fediverse is a user's profile now (decision-14); the
+   Federation section in the menu is where the actors and their followers are. #}
+{% extends "layouts/settings-page.njk" %}
+{% import "components/fields.njk" as field %}
+
+{% block settingsFields %}
+  {% set relaysHint %}
+    One relay inbox per line, such as
+    <code>https://tags.pub/user/_____relay_____/inbox</code>. Adding one sends
+    it a follow; every public post then goes to it as well as to the
+    followers, and it boosts them on to instances nobody here follows. The
+    Federation screen says where each subscription stands.
+  {% endset %}
+  {{ field.textarea('settings-relays', fields.relays, 'Relays', form.relays,
+       error=problems.relays, hint=relaysHint, rows='3', spellcheck='false', autofocus=true) }}
+
+  <h2>WordPress</h2>
+
+  {% set wordpressHint %}
+    Answer the inbox and collection paths the WordPress ActivityPub plugin
+    published, under <code>/wp-json/activitypub/1.0/</code>, for the users
+    carrying its numeric actor id. Only a site that moved here from that plugin
+    needs this: a follower's server keeps delivering to the inbox URL it cached
+    until it next refetches the actor, and this is what catches those
+    deliveries in the meantime.
+  {% endset %}
+  {{ field.checkbox('settings-wordpress-activitypub', fields.wordpressActivityPub,
+       'WordPress ActivityPub compatibility', checked=form.wordpressActivityPub,
+       hint=wordpressHint) }}
+{% endblock %}
+
+{% block settingsPanels %}
+  {# When each compatibility path was last asked for. It is the whole reason
+     the instants are recorded: once every follower's server has refetched the
+     actor, nothing asks any more and the switch can go off. #}
+  <section class="admin-settings admin-wordpress-panel">
+    <h2>WordPress paths</h2>
+
+    {% if wordpressRoutes.length %}
+      <table class="admin-table">
+        <thead>
+          <tr><th scope="col">Path</th><th scope="col">For</th><th scope="col">Last asked for</th></tr>
+        </thead>
+        <tbody>
+          {% for route in wordpressRoutes %}
+            <tr>
+              <td><code>{{ route.path }}</code></td>
+              <td>{{ route.username or 'every user' }}</td>
+              <td>
+                {% if route.lastRequestedAt %}
+                  {{ route.lastRequestedAt | date('readable') }}
+                {% else %}
+                  Never
+                {% endif %}
+              </td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+      <p class="admin-hint">
+        Once every one of these has been quiet for long enough that every
+        follower's server has refetched the actor, turn the switch off: these
+        paths are a cache other servers hold, not this site's identity, and the
+        CMS carries them only until the caches have moved on.
+      </p>
+    {% else %}
+      <p class="admin-hint">
+        No user carries a WordPress actor id, so the switch would serve nothing.
+        The <code>geekity import wordpress-actor</code> command sets one.
+      </p>
+    {% endif %}
+  </section>
+{% endblock %}