domma-cms 0.82.0 → 0.83.0

package/plugins/security/admin/templates/security.html

@@ -0,0 +1,170 @@
+<!-- Security. Bound with M.applyBindings - admin/views/security.js inserts the item templates (the router
+     renders a templateUrl through _.render, eating any {{…}}). Refresh and Settings are banner actions. -->
+<div class="scx">
+    <p class="scx-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+    <p class="scx-note is-warn" data-bind-hidden="checksOk.value">This version of Domma CMS cannot run sign-in checks: lockout and password rules are off until it is updated (0.83 or later). Probe blocking and the health check work.</p>
+
+    <nav class="scx-tabs" role="tablist" aria-label="Security">
+        <button type="button" role="tab" data-on-click="tab_overview" data-bind-class="tab.value === 'overview' && 'is-on'"><span data-icon="shield" data-icon-size="14"></span> Overview</button>
+        <button type="button" role="tab" data-on-click="tab_signins" data-bind-class="tab.value === 'signins' && 'is-on'"><span data-icon="log-in" data-icon-size="14"></span> Sign-ins</button>
+        <button type="button" role="tab" data-on-click="tab_blocked" data-bind-class="tab.value === 'blocked' && 'is-on'"><span data-icon="x-circle" data-icon-size="14"></span> Blocked <small class="scx-count" data-bind-hidden="!blockedCount.value" data-bind-text="blockedCount.value"></small></button>
+    </nav>
+
+    <!-- Overview -->
+    <section class="scx-panel" data-bind-hidden="tab.value !== 'overview'" data-bind-class="loading.value && 'is-busy'">
+        <div class="scx-tiles">
+            <div class="scx-card scx-tile scx-score" data-bind-data-tone="scoreTone.value">
+                <small>Health <span data-help="The share of checks that pass (a check that could be better counts half; one that could not be answered is left out). The checks below say what each looks at and how to fix it."></span></small>
+                <strong data-bind-text="scoreText.value">—</strong>
+                <span class="scx-bar"><span data-bind-style-width="scoreWidth.value"></span></span>
+            </div>
+            <div class="scx-card scx-tile"><small>Need attention</small><strong data-bind-text="attentionText.value">—</strong></div>
+            <div class="scx-card scx-tile"><small>Failed sign-ins, 24h <span data-help="Failed sign-ins in the last 24 hours: a wrong password, an unknown email, a locked account."></span></small><strong data-bind-text="ov.value.failed">—</strong></div>
+            <div class="scx-card scx-tile"><small>Blocked now <span data-help="Addresses blocked by a rule or for probing, and accounts or addresses locked after wrong passwords."></span></small><strong data-bind-text="ov.value.blocked">—</strong></div>
+            <div class="scx-card scx-tile"><small>Probes refused today <span data-help="Requests for things no Domma site has - WordPress logins, .env files, database dumps. Scanners send them to every site they find; they are answered with an empty 'not found'."></span></small><strong data-bind-text="ov.value.probes">—</strong></div>
+        </div>
+
+        <div class="scx-card">
+            <div class="scx-card-title">Checks
+                <span data-help-title="Checks" data-help="What could let someone in, or let you down. Click a check for why it matters and how to fix it. They are worked out again every ten minutes, or now with Refresh (top right)."></span>
+                <span class="scx-spacer"></span>
+                <small class="scx-muted" data-bind-text="asOf.value"></small>
+            </div>
+            <div class="scx-checks" data-each="checks.value key=id"></div>
+        </div>
+    </section>
+
+    <!-- Sign-ins -->
+    <section class="scx-panel" data-bind-hidden="tab.value !== 'signins'">
+        <div class="scx-toolbar">
+            <div class="scx-seg" role="group" aria-label="Which sign-ins">
+                <button type="button" data-on-click="res_all" data-bind-class="result.value === 'all' && 'is-on'">All</button>
+                <button type="button" data-on-click="res_failed" data-bind-class="result.value === 'failed' && 'is-on'">Failed</button>
+                <button type="button" data-on-click="res_ok" data-bind-class="result.value === 'ok' && 'is-on'">Succeeded</button>
+            </div>
+            <select class="form-input scx-days" aria-label="Period" data-model="days.value">
+                <option value="1">Last 24 hours</option><option value="7">Last 7 days</option><option value="30">Last 30 days</option><option value="365">All kept</option>
+            </select>
+            <input type="search" class="form-input scx-search" placeholder="Email, address, browser…" aria-label="Search sign-ins" data-model="query.value">
+            <span class="scx-spacer"></span>
+            <small class="scx-muted" data-bind-text="signinText.value"></small>
+            <button type="button" class="btn btn-sm btn-ghost" data-on-click="exportCsv"><span data-icon="download" data-icon-size="13"></span> CSV</button>
+            <span data-help-title="Sign-ins" data-help="Every sign-in attempt, kept for the days set in the settings. Right-click (or ⋮) a row to block its address, unlock the account, or see only that address."></span>
+        </div>
+        <div class="scx-card scx-flush">
+            <p class="scx-note scx-pad" data-bind-hidden="signinRows.value.length" data-bind-text="signinEmpty.value"></p>
+            <div class="scx-list scx-signins" data-each="signinRows.value key=id"></div>
+        </div>
+    </section>
+
+    <!-- Blocked -->
+    <section class="scx-panel" data-bind-hidden="tab.value !== 'blocked'">
+        <div class="scx-card">
+            <div class="scx-card-title">Locked after wrong passwords
+                <span data-help="An account or address is locked for a while after repeated wrong passwords - longer each time. Unlock one here, or with the command line (see Settings) if you are locked out yourself."></span>
+                <span class="scx-spacer"></span>
+                <button type="button" class="btn btn-xs btn-ghost" data-on-click="unlockAll" data-bind-hidden="!lockRows.value.length" data-bind-disabled="!canManage.value">Unlock all</button>
+            </div>
+            <p class="scx-note" data-bind-hidden="lockRows.value.length">Nothing is locked.</p>
+            <div class="scx-list scx-locks" data-each="lockRows.value key=id"></div>
+        </div>
+        <div class="scx-card">
+            <div class="scx-card-title">Blocked for probing
+                <span data-help="Addresses that kept asking for things no Domma site has, blocked for the time set in the settings. An address someone signed in from in the last week is never blocked this way."></span></div>
+            <p class="scx-note" data-bind-hidden="tempRows.value.length">No address is blocked for probing.</p>
+            <div class="scx-list scx-temps" data-each="tempRows.value key=id"></div>
+        </div>
+        <div class="scx-card">
+            <div class="scx-card-title">Blocked by hand
+                <span data-help="Addresses or ranges that may not reach the site at all - 81.2.69.142, 192.168.1.*, 10.0.0.0/8 or an IPv6 prefix like 2a00:23c7:*. They get a bare 'Forbidden'."></span></div>
+            <form class="scx-add" data-on-submit="addRule" data-bind-hidden="!canManage.value">
+                <input type="text" class="form-input scx-mono" placeholder="Address or range" aria-label="Address or range" data-model="newRule.value">
+                <input type="text" class="form-input" placeholder="Why (optional)" aria-label="Why" data-model="newNote.value">
+                <button type="submit" class="btn btn-sm btn-primary" data-bind-disabled="!newRule.value"><span data-icon="plus" data-icon-size="12"></span> Block</button>
+                <small class="scx-muted" data-bind-text="youText.value"></small>
+            </form>
+            <p class="scx-note" data-bind-hidden="ruleRows.value.length">No address is blocked by hand.</p>
+            <div class="scx-list scx-rules" data-each="ruleRows.value key=id"></div>
+        </div>
+    </section>
+</div>
+
+<style>
+.scx { display: flex; flex-direction: column; gap: 1rem; }
+.scx [hidden] { display: none !important; }
+.scx-panel { display: flex; flex-direction: column; gap: 1rem; transition: opacity .2s; }
+.scx-panel.is-busy { opacity: .6; }
+.scx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.scx-note.is-bad, .scx-note.is-warn { padding: .6rem .8rem; border-radius: var(--dm-radius-md); }
+.scx-note.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-danger); }
+.scx-note.is-warn { background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); }
+.scx-pad { padding: .8rem .9rem; }
+.scx-tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--dm-border); overflow-x: auto; }
+.scx-tabs button { border: 0; background: none; color: var(--dm-text-muted); font: inherit; font-size: var(--dm-text-sm); padding: .45rem .75rem; cursor: pointer;
+    border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
+.scx-tabs button:hover { color: var(--dm-text); }
+.scx-tabs button.is-on { color: var(--dm-text); border-bottom-color: var(--dm-primary); font-weight: 600; }
+.scx-count { font-size: var(--dm-text-xs); padding: 0 .4rem; border-radius: 999px; background: color-mix(in srgb, var(--dm-text) 10%, transparent); }
+.scx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
+.scx-flush { padding: 0; }
+.scx-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; flex-wrap: wrap; }
+.scx-spacer { flex: 1; }
+.scx-muted { color: var(--dm-text-muted); font-weight: 400; font-size: var(--dm-text-xs); }
+.scx-mono { font-family: var(--dm-font-mono, monospace); }
+.scx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
+.scx-tile { gap: .15rem; }
+.scx-tile small { color: var(--dm-text-muted); font-size: var(--dm-text-sm); display: inline-flex; align-items: center; gap: .3rem; }
+.scx-tile strong { font-size: var(--dm-text-2xl, 1.5rem); line-height: 1.15; font-weight: 600; }
+.scx-bar { display: block; height: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--dm-text) 10%, transparent); overflow: hidden; margin-top: .3rem; }
+.scx-bar span { display: block; height: 100%; border-radius: inherit; background: var(--dm-primary); }
+.scx-score[data-tone="good"] .scx-bar span { background: var(--dm-success); }
+.scx-score[data-tone="poor"] .scx-bar span { background: var(--dm-warning); }
+.scx-score[data-tone="bad"] .scx-bar span { background: var(--dm-danger); }
+.scx-checks { display: flex; flex-direction: column; }
+.scx-group { font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--dm-text-muted); padding: .7rem .3rem .25rem; font-weight: 600; }
+.scx-check { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 1.5rem; gap: .5rem; align-items: start; padding: .5rem .3rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.scx-check:hover, .scx-check:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.scx-status { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: .75rem; font-weight: 700; margin-top: .1rem; }
+.scx-status[data-status="pass"] { color: var(--dm-success); background: color-mix(in srgb, var(--dm-success) 14%, transparent); }
+.scx-status[data-status="warn"] { color: var(--dm-warning); background: color-mix(in srgb, var(--dm-warning) 16%, transparent); }
+.scx-status[data-status="fail"] { color: var(--dm-danger); background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.scx-status[data-status="info"] { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text) 8%, transparent); }
+.scx-check-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
+.scx-check-main strong { font-size: var(--dm-text-sm); }
+.scx-check-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.scx-more { display: flex; flex-direction: column; gap: .3rem; margin-top: .35rem; font-size: var(--dm-text-sm); }
+.scx-more a { align-self: flex-start; }
+.scx-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.scx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.scx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.scx-seg button + button { border-left: 1px solid var(--dm-border); }
+.scx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.scx-days, .scx-search { width: auto; padding: .25rem .5rem; font-size: var(--dm-text-sm); }
+.scx-search { flex: 0 1 15rem; }
+.scx-list { display: flex; flex-direction: column; max-height: 34rem; overflow-y: auto; }
+.scx-row { display: grid; align-items: center; gap: .6rem; padding: .45rem .8rem; border-bottom: 1px solid var(--dm-border); font-size: var(--dm-text-sm); cursor: default; }
+.scx-row:last-child { border-bottom: 0; }
+.scx-row:hover, .scx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.scx-signins .scx-row { grid-template-columns: 8.5rem 5.5rem minmax(8rem, 1.3fr) 8rem minmax(6rem, 1fr) 1.5rem; }
+.scx-locks .scx-row, .scx-temps .scx-row, .scx-rules .scx-row { grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.4fr) 10rem 1.5rem; padding: .45rem .3rem; }
+.scx-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scx-pill { display: inline-flex; align-items: center; justify-self: start; font-size: var(--dm-text-xs); font-weight: 600; padding: .05rem .5rem; border-radius: 999px; }
+.scx-pill[data-ok="true"] { color: var(--dm-success); background: color-mix(in srgb, var(--dm-success) 14%, transparent); }
+.scx-pill[data-ok="false"] { color: var(--dm-danger); background: color-mix(in srgb, var(--dm-danger) 12%, transparent); }
+.scx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .25rem; }
+.scx-kebab:hover { color: var(--dm-primary); }
+.scx-add { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 0; }
+.scx-add .form-input { width: auto; flex: 1 1 11rem; padding: .25rem .5rem; font-size: var(--dm-text-sm); }
+/* settings slideover */
+.scx-form { display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 1rem; }
+.scx-form h4 { margin: 0 0 .5rem; font-size: var(--dm-text-base); display: flex; align-items: center; gap: .5rem; }
+.scx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .7rem 1rem; }
+.scx-wide { grid-column: 1 / -1; }
+.scx-err { color: var(--dm-danger); font-size: var(--dm-text-xs); }
+.scx-actions { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--dm-border); padding-top: .8rem; }
+.scx-code { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs); background: color-mix(in srgb, var(--dm-text) 7%, transparent); padding: .4rem .55rem; border-radius: var(--dm-radius-sm); white-space: pre-wrap; }
+@media (max-width: 720px) {
+    .scx-signins .scx-row { grid-template-columns: 1fr 5rem 1.5rem; }
+    .scx-signins .scx-row .scx-hide-sm { display: none; }
+}
+</style>