mix
147072dbb9
Phase 12 (UI/UX). The navigation bar now renders once from layout.html instead of being copied into each content template, so it is present on every authenticated page — including the domain page and its delete confirmation, which had no links at all — and the current page is highlighted via .Active rather than quietly dropping out of the list. New /account page changes the administrator's username and/or password: the current password is required and the attempt is throttled on the same limiter as the login form, so this route cannot be used to brute-force past that limit. A password change invalidates every other session while keeping the one performing it; a rename carries that session over. Backup and domain import move from a card in the middle of the domain list to their own /backup page, one card each; the handlers themselves are unchanged, only the page the import form renders its errors on. The domain page gains a "Sending server settings" card (server, port, encryption) so a client can be configured without reading the docs; 587 is listed only when SUBMISSION_ENABLE is true for this deployment, which is a deploy-time flag the panel cannot verify at runtime. Client-side (static/panel.js, no libraries): Copy buttons on the values that get carried elsewhere (DKIM record, new application credentials, server name), and the Addresses field is hidden while the address mode is wildcard, where the server ignores it. Verified in a container on the dev server: setup, login, every page's nav and active item, domain and application creation, all account-form paths including cross-session invalidation, import errors, full backup download. gofmt/vet/test/docker build green. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
139 lines
7.0 KiB
HTML
139 lines
7.0 KiB
HTML
{{define "layout.html"}}<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{.Title}}</title>
|
|
<link rel="icon" href="/static/favicon.png" type="image/png">
|
|
<script src="/static/htmx.min.js" defer></script>
|
|
<script src="/static/panel.js" defer></script>
|
|
<style>
|
|
:root { color-scheme: light dark; }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
margin: 0; padding: 2rem 1rem; background: #f6f7f9; color: #1b1f24;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body { background: #14171a; color: #e6e8eb; }
|
|
.card { background: #1d2125 !important; border-color: #2b3138 !important; }
|
|
input { background: #14171a !important; color: inherit !important; border-color: #2b3138 !important; }
|
|
}
|
|
main { max-width: 42rem; margin: 0 auto; }
|
|
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
|
|
.card {
|
|
background: #fff; border: 1px solid #e2e5e9; border-radius: 10px;
|
|
padding: 1.5rem; margin: 0 auto;
|
|
}
|
|
.card.narrow { max-width: 24rem; }
|
|
label { display: block; font-weight: 600; margin: 0.9rem 0 0.3rem; }
|
|
input {
|
|
width: 100%; padding: 0.55rem 0.7rem; font-size: 1rem;
|
|
border: 1px solid #cfd4da; border-radius: 6px; background: #fff;
|
|
}
|
|
button {
|
|
margin-top: 1.2rem; padding: 0.6rem 1.1rem; font-size: 1rem; font-weight: 600;
|
|
color: #fff; background: #2563eb; border: 0; border-radius: 6px; cursor: pointer;
|
|
}
|
|
button:hover { background: #1d4ed8; }
|
|
.error { color: #b42318; margin: 0.6rem 0 0; font-weight: 600; }
|
|
.muted { color: #6b7280; }
|
|
.topbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
|
|
.topbar .actions { display: flex; gap: 0.9rem; align-items: baseline; }
|
|
form.inline { display: inline; margin: 0; }
|
|
form.inline button { background: none; color: #2563eb; padding: 0; margin: 0; font-weight: 600; }
|
|
form.inline button:hover { text-decoration: underline; background: none; }
|
|
main { max-width: 48rem; }
|
|
.card + .card { margin-top: 1.2rem; }
|
|
.flash { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; padding: 0.7rem 1rem; border-radius: 8px; margin-bottom: 1.2rem; }
|
|
@media (prefers-color-scheme: dark) { .flash { background: #0d2818 !important; border-color: #1a5336 !important; color: #75d99b !important; } }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid #e2e5e9; }
|
|
@media (prefers-color-scheme: dark) { th, td { border-color: #2b3138 !important; } }
|
|
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
|
|
td.actions { text-align: right; }
|
|
a.danger { color: #b42318; }
|
|
.code { display: block; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 0.85rem; background: #f0f2f4; border: 1px solid #e2e5e9; border-radius: 6px; padding: 0.7rem 0.8rem; margin: 0.3rem 0 0; }
|
|
@media (prefers-color-scheme: dark) { .code { background: #14171a !important; border-color: #2b3138 !important; } }
|
|
h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
|
|
.back { display: inline-block; margin-bottom: 1rem; }
|
|
select, textarea {
|
|
width: 100%; padding: 0.55rem 0.7rem; font-size: 1rem;
|
|
border: 1px solid #cfd4da; border-radius: 6px; background: #fff; color: inherit;
|
|
font-family: inherit;
|
|
}
|
|
textarea { resize: vertical; }
|
|
@media (prefers-color-scheme: dark) {
|
|
select, textarea { background: #14171a !important; color: inherit !important; border-color: #2b3138 !important; }
|
|
}
|
|
button.danger { background: #b42318; }
|
|
button.danger:hover { background: #912018; }
|
|
form.inline button.danger { background: none; color: #b42318; }
|
|
form.inline button.danger:hover { background: none; }
|
|
td.actions form.inline, td.actions details { margin-left: 0.6rem; }
|
|
details summary { cursor: pointer; color: #2563eb; font-weight: 600; }
|
|
details form { margin-top: 0.6rem; }
|
|
.credential { border-color: #f5c518; background: #fffbeb; }
|
|
@media (prefers-color-scheme: dark) { .credential { background: #2a2408 !important; border-color: #6b5a10 !important; } }
|
|
/* Panel navigation: rendered once from this layout, so it is present on every
|
|
authenticated page without each content template having to include it. */
|
|
.nav {
|
|
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
|
|
gap: 0.4rem 1rem; margin-bottom: 1.2rem; padding-bottom: 0.6rem;
|
|
border-bottom: 1px solid #e2e5e9;
|
|
}
|
|
@media (prefers-color-scheme: dark) { .nav { border-color: #2b3138 !important; } }
|
|
.nav .links, .nav .session { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; align-items: baseline; }
|
|
.nav .links a, .nav .links [aria-current] { padding: 0.2rem 0.5rem; border-radius: 6px; }
|
|
.nav .links [aria-current] {
|
|
font-weight: 600; color: #1b1f24; background: #e6ebf5; box-shadow: inset 0 -2px 0 #2563eb;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.nav .links [aria-current] { color: #e6e8eb !important; background: #22303f !important; }
|
|
}
|
|
.code-row { display: flex; align-items: flex-start; gap: 0.5rem; }
|
|
.code-row .code { flex: 1; min-width: 0; }
|
|
button.copy {
|
|
flex: none; margin-top: 0.3rem; padding: 0.45rem 0.7rem; font-size: 0.8rem;
|
|
background: #eef1f5; color: #2563eb; border: 1px solid #cfd4da;
|
|
}
|
|
button.copy:hover { background: #e2e7ee; }
|
|
@media (prefers-color-scheme: dark) {
|
|
button.copy { background: #22262b !important; border-color: #2b3138 !important; }
|
|
button.copy:hover { background: #2b3138 !important; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
{{if .User}}{{template "nav" .}}{{end}}
|
|
{{template "content" .}}
|
|
</main>
|
|
</body>
|
|
</html>{{end}}
|
|
|
|
{{/* nav is the panel's navigation bar. It is rendered here, from the layout, so
|
|
every authenticated page has it without the page's own template having to
|
|
remember to include it; .Active names the current page so it is highlighted
|
|
instead of linking to itself. Unauthenticated pages (login, setup) carry no
|
|
.User and get no nav. */}}
|
|
{{define "nav"}}
|
|
<nav class="nav">
|
|
<div class="links">
|
|
{{if eq .Active "domains"}}<span aria-current="page">Domains</span>{{else}}<a href="/">Domains</a>{{end}}
|
|
{{if eq .Active "sendlog"}}<span aria-current="page">Send log</span>{{else}}<a href="/sendlog">Send log</a>{{end}}
|
|
{{if eq .Active "queue"}}<span aria-current="page">Queue</span>{{else}}<a href="/queue">Queue</a>{{end}}
|
|
{{if eq .Active "logtail"}}<span aria-current="page">Log</span>{{else}}<a href="/logtail">Log</a>{{end}}
|
|
{{if eq .Active "backup"}}<span aria-current="page">Backup</span>{{else}}<a href="/backup">Backup</a>{{end}}
|
|
</div>
|
|
<div class="session">
|
|
<span class="muted">{{.User}}</span>
|
|
{{if eq .Active "account"}}<span aria-current="page">Account</span>{{else}}<a href="/account">Account</a>{{end}}
|
|
<form class="inline" method="post" action="/logout">
|
|
<button type="submit">Sign out</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
{{end}}
|