A separate admin page: server settings, accounts and the log
/admin, with Server, Accounts and Log sections chosen by the URL's hash. The server sends the page and /admin.js to admins only (anyone else asking for the page goes back to the app, and the script is 403), and removes the header's link to it from everyone else's page rather than hiding it. The API keeps refusing all of it to non-admins as before. Settings becomes personal: theme, OPML import and export, and the schedule and download folder to read. The server fields, the Users dialog and the Log dialog move out of dialogs.ts into admin.ts. The CSS moves out of index.html into web/app.css, which both pages load as /app.css?v=<hash>, served immutable like the scripts. The smoke test checks both pages. Closes #19. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
204
web/src/admin.ts
Normal file
204
web/src/admin.ts
Normal file
@@ -0,0 +1,204 @@
|
||||
/* ---------------- admin page ---------------- */
|
||||
// /admin: the server's settings, the accounts, and the log, each a section chosen by the URL's
|
||||
// hash so a link can go straight to one. The server sends this page and this script to admins
|
||||
// only, and refuses every call below to anyone else; they were parts of Settings and the header,
|
||||
// shown or hidden by the main page's script (issue #19).
|
||||
|
||||
let me: {name: string} | null = null;
|
||||
api('/api/me').then(u => { me = u; }).catch(() => {});
|
||||
|
||||
const SECTIONS: Record<string, () => void> = {server: drawServer, accounts: drawAccounts, log: drawLogView};
|
||||
|
||||
function showSection(){
|
||||
const t = SECTIONS[location.hash.slice(1)] ? location.hash.slice(1) : 'server';
|
||||
for(const s of $$('#admin > section')) s.hidden = s.id !== t;
|
||||
for(const a of $$('#atabs a')) a.classList.toggle('on', a.dataset.t === t);
|
||||
// The log polls every two seconds while it is showing, and not otherwise.
|
||||
if(t !== 'log' && logTimer){ clearInterval(logTimer); logTimer = null; }
|
||||
SECTIONS[t]();
|
||||
}
|
||||
window.addEventListener('hashchange', showSection);
|
||||
|
||||
/* ---------------- server ---------------- */
|
||||
async function drawServer(){
|
||||
const box = $('#server');
|
||||
const g = await api('/api/settings');
|
||||
const gs = splitEvery(g.every_mins);
|
||||
box.innerHTML = `<h2>Server</h2>
|
||||
<p class="hint">These apply to everyone. Each person's own choices, such as keywords or how
|
||||
many items a feed downloads for them, are in that feed's settings.</p>
|
||||
<div class="field"><label>Check feeds every</label>
|
||||
<div class="inline">
|
||||
<input type="number" id="gnum" min="1" max="999" value="${gs.n}">
|
||||
<select id="gunit">${unitOptions(gs.u)}</select>
|
||||
</div>
|
||||
<span class="hint">Applies to every feed that does not set its own. A feed's suggested
|
||||
interval (its <b>ttl</b>) is still honoured when it asks to be polled less often.</span></div>
|
||||
<div class="field"><label>Max new downloads per scan, per feed</label>
|
||||
<input type="number" id="gmax" min="0" max="999" value="${g.max_new_per_check}">
|
||||
<span class="hint">Applies to any feed that does not set its own — including every feed
|
||||
inside an OPML subscription. <b>0 means unlimited</b>, which will pull a whole back
|
||||
catalogue the first time a feed is scanned.</span></div>
|
||||
<div class="field"><label>Download these media types automatically</label>
|
||||
<input type="text" id="gtypes" value="${esc((g.media_types||[]).join(', '))}" placeholder="audio, video">
|
||||
<span class="hint">Anything else is still listed and can be downloaded by hand — blog feeds
|
||||
put article images in enclosures, and those are not worth keeping. Empty takes everything.</span></div>
|
||||
<div class="field"><label>Disk quota (GB, 0 = unlimited)</label>
|
||||
<input type="number" id="gquota" min="0" step="0.5" value="${g.max_total_gb}">
|
||||
<span class="hint">Over this, the oldest played items are deleted first. Pinned
|
||||
items are never touched.</span></div>
|
||||
<div class="field"><label>Delete items older than (days, 0 = keep)</label>
|
||||
<input type="number" id="gage" min="0" value="${g.max_age_days}"></div>
|
||||
<div class="field"><label>Download folder</label>
|
||||
<span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>
|
||||
<div class="cardacts"><button class="btn primary" id="gsave">${ICON.check} Save</button></div>`;
|
||||
$('#gsave').onclick = async () => {
|
||||
try{
|
||||
await api('/api/settings', {method: 'PATCH', body: JSON.stringify({
|
||||
schedule: `every ${Math.max(1, Number($('#gnum').value) || 1)}${$('#gunit').value}`,
|
||||
max_new_per_check: Math.max(0, Number($('#gmax').value) || 0),
|
||||
media_types: $('#gtypes').value.split(',').map(t => t.trim()).filter(Boolean),
|
||||
max_total_gb: Number($('#gquota').value) || 0,
|
||||
max_age_days: Number($('#gage').value) || 0})});
|
||||
toast('Settings saved');
|
||||
}catch(e){ toast(e.message, true); }
|
||||
};
|
||||
}
|
||||
|
||||
/* ---------------- accounts ---------------- */
|
||||
async function drawAccounts(){
|
||||
const box = $('#accounts');
|
||||
const users = await api('/api/users') || [];
|
||||
box.innerHTML = `<h2>Accounts</h2>
|
||||
${users.map(u => `<div class="inline urow" data-id="${u.id}">
|
||||
<div style="flex:1;min-width:0"><b style="overflow-wrap:anywhere">${esc(u.name)}</b>
|
||||
<small style="display:block;color:var(--faint)">${u.created ? `Added ${dateOf(u.created)}` : 'Added before this was kept'} · ${
|
||||
u.last_login ? `signed in ${ago(u.last_login)}` : 'never signed in'}</small></div>
|
||||
${u.password ? '' : '<span class="tag" title="No password: signs in through the proxy">Proxy</span>'}
|
||||
<label class="check" style="margin:0"><input type="checkbox" data-a="admin" ${u.admin ? 'checked' : ''}> Admin</label>
|
||||
<button class="btn ico danger" data-a="rm" title="Remove ${esc(u.name)}" aria-label="Remove ${esc(u.name)}">${ICON.trash}</button></div>`).join('')}
|
||||
<div class="field" style="margin-top:20px"><label>Add someone</label>
|
||||
<div class="inline">
|
||||
<input type="text" id="uname" placeholder="Name" autocomplete="off" spellcheck="false">
|
||||
<input type="password" id="upass" placeholder="Password" autocomplete="new-password">
|
||||
</div>
|
||||
<label class="check" style="margin-top:8px"><input type="checkbox" id="uadmin"> Admin</label>
|
||||
<span class="hint">At least 8 characters. Leave the password empty for someone who signs in
|
||||
through the proxy. New people start with no feeds.</span></div>
|
||||
<div class="cardacts"><button class="btn primary" id="uadd">${ICON.plus} Add</button></div>`;
|
||||
const change = async (u, opts) => {
|
||||
try{
|
||||
await api(`/api/users/${u.id}`, opts);
|
||||
// Demoting yourself takes this page away; go back to the app rather than stay on a page
|
||||
// the server no longer answers. Only on success: a refusal's toast has to stay readable.
|
||||
if(u.name === me?.name){ location.href = '/'; return; }
|
||||
}catch(e){ toast(e.message, true); }
|
||||
drawAccounts(); // on a refusal, this puts the checkbox back where the server left it
|
||||
};
|
||||
for(const row of $$('#accounts [data-id]')){
|
||||
const u = users.find(x => String(x.id) === row.dataset.id);
|
||||
$('[data-a="admin"]', row).onchange = e =>
|
||||
change(u, {method: 'PATCH', body: JSON.stringify({admin: e.target.checked})});
|
||||
$('[data-a="rm"]', row).onclick = () => {
|
||||
if(confirm(`Remove ${u.name}? Their subscriptions and read state go with them. Downloaded files stay.`))
|
||||
change(u, {method: 'DELETE'});
|
||||
};
|
||||
}
|
||||
$('#uadd').onclick = async () => {
|
||||
try{
|
||||
await api('/api/users', {method: 'POST', body: JSON.stringify({
|
||||
name: $('#uname').value, password: $('#upass').value, admin: $('#uadmin').checked})});
|
||||
toast('Added'); drawAccounts();
|
||||
}catch(e){ toast(e.message, true); } // keep what was typed
|
||||
};
|
||||
}
|
||||
|
||||
/* ---------------- log ---------------- */
|
||||
let logTimer = null, logSeq = 0, logLines = [], logFilter = '', logLevel = '', logTab = 'all';
|
||||
// Which sources belong to each tab. "daemon" is the control protocol itself: every
|
||||
// command in and every event out, whatever sent it.
|
||||
const LOG_TABS = {
|
||||
all: null,
|
||||
daemon: t => t === 'ipx::io',
|
||||
scan: t => t === 'ipx::scan',
|
||||
web: t => t === 'ipx::http',
|
||||
};
|
||||
const LEVELS = {ERROR: 3, WARN: 2, INFO: 1, DEBUG: 0, TRACE: 0};
|
||||
|
||||
function drawLogView(){
|
||||
logSeq = 0; logLines = [];
|
||||
$('#log').innerHTML = `<h2>Log</h2>
|
||||
<div class="logbar">
|
||||
<div class="tabs" id="logtabs">
|
||||
${Object.keys(LOG_TABS).map(t =>
|
||||
`<button data-t="${t}" class="${logTab === t ? 'on' : ''}">${
|
||||
{all: 'All', daemon: 'Daemon I/O', scan: 'Scans', web: 'HTTP'}[t]}</button>`).join('')}
|
||||
</div>
|
||||
<select id="loglevel" style="width:auto">
|
||||
<option value="">All levels</option>
|
||||
<option value="INFO">Info and above</option>
|
||||
<option value="WARN">Warnings and errors</option>
|
||||
<option value="ERROR">Errors only</option>
|
||||
</select>
|
||||
<input type="search" id="logq" class="grow" placeholder="Filter…">
|
||||
<label class="check" style="margin:0"><input type="checkbox" id="logfollow" checked> Follow</label>
|
||||
<button class="btn ico" id="logcopy" title="Copy what is showing" aria-label="Copy what is showing">${ICON.copy}</button>
|
||||
</div>
|
||||
<div id="logbox"><p class="empty">Loading…</p></div>
|
||||
<span class="hint"><b>Daemon I/O</b> is the control protocol itself — every command in and
|
||||
every event out. <b>Scans</b> is feed and download activity, <b>HTTP</b> is web requests.
|
||||
The buffer keeps debug detail even when the terminal does not; <b>IPX_UI_LOG</b> changes
|
||||
what it captures.</span>`;
|
||||
for(const b of $$('#logtabs button')) b.onclick = () => {
|
||||
logTab = b.dataset.t;
|
||||
for(const x of $$('#logtabs button')) x.classList.toggle('on', x.dataset.t === logTab);
|
||||
drawLog();
|
||||
};
|
||||
$('#loglevel').onchange = e => { logLevel = e.target.value; drawLog(); };
|
||||
$('#logq').oninput = e => { logFilter = e.target.value.toLowerCase(); drawLog(); };
|
||||
$('#logcopy').onclick = () => copyText(visibleLog().map(l =>
|
||||
`${new Date(l.ts * 1000).toISOString()} ${l.level} ${l.target} ${l.msg}`).join('\n'), $('#logcopy'));
|
||||
pollLog();
|
||||
if(!logTimer) logTimer = setInterval(pollLog, 2000);
|
||||
}
|
||||
|
||||
async function pollLog(){
|
||||
try{
|
||||
const r = await api(`/api/logs?after=${logSeq}&limit=500`);
|
||||
if(r.lines.length){
|
||||
logLines = logLines.concat(r.lines).slice(-2000);
|
||||
logSeq = r.latest;
|
||||
drawLog();
|
||||
}else if(!logLines.length){ drawLog(); }
|
||||
}catch(e){
|
||||
const box = $('#logbox');
|
||||
if(box) box.innerHTML = `<p class="empty">Lost contact with the daemon: ${esc(e.message)}</p>`;
|
||||
}
|
||||
}
|
||||
function visibleLog(){
|
||||
const min = logLevel ? LEVELS[logLevel] : -1;
|
||||
const tab = LOG_TABS[logTab];
|
||||
return logLines.filter(l =>
|
||||
(!tab || tab(l.target)) &&
|
||||
(LEVELS[l.level] ?? 1) >= min &&
|
||||
(!logFilter || (l.msg + ' ' + l.target).toLowerCase().includes(logFilter)));
|
||||
}
|
||||
function drawLog(){
|
||||
const box = $('#logbox'); if(!box) return;
|
||||
const follow = $('#logfollow')?.checked;
|
||||
const rows = visibleLog();
|
||||
box.innerHTML = rows.length ? rows.map(l => {
|
||||
const t = new Date(l.ts * 1000).toLocaleTimeString();
|
||||
if(logTab === 'daemon'){
|
||||
const out = l.msg.startsWith('<-');
|
||||
return `<div class="l"><time>${t}</time>` +
|
||||
`<span class="lv" style="color:${out ? 'var(--good)' : 'var(--accent)'}">${out ? 'out' : 'in'}</span>` +
|
||||
`<span>${esc(l.msg.replace(/^[<-]+\s*/, ''))}</span></div>`;
|
||||
}
|
||||
return `<div class="l"><time>${t}</time><span class="lv ${esc(l.level)}">${esc(l.level)}</span>` +
|
||||
`<span class="tg">${esc(l.target.replace(/^ipx::?/, ''))}</span><span>${esc(l.msg)}</span></div>`;
|
||||
}).join('') : '<p class="empty">Nothing matches.</p>';
|
||||
if(follow) box.scrollTop = box.scrollHeight;
|
||||
}
|
||||
|
||||
showSection();
|
||||
@@ -6,99 +6,8 @@ function openModal(html: string, wide?: boolean){
|
||||
}
|
||||
function closeModal(){
|
||||
$('#modal').classList.remove('on');
|
||||
if(logTimer){ clearInterval(logTimer); logTimer=null; }
|
||||
}
|
||||
|
||||
/* ---------------- log view ---------------- */
|
||||
let logTimer=null, logSeq=0, logLines=[], logFilter='', logLevel='', logTab='all';
|
||||
// Which sources belong to each tab. "daemon" is the control protocol itself: every
|
||||
// command in and every event out, whatever sent it.
|
||||
const LOG_TABS={
|
||||
all: null,
|
||||
daemon: t=>t==='ipx::io',
|
||||
scan: t=>t==='ipx::scan',
|
||||
web: t=>t==='ipx::http',
|
||||
};
|
||||
const LEVELS={ERROR:3,WARN:2,INFO:1,DEBUG:0,TRACE:0};
|
||||
|
||||
function logsModal(){
|
||||
logSeq=0; logLines=[];
|
||||
openModal(`<h3>Log</h3>
|
||||
<div class="logbar">
|
||||
<div class="tabs" id="logtabs">
|
||||
${Object.keys(LOG_TABS).map(t=>
|
||||
`<button data-t="${t}" class="${logTab===t?'on':''}">${
|
||||
{all:'All',daemon:'Daemon I/O',scan:'Scans',web:'HTTP'}[t]}</button>`).join('')}
|
||||
</div>
|
||||
<select id="loglevel" style="width:auto">
|
||||
<option value="">All levels</option>
|
||||
<option value="INFO">Info and above</option>
|
||||
<option value="WARN">Warnings and errors</option>
|
||||
<option value="ERROR">Errors only</option>
|
||||
</select>
|
||||
<input type="search" id="logq" class="grow" placeholder="Filter…">
|
||||
<label class="check" style="margin:0"><input type="checkbox" id="logfollow" checked> Follow</label>
|
||||
<button class="btn ico" id="logcopy" title="Copy what is showing" aria-label="Copy what is showing">${ICON.copy}</button>
|
||||
<button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button>
|
||||
</div>
|
||||
<div id="logbox"><p class="empty">Loading…</p></div>
|
||||
<span class="hint"><b>Daemon I/O</b> is the control protocol itself — every command in and
|
||||
every event out. <b>Scans</b> is feed and download activity, <b>HTTP</b> is web requests.
|
||||
The buffer keeps debug detail even when the terminal does not; <b>IPX_UI_LOG</b> changes
|
||||
what it captures.</span>`, true);
|
||||
|
||||
$$('#logtabs button').forEach(b=>b.onclick=()=>{
|
||||
logTab=b.dataset.t;
|
||||
$$('#logtabs button').forEach(x=>x.classList.toggle('on',x.dataset.t===logTab));
|
||||
drawLog();
|
||||
});
|
||||
$('#loglevel').onchange=e=>{ logLevel=e.target.value; drawLog(); };
|
||||
$('#logq').oninput=e=>{ logFilter=e.target.value.toLowerCase(); drawLog(); };
|
||||
$('#logcopy').onclick=()=>copyText(visibleLog().map(l=>
|
||||
`${new Date(l.ts*1000).toISOString()} ${l.level} ${l.target} ${l.msg}`).join('\n'), $('#logcopy'));
|
||||
|
||||
pollLog();
|
||||
logTimer=setInterval(pollLog,2000);
|
||||
}
|
||||
|
||||
async function pollLog(){
|
||||
try{
|
||||
const r=await api(`/api/logs?after=${logSeq}&limit=500`);
|
||||
if(r.lines.length){
|
||||
logLines=logLines.concat(r.lines).slice(-2000);
|
||||
logSeq=r.latest;
|
||||
drawLog();
|
||||
}else if(!logLines.length){ drawLog(); }
|
||||
}catch(e){
|
||||
const box=$('#logbox');
|
||||
if(box) box.innerHTML=`<p class="empty">Lost contact with the daemon: ${esc(e.message)}</p>`;
|
||||
}
|
||||
}
|
||||
function visibleLog(){
|
||||
const min=logLevel?LEVELS[logLevel]:-1;
|
||||
const tab=LOG_TABS[logTab];
|
||||
return logLines.filter(l=>
|
||||
(!tab || tab(l.target)) &&
|
||||
(LEVELS[l.level]??1)>=min &&
|
||||
(!logFilter || (l.msg+' '+l.target).toLowerCase().includes(logFilter)));
|
||||
}
|
||||
function drawLog(){
|
||||
const box=$('#logbox'); if(!box) return;
|
||||
const follow=$('#logfollow')?.checked;
|
||||
const rows=visibleLog();
|
||||
box.innerHTML = rows.length ? rows.map(l=>{
|
||||
const t=new Date(l.ts*1000).toLocaleTimeString();
|
||||
if(logTab==='daemon'){
|
||||
const out=l.msg.startsWith('<-');
|
||||
return `<div class="l"><time>${t}</time>`+
|
||||
`<span class="lv" style="color:${out?'var(--good)':'var(--accent)'}">${out?'out':'in'}</span>`+
|
||||
`<span>${esc(l.msg.replace(/^[<-]+\s*/,''))}</span></div>`;
|
||||
}
|
||||
return `<div class="l"><time>${t}</time><span class="lv ${esc(l.level)}">${esc(l.level)}</span>`+
|
||||
`<span class="tg">${esc(l.target.replace(/^ipx::?/,''))}</span><span>${esc(l.msg)}</span></div>`;
|
||||
}).join('') : '<p class="empty">Nothing matches.</p>';
|
||||
if(follow) box.scrollTop=box.scrollHeight;
|
||||
}
|
||||
$('#modal').onclick=e=>{ if(e.target.id==='modal') closeModal(); };
|
||||
|
||||
$('#addFeed').onclick=()=>{
|
||||
@@ -295,25 +204,6 @@ function toggleGroup(id){
|
||||
renderFeeds();
|
||||
}
|
||||
let globalMax = 3;
|
||||
const UNITS = [['m','minutes'],['h','hours'],['d','days'],['w','weeks']];
|
||||
const UNIT_MINS = {m:1, h:60, d:1440, w:10080};
|
||||
|
||||
/// Largest unit that divides evenly, so 120 reads "2 hours" not "120 minutes".
|
||||
function splitEvery(m){
|
||||
if(!m) return {n:1, u:'h'};
|
||||
for(const u of ['w','d','h']) if(m % UNIT_MINS[u] === 0) return {n:m/UNIT_MINS[u], u};
|
||||
return {n:m, u:'m'};
|
||||
}
|
||||
function unitOptions(sel){
|
||||
return UNITS.map(([v,l]) =>
|
||||
`<option value="${v}"${sel===v?' selected':''}>${l}</option>`).join('');
|
||||
}
|
||||
function everyText(m){
|
||||
if(!m) return '\u2014';
|
||||
const {n,u} = splitEvery(m);
|
||||
const name = {m:'min', h:'hour', d:'day', w:'week'}[u];
|
||||
return n + ' ' + name + (u!=='m' && n!==1 ? 's' : '');
|
||||
}
|
||||
function due(ts){
|
||||
const d = ts - Date.now()/1000;
|
||||
if(d <= 0) return 'due now';
|
||||
@@ -322,14 +212,11 @@ function due(ts){
|
||||
return 'in '+Math.round(d/86400)+'d';
|
||||
}
|
||||
|
||||
/// Global settings. GET /api/settings is open to anyone signed in; only the PATCH, and the
|
||||
/// Users screen behind it, are the operator's alone (the server refuses both from anyone
|
||||
/// else). A non-admin gets the same modal minus those two parts, not no settings at all --
|
||||
/// Export/Import are theirs regardless, and seeing the schedule and quota explains why a
|
||||
/// feed is polled when it is.
|
||||
/// Your settings: the theme, your subscriptions as OPML, and, to read, what the server does
|
||||
/// with feeds. The server's own settings, the accounts and the log are on /admin, which only an
|
||||
/// admin is sent (issue #19); this used to hold them too, shown to admins only.
|
||||
async function prefsModal(){
|
||||
const g = await api('/api/settings');
|
||||
const gs = splitEvery(g.every_mins);
|
||||
const admin = !!(S.me&&S.me.admin);
|
||||
openModal(`<h3>Settings</h3>
|
||||
<div class="field"><label>Theme</label>
|
||||
@@ -339,33 +226,6 @@ async function prefsModal(){
|
||||
<select id="smode">${Object.entries(MODES).map(([k,t])=>
|
||||
`<option value="${k}"${theme.mode===k?' selected':''}>${esc(t)}</option>`).join('')}</select>
|
||||
<span class="hint">Auto follows your system's light/dark setting.</span></div>
|
||||
<div class="field"><label>Check feeds every</label>
|
||||
${admin?`<div class="inline">
|
||||
<input type="number" id="gnum" min="1" max="999" value="${gs.n}">
|
||||
<select id="gunit">${unitOptions(gs.u)}</select>
|
||||
</div>
|
||||
<span class="hint">Applies to every feed that does not set its own. A feed's suggested
|
||||
interval (its <b>ttl</b>) is still honoured when it asks to be polled less often.</span>`
|
||||
:`<span class="hint">${everyText(g.every_mins)}, for every feed that does not set its
|
||||
own. Only an admin changes this.</span>`}</div>
|
||||
${admin?`<div class="field"><label>Max new downloads per scan, per feed</label>
|
||||
<input type="number" id="gmax" min="0" max="999" value="${g.max_new_per_check}">
|
||||
<span class="hint">Applies to any feed that does not set its own — including every feed
|
||||
inside an OPML subscription. <b>0 means unlimited</b>, which will pull a whole back
|
||||
catalogue the first time a feed is scanned.</span></div>
|
||||
<div class="field"><label>Download these media types automatically</label>
|
||||
<input type="text" id="gtypes" value="${esc((g.media_types||[]).join(', '))}"
|
||||
placeholder="audio, video">
|
||||
<span class="hint">Anything else is still listed and can be downloaded by hand — blog feeds
|
||||
put article images in enclosures, and those are not worth keeping. Empty takes everything.</span></div>
|
||||
<div class="field"><label>Disk quota (GB, 0 = unlimited)</label>
|
||||
<input type="number" id="gquota" min="0" step="0.5" value="${g.max_total_gb}">
|
||||
<span class="hint">Over this, the oldest played items are deleted first. Pinned
|
||||
items are never touched.</span></div>
|
||||
<div class="field"><label>Delete items older than (days, 0 = keep)</label>
|
||||
<input type="number" id="gage" min="0" value="${g.max_age_days}"></div>`:''}
|
||||
<div class="field"><label>Download folder</label>
|
||||
<span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>
|
||||
<div class="field"><label>Subscriptions</label>
|
||||
<div class="inline">
|
||||
<!-- Words as well as icons: a floppy disk and a plus mean nothing on their own here. -->
|
||||
@@ -374,76 +234,15 @@ async function prefsModal(){
|
||||
</div>
|
||||
<span class="hint">Export saves your subscriptions as OPML for another podcast app. Import
|
||||
subscribes you to every feed in one.</span></div>
|
||||
${admin?`<div class="field"><label>Users</label>
|
||||
<div class="inline"><button class="btn ico" id="gusers" title="Manage users…" aria-label="Manage users">${ICON.users}</button></div>
|
||||
<span class="hint">Add and remove the people who can sign in, and choose who is an admin.</span></div>`:''}
|
||||
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="${admin?'Cancel':'Close'}" aria-label="${admin?'Cancel':'Close'}">${ICON.close}</button>
|
||||
${admin?`<button class="btn ico primary" id="gsave" title="Save" aria-label="Save">${ICON.check}</button>`:''}</div>`);
|
||||
<div class="field"><label>Feeds are checked every</label>
|
||||
<span class="hint">${everyText(g.every_mins)}, for every feed that does not set its own.
|
||||
${admin?'This and the rest of the server\'s settings are on the <a href="/admin">admin page</a>.':'Only an admin changes this.'}</span></div>
|
||||
<div class="field"><label>Download folder</label>
|
||||
<span class="hint" style="overflow-wrap:anywhere">${esc(g.download_dir)}</span></div>
|
||||
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button></div>`);
|
||||
$('#stheme').onchange=e=>setTheme(e.target.value,undefined,true);
|
||||
$('#smode').onchange=e=>setTheme(undefined,e.target.value,true);
|
||||
$('#gopml').onclick=opmlModal;
|
||||
if(!admin) return;
|
||||
$('#gusers').onclick=usersModal;
|
||||
$('#gsave').onclick=async()=>{
|
||||
try{
|
||||
await api('/api/settings',{method:'PATCH',body:JSON.stringify({
|
||||
schedule:`every ${Math.max(1,Number($('#gnum').value)||1)}${$('#gunit').value}`,
|
||||
max_new_per_check:Math.max(0,Number($('#gmax').value)||0),
|
||||
media_types:$('#gtypes').value.split(',').map(t=>t.trim()).filter(Boolean),
|
||||
max_total_gb:Number($('#gquota').value)||0,
|
||||
max_age_days:Number($('#gage').value)||0})});
|
||||
closeModal(); toast('Settings saved');
|
||||
await loadFeeds(true); if(S.feed){ renderFeed(); loadEntries(); }
|
||||
}catch(e){ toast(e.message,true); }
|
||||
};
|
||||
}
|
||||
|
||||
// Admin only, and the server enforces that: this screen is just the way in.
|
||||
async function usersModal(){
|
||||
const users = await api('/api/users') || [];
|
||||
openModal(`<h3>Users</h3>
|
||||
${users.map(u=>`<div class="inline" data-id="${u.id}" style="margin-bottom:8px">
|
||||
<div style="flex:1;min-width:0"><b style="overflow-wrap:anywhere">${esc(u.name)}</b>
|
||||
<small style="display:block;color:var(--faint)">${u.created?`Added ${dateOf(u.created)}`:'Added before this was kept'} · ${
|
||||
u.last_login?`signed in ${ago(u.last_login)}`:'never signed in'}</small></div>
|
||||
${u.password?'':'<span class="tag" title="No password: signs in through the proxy">Proxy</span>'}
|
||||
<label class="check" style="margin:0"><input type="checkbox" data-a="admin" ${u.admin?'checked':''}> Admin</label>
|
||||
<button class="btn ico danger" data-a="rm" title="Remove ${esc(u.name)}" aria-label="Remove ${esc(u.name)}">${ICON.trash}</button></div>`).join('')}
|
||||
<div class="field" style="margin-top:16px"><label>Add someone</label>
|
||||
<div class="inline">
|
||||
<input type="text" id="uname" placeholder="Name" autocomplete="off" spellcheck="false">
|
||||
<input type="password" id="upass" placeholder="Password" autocomplete="new-password">
|
||||
</div>
|
||||
<label class="check" style="margin-top:8px"><input type="checkbox" id="uadmin"> Admin</label>
|
||||
<span class="hint">At least 8 characters. Leave the password empty for someone who signs in
|
||||
through the proxy. New people start with no feeds.</span></div>
|
||||
<div class="cardacts"><button class="btn ico" onclick="closeModal()" title="Close" aria-label="Close">${ICON.close}</button>
|
||||
<button class="btn ico primary" id="uadd" title="Add" aria-label="Add">${ICON.plus}</button></div>`);
|
||||
const change=async(u,opts)=>{
|
||||
try{
|
||||
await api(`/api/users/${u.id}`,opts);
|
||||
// Demoting yourself takes this screen away; reload so the page stops offering it. Only
|
||||
// on success: reloading after a refusal wiped the toast that said why.
|
||||
if(u.name===S.me?.name){ location.reload(); return; }
|
||||
}catch(e){ toast(e.message,true); }
|
||||
usersModal(); // on a refusal, this puts the checkbox back where the server left it
|
||||
};
|
||||
$$('#modalCard [data-id]').forEach(row=>{
|
||||
const u=users.find(x=>String(x.id)===row.dataset.id);
|
||||
$('[data-a="admin"]',row).onchange=e=>
|
||||
change(u,{method:'PATCH',body:JSON.stringify({admin:e.target.checked})});
|
||||
$('[data-a="rm"]',row).onclick=()=>{
|
||||
if(confirm(`Remove ${u.name}? Their subscriptions and read state go with them. Downloaded files stay.`))
|
||||
change(u,{method:'DELETE'});
|
||||
};
|
||||
});
|
||||
$('#uadd').onclick=async()=>{
|
||||
try{
|
||||
await api('/api/users',{method:'POST',body:JSON.stringify({
|
||||
name:$('#uname').value, password:$('#upass').value, admin:$('#uadmin').checked})});
|
||||
toast('Added'); usersModal();
|
||||
}catch(e){ toast(e.message,true); } // keep what was typed
|
||||
};
|
||||
}
|
||||
|
||||
function settingsModal(f, newUrl?: string){
|
||||
@@ -582,7 +381,6 @@ api('/api/me').then(u=>{
|
||||
S.me=u;
|
||||
$('#who').textContent=u.name+(u.admin?' · admin':'');
|
||||
}).catch(()=>{});
|
||||
$('#logs').onclick=logsModal;
|
||||
$('#feedFilter').oninput=renderFeeds;
|
||||
// The feed list from the keyboard: Enter or Space opens a row, Right and Left open and close a
|
||||
// folder. Handled keys stop here, or the player's own Space and arrows would act on them too.
|
||||
|
||||
@@ -46,6 +46,7 @@ const ICON={
|
||||
fwd:fa('0 0 512 512','<path fill="currentColor" d="M488 192l-144 0c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l46.7-46.7c-75.3-58.6-184.3-53.3-253.5 15.9-75 75-75 196.5 0 271.5s196.5 75 271.5 0c8.2-8.2 15.5-16.9 21.9-26.1 10.1-14.5 30.1-18 44.6-7.9s18 30.1 7.9 44.6c-8.5 12.2-18.2 23.8-29.1 34.7-100 100-262.1 100-362 0S-25 175 75 75c94.3-94.3 243.7-99.6 344.3-16.2L471 7c6.9-6.9 17.2-8.9 26.2-5.2S512 14.3 512 24l0 144c0 13.3-10.7 24-24 24z"/>'), // solid/rotate-right
|
||||
pause:fa('0 0 384 512','<path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80L0 432c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-352c0-26.5-21.5-48-48-48L48 32zm224 0c-26.5 0-48 21.5-48 48l0 352c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-352c0-26.5-21.5-48-48-48l-64 0z"/>'), // solid/pause
|
||||
alert:fa('0 0 128 512','<path fill="currentColor" d="M64 432c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40c0-22.1 17.9-40 40-40zM64 0c26.5 0 48 21.5 48 48 0 .6 0 1.1 0 1.7l-16 304c-.9 17-15 30.3-32 30.3S33 370.7 32 353.7L16 49.7c0-.6 0-1.1 0-1.7 0-26.5 21.5-48 48-48z"/>'), // solid/exclamation
|
||||
admin:fa('0 0 576 512','<path fill="currentColor" d="M70.8-6.7c5.4-5.4 13.8-6.2 20.2-2L209.9 70.5c8.9 5.9 14.2 15.9 14.2 26.6l0 49.6 90.8 90.8c33.3-15 73.9-8.9 101.2 18.5L542.2 382.1c18.7 18.7 18.7 49.1 0 67.9l-60.1 60.1c-18.7 18.7-49.1 18.7-67.9 0L288.1 384c-27.4-27.4-33.5-67.9-18.5-101.2l-90.8-90.8-49.6 0c-10.7 0-20.7-5.3-26.6-14.2L23.4 58.9c-4.2-6.3-3.4-14.8 2-20.2L70.8-6.7zm145 303.5c-6.3 36.9 2.3 75.9 26.2 107.2l-94.9 95c-28.1 28.1-73.7 28.1-101.8 0s-28.1-73.7 0-101.8l135.4-135.5 35.2 35.1zM384.1 0c20.1 0 39.4 3.7 57.1 10.5 10 3.8 11.8 16.5 4.3 24.1L388.8 91.3c-3 3-4.7 7.1-4.7 11.3l0 41.4c0 8.8 7.2 16 16 16l41.4 0c4.2 0 8.3-1.7 11.3-4.7l56.7-56.7c7.6-7.5 20.3-5.7 24.1 4.3 6.8 17.7 10.5 37 10.5 57.1 0 43.2-17.2 82.3-45 111.1l-49.1-49.1c-33.1-33-78.5-45.7-121.1-38.4l-56.8-56.8 0-29.7-.2-5c-.8-12.4-4.4-24.3-10.5-34.9 29.4-35 73.4-57.2 122.7-57.3z"/>'), // solid/screwdriver-wrench
|
||||
caret:fa('0 0 256 512','<path fill="currentColor" d="M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z"/>'), // solid/caret-right
|
||||
left:fa('0 0 512 512','<path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 105.4-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>'), // solid/arrow-left
|
||||
subbed:fa('0 0 512 512','<path fill="currentColor" d="M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"/>'), // solid/circle-check
|
||||
@@ -156,3 +157,22 @@ const S = {
|
||||
};
|
||||
const LIMIT = 50;
|
||||
|
||||
const UNITS = [['m','minutes'],['h','hours'],['d','days'],['w','weeks']];
|
||||
const UNIT_MINS = {m:1, h:60, d:1440, w:10080};
|
||||
|
||||
/// Largest unit that divides evenly, so 120 reads "2 hours" not "120 minutes".
|
||||
function splitEvery(m){
|
||||
if(!m) return {n:1, u:'h'};
|
||||
for(const u of ['w','d','h']) if(m % UNIT_MINS[u] === 0) return {n:m/UNIT_MINS[u], u};
|
||||
return {n:m, u:'m'};
|
||||
}
|
||||
function unitOptions(sel){
|
||||
return UNITS.map(([v,l]) =>
|
||||
`<option value="${v}"${sel===v?' selected':''}>${l}</option>`).join('');
|
||||
}
|
||||
function everyText(m){
|
||||
if(!m) return '\u2014';
|
||||
const {n,u} = splitEvery(m);
|
||||
const name = {m:'min', h:'hour', d:'day', w:'week'}[u];
|
||||
return n + ' ' + name + (u!=='m' && n!==1 ? 's' : '');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user