v_2.2
This commit is contained in:
jpmvaz
@@ -0,0 +1,940 @@
|
||||
/* ============================================================
|
||||
ADMIN PANEL — darker, more clinical than the main app
|
||||
Supports light (default) and dark themes via [data-theme]
|
||||
============================================================ */
|
||||
|
||||
:root,
|
||||
:root[data-theme="light"] {
|
||||
--paper: #eae3d3;
|
||||
--paper-deep: #ddd5c2;
|
||||
--ink: #141210;
|
||||
--ink-soft: #2d2822;
|
||||
--ink-muted: #5e564b;
|
||||
--rule: #bcb09c;
|
||||
--rule-soft: #d2c7b3;
|
||||
--accent: #8a2a1a;
|
||||
--accent-soft: #b8553f;
|
||||
--highlight: #d6c26a;
|
||||
--ok: #2a6635;
|
||||
--warn: #965f1a;
|
||||
--diagonal-stripe: rgba(20, 18, 16, 0.02);
|
||||
--grain-opacity: 0.3;
|
||||
--modal-backdrop: rgba(20, 18, 16, 0.5);
|
||||
|
||||
--font-display: "Fraunces", Georgia, serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--paper: #13110e;
|
||||
--paper-deep: #1c1913;
|
||||
--ink: #e4dac2;
|
||||
--ink-soft: #c0b49a;
|
||||
--ink-muted: #807663;
|
||||
--rule: #342d22;
|
||||
--rule-soft: #26211a;
|
||||
--accent: #c65840;
|
||||
--accent-soft: #df7f63;
|
||||
--highlight: #c9ab47;
|
||||
--ok: #65a572;
|
||||
--warn: #c68c43;
|
||||
--diagonal-stripe: rgba(228, 218, 194, 0.025);
|
||||
--grain-opacity: 0.1;
|
||||
--modal-backdrop: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0; padding: 0; height: 100%;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01", "onum";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-image:
|
||||
repeating-linear-gradient(45deg, transparent 0, transparent 30px, var(--diagonal-stripe) 30px, var(--diagonal-stripe) 31px);
|
||||
}
|
||||
|
||||
.grain {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
opacity: var(--grain-opacity);
|
||||
mix-blend-mode: multiply;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .grain {
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ============================================================
|
||||
AUTH SCREENS
|
||||
============================================================ */
|
||||
.auth-screen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--ink);
|
||||
padding: 44px 40px 36px;
|
||||
box-shadow: 10px 10px 0 var(--accent);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-brand {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.auth-brand h1 {
|
||||
margin: 0;
|
||||
font-size: 1.9rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.auth-tagline {
|
||||
margin: 8px 0 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.admin-badge {
|
||||
display: inline-block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.22em;
|
||||
font-weight: 700;
|
||||
color: var(--paper);
|
||||
background: var(--accent);
|
||||
padding: 4px 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.admin-badge.small {
|
||||
margin-bottom: 0;
|
||||
margin-right: 14px;
|
||||
font-size: 0.6rem;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.auth-form { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.auth-intro {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.92rem;
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.auth-label { display: flex; flex-direction: column; gap: 6px; }
|
||||
.auth-label > span {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.auth-label small {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.66rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.auth-label input,
|
||||
.auth-label select {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--paper-deep);
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
}
|
||||
.auth-label input:focus,
|
||||
.auth-label select:focus {
|
||||
background: var(--paper);
|
||||
box-shadow: 3px 3px 0 var(--accent);
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
margin-top: 8px;
|
||||
padding: 12px 18px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border: 1px solid var(--ink);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
display: block;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.auth-btn:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
padding: 10px 14px;
|
||||
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
border-left: 3px solid var(--accent);
|
||||
color: var(--accent);
|
||||
font-size: 0.88rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MASTHEAD
|
||||
============================================================ */
|
||||
.masthead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 40px;
|
||||
border-bottom: 2px solid var(--ink);
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
.masthead-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.masthead-title h1 {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
}
|
||||
.tagline {
|
||||
margin: 4px 0 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.masthead-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
background: transparent;
|
||||
border: 1px solid var(--rule);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.logout-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
/* ============================================================
|
||||
THEME TOGGLE
|
||||
============================================================ */
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--paper-deep);
|
||||
color: var(--ink-soft);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.theme-toggle svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.theme-toggle:hover svg { transform: rotate(25deg); }
|
||||
:root[data-theme="dark"] .theme-toggle:hover svg { transform: rotate(-25deg); }
|
||||
|
||||
.theme-toggle .icon-sun { display: inline-block; }
|
||||
.theme-toggle .icon-moon { display: none; }
|
||||
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
|
||||
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; }
|
||||
|
||||
/* Floating variant shown on auth/setup screens */
|
||||
.theme-toggle-float {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
body:has(#adminApp:not(.hidden)) .theme-toggle-float { display: none; }
|
||||
|
||||
/* ============================================================
|
||||
MAIN
|
||||
============================================================ */
|
||||
.admin-main {
|
||||
padding: 36px 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Tab navigation */
|
||||
.admin-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 28px;
|
||||
border-bottom: 2px solid var(--ink);
|
||||
}
|
||||
.admin-tab {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
color: var(--ink-muted);
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
padding: 10px 22px;
|
||||
cursor: pointer;
|
||||
margin-bottom: -2px;
|
||||
transition: all 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
.admin-tab:hover {
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.admin-tab.active {
|
||||
background: var(--paper);
|
||||
border-color: var(--ink);
|
||||
color: var(--ink);
|
||||
}
|
||||
.admin-tab.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
height: 4px;
|
||||
background: var(--paper);
|
||||
}
|
||||
.admin-panel { animation: fadeIn 0.2s ease-out; }
|
||||
|
||||
.section-heading {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.toolbar-meta {
|
||||
margin: 6px 0 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-muted);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
padding: 10px 18px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border: 1px solid var(--ink);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.primary-btn:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 3px 3px 0 var(--ink);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
USER TABLE
|
||||
============================================================ */
|
||||
.user-list-wrap {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.user-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.user-table thead {
|
||||
background: var(--paper-deep);
|
||||
border-bottom: 2px solid var(--ink);
|
||||
}
|
||||
.user-table th {
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
font-weight: 500;
|
||||
}
|
||||
.user-table td {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--rule-soft);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.user-table tr:last-child td { border-bottom: none; }
|
||||
.user-table tr:hover td { background: color-mix(in srgb, var(--paper-deep) 70%, transparent); }
|
||||
|
||||
.username-cell {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.username-cell .me-tag {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.1em;
|
||||
background: var(--accent);
|
||||
color: var(--paper);
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.role-pill {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--paper-deep);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.role-pill.admin {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
.role-pill:hover { border-color: var(--accent); }
|
||||
|
||||
.mfa-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.mfa-indicator.on { color: var(--ok); }
|
||||
.mfa-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--ink-muted);
|
||||
}
|
||||
.mfa-indicator.on .mfa-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(42, 102, 53, 0.18); }
|
||||
|
||||
.date-cell {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.row-actions button {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 5px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--rule);
|
||||
color: var(--ink-soft);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.row-actions button:hover {
|
||||
border-color: var(--ink);
|
||||
color: var(--ink);
|
||||
}
|
||||
.row-actions button.danger:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.loading-row, .empty-row {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--ink-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* File table specifics */
|
||||
.filename-cell {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
word-break: break-all;
|
||||
max-width: 280px;
|
||||
}
|
||||
.folder-cell {
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.folder-cell.uncategorized { color: var(--ink-muted); font-style: italic; }
|
||||
|
||||
.status-pill {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
.status-pill.ready { color: var(--ok); }
|
||||
.status-pill.indexing { color: var(--warn); }
|
||||
.status-pill.failed { color: var(--accent); }
|
||||
|
||||
.size-cell, .num-cell {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
color: var(--ink-soft);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
PERMISSIONS TAB
|
||||
============================================================ */
|
||||
.view-switch {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--rule);
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
.view-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
background: transparent;
|
||||
color: var(--ink-muted);
|
||||
border: none;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.view-btn:hover { color: var(--ink); }
|
||||
.view-btn.active {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.perm-hint {
|
||||
font-size: 0.88rem;
|
||||
font-style: italic;
|
||||
color: var(--ink-muted);
|
||||
margin: 0 0 18px;
|
||||
padding: 12px 16px;
|
||||
background: var(--paper-deep);
|
||||
border-left: 3px solid var(--accent-soft);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.perm-matrix-wrap {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
overflow-x: auto;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.perm-matrix {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.perm-matrix thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--paper-deep);
|
||||
border-bottom: 2px solid var(--ink);
|
||||
}
|
||||
|
||||
.perm-matrix th.rowhead,
|
||||
.perm-matrix td.rowhead {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: var(--paper-deep);
|
||||
border-right: 1px solid var(--rule);
|
||||
min-width: 180px;
|
||||
max-width: 260px;
|
||||
}
|
||||
.perm-matrix thead th.rowhead {
|
||||
z-index: 3; /* top-left corner sits above both sticky axes */
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
|
||||
.perm-matrix .col-header {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
white-space: nowrap;
|
||||
padding: 14px 8px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: 0.92rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: var(--ink);
|
||||
max-height: 220px;
|
||||
height: 220px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.perm-matrix .rowlabel {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
padding: 10px 14px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.perm-matrix .rowlabel .role-tag {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 6px;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.perm-matrix .rowlabel.admin-row {
|
||||
color: var(--ink-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.perm-matrix .cell {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid var(--rule-soft);
|
||||
border-right: 1px solid var(--rule-soft);
|
||||
width: 52px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.perm-matrix .cell label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.perm-matrix .cell label:hover {
|
||||
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
}
|
||||
|
||||
.perm-matrix .cell input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
.perm-matrix .cell input[type="checkbox"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.perm-matrix .cell.implicit {
|
||||
background: color-mix(in srgb, var(--ink) 6%, transparent);
|
||||
}
|
||||
.perm-matrix .cell.implicit::after {
|
||||
content: "✓";
|
||||
color: var(--ink-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.perm-empty {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--ink-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MODAL
|
||||
============================================================ */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--modal-backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
z-index: 200;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
.modal-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--ink);
|
||||
padding: 36px 36px 30px;
|
||||
max-width: 440px;
|
||||
width: 100%;
|
||||
box-shadow: 8px 8px 0 var(--accent);
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-card.wide { max-width: 720px; }
|
||||
.modal-card h2 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
.modal-subtitle {
|
||||
margin: 0 0 24px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 14px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: var(--ink-muted);
|
||||
transition: color 0.15s, transform 0.15s;
|
||||
}
|
||||
.modal-close:hover {
|
||||
color: var(--accent);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MFA PANEL
|
||||
============================================================ */
|
||||
.mfa-panel {
|
||||
padding: 20px;
|
||||
background: var(--paper-deep);
|
||||
border: 1px solid var(--rule);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.mfa-status {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.mfa-status.enabled { color: var(--ok); }
|
||||
.mfa-status .badge {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.65rem;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.mfa-status.enabled .badge {
|
||||
background: var(--ok);
|
||||
color: var(--paper);
|
||||
}
|
||||
.mfa-status .badge.off {
|
||||
background: var(--ink-muted);
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.mfa-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.mfa-actions button {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.92rem;
|
||||
padding: 8px 16px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--ink);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.mfa-actions button.primary {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
.mfa-actions button:hover {
|
||||
background: var(--accent);
|
||||
color: var(--paper);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.mfa-enroll {
|
||||
padding: 20px;
|
||||
background: var(--paper-deep);
|
||||
border: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.enroll-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.enroll-qr {
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--rule);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.enroll-qr img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.enroll-step {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.secret-box {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.08em;
|
||||
background: var(--ink);
|
||||
color: var(--highlight);
|
||||
padding: 10px 14px;
|
||||
margin: 0 0 16px;
|
||||
word-break: break-all;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.confirm-form { margin-top: 4px; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.enroll-grid { grid-template-columns: 1fr; }
|
||||
.enroll-qr { max-width: 240px; margin: 0 auto; }
|
||||
.admin-main { padding: 20px; }
|
||||
.masthead { padding: 14px 20px; }
|
||||
.user-table th:nth-child(4),
|
||||
.user-table td:nth-child(4) { display: none; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TOAST
|
||||
============================================================ */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding: 12px 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.06em;
|
||||
border-left: 3px solid var(--accent);
|
||||
z-index: 1000;
|
||||
animation: toastSlide 0.3s ease-out;
|
||||
}
|
||||
@keyframes toastSlide {
|
||||
from { opacity: 0; transform: translate(-50%, 20px); }
|
||||
to { opacity: 1; transform: translate(-50%, 0); }
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid var(--paper); }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
|
||||
@@ -0,0 +1,866 @@
|
||||
/* ============================================================
|
||||
PST Archive — Admin panel
|
||||
- Login (with MFA)
|
||||
- User CRUD: list, create, delete, change role, reset password
|
||||
- MFA: begin enrollment, scan QR, confirm 6-digit code, disable
|
||||
============================================================ */
|
||||
|
||||
const API = "/api";
|
||||
const state = {
|
||||
user: null,
|
||||
users: [],
|
||||
folders: [],
|
||||
files: [],
|
||||
mfaTarget: null,
|
||||
folderEdit: null, // {id, name} if renaming, null if creating
|
||||
activeTab: "users",
|
||||
permissions: { users: [], folders: [], grants: [] },
|
||||
permView: "by-user", // "by-user" or "by-folder"
|
||||
};
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
// ---------- helpers ----------
|
||||
function fmtDate(iso) {
|
||||
if (!iso) return "—";
|
||||
try {
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d)) return iso;
|
||||
return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
|
||||
} catch { return iso; }
|
||||
}
|
||||
|
||||
function fmtBytes(n) {
|
||||
if (!n && n !== 0) return "—";
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
let i = 0;
|
||||
while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
|
||||
return `${n.toFixed(i ? 1 : 0)} ${units[i]}`;
|
||||
}
|
||||
|
||||
function fmtDateTime(iso) {
|
||||
if (!iso) return "never";
|
||||
try {
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d)) return iso;
|
||||
return d.toLocaleString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
|
||||
} catch { return iso; }
|
||||
}
|
||||
|
||||
function toast(msg, ms = 3000) {
|
||||
const el = $("toast");
|
||||
el.textContent = msg;
|
||||
el.classList.remove("hidden");
|
||||
clearTimeout(toast._t);
|
||||
toast._t = setTimeout(() => el.classList.add("hidden"), ms);
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
if (s == null) return "";
|
||||
return String(s)
|
||||
.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">")
|
||||
.replace(/"/g, """).replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// ---------- API ----------
|
||||
async function api(path, opts = {}) {
|
||||
const res = await fetch(API + path, { credentials: "same-origin", ...opts });
|
||||
let body = null;
|
||||
try { body = await res.json(); } catch {}
|
||||
if (!res.ok) {
|
||||
const err = new Error((body && body.detail) || res.statusText);
|
||||
err.status = res.status;
|
||||
err.body = body || {};
|
||||
throw err;
|
||||
}
|
||||
return body;
|
||||
}
|
||||
|
||||
// ---------- screens ----------
|
||||
function showScreen(which) {
|
||||
["setupNotice", "loginScreen", "adminApp"].forEach((id) => {
|
||||
$(id).classList.toggle("hidden", id !== which);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- bootstrap ----------
|
||||
async function bootstrap() {
|
||||
try {
|
||||
const { user } = await api("/me");
|
||||
state.user = user;
|
||||
enterAdmin();
|
||||
return;
|
||||
} catch (e) {
|
||||
if (e.status !== 401) { toast("Connection problem"); }
|
||||
}
|
||||
|
||||
try {
|
||||
const { needs_setup } = await api("/setup/status");
|
||||
if (needs_setup) {
|
||||
$("gotoMainBtn").href = window.location.protocol + "//" + window.location.hostname + ":8000/";
|
||||
showScreen("setupNotice");
|
||||
} else {
|
||||
showScreen("loginScreen");
|
||||
setTimeout(() => $("loginForm").username?.focus(), 50);
|
||||
}
|
||||
} catch {
|
||||
showScreen("loginScreen");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- login ----------
|
||||
async function handleLogin(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const errEl = $("loginError");
|
||||
errEl.classList.add("hidden");
|
||||
|
||||
const payload = {
|
||||
username: form.username.value.trim(),
|
||||
password: form.password.value,
|
||||
};
|
||||
const mfa = form.totp_code.value.trim();
|
||||
if (mfa) payload.totp_code = mfa;
|
||||
|
||||
try {
|
||||
const { user } = await api("/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
state.user = user;
|
||||
enterAdmin();
|
||||
} catch (err) {
|
||||
if (err.status === 401 && err.body && err.body.mfa_required) {
|
||||
$("mfaField").classList.remove("hidden");
|
||||
setTimeout(() => form.totp_code.focus(), 50);
|
||||
errEl.textContent = "Enter your authenticator code to continue.";
|
||||
errEl.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
errEl.textContent = err.message || "Login failed.";
|
||||
errEl.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
try { await api("/logout", { method: "POST" }); } catch {}
|
||||
state.user = null;
|
||||
showScreen("loginScreen");
|
||||
$("loginForm").reset();
|
||||
$("mfaField").classList.add("hidden");
|
||||
$("loginError").classList.add("hidden");
|
||||
}
|
||||
|
||||
function enterAdmin() {
|
||||
showScreen("adminApp");
|
||||
$("userChip").textContent = `${state.user.username} · admin`;
|
||||
loadUsers();
|
||||
}
|
||||
|
||||
// ---------- users ----------
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const users = await api("/users");
|
||||
state.users = users;
|
||||
renderUsers();
|
||||
} catch (e) {
|
||||
if (e.status === 401) { handleLogout(); return; }
|
||||
toast(`Failed to load users: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function renderUsers() {
|
||||
const tbody = $("userTableBody");
|
||||
$("userCount").textContent =
|
||||
`${state.users.length} user${state.users.length === 1 ? "" : "s"} · ` +
|
||||
`${state.users.filter(u => u.role === "admin").length} admin${state.users.filter(u => u.role === "admin").length === 1 ? "" : "s"}`;
|
||||
|
||||
if (!state.users.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty-row">No users yet.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = state.users.map((u) => {
|
||||
const isMe = u.id === state.user.id;
|
||||
return `
|
||||
<tr data-id="${u.id}">
|
||||
<td class="username-cell">
|
||||
${escapeHtml(u.username)}
|
||||
${isMe ? '<span class="me-tag">you</span>' : ""}
|
||||
</td>
|
||||
<td>
|
||||
<span class="role-pill ${u.role}" data-action="toggle-role" data-id="${u.id}" title="Click to change role">${escapeHtml(u.role)}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="mfa-indicator ${u.mfa_enabled ? 'on' : ''}">
|
||||
<span class="mfa-dot"></span>${u.mfa_enabled ? "enabled" : "disabled"}
|
||||
</span>
|
||||
</td>
|
||||
<td class="date-cell">${fmtDate(u.created_at)}</td>
|
||||
<td class="date-cell">${fmtDateTime(u.last_login)}</td>
|
||||
<td>
|
||||
<div class="row-actions">
|
||||
<button data-action="mfa" data-id="${u.id}">MFA</button>
|
||||
<button data-action="password" data-id="${u.id}">Password</button>
|
||||
<button data-action="delete" data-id="${u.id}" class="danger" ${isMe ? "disabled" : ""}>Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`;
|
||||
}).join("");
|
||||
|
||||
tbody.querySelectorAll("[data-action]").forEach((el) => {
|
||||
el.addEventListener("click", handleAction);
|
||||
});
|
||||
}
|
||||
|
||||
async function handleAction(e) {
|
||||
const action = e.currentTarget.dataset.action;
|
||||
const id = e.currentTarget.dataset.id;
|
||||
const user = state.users.find((u) => u.id === id);
|
||||
if (!user) return;
|
||||
|
||||
switch (action) {
|
||||
case "toggle-role":
|
||||
await toggleRole(user);
|
||||
break;
|
||||
case "password":
|
||||
openResetPassword(user);
|
||||
break;
|
||||
case "mfa":
|
||||
openMfaModal(user);
|
||||
break;
|
||||
case "delete":
|
||||
await deleteUser(user);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleRole(user) {
|
||||
const newRole = user.role === "admin" ? "user" : "admin";
|
||||
if (!confirm(`Change ${user.username}'s role from "${user.role}" to "${newRole}"?`)) return;
|
||||
try {
|
||||
await api(`/users/${user.id}/role`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ role: newRole }),
|
||||
});
|
||||
toast(`${user.username} is now ${newRole}`);
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
toast(`Role change failed: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteUser(user) {
|
||||
if (!confirm(`Permanently delete user "${user.username}"?\n\nThis cannot be undone.`)) return;
|
||||
try {
|
||||
await api(`/users/${user.id}`, { method: "DELETE" });
|
||||
toast(`${user.username} deleted`);
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
toast(`Delete failed: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- create user modal ----------
|
||||
function openCreateUser() {
|
||||
$("createUserForm").reset();
|
||||
$("createError").classList.add("hidden");
|
||||
$("createUserModal").classList.remove("hidden");
|
||||
setTimeout(() => $("createUserForm").username.focus(), 50);
|
||||
}
|
||||
|
||||
async function handleCreateUser(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const errEl = $("createError");
|
||||
errEl.classList.add("hidden");
|
||||
const payload = {
|
||||
username: form.username.value.trim(),
|
||||
password: form.password.value,
|
||||
role: form.role.value,
|
||||
};
|
||||
try {
|
||||
await api("/users", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
toast(`User "${payload.username}" created`);
|
||||
closeModals();
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message || "Create failed.";
|
||||
errEl.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- reset password modal ----------
|
||||
function openResetPassword(user) {
|
||||
$("resetPasswordSubject").textContent = `Setting new password for ${user.username}`;
|
||||
$("resetPasswordForm").reset();
|
||||
$("resetError").classList.add("hidden");
|
||||
$("resetPasswordForm").dataset.userId = user.id;
|
||||
$("resetPasswordModal").classList.remove("hidden");
|
||||
setTimeout(() => $("resetPasswordForm").password.focus(), 50);
|
||||
}
|
||||
|
||||
async function handleResetPassword(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const errEl = $("resetError");
|
||||
errEl.classList.add("hidden");
|
||||
const userId = form.dataset.userId;
|
||||
try {
|
||||
await api(`/users/${userId}/password`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ password: form.password.value }),
|
||||
});
|
||||
toast("Password updated");
|
||||
closeModals();
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message || "Reset failed.";
|
||||
errEl.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- MFA modal ----------
|
||||
function openMfaModal(user) {
|
||||
state.mfaTarget = { user_id: user.id, username: user.username, mfa_enabled: user.mfa_enabled };
|
||||
$("mfaSubject").textContent = `${user.username}`;
|
||||
$("mfaEnrollPanel").classList.add("hidden");
|
||||
renderMfaPanel();
|
||||
$("mfaModal").classList.remove("hidden");
|
||||
}
|
||||
|
||||
function renderMfaPanel() {
|
||||
const enabled = state.mfaTarget.mfa_enabled;
|
||||
const statusEl = $("mfaCurrentStatus");
|
||||
statusEl.className = "mfa-status" + (enabled ? " enabled" : "");
|
||||
statusEl.innerHTML = enabled
|
||||
? `<span class="badge">Enabled</span> This user is required to enter a TOTP code at login.`
|
||||
: `<span class="badge off">Disabled</span> This user signs in with password only.`;
|
||||
|
||||
const actions = $("mfaActions");
|
||||
actions.innerHTML = enabled
|
||||
? `<button data-mfa-action="disable">Disable MFA</button>
|
||||
<button data-mfa-action="reenroll" class="primary">Re-enroll</button>`
|
||||
: `<button data-mfa-action="enroll" class="primary">Begin enrollment</button>`;
|
||||
|
||||
actions.querySelectorAll("[data-mfa-action]").forEach((b) => {
|
||||
b.addEventListener("click", () => handleMfaAction(b.dataset.mfaAction));
|
||||
});
|
||||
}
|
||||
|
||||
async function handleMfaAction(action) {
|
||||
const userId = state.mfaTarget.user_id;
|
||||
if (action === "disable") {
|
||||
if (!confirm(`Disable MFA for ${state.mfaTarget.username}?`)) return;
|
||||
try {
|
||||
await api(`/users/${userId}/mfa/disable`, { method: "POST" });
|
||||
toast("MFA disabled");
|
||||
state.mfaTarget.mfa_enabled = false;
|
||||
renderMfaPanel();
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
toast(`Disable failed: ${err.message}`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// enroll or re-enroll — generate a fresh secret
|
||||
try {
|
||||
const res = await api(`/users/${userId}/mfa/begin`, { method: "POST" });
|
||||
$("mfaSecretText").textContent = res.secret;
|
||||
// Add cache-busting param so the QR re-renders with the new secret
|
||||
$("mfaQrImage").src = `${API}/users/${userId}/mfa/qr?t=${Date.now()}`;
|
||||
$("mfaEnrollPanel").classList.remove("hidden");
|
||||
$("mfaConfirmError").classList.add("hidden");
|
||||
$("mfaConfirmForm").reset();
|
||||
setTimeout(() => $("mfaConfirmForm").totp_code.focus(), 100);
|
||||
} catch (err) {
|
||||
toast(`Enrollment failed: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMfaConfirm(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const errEl = $("mfaConfirmError");
|
||||
errEl.classList.add("hidden");
|
||||
const userId = state.mfaTarget.user_id;
|
||||
try {
|
||||
await api(`/users/${userId}/mfa/confirm`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ totp_code: form.totp_code.value.trim() }),
|
||||
});
|
||||
toast(`MFA enabled for ${state.mfaTarget.username}`);
|
||||
state.mfaTarget.mfa_enabled = true;
|
||||
$("mfaEnrollPanel").classList.add("hidden");
|
||||
renderMfaPanel();
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message || "Confirmation failed.";
|
||||
errEl.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- modals ----------
|
||||
function closeModals() {
|
||||
document.querySelectorAll(".modal").forEach((m) => m.classList.add("hidden"));
|
||||
}
|
||||
|
||||
// ---------- Theme ----------
|
||||
function initTheme() {
|
||||
let theme = "light";
|
||||
try {
|
||||
const saved = localStorage.getItem("pst-theme");
|
||||
if (saved === "light" || saved === "dark") {
|
||||
theme = saved;
|
||||
} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
theme = "dark";
|
||||
}
|
||||
} catch {}
|
||||
document.documentElement.dataset.theme = theme;
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const current = document.documentElement.dataset.theme === "dark" ? "dark" : "light";
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
document.documentElement.dataset.theme = next;
|
||||
try { localStorage.setItem("pst-theme", next); } catch {}
|
||||
}
|
||||
|
||||
initTheme();
|
||||
|
||||
// ---------- Tabs ----------
|
||||
function switchTab(tab) {
|
||||
state.activeTab = tab;
|
||||
document.querySelectorAll(".admin-tab").forEach((el) => {
|
||||
el.classList.toggle("active", el.dataset.tab === tab);
|
||||
});
|
||||
document.querySelectorAll(".admin-panel").forEach((el) => {
|
||||
el.classList.toggle("hidden", el.dataset.panel !== tab);
|
||||
});
|
||||
if (tab === "users") loadUsers();
|
||||
else if (tab === "folders") loadFolders();
|
||||
else if (tab === "files") loadFiles();
|
||||
else if (tab === "permissions") loadPermissions();
|
||||
}
|
||||
|
||||
// ---------- Folder management ----------
|
||||
async function loadFolders() {
|
||||
try {
|
||||
const folders = await api("/folders");
|
||||
state.folders = folders;
|
||||
renderFolders();
|
||||
} catch (e) {
|
||||
if (e.status === 401) { handleLogout(); return; }
|
||||
toast(`Failed to load folders: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function renderFolders() {
|
||||
const tbody = $("folderTableBody");
|
||||
$("folderCount").textContent =
|
||||
`${state.folders.length} folder${state.folders.length === 1 ? "" : "s"}`;
|
||||
|
||||
if (!state.folders.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="empty-row">No folders yet. Click "+ New folder" to create one.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = state.folders.map((f) => `
|
||||
<tr data-id="${f.id}">
|
||||
<td class="username-cell">${escapeHtml(f.name)}</td>
|
||||
<td class="num-cell">${f.file_count}</td>
|
||||
<td class="date-cell">${fmtDate(f.created_at)}</td>
|
||||
<td>
|
||||
<div class="row-actions">
|
||||
<button data-folder-action="rename" data-id="${f.id}">Rename</button>
|
||||
<button data-folder-action="delete" data-id="${f.id}" class="danger">Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`).join("");
|
||||
|
||||
tbody.querySelectorAll("[data-folder-action]").forEach((el) => {
|
||||
el.addEventListener("click", handleFolderAction);
|
||||
});
|
||||
}
|
||||
|
||||
function handleFolderAction(e) {
|
||||
const action = e.currentTarget.dataset.folderAction;
|
||||
const id = e.currentTarget.dataset.id;
|
||||
const folder = state.folders.find((f) => f.id === id);
|
||||
if (!folder) return;
|
||||
if (action === "rename") openFolderModal(folder);
|
||||
else if (action === "delete") deleteFolder(folder);
|
||||
}
|
||||
|
||||
function openFolderModal(folder = null) {
|
||||
state.folderEdit = folder;
|
||||
$("folderForm").reset();
|
||||
$("folderError").classList.add("hidden");
|
||||
if (folder) {
|
||||
$("folderModalTitle").textContent = "Rename folder";
|
||||
$("folderSubmitBtn").textContent = "Save changes";
|
||||
$("folderForm").name.value = folder.name;
|
||||
} else {
|
||||
$("folderModalTitle").textContent = "New folder";
|
||||
$("folderSubmitBtn").textContent = "Create folder";
|
||||
}
|
||||
$("folderModal").classList.remove("hidden");
|
||||
setTimeout(() => $("folderForm").name.focus(), 50);
|
||||
}
|
||||
|
||||
async function handleFolderSubmit(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const errEl = $("folderError");
|
||||
errEl.classList.add("hidden");
|
||||
const name = form.name.value.trim();
|
||||
try {
|
||||
if (state.folderEdit) {
|
||||
await api(`/folders/${state.folderEdit.id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
toast("Folder renamed.");
|
||||
} else {
|
||||
await api("/folders", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
toast("Folder created.");
|
||||
}
|
||||
closeModals();
|
||||
loadFolders();
|
||||
if (state.activeTab === "files") loadFiles();
|
||||
if (state.activeTab === "permissions") loadPermissions();
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message || "Save failed.";
|
||||
errEl.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFolder(folder) {
|
||||
const msg = folder.file_count > 0
|
||||
? `Delete folder "${folder.name}"?\n\n${folder.file_count} archive${folder.file_count === 1 ? "" : "s"} will be moved to Uncategorized.`
|
||||
: `Delete folder "${folder.name}"?`;
|
||||
if (!confirm(msg)) return;
|
||||
try {
|
||||
await api(`/folders/${folder.id}`, { method: "DELETE" });
|
||||
toast("Folder deleted.");
|
||||
loadFolders();
|
||||
if (state.activeTab === "files") loadFiles();
|
||||
if (state.activeTab === "permissions") loadPermissions();
|
||||
} catch (err) {
|
||||
toast(`Delete failed: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- File management ----------
|
||||
async function loadFiles() {
|
||||
try {
|
||||
const files = await api("/pst-files");
|
||||
state.files = files;
|
||||
renderFiles();
|
||||
} catch (e) {
|
||||
if (e.status === 401) { handleLogout(); return; }
|
||||
toast(`Failed to load files: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function renderFiles() {
|
||||
const tbody = $("fileTableBody");
|
||||
const total = state.files.length;
|
||||
const totalSize = state.files.reduce((s, f) => s + (f.size_bytes || 0), 0);
|
||||
$("fileCount").textContent = total
|
||||
? `${total} file${total === 1 ? "" : "s"} · ${fmtBytes(totalSize)} total`
|
||||
: "no files";
|
||||
|
||||
if (!total) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" class="empty-row">No PST files have been uploaded yet.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = state.files.map((f) => `
|
||||
<tr data-id="${f.id}">
|
||||
<td class="filename-cell" title="${escapeHtml(f.original_name)}">${escapeHtml(f.original_name)}</td>
|
||||
<td class="folder-cell ${f.folder_name ? "" : "uncategorized"}">${f.folder_name ? escapeHtml(f.folder_name) : "Uncategorized"}</td>
|
||||
<td class="size-cell">${fmtBytes(f.size_bytes)}</td>
|
||||
<td><span class="status-pill ${f.status}">${f.status}</span></td>
|
||||
<td class="num-cell">${f.status === "ready" ? (f.message_count || 0).toLocaleString() : "—"}</td>
|
||||
<td class="date-cell">${fmtDate(f.uploaded_at)}</td>
|
||||
<td>
|
||||
<div class="row-actions">
|
||||
<button data-file-action="delete" data-id="${f.id}" class="danger">Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`).join("");
|
||||
|
||||
tbody.querySelectorAll("[data-file-action]").forEach((el) => {
|
||||
el.addEventListener("click", handleFileAction);
|
||||
});
|
||||
}
|
||||
|
||||
function handleFileAction(e) {
|
||||
const action = e.currentTarget.dataset.fileAction;
|
||||
const id = e.currentTarget.dataset.id;
|
||||
const file = state.files.find((f) => f.id === id);
|
||||
if (!file) return;
|
||||
if (action === "delete") deleteFile(file);
|
||||
}
|
||||
|
||||
async function deleteFile(file) {
|
||||
if (!confirm(`Permanently delete "${file.original_name}"?\n\nThis removes the PST file and all ${(file.message_count || 0).toLocaleString()} indexed messages. Cannot be undone.`)) return;
|
||||
try {
|
||||
await api(`/pst-files/${file.id}`, { method: "DELETE" });
|
||||
toast("File deleted.");
|
||||
loadFiles();
|
||||
if (state.activeTab === "folders") loadFolders(); // counts change
|
||||
} catch (err) {
|
||||
toast(`Delete failed: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Permissions ----------
|
||||
async function loadPermissions() {
|
||||
try {
|
||||
const data = await api("/permissions");
|
||||
state.permissions = data;
|
||||
renderPermissions();
|
||||
} catch (e) {
|
||||
if (e.status === 401) { handleLogout(); return; }
|
||||
toast(`Failed to load permissions: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function hasGrant(userId, folderId) {
|
||||
return state.permissions.grants.some(
|
||||
(g) => g.user_id === userId && g.folder_id === folderId
|
||||
);
|
||||
}
|
||||
|
||||
function renderPermissions() {
|
||||
const { users, folders } = state.permissions;
|
||||
const nonAdmins = users.filter((u) => u.role !== "admin");
|
||||
const adminCount = users.length - nonAdmins.length;
|
||||
|
||||
$("permissionsMeta").textContent =
|
||||
`${users.length} user${users.length === 1 ? "" : "s"}` +
|
||||
` (${adminCount} admin${adminCount === 1 ? "" : "s"}) · ` +
|
||||
`${folders.length} folder${folders.length === 1 ? "" : "s"}`;
|
||||
|
||||
const thead = $("permMatrixHead");
|
||||
const tbody = $("permMatrixBody");
|
||||
|
||||
if (!folders.length) {
|
||||
thead.innerHTML = "";
|
||||
tbody.innerHTML = `<tr><td class="perm-empty">
|
||||
No folders yet. Create one in the Folders tab to start assigning access.
|
||||
</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.permView === "by-user") {
|
||||
renderPermByUser(thead, tbody, users, folders);
|
||||
} else {
|
||||
renderPermByFolder(thead, tbody, users, folders, nonAdmins);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPermByUser(thead, tbody, users, folders) {
|
||||
// Rows = users, Columns = folders
|
||||
thead.innerHTML = `
|
||||
<tr>
|
||||
<th class="rowhead">User</th>
|
||||
${folders.map((f) => `<th class="col-header" title="${escapeHtml(f.name)}">${escapeHtml(f.name)}</th>`).join("")}
|
||||
</tr>
|
||||
`;
|
||||
|
||||
tbody.innerHTML = users.map((u) => {
|
||||
const isAdmin = u.role === "admin";
|
||||
const rowClass = isAdmin ? "admin-row" : "";
|
||||
return `
|
||||
<tr data-user-id="${u.id}">
|
||||
<td class="rowhead rowlabel ${rowClass}">
|
||||
${escapeHtml(u.username)}
|
||||
${isAdmin ? '<span class="role-tag">admin</span>' : ""}
|
||||
</td>
|
||||
${folders.map((f) => {
|
||||
if (isAdmin) {
|
||||
return `<td class="cell implicit" title="Admins have access to all folders"></td>`;
|
||||
}
|
||||
const checked = hasGrant(u.id, f.id) ? "checked" : "";
|
||||
return `
|
||||
<td class="cell">
|
||||
<label>
|
||||
<input type="checkbox" data-perm-toggle
|
||||
data-user="${u.id}" data-folder="${f.id}"
|
||||
${checked} />
|
||||
</label>
|
||||
</td>
|
||||
`;
|
||||
}).join("")}
|
||||
</tr>
|
||||
`;
|
||||
}).join("");
|
||||
|
||||
bindPermToggles();
|
||||
}
|
||||
|
||||
function renderPermByFolder(thead, tbody, users, folders, nonAdmins) {
|
||||
// Rows = folders, Columns = non-admin users (admins don't need toggles)
|
||||
if (!nonAdmins.length) {
|
||||
thead.innerHTML = "";
|
||||
tbody.innerHTML = `<tr><td class="perm-empty">
|
||||
No non-admin users exist yet. Create one in the Users tab to start assigning access.
|
||||
</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
thead.innerHTML = `
|
||||
<tr>
|
||||
<th class="rowhead">Folder</th>
|
||||
${nonAdmins.map((u) => `<th class="col-header" title="${escapeHtml(u.username)}">${escapeHtml(u.username)}</th>`).join("")}
|
||||
</tr>
|
||||
`;
|
||||
|
||||
tbody.innerHTML = folders.map((f) => `
|
||||
<tr data-folder-id="${f.id}">
|
||||
<td class="rowhead rowlabel">${escapeHtml(f.name)}</td>
|
||||
${nonAdmins.map((u) => {
|
||||
const checked = hasGrant(u.id, f.id) ? "checked" : "";
|
||||
return `
|
||||
<td class="cell">
|
||||
<label>
|
||||
<input type="checkbox" data-perm-toggle
|
||||
data-user="${u.id}" data-folder="${f.id}"
|
||||
${checked} />
|
||||
</label>
|
||||
</td>
|
||||
`;
|
||||
}).join("")}
|
||||
</tr>
|
||||
`).join("");
|
||||
|
||||
bindPermToggles();
|
||||
}
|
||||
|
||||
function bindPermToggles() {
|
||||
document.querySelectorAll("[data-perm-toggle]").forEach((cb) => {
|
||||
cb.addEventListener("change", handlePermToggle);
|
||||
});
|
||||
}
|
||||
|
||||
async function handlePermToggle(e) {
|
||||
const cb = e.currentTarget;
|
||||
const userId = cb.dataset.user;
|
||||
const folderId = cb.dataset.folder;
|
||||
const granted = cb.checked;
|
||||
|
||||
// Optimistically update local state
|
||||
if (granted) {
|
||||
if (!hasGrant(userId, folderId)) {
|
||||
state.permissions.grants.push({
|
||||
user_id: userId, folder_id: folderId,
|
||||
granted_at: new Date().toISOString(),
|
||||
});
|
||||
}
|
||||
} else {
|
||||
state.permissions.grants = state.permissions.grants.filter(
|
||||
(g) => !(g.user_id === userId && g.folder_id === folderId)
|
||||
);
|
||||
}
|
||||
|
||||
cb.disabled = true;
|
||||
try {
|
||||
await api(`/permissions/${userId}/${folderId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ granted }),
|
||||
});
|
||||
const folder = state.permissions.folders.find((f) => f.id === folderId);
|
||||
const user = state.permissions.users.find((u) => u.id === userId);
|
||||
toast(
|
||||
granted
|
||||
? `Granted "${user?.username}" access to "${folder?.name}"`
|
||||
: `Revoked "${user?.username}" access to "${folder?.name}"`
|
||||
);
|
||||
} catch (err) {
|
||||
// Revert on failure
|
||||
cb.checked = !granted;
|
||||
if (granted) {
|
||||
state.permissions.grants = state.permissions.grants.filter(
|
||||
(g) => !(g.user_id === userId && g.folder_id === folderId)
|
||||
);
|
||||
} else {
|
||||
state.permissions.grants.push({
|
||||
user_id: userId, folder_id: folderId,
|
||||
granted_at: new Date().toISOString(),
|
||||
});
|
||||
}
|
||||
toast(`Failed: ${err.message}`);
|
||||
} finally {
|
||||
cb.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function switchPermView(view) {
|
||||
state.permView = view;
|
||||
document.querySelectorAll(".view-btn").forEach((b) => {
|
||||
b.classList.toggle("active", b.dataset.view === view);
|
||||
});
|
||||
renderPermissions();
|
||||
}
|
||||
|
||||
// ---------- init ----------
|
||||
function init() {
|
||||
$("loginForm").addEventListener("submit", handleLogin);
|
||||
$("logoutBtn").addEventListener("click", handleLogout);
|
||||
$("newUserBtn").addEventListener("click", openCreateUser);
|
||||
$("createUserForm").addEventListener("submit", handleCreateUser);
|
||||
$("resetPasswordForm").addEventListener("submit", handleResetPassword);
|
||||
$("mfaConfirmForm").addEventListener("submit", handleMfaConfirm);
|
||||
|
||||
// Tab switching
|
||||
document.querySelectorAll(".admin-tab").forEach((el) => {
|
||||
el.addEventListener("click", () => switchTab(el.dataset.tab));
|
||||
});
|
||||
|
||||
// Permissions view switcher (by-user / by-folder)
|
||||
document.querySelectorAll(".view-btn").forEach((el) => {
|
||||
el.addEventListener("click", () => switchPermView(el.dataset.view));
|
||||
});
|
||||
|
||||
// Folder modal
|
||||
$("newFolderBtn").addEventListener("click", () => openFolderModal(null));
|
||||
$("folderForm").addEventListener("submit", handleFolderSubmit);
|
||||
|
||||
["themeToggle", "themeToggleFloat"].forEach((id) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.addEventListener("click", toggleTheme);
|
||||
});
|
||||
|
||||
document.querySelectorAll("[data-close]").forEach((el) => {
|
||||
el.addEventListener("click", closeModals);
|
||||
});
|
||||
document.querySelectorAll(".modal").forEach((m) => {
|
||||
m.addEventListener("click", (e) => {
|
||||
if (e.target === m) closeModals();
|
||||
});
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") closeModals();
|
||||
});
|
||||
|
||||
bootstrap();
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
@@ -0,0 +1,318 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>PST Archive · Admin Panel</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,400&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/admin.css" />
|
||||
<script>
|
||||
(function() {
|
||||
try {
|
||||
var t = localStorage.getItem("pst-theme");
|
||||
if (t !== "light" && t !== "dark") {
|
||||
t = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
|
||||
}
|
||||
document.documentElement.dataset.theme = t;
|
||||
} catch (e) {
|
||||
document.documentElement.dataset.theme = "light";
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grain"></div>
|
||||
|
||||
<!-- Floating theme toggle (visible on login/setup screens) -->
|
||||
<button id="themeToggleFloat" class="theme-toggle theme-toggle-float" title="Toggle theme" aria-label="Toggle theme">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><line x1="12" y1="2" x2="12" y2="4.5"/><line x1="12" y1="19.5" x2="12" y2="22"/><line x1="2" y1="12" x2="4.5" y2="12"/><line x1="19.5" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.7" y2="6.7"/><line x1="17.3" y1="17.3" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.7" y2="17.3"/><line x1="17.3" y1="6.7" x2="19.1" y2="4.9"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A9 9 0 019.5 4a7.5 7.5 0 1010.5 10.5z"/></svg>
|
||||
</button>
|
||||
|
||||
<!-- FIRST-RUN NOTICE -->
|
||||
<section id="setupNotice" class="auth-screen hidden">
|
||||
<div class="auth-card">
|
||||
<div class="auth-brand">
|
||||
<span class="admin-badge">ADMIN</span>
|
||||
<h1>Setup Required</h1>
|
||||
<p class="auth-tagline">No administrator exists yet</p>
|
||||
</div>
|
||||
<div class="auth-form">
|
||||
<p class="auth-intro">Please complete first-run setup in the main application before signing in here.</p>
|
||||
<a id="gotoMainBtn" class="auth-btn" href="#">Open main app →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LOGIN -->
|
||||
<section id="loginScreen" class="auth-screen hidden">
|
||||
<div class="auth-card">
|
||||
<div class="auth-brand">
|
||||
<span class="admin-badge">ADMIN</span>
|
||||
<h1>PST Archive</h1>
|
||||
<p class="auth-tagline">Admin panel · sign in</p>
|
||||
</div>
|
||||
<form id="loginForm" class="auth-form" novalidate>
|
||||
<label class="auth-label">
|
||||
<span>Username</span>
|
||||
<input type="text" name="username" autocomplete="username" required />
|
||||
</label>
|
||||
<label class="auth-label">
|
||||
<span>Password</span>
|
||||
<input type="password" name="password" autocomplete="current-password" required />
|
||||
</label>
|
||||
<label id="mfaField" class="auth-label hidden">
|
||||
<span>Authentication code</span>
|
||||
<input type="text" name="totp_code" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]*" maxlength="6" placeholder="6-digit code" />
|
||||
<small>From your authenticator app</small>
|
||||
</label>
|
||||
<button type="submit" class="auth-btn">Sign in</button>
|
||||
<div id="loginError" class="auth-error hidden"></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ADMIN APP -->
|
||||
<div id="adminApp" class="hidden">
|
||||
<header class="masthead">
|
||||
<div class="masthead-left">
|
||||
<span class="admin-badge small">ADMIN</span>
|
||||
<div class="masthead-title">
|
||||
<h1>User Management</h1>
|
||||
<p class="tagline">PST Archive · control panel</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masthead-right">
|
||||
<span id="userChip" class="user-chip"></span>
|
||||
<button id="themeToggle" class="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><line x1="12" y1="2" x2="12" y2="4.5"/><line x1="12" y1="19.5" x2="12" y2="22"/><line x1="2" y1="12" x2="4.5" y2="12"/><line x1="19.5" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="6.7" y2="6.7"/><line x1="17.3" y1="17.3" x2="19.1" y2="19.1"/><line x1="4.9" y1="19.1" x2="6.7" y2="17.3"/><line x1="17.3" y1="6.7" x2="19.1" y2="4.9"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A9 9 0 019.5 4a7.5 7.5 0 1010.5 10.5z"/></svg>
|
||||
</button>
|
||||
<button id="logoutBtn" class="logout-btn">Sign out</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="admin-main">
|
||||
<nav class="admin-tabs" role="tablist">
|
||||
<button class="admin-tab active" data-tab="users" role="tab">Users</button>
|
||||
<button class="admin-tab" data-tab="folders" role="tab">Folders</button>
|
||||
<button class="admin-tab" data-tab="files" role="tab">Files</button>
|
||||
<button class="admin-tab" data-tab="permissions" role="tab">Permissions</button>
|
||||
</nav>
|
||||
|
||||
<!-- USERS TAB -->
|
||||
<section class="admin-panel" data-panel="users">
|
||||
<div class="admin-toolbar">
|
||||
<div>
|
||||
<h2 class="section-heading">Users</h2>
|
||||
<p class="toolbar-meta" id="userCount">—</p>
|
||||
</div>
|
||||
<button id="newUserBtn" class="primary-btn">+ New user</button>
|
||||
</div>
|
||||
<div class="user-list-wrap">
|
||||
<table class="user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Role</th>
|
||||
<th>MFA</th>
|
||||
<th>Created</th>
|
||||
<th>Last login</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="userTableBody">
|
||||
<tr><td colspan="6" class="loading-row">Loading users…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOLDERS TAB -->
|
||||
<section class="admin-panel hidden" data-panel="folders">
|
||||
<div class="admin-toolbar">
|
||||
<div>
|
||||
<h2 class="section-heading">PST Folders</h2>
|
||||
<p class="toolbar-meta" id="folderCount">—</p>
|
||||
</div>
|
||||
<button id="newFolderBtn" class="primary-btn">+ New folder</button>
|
||||
</div>
|
||||
<div class="user-list-wrap">
|
||||
<table class="user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Archives inside</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="folderTableBody">
|
||||
<tr><td colspan="4" class="loading-row">Loading folders…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FILES TAB -->
|
||||
<section class="admin-panel hidden" data-panel="files">
|
||||
<div class="admin-toolbar">
|
||||
<div>
|
||||
<h2 class="section-heading">PST Files</h2>
|
||||
<p class="toolbar-meta" id="fileCount">—</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-list-wrap">
|
||||
<table class="user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Filename</th>
|
||||
<th>Folder</th>
|
||||
<th>Size</th>
|
||||
<th>Status</th>
|
||||
<th>Messages</th>
|
||||
<th>Uploaded</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fileTableBody">
|
||||
<tr><td colspan="7" class="loading-row">Loading files…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PERMISSIONS TAB -->
|
||||
<section class="admin-panel hidden" data-panel="permissions">
|
||||
<div class="admin-toolbar">
|
||||
<div>
|
||||
<h2 class="section-heading">Folder Access Permissions</h2>
|
||||
<p class="toolbar-meta" id="permissionsMeta">—</p>
|
||||
</div>
|
||||
<div class="view-switch" role="tablist">
|
||||
<button class="view-btn active" data-view="by-user" type="button">By user</button>
|
||||
<button class="view-btn" data-view="by-folder" type="button">By folder</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="perm-hint">
|
||||
Check a box to grant a non-admin user access to a folder. Administrators
|
||||
always see every folder regardless of these settings. "Uncategorized" archives
|
||||
are visible to everyone by default.
|
||||
</p>
|
||||
<div class="perm-matrix-wrap">
|
||||
<table class="user-table perm-matrix" id="permMatrix">
|
||||
<thead id="permMatrixHead"></thead>
|
||||
<tbody id="permMatrixBody">
|
||||
<tr><td class="loading-row">Loading…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- CREATE USER MODAL -->
|
||||
<div id="createUserModal" class="modal hidden">
|
||||
<div class="modal-card">
|
||||
<button class="modal-close" data-close>×</button>
|
||||
<h2>Create new user</h2>
|
||||
<form id="createUserForm" class="auth-form" novalidate>
|
||||
<label class="auth-label">
|
||||
<span>Username</span>
|
||||
<input type="text" name="username" autocomplete="off" required minlength="3" maxlength="64" />
|
||||
</label>
|
||||
<label class="auth-label">
|
||||
<span>Password</span>
|
||||
<input type="password" name="password" autocomplete="new-password" required minlength="8" />
|
||||
<small>Minimum 8 characters</small>
|
||||
</label>
|
||||
<label class="auth-label">
|
||||
<span>Role</span>
|
||||
<select name="role">
|
||||
<option value="user">User (can view archives)</option>
|
||||
<option value="admin">Administrator (full access)</option>
|
||||
</select>
|
||||
</label>
|
||||
<button type="submit" class="auth-btn">Create user</button>
|
||||
<div id="createError" class="auth-error hidden"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RESET PASSWORD MODAL -->
|
||||
<div id="resetPasswordModal" class="modal hidden">
|
||||
<div class="modal-card">
|
||||
<button class="modal-close" data-close>×</button>
|
||||
<h2>Reset password</h2>
|
||||
<p class="modal-subtitle" id="resetPasswordSubject"></p>
|
||||
<form id="resetPasswordForm" class="auth-form" novalidate>
|
||||
<label class="auth-label">
|
||||
<span>New password</span>
|
||||
<input type="password" name="password" autocomplete="new-password" required minlength="8" />
|
||||
<small>Minimum 8 characters</small>
|
||||
</label>
|
||||
<button type="submit" class="auth-btn">Update password</button>
|
||||
<div id="resetError" class="auth-error hidden"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MFA MODAL -->
|
||||
<div id="mfaModal" class="modal hidden">
|
||||
<div class="modal-card wide">
|
||||
<button class="modal-close" data-close>×</button>
|
||||
<h2>Multi-factor authentication</h2>
|
||||
<p class="modal-subtitle" id="mfaSubject"></p>
|
||||
|
||||
<div id="mfaPanel" class="mfa-panel">
|
||||
<div class="mfa-status" id="mfaCurrentStatus"></div>
|
||||
<div class="mfa-actions" id="mfaActions"></div>
|
||||
</div>
|
||||
|
||||
<div id="mfaEnrollPanel" class="mfa-enroll hidden">
|
||||
<div class="enroll-grid">
|
||||
<div class="enroll-qr">
|
||||
<img id="mfaQrImage" src="" alt="TOTP QR code" />
|
||||
</div>
|
||||
<div class="enroll-details">
|
||||
<p class="enroll-step">1. Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.).</p>
|
||||
<p class="enroll-step">2. Or manually enter this secret:</p>
|
||||
<code id="mfaSecretText" class="secret-box"></code>
|
||||
<p class="enroll-step">3. Enter the 6-digit code from the app to confirm.</p>
|
||||
<form id="mfaConfirmForm" class="auth-form confirm-form">
|
||||
<label class="auth-label">
|
||||
<span>Verification code</span>
|
||||
<input type="text" name="totp_code" inputmode="numeric" pattern="[0-9]*" maxlength="6" required />
|
||||
</label>
|
||||
<button type="submit" class="auth-btn">Confirm & enable</button>
|
||||
<div id="mfaConfirmError" class="auth-error hidden"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOLDER CREATE/RENAME MODAL -->
|
||||
<div id="folderModal" class="modal hidden">
|
||||
<div class="modal-card">
|
||||
<button class="modal-close" data-close>×</button>
|
||||
<h2 id="folderModalTitle">New folder</h2>
|
||||
<form id="folderForm" class="auth-form" novalidate>
|
||||
<label class="auth-label">
|
||||
<span>Folder name</span>
|
||||
<input type="text" name="name" maxlength="80" required autocomplete="off" />
|
||||
</label>
|
||||
<button type="submit" class="auth-btn" id="folderSubmitBtn">Create folder</button>
|
||||
<div id="folderError" class="auth-error hidden"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast" class="toast hidden"></div>
|
||||
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user