04ce096e67
Frontend / UX / a11y - Sidebar collapse/expand toggle with localStorage persistence (#142) - Settings sections wrap inputs in <form> with Enter-to-submit + native validation; password autocomplete=new-password (#141, #138) - Asset thumbnails get descriptive alt text (#140) - Production deploy now precompiles JSX via esbuild and loads the production React UMD instead of dev builds + in-browser Babel (#139, #122) - Search wrapper gets role=search; global search input gets aria-label, role=combobox, aria-controls/aria-expanded/aria-activedescendant wiring (#137, #135) - Dashboard and Library no longer share the same nav icon (#136) - Sidebar collapses off-canvas with a topbar menu button below 768 px; mobile default is collapsed (#134) - --text-3 bumped to #8B92A0 for WCAG AA contrast on --bg-0 (#133) - Schedule and Library routes were rendering empty inside the .main flex container — switched to flex:1 + min-height:0 (#131, #132, editor + asset detail get the same fix) - Jobs nav badge now polls /jobs?status=active every 10 s and reflects the live count (#130, #113) - aria-label sweep on every icon-only button (#126) - Premiere panel release list moved to window.PREMIERE_RELEASES in data.jsx; Editor + Settings read from the same source (#125) - Typo setPgMclips → setPgmClips (#124) - Stray console.error / console.warn calls gated behind window.DF_LOG.{warn,error} (#123) - Hardcoded /api/v1 paths route through window.ZAMPP_API_PREFIX (#115) - Schedule rows no longer crash on null recorder_id (#117) - EditorKeyboard guards against document.activeElement === null (#116) - Unmount-safe timers for PasswordResetModal, Containers, Editor (#111) - Player seek clamps below totalMs, server-side range clamping + uncached 416 on EOF, client-side EOF-stall watchdog (#143) - Duration badge overlap fix on narrow asset cards (#52) Backend / security / reliability - GET /recorders fixed N+1: single LATERAL JOIN for live_asset_id; Docker inspects bounded to actually-recording rows (#121) - Upload disk-storage (multer.diskStorage) streams parts to S3 instead of buffering 500 MB in RAM (#120) - /assets list clamps limit to MAX_LIMIT=500 to prevent OOM (#119) - SDK upload archive listing + post-extract sanitize block zip-slip / tar-slip and symlink escapes (#118) - Migrations track applied state in schema_migrations, run in a transaction, and exit non-zero on failure (#107) - node-agent BMD_COUNT override uses BMD_DEVICE_PREFIX; filesystem detection wins (#109, #127) - GPU_COUNT override now merges with nvidia-smi enrichment (#108) - /cluster/heartbeat requires a node-bound token or admin user; tokens carry bound_hostname (#106) - /recorders/:id/start error responses no longer echo the Docker create payload — env vars stay out of client responses (#105) - /recorders/probe restricts schemes (srt/rtmp/rtsp/udp/rtp), blocks private + loopback hosts for non-admins, denies common service ports (#104) - Scheduler tick guarded by a Postgres advisory lock; pending/running rows claimed via UPDATE...RETURNING + FOR UPDATE SKIP LOCKED to survive multi-node deploys (#103) - UUID validateUuid('id') param middleware on every /:id route (#102) - Error handler scrubs Postgres error messages and 5xx detail (#101) - Graceful SIGTERM/SIGINT shutdown — stops scheduler, drains the HTTP server, ends the pool, 25 s force-exit watchdog (#100) - AMPP sync moved from fire-and-forget to a persisted retry queue (ampp_sync_status / attempts / next_attempt_at + scheduler retry loop with exponential backoff) (#77) Migrations - 019: api_tokens.bound_hostname (#106) - 020: assets.ampp_sync_status + retry bookkeeping (#77) Other - Defer #92 Growing-files per-upload toggle, #80 Audio tab, #57 Dashboard redesign, #56 Editor SPA polish phase 3, #114 S3 migration tool to v1.3
292 lines
10 KiB
HTML
292 lines
10 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); }
|
|
|
|
.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; }
|
|
|
|
/* 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 (min 8 chars)</label>
|
|
<input class="wd-input" id="su-password" name="password" type="password" autocomplete="new-password" required minlength="8" placeholder="••••••••">
|
|
</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=''; }
|
|
|
|
$('show-setup').onclick = e => { e.preventDefault(); clearFlash(); $('login-panel').style.display='none'; $('setup-panel').style.display='block'; };
|
|
$('show-login').onclick = e => { e.preventDefault(); clearFlash(); $('setup-panel').style.display='none'; $('login-panel').style.display='block'; };
|
|
|
|
$('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>
|