d55c8a3c33
Consolidates the scattered per-analyst pages into /me/activity (usage analytics) and /me/profile (account hub). /me/stats and /profile/sessions 301-redirect; /profile, /me/debug, /tokens are removed with every internal link repointed. Includes an XSS fix in the /me/activity page hero, the user_id-keyed session-lookup alignment, and the v0.54.15 release cut. Co-developed by @ZdenekSrotyr and @cvrysanek.
1173 lines
42 KiB
HTML
1173 lines
42 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Access tokens — {{ config.INSTANCE_NAME }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
/admin/tokens — ALL tokens across users for incident response + offboarding.
|
|
Admin-only. Card-stack layout with owner column, stat chip strip, owner
|
|
search + sort-by-owner chip, confirm-with-owner revoke modal. No "new
|
|
token" button here — admins use /me/profile for their own.
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
|
|
body > .container { max-width: 1280px; }
|
|
.tokens-page {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 28px 8px 48px;
|
|
box-sizing: border-box;
|
|
font-family: var(--font-primary, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
|
|
}
|
|
@media (max-width: 720px) {
|
|
.tokens-page { padding: 20px 0 32px; }
|
|
}
|
|
|
|
/* ── Hero ──────────────────────────────────────────────────────────────── */
|
|
.tokens-hero {
|
|
background: linear-gradient(135deg, #0073D1 0%, #0056A3 100%);
|
|
border-radius: 14px;
|
|
padding: 28px 32px 24px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 16px rgba(0, 115, 209, 0.2);
|
|
color: #fff;
|
|
position: relative;
|
|
}
|
|
.tokens-hero .hero-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
.tokens-hero .hero-text { min-width: 0; }
|
|
.tokens-hero .hero-eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
margin-bottom: 8px;
|
|
}
|
|
.tokens-hero .tokens-title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
margin: 0 0 6px;
|
|
color: #fff;
|
|
}
|
|
.tokens-hero .tokens-subtitle {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tokens-counts {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
.tokens-counts .count-chip {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
border-radius: 10px;
|
|
padding: 12px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
backdrop-filter: saturate(140%) blur(2px);
|
|
}
|
|
.tokens-counts .count-chip .dot {
|
|
width: 10px; height: 10px; border-radius: 50%;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
|
|
}
|
|
.tokens-counts .count-chip.active .dot { background: #16a34a; }
|
|
.tokens-counts .count-chip.expiring .dot { background: #ea580c; }
|
|
.tokens-counts .count-chip.expired .dot { background: #dc2626; }
|
|
.tokens-counts .count-chip.revoked .dot { background: #6b7280; }
|
|
.tokens-counts .count-chip .count-value {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: #fff;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.tokens-counts .count-chip .count-label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
margin-top: 2px;
|
|
}
|
|
.tokens-counts .count-chip .count-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ── Toolbar ───────────────────────────────────────────────────────────── */
|
|
.toolbar {
|
|
margin-bottom: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.chip-row .chip-group-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: var(--text-secondary, #6b7280);
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.chip-group {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.chip-btn {
|
|
font-family: var(--font-primary, inherit);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
background: var(--surface, #fff);
|
|
color: var(--text-secondary, #6b7280);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all 0.12s ease;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.chip-btn:hover {
|
|
border-color: #cbd5e1;
|
|
color: var(--text-primary, #111827);
|
|
}
|
|
.chip-btn[aria-pressed="true"] {
|
|
background: rgba(0, 115, 209, 0.10);
|
|
border-color: #0073D1;
|
|
color: #0073D1;
|
|
font-weight: 600;
|
|
}
|
|
.chip-btn:focus-visible {
|
|
outline: 2px solid #0073D1;
|
|
outline-offset: 2px;
|
|
}
|
|
.chip-btn .chip-dot {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.chip-btn[data-val="active"] .chip-dot { background: #16a34a; }
|
|
.chip-btn[data-val="expiring"] .chip-dot { background: #ea580c; }
|
|
.chip-btn[data-val="expired"] .chip-dot { background: #dc2626; }
|
|
.chip-btn[data-val="revoked"] .chip-dot { background: #6b7280; }
|
|
.chip-btn .chip-arrow {
|
|
width: 10px; height: 10px;
|
|
opacity: 0;
|
|
}
|
|
.chip-btn[data-sort-dir="asc"] .chip-arrow,
|
|
.chip-btn[data-sort-dir="desc"] .chip-arrow { opacity: 1; }
|
|
.chip-btn[data-sort-dir="asc"] .chip-arrow { transform: rotate(180deg); }
|
|
|
|
.search-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
.search-wrap {
|
|
position: relative;
|
|
flex: 1 1 280px;
|
|
min-width: 220px;
|
|
}
|
|
.search-wrap svg {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 14px; height: 14px;
|
|
color: var(--text-secondary, #9ca3af);
|
|
pointer-events: none;
|
|
}
|
|
.search-wrap input[type="search"] {
|
|
width: 100%;
|
|
height: 38px;
|
|
padding: 0 12px 0 36px;
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-family: var(--font-primary, inherit);
|
|
background: var(--surface, #fff);
|
|
color: var(--text-primary, #111827);
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
.search-wrap input[type="search"]::placeholder { color: #9ca3af; }
|
|
.search-wrap input[type="search"]:hover { border-color: #cbd5e1; }
|
|
.search-wrap input[type="search"]:focus {
|
|
outline: none;
|
|
border-color: #0073D1;
|
|
box-shadow: 0 0 0 3px rgba(0, 115, 209, 0.15);
|
|
}
|
|
|
|
.clear-link {
|
|
font-family: var(--font-primary, inherit);
|
|
background: none;
|
|
border: none;
|
|
padding: 8px 4px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, #6b7280);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
margin-left: auto;
|
|
}
|
|
.clear-link:hover { color: #0073D1; text-decoration: underline; }
|
|
.clear-link:focus-visible {
|
|
outline: 2px solid #0073D1;
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Hidden legacy select controls — kept for test backcompat. */
|
|
.sr-only {
|
|
position: absolute !important;
|
|
width: 1px; height: 1px;
|
|
padding: 0; margin: -1px;
|
|
overflow: hidden; clip: rect(0,0,0,0);
|
|
white-space: nowrap; border: 0;
|
|
}
|
|
|
|
/* ── Card list ─────────────────────────────────────────────────────────── */
|
|
.tokens-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.token-card {
|
|
background: var(--surface, #fff);
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
|
}
|
|
.token-card:hover {
|
|
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
|
|
border-color: #cbd5e1;
|
|
}
|
|
.token-card.is-revoked,
|
|
.token-card.is-expired {
|
|
background: #fafbfc;
|
|
}
|
|
.token-card.is-revoked .token-name,
|
|
.token-card.is-revoked .owner-email {
|
|
text-decoration: line-through;
|
|
color: var(--text-secondary, #6b7280);
|
|
}
|
|
|
|
.token-main {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.avatar-sm {
|
|
width: 32px; height: 32px;
|
|
border-radius: 50%;
|
|
background: #0073D1;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
.token-text { min-width: 0; }
|
|
.token-name {
|
|
display: block;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1A253C);
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 380px;
|
|
}
|
|
.token-meta {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: var(--text-secondary, #6b7280);
|
|
line-height: 1.4;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 420px;
|
|
}
|
|
.owner-email { color: inherit; }
|
|
.chip-mono {
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
background: var(--border-light, #f3f4f6);
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
|
|
font-size: 11.5px;
|
|
color: var(--text-secondary, #6b7280);
|
|
letter-spacing: 0.2px;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.token-usage {
|
|
flex: 0 0 200px;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.token-usage .usage-main {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-primary, #1A253C);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.token-usage .usage-sub {
|
|
font-size: 11.5px;
|
|
color: var(--text-secondary, #6b7280);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.token-usage.soon .usage-main { color: #c2410c; }
|
|
.token-usage.expired .usage-main{ color: #b91c1c; }
|
|
.token-usage.strike .usage-main { text-decoration: line-through; color: #9ca3af; font-weight: 400; }
|
|
|
|
.token-aside {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Status pill ───────────────────────────────────────────────────────── */
|
|
.status-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
white-space: nowrap;
|
|
}
|
|
.status-pill .pill-dot {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.status-pill.status-active { background: rgba(22, 163, 74, 0.12); color: #15803d; }
|
|
.status-pill.status-active .pill-dot { background: #16a34a; }
|
|
.status-pill.status-expiring { background: rgba(234, 88, 12, 0.12); color: #c2410c; }
|
|
.status-pill.status-expiring .pill-dot { background: #ea580c; }
|
|
.status-pill.status-expired { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
|
|
.status-pill.status-expired .pill-dot { background: #dc2626; }
|
|
.status-pill.status-revoked { background: rgba(107, 114, 128, 0.12); color: #4b5563; }
|
|
.status-pill.status-revoked .pill-dot { background: #6b7280; }
|
|
|
|
/* ── Revoke button ─────────────────────────────────────────────────────── */
|
|
.revoke-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border-radius: 8px;
|
|
font-family: var(--font-primary, inherit);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
color: #dc2626;
|
|
border: 1px solid rgba(220, 38, 38, 0.35);
|
|
transition: all 0.12s ease;
|
|
line-height: 1;
|
|
}
|
|
.revoke-btn:hover:not([disabled]) {
|
|
background: #dc2626;
|
|
color: #fff;
|
|
border-color: #dc2626;
|
|
}
|
|
.revoke-btn:focus-visible {
|
|
outline: 2px solid #0073D1;
|
|
outline-offset: 2px;
|
|
}
|
|
.revoke-btn[disabled] {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
border-color: var(--border, #e5e7eb);
|
|
color: var(--text-secondary, #9ca3af);
|
|
}
|
|
.revoke-btn svg { display: block; }
|
|
.token-card:hover .revoke-btn:not([disabled]) {
|
|
border-color: #dc2626;
|
|
}
|
|
|
|
/* ── Empty / loading ───────────────────────────────────────────────────── */
|
|
.tokens-empty, .tokens-loading {
|
|
text-align: center;
|
|
padding: 48px 24px;
|
|
color: var(--text-secondary, #6b7280);
|
|
font-size: 14px;
|
|
background: var(--surface, #fff);
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 12px;
|
|
}
|
|
.tokens-empty .empty-icon {
|
|
margin: 0 auto 14px;
|
|
width: 56px; height: 56px;
|
|
color: #d1d5db;
|
|
}
|
|
.tokens-empty .empty-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1A253C);
|
|
margin: 0 0 4px;
|
|
}
|
|
.tokens-empty .empty-body {
|
|
font-size: 13px;
|
|
margin: 0 0 16px;
|
|
}
|
|
.tokens-empty .empty-clear {
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
font-family: var(--font-primary, inherit);
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
background: var(--surface, #fff);
|
|
color: var(--text-primary, #1A253C);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.tokens-empty .empty-clear:hover {
|
|
border-color: #0073D1;
|
|
color: #0073D1;
|
|
background: rgba(0, 115, 209, 0.04);
|
|
}
|
|
|
|
/* ── Modal ─────────────────────────────────────────────────────────────── */
|
|
.modal-backdrop {
|
|
position: fixed; inset: 0;
|
|
background: rgba(15, 23, 42, 0.55);
|
|
backdrop-filter: blur(2px);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
padding: 16px;
|
|
}
|
|
.modal-backdrop.is-open { display: flex; }
|
|
.modal-card {
|
|
background: var(--surface, #fff);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
|
|
animation: modal-in 0.18s ease-out;
|
|
}
|
|
@keyframes modal-in {
|
|
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
.modal-card h3 {
|
|
margin: 0 0 10px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1A253C);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.modal-card p.sub {
|
|
margin: 0 0 18px;
|
|
font-size: 13.5px;
|
|
color: var(--text-secondary, #6b7280);
|
|
line-height: 1.55;
|
|
}
|
|
.modal-meta {
|
|
margin: 14px 0 4px;
|
|
padding: 14px 16px;
|
|
background: var(--background, #F5F7FA);
|
|
border: 1px solid var(--border-light, #f3f4f6);
|
|
border-radius: 10px;
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 6px 14px;
|
|
font-size: 13px;
|
|
}
|
|
.modal-meta .mk {
|
|
color: var(--text-secondary, #6b7280);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
font-weight: 600;
|
|
align-self: center;
|
|
}
|
|
.modal-meta .mv {
|
|
color: var(--text-primary, #1A253C);
|
|
font-weight: 500;
|
|
word-break: break-all;
|
|
}
|
|
.modal-meta .mv.mono {
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
/* ── Toast ─────────────────────────────────────────────────────────────── */
|
|
.toast-stack {
|
|
position: fixed; bottom: 24px; right: 24px; z-index: 2000;
|
|
display: flex; flex-direction: column; gap: 8px; pointer-events: none;
|
|
}
|
|
.toast {
|
|
background: #111827;
|
|
color: #fff;
|
|
padding: 11px 18px;
|
|
border-radius: 10px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
pointer-events: auto;
|
|
max-width: 400px;
|
|
}
|
|
.toast.show { opacity: 1; transform: translateY(0); }
|
|
.toast.success { background: #047857; }
|
|
.toast.error { background: #b91c1c; }
|
|
|
|
/* ── Responsive ────────────────────────────────────────────────────────── */
|
|
@media (max-width: 720px) {
|
|
.tokens-page { padding: 20px 16px 32px; }
|
|
.tokens-hero { padding: 24px 20px 20px; }
|
|
.tokens-hero .tokens-title { font-size: 22px; }
|
|
.tokens-hero .hero-top { flex-direction: column; align-items: stretch; }
|
|
|
|
.token-card {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 14px;
|
|
}
|
|
.token-main { width: 100%; }
|
|
.token-name { max-width: none; white-space: normal; }
|
|
.token-meta { max-width: none; white-space: normal; }
|
|
.token-usage {
|
|
flex: 1 1 auto;
|
|
width: 100%;
|
|
padding-left: 44px; /* align under avatar */
|
|
}
|
|
.token-aside {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
padding-left: 44px;
|
|
}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.tokens-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
}
|
|
</style>
|
|
|
|
<div class="tokens-page" data-is-admin="true" data-view="admin">
|
|
<!-- ═════════ HERO ═════════ -->
|
|
<section class="tokens-hero" aria-labelledby="tokens-title">
|
|
<div class="hero-top">
|
|
<div class="hero-text">
|
|
<div class="hero-eyebrow">Administration</div>
|
|
<h2 class="tokens-title" id="tokens-title">Access tokens</h2>
|
|
<p class="tokens-subtitle">
|
|
Personal access tokens across all users — for incident response and offboarding.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tokens-counts" id="tokens-counts" aria-live="polite" aria-label="Token counts summary">
|
|
<div class="count-chip active">
|
|
<span class="dot" aria-hidden="true"></span>
|
|
<div class="count-text">
|
|
<span class="count-value" id="count-active">0</span>
|
|
<span class="count-label">Active</span>
|
|
</div>
|
|
</div>
|
|
<div class="count-chip expiring" title="Active tokens expiring in the next 7 days">
|
|
<span class="dot" aria-hidden="true"></span>
|
|
<div class="count-text">
|
|
<span class="count-value" id="count-expiring">0</span>
|
|
<span class="count-label">Expiring soon</span>
|
|
</div>
|
|
</div>
|
|
<div class="count-chip expired">
|
|
<span class="dot" aria-hidden="true"></span>
|
|
<div class="count-text">
|
|
<span class="count-value" id="count-expired">0</span>
|
|
<span class="count-label">Expired</span>
|
|
</div>
|
|
</div>
|
|
<div class="count-chip revoked">
|
|
<span class="dot" aria-hidden="true"></span>
|
|
<div class="count-text">
|
|
<span class="count-value" id="count-revoked">0</span>
|
|
<span class="count-label">Revoked</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═════════ TOOLBAR ═════════ -->
|
|
<section class="toolbar" aria-label="Filter and sort tokens">
|
|
<div class="chip-row">
|
|
<span class="chip-group-label" id="status-group-label">Status</span>
|
|
<div class="chip-group" role="radiogroup" aria-labelledby="status-group-label" id="flt-status-group">
|
|
<button type="button" class="chip-btn" role="radio" data-val="all" aria-pressed="true" aria-checked="true">All</button>
|
|
<button type="button" class="chip-btn" role="radio" data-val="active" aria-pressed="false" aria-checked="false"><span class="chip-dot" aria-hidden="true"></span>Active</button>
|
|
<button type="button" class="chip-btn" role="radio" data-val="expiring" aria-pressed="false" aria-checked="false"><span class="chip-dot" aria-hidden="true"></span>Expiring</button>
|
|
<button type="button" class="chip-btn" role="radio" data-val="expired" aria-pressed="false" aria-checked="false"><span class="chip-dot" aria-hidden="true"></span>Expired</button>
|
|
<button type="button" class="chip-btn" role="radio" data-val="revoked" aria-pressed="false" aria-checked="false"><span class="chip-dot" aria-hidden="true"></span>Revoked</button>
|
|
</div>
|
|
<!-- Hidden legacy select — kept so test assertion id="flt-status" stays valid -->
|
|
<select id="flt-status" class="sr-only" tabindex="-1" aria-hidden="true">
|
|
<option value="all" selected>All</option>
|
|
<option value="active">Active</option>
|
|
<option value="expiring">Expiring</option>
|
|
<option value="expired">Expired</option>
|
|
<option value="revoked">Revoked</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="chip-row">
|
|
<span class="chip-group-label" id="sort-group-label">Sort by</span>
|
|
<div class="chip-group" role="group" aria-labelledby="sort-group-label" id="sort-group">
|
|
<button type="button" class="chip-btn" data-sort-key="created_at" data-sort-dir="desc" aria-pressed="true">
|
|
Created<svg class="chip-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
</button>
|
|
<button type="button" class="chip-btn" data-sort-key="last_used_at" aria-pressed="false">
|
|
Last used<svg class="chip-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
</button>
|
|
<button type="button" class="chip-btn" data-sort-key="expires_at" aria-pressed="false">
|
|
Expires<svg class="chip-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
</button>
|
|
<button type="button" class="chip-btn" data-sort-key="user_email" aria-pressed="false">
|
|
Owner<svg class="chip-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
</button>
|
|
</div>
|
|
<!-- Hidden legacy select — kept so test assertion id="flt-last-used" stays valid -->
|
|
<select id="flt-last-used" class="sr-only" tabindex="-1" aria-hidden="true">
|
|
<option value="any" selected>Any time</option>
|
|
<option value="never">Never used</option>
|
|
<option value="7d">< 7 days ago</option>
|
|
<option value="30d">< 30 days ago</option>
|
|
<option value="gt30d">> 30 days ago</option>
|
|
<option value="gt90d">> 90 days ago</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="search-row">
|
|
<div class="search-wrap">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="11" cy="11" r="7"></circle>
|
|
<path d="m21 21-4.3-4.3"></path>
|
|
</svg>
|
|
<input id="flt-user" type="search" placeholder="Search by owner email…" autocomplete="off" aria-label="Filter by user email">
|
|
</div>
|
|
<button type="button" class="clear-link" id="clear-filters-toolbar">Clear filters</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═════════ LIST ═════════ -->
|
|
<div id="tokens-loading" class="tokens-loading">Loading tokens…</div>
|
|
<ul class="tokens-list" id="tokens-list" role="list" aria-labelledby="tokens-title"></ul>
|
|
<div id="tokens-empty" class="tokens-empty" style="display:none;">
|
|
<svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="8" cy="15" r="4"></circle>
|
|
<line x1="10.85" y1="12.15" x2="19" y2="4"></line>
|
|
<line x1="18" y1="5" x2="20" y2="7"></line>
|
|
<line x1="15" y1="8" x2="17" y2="10"></line>
|
|
</svg>
|
|
<p class="empty-title">No tokens match these filters.</p>
|
|
<p class="empty-body">Adjust the filters or clear them to see everything.</p>
|
|
<button type="button" class="empty-clear" id="clear-filters-btn">Clear filters</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═════════ REVOKE MODAL ═════════ -->
|
|
<div class="modal-backdrop" id="confirm-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
|
|
<div class="modal-card">
|
|
<h3 id="confirm-title">Revoke this token?</h3>
|
|
<p class="sub" id="confirm-text">
|
|
This cannot be undone and will immediately sign out any session using this token.
|
|
</p>
|
|
<div class="modal-meta" id="confirm-meta" aria-hidden="true"></div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" id="confirm-cancel-btn" data-close-modal="confirm-modal">Cancel</button>
|
|
<button class="btn btn-danger" id="confirm-ok-btn">Revoke token</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-stack" id="toast-stack" aria-live="polite"></div>
|
|
|
|
<script>
|
|
// Admin tokens — list of ALL tokens for incident response / offboarding.
|
|
const API_LIST = "/auth/admin/tokens";
|
|
const API_REVOKE = (id) => `/auth/admin/tokens/${encodeURIComponent(id)}`;
|
|
const SEVEN_DAYS = 7 * 86_400_000;
|
|
|
|
// ── Helpers ────────────────────────────────────────────────────────────────
|
|
function esc(s) {
|
|
const d = document.createElement("div");
|
|
d.textContent = s == null ? "" : String(s);
|
|
return d.innerHTML;
|
|
}
|
|
function fmtAbs(s) { return s ? String(s).replace("T", " ").slice(0, 19) : "—"; }
|
|
function parseDate(s) {
|
|
if (!s) return null;
|
|
const str = String(s).replace(" ", "T");
|
|
const d = new Date(str);
|
|
return isNaN(d.getTime()) ? null : d;
|
|
}
|
|
function relTime(s) {
|
|
const d = parseDate(s);
|
|
if (!d) return "—";
|
|
const diff = Date.now() - d.getTime();
|
|
const abs = Math.abs(diff);
|
|
const sign = diff < 0 ? "in " : "";
|
|
const suf = diff >= 0 ? " ago" : "";
|
|
const min = 60_000, hr = 3_600_000, day = 86_400_000;
|
|
if (abs < min) return sign + "just now";
|
|
if (abs < hr) return sign + Math.floor(abs / min) + "m" + suf;
|
|
if (abs < day) return sign + Math.floor(abs / hr) + "h" + suf;
|
|
const days = Math.floor(abs / day);
|
|
if (days === 1) return sign + "1 day" + suf;
|
|
if (days < 60) return sign + days + " days" + suf;
|
|
const months = Math.floor(days / 30);
|
|
if (months < 24) return sign + months + "mo" + suf;
|
|
return sign + Math.floor(days / 365) + "y" + suf;
|
|
}
|
|
function initialsFor(email) {
|
|
if (!email) return "??";
|
|
const clean = String(email).trim();
|
|
if (clean.includes("@")) {
|
|
const local = clean.split("@")[0];
|
|
if (local.includes(".")) {
|
|
const parts = local.split(".").filter(Boolean);
|
|
return (parts[0][0] + (parts[1] ? parts[1][0] : parts[0][1] || "")).toUpperCase();
|
|
}
|
|
return (local[0] + (local[1] || "")).toUpperCase();
|
|
}
|
|
return clean.slice(0, 2).toUpperCase();
|
|
}
|
|
|
|
function computeStatus(t, now) {
|
|
if (t.revoked_at) return "revoked";
|
|
const exp = parseDate(t.expires_at);
|
|
if (exp && exp.getTime() < now) return "expired";
|
|
if (exp && (exp.getTime() - now) < SEVEN_DAYS) return "expiring";
|
|
return "active";
|
|
}
|
|
function statusPill(status) {
|
|
const map = {
|
|
active: { cls: "status-active", label: "active", aria: "active token" },
|
|
expiring: { cls: "status-expiring", label: "expiring", aria: "token expiring soon" },
|
|
expired: { cls: "status-expired", label: "expired", aria: "expired token" },
|
|
revoked: { cls: "status-revoked", label: "revoked", aria: "revoked token" },
|
|
};
|
|
const info = map[status] || map.revoked;
|
|
return `<span class="status-pill ${info.cls}" aria-label="${info.aria}"><span class="pill-dot" aria-hidden="true"></span>${info.label}</span>`;
|
|
}
|
|
function statusTooltip(t, status) {
|
|
if (status === "revoked") return t.revoked_at ? "Revoked " + relTime(t.revoked_at) : "Revoked";
|
|
if (status === "expired") return t.expires_at ? "Expired " + relTime(t.expires_at) : "Expired";
|
|
if (status === "expiring") return t.expires_at ? "Expires " + relTime(t.expires_at) : "Expiring soon";
|
|
return t.expires_at ? "Active, expires " + relTime(t.expires_at) : "Active";
|
|
}
|
|
|
|
// ── Toast ──────────────────────────────────────────────────────────────────
|
|
function toast(msg, kind = "") {
|
|
const el = document.createElement("div");
|
|
el.className = "toast " + kind;
|
|
el.textContent = msg;
|
|
document.getElementById("toast-stack").appendChild(el);
|
|
requestAnimationFrame(() => el.classList.add("show"));
|
|
setTimeout(() => { el.classList.remove("show"); setTimeout(() => el.remove(), 250); }, 3500);
|
|
}
|
|
|
|
// ── Modal ──────────────────────────────────────────────────────────────────
|
|
let _modalPrevFocus = null;
|
|
function openModal(id) {
|
|
const m = document.getElementById(id);
|
|
_modalPrevFocus = document.activeElement;
|
|
m.classList.add("is-open");
|
|
const cancel = m.querySelector("#confirm-cancel-btn");
|
|
if (cancel) setTimeout(() => cancel.focus(), 10);
|
|
}
|
|
function closeModal(id) {
|
|
const m = document.getElementById(id);
|
|
m.classList.remove("is-open");
|
|
if (_modalPrevFocus && typeof _modalPrevFocus.focus === "function") {
|
|
try { _modalPrevFocus.focus(); } catch (_) {}
|
|
}
|
|
_modalPrevFocus = null;
|
|
}
|
|
document.querySelectorAll("[data-close-modal]").forEach(el =>
|
|
el.addEventListener("click", () => closeModal(el.dataset.closeModal)));
|
|
document.querySelectorAll(".modal-backdrop").forEach(el => {
|
|
el.addEventListener("click", e => { if (e.target === el) closeModal(el.id); });
|
|
});
|
|
document.addEventListener("keydown", e => {
|
|
if (e.key === "Escape") {
|
|
document.querySelectorAll(".modal-backdrop.is-open").forEach(m => closeModal(m.id));
|
|
}
|
|
if (e.key === "Tab") {
|
|
const open = document.querySelector(".modal-backdrop.is-open");
|
|
if (!open) return;
|
|
const focusables = open.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
if (!focusables.length) return;
|
|
const first = focusables[0];
|
|
const last = focusables[focusables.length - 1];
|
|
if (e.shiftKey && document.activeElement === first) {
|
|
e.preventDefault(); last.focus();
|
|
} else if (!e.shiftKey && document.activeElement === last) {
|
|
e.preventDefault(); first.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
function confirmModal({ title, sub, meta, okLabel = "Revoke token" }) {
|
|
document.getElementById("confirm-title").textContent = title;
|
|
document.getElementById("confirm-text").textContent = sub;
|
|
const metaEl = document.getElementById("confirm-meta");
|
|
if (meta && Object.keys(meta).length) {
|
|
let html = "";
|
|
for (const [k, v] of Object.entries(meta)) {
|
|
const isMono = k === "Prefix";
|
|
html += `<span class="mk">${esc(k)}</span><span class="mv${isMono ? " mono" : ""}">${esc(v)}</span>`;
|
|
}
|
|
metaEl.innerHTML = html;
|
|
metaEl.style.display = "grid";
|
|
} else {
|
|
metaEl.style.display = "none";
|
|
}
|
|
const okBtn = document.getElementById("confirm-ok-btn");
|
|
okBtn.textContent = okLabel;
|
|
return new Promise(resolve => {
|
|
const ok = () => { closeModal("confirm-modal"); cleanup(); resolve(true); };
|
|
const cancel = () => { cleanup(); resolve(false); };
|
|
const onCancelClick = () => cancel();
|
|
const cancelBtn = document.getElementById("confirm-cancel-btn");
|
|
function cleanup() {
|
|
okBtn.removeEventListener("click", ok);
|
|
cancelBtn.removeEventListener("click", onCancelClick);
|
|
}
|
|
okBtn.addEventListener("click", ok, { once: true });
|
|
cancelBtn.addEventListener("click", onCancelClick, { once: true });
|
|
openModal("confirm-modal");
|
|
});
|
|
}
|
|
|
|
// ── State ──────────────────────────────────────────────────────────────────
|
|
let allTokens = [];
|
|
let filters = { status: "all", user: "" };
|
|
let sort = { key: "created_at", dir: "desc" };
|
|
|
|
function applyFilters(items) {
|
|
const now = Date.now();
|
|
return items.filter(t => {
|
|
const s = computeStatus(t, now);
|
|
if (filters.status !== "all" && s !== filters.status) return false;
|
|
if (filters.user) {
|
|
const q = filters.user.toLowerCase();
|
|
if (!(t.user_email || "").toLowerCase().includes(q)) return false;
|
|
}
|
|
return true;
|
|
});
|
|
}
|
|
|
|
function sortItems(items) {
|
|
const now = Date.now();
|
|
const { key, dir } = sort;
|
|
const mul = dir === "asc" ? 1 : -1;
|
|
return [...items].sort((a, b) => {
|
|
let va, vb;
|
|
if (key === "status") { va = computeStatus(a, now); vb = computeStatus(b, now); }
|
|
else { va = a[key] || ""; vb = b[key] || ""; }
|
|
if (va < vb) return -1 * mul;
|
|
if (va > vb) return 1 * mul;
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
function updateCounts() {
|
|
const now = Date.now();
|
|
let active = 0, revoked = 0, expired = 0, expiring = 0;
|
|
for (const t of allTokens) {
|
|
const s = computeStatus(t, now);
|
|
if (s === "active") active++;
|
|
else if (s === "expiring") expiring++;
|
|
else if (s === "revoked") revoked++;
|
|
else if (s === "expired") expired++;
|
|
}
|
|
const byId = (id) => document.getElementById(id);
|
|
if (byId("count-active")) byId("count-active").textContent = active;
|
|
if (byId("count-revoked")) byId("count-revoked").textContent = revoked;
|
|
if (byId("count-expired")) byId("count-expired").textContent = expired;
|
|
if (byId("count-expiring")) byId("count-expiring").textContent = expiring;
|
|
}
|
|
|
|
// ── Card render ────────────────────────────────────────────────────────────
|
|
const TRASH_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path></svg>`;
|
|
|
|
function renderCard(t, now) {
|
|
const status = computeStatus(t, now);
|
|
const ownerEmail = t.user_email || t.user_id || "—";
|
|
const initials = initialsFor(ownerEmail);
|
|
const exp = parseDate(t.expires_at);
|
|
|
|
const lastUsedRel = t.last_used_at ? relTime(t.last_used_at) : "—";
|
|
const lastUsedIp = t.last_used_ip ? `from ${esc(t.last_used_ip)}` : (t.last_used_at ? "" : "never used");
|
|
const lastUsedTitle = t.last_used_at
|
|
? `${fmtAbs(t.last_used_at)}${t.last_used_ip ? " from " + t.last_used_ip : ""}`
|
|
: "never used";
|
|
|
|
let usageCls = "";
|
|
if (status === "revoked") usageCls = "";
|
|
|
|
const createdRel = relTime(t.created_at);
|
|
let expPart = "";
|
|
if (t.revoked_at) {
|
|
expPart = `<span style="color:#6b7280;">Revoked ${esc(relTime(t.revoked_at))}</span>`;
|
|
} else if (exp) {
|
|
const delta = exp.getTime() - now;
|
|
if (delta < 0) {
|
|
expPart = `<span style="color:#b91c1c;font-weight:500;">Expired ${esc(relTime(t.expires_at))}</span>`;
|
|
} else if (delta < SEVEN_DAYS) {
|
|
expPart = `<span style="color:#c2410c;font-weight:500;">Expires ${esc(relTime(t.expires_at))}</span>`;
|
|
} else {
|
|
expPart = `Expires ${esc(relTime(t.expires_at))}`;
|
|
}
|
|
} else {
|
|
expPart = "No expiry";
|
|
}
|
|
|
|
const card = document.createElement("li");
|
|
card.className = "token-card" + (status === "revoked" ? " is-revoked" : "") + (status === "expired" ? " is-expired" : "");
|
|
card.setAttribute("role", "listitem");
|
|
card.setAttribute("data-token-card", t.id);
|
|
card.setAttribute("data-status", status);
|
|
|
|
card.innerHTML = `
|
|
<div class="token-main">
|
|
<span class="avatar-sm" aria-hidden="true">${esc(initials)}</span>
|
|
<div class="token-text">
|
|
<span class="token-name" title="${esc(t.name)}">${esc(t.name)}</span>
|
|
<span class="token-meta">
|
|
<span class="owner-email">${esc(ownerEmail)}</span>
|
|
<span aria-hidden="true"> · </span>
|
|
<span class="chip-mono">${esc(t.prefix)}…</span>
|
|
<span aria-hidden="true"> · </span>
|
|
<span>Created ${esc(createdRel)}</span>
|
|
<span aria-hidden="true"> · </span>
|
|
${expPart}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="token-usage ${usageCls}" title="${esc(lastUsedTitle)}">
|
|
<span class="usage-main">Last used ${esc(lastUsedRel)}</span>
|
|
${lastUsedIp ? `<span class="usage-sub">${lastUsedIp}</span>` : ""}
|
|
</div>
|
|
<div class="token-aside">
|
|
<span title="${esc(statusTooltip(t, status))}">${statusPill(status)}</span>
|
|
<button type="button" class="revoke-btn" data-revoke
|
|
data-token-id="${esc(t.id)}"
|
|
data-token-name="${esc(t.name)}"
|
|
data-token-owner="${esc(ownerEmail)}"
|
|
data-token-prefix="${esc(t.prefix)}"
|
|
aria-label="Revoke token ${esc(t.name)} owned by ${esc(ownerEmail)}"
|
|
title="Revoke token"
|
|
${t.revoked_at ? "disabled" : ""}>
|
|
${TRASH_SVG}
|
|
<span>Revoke</span>
|
|
</button>
|
|
</div>`;
|
|
return card;
|
|
}
|
|
|
|
function renderList() {
|
|
const list = document.getElementById("tokens-list");
|
|
const loading = document.getElementById("tokens-loading");
|
|
const empty = document.getElementById("tokens-empty");
|
|
loading.style.display = "none";
|
|
|
|
const filtered = sortItems(applyFilters(allTokens));
|
|
list.innerHTML = "";
|
|
|
|
if (filtered.length === 0) {
|
|
empty.style.display = "block";
|
|
list.style.display = "none";
|
|
return;
|
|
}
|
|
empty.style.display = "none";
|
|
list.style.display = "flex";
|
|
|
|
const now = Date.now();
|
|
for (const t of filtered) list.appendChild(renderCard(t, now));
|
|
|
|
list.querySelectorAll("[data-revoke]").forEach(el => {
|
|
el.addEventListener("click", () => revokeToken({
|
|
id: el.dataset.tokenId,
|
|
name: el.dataset.tokenName,
|
|
owner: el.dataset.tokenOwner,
|
|
prefix: el.dataset.tokenPrefix,
|
|
}));
|
|
});
|
|
}
|
|
|
|
async function loadTokens() {
|
|
try {
|
|
const r = await fetch(API_LIST, { credentials: "include" });
|
|
if (!r.ok) throw new Error("HTTP " + r.status);
|
|
allTokens = await r.json();
|
|
updateCounts();
|
|
renderList();
|
|
} catch (e) {
|
|
document.getElementById("tokens-loading").textContent = "Failed to load tokens: " + e.message;
|
|
toast("Failed to load tokens", "error");
|
|
}
|
|
}
|
|
|
|
async function revokeToken({ id, name, owner, prefix }) {
|
|
const meta = {
|
|
"Name": name,
|
|
"Owner": owner,
|
|
"Prefix": (prefix || "") + "…",
|
|
};
|
|
const confirmed = await confirmModal({
|
|
title: "Revoke this token?",
|
|
sub: "This cannot be undone and will immediately sign out any session using this token.",
|
|
meta,
|
|
okLabel: "Revoke token",
|
|
});
|
|
if (!confirmed) return;
|
|
const r = await fetch(API_REVOKE(id), { method: "DELETE", credentials: "include" });
|
|
if (!r.ok) { toast("Failed: " + (await r.text()), "error"); return; }
|
|
toast("Token revoked", "success");
|
|
await loadTokens();
|
|
}
|
|
|
|
// ── Filter chips (status) ──────────────────────────────────────────────────
|
|
function setStatusFilter(val) {
|
|
filters.status = val;
|
|
document.querySelectorAll("#flt-status-group .chip-btn").forEach(b => {
|
|
const on = b.dataset.val === val;
|
|
b.setAttribute("aria-pressed", on ? "true" : "false");
|
|
b.setAttribute("aria-checked", on ? "true" : "false");
|
|
});
|
|
const sel = document.getElementById("flt-status");
|
|
if (sel) sel.value = val;
|
|
renderList();
|
|
}
|
|
document.querySelectorAll("#flt-status-group .chip-btn").forEach(btn => {
|
|
btn.addEventListener("click", () => setStatusFilter(btn.dataset.val));
|
|
});
|
|
document.getElementById("flt-status").addEventListener("change", e => setStatusFilter(e.target.value));
|
|
|
|
// ── Sort chips ─────────────────────────────────────────────────────────────
|
|
function setSort(key) {
|
|
if (sort.key === key) {
|
|
sort.dir = sort.dir === "asc" ? "desc" : "asc";
|
|
} else {
|
|
sort.key = key;
|
|
sort.dir = key === "user_email" ? "asc" : "desc";
|
|
}
|
|
document.querySelectorAll("#sort-group .chip-btn").forEach(b => {
|
|
if (b.dataset.sortKey === sort.key) {
|
|
b.setAttribute("aria-pressed", "true");
|
|
b.setAttribute("data-sort-dir", sort.dir);
|
|
} else {
|
|
b.setAttribute("aria-pressed", "false");
|
|
b.removeAttribute("data-sort-dir");
|
|
}
|
|
});
|
|
renderList();
|
|
}
|
|
document.querySelectorAll("#sort-group .chip-btn").forEach(btn => {
|
|
btn.addEventListener("click", () => setSort(btn.dataset.sortKey));
|
|
});
|
|
|
|
// ── Owner email search ─────────────────────────────────────────────────────
|
|
(function bindUserFilter() {
|
|
const el = document.getElementById("flt-user");
|
|
if (!el) return;
|
|
el.addEventListener("input", e => {
|
|
filters.user = e.target.value.trim(); renderList();
|
|
});
|
|
})();
|
|
|
|
function clearFilters() {
|
|
filters = { status: "all", user: "" };
|
|
setStatusFilter("all");
|
|
const uf = document.getElementById("flt-user");
|
|
if (uf) uf.value = "";
|
|
const lu = document.getElementById("flt-last-used");
|
|
if (lu) lu.value = "any";
|
|
renderList();
|
|
}
|
|
document.getElementById("clear-filters-btn").addEventListener("click", clearFilters);
|
|
document.getElementById("clear-filters-toolbar").addEventListener("click", clearFilters);
|
|
|
|
// Pre-fill user filter from ?user=... (deep-link from /admin/users)
|
|
(function initFromQuery() {
|
|
try {
|
|
const q = new URLSearchParams(window.location.search);
|
|
const u = q.get("user");
|
|
if (u) {
|
|
filters.user = u;
|
|
const el = document.getElementById("flt-user");
|
|
if (el) el.value = u;
|
|
}
|
|
} catch (_) {}
|
|
})();
|
|
|
|
loadTokens();
|
|
</script>
|
|
{% endblock %}
|