4bnode 4.1.1 → 4.1.3

package/skeleton/ecosystem.config.cjs

@@ -0,0 +1,25 @@
+// PM2 process config for production.
+//
+//   pm2 start ecosystem.config.cjs   # start (NODE_ENV=production)
+//   pm2 save                         # remember across reboots
+//   pm2 startup                      # enable boot startup (run the printed command)
+//   pm2 logs / pm2 restart / pm2 status
+//
+// NODE_ENV=production keeps the /_dev dashboard OFF and security on. Other config
+// (PORT, MONGO_URI, secrets) comes from your .env. CommonJS (.cjs) on purpose —
+// the app itself is an ES module.
+const pkg = require("./package.json");
+
+module.exports = {
+  apps: [
+    {
+      name: pkg.name || "app",
+      script: "index.js",
+      instances: 1,
+      autorestart: true,
+      env: {
+        NODE_ENV: "production",
+      },
+    },
+  ],
+};

package/skeleton/index.js

@@ -8,12 +8,15 @@ import helmet from "helmet";
 import rateLimit from "express-rate-limit";
 import { createInterface } from "readline";
 import { notFound, errorHandler } from "./src/middleware/errorHandler.js";
-import apiKey from "./src/middleware/apiKey.js";
 
 // ── Environment ─────────────────────────────────────
 dotenv.config();
 
 const app = express();
+// Behind reverse proxies (e.g. nginx → load balancer). Lets Express read the real
+// client IP from X-Forwarded-For so rate limiting and req.ip are correct. The number
+// is how many proxy hops to trust — adjust to your infrastructure.
+app.set("trust proxy", 2);
 const port = process.env.PORT || 3000;
 const __dirname = path.resolve();
 
@@ -54,13 +57,6 @@ const apiLimiter = rateLimit({
 });
 app.use(apiLimiter);
 
-// ── API key gate ─────────────────────────────────────
-// Every /api/* request must present a valid key in the `x-api-key` header.
-// Manage keys in the dashboard (API Keys). Set API_KEY_REQUIRED=off to disable.
-if (process.env.API_KEY_REQUIRED !== "off") {
-  app.use("/api", apiKey);
-}
-
 // ── Static Files ────────────────────────────────────
 app.use(express.static(path.join(__dirname, "public")));
 

package/skeleton/.4bnode/assets/js/pages/ApiKeysPage.js

@@ -1,164 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { LuKeyRound, LuPlus, LuTrash2, LuCopy, LuEye, LuEyeOff, LuPencil, LuCheck, LuX } from "react-icons/lu";
-import { html, api, copyToClipboard } from "../lib.js";
-import { useApp } from "../context.js";
-
-export function ApiKeysPage() {
-  const { toast, showConfirm } = useApp();
-  const [keys, setKeys] = useState(null);
-  const [label, setLabel] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [revealed, setRevealed] = useState({});
-  const [editId, setEditId] = useState(null);
-  const [editLabel, setEditLabel] = useState("");
-
-  async function load() {
-    try {
-      const r = await api("/security/api-keys");
-      setKeys(r.keys || []);
-    } catch (err) {
-      toast(err.message, "error");
-      setKeys([]);
-    }
-  }
-  useEffect(() => { load(); }, []);
-
-  async function generate() {
-    setBusy(true);
-    try {
-      const r = await api("/security/api-keys", { method: "POST", body: { label: label.trim() } });
-      setLabel("");
-      setRevealed((s) => ({ ...s, [r.key.id]: true }));
-      toast("API key generated", "success");
-      await load();
-    } catch (err) {
-      toast(err.message, "error");
-    }
-    setBusy(false);
-  }
-
-  async function revoke(k) {
-    const ok = await showConfirm(`Revoke API key "${k.label}"? Any client using it will stop working immediately.`, { danger: true, confirmLabel: "Revoke" });
-    if (!ok) return;
-    try {
-      await api("/security/api-keys/" + k.id, { method: "DELETE" });
-      toast("API key revoked", "success");
-      await load();
-    } catch (err) {
-      toast(err.message, "error");
-    }
-  }
-
-  function startRename(k) {
-    setEditId(k.id);
-    setEditLabel(k.label);
-  }
-  function cancelRename() {
-    setEditId(null);
-    setEditLabel("");
-  }
-  async function saveRename(k) {
-    const next = editLabel.trim();
-    if (!next || next === k.label) { cancelRename(); return; }
-    try {
-      await api("/security/api-keys/" + k.id, { method: "PATCH", body: { label: next } });
-      toast("API key renamed", "success");
-      cancelRename();
-      await load();
-    } catch (err) {
-      toast(err.message, "error");
-    }
-  }
-
-  function copy(k) {
-    copyToClipboard(k.key);
-    toast("Key copied to clipboard", "success");
-  }
-
-  function mask(key) {
-    if (key.length <= 12) return key;
-    return key.slice(0, 7) + "…" + key.slice(-4);
-  }
-
-  function fmtDate(iso) {
-    if (!iso) return "";
-    try { return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); }
-    catch { return ""; }
-  }
-
-  return html`<div>
-    <div className="flex items-center gap-2 mb-1">
-      <${LuKeyRound} size=${20} />
-      <div className="card-title" style=${{ margin: 0 }}>API Keys</div>
-    </div>
-    <div className="card-subtitle mb-4">
-      Named keys for machine/service access. A caller sends one in the
-      <span style=${{ fontFamily: "monospace" }}> x-api-key</span> header.
-      Protect a route with <span style=${{ fontFamily: "monospace" }}>apiKey</span> middleware:
-      <span style=${{ fontFamily: "monospace" }}>app.use('/api/private', apiKey)</span>.
-      Keys live in <span style=${{ fontFamily: "monospace" }}>src/api-keys.json</span> and take effect immediately.
-    </div>
-
-    <div className="card">
-      <div style=${{ display: "flex", gap: "8px", marginBottom: "16px", flexWrap: "wrap" }}>
-        <input className="form-input" placeholder="Key name (e.g. Mobile app, Partner X)"
-          value=${label} maxLength=${60}
-          onInput=${(e) => setLabel(e.target.value)}
-          onKeyDown=${(e) => { if (e.key === "Enter" && !busy) generate(); }}
-          style=${{ flex: 1, minWidth: "220px" }} />
-        <button className="btn btn-primary" onClick=${generate} disabled=${busy}>
-          ${busy ? html`<span className="spinner" />` : html`<${LuPlus} size=${15} />`} Generate key
-        </button>
-      </div>
-
-      ${keys === null
-        ? html`<div className="text-muted text-sm">Loading…</div>`
-        : keys.length === 0
-          ? html`<div className="text-muted text-sm">No keys yet — generate one above.</div>`
-          : html`<div style=${{ display: "flex", flexDirection: "column", gap: "8px" }}>
-              ${keys.map((k) => html`<div key=${k.id}
-                style=${{ display: "flex", alignItems: "center", gap: "10px", padding: "10px 12px",
-                  border: "1px solid var(--border)", borderRadius: "10px", background: "var(--bg-surface)" }}>
-                <div style=${{ flex: 1, minWidth: 0 }}>
-                  ${editId === k.id
-                    ? html`<input className="form-input" autoFocus value=${editLabel} maxLength=${60}
-                        onInput=${(e) => setEditLabel(e.target.value)}
-                        onKeyDown=${(e) => { if (e.key === "Enter") saveRename(k); if (e.key === "Escape") cancelRename(); }}
-                        style=${{ fontSize: "13px", padding: "4px 8px", marginBottom: "2px", maxWidth: "260px" }} />`
-                    : html`<div style=${{ fontWeight: 600, fontSize: "13px" }}>${k.label}</div>`}
-                  <div style=${{ fontFamily: "monospace", fontSize: "12px", color: "var(--text-muted)" }}>
-                    ${revealed[k.id] ? k.key : mask(k.key)}
-                    ${k.createdAt && html`<span style=${{ marginLeft: "8px" }}>· ${fmtDate(k.createdAt)}</span>`}
-                  </div>
-                </div>
-                ${editId === k.id
-                  ? html`<${React.Fragment}>
-                      <button className="btn btn-sm btn-ghost" title="Save" onClick=${() => saveRename(k)}
-                        style=${{ color: "var(--success, #22c55e)" }}>
-                        <${LuCheck} size=${15} />
-                      </button>
-                      <button className="btn btn-sm btn-ghost" title="Cancel" onClick=${cancelRename}>
-                        <${LuX} size=${15} />
-                      </button>
-                    <//>`
-                  : html`<${React.Fragment}>
-                      <button className="btn btn-sm btn-ghost" title="Rename" onClick=${() => startRename(k)}>
-                        <${LuPencil} size=${15} />
-                      </button>
-                      <button className="btn btn-sm btn-ghost" title=${revealed[k.id] ? "Hide" : "Reveal"}
-                        onClick=${() => setRevealed((s) => ({ ...s, [k.id]: !s[k.id] }))}>
-                        ${revealed[k.id] ? html`<${LuEyeOff} size=${15} />` : html`<${LuEye} size=${15} />`}
-                      </button>
-                      <button className="btn btn-sm btn-ghost" title="Copy" onClick=${() => copy(k)}>
-                        <${LuCopy} size=${15} />
-                      </button>
-                      <button className="btn btn-sm btn-ghost" title="Revoke" onClick=${() => revoke(k)}
-                        style=${{ color: "var(--danger, #ef4444)" }}>
-                        <${LuTrash2} size=${15} />
-                      </button>
-                    <//>`}
-              </div>`)}
-            </div>`}
-    </div>
-  </div>`;
-}