4bnode 4.1.5 → 4.1.6

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

@@ -1,300 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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>`;
-}