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]>
91 lines
4.3 KiB
HTML
91 lines
4.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Backup Monitor</title>
|
||
<link rel="stylesheet" href="/css/styles.css">
|
||
<!-- type="module" is deferred by default; no inline JS so a strict CSP works -->
|
||
<script type="module" src="/js/app.js"></script>
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<h1 class="topbar__title">Backup Monitor</h1>
|
||
<div class="topbar__meta">
|
||
<span id="last-updated" class="muted" aria-live="polite">Loading…</span>
|
||
<button id="refresh-btn" class="btn" type="button">Refresh</button>
|
||
<a id="admin-link" class="btn" href="/admin.html" hidden>Admin</a>
|
||
<!-- Filled in from /api/v1/me when signed in with Microsoft 365 -->
|
||
<span id="signed-in" class="topbar__user" hidden>
|
||
<span id="signed-in-email" class="muted"></span>
|
||
<a id="sign-out" class="btn" href="#">Sign out</a>
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container">
|
||
<div id="error-banner" class="banner banner--error" role="alert" hidden></div>
|
||
|
||
<!-- Summary cards double as status filters -->
|
||
<section class="summary" aria-label="Status summary and filters">
|
||
<button type="button" class="summary-card" data-filter="all" aria-pressed="true">
|
||
<span class="summary-card__count" data-count="all">–</span>
|
||
<span class="summary-card__label">All jobs</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--failed" data-filter="failed" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="failed">–</span>
|
||
<span class="summary-card__label">Failed</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--warning" data-filter="warning" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="warning">–</span>
|
||
<span class="summary-card__label">Warning</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--running" data-filter="running" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="running">–</span>
|
||
<span class="summary-card__label">Running</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--success" data-filter="success" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="success">–</span>
|
||
<span class="summary-card__label">Success</span>
|
||
</button>
|
||
<button type="button" class="summary-card summary-card--overdue" data-filter="overdue" aria-pressed="false">
|
||
<span class="summary-card__count" data-count="overdue">–</span>
|
||
<span class="summary-card__label">Overdue</span>
|
||
</button>
|
||
</section>
|
||
|
||
<div class="toolbar">
|
||
<label for="search" class="visually-hidden">Search jobs</label>
|
||
<input id="search" class="input" type="search" placeholder="Search company or job…" autocomplete="off">
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<table class="jobs">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="company">Company</button></th>
|
||
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="name">Backup Job</button></th>
|
||
<th scope="col" aria-sort="ascending"><button type="button" class="sort" data-sort="status">Status</button></th>
|
||
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="lastRun">Last Run</button></th>
|
||
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="nextRun">Next Scheduled</button></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="jobs-body"></tbody>
|
||
</table>
|
||
<p id="empty-state" class="empty" hidden>No backup jobs match the current filter.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Native <dialog>: built-in focus trap, Esc-to-close, and top-layer rendering -->
|
||
<dialog id="detail-dialog" class="modal" aria-labelledby="detail-title">
|
||
<div class="modal__header">
|
||
<div>
|
||
<h2 id="detail-title" class="modal__title"></h2>
|
||
<p id="detail-subtitle" class="muted"></p>
|
||
</div>
|
||
<button type="button" class="btn btn--icon" data-close aria-label="Close">✕</button>
|
||
</div>
|
||
<div id="detail-body" class="modal__body"></div>
|
||
</dialog>
|
||
</body>
|
||
</html> |