kyleandClaude Opus 5.5
d4e821799c
Admins (Microsoft 365 sign-in names in BACKUP_DASH_ADMINS) get an Admin link to /admin.html, where they can create, list and revoke the API keys collectors use, instead of running manage.py on the server. Backend - /api/v1/admin/keys (list, create, revoke), admins only (403 otherwise); the user comes from the headers nginx sets after sign-in - Changes need an X-Requested-By header, which another site's page can't add, so a signed-in admin's browser can't be used to forge them - A new key is returned once; only its hash is stored. Names are unique for good, so revoked keys' history stays unambiguous - Keys record who created/revoked them and the company they last reported for (schema v2; databases migrate automatically on start) - /api/v1/me reports is_admin; manage.py shares the key code and records itself as creator/revoker Frontend - admin.html / admin.js: name validation shown after interaction (:user-invalid, aria-invalid kept in sync), the one-time key with a copy button (falls back to selecting it if clipboard access is refused), a key table flagging keys quiet for over 24 hours, and revoking confirmed in a <dialog>; results announced in a status region - Shared el() and signed-in helpers moved to dom.js / signed-in.js - Mock mode (?mock=1) includes sample keys Tested: 15 new backend tests (access, forged requests, names, duplicates, revoking, last-used company, v1 -> v2 upgrade); in the browser, every admin flow in mock mode and at phone width; end to end through the nginx config with the real API (a key created on the API works for ingest; revoking it makes ingest 401; non-admins see an explanation and no Admin link). Co-Authored-By: Claude Opus 5.5 <[email protected]>
425 lines
14 KiB
CSS
425 lines
14 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
--bg: #f6f7f9;
|
|
--surface: #ffffff;
|
|
--surface-alt: #f0f2f5;
|
|
--border: #d9dde3;
|
|
--text: #1f2328;
|
|
--muted: #656d76;
|
|
--accent: #0969da;
|
|
|
|
/* Status palette: each has fg/bg/border so badges stay legible in both themes */
|
|
--success-fg: #116329; --success-bg: #dafbe1; --success-bd: #4ac26b;
|
|
--warning-fg: #7d4e00; --warning-bg: #fff8c5; --warning-bd: #d4a72c;
|
|
--failed-fg: #a40e26; --failed-bg: #ffebe9; --failed-bd: #ff8182;
|
|
--unknown-fg: #57606a; --unknown-bg: #eaeef2; --unknown-bd: #afb8c1;
|
|
--running-fg: #0550ae; --running-bg: #ddf4ff; --running-bd: #54aeff;
|
|
|
|
--radius: 8px;
|
|
--shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 4%);
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0d1117;
|
|
--surface: #161b22;
|
|
--surface-alt: #1c2128;
|
|
--border: #30363d;
|
|
--text: #e6edf3;
|
|
--muted: #8d96a0;
|
|
--accent: #4493f8;
|
|
--success-fg: #6fdd8b; --success-bg: #12261e; --success-bd: #2ea043;
|
|
--warning-fg: #f2cc60; --warning-bg: #272115; --warning-bd: #9e6a03;
|
|
--failed-fg: #ffa198; --failed-bg: #2d1214; --failed-bd: #da3633;
|
|
--unknown-fg: #9da7b3; --unknown-bg: #21262d; --unknown-bd: #484f58;
|
|
--running-fg: #79c0ff; --running-bg: #0c2d4b; --running-bd: #1f6feb;
|
|
--shadow: none;
|
|
}
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.muted { color: var(--muted); }
|
|
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px; height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---------- Layout ---------- */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.topbar__title { margin: 0; font-size: 1.25rem; }
|
|
.topbar__meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
|
|
/* Only when shown: display:flex on the bare class would override the hidden attribute */
|
|
.topbar__user:not([hidden]) {
|
|
display: flex; align-items: center; gap: 0.75rem;
|
|
padding-left: 0.75rem; border-left: 1px solid var(--border);
|
|
}
|
|
a.btn { text-decoration: none; }
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 1.25rem 1.5rem 3rem;
|
|
}
|
|
|
|
/* ---------- Controls ---------- */
|
|
.btn {
|
|
font: inherit;
|
|
padding: 0.4rem 0.9rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface-alt);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
.btn:hover { border-color: var(--muted); }
|
|
.btn:disabled { opacity: 0.6; cursor: progress; }
|
|
.btn--icon { padding: 0.25rem 0.55rem; line-height: 1; }
|
|
|
|
.input {
|
|
font: inherit;
|
|
width: min(100%, 360px);
|
|
padding: 0.45rem 0.75rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
.toolbar { margin: 1rem 0; }
|
|
|
|
/* ---------- Banner ---------- */
|
|
.banner {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--radius);
|
|
margin-bottom: 1rem;
|
|
border: 1px solid;
|
|
}
|
|
.banner--error { background: var(--failed-bg); color: var(--failed-fg); border-color: var(--failed-bd); }
|
|
|
|
/* ---------- Summary cards ---------- */
|
|
.summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
.summary-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.15rem;
|
|
padding: 0.9rem 1rem;
|
|
font: inherit;
|
|
text-align: left;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-left-width: 4px;
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
cursor: pointer;
|
|
}
|
|
.summary-card[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -1px; }
|
|
.summary-card__count { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
.summary-card__label { font-size: 0.85rem; color: var(--muted); }
|
|
.summary-card--failed { border-left-color: var(--failed-bd); }
|
|
.summary-card--warning { border-left-color: var(--warning-bd); }
|
|
.summary-card--running { border-left-color: var(--running-bd); }
|
|
.summary-card--success { border-left-color: var(--success-bd); }
|
|
.summary-card--overdue { border-left-color: var(--unknown-bd); }
|
|
|
|
/* ---------- Table ---------- */
|
|
.table-wrap {
|
|
overflow-x: auto;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.jobs { width: 100%; border-collapse: collapse; }
|
|
.jobs th, .jobs td {
|
|
padding: 0.65rem 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
}
|
|
.jobs tbody tr:last-child td { border-bottom: none; }
|
|
.jobs tbody tr:hover { background: var(--surface-alt); }
|
|
.jobs th { background: var(--surface-alt); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
|
|
|
|
.sort {
|
|
all: unset;
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
font-weight: 600;
|
|
}
|
|
.sort::after { content: " ↕"; opacity: 0.4; }
|
|
th[aria-sort="ascending"] .sort::after { content: " ↑"; opacity: 1; }
|
|
th[aria-sort="descending"] .sort::after { content: " ↓"; opacity: 1; }
|
|
th[aria-sort="ascending"] .sort,
|
|
th[aria-sort="descending"] .sort { color: var(--text); }
|
|
|
|
.time { display: flex; flex-direction: column; }
|
|
.time__rel { font-size: 0.8rem; color: var(--muted); }
|
|
|
|
.empty { padding: 2rem; text-align: center; color: var(--muted); margin: 0; }
|
|
|
|
/* ---------- Status badges ---------- */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.2rem 0.65rem;
|
|
font: inherit;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
border: 1px solid;
|
|
border-radius: 999px;
|
|
}
|
|
button.badge { cursor: pointer; }
|
|
button.badge:hover { filter: brightness(0.95); }
|
|
/* Icon + text, not colour alone, so it's readable for colour-blind users */
|
|
.badge__icon { font-size: 0.75rem; }
|
|
.badge--success { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-bd); }
|
|
.badge--warning { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-bd); }
|
|
.badge--failed { color: var(--failed-fg); background: var(--failed-bg); border-color: var(--failed-bd); }
|
|
.badge--unknown { color: var(--unknown-fg); background: var(--unknown-bg); border-color: var(--unknown-bd); }
|
|
.badge--running { color: var(--running-fg); background: var(--running-bg); border-color: var(--running-bd); }
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.badge--running .badge__icon { animation: spin 2s linear infinite; }
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.tag-overdue {
|
|
margin-left: 0.5rem;
|
|
padding: 0.05rem 0.45rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
color: var(--failed-fg);
|
|
background: var(--failed-bg);
|
|
}
|
|
|
|
/* ---------- Modal ---------- */
|
|
.modal {
|
|
width: min(720px, calc(100vw - 2rem));
|
|
max-height: calc(100vh - 4rem);
|
|
padding: 0;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
}
|
|
.modal::backdrop { background: rgb(0 0 0 / 45%); }
|
|
.modal__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.modal__title { margin: 0; font-size: 1.15rem; }
|
|
.modal__header p { margin: 0.15rem 0 0; }
|
|
.modal__body { padding: 1rem 1.25rem 1.25rem; }
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 0.4rem 1.25rem;
|
|
margin: 1rem 0;
|
|
}
|
|
.detail-grid dt { color: var(--muted); }
|
|
.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
|
|
|
|
.detail-section-title { font-size: 0.85rem; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 0.5rem; }
|
|
|
|
.message {
|
|
margin: 0;
|
|
padding: 0.75rem 1rem;
|
|
max-height: 320px;
|
|
overflow: auto;
|
|
white-space: pre-wrap; /* preserve backup-software line breaks */
|
|
overflow-wrap: anywhere;
|
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
font-size: 0.85rem;
|
|
background: var(--surface-alt);
|
|
border: 1px solid var(--border);
|
|
border-left-width: 4px;
|
|
border-radius: 6px;
|
|
}
|
|
.message--failed { border-left-color: var(--failed-bd); }
|
|
.message--warning { border-left-color: var(--warning-bd); }
|
|
.message--success { border-left-color: var(--success-bd); }
|
|
.message--running { border-left-color: var(--running-bd); }
|
|
|
|
.detail-status { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
|
|
|
|
.link {
|
|
all: unset;
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ---------- Run history ---------- */
|
|
.history-stats { margin: 0 0 0.6rem; font-size: 0.9rem; }
|
|
|
|
/* One cell per day, oldest → today. Colour + tooltip; the runs table below is the accessible detail. */
|
|
.day-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(30, 1fr);
|
|
gap: 3px;
|
|
}
|
|
.day {
|
|
height: 28px;
|
|
padding: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
background: var(--surface-alt);
|
|
cursor: pointer;
|
|
}
|
|
.day:disabled { cursor: default; opacity: 0.6; }
|
|
.day:not(:disabled):hover { filter: brightness(0.9); }
|
|
.day[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
.day--success { background: var(--success-bd); border-color: var(--success-bd); }
|
|
.day--warning { background: var(--warning-bd); border-color: var(--warning-bd); }
|
|
.day--failed { background: var(--failed-bd); border-color: var(--failed-bd); }
|
|
.day--running { background: var(--running-bd); border-color: var(--running-bd); }
|
|
.day--unknown { background: var(--unknown-bd); border-color: var(--unknown-bd); }
|
|
.day-strip__ticks {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.history-filter { margin: 0.75rem 0 0; font-size: 0.85rem; }
|
|
|
|
.runs-wrap {
|
|
margin-top: 0.75rem;
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
}
|
|
.runs { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
|
|
.runs th, .runs td {
|
|
padding: 0.4rem 0.75rem;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.runs th {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--surface-alt);
|
|
color: var(--muted);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
}
|
|
.runs tbody tr:last-child td { border-bottom: none; }
|
|
.runs tr.is-selected td { background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
|
.runs .badge { font-size: 0.75rem; padding: 0.1rem 0.5rem; }
|
|
/* ---------- Admin page ---------- */
|
|
.container--narrow { max-width: 1100px; }
|
|
.topbar__nav { display: flex; align-items: center; gap: 1rem; }
|
|
|
|
.banner--info { background: var(--surface-alt); color: var(--text); border-color: var(--border); }
|
|
|
|
.panel {
|
|
margin-bottom: 1.5rem;
|
|
padding: 1rem 1.25rem 1.25rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.panel__title { font-size: 1.05rem; margin: 0 0 0.25rem; }
|
|
section > .panel__title { margin: 0 0 0.75rem; }
|
|
.panel__title:focus { outline: none; } /* focused from script after a change, not by the user */
|
|
.panel p { margin: 0 0 0.75rem; }
|
|
|
|
code {
|
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
font-size: 0.9em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* New key form: label, hint above the input (so autocomplete can't cover it), error below */
|
|
.new-key { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
|
|
.field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 22rem; max-width: 30rem; }
|
|
.field label { font-weight: 600; }
|
|
.hint { font-size: 0.85rem; color: var(--muted); }
|
|
.field .input { width: 100%; }
|
|
.error-msg { display: none; font-size: 0.85rem; color: var(--failed-fg); }
|
|
/* Only after the user has interacted with the field (or tried to submit) */
|
|
.field .input:user-invalid { border-color: var(--failed-bd); background: var(--failed-bg); }
|
|
.field .input:user-invalid + .error-msg { display: block; }
|
|
.form-error { flex-basis: 100%; margin: 0; color: var(--failed-fg); }
|
|
|
|
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
|
|
.btn--primary:hover { filter: brightness(1.08); border-color: var(--accent); }
|
|
.btn--danger { background: var(--failed-bd); border-color: var(--failed-bd); color: #fff; font-weight: 600; }
|
|
.btn--danger-outline { color: var(--failed-fg); border-color: var(--failed-bd); background: transparent; }
|
|
.btn--danger-outline:hover { background: var(--failed-bg); border-color: var(--failed-bd); }
|
|
|
|
/* The one-time key */
|
|
.secret {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
border: 1px solid var(--warning-bd);
|
|
border-left-width: 4px;
|
|
border-radius: 6px;
|
|
background: var(--warning-bg);
|
|
}
|
|
.secret__title { margin: 0 0 0.5rem; font-size: 1rem; }
|
|
.secret__title:focus { outline: none; }
|
|
.secret__row { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.75rem; flex-wrap: wrap; }
|
|
.secret__value {
|
|
flex: 1 1 20rem;
|
|
padding: 0.45rem 0.75rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
user-select: all; /* one click selects the whole key */
|
|
}
|
|
|
|
/* Key table */
|
|
.keys td { vertical-align: top; }
|
|
.keys td .badge { margin-bottom: 0.25rem; }
|
|
.keys td > .time__rel { display: block; }
|
|
.keys .actions { text-align: right; width: 1%; }
|
|
.keys tr.is-revoked td { color: var(--muted); }
|
|
.keys tr.is-revoked code { text-decoration: line-through; }
|
|
.stale-note { display: block; font-size: 0.8rem; font-weight: 600; color: var(--warning-fg); }
|
|
|
|
/* Confirm dialog */
|
|
.modal--small { width: min(460px, calc(100vw - 2rem)); }
|
|
.modal--small .modal__body p { margin-top: 0; }
|
|
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
|