4bnode 4.1.2 → 4.1.4

package/app-1/.4bnode/assets/js/pages/DatabasePage.js

@@ -0,0 +1,300 @@
+import React, { useState, useEffect } from "react";
+import { html, api } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function DatabasePage() {
+  const { data, status, toast, refresh } = useApp();
+  // MongoDB is the only database, so the page shows its configuration directly
+  // (no database picker).
+  // Default the database name to the app's folder name (provided by the server).
+  const appName = status?.appName || "myapp";
+  const [inputMode, setInputMode] = useState("fields"); // 'fields' or 'url'
+  const [uri, setUri] = useState("");
+  const [host, setHost] = useState("localhost");
+  const [port, setPort] = useState("27017");
+  const [dbName, setDbName] = useState("");
+  const [dbNameTouched, setDbNameTouched] = useState(false);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [editing, setEditing] = useState(false);
+
+  // Prefill the db name with the folder name once status loads — unless the user
+  // edited it, or we're editing an already-configured connection.
+  useEffect(() => {
+    if (!dbNameTouched && !data.mongoConfigured && status?.appName) {
+      setDbName(status.appName);
+    }
+  }, [status?.appName, data.mongoConfigured, dbNameTouched]);
+
+  // Parse existing URI when entering edit mode
+  useEffect(() => {
+    if (data.mongoConfigured && data.mongoUri) {
+      setUri(data.mongoUri);
+      parseUriToFields(data.mongoUri);
+    }
+  }, [data.mongoUri]);
+
+  function parseUriToFields(uriStr) {
+    try {
+      const match = uriStr.match(
+        /^mongodb(?:\+srv)?:\/\/(?:([^:]+):([^@]+)@)?([^:\/]+)(?::(\d+))?\/(.+?)(?:\?.*)?$/,
+      );
+      if (match) {
+        setUsername(match[1] || "");
+        setPassword(match[2] || "");
+        setHost(match[3] || "localhost");
+        setPort(match[4] || "27017");
+        setDbName(match[5] || appName);
+      }
+    } catch {}
+  }
+
+  function buildUri(h, p, db, user, pass) {
+    const auth =
+      user && pass
+        ? `${encodeURIComponent(user)}:${encodeURIComponent(pass)}@`
+        : "";
+    return `mongodb://${auth}${h || "localhost"}:${p || "27017"}/${db || appName}`;
+  }
+
+  function getUri() {
+    return inputMode === "url"
+      ? (uri || "").trim() || `mongodb://localhost:27017/${appName}`
+      : buildUri(host, port, dbName, username, password);
+  }
+
+  async function handleSetup() {
+    const connUri = getUri();
+    if (!connUri.startsWith("mongodb://") && !connUri.startsWith("mongodb+srv://")) {
+      toast("Invalid MongoDB URI. Must start with mongodb:// or mongodb+srv://", "error");
+      return;
+    }
+    setLoading(true);
+    try {
+      const isFirstTime = !data.mongoConfigured;
+      const result = await api("/add-mongo", {
+        method: "POST",
+        body: { uri: connUri },
+      });
+      toast(result.message, "success");
+      setEditing(false);
+      if (isFirstTime) {
+        // Server restarts after first-time setup — wait then retry refresh
+        setTimeout(async () => {
+          for (let i = 0; i < 10; i++) {
+            try {
+              await refresh();
+              setLoading(false);
+              return;
+            } catch {}
+            await new Promise((r) => setTimeout(r, 1500));
+          }
+          setLoading(false);
+        }, 2000);
+      } else {
+        refresh().catch(() => {});
+        setLoading(false);
+      }
+    } catch (err) {
+      toast(err.message, "error");
+      setLoading(false);
+    }
+  }
+
+  // Mask password in URI for display
+  function maskUri(u) {
+    if (!u) return "";
+    return u.replace(/:([^@\/]+)@/, ":****@");
+  }
+
+  const showForm = !data.mongoConfigured || editing;
+
+  const inputModeToggle = html`<div className="flex gap-2 mb-4">
+    <button
+      className=${`btn btn-sm ${inputMode === "fields" ? "btn-primary" : "btn-ghost"}`}
+      onClick=${() => setInputMode("fields")}
+    >
+      Configuration
+    </button>
+    <button
+      className=${`btn btn-sm ${inputMode === "url" ? "btn-primary" : "btn-ghost"}`}
+      onClick=${() => setInputMode("url")}
+    >
+      Connection URI
+    </button>
+  </div>`;
+
+  const urlInputs = html`<fragment>
+    <div className="form-group">
+      <label className="form-label">Connection URI</label>
+      <input
+        className="form-input"
+        value=${uri}
+        onInput=${(e) => setUri(e.target.value)}
+        placeholder="mongodb://username:password@localhost:27017/myapp"
+      />
+    </div>
+  </fragment>`;
+
+  const fieldInputs = html`<fragment>
+    <div className="grid-2 mb-2">
+      <div className="form-group">
+        <label className="form-label">Host</label>
+        <input
+          className="form-input"
+          value=${host}
+          onInput=${(e) => setHost(e.target.value)}
+          placeholder="localhost"
+        />
+      </div>
+      <div className="form-group">
+        <label className="form-label">Port</label>
+        <input
+          className="form-input"
+          value=${port}
+          onInput=${(e) => setPort(e.target.value)}
+          placeholder="27017"
+        />
+      </div>
+    </div>
+    <div className="form-group">
+      <label className="form-label">Database Name</label>
+      <input
+        className="form-input"
+        value=${dbName}
+        onInput=${(e) => { setDbNameTouched(true); setDbName(e.target.value); }}
+        placeholder=${appName}
+      />
+    </div>
+    <div className="grid-2 mb-4">
+      <div className="form-group">
+        <label className="form-label">Username (optional)</label>
+        <input
+          className="form-input"
+          value=${username}
+          onInput=${(e) => setUsername(e.target.value)}
+          placeholder="admin"
+        />
+      </div>
+      <div className="form-group">
+        <label className="form-label">Password (optional)</label>
+        <input
+          className="form-input"
+          type="password"
+          value=${password}
+          onInput=${(e) => setPassword(e.target.value)}
+          placeholder="********"
+        />
+      </div>
+    </div>
+  </fragment>`;
+
+  // Preview the generated URI when in fields mode
+  const previewUri =
+    inputMode === "fields"
+      ? html`<div className="form-group" style=${{ marginTop: "8px" }}>
+          <label
+            className="form-label text-muted"
+            style=${{ fontSize: "11px" }}
+            >Generated URI</label
+          >
+          <div
+            className="text-sm text-muted"
+            style=${{
+              fontFamily: "monospace",
+              padding: "8px 12px",
+              background: "rgba(255,255,255,0.03)",
+              borderRadius: "6px",
+              wordBreak: "break-all",
+            }}
+          >
+            ${maskUri(getUri())}
+          </div>
+        </div>`
+      : null;
+
+  return html`<div>
+    <div className="card-title mb-1">Database</div>
+    <div className="card-subtitle mb-4">
+      Configure the MongoDB connection for your project
+    </div>
+
+    ${data.mongoConfigured &&
+    !editing &&
+    html`<div
+      className="card mb-6"
+      style=${{ borderColor: "rgba(34,197,94,0.3)" }}
+    >
+      <div className="flex items-center gap-3">
+        <img
+          src="/_dev/assets/images/mongo.png"
+          alt="MongoDB"
+          style=${{ width: "28px", height: "28px", objectFit: "contain" }}
+        />
+        <div style=${{ flex: 1, minWidth: 0 }}>
+          <div style=${{ fontWeight: 600, fontSize: "14px" }}>
+            MongoDB Connected
+          </div>
+          <div
+            className="text-sm text-muted"
+            style=${{ fontFamily: "monospace", wordBreak: "break-all" }}
+          >
+            ${maskUri(data.mongoUri || "")}
+          </div>
+        </div>
+        <button
+          className="btn btn-sm btn-ghost"
+          onClick=${() => {
+            if (data.mongoUri) {
+              setUri(data.mongoUri);
+              parseUriToFields(data.mongoUri);
+            }
+            setEditing(true);
+          }}
+          style=${{ marginLeft: "auto" }}
+        >
+          Edit
+        </button>
+        <span className="badge badge-success">✓ Active</span>
+      </div>
+    </div>`}
+
+    ${showForm &&
+    html`<div className="card">
+      <div className="flex items-center gap-3 mb-4">
+        <img
+          src="/_dev/assets/images/mongo.png"
+          alt="MongoDB"
+          style=${{ width: "24px", height: "24px", objectFit: "contain" }}
+        />
+        <div className="card-title" style=${{ margin: 0 }}>
+          ${editing ? "Edit Connection" : "MongoDB Setup"}
+        </div>
+        <div style=${{ marginLeft: "auto", display: "flex", gap: "8px" }}>
+          ${editing &&
+          html`<button
+            className="btn btn-sm btn-ghost"
+            onClick=${() => setEditing(false)}
+          >
+            Cancel
+          </button>`}
+          <button
+            className="btn btn-sm btn-primary"
+            onClick=${handleSetup}
+            disabled=${loading}
+          >
+            ${loading ? html`<span className="spinner" />` : null}
+            ${loading
+              ? "Configuring..."
+              : editing
+                ? "Save Changes"
+                : "Connect Database"}
+          </button>
+        </div>
+      </div>
+      ${inputModeToggle} ${inputMode === "url" ? urlInputs : fieldInputs}
+      ${previewUri}
+    </div>`}
+  </div>`;
+}

package/app-1/.4bnode/assets/js/pages/DocsPage.js

@@ -0,0 +1,150 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { LuFileText, LuCheck, LuRefreshCw, LuExternalLink } from "react-icons/lu";
+import { html, api } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function DocsPage() {
+  const { toast, refresh } = useApp();
+  const [info, setInfo] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [pw, setPw] = useState("");
+  const [pwBusy, setPwBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    // Docs setup/regenerate writes src/docs.js → nodemon restart. Retry across the
+    // restart window so the re-fetch doesn't surface as a "NetworkError".
+    let lastErr;
+    for (let i = 0; i < 8; i++) {
+      try { setInfo(await api("/docs")); return; }
+      catch (err) { lastErr = err; await new Promise((r) => setTimeout(r, 500)); }
+    }
+    if (lastErr) toast(lastErr.message, "error");
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const docsUrl = (() => {
+    const port = window.location.port || "3000";
+    return window.location.protocol + "//" + window.location.hostname + ":" + port + "/docs";
+  })();
+
+  async function setup() {
+    if (pw && pw.length < 6) {
+      toast("Password must be at least 6 characters (or leave blank for public docs)", "error");
+      return;
+    }
+    setBusy(true);
+    try {
+      // Set the password first (writes docs-auth.json), then create the docs route —
+      // so /docs is protected from the moment it goes live.
+      if (pw) await api("/docs/password", { method: "POST", body: { password: pw } });
+      await api("/docs/setup", { method: "POST" });
+      toast(pw ? "API docs set up and password-protected." : "API docs set up at /docs.", "success");
+      setPw("");
+      await load();
+      refresh().catch(() => {});
+    } catch (err) { toast(err.message, "error"); }
+    setBusy(false);
+  }
+
+  async function regenerate() {
+    setBusy(true);
+    try {
+      const r = await api("/docs/regenerate", { method: "POST" });
+      toast(r.message, "success");
+      await load();
+    } catch (err) { toast(err.message, "error"); }
+    setBusy(false);
+  }
+
+  async function setPassword() {
+    if (pw.length < 6) { toast("Password must be at least 6 characters", "error"); return; }
+    setPwBusy(true);
+    try {
+      const r = await api("/docs/password", { method: "POST", body: { password: pw } });
+      toast(r.message, "success");
+      setPw("");
+      await load();
+    } catch (err) { toast(err.message, "error"); }
+    setPwBusy(false);
+  }
+
+  if (!info) return html`<div className="text-muted" style=${{ padding: "16px" }}>Loading…</div>`;
+
+  return html`<div>
+    <div className="flex items-center justify-between mb-4">
+      <div>
+        <div className="card-title">API Documentation</div>
+        <div className="card-subtitle">Interactive API docs generated from your routes and models</div>
+      </div>
+    </div>
+
+    ${!info.configured
+      ? html`<div className="card" style=${{ maxWidth: "560px" }}>
+          <div className="flex items-center gap-3 mb-4">
+            <${LuFileText} size=${20} color="var(--accent)" />
+            <div>
+              <div style=${{ fontWeight: 600 }}>Set up API docs</div>
+              <div className="text-sm text-muted">Generates a spec from your ${info.endpointCount} endpoint${info.endpointCount === 1 ? "" : "s"} and serves an interactive docs page at <span style=${{ fontFamily: "monospace" }}>/docs</span>.</div>
+            </div>
+          </div>
+          <div className="form-group">
+            <label className="form-label">Docs password</label>
+            <input className="form-input" type="password" value=${pw}
+              placeholder="Protect /docs (min 6 chars) — leave blank for public docs"
+              onInput=${(e) => setPw(e.target.value)}
+              onKeyDown=${(e) => { if (e.key === "Enter") setup(); }} />
+          </div>
+          <button className="btn btn-primary" onClick=${setup} disabled=${busy}>
+            ${busy ? html`<span className="spinner" />` : html`<${LuCheck} size=${16} />`}
+            ${busy ? "Setting up..." : "Set up API docs"}
+          </button>
+        </div>`
+      : html`<div>
+          <div className="card mb-4">
+            <div className="flex items-center gap-3" style=${{ flexWrap: "wrap" }}>
+              <${LuFileText} size=${20} color="var(--success)" />
+              <div style=${{ flex: 1, minWidth: "180px" }}>
+                <div style=${{ fontWeight: 600 }}>Docs are live</div>
+                <div className="text-sm text-muted">${info.endpointCount} endpoint${info.endpointCount === 1 ? "" : "s"} documented · spec at <span style=${{ fontFamily: "monospace" }}>src/openapi.json</span></div>
+              </div>
+              <a className="btn" href=${docsUrl} target="_blank" rel="noreferrer" style=${{ textDecoration: "none" }}>
+                <${LuExternalLink} size=${14} /> Open /docs
+              </a>
+              <button className="btn btn-primary" onClick=${regenerate} disabled=${busy}>
+                ${busy ? html`<span className="spinner" />` : html`<${LuRefreshCw} size=${14} />`}
+                Regenerate
+              </button>
+            </div>
+          </div>
+          <div className="card mb-4">
+            <div className="card-title mb-1">Docs access</div>
+            <div className="card-subtitle mb-4">
+              By default <span style=${{ fontFamily: "monospace" }}>/docs</span> is public — anyone who can reach the app can read it.
+              Set a password to require a login before the docs are shown.
+            </div>
+            ${info.passwordProtected
+              ? html`<div className="flex items-center gap-3" style=${{ flexWrap: "wrap" }}>
+                  <span className="badge badge-success">🔒 Password protected</span>
+                  <div style=${{ display: "flex", gap: "8px", marginLeft: "auto", flexWrap: "wrap" }}>
+                    <input className="form-input" type="password" placeholder="New password" value=${pw}
+                      onInput=${(e) => setPw(e.target.value)} style=${{ width: "200px" }} />
+                    <button className="btn btn-sm btn-primary" onClick=${setPassword} disabled=${pwBusy || pw.length < 6}>Change</button>
+                  </div>
+                </div>`
+              : html`<div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+                  <input className="form-input" type="password" placeholder="Password (min 6 chars)" value=${pw}
+                    onInput=${(e) => setPw(e.target.value)}
+                    onKeyDown=${(e) => { if (e.key === "Enter") setPassword(); }}
+                    style=${{ flex: 1, minWidth: "220px" }} />
+                  <button className="btn btn-primary" onClick=${setPassword} disabled=${pwBusy || pw.length < 6}>
+                    ${pwBusy ? html`<span className="spinner" />` : null} Set password
+                  </button>
+                </div>`}
+          </div>
+          <div className="card text-sm text-muted">
+            The spec stays in sync automatically — it regenerates whenever you add or change routes and models. Use Regenerate to force a refresh.
+          </div>
+        </div>`}
+  </div>`;
+}

package/app-1/.4bnode/assets/js/pages/EnvironmentPage.js

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { html, api } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function EnvironmentPage() {
+  const { toast } = useApp();
+  const [content, setContent] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    api("/env")
+      .then((res) => {
+        setContent(res.content || "");
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  function handleChange(e) {
+    setContent(e.target.value);
+    setDirty(true);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const result = await api("/env", {
+        method: "PUT",
+        body: { content },
+      });
+      toast(result.message, "success");
+      setDirty(false);
+    } catch (err) {
+      toast(err.message, "error");
+    }
+    setSaving(false);
+  }
+
+  function countVars(c) {
+    if (!c) return 0;
+    return c.split('\n').filter(l => l.trim() && !l.trim().startsWith('#') && l.includes('=')).length;
+  }
+
+  return html`<div>
+    <div className="flex items-center justify-between mb-4">
+      <div>
+        <div className="card-title">Environment</div>
+        <div className="card-subtitle">Manage environment variables</div>
+      </div>
+    </div>
+
+    <div className="card mb-4">
+      <div className="flex items-center justify-between mb-3">
+        <div>
+          <div style=${{ fontWeight: 600, fontSize: '16px', marginBottom: '2px' }}>.env</div>
+          <div className="text-sm text-muted">${() => countVars(content)} variable${() => countVars(content) !== 1 ? 's' : ''} defined</div>
+        </div>
+        <div className="flex gap-2 items-center">
+          ${() => dirty && html`<span className="text-sm text-muted" style=${{ fontSize: '11px' }}>Unsaved</span>`}
+          <button className="btn btn-sm btn-primary" onClick=${handleSave} disabled=${saving || !dirty}>
+            ${saving ? html`<span className="spinner" />` : null}
+            ${saving ? "Saving..." : "Save"}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
+      <div style=${{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style=${{ fontSize: '12px', fontWeight: 600, color: 'var(--text-secondary)' }}>Editor</span>
+        <span className="field-count" style=${{ fontSize: '11px' }}>Cmd+S to save</span>
+      </div>
+      <${motion.div} initial=${{ opacity: 0, y: 6 }} animate=${{ opacity: 1, y: 0 }} transition=${{ duration: 0.12 }}>
+        ${loading
+          ? html`<div className="text-sm text-muted" style=${{ padding: '40px 0', textAlign: 'center' }}>Loading...</div>`
+          : html`<textarea
+              className="env-editor"
+              value=${content}
+              onInput=${handleChange}
+              placeholder=${"# Add environment variables\n# KEY=value"}
+              spellCheck=${false}
+              style=${{ borderRadius: 0, border: 'none' }}
+              onKeyDown=${(e) => {
+                if (e.key === "Tab") {
+                  e.preventDefault();
+                  const start = e.target.selectionStart;
+                  const end = e.target.selectionEnd;
+                  setContent(e.target.value.substring(0, start) + "  " + e.target.value.substring(end));
+                  setTimeout(() => { e.target.selectionStart = e.target.selectionEnd = start + 2; }, 0);
+                }
+                if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+                  e.preventDefault();
+                  if (dirty) handleSave();
+                }
+              }}
+            />`}
+      <//>
+    </div>
+  </div>`;
+}