002e5acb82
Scope (locked in via planning Q&A):
- Identity: local accounts only (PG users table) + existing bearer
tokens for headless callers.
- Transport: httpOnly cookie session for browser, Bearer for API.
- RBAC: admin / editor / viewer roles, plus an orthogonal
is_client flag for external (agency, talent, customer) accounts.
- Bootstrap: ADMIN_BOOTSTRAP_USER + ADMIN_BOOTSTRAP_PASSWORD env
seed the first admin on a clean install. Set ADMIN_BOOTSTRAP_RESET
to force-reset the named user (break-glass).
- Rate limit: in-memory, 10 fails per 15min per (IP, username).
- Password policy: \u22658 chars, mixed case, digit, symbol; small
blocklist of common passwords; cannot equal username.
- Self-service: change own display name + password. Everything
else (role, is_client, other-user mgmt) is admin only.
- Audit log: append-only table, indexed by actor + event_type +
created_at, populated by every auth/admin event.
Files added:
- services/mam-api/src/db/migrations/022-auth-rework.sql
users.is_client + last_login_at + failed_attempts; audit_log
table with FK to users (ON DELETE SET NULL).
- services/mam-api/src/middleware/audit.js
Fire-and-forget audit() helper. Caller never awaits, failure
logs but never throws — auditing cannot break the request
that triggered it.
- services/mam-api/src/middleware/passwordPolicy.js
Shared checkPassword(pw, { username }) used by setup, user
create/update, and self-service password change.
- services/mam-api/src/tasks/bootstrapAdmin.js
Runs after migrations. No-ops unless ADMIN_BOOTSTRAP_USER +
ADMIN_BOOTSTRAP_PASSWORD are set AND (users table empty OR
ADMIN_BOOTSTRAP_RESET=true).
- services/mam-api/src/routes/audit.js
Admin-only GET /audit (paginated, filter by event_type /
actor / target / date) and GET /audit/event-types.
- services/web-ui/public/modal-account-settings.jsx
Profile + Password tabs. Triggered by sidebar user button.
Files rewritten:
- services/mam-api/src/routes/auth.js
- POST /login: regenerate(), no manual save(); audit success/
fail/lockout; updates last_login_at + failed_attempts.
- POST /logout: destroys session, audits logout.
- GET /me: returns is_client + last_login_at. Synthetic admin
when AUTH_ENABLED=false.
- GET /setup-status: drives login.html UI state.
- POST /setup: blocked once any user exists; password policy.
- POST /password: self-service. Requires current pw, runs
policy, audits, invalidates other sessions implicitly via
users.js if changed by admin.
- PATCH /me: self-service display_name update.
- services/mam-api/src/routes/users.js
- is_client field in create/update/list/get.
- Guardrails: cannot delete or demote last admin, cannot
delete self, admins cannot be flagged is_client.
- Password change invalidates all sessions for that user
(DELETE FROM sessions WHERE sess->>'userId' = id).
- Audit on every mutation.
- Password policy enforced.
- services/mam-api/src/middleware/auth.js
- requireAuth now exposes req.user.is_client.
- New requireRole(["admin","editor"], { rejectClients: true })
helper. Applied to cluster, sdk, capture routes (infra).
- Synthetic user when AUTH_ENABLED=false has is_client=false.
- services/mam-api/src/index.js
- Loads bootstrap admin after migrations.
- Wires /api/v1/audit.
- Cleans up an earlier comment block.
- services/web-ui/public/login.html
- Password hint added next to setup-mode password field.
- services/web-ui/public/shell.jsx
- Sidebar user footer is a button that opens AccountSettings.
- CLIENT badge next to role when is_client=true.
- Nav filters: clients lose ingest tree + jobs + editor;
viewers lose ingest + editor; only admins see the Admin
section. Power button hidden when synthetic user.
- services/web-ui/public/screens-admin.jsx
- Users table: new Client column with inline toggle.
- InviteUserModal: Client checkbox + password hint, gated
off when role=admin.
- Last login column replaces Created in primary view.
- CSV export includes client + last_login.
- services/web-ui/public/data.jsx
- ZAMPP_DATA.ME carries is_client + display_name.
- services/web-ui/public/index.html
- Loads dist/modal-account-settings.js.
- services/web-ui/public/styles-rest.css
- .user-row grid widened to 6 columns.
- docker-compose.yml
- Plumbs SESSION_COOKIE_SECURE + ADMIN_BOOTSTRAP_* env vars.
Deploy:
cd /opt/wild-dragon
git pull origin main
# In .env:
# AUTH_ENABLED=true
# SESSION_SECRET=<openssl rand -hex 48>
# ADMIN_BOOTSTRAP_USER=admin
# ADMIN_BOOTSTRAP_PASSWORD=<strong>
docker compose build mam-api web-ui
docker compose up -d --force-recreate --no-deps mam-api web-ui
320 lines
11 KiB
HTML
320 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<title>Sign in - Dragonflight</title>
|
|
<link rel="stylesheet" href="/dist/app.css">
|
|
<style>
|
|
/* Page-only layout. Everything visual is from /dist/app.css primitives. */
|
|
body { display: grid; grid-template-columns: 1fr 460px; min-height: 100vh; margin: 0; }
|
|
@media (max-width: 900px) {
|
|
body { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; }
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: radial-gradient(ellipse at 30% 40%, var(--bg-panel) 0%, var(--bg-deep) 70%);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 48px 56px;
|
|
}
|
|
.hero-img {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url(img/ampp-safe.png?v=hardhat3);
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.hero-grad-bot {
|
|
position: absolute;
|
|
inset: auto 0 0 0;
|
|
height: 40%;
|
|
background: linear-gradient(to top, var(--bg-deep) 0%, transparent 100%);
|
|
pointer-events: none;
|
|
}
|
|
.hero-stamp {
|
|
position: absolute;
|
|
top: 32px;
|
|
left: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
z-index: 2;
|
|
background: var(--overlay);
|
|
backdrop-filter: blur(6px);
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--accent-border);
|
|
border-radius: 999px;
|
|
}
|
|
.hero-stamp-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 10px var(--accent);
|
|
}
|
|
.hero-stamp-text {
|
|
font: 600 10px/1 var(--font);
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--accent-bright);
|
|
}
|
|
.hero-caption {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 520px;
|
|
}
|
|
.hero-caption h2 {
|
|
font: 600 28px/1.15 var(--font);
|
|
letter-spacing: -0.01em;
|
|
color: var(--text-primary);
|
|
margin: 0 0 10px;
|
|
}
|
|
.hero-caption p {
|
|
font: 400 14px/1.55 var(--font);
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
.hero-caption .accent { color: var(--accent-bright); }
|
|
|
|
/* Right column: brand + form panel */
|
|
.panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 48px 56px;
|
|
background: var(--bg-panel);
|
|
border-left: 1px solid var(--border);
|
|
}
|
|
@media (max-width: 900px) {
|
|
.panel { padding: 32px 24px; border-left: none; border-top: 1px solid var(--border); }
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 36px;
|
|
}
|
|
.brand-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--accent);
|
|
color: var(--bg-deep);
|
|
border-radius: 7px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font: 700 15px/1 var(--font);
|
|
}
|
|
.brand-icon img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
.brand-name {
|
|
font: 600 15px/1.2 var(--font);
|
|
letter-spacing: -0.01em;
|
|
color: var(--text-primary);
|
|
}
|
|
.brand-sub {
|
|
font: 500 10px/1 var(--font);
|
|
color: var(--text-tertiary);
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.panel h1 {
|
|
font: 600 22px/1.2 var(--font);
|
|
letter-spacing: -0.01em;
|
|
color: var(--text-primary);
|
|
margin: 0 0 6px;
|
|
}
|
|
.panel .subtitle {
|
|
font: 400 13px/1.5 var(--font);
|
|
color: var(--text-secondary);
|
|
margin: 0 0 28px;
|
|
}
|
|
|
|
/* Flash messages — inline toast-shaped */
|
|
.flash {
|
|
display: none;
|
|
position: relative;
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 18px;
|
|
font: 400 13px/1.4 var(--font);
|
|
color: var(--text-primary);
|
|
}
|
|
.flash::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
.flash.error { display: block; border-color: var(--signal-bad); }
|
|
.flash.error::before { background: var(--signal-bad); }
|
|
.flash.success { display: block; border-color: var(--signal-good); }
|
|
.flash.success::before { background: var(--signal-good); }
|
|
.flash.info { display: block; border-color: var(--accent, #5b7cfa); }
|
|
.flash.info::before { background: var(--accent, #5b7cfa); }
|
|
|
|
.setup-link {
|
|
text-align: center;
|
|
margin-top: 24px;
|
|
font: 400 12px/1.4 var(--font);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.setup-link a {
|
|
color: var(--accent-bright);
|
|
text-decoration: none;
|
|
}
|
|
.setup-link a:hover { color: var(--accent); text-decoration: underline; }
|
|
|
|
#setup-panel { display: none; }
|
|
|
|
/* Make the login button full-width (the primitive is inline-flex by default) */
|
|
.wd-btn--full { width: 100%; margin-top: 10px; }
|
|
|
|
.wd-hint { font: 400 11px/1.4 var(--font); color: var(--text-3, #8b92a0); margin-top: 4px; }
|
|
|
|
/* Stack form groups vertically with consistent gap */
|
|
.login-form { display: flex; flex-direction: column; gap: 14px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<section class="hero" aria-hidden="true">
|
|
<div class="hero-img"></div>
|
|
<div class="hero-grad-bot"></div>
|
|
<div class="hero-stamp">
|
|
<span class="hero-stamp-dot"></span>
|
|
<span class="hero-stamp-text">Dragonflight</span>
|
|
</div>
|
|
<div class="hero-caption">
|
|
<h2>Broadcast-safe media,<br><span class="accent">end to end.</span></h2>
|
|
<p>Dragonflight is the Wild Dragon media-asset hub. Ingest live SRT & RTMP feeds, upload masters, and hand proxies to your editors in seconds.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="brand">
|
|
<div class="brand-icon">
|
|
<img src="img/dragon-logo.png?v=1" alt="Dragonflight" style="width:20px;height:20px;">
|
|
</div>
|
|
<div>
|
|
<div class="brand-name">Dragonflight</div>
|
|
<div class="brand-sub">Media Asset Management</div>
|
|
</div>
|
|
</div>
|
|
<div id="flash" class="flash"></div>
|
|
|
|
<div id="login-panel">
|
|
<h1>Sign in</h1>
|
|
<p class="subtitle">Enter your credentials to continue.</p>
|
|
<form id="login-form" class="login-form" autocomplete="on">
|
|
<div class="wd-form-group">
|
|
<label class="wd-label" for="username">Username</label>
|
|
<input class="wd-input" id="username" name="username" type="text" autocomplete="username" required placeholder="username">
|
|
</div>
|
|
<div class="wd-form-group">
|
|
<label class="wd-label" for="password">Password</label>
|
|
<input class="wd-input" id="password" name="password" type="password" autocomplete="current-password" required placeholder="••••••••">
|
|
</div>
|
|
<button type="submit" class="wd-btn wd-btn--primary wd-btn--md wd-btn--full" id="login-btn">Sign in</button>
|
|
</form>
|
|
<div class="setup-link">First time? <a href="#" id="show-setup">Create admin account</a></div>
|
|
</div>
|
|
|
|
<div id="setup-panel">
|
|
<h1>Create admin</h1>
|
|
<p class="subtitle">No accounts exist yet, create the first admin.</p>
|
|
<form id="setup-form" class="login-form" autocomplete="off">
|
|
<div class="wd-form-group">
|
|
<label class="wd-label" for="su-username">Username</label>
|
|
<input class="wd-input" id="su-username" name="username" type="text" required placeholder="admin">
|
|
</div>
|
|
<div class="wd-form-group">
|
|
<label class="wd-label" for="su-password">Password</label>
|
|
<input class="wd-input" id="su-password" name="password" type="password" autocomplete="new-password" required minlength="8" placeholder="••••••••">
|
|
<div class="wd-hint">8+ chars, mixed case, digit, symbol</div>
|
|
</div>
|
|
<div class="wd-form-group">
|
|
<label class="wd-label" for="su-display">Display name (optional)</label>
|
|
<input class="wd-input" id="su-display" name="display_name" type="text" placeholder="Admin">
|
|
</div>
|
|
<button type="submit" class="wd-btn wd-btn--primary wd-btn--md wd-btn--full" id="setup-btn">Create account</button>
|
|
</form>
|
|
<div class="setup-link"><a href="#" id="show-login">Back to login</a></div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
const API = '/api/v1/auth';
|
|
const $ = id => document.getElementById(id);
|
|
const flash = $('flash');
|
|
function showFlash(m,t){ flash.textContent=m; flash.className='flash '+t; }
|
|
function clearFlash(){ flash.className='flash'; flash.textContent=''; }
|
|
function showSetup(){ $('login-panel').style.display='none'; $('setup-panel').style.display='block'; }
|
|
function showLogin(){ $('setup-panel').style.display='none'; $('login-panel').style.display='block'; }
|
|
|
|
$('show-setup').onclick = e => { e.preventDefault(); clearFlash(); showSetup(); };
|
|
$('show-login').onclick = e => { e.preventDefault(); clearFlash(); showLogin(); };
|
|
|
|
// Auth is parked for now. If the server reports auth is disabled, bounce
|
|
// straight to the app — no one should ever land on this screen while
|
|
// AUTH_ENABLED=false. If the server is unreachable, leave the panel
|
|
// visible so the operator at least sees something.
|
|
(async () => {
|
|
try {
|
|
const r = await fetch(API + '/setup-status', { credentials: 'same-origin' });
|
|
if (r.ok) {
|
|
const d = await r.json();
|
|
if (!d.auth_enabled) {
|
|
location.replace('/');
|
|
return;
|
|
}
|
|
if (d.needs_setup) {
|
|
showSetup();
|
|
showFlash('No accounts yet — create the first admin to continue.', 'info');
|
|
}
|
|
}
|
|
} catch (_) { /* offline → leave the login panel visible */ }
|
|
})();
|
|
|
|
$('login-form').onsubmit = async (e) => {
|
|
e.preventDefault(); clearFlash();
|
|
const btn=$('login-btn'); btn.disabled=true; btn.textContent='Signing in...';
|
|
try{
|
|
const res = await fetch(API + '/login', {method:'POST',headers:{'Content-Type':'application/json'},credentials:'same-origin',
|
|
body: JSON.stringify({username:$('username').value.trim(),password:$('password').value})});
|
|
if(res.ok){ showFlash('Signed in, redirecting...','success'); setTimeout(()=>{location.href='/'},600); }
|
|
else{ const d=await res.json().catch(()=>({})); showFlash(d.error||'Login failed','error'); }
|
|
} catch(err){ showFlash('Network error: '+err.message,'error'); }
|
|
finally{ btn.disabled=false; btn.textContent='Sign in'; }
|
|
};
|
|
|
|
$('setup-form').onsubmit = async (e) => {
|
|
e.preventDefault(); clearFlash();
|
|
const btn=$('setup-btn'); btn.disabled=true; btn.textContent='Creating...';
|
|
try{
|
|
const res = await fetch(API + '/setup', {method:'POST',headers:{'Content-Type':'application/json'},credentials:'same-origin',
|
|
body: JSON.stringify({username:$('su-username').value.trim(),password:$('su-password').value,display_name:$('su-display').value.trim()})});
|
|
if(res.ok){
|
|
showFlash('Admin account created, you can now log in','success');
|
|
setTimeout(()=>{ $('setup-panel').style.display='none'; $('login-panel').style.display='block'; },1200);
|
|
} else{
|
|
const d=await res.json().catch(()=>({}));
|
|
showFlash(d.error||'Setup failed','error');
|
|
}
|
|
} catch(err){ showFlash('Network error: '+err.message,'error'); }
|
|
finally{ btn.disabled=false; btn.textContent='Create account'; }
|
|
};
|
|
</script>
|
|
</body></html>
|