panel-notifications: Account, Server > Settings, Server > Health, help; e2e

The pages of the mockups accepted in 87fa0a4, built from the kit's partials
(written by a Sonnet agent into the working tree, reviewed here):

- Account: "Send me notifications" in the Profile form, saved with the
  profile; an unticked box is off.
- Server > Settings: the instance switch (box 03), and box 04 Notification
  mail with the DKIM and SPF records of the server's own name, drawn with the
  record partial of a domain's DNS page and checked in DNS. Sending rate
  limits are box 02 in the left column. A record that is not in place is
  tagged as a warning, not a failure: notifications are sent without it.
- Server > Health: card 06 Notification mail with the state of each record
  and a link to Settings, beside Configuration (07); part of the polled
  fragment; Re-check DNS forces it too. Overview does not run this check.
- help.go: the Notifications topic and the clauses in Settings and Your
  account, word for word with help.html.

If the server's key cannot be read the pages still render: the DKIM record
is left out and SPF is shown unchecked.

e2e: the administrator gets a mailbox behind the sink and the server's DKIM
record from Settings is published; the level-2 refusal of the next step must
then arrive as a notification from postmaster@mail.e2e.test, signed as that
name with the key Settings shows, and must not be a row of the Outbound log.
The rotation step now waits for Postfix to be running: it follows a step that
restarts the container, and logrotate's `postfix reload` failed in between.

On the test server, for this tree: go vet clean, go test ./... 23 packages
ok, make e2e ok (147 s); the notification reached the sink 28 s after the
refusal.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/view/templates/account.html

@@ -14,6 +14,8 @@
       <div class="field"><label class="label" for="username">Username</label><div class="control has-icons-left"><input class="input" id="username" name="username" value="{{.Username}}" autocomplete="username" autocapitalize="none" spellcheck="false" required><span class="icon is-left"><i class="ti ti-user"></i></span></div></div>
       <div class="field"><label class="label" for="email">E-mail</label><div class="control has-icons-left"><input class="input" id="email" name="email" type="email" value="{{.Email}}" autocomplete="email" autocapitalize="none" spellcheck="false"><span class="icon is-left"><i class="ti ti-mail"></i></span></div>
         <p class="help">Your own address. A domain's report address can be filled with it from Domain settings.</p></div>
+      <div class="field"><label class="checkbox"><input type="checkbox" name="notify"{{if .Notify}} checked{{end}}> Send me notifications</label>
+        <p class="help">To this address, when something needs you: a DNS record of a domain stops matching, a rate limit refuses mail, the TLS certificate is about to expire, a message has waited in the queue for three days. <a href="/help#notifications">What is sent and when</a></p></div>
       <button type="submit" class="button is-primary">Save profile</button>
     </form>
     {{template "body_close"}}

internal/web/view/templates/health.html

@@ -1,17 +1,23 @@
 {{/* Server > Health (mockup health.html): every check behind the cards of
      Overview, and the one action that is not about DNS, Reload configuration. The
-     two rows of tables are the polled part (health_body.html); the head and the
-     Configuration box are static. */}}
+     two rows of tables are the polled part (health_body.html), and so is the
+     Notification mail card (health_mail), which sits in the last row beside the
+     static Configuration box. */}}
 {{define "content"}}
 {{template "page_head" .Head}}
 {{if .Flash}}{{template "flash" .Flash}}{{end}}
 
 {{template "health_body" .}}
 
-{{template "box_open" .Configuration}}
-{{template "body_open"}}
-<p class="mb-3">Regenerates the OpenDKIM and Postfix configuration from the database and reloads both daemons. Use it after editing the files by hand, after restoring a backup, or when the running configuration looks out of step with the domain and application lists. It does not touch the queue or the TLS certificate.</p>
-{{template "action" .Reload}}
-{{template "body_close"}}
-{{template "box_close"}}
+<div class="columns">
+  {{template "health_mail" .}}
+  <div class="column is-6">
+    {{template "box_open" .Configuration}}
+    {{template "body_open"}}
+    <p class="mb-3">Regenerates the OpenDKIM and Postfix configuration from the database and reloads both daemons. Use it after editing the files by hand, after restoring a backup, or when the running configuration looks out of step with the domain and application lists. It does not touch the queue or the TLS certificate.</p>
+    {{template "action" .Reload}}
+    {{template "body_close"}}
+    {{template "box_close"}}
+  </div>
+</div>
 {{end}}

internal/web/view/templates/health_body.html

@@ -2,7 +2,9 @@
      fragment (GET /server/health/fragment) alike. panel.js polls the first row
      (data-poll, outerHTML) and htmx swaps the second into place by its id when
      the fragment marks it out of band (.Refresh) — the two rows are siblings, and
-     a fragment can replace only the element that asked for it. */}}
+     a fragment can replace only the element that asked for it. The Notification
+     mail card is the third thing the fragment swaps in by id: it sits in a row of
+     the page with the static Configuration box, so it is a column of its own. */}}
 {{define "health_body"}}<div class="columns" id="health-machine" data-poll aria-live="polite" hx-get="/server/health/fragment" hx-trigger="load" hx-swap="outerHTML">
   <div class="column is-6">
     {{template "box_open" .Machine}}
@@ -58,4 +60,21 @@
     {{template "body_close"}}
     {{template "box_close"}}
   </div>
+</div>{{if .Refresh}}
+{{template "health_mail" .}}{{end}}{{end}}
+
+{{/* health_mail is the Notification mail card (the page calls it inside its own
+     row; the fragment sends it out of band). */}}
+{{define "health_mail"}}<div class="column is-6" id="health-mail"{{if .Refresh}} hx-swap-oob="true"{{end}}>
+  {{template "box_open" .NotifyMail}}
+  <div class="table-container"><table class="table is-fullwidth">
+    <thead><tr><th>Record</th><th>State</th></tr></thead>
+    <tbody>{{range .NotifyRows}}
+      <tr><td>{{.Name}}<br><span class="sp-muted sp-mono sp-small">{{.Host}}</span></td><td>{{template "tag" .State}}</td></tr>{{end}}
+    </tbody>
+  </table></div>
+  {{template "body_open"}}
+  <p class="sp-muted">{{template "inline" .NotifyNote}}</p>
+  {{template "body_close"}}
+  {{template "box_close"}}
 </div>{{end}}

internal/web/view/templates/settings.html

@@ -1,6 +1,8 @@
 {{/* Server > Settings (mockup settings.html): what holds for the whole instance.
-     One form, one Save button; the rate limits are read-only facts. A user's own
-     name, e-mail, password and DMARC address are on Account (account.html). */}}
+     One form, one Save button; the rate limits are read-only facts, and the
+     records of the server's own name are the ones notifications are signed and
+     authorised with. A user's own name, e-mail, password and DMARC address are on
+     Account (account.html). */}}
 {{define "content"}}
 {{template "page_head" .Head}}
 {{if .Flash}}{{template "flash" .Flash}}{{end}}
@@ -19,15 +21,26 @@
       {{end}}
       {{template "body_close"}}
       {{template "box_close"}}
-    </div>
 
-    <div class="column is-6">
       {{template "box_open" .RateLimits}}
       {{template "body_open"}}
       {{template "facts" .RateFacts}}
       {{template "body_close"}}
       {{template "box_close"}}
     </div>
+
+    <div class="column is-6">
+      {{template "box_open" .Notifications}}
+      {{template "body_open"}}
+      <div class="field"><label class="checkbox"><input type="checkbox" name="notify"{{if .Notify}} checked{{end}}> Send notification e-mails</label>
+        <p class="help">{{template "inline" .NotifyNote}}</p></div>
+      {{template "body_close"}}
+      {{template "box_close"}}
+
+      {{template "box_open" .Mail}}
+      {{range .MailRecords}}{{template "dns_record" .}}
+      {{end}}{{template "box_close"}}
+    </div>
   </div>
   <div class="buttons"><button type="submit" class="button is-primary">Save settings</button></div>
 </form>