Files
selfpost/internal/web/view/templates/kit.html
T
mixandClaude Opus 5.5 96db0b7a86 panel-redesign: three choices for a domain's report address; row actions
Follows the design and guard commits before it. Written by Sonnet,
reviewed by Opus.

The report address
  - Baseline: users.dmarc_default_mode, users.dmarc_default_address and
    domains.dmarc_rua_user_id are gone. domains.dmarc_rua alone says
    where reports go: '' is no reports (a new domain), the address
    SelfPost derives for the domain is the hosted choice (while hosted
    reports are on), anything else is a typed address.
  - Removed: the user default and its store functions, a domain
    following a user, keep / inherit, followCreator, POST /account/dmarc
    with its handler, the DMARC box of Account, the user-delete item
    about domains losing their address.
  - Domain settings offers the three choices; beside the typed address a
    "Use my e-mail" button fills in the profile e-mail (panel.js: one
    generic data-fill hook; absent without a profile e-mail; it fills,
    it does not save).
  - The DMARC record's note names the address and no user. This closes
    L4 of the security review.
  - Domain export / import carries the address as a plain string.
  - The ingest allow-list is the generic mailbox plus each domain's
    address on this host; the generic mailbox is always open now.
  - dev/migrate1x (not in the tree): a 1.x domain that inherited the
    instance default gets that address as its own, so no published rua=
    changes.

Row actions
  - row_action partial (RowAction: Label, Post, Confirm, Danger);
    panel.css has the mockup's three rules. A row of the Applications
    table is Edit, New password, Delete; the confirmation texts are the
    ones the application page's head uses. Both roles, with the checks
    of the application page.

Tests cover: a new domain has no reports; each choice saved and shown
selected; hosted refused when hosted reports are off; a bad address
refused with what was typed kept; an untouched save changes nothing in
each state; the fill button with and without a profile e-mail; deleting
a user leaves every domain's address; the row's forms, targets and
confirmations for both roles and a 404 for a stranger.

Known: if hosted reports are switched off later, a stored hosted address
reads as a typed one. docs/guide.md still describes the old choices -
the documentation step.

Evidence
  - docs/assets/panel-redesign/evidence/account.png,
    out-domain-settings.png, out-domain.png, user-delete.png, help.png:
    1440 px wide, headless Edge, real templates served locally with
    their fixtures - NOT from the container.
  - panel/audit.js on out-domain, out-domain-settings, account, help,
    components and user-delete at 1440 and 1280: 1420 texts checked,
    problems: [].
  - In a browser: the fill button sets the field and does not submit;
    the row buttons have the font, size and colour of the Edit link,
    Delete the red of the other delete links; data-confirm fires on
    both. Hover and focus states were not observed.
  - go test -count=1 ./internal/web/... ./internal/store/...
    ./internal/dmarc/... ./internal/app/... ./internal/inbound/...
    ./cmd/panel: ok (ten packages; dev/migrate1x also ok).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-10 12:38:35 +03:00

154 lines
6.4 KiB
HTML

{{/* The kit page (GET /server/components): every partial of components.html in
every state, filled from kit.go — the mockup components page rebuilt with
the real templates. Like any page it is thin: partial calls with structs,
Bulma layout classes, and the page utilities; the markup of a component is
written in components.html and nowhere else. */}}
{{define "content"}}
{{template "page_head" .Head}}
{{template "flash" .Flash}}
{{template "flash" .FlashError}}
{{template "box_open" .Layouts}}
{{template "body_open"}}
{{template "facts" .LayoutFacts}}
{{template "body_close"}}
{{template "box_close"}}
<div class="columns">
<div class="column is-6">
{{template "box_open" .Postmark}}
{{template "body_open"}}
<div class="buttons">{{range .Postmarks}}
{{template "postmark" .}}{{end}}
</div>
<p class="sp-muted">Only inside page_head, at most one per page, and only where the page has a verdict to give.</p>
{{template "body_close"}}
{{template "box_close"}}
{{template "box_open" .StatusTag}}
<div class="table-container"><table class="table is-fullwidth">
<thead><tr><th>Status</th><th>Tag</th><th>Bulma classes</th></tr></thead>
<tbody>{{range .StatusRows}}
<tr><td>{{.Words}}</td><td>{{template "tag" .Tag}}</td><td class="sp-mono sp-small">{{status_tag .Tag.Status}}</td></tr>{{end}}
</tbody>
</table></div>
{{template "box_close"}}
</div>
<div class="column is-6">
{{template "box_open" .BoxHead}}
{{template "body_open"}}
<p class="mb-2">The <i class="ti ti-help-circle"></i> after the end slot is <code>sp-help</code>: an optional link to the section's topic on the Help page. It replaces today's help drawer.</p>
<p>box_body — padded content. A <code>table</code> or a run of <code>sp-record</code> blocks sits directly in the box, without box_body.</p>
{{template "body_close"}}
{{template "box_foot" .BoxFoot}}
{{template "box_close"}}
{{template "box_open" .DangerZone}}
{{template "body_open"}}
<p>For destructive confirmations and the "delete" entry of a settings page. The number may be an icon when the box is not part of a sequence.</p>
{{template "body_close"}}
{{template "box_close"}}
{{template "box_open" .Credential}}
{{template "body_open"}}
<p>Only for a secret the panel will never show again.</p>
{{template "body_close"}}
{{template "box_close"}}
</div>
</div>
{{template "box_open" .HealthCard}}
{{template "health_cards" .HealthCards}}
{{template "box_close"}}
<div class="columns">
<div class="column is-7">
{{template "box_open" .DNSRecord}}
{{range .Records}}{{template "dns_record" .}}
{{end}}{{template "box_close"}}
{{template "box_open" .Tables}}
<div class="table-container"><table class="table is-fullwidth is-hoverable">
<thead><tr><th>Time, UTC</th><th>Name</th><th>sp-clip</th><th>Status</th><th></th></tr></thead>
<tbody>
<tr><td class="sp-mono sp-muted sp-nowrap sp-small">09-21 14:01:52</td><td><a href="#"><strong>the row's link</strong></a></td><td class="sp-clip">A long subject is clipped with an ellipsis instead of wrapping the row</td><td><span class="{{status_tag "sent"}}">sent</span></td><td class="sp-actions"><a href="#">Details</a>{{template "row_action" .RowAction}}</td></tr>
</tbody>
</table></div>
{{template "box_foot" .TablesFoot}}
{{template "box_close"}}
{{template "box_open" .LogPane}}
{{template "log_pane" .LogLines}}
{{template "box_close"}}
</div>
<div class="column is-5">
{{template "box_open" .Facts}}
{{template "body_open"}}
{{template "facts" .FactList}}
{{template "body_close"}}
{{template "box_close"}}
{{template "box_open" .Timeline}}
{{template "body_open"}}
{{template "timeline" .Steps}}
{{template "body_close"}}
{{template "box_close"}}
{{template "box_open" .EmptyState}}
{{template "empty_state" .Empty}}
{{template "box_close"}}
{{template "box_open" .ConfirmList}}
{{template "body_open"}}
{{template "confirm_list" .Confirm}}
{{template "body_close"}}
{{template "box_close"}}
</div>
</div>
<div class="columns">
<div class="column is-3">
{{template "side_menu" .SideMenu}}
</div>
<div class="column is-9">
{{template "box_open" .FormRows}}
{{template "body_open"}}
<div class="sp-form">
<div class="sp-row">
<div class="field"><label class="label">sp-row — a wide field</label><div class="control"><input class="input" value="host"></div></div>
<div class="field"><label class="label">and a short one</label><div class="control"><input class="input" value="25"></div></div>
</div>
<div class="sp-pair">
<div class="field"><label class="label">sp-pair — two equal fields</label><div class="control"><input class="input" type="password"></div></div>
<div class="field"><label class="label">Repeat</label><div class="control"><input class="input" type="password"></div><p class="help">Help text lives in Bulma's <code>help</code>.</p></div>
</div>
</div>
{{template "route" .Route}}
{{template "body_close"}}
{{template "help_topic" .HelpTopic}}
{{template "box_close"}}
</div>
</div>
{{template "box_open" .Shell}}
{{template "body_open"}}
{{template "facts" .ShellFacts}}
{{template "body_close"}}
{{template "box_close"}}
{{template "box_open" .TypeScale}}
<div class="table-container"><table class="table is-fullwidth">
<thead><tr><th>Size</th><th>Looks like</th><th>Used for</th></tr></thead>
<tbody>
<tr><td class="sp-mono sp-small">body · 16px</td><td>The quick brown fox, 203.0.113.25</td><td class="sp-muted">Text, table cells, inputs, selects, buttons, menus and their dropdowns</td></tr>
<tr><td class="sp-mono sp-small">--sp-fs-s · 14px</td><td class="sp-small">The quick brown fox, <span class="sp-mono">203.0.113.25</span></td><td class="sp-muted">Supporting text: labels, <code>help</code>, notes in a box head or foot, mono values (<code>sp-small</code>), logs, the footer</td></tr>
<tr><td class="sp-mono sp-small">--sp-fs-xs · 13px</td><td>{{template "kicker" .KickerSample}} <span class="tag is-light">tag</span></td><td class="sp-muted">Upper-case mono micro-labels (kicker, table head, <code>dt</code>, box title) and tags — nothing else</td></tr>
</tbody>
</table></div>
{{template "box_foot" .TypeScaleFoot}}
{{template "box_close"}}
{{end}}