security hardening
This commit is contained in:
@@ -3,3 +3,6 @@ SETTINGS_ADMIN_PASSWORD=
|
||||
SETTINGS_DOMAIN=tickets.indifferentketchup.com
|
||||
INTERNAL_API_PORT=12753
|
||||
INTERNAL_API_SECRET=
|
||||
# Cookie-signing + CSRF secret. Generate with: openssl rand -hex 32
|
||||
SESSION_SECRET=
|
||||
NODE_ENV=production
|
||||
|
||||
70
settings-site/CLAUDE.md
Normal file
70
settings-site/CLAUDE.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Scope
|
||||
|
||||
This is the **settings-site** subdirectory of the broccolini-bot repo. It is a **separate Express process** that provides an admin web UI for editing the bot's runtime config. It is **not** part of the bot's Node process.
|
||||
|
||||
The parent repo's rules in `/opt/broccolini-bot/CLAUDE.md` still apply here — especially **CommonJS only**, **read before write**, and **no unsolicited refactors**. Read that file alongside this one.
|
||||
|
||||
## Commands
|
||||
|
||||
- `npm start` — run the settings site (`node server.js`).
|
||||
- `npm run dev` — run with `node --watch` for auto-reload.
|
||||
- No lint, no test framework, no build step. Frontend is vanilla JS served from `public/` — no bundler.
|
||||
- Deploy via its own compose file: `docker compose up --build -d` from this directory. Container name `broccolini-settings`, joins external `broccoli-net`.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Two processes, one `.env`
|
||||
The settings site is a thin HTTPS-oriented proxy in front of the bot's internal API:
|
||||
|
||||
```
|
||||
browser ──► settings server.js (:SETTINGS_PORT, default 12752)
|
||||
│ session auth (SETTINGS_ADMIN_PASSWORD)
|
||||
▼
|
||||
bot internalApp (127.0.0.1:INTERNAL_API_PORT, default 12753)
|
||||
│ header auth (x-internal-secret = INTERNAL_API_SECRET)
|
||||
▼
|
||||
routes/internalApi.js in /opt/broccolini-bot
|
||||
```
|
||||
|
||||
`server.js` loads `../.env` (the **bot's** env file) — both processes share it. `docker-compose.yml` also mounts `env_file: ../.env`, not a local one. There is no settings-site-specific env beyond what's in `.env.example`.
|
||||
|
||||
### Proxied endpoints
|
||||
`server.js` exposes five authenticated endpoints that forward to the bot's `/internal/*` API via `callBot()`:
|
||||
|
||||
| Settings route | Bot route |
|
||||
|---|---|
|
||||
| `GET /api/config` | `GET /internal/config` |
|
||||
| `POST /api/config` | `POST /internal/config` |
|
||||
| `GET /api/discord/guild` | `GET /internal/discord/guild` |
|
||||
| `POST /api/restart` | `POST /internal/restart` |
|
||||
| `GET /api/restart/status` | `GET /internal/restart/status` |
|
||||
|
||||
Every response-shape change in the bot's `/internal/*` handlers (`routes/internalApi.js`) is a breaking change here. The bot also gates `POST /internal/config` on an `ALLOWED_CONFIG_KEYS` allowlist — **adding a new field to the UI requires adding the key to that Set in the bot first**, otherwise the save returns 400 for that key.
|
||||
|
||||
### Session cookie requires HTTPS
|
||||
`server.js:20-26` sets `cookie.secure: true`. Browsers will refuse to persist the session cookie over plain HTTP, so login silently fails when not behind an HTTPS reverse proxy (`SETTINGS_DOMAIN` is the deployed domain). If you're reproducing a login bug, check this first before debugging auth logic. The `session secret` falls back to `'fallback-secret-change-me'` when `INTERNAL_API_SECRET` is unset — don't rely on the fallback in any environment that matters.
|
||||
|
||||
### Client-side routing
|
||||
`public/index.html` is a single page with all sections rendered; `public/js/app.js` toggles `.hidden` on sections based on `location.pathname`. Routes live in the `ROUTES` map (`app.js:425`). The server has `app.get('*', requireAuth, …)` as a catch-all back to `index.html` (`server.js:97`), so any new client route works without server changes as long as it's added to `ROUTES`.
|
||||
|
||||
### Config field binding (frontend)
|
||||
Any form element with `data-key="SOME_CONFIG_KEY"` participates in the editor:
|
||||
- `populateFields()` (`app.js:102`) fills it from `GET /api/config` and wires change listeners.
|
||||
- Checkboxes serialize to the strings `'true'` / `'false'`, and `<input type="color">` serializes to `0xRRGGBB` — this matches how the bot stores these values.
|
||||
- `pendingChanges` accumulates diffs; `saveConfig()` POSTs the whole diff at once.
|
||||
- `data-smart="channel|category|role|member|multi-member"` swaps the bare `<input>` for a searchable Discord picker backed by `GET /api/discord/guild` (see `public/js/discord.js`).
|
||||
|
||||
**To add a new editable config field:** (1) add the key to the bot's `ALLOWED_CONFIG_KEYS`, (2) add a `<input data-key="NEW_KEY">` (optionally `data-smart=…`) inside the appropriate `.section` in `public/index.html`. No JS changes needed.
|
||||
|
||||
### Notification thresholds editor
|
||||
The Notifications section is **not** a simple `data-key` field — it's a custom editor (`app.js:239-423`) that serializes into a single hidden `NOTIFICATION_THRESHOLDS_JSON` field. Alert keys are hard-coded in `NOTIFICATION_TAB_KEYS` (surge / patterns / unclaimed / chat) and described in `NOTIFICATION_ALERT_DESCRIPTIONS`. **Adding a new alert key requires editing both of those objects** — otherwise it won't show up in any tab. Threshold values accept whole numbers or duration strings matching `^(\d+[mhd])+$` (e.g. `15m`, `1h`, `1d6h`).
|
||||
|
||||
## Gotchas
|
||||
|
||||
- The frontend has no framework and no build — edit `public/js/*.js` directly; changes are live on reload.
|
||||
- `getaddrinfo` failures from `callBot()` surface to the UI as "Bot unreachable" (502). This is almost always the bot process being down or the internal port being wrong, not a bug in this codebase.
|
||||
- `docker-compose.yml` binds the port to the Tailscale IP `100.114.205.53:12752` — not `0.0.0.0`. Changing that binding has security implications.
|
||||
56
settings-site/package-lock.json
generated
56
settings-site/package-lock.json
generated
@@ -8,9 +8,13 @@
|
||||
"name": "broccolini-settings",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"cookie-parser": "^1.4.6",
|
||||
"csrf-csrf": "^4.0.3",
|
||||
"dotenv": "^16.0.0",
|
||||
"express": "^4.18.0",
|
||||
"express-rate-limit": "^7.4.0",
|
||||
"express-session": "^1.17.3",
|
||||
"helmet": "^8.0.0",
|
||||
"node-fetch": "^2.7.0"
|
||||
}
|
||||
},
|
||||
@@ -116,11 +120,39 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-parser": {
|
||||
"version": "1.4.7",
|
||||
"resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
|
||||
"integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "0.7.2",
|
||||
"cookie-signature": "1.0.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-parser/node_modules/cookie-signature": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
|
||||
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie-signature": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
|
||||
"integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA=="
|
||||
},
|
||||
"node_modules/csrf-csrf": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/csrf-csrf/-/csrf-csrf-4.0.3.tgz",
|
||||
"integrity": "sha512-DaygOzelL4Qo1pHwI9LPyZL+X2456/OzpT596kNeZGiTSqKVDOk/9PPJ+FjzZacjMUEusOHw3WJKe1RW4iUhrw==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"http-errors": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
@@ -268,6 +300,21 @@
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/express-rate-limit": {
|
||||
"version": "7.5.1",
|
||||
"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.1.tgz",
|
||||
"integrity": "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/express-rate-limit"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"express": ">= 4.11"
|
||||
}
|
||||
},
|
||||
"node_modules/express-session": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/express-session/-/express-session-1.19.0.tgz",
|
||||
@@ -399,6 +446,15 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/helmet": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/helmet/-/helmet-8.1.0.tgz",
|
||||
"integrity": "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/http-errors": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
|
||||
|
||||
@@ -7,9 +7,13 @@
|
||||
"dev": "node --watch server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.18.0",
|
||||
"express-session": "^1.17.3",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"csrf-csrf": "^4.0.3",
|
||||
"dotenv": "^16.0.0",
|
||||
"express": "^4.18.0",
|
||||
"express-rate-limit": "^7.4.0",
|
||||
"express-session": "^1.17.3",
|
||||
"helmet": "^8.0.0",
|
||||
"node-fetch": "^2.7.0"
|
||||
}
|
||||
}
|
||||
|
||||
49
settings-site/public/css/login.css
Normal file
49
settings-site/public/css/login.css
Normal file
@@ -0,0 +1,49 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0f1117;
|
||||
color: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.login-card {
|
||||
background: #1e2235;
|
||||
border: 1px solid #2a2d3e;
|
||||
border-radius: 16px;
|
||||
padding: 48px 40px;
|
||||
width: 380px;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.login-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
|
||||
.login-card p { font-size: 14px; color: #888; margin-bottom: 32px; }
|
||||
.login-card input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: #0f1117;
|
||||
border: 1px solid #2a2d3e;
|
||||
border-radius: 8px;
|
||||
color: #e0e0e0;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
outline: none;
|
||||
transition: border-color 200ms;
|
||||
}
|
||||
.login-card input:focus { border-color: #5865f2; }
|
||||
.login-card button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #5865f2;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 200ms;
|
||||
}
|
||||
.login-card button:hover { background: #4752c4; }
|
||||
.error { color: #ed4245; font-size: 13px; margin-top: 8px; display: none; }
|
||||
.error.visible { display: block; }
|
||||
@@ -132,3 +132,26 @@ body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--tex
|
||||
.loading.hidden { display: none; }
|
||||
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* Notifications section */
|
||||
#s-notifications .notif-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
|
||||
#s-notifications .notif-tab-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
|
||||
#s-notifications .notif-tab-btn.active { border-color: var(--accent); color: var(--accent); }
|
||||
#s-notifications .notif-panel.hidden { display: none; }
|
||||
#s-notifications .notif-editor { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; background: var(--surface); }
|
||||
#s-notifications .notif-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; min-height: 28px; }
|
||||
#s-notifications .notif-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
|
||||
#s-notifications .notif-chip button { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0; line-height: 1; font-size: 14px; }
|
||||
#s-notifications .notif-input-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
||||
#s-notifications .notif-input-row input { width: 220px; }
|
||||
#s-notifications .notif-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
|
||||
#s-notifications .notif-presets button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
|
||||
#s-notifications .notif-trigger { margin-top: 10px; }
|
||||
#s-notifications .notif-trigger summary { cursor: pointer; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
|
||||
|
||||
/* Logging section cross-link hint */
|
||||
.logging-hint { color: var(--text-muted); font-size: 13px; }
|
||||
.logging-hint a { color: var(--accent); }
|
||||
|
||||
/* Logout form inline layout */
|
||||
.logout-form { display: inline; }
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<span id="bot-status-text">Checking...</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<form action="/logout" method="POST" style="display:inline"><button type="submit">Logout</button></form>
|
||||
<button type="button" id="logout-btn">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -159,23 +159,6 @@
|
||||
<div class="section" id="s-notifications">
|
||||
<div class="section-header"><h2>Notifications</h2><p>Threshold milestones and trigger conditions by alert category</p><span class="chevron">▼</span></div>
|
||||
<div class="section-body">
|
||||
<style>
|
||||
#s-notifications .notif-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
|
||||
#s-notifications .notif-tab-btn { border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:8px; padding:8px 12px; cursor:pointer; }
|
||||
#s-notifications .notif-tab-btn.active { border-color:var(--accent); color:var(--accent); }
|
||||
#s-notifications .notif-panel.hidden { display:none; }
|
||||
#s-notifications .notif-editor { border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:14px; background:var(--surface-2); }
|
||||
#s-notifications .notif-chips { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; min-height:28px; }
|
||||
#s-notifications .notif-chip { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:4px 10px; font-size:12px; }
|
||||
#s-notifications .notif-chip button { border:none; background:transparent; color:var(--text-muted); cursor:pointer; padding:0; line-height:1; font-size:14px; }
|
||||
#s-notifications .notif-input-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
|
||||
#s-notifications .notif-input-row input { width:220px; }
|
||||
#s-notifications .notif-presets { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
|
||||
#s-notifications .notif-presets button { padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
|
||||
#s-notifications .notif-trigger { margin-top:10px; }
|
||||
#s-notifications .notif-trigger summary { cursor:pointer; color:var(--text-muted); font-weight:600; margin-bottom:10px; }
|
||||
</style>
|
||||
|
||||
<input type="hidden" data-key="NOTIFICATION_THRESHOLDS_JSON">
|
||||
|
||||
<div class="notif-tabs" role="tablist" aria-label="Notification categories">
|
||||
@@ -294,7 +277,7 @@
|
||||
<div class="section" id="s-logging">
|
||||
<div class="section-header"><h2>Logging</h2><p>Log channel configuration (channels set in Channels section)</p><span class="chevron">▼</span></div>
|
||||
<div class="section-body"><div class="field-grid">
|
||||
<div class="field full-width"><p style="color:var(--text-muted);font-size:13px;">Log channels are configured in the <a href="/channels" style="color:var(--accent);">Channels</a> section. This section shows which logs are active based on configured channels.</p></div>
|
||||
<div class="field full-width"><p class="logging-hint">Log channels are configured in the <a href="/channels">Channels</a> section. This section shows which logs are active based on configured channels.</p></div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
@@ -359,7 +342,6 @@
|
||||
<div class="field"><label>Settings Port</label><input type="number" data-key="SETTINGS_PORT"></div>
|
||||
<div class="field"><label>Settings Domain</label><input type="text" data-key="SETTINGS_DOMAIN"></div>
|
||||
<div class="field"><label>Internal API Port</label><input type="number" data-key="INTERNAL_API_PORT"></div>
|
||||
<div class="field"><label>Internal API Secret</label><input type="password" data-key="INTERNAL_API_SECRET"></div>
|
||||
<div class="field"><label>Support Name</label><input type="text" data-key="SUPPORT_NAME"></div>
|
||||
<div class="field"><label>Logo URL</label><input type="text" data-key="LOGO_URL"></div>
|
||||
<div class="field full-width"><label>Game List (comma-separated)</label><textarea data-key="GAME_LIST" rows="3"></textarea></div>
|
||||
@@ -378,10 +360,9 @@
|
||||
<div id="save-bar" class="save-bar">
|
||||
<span id="change-count">0 unsaved changes</span>
|
||||
<div class="save-actions">
|
||||
<button onclick="saveConfig('apply')">Save & Apply</button>
|
||||
<button onclick="saveConfig('pending')" class="secondary">Save (pending restart)</button>
|
||||
<button onclick="saveConfig('restart')" class="danger">Save & Restart Now</button>
|
||||
<button onclick="openScheduleModal()" class="secondary">Schedule restart...</button>
|
||||
<button type="button" id="save-btn">Save</button>
|
||||
<button type="button" id="save-restart-btn" class="danger">Save & Restart Now</button>
|
||||
<button type="button" id="schedule-restart-btn" class="secondary">Schedule restart...</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -391,8 +372,8 @@
|
||||
<h3>Schedule restart</h3>
|
||||
<input type="datetime-local" id="schedule-datetime">
|
||||
<div class="modal-actions">
|
||||
<button onclick="confirmScheduledRestart()">Schedule</button>
|
||||
<button onclick="document.getElementById('schedule-modal').classList.add('hidden')" class="secondary">Cancel</button>
|
||||
<button type="button" id="schedule-confirm-btn">Schedule</button>
|
||||
<button type="button" id="schedule-cancel-btn" class="secondary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,19 @@
|
||||
let savedConfig = {};
|
||||
let pendingChanges = {};
|
||||
let notificationThresholdsState = {};
|
||||
let csrfToken = '';
|
||||
|
||||
async function fetchCsrfToken() {
|
||||
const res = await fetch('/api/csrf-token', { credentials: 'same-origin' });
|
||||
if (!res.ok) throw new Error('Failed to fetch CSRF token');
|
||||
const data = await res.json();
|
||||
csrfToken = data.csrfToken;
|
||||
return csrfToken;
|
||||
}
|
||||
|
||||
function csrfHeaders(base = {}) {
|
||||
return { ...base, 'x-csrf-token': csrfToken };
|
||||
}
|
||||
|
||||
const NOTIFICATION_PRESETS = ['15m', '30m', '1h', '2h', '4h', '8h', '1d'];
|
||||
const NOTIFICATION_TAB_KEYS = {
|
||||
@@ -80,8 +93,9 @@ const NOTIFICATION_ALERT_DESCRIPTIONS = {
|
||||
async function init() {
|
||||
document.getElementById('loading').classList.remove('hidden');
|
||||
try {
|
||||
await fetchCsrfToken();
|
||||
const [config] = await Promise.all([
|
||||
fetch('/api/config').then(r => r.json()),
|
||||
fetch('/api/config', { credentials: 'same-origin' }).then(r => r.json()),
|
||||
DiscordFields.fetchGuildData()
|
||||
]);
|
||||
savedConfig = config;
|
||||
@@ -177,10 +191,16 @@ function updateSaveBar() {
|
||||
}
|
||||
|
||||
async function saveConfig(mode) {
|
||||
const buttons = document.querySelectorAll('#save-bar button');
|
||||
buttons.forEach(b => b.disabled = true);
|
||||
try {
|
||||
if (mode === 'restart' && !confirm('Save changes and restart the bot now?')) {
|
||||
return;
|
||||
}
|
||||
const res = await fetch('/api/config', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'same-origin',
|
||||
headers: csrfHeaders({ 'Content-Type': 'application/json' }),
|
||||
body: JSON.stringify(pendingChanges)
|
||||
});
|
||||
const data = await res.json();
|
||||
@@ -191,19 +211,25 @@ async function saveConfig(mode) {
|
||||
document.querySelectorAll('.changed').forEach(el => el.classList.remove('changed'));
|
||||
showToast(`${data.applied.length} settings saved.`, 'success');
|
||||
}
|
||||
if (data.errors && data.errors.length > 0) {
|
||||
const hasErrors = data.errors && data.errors.length > 0;
|
||||
if (hasErrors) {
|
||||
showToast(`Errors: ${data.errors.join(', ')}`, 'error');
|
||||
}
|
||||
if (mode === 'restart') {
|
||||
if (mode === 'restart' && !hasErrors) {
|
||||
await fetch('/api/restart', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'same-origin',
|
||||
headers: csrfHeaders({ 'Content-Type': 'application/json' }),
|
||||
body: JSON.stringify({ mode: 'immediate' })
|
||||
});
|
||||
showToast('Restart initiated.', 'warning');
|
||||
} else if (mode === 'restart' && hasErrors) {
|
||||
showToast('Restart cancelled due to save errors.', 'warning');
|
||||
}
|
||||
} catch (e) {
|
||||
showToast('Failed to save. Bot may be unreachable.', 'error');
|
||||
} finally {
|
||||
buttons.forEach(b => b.disabled = false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -221,13 +247,36 @@ async function confirmScheduledRestart() {
|
||||
if (!dt) return;
|
||||
await fetch('/api/restart', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'same-origin',
|
||||
headers: csrfHeaders({ 'Content-Type': 'application/json' }),
|
||||
body: JSON.stringify({ mode: 'scheduled', scheduledFor: new Date(dt).toISOString() })
|
||||
});
|
||||
document.getElementById('schedule-modal').classList.add('hidden');
|
||||
showToast(`Restart scheduled for ${new Date(dt).toLocaleString()}`, 'warning');
|
||||
}
|
||||
|
||||
async function doLogout() {
|
||||
try {
|
||||
await fetch('/logout', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: csrfHeaders()
|
||||
});
|
||||
} catch (e) { /* ignore */ }
|
||||
window.location.href = '/login';
|
||||
}
|
||||
|
||||
function setupActionButtons() {
|
||||
document.getElementById('save-btn')?.addEventListener('click', () => saveConfig('save'));
|
||||
document.getElementById('save-restart-btn')?.addEventListener('click', () => saveConfig('restart'));
|
||||
document.getElementById('schedule-restart-btn')?.addEventListener('click', openScheduleModal);
|
||||
document.getElementById('schedule-confirm-btn')?.addEventListener('click', confirmScheduledRestart);
|
||||
document.getElementById('schedule-cancel-btn')?.addEventListener('click', () => {
|
||||
document.getElementById('schedule-modal').classList.add('hidden');
|
||||
});
|
||||
document.getElementById('logout-btn')?.addEventListener('click', doLogout);
|
||||
}
|
||||
|
||||
function showToast(message, type = 'success') {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast toast-${type}`;
|
||||
@@ -470,6 +519,7 @@ function setupSidebarRouting() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
setupSidebarRouting();
|
||||
setupActionButtons();
|
||||
await init();
|
||||
navigate(location.pathname, false);
|
||||
});
|
||||
|
||||
36
settings-site/public/js/login.js
Normal file
36
settings-site/public/js/login.js
Normal file
@@ -0,0 +1,36 @@
|
||||
async function fetchCsrfToken() {
|
||||
const res = await fetch('/api/csrf-token', { credentials: 'same-origin' });
|
||||
if (!res.ok) throw new Error('Failed to fetch CSRF token');
|
||||
const data = await res.json();
|
||||
return data.csrfToken;
|
||||
}
|
||||
|
||||
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const password = document.getElementById('password').value;
|
||||
const errorEl = document.getElementById('error');
|
||||
errorEl.classList.remove('visible');
|
||||
|
||||
try {
|
||||
const csrfToken = await fetchCsrfToken();
|
||||
const res = await fetch('/login', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-csrf-token': csrfToken
|
||||
},
|
||||
body: JSON.stringify({ password })
|
||||
});
|
||||
if (res.ok) {
|
||||
window.location.href = '/';
|
||||
} else {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
errorEl.textContent = data.error || 'Invalid password';
|
||||
errorEl.classList.add('visible');
|
||||
}
|
||||
} catch (err) {
|
||||
errorEl.textContent = 'Login failed. Please try again.';
|
||||
errorEl.classList.add('visible');
|
||||
}
|
||||
});
|
||||
@@ -6,18 +6,7 @@
|
||||
<title>Broccolini Settings - Login</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: 'Inter', sans-serif; background: #0f1117; color: #e0e0e0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
||||
.login-card { background: #1e2235; border: 1px solid #2a2d3e; border-radius: 16px; padding: 48px 40px; width: 380px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
|
||||
.login-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
|
||||
.login-card p { font-size: 14px; color: #888; margin-bottom: 32px; }
|
||||
.login-card input { width: 100%; padding: 12px 16px; background: #0f1117; border: 1px solid #2a2d3e; border-radius: 8px; color: #e0e0e0; font-size: 14px; margin-bottom: 16px; outline: none; transition: border-color 200ms; }
|
||||
.login-card input:focus { border-color: #5865f2; }
|
||||
.login-card button { width: 100%; padding: 12px; background: #5865f2; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 200ms; }
|
||||
.login-card button:hover { background: #4752c4; }
|
||||
.error { color: #ed4245; font-size: 13px; margin-top: 8px; display: none; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/login.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
@@ -29,21 +18,6 @@
|
||||
<div class="error" id="error">Invalid password</div>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const password = document.getElementById('password').value;
|
||||
const res = await fetch('/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ password })
|
||||
});
|
||||
if (res.ok) {
|
||||
window.location.href = '/';
|
||||
} else {
|
||||
document.getElementById('error').style.display = 'block';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="/js/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
require('dotenv').config({ path: process.env.ENV_FILE || '../.env' });
|
||||
const express = require('express');
|
||||
const session = require('express-session');
|
||||
const cookieParser = require('cookie-parser');
|
||||
const helmet = require('helmet');
|
||||
const rateLimit = require('express-rate-limit');
|
||||
const { doubleCsrf } = require('csrf-csrf');
|
||||
const path = require('path');
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
@@ -9,29 +13,96 @@ const PORT = parseInt(process.env.SETTINGS_PORT) || 12752;
|
||||
const INTERNAL_URL = process.env.INTERNAL_API_URL || `http://127.0.0.1:${process.env.INTERNAL_API_PORT || 12753}/internal`;
|
||||
const SECRET = process.env.INTERNAL_API_SECRET;
|
||||
const ADMIN_PASSWORD = process.env.SETTINGS_ADMIN_PASSWORD;
|
||||
const SESSION_SECRET = process.env.SESSION_SECRET;
|
||||
const IS_PROD = process.env.NODE_ENV === 'production';
|
||||
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
app.use(express.static(path.join(__dirname, 'public'), { index: false }));
|
||||
app.use(session({
|
||||
secret: SECRET || 'fallback-secret-change-me',
|
||||
resave: false,
|
||||
saveUninitialized: false,
|
||||
cookie: {
|
||||
httpOnly: true,
|
||||
secure: true,
|
||||
sameSite: 'lax',
|
||||
maxAge: 8 * 60 * 60 * 1000 // 8 hours
|
||||
if (!SESSION_SECRET) {
|
||||
console.error('[settings] FATAL: SESSION_SECRET env var is required (min 32 random bytes)');
|
||||
process.exit(1);
|
||||
}
|
||||
if (!SECRET) {
|
||||
console.error('[settings] FATAL: INTERNAL_API_SECRET env var is required');
|
||||
process.exit(1);
|
||||
}
|
||||
if (!ADMIN_PASSWORD) {
|
||||
console.error('[settings] FATAL: SETTINGS_ADMIN_PASSWORD env var is required');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Single-hop reverse proxy (Caddy at /opt/caddy/Caddyfile on the rustdesk
|
||||
// droplet — not accessible from this box; assumed to set X-Forwarded-Proto
|
||||
// and X-Forwarded-For). Required so express-session marks the connection
|
||||
// as secure and rate limits key off the real client IP.
|
||||
app.set('trust proxy', 1);
|
||||
|
||||
app.use(helmet({
|
||||
contentSecurityPolicy: {
|
||||
directives: {
|
||||
defaultSrc: ["'self'"],
|
||||
styleSrc: ["'self'", 'https://fonts.googleapis.com'],
|
||||
fontSrc: ["'self'", 'https://fonts.gstatic.com'],
|
||||
imgSrc: ["'self'", 'data:', 'https:'],
|
||||
scriptSrc: ["'self'"],
|
||||
connectSrc: ["'self'"],
|
||||
frameAncestors: ["'none'"],
|
||||
baseUri: ["'self'"],
|
||||
formAction: ["'self'"],
|
||||
objectSrc: ["'none'"]
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
// Auth middleware
|
||||
app.use(express.json({ limit: '64kb' }));
|
||||
app.use(express.urlencoded({ extended: true, limit: '64kb' }));
|
||||
|
||||
app.use(session({
|
||||
secret: SESSION_SECRET,
|
||||
resave: false,
|
||||
saveUninitialized: true,
|
||||
cookie: {
|
||||
httpOnly: true,
|
||||
secure: IS_PROD,
|
||||
sameSite: 'strict',
|
||||
maxAge: 8 * 60 * 60 * 1000
|
||||
}
|
||||
}));
|
||||
|
||||
app.use(cookieParser(SESSION_SECRET));
|
||||
|
||||
const { generateCsrfToken, doubleCsrfProtection } = doubleCsrf({
|
||||
getSecret: () => SESSION_SECRET,
|
||||
getSessionIdentifier: (req) => req.sessionID || '',
|
||||
cookieName: IS_PROD ? '__Host-x-csrf-token' : 'x-csrf-token',
|
||||
cookieOptions: {
|
||||
sameSite: 'strict',
|
||||
secure: IS_PROD,
|
||||
httpOnly: true,
|
||||
path: '/'
|
||||
},
|
||||
getCsrfTokenFromRequest: (req) => req.headers['x-csrf-token']
|
||||
});
|
||||
|
||||
const loginLimiter = rateLimit({
|
||||
windowMs: 15 * 60 * 1000,
|
||||
max: 5,
|
||||
standardHeaders: true,
|
||||
legacyHeaders: false,
|
||||
message: { error: 'Too many login attempts, please try again later.' }
|
||||
});
|
||||
|
||||
const apiLimiter = rateLimit({
|
||||
windowMs: 60 * 1000,
|
||||
max: 30,
|
||||
standardHeaders: true,
|
||||
legacyHeaders: false,
|
||||
message: { error: 'Too many requests, please try again later.' }
|
||||
});
|
||||
|
||||
function requireAuth(req, res, next) {
|
||||
if (req.session?.authed) return next();
|
||||
res.redirect('/login');
|
||||
}
|
||||
|
||||
// Internal API proxy helper
|
||||
async function callBot(method, apiPath, body) {
|
||||
const res = await fetch(`${INTERNAL_URL}${apiPath}`, {
|
||||
method,
|
||||
@@ -44,14 +115,21 @@ async function callBot(method, apiPath, body) {
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// Routes
|
||||
app.use(express.static(path.join(__dirname, 'public'), { index: false }));
|
||||
|
||||
app.get('/api/csrf-token', (req, res) => {
|
||||
const csrfToken = generateCsrfToken(req, res);
|
||||
res.json({ csrfToken });
|
||||
});
|
||||
|
||||
app.use(doubleCsrfProtection);
|
||||
|
||||
app.get('/login', (req, res) => {
|
||||
if (req.session?.authed) return res.redirect('/');
|
||||
res.sendFile(path.join(__dirname, 'public', 'login.html'));
|
||||
});
|
||||
|
||||
app.post('/login', (req, res) => {
|
||||
if (!ADMIN_PASSWORD) return res.status(503).json({ error: 'SETTINGS_ADMIN_PASSWORD not set' });
|
||||
app.post('/login', loginLimiter, (req, res) => {
|
||||
if (req.body.password === ADMIN_PASSWORD) {
|
||||
req.session.authed = true;
|
||||
return res.json({ ok: true });
|
||||
@@ -60,36 +138,34 @@ app.post('/login', (req, res) => {
|
||||
});
|
||||
|
||||
app.post('/logout', (req, res) => {
|
||||
req.session.destroy();
|
||||
res.redirect('/login');
|
||||
req.session.destroy(() => res.json({ ok: true }));
|
||||
});
|
||||
|
||||
app.get('/', requireAuth, (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'public', 'index.html'));
|
||||
});
|
||||
|
||||
// Proxy to bot internal API
|
||||
app.get('/api/config', requireAuth, async (req, res) => {
|
||||
app.get('/api/config', apiLimiter, requireAuth, async (req, res) => {
|
||||
try { res.json(await callBot('GET', '/config')); }
|
||||
catch (e) { res.status(502).json({ error: 'Bot unreachable' }); }
|
||||
});
|
||||
|
||||
app.post('/api/config', requireAuth, async (req, res) => {
|
||||
app.post('/api/config', apiLimiter, requireAuth, async (req, res) => {
|
||||
try { res.json(await callBot('POST', '/config', req.body)); }
|
||||
catch (e) { res.status(502).json({ error: 'Bot unreachable' }); }
|
||||
});
|
||||
|
||||
app.get('/api/discord/guild', requireAuth, async (req, res) => {
|
||||
app.get('/api/discord/guild', apiLimiter, requireAuth, async (req, res) => {
|
||||
try { res.json(await callBot('GET', '/discord/guild')); }
|
||||
catch (e) { res.status(502).json({ error: 'Bot unreachable' }); }
|
||||
});
|
||||
|
||||
app.post('/api/restart', requireAuth, async (req, res) => {
|
||||
app.post('/api/restart', apiLimiter, requireAuth, async (req, res) => {
|
||||
try { res.json(await callBot('POST', '/restart', req.body)); }
|
||||
catch (e) { res.status(502).json({ error: 'Bot unreachable' }); }
|
||||
});
|
||||
|
||||
app.get('/api/restart/status', requireAuth, async (req, res) => {
|
||||
app.get('/api/restart/status', apiLimiter, requireAuth, async (req, res) => {
|
||||
try { res.json(await callBot('GET', '/restart/status')); }
|
||||
catch (e) { res.status(502).json({ error: 'Bot unreachable' }); }
|
||||
});
|
||||
@@ -98,6 +174,13 @@ app.get('*', requireAuth, (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'public', 'index.html'));
|
||||
});
|
||||
|
||||
app.use((err, req, res, next) => {
|
||||
if (err && (err.code === 'EBADCSRFTOKEN' || err.code === 'ERR_BAD_CSRF_TOKEN')) {
|
||||
return res.status(403).json({ error: 'Invalid CSRF token' });
|
||||
}
|
||||
next(err);
|
||||
});
|
||||
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`[settings] running on port ${PORT}`);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user