domma-cms 1.6.56 → 1.6.57

package/plugins/security/admin/views/security.js

@@ -14,6 +14,7 @@ import {fmtDate, fmtDateTime, fmtTime} from '/plugins/_lib/admin/ui/dates.js';
 import {resetRowText} from '../lib/resets.js';
 import {checkSettings, DEFAULT_SETTINGS, mergeDefaults} from '../lib/settings.js';
 import {ipRuleValid} from '../lib/ip.js';
+import {applySettingsChanges, draftKey, draftNote, draftValues, fingerprint, settingsChanges, signinCounts, signinInResult, signinMatches, stableJson, usableDraft, withCount} from '../lib/screen-state.js';
 
 const API = '/plugins/security';
 const ROUTE = /^#\/plugins\/security(\/[a-z]+)?\/?(\?.*)?$/;
@@ -25,17 +26,20 @@ const REASONS = {password: 'Wrong password', unknown: 'No such account', inactiv
 let kit = null;
 async function loadKit() {
     if (kit) return kit;
-    const [api, chrome, help, tk] = await Promise.all([
+    const [api, chrome, help, tk, loading] = await Promise.all([
         import('/admin/js/api.js'),
         import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
         import('/admin/js/lib/help-popover.js').catch(() => ({})),
-        import('/admin/js/lib/tool-kit.js')
+        import('/admin/js/lib/tool-kit.js'),
+        import('/admin/js/lib/loading.js').catch(() => null)   // skeletons (core 1.x); older cores keep the slot's text
     ]);
     kit = {
         apiRequest: api.apiRequest,
         addBannerAction: chrome.addBannerAction || (() => null),
         helpPopovers: help.helpPopovers || (() => () => {}),
-        onceClosed: tk.onceClosed, openMenuAt: tk.openMenuAt, viewLifetime: tk.viewLifetime
+        onceClosed: tk.onceClosed, openMenuAt: tk.openMenuAt, viewLifetime: tk.viewLifetime,
+        /** A skeleton in `slot` while `promise` runs (data back once it has gone); just the promise without one. */
+        withSkeleton: (slot, promise) => (slot && loading?.whileLoading ? loading.whileLoading(slot, promise, loading.SHAPES?.rows) : promise)
     };
     return kit;
 }
@@ -50,9 +54,18 @@ async function copy(text, what) {
     try { await navigator.clipboard.writeText(text); E.toast(`Copied ${what}.`, {type: 'success'}); }
     catch { E.toast(`Could not copy - ${text}`, {type: 'warning', duration: 6000}); }
 }
-function refreshBadge() {
-    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: SIDEBAR_URL}})); } catch { /* no sidebar */ }
+function refreshBadge(url = SIDEBAR_URL) {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url}})); } catch { /* no sidebar */ }
 }
+/** The signed-in user's id (drafts are per person), '' when unknown. */
+function userId() {
+    try { return String(S.get('auth_user')?.id || ''); } catch { return ''; }
+}
+const store = {
+    get(key) { try { return key ? S.get(key) : null; } catch { return null; } },
+    set(key, v) { try { if (key) S.set(key, v); } catch { /* storage blocked */ } },
+    remove(key) { try { if (key) { if (S.remove) S.remove(key); else S.set(key, null); } } catch { /* storage blocked */ } }
+};
 const when = (iso) => {
     const d = new Date(iso);
     const today = new Date().toDateString() === d.toDateString();
@@ -129,6 +142,10 @@ export const securityView = {
         const fromHash = location.hash.match(/security\/([a-z]+)/)?.[1];
         const tab = M.observable(TABS.includes(fromHash) ? fromHash : 'overview');
         const loading = M.observable(true);
+        // First loads: a skeleton in the list's slot, its empty note hidden; reloads keep the list on screen.
+        const checksLoading = M.observable(true);
+        const signinsLoading = M.observable(false);
+        const blocksLoading = M.observable(true);
         const error = M.observable('');
         const health = M.observable(null);
         const overview = M.observable(null);
@@ -189,9 +206,7 @@ export const securityView = {
             const only = ipFilter.value;
             // A reset request is in the log too (kind 'reset'): only under All and Resets.
             const isReset = (e) => e.kind === 'reset';
-            signinList = signins.value.filter(e => (r === 'all' || (r === 'resets' ? isReset(e) : !isReset(e) && (r === 'ok') === Boolean(e.ok)))
-                && (!only || e.ip === only)
-                && (!q || [e.email, e.ip, e.ua, e.reason].some(v => String(v || '').toLowerCase().includes(q))));
+            signinList = signins.value.filter(e => signinInResult(e, r) && signinMatches(e, {query: q, ip: only}));
             signinRows.value = signinList.slice(0, 1000).map((e, i) => {
                 const row = {id: `s${i}`, when: when(e.at), email: e.email || '—', ip: e.ip || '—', ua: e.ua || ''};
                 if (isReset(e)) {
@@ -208,6 +223,12 @@ export const securityView = {
             if (result.value === 'resets') return `${n.toLocaleString('en-GB')} reset request${n === 1 ? '' : 's'}${f}`;
             return `${n.toLocaleString('en-GB')} sign-in${n === 1 ? '' : 's'}${f}`;
         });
+        // The count on each result button: what the search and the address filter leave in the period loaded.
+        const resCounts = M.computed(() => signinCounts(signins.value, {query: query.value, ip: ipFilter.value}));
+        const resLabel = {
+            all: M.computed(() => withCount('All', resCounts.value.all)), failed: M.computed(() => withCount('Failed', resCounts.value.failed)),
+            ok: M.computed(() => withCount('Succeeded', resCounts.value.ok)), resets: M.computed(() => withCount('Resets', resCounts.value.resets))
+        };
         const signinEmpty = M.computed(() => (query.value.trim() || ipFilter.value ? 'No sign-ins match.' : 'No sign-ins in this period.'));
 
         const lockRows = M.observable([]);
@@ -224,11 +245,14 @@ export const securityView = {
         // ---- Server ----
         async function loadHealth(refresh = false) {
             try {
-                const h = await api(`/health${refresh ? '?refresh=1' : ''}`);
+                const first = checksLoading.peek();
+                const h = await k.withSkeleton(first ? root.querySelector('.scx-checks-loading') : null, api(`/health${refresh ? '?refresh=1' : ''}`));
                 if (here() && h) { health.value = h; error.value = ''; }
                 if (refresh) refreshBadge();
             } catch (e) {
                 if (here()) error.value = /403|forbidden/i.test(String(e.message)) ? 'You do not have access to Security.' : `Could not run the checks: ${e.message || e}`;
+            } finally {
+                if (here()) checksLoading.value = false;
             }
         }
         async function loadOverview() {
@@ -239,31 +263,46 @@ export const securityView = {
                 checksOk.value = o.checks !== false;
             } catch { /* the health error says enough */ }
         }
+        let signinsLoaded = false;
+        let signinSeq = 0;
         async function loadSignins() {
+            const seq = ++signinSeq;
+            const first = !signinsLoaded;
+            if (first) signinsLoading.value = true;
             try {
-                const r = await api(`/signins?days=${encodeURIComponent(days.peek())}`);
-                if (here() && r) signins.value = r.entries;
-            } catch (e) { E.toast(`Could not load sign-ins: ${e.message || e}`, {type: 'error'}); }
+                const r = await k.withSkeleton(first ? root.querySelector('.scx-signins-loading') : null, api(`/signins?days=${encodeURIComponent(days.peek())}`));
+                // A later period asked for meanwhile wins; the screen may have gone.
+                if (!here() || seq !== signinSeq) return;
+                if (r) { signins.value = r.entries; signinsLoaded = true; }
+            } catch (e) {
+                if (here()) E.toast(`Could not load sign-ins: ${e.message || e}`, {type: 'error'});
+            } finally {
+                if (here() && seq === signinSeq) signinsLoading.value = false;
+            }
         }
         async function loadBlocks() {
+            const first = blocksLoading.peek();
             try {
-                const r = await api('/blocks');
+                const r = await k.withSkeleton(first ? root.querySelector('.scx-blocks-loading') : null, api('/blocks'));
                 if (here() && r) blocks.value = r;
             } catch { /* shown empty */ }
+            finally { if (here()) blocksLoading.value = false; }
         }
         async function loadAll(refresh = false) {
             loading.value = true;
             await Promise.all([loadHealth(refresh), loadOverview(), loadBlocks(), tab.peek() === 'signins' ? loadSignins() : null]);
             if (here()) loading.value = false;
         }
-        scope(M.effect(() => { void days.value; if (tab.peek() === 'signins') loadSignins(); }));
+        // A new period reloads the log (the first run is the mount's own load).
+        let daysSeen = days.peek();
+        scope(M.effect(() => { const d = days.value; if (d === daysSeen) return; daysSeen = d; if (tab.peek() === 'signins') loadSignins(); }));
 
         // ---- Actions ----
         async function act(fn, done) {
             try {
                 await fn();
                 if (done) E.toast(done, {type: 'success'});
-                await Promise.all([loadBlocks(), loadOverview()]);
+                if (here()) await Promise.all([loadBlocks(), loadOverview()]);
             } catch (e) {
                 if (/403|forbidden/i.test(String(e.message))) { canManage.value = false; E.toast('Only people who may manage Security can change this.', {type: 'warning'}); }
                 else E.toast(`Not done: ${e.message || e}`, {type: 'error'});
@@ -276,11 +315,13 @@ export const securityView = {
             try {
                 await api('/blocks', {method: 'POST', body: JSON.stringify({rule, note, confirmSelf})});
                 E.toast(`${rule} is blocked.`, {type: 'success'});
-                await Promise.all([loadBlocks(), loadOverview()]);
+                if (here()) await Promise.all([loadBlocks(), loadOverview()]);
                 return true;
             } catch (e) {
                 if (e.status === 409 && !confirmSelf) {
-                    if (await E.confirm(`${esc(e.message)}<br><br>Block it anyway? You would need the command line to get back in.`)) return blockRule(rule, note, true);
+                    const anyway = await E.confirm(`${esc(e.message)}<br><br>Block it anyway? You would need the command line to get back in.`);
+                    // Left while asked: nothing is blocked behind the person's back.
+                    if (anyway && here()) return blockRule(rule, note, true);
                     return false;
                 }
                 E.toast(`Not blocked: ${e.message || e}`, {type: 'error'});
@@ -326,7 +367,7 @@ export const securityView = {
                 {label: ipFilter.peek() === e.ip ? 'Show every address' : 'Only this address', icon: 'filter', disabled: !e.ip, action: () => { ipFilter.value = ipFilter.peek() === e.ip ? '' : e.ip; }},
                 {label: 'Unlock this account', icon: 'unlock', disabled: !e.email || !canManage.peek(), action: () => unlockKey(`a:${e.email.toLowerCase()}`, e.email)},
                 {label: 'Block this address…', icon: 'x-circle', disabled: !e.ip || !canManage.peek(), action: async () => {
-                    if (await E.confirm(`Block ${esc(e.ip)}? Nothing from it will reach the site.`)) blockRule(e.ip, `From the sign-in log (${e.email || 'unknown'})`);
+                    if (await E.confirm(`Block ${esc(e.ip)}? Nothing from it will reach the site.`) && here()) blockRule(e.ip, `From the sign-in log (${e.email || 'unknown'})`);
                 }},
                 {type: 'divider'},
                 {label: 'Copy the address', icon: 'copy', disabled: !e.ip, action: () => copy(e.ip, 'the address')},
@@ -350,17 +391,23 @@ export const securityView = {
             const r = blocks.peek().rules[rowIndex(row)];
             if (!r) return [];
             return [{header: r.rule}, {label: 'Remove the block', icon: 'trash-2', danger: true, disabled: !canManage.peek(), action: async () => {
-                if (await E.confirm(`Let ${esc(r.rule)} reach the site again?`)) removeRule(r.rule);
+                if (await E.confirm(`Let ${esc(r.rule)} reach the site again?`) && here()) removeRule(r.rule);
             }}, {type: 'divider'}, {label: 'Copy', icon: 'copy', action: () => copy(r.rule, 'the rule')}];
         }
 
-        function wireList(el, items, main) {
+        /**
+         * Right-click, ⋮, Shift+F10 and Enter on a row; a click does `main`, which
+         * for a row with no one obvious action is its menu (not while text is being
+         * selected - an address or email is often copied by hand).
+         */
+        function wireList(el, items, main = (row) => k.openMenuAt(row)) {
             const menu = E.contextMenu(el, {cursor: 'glyph', match: '[data-row]', inherit: false, density: 'compact', items: (row) => items(row)});
             scope(() => menu?.destroy?.());
             const onClick = (e) => {
                 const row = e.target.closest('[data-row]');
                 if (!row || e.target.closest('a')) return;
                 if (e.target.closest('.scx-kebab')) { k.openMenuAt(row); return; }
+                if (String(window.getSelection?.() || '')) return;
                 main?.(row);
             };
             const onKey = (e) => {
@@ -375,126 +422,182 @@ export const securityView = {
         }
 
         // ---- Settings (slideover) ----
+        // Unsaved settings are kept per person when the screen is left (never secrets: there are none here),
+        // with `was` - the stored settings' fingerprint when editing began - so a stale draft says so.
+        const DRAFT_KEY = draftKey(userId());
         let settingsOpen = false;
-        async function openSettings() {
-            if (settingsOpen) return;
+        /** The open panel: {take(draft)} puts a picked-up draft into it. */
+        let openPanel = null;
+        /** The panel being opened (its settings still loading), so a draft offered meanwhile can wait for it. */
+        let opening = null;
+        /** @param {{draft?: {values: object, was: string}}} [opts] - a picked-up draft to put over the stored settings */
+        function openSettings(opts = {}) {
+            if (settingsOpen) return Promise.resolve(false);
+            opening = openSettingsNow(opts).finally(() => { opening = null; });
+            return opening;
+        }
+        async function openSettingsNow({draft = null} = {}) {
             settingsOpen = true;
             let s;
             try {
                 const r = await api('/settings');
+                // Left while it loaded: no panel over another screen.
+                if (!here()) { settingsOpen = false; return; }
                 s = r.settings;
                 checksOk.value = r.checks !== false;
             } catch (e) {
+                // Nothing to save over: no form opens on a failed load.
                 settingsOpen = false;
-                E.toast(`Could not load the settings: ${e.message || e}`, {type: 'error'});
+                if (here()) E.toast(`Could not load the settings: ${e.message || e}`, {type: 'error'});
                 return;
             }
-            const f = {
-                lockOn: M.observable(s.lockout.enabled), acc: M.observable(String(s.lockout.accountThreshold)), addr: M.observable(String(s.lockout.addressThreshold)),
-                win: M.observable(String(s.lockout.windowMin)), base: M.observable(String(s.lockout.baseMin)), max: M.observable(String(s.lockout.maxMin)),
-                polOn: M.observable(s.policy.enabled), minLen: M.observable(String(s.policy.minLength)), common: M.observable(s.policy.blockCommon), personal: M.observable(s.policy.blockPersonal),
-                probeOn: M.observable(s.probes.enabled), after: M.observable(String(s.probes.blockAfter)), within: M.observable(String(s.probes.withinMin)), forMin: M.observable(String(s.probes.blockForMin)),
-                extra: M.observable(s.probes.extra.join('\n')), allow: M.observable(s.probes.allow.join('\n')),
-                signinDays: M.observable(String(s.signinDays)), staleDays: M.observable(String(s.staleAdminDays)),
-                nLock: M.observable(s.notify.lockouts), nAfter: M.observable(s.notify.successAfterFails), nProbe: M.observable(s.notify.probeBlocks), nReset: M.observable(s.notify.resetProbing)
-            };
-            const body = () => ({
-                lockout: {enabled: f.lockOn.value, accountThreshold: f.acc.value, addressThreshold: f.addr.value, windowMin: f.win.value, baseMin: f.base.value, maxMin: f.max.value},
-                policy: {enabled: f.polOn.value, minLength: f.minLen.value, blockCommon: f.common.value, blockPersonal: f.personal.value},
-                probes: {enabled: f.probeOn.value, blockAfter: f.after.value, withinMin: f.within.value, blockForMin: f.forMin.value, extra: f.extra.value, allow: f.allow.value},
-                signinDays: f.signinDays.value, staleAdminDays: f.staleDays.value,
-                notify: {lockouts: f.nLock.value, successAfterFails: f.nAfter.value, probeBlocks: f.nProbe.value, resetProbing: f.nReset.value}
-            });
-            const opened = JSON.stringify(body());
-            const saving = M.observable(false);
-            const checked = M.computed(() => checkSettings(body(), s));
-            const errText = M.computed(() => Object.values(checked.value.errors).join(' '));
-            const model = {...f, saving, errText, cannot: M.computed(() => saving.value || Boolean(errText.value)), checksOk};
-            const num = (id, key, label, help, min, max) => `<div><label class="form-label" for="scx-s-${id}">${label}${help ? ` <span data-help="${esc(help)}"></span>` : ''}</label>
-                <input id="scx-s-${id}" type="number" min="${min}" max="${max}" class="form-input" data-model="${key}.value"></div>`;
-            const sw = (key, label, help = '') => `<label class="scx-wide" style="display:flex;align-items:center;gap:.5rem"><input type="checkbox" class="form-switch" data-model="${key}.value"> ${label}${help ? ` <span data-help="${esc(help)}"></span>` : ''}</label>`;
-            const so = E.slideover({title: 'Security settings', size: 'md', position: 'right'});
-            const panel = fragment(`
-                <div class="scx-form">
-                    <p class="scx-note is-warn" data-bind-hidden="checksOk.value">This version of Domma CMS cannot run sign-in checks: the lockout and password rules below take effect once it is updated (0.83 or later).</p>
-                    <section><h4>Sign-in lockout</h4><div class="scx-form-grid">
-                        ${sw('lockOn', 'Lock after repeated wrong passwords', 'Locks the account and the address for a while - longer each time. The right password does not get in while it is locked, so guessing stops paying.')}
-                        ${num('acc', 'acc', 'Wrong passwords on one account', 'How many, within the time below, lock the account.', 3, 50)}
-                        ${num('addr', 'addr', 'Wrong passwords from one address', 'Higher than for an account: a whole office can share one address.', 5, 500)}
-                        ${num('win', 'win', 'Counted over (minutes)', '', 1, 1440)}
-                        ${num('base', 'base', 'First lock (minutes)', 'Each lock after that is twice as long.', 1, 60)}
-                        ${num('max', 'max', 'Longest lock (minutes)', '', 1, 10080)}
-                    </div></section>
-                    <section><h4>Password rules</h4><div class="scx-form-grid">
-                        ${sw('polOn', 'Check new passwords', 'Applies when a password is set or changed - accounts keep the one they have until then.')}
-                        ${num('minlen', 'minLen', 'Shortest password', 'Length matters most. 10 or more is sensible; 12+ better.', 8, 64)}
-                        ${sw('common', 'Refuse the 10,000 most common passwords')}
-                        ${sw('personal', 'Refuse passwords containing the person\'s name or email')}
-                    </div></section>
-                    <section><h4>Scanners</h4><div class="scx-form-grid">
-                        ${sw('probeOn', 'Refuse probes, and block addresses that keep probing', 'Requests for things no Domma site has (WordPress, .env files, database dumps) get an empty not found. An address someone signed in from in the last week is never blocked.')}
-                        ${num('after', 'after', 'Probes before a block', '', 1, 100)}
-                        ${num('within', 'within', 'Counted over (minutes)', '', 1, 1440)}
-                        ${num('formin', 'forMin', 'Block for (minutes)', '', 1, 10080)}
-                        <div class="scx-wide"><label class="form-label" for="scx-s-extra">Also treat as probes <span data-help="One path per line, starting with /. A trailing / covers everything under it."></span></label>
-                            <textarea id="scx-s-extra" rows="2" class="form-input scx-mono" data-model="extra.value" placeholder="/old-admin/"></textarea></div>
-                        <div class="scx-wide"><label class="form-label" for="scx-s-allow">This site does serve <span data-help="Paths that look like probes but are real here - for example /legacy/ if you host old .php pages. One per line."></span></label>
-                            <textarea id="scx-s-allow" rows="2" class="form-input scx-mono" data-model="allow.value"></textarea></div>
-                    </div></section>
-                    <section><h4>Keeping and telling</h4><div class="scx-form-grid">
-                        ${num('days', 'signinDays', 'Keep the sign-in log (days)', '', 7, 365)}
-                        ${num('stale', 'staleDays', 'Admin unused after (days)', 'The health check flags admins who have not signed in for this long.', 14, 730)}
-                        ${sw('nLock', 'Notify when an account or address is locked')}
-                        ${sw('nAfter', 'Notify when someone signs in after many wrong passwords')}
-                        ${sw('nProbe', 'Notify when a scanner is blocked', 'Off by default: on a public site this happens daily.')}
-                        ${sw('nReset', 'Notify when password resets look like someone trying addresses', 'One address asking about 3 different accounts within an hour (a person only asks about their own), or 10 requests in an hour for accounts that do not exist, from anywhere. Every request is in the sign-in log either way.')}
-                    </div></section>
-                    <section><h4>Locked out yourself?</h4>
-                        <p class="scx-note">Run this in the site's folder on the server - it clears lockouts and blocks, and the site notices within seconds:</p>
-                        <div class="scx-code">node plugins/security/bin/unlock.js --list\nnode plugins/security/bin/unlock.js --all</div>
-                    </section>
-                    <p class="scx-err" data-bind-hidden="!errText.value" data-bind-text="errText.value"></p>
-                    <div class="scx-actions">
-                        <small class="scx-muted">Ctrl+Enter saves.</small><span class="scx-spacer"></span>
-                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
-                        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value"><span data-icon="save" data-icon-size="13"></span> Save</button>
-                    </div>
-                </div>`);
-            async function save() {
-                if (model.cannot.peek()) return;
-                saving.value = true;
-                try {
-                    const r = await api('/settings', {method: 'PUT', body: JSON.stringify(checked.peek().settings)});
-                    settings.value = r.settings;
-                    E.toast('Settings saved.', {type: 'success'});
-                    so.close(true);
-                    loadAll(true);
-                } catch (e) {
-                    E.toast(`Not saved: ${e.message || e}`, {type: 'error'});
-                } finally {
-                    saving.value = false;
+            try {
+                const f = {
+                    lockOn: M.observable(s.lockout.enabled), acc: M.observable(String(s.lockout.accountThreshold)), addr: M.observable(String(s.lockout.addressThreshold)),
+                    win: M.observable(String(s.lockout.windowMin)), base: M.observable(String(s.lockout.baseMin)), max: M.observable(String(s.lockout.maxMin)),
+                    polOn: M.observable(s.policy.enabled), minLen: M.observable(String(s.policy.minLength)), common: M.observable(s.policy.blockCommon), personal: M.observable(s.policy.blockPersonal),
+                    probeOn: M.observable(s.probes.enabled), after: M.observable(String(s.probes.blockAfter)), within: M.observable(String(s.probes.withinMin)), forMin: M.observable(String(s.probes.blockForMin)),
+                    extra: M.observable(s.probes.extra.join('\n')), allow: M.observable(s.probes.allow.join('\n')),
+                    signinDays: M.observable(String(s.signinDays)), staleDays: M.observable(String(s.staleAdminDays)),
+                    nLock: M.observable(s.notify.lockouts), nAfter: M.observable(s.notify.successAfterFails), nProbe: M.observable(s.notify.probeBlocks), nReset: M.observable(s.notify.resetProbing)
+                };
+                const body = () => ({
+                    lockout: {enabled: f.lockOn.value, accountThreshold: f.acc.value, addressThreshold: f.addr.value, windowMin: f.win.value, baseMin: f.base.value, maxMin: f.max.value},
+                    policy: {enabled: f.polOn.value, minLength: f.minLen.value, blockCommon: f.common.value, blockPersonal: f.personal.value},
+                    probes: {enabled: f.probeOn.value, blockAfter: f.after.value, withinMin: f.within.value, blockForMin: f.forMin.value, extra: f.extra.value, allow: f.allow.value},
+                    signinDays: f.signinDays.value, staleAdminDays: f.staleDays.value,
+                    notify: {lockouts: f.nLock.value, successAfterFails: f.nAfter.value, probeBlocks: f.nProbe.value, resetProbing: f.nReset.value}
+                });
+                const opened = JSON.stringify(body());
+                // The draft's age: a picked-up draft keeps the one it started from.
+                let was = draft?.was || fingerprint(s);
+                const keys = Object.keys(f);
+                const read = () => Object.fromEntries(keys.map(key => [key, f[key].peek()]));
+                const write = (values) => {
+                    for (const [key, v] of Object.entries(draftValues(values, keys))) f[key].value = typeof f[key].peek() === 'boolean' ? v === true || v === 'true' : String(v ?? '');
+                };
+                // The form as the stored settings fill it: a draft keeps only what differs from this.
+                const base = read();
+                const changes = () => settingsChanges(read(), base);
+                // A picked-up draft's changes go over the settings as they are NOW - the rest stays.
+                if (draft) write(applySettingsChanges(base, draft.changes));
+                const dirty = () => JSON.stringify(body()) !== opened;
+                const keepDraft = () => {
+                    const c = changes();
+                    if (dirty() && Object.keys(c).length) store.set(DRAFT_KEY, {changes: c, was, at: new Date().toISOString()});
+                };
+                const saving = M.observable(false);
+                const checked = M.computed(() => checkSettings(body(), s));
+                const errText = M.computed(() => Object.values(checked.value.errors).join(' '));
+                const model = {...f, saving, errText, cannot: M.computed(() => saving.value || Boolean(errText.value)), checksOk};
+                const num = (id, key, label, help, min, max) => `<div><label class="form-label" for="scx-s-${id}">${label}${help ? ` <span data-help="${esc(help)}"></span>` : ''}</label>
+                    <input id="scx-s-${id}" type="number" min="${min}" max="${max}" class="form-input" data-model="${key}.value"></div>`;
+                const sw = (key, label, help = '') => `<label class="scx-wide" style="display:flex;align-items:center;gap:.5rem"><input type="checkbox" class="form-switch" data-model="${key}.value"> ${label}${help ? ` <span data-help="${esc(help)}"></span>` : ''}</label>`;
+                const so = E.slideover({title: 'Security settings', size: 'md', position: 'right'});
+                const panel = fragment(`
+                    <div class="scx-form">
+                        <p class="scx-note is-warn" data-bind-hidden="checksOk.value">This version of Domma CMS cannot run sign-in checks: the lockout and password rules below take effect once it is updated (0.83 or later).</p>
+                        <section><h4>Sign-in lockout</h4><div class="scx-form-grid">
+                            ${sw('lockOn', 'Lock after repeated wrong passwords', 'Locks the account and the address for a while - longer each time. The right password does not get in while it is locked, so guessing stops paying.')}
+                            ${num('acc', 'acc', 'Wrong passwords on one account', 'How many, within the time below, lock the account.', 3, 50)}
+                            ${num('addr', 'addr', 'Wrong passwords from one address', 'Higher than for an account: a whole office can share one address.', 5, 500)}
+                            ${num('win', 'win', 'Counted over (minutes)', '', 1, 1440)}
+                            ${num('base', 'base', 'First lock (minutes)', 'Each lock after that is twice as long.', 1, 60)}
+                            ${num('max', 'max', 'Longest lock (minutes)', '', 1, 10080)}
+                        </div></section>
+                        <section><h4>Password rules</h4><div class="scx-form-grid">
+                            ${sw('polOn', 'Check new passwords', 'Applies when a password is set or changed - accounts keep the one they have until then.')}
+                            ${num('minlen', 'minLen', 'Shortest password', 'Length matters most. 10 or more is sensible; 12+ better.', 8, 64)}
+                            ${sw('common', 'Refuse the 10,000 most common passwords')}
+                            ${sw('personal', 'Refuse passwords containing the person\'s name or email')}
+                        </div></section>
+                        <section><h4>Scanners</h4><div class="scx-form-grid">
+                            ${sw('probeOn', 'Refuse probes, and block addresses that keep probing', 'Requests for things no Domma site has (WordPress, .env files, database dumps) get an empty not found. An address someone signed in from in the last week is never blocked.')}
+                            ${num('after', 'after', 'Probes before a block', '', 1, 100)}
+                            ${num('within', 'within', 'Counted over (minutes)', '', 1, 1440)}
+                            ${num('formin', 'forMin', 'Block for (minutes)', '', 1, 10080)}
+                            <div class="scx-wide"><label class="form-label" for="scx-s-extra">Also treat as probes <span data-help="One path per line, starting with /. A trailing / covers everything under it."></span></label>
+                                <textarea id="scx-s-extra" rows="2" class="form-input scx-mono" data-model="extra.value" placeholder="/old-admin/"></textarea></div>
+                            <div class="scx-wide"><label class="form-label" for="scx-s-allow">This site does serve <span data-help="Paths that look like probes but are real here - for example /legacy/ if you host old .php pages. One per line."></span></label>
+                                <textarea id="scx-s-allow" rows="2" class="form-input scx-mono" data-model="allow.value"></textarea></div>
+                        </div></section>
+                        <section><h4>Keeping and telling</h4><div class="scx-form-grid">
+                            ${num('days', 'signinDays', 'Keep the sign-in log (days)', '', 7, 365)}
+                            ${num('stale', 'staleDays', 'Admin unused after (days)', 'The health check flags admins who have not signed in for this long.', 14, 730)}
+                            ${sw('nLock', 'Notify when an account or address is locked')}
+                            ${sw('nAfter', 'Notify when someone signs in after many wrong passwords')}
+                            ${sw('nProbe', 'Notify when a scanner is blocked', 'Off by default: on a public site this happens daily.')}
+                            ${sw('nReset', 'Notify when password resets look like someone trying addresses', 'One address asking about 3 different accounts within an hour (a person only asks about their own), or 10 requests in an hour for accounts that do not exist, from anywhere. Every request is in the sign-in log either way.')}
+                        </div></section>
+                        <section><h4>Locked out yourself?</h4>
+                            <p class="scx-note">Run this in the site's folder on the server - it clears lockouts and blocks, and the site notices within seconds:</p>
+                            <div class="scx-code">node plugins/security/bin/unlock.js --list\nnode plugins/security/bin/unlock.js --all</div>
+                        </section>
+                        <p class="scx-err" data-bind-hidden="!errText.value" data-bind-text="errText.value"></p>
+                        <div class="scx-actions">
+                            <small class="scx-muted">Ctrl+Enter saves.</small><span class="scx-spacer"></span>
+                            <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+                            <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value"><span data-icon="save" data-icon-size="13"></span> Save</button>
+                        </div>
+                    </div>`);
+                async function save() {
+                    if (model.cannot.peek() || saving.peek()) return;
+                    saving.value = true;
+                    // Locked while it saves: the panel closes after, so anything typed meanwhile would be lost unsaid.
+                    panel.inert = true;
+                    const sent = changes();
+                    try {
+                        const r = await api('/settings', {method: 'PUT', body: JSON.stringify(checked.peek().settings)});
+                        // Kept as a draft if the screen went meanwhile - it is saved now, so that draft goes (only if it is this one).
+                        if (stableJson(store.get(DRAFT_KEY)?.changes) === stableJson(sent)) store.remove(DRAFT_KEY);
+                        if (!here()) return;
+                        settings.value = r.settings;
+                        E.toast('Settings saved.', {type: 'success'});
+                        so.close(true);
+                        loadAll(true);
+                    } catch (e) {
+                        if (here()) E.toast(`Not saved: ${e.message || e}`, {type: 'error'});
+                    } finally {
+                        saving.value = false;
+                        panel.inert = false;
+                    }
                 }
+                so.element.appendChild(panel);
+                const disposeHelp = k.helpPopovers(panel);
+                const handle = M.applyBindings(model, panel, {methods: {save, cancel: () => so.close()}});
+                panel.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); save(); } });
+                // Reloading or closing the tab: keep the draft, and let the browser ask.
+                const onUnload = (e) => { if (!dirty()) return; keepDraft(); e.preventDefault(); e.returnValue = ''; };
+                window.addEventListener('beforeunload', onUnload);
+                let releaseLifetime = () => {};
+                k.onceClosed(so, () => { handle.dispose(); disposeHelp(); settingsOpen = false; openPanel = null; window.removeEventListener('beforeunload', onUnload); releaseLifetime(); });
+                openPanel = {take(d) { write(applySettingsChanges(read(), d.changes)); if (d.was) was = d.was; }};
+                // The discard question wraps AFTER onceClosed, so Cancel leaves the panel (and its bindings) alive.
+                const close = so.close.bind(so);
+                let asking = false;
+                so.close = async (force) => {
+                    // Never while saving (Escape, Cancel, the backdrop): the panel closes itself once the PUT answers.
+                    if (force !== true && saving.peek()) return undefined;
+                    if (force !== true && dirty()) {
+                        if (asking) return undefined;
+                        asking = true;
+                        const ok = await E.confirm('Discard the changes you have not saved?');
+                        asking = false;
+                        if (!ok || !settingsOpen) return undefined;
+                    }
+                    return close();
+                };
+                // The screen left with the panel open: the changes stay as a draft for next time.
+                releaseLifetime = lifetime.add(() => { keepDraft(); try { so.close(true); } catch { /* gone */ } });
+                I.scan(panel);
+                so.open();
+                return true;
+            } catch (e) {
+                // Opening failed part-way: release the once-only claim, or the cog would never open it again.
+                settingsOpen = false;
+                E.toast(`Could not open the settings: ${e?.message || e}`, {type: 'error'});
+                return false;
             }
-            so.element.appendChild(panel);
-            const disposeHelp = k.helpPopovers(panel);
-            const handle = M.applyBindings(model, panel, {methods: {save, cancel: () => so.close()}});
-            panel.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); save(); } });
-            k.onceClosed(so, () => { handle.dispose(); disposeHelp(); settingsOpen = false; });
-            const close = so.close.bind(so);
-            let asking = false;
-            so.close = async (force) => {
-                if (force !== true && JSON.stringify(body()) !== opened) {
-                    if (asking) return undefined;
-                    asking = true;
-                    const ok = await E.confirm('Discard the changes you have not saved?');
-                    asking = false;
-                    if (!ok) return undefined;
-                }
-                return close();
-            };
-            scope(() => { try { so.close(true); } catch { /* gone */ } });
-            I.scan(panel);
-            so.open();
         }
 
         // ---- Bindings ----
@@ -509,13 +612,14 @@ export const securityView = {
             if (t === 'blocked') loadBlocks();
         };
         const model = {tab, loading, error, checksOk, canManage, scoreText, scoreWidth, scoreTone, attentionText, asOf, ov, blockedCount, checks,
-            result, days, query, signinRows, signinText, signinEmpty, lockRows, tempRows, ruleRows, newRule, newNote, youText};
+            result, days, query, signinRows, signinText, signinEmpty, lockRows, tempRows, ruleRows, newRule, newNote, youText,
+            checksLoading, signinsLoading, blocksLoading, resAll: resLabel.all, resFailed: resLabel.failed, resOk: resLabel.ok, resResets: resLabel.resets};
         const methods = {
             res_resets: () => { result.value = 'resets'; },
             tab_overview: () => setTab('overview'), tab_signins: () => setTab('signins'), tab_blocked: () => setTab('blocked'),
             res_all: () => { result.value = 'all'; }, res_failed: () => { result.value = 'failed'; }, res_ok: () => { result.value = 'ok'; },
             exportCsv,
-            unlockAll: async () => { if (await E.confirm('Unlock every locked account and address?')) act(() => api('/lockouts?key=*', {method: 'DELETE'}), 'Everything unlocked.'); },
+            unlockAll: async () => { if (await E.confirm('Unlock every locked account and address?') && here()) act(() => api('/lockouts?key=*', {method: 'DELETE'}), 'Everything unlocked.'); },
             addRule: () => {
                 const rule = newRule.peek().trim();
                 if (!ipRuleValid(rule)) { E.toast('Not an address or range - for example 81.2.69.142, 192.168.1.* or 10.0.0.0/8.', {type: 'warning'}); return false; }
@@ -523,20 +627,54 @@ export const securityView = {
                 return false;
             }
         };
+        // A half-typed block (an address, a reason - nothing secret) waits for the next visit.
+        const RULE_KEY = DRAFT_KEY ? `security.rule-draft.${userId()}` : '';
+        const ruleDraft = store.get(RULE_KEY);
+        if (ruleDraft && typeof ruleDraft === 'object') { newRule.value = String(ruleDraft.rule || '').slice(0, 200); newNote.value = String(ruleDraft.note || '').slice(0, 200); }
+        scope(() => {
+            const rule = newRule.peek().trim();
+            const note = newNote.peek().trim();
+            if (rule || note) store.set(RULE_KEY, {rule, note}); else store.remove(RULE_KEY);
+        });
         const bindings = M.applyBindings(model, root, {methods});
         scope(() => bindings.dispose());
-        scope(k.helpPopovers(root, {position: 'bottom'}));
         wireList(root.querySelector('.scx-checks'), checkItems, (row) => { const c = checkList[rowIndex(row)]; if (c) toggleCheck(c); });
         wireList(root.querySelector('.scx-signins'), signinItems);
         wireList(root.querySelector('.scx-locks'), lockItems);
         wireList(root.querySelector('.scx-temps'), tempItems);
         wireList(root.querySelector('.scx-rules'), ruleItems);
+        // Help on the toolbars and card titles, once the rows and bindings are in.
+        scope(k.helpPopovers(root, {position: 'bottom'}));
 
         k.addBannerAction($container, {id: 'security-refresh', icon: 'refresh-cw', title: 'Run the checks again', onClick: () => loadAll(true)});
-        k.addBannerAction($container, {id: 'security-settings', icon: 'settings', title: 'Security settings', onClick: openSettings});
+        k.addBannerAction($container, {id: 'security-settings', icon: 'settings', title: 'Security settings', onClick: () => openSettings()});
 
         I.scan(root);
         await loadAll(false);
-        if (here()) I.scan(root);
+        if (!here()) return;
+        I.scan(root);
+        await offerDraft();
+
+        /** Settings left unsaved last time: offer them back, saying if the stored settings moved on since. */
+        async function offerDraft() {
+            const draft = usableDraft(store.get(DRAFT_KEY));
+            if (!draft) return;
+            let now = '';
+            try { now = fingerprint((await api('/settings')).settings); } catch { return; }   // asked next time
+            if (!here()) return;
+            const note = draftNote(draft, now);
+            // OK is the destructive choice: Cancel, Escape and a backdrop click all answer false, and all KEEP.
+            const throwAway = await E.confirm(`Throw away the changes to the Security settings you left unsaved? ${draft.full ? 'Keep them to carry on where you left off.' : 'Keeping them puts back only what you changed.'}${note ? `<br><br>${esc(note)}` : ''}`,
+                {title: 'Unsaved settings', confirmText: 'Throw away', cancelText: 'Keep them'});
+            // Left while asked: the draft stays for next time.
+            if (!here()) return;
+            if (throwAway) { store.remove(DRAFT_KEY); return; }
+            // Kept: the panel holds it now (and keeps it again if the screen is left); it leaves storage only once it is open.
+            // The cog may have opened the panel while this was asked: the draft goes into that one.
+            if (opening) await opening;
+            if (!here()) return;
+            if (openPanel) { openPanel.take(draft); store.remove(DRAFT_KEY); return; }
+            if (await openSettings({draft})) store.remove(DRAFT_KEY);
+        }
     }
 };