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]>
104 lines
4.5 KiB
HTML
104 lines
4.5 KiB
HTML
<!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>
|