kyle/Backup-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add an admin page for managing collector API keys

Browse Source 
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]>
This commit is contained in:
kyle
2026-10-08 13:52:29 -06:00
co-authored by Claude Opus 5.5
parent c5fe69a813
commit d4e821799c
24 changed files with 887 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.html
+103
View File
@@ -0,0 +1,103 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>API keys · Backup Monitor</title>
<link rel="stylesheet" href="/css/styles.css">
<script type="module" src="/js/admin.js"></script>
</head>
<body>
<header class="topbar">
<div class="topbar__nav">
<a id="back-link" class="btn" href="/">← Dashboard</a>
<h1 class="topbar__title">API keys</h1>
</div>
<div class="topbar__meta">
<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 container--narrow">
<div id="error-banner" class="banner banner--error" role="alert" hidden></div>
<p id="not-admin" class="banner banner--info" hidden>
Your account isn't an admin. Admins are the sign-in names listed in <code>BACKUP_DASH_ADMINS</code>
in the server's settings file.
</p>
<div id="admin-content" hidden>
<section class="panel" aria-labelledby="new-key-title">
<h2 id="new-key-title" class="panel__title">New key</h2>
<p class="muted">Create one key per collector install, so each can be revoked on its own.</p>
<form id="new-key-form" class="new-key">
<div class="field">
<label for="key-name">Name</label>
<span id="key-name-hint" class="hint">For example <code>veeam-acme</code> or <code>mars-acme-fs01</code>:
letters, digits, <code>.</code>, <code>_</code> and <code>-</code>.</span>
<input id="key-name" name="name" class="input" required maxlength="64"
pattern="[A-Za-z0-9][A-Za-z0-9._\-]{0,63}" autocomplete="off" spellcheck="false"
aria-describedby="key-name-hint" aria-errormessage="key-name-error">
<div id="key-name-error" class="error-msg">
Use up to 64 letters, digits, <code>.</code>, <code>_</code> or <code>-</code>, starting with a letter or digit.
</div>
</div>
<button id="create-btn" class="btn btn--primary" type="submit">Create key</button>
<p id="create-error" class="form-error" role="alert" hidden></p>
</form>
<div id="new-key-result" class="secret" hidden>
<h3 id="new-key-result-title" class="secret__title" tabindex="-1">Copy the key for <span id="new-key-name"></span> now</h3>
<p>It won't be shown again: the dashboard only keeps a hash of it. Paste it when the collector's
installer asks for the API key.</p>
<div class="secret__row">
<code id="new-key-secret" class="secret__value"></code>
<button id="copy-btn" class="btn" type="button">Copy</button>
</div>
<button id="done-btn" class="btn" type="button">Done, hide it</button>
</div>
</section>
<section aria-labelledby="keys-title">
<h2 id="keys-title" class="panel__title" tabindex="-1">Keys</h2>
<div class="table-wrap">
<table class="jobs keys">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Last used</th>
<th scope="col">Created</th>
<th scope="col"><span class="visually-hidden">Actions</span></th>
</tr>
</thead>
<tbody id="keys-body"></tbody>
</table>
<p id="keys-empty" class="empty" hidden>No keys yet. Create one above for each collector.</p>
</div>
</section>
</div>
<!-- Announces results (created, copied, revoked) to screen readers -->
<p id="status" class="visually-hidden" role="status"></p>
</main>
<dialog id="revoke-dialog" class="modal modal--small" aria-labelledby="revoke-title">
<form method="dialog">
<div class="modal__header">
<h2 id="revoke-title" class="modal__title">Revoke <span id="revoke-name"></span>?</h2>
</div>
<div class="modal__body">
<p>Collectors using this key will be refused from their next run. This can't be undone: to
reconnect them, create a new key and re-run their installer.</p>
<div class="dialog-actions">
<button class="btn" value="cancel" autofocus>Cancel</button>
<button class="btn btn--danger" value="revoke">Revoke key</button>
</div>
</div>
</form>
</dialog>
</body>
</html>