4bnode 4.0.0 → 4.0.3

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

@@ -0,0 +1,461 @@
+import React, { useState, useEffect } from "react";
+import { html, api } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function DatabasePage() {
+  const { data, toast, refresh } = useApp();
+  const [selectedDb, setSelectedDb] = useState(
+    data.mongoConfigured ? "mongodb" : null,
+  );
+  const [inputMode, setInputMode] = useState("fields"); // 'fields' or 'url'
+  const [uri, setUri] = useState("");
+  const [prodUri, setProdUri] = useState("");
+  const [host, setHost] = useState("localhost");
+  const [port, setPort] = useState("27017");
+  const [dbName, setDbName] = useState("myapp");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [prodHost, setProdHost] = useState("");
+  const [prodPort, setProdPort] = useState("");
+  const [prodDbName, setProdDbName] = useState("");
+  const [prodUsername, setProdUsername] = useState("");
+  const [prodPassword, setProdPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [editing, setEditing] = useState(false);
+
+  // Parse existing URI when entering edit mode
+  useEffect(() => {
+    if (data.mongoConfigured && data.mongoUri) {
+      setUri(data.mongoUri);
+      setProdUri(data.mongoProdUri || "");
+      parseUriToFields(data.mongoUri, false);
+      if (data.mongoProdUri && data.mongoProdUri !== data.mongoUri) {
+        parseUriToFields(data.mongoProdUri, true);
+      }
+    }
+  }, [data.mongoUri]);
+
+  function parseUriToFields(uriStr, isProd) {
+    try {
+      const match = uriStr.match(
+        /^mongodb(?:\+srv)?:\/\/(?:([^:]+):([^@]+)@)?([^:\/]+)(?::(\d+))?\/(.+?)(?:\?.*)?$/,
+      );
+      if (match) {
+        if (isProd) {
+          setProdUsername(match[1] || "");
+          setProdPassword(match[2] || "");
+          setProdHost(match[3] || "");
+          setProdPort(match[4] || "27017");
+          setProdDbName(match[5] || "");
+        } else {
+          setUsername(match[1] || "");
+          setPassword(match[2] || "");
+          setHost(match[3] || "localhost");
+          setPort(match[4] || "27017");
+          setDbName(match[5] || "myapp");
+        }
+      }
+    } catch {}
+  }
+
+  function buildUri(h, p, db, user, pass) {
+    const auth =
+      user && pass
+        ? `${encodeURIComponent(user)}:${encodeURIComponent(pass)}@`
+        : "";
+    return `mongodb://${auth}${h || "localhost"}:${p || "27017"}/${db || "myapp"}`;
+  }
+
+  function getDevUri() {
+    return inputMode === "url"
+      ? (uri || "").trim() || "mongodb://localhost:27017/myapp"
+      : buildUri(host, port, dbName, username, password);
+  }
+
+  function getProdUri() {
+    if (inputMode === "url") return (prodUri || "").trim() || getDevUri();
+    const ph = prodHost || host,
+      pp = prodPort || port,
+      pd = prodDbName || dbName;
+    const pu = prodUsername || username,
+      ppw = prodPassword || password;
+    return buildUri(ph, pp, pd, pu, ppw);
+  }
+
+  const databases = [
+    {
+      id: "mongodb",
+      name: "MongoDB",
+      desc: "Document database",
+      icon: "/_dev/assets/images/mongo.png",
+      available: true,
+    },
+    {
+      id: "postgresql",
+      name: "PostgreSQL",
+      desc: "Relational database",
+      icon: "/_dev/assets/images/postgresql.png",
+      available: false,
+    },
+    {
+      id: "mysql",
+      name: "MySQL",
+      desc: "Relational database",
+      icon: "/_dev/assets/images/mysql.png",
+      available: false,
+    },
+    {
+      id: "sqlite",
+      name: "SQLite",
+      desc: "Embedded database",
+      icon: "/_dev/assets/images/sqlite.png",
+      available: false,
+    },
+  ];
+
+  async function handleSetup() {
+    const devUri = getDevUri();
+    const pUri = getProdUri();
+    if (!devUri.startsWith("mongodb://") && !devUri.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: devUri, prodUri: pUri },
+      });
+      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 =
+    (selectedDb === "mongodb" && !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 (Development)</label>
+      <input
+        className="form-input"
+        value=${uri}
+        onInput=${(e) => setUri(e.target.value)}
+        placeholder="mongodb://username:password@localhost:27017/myapp"
+      />
+    </div>
+    <div className="form-group">
+      <label className="form-label"
+        >Connection URI (Production) — optional</label
+      >
+      <input
+        className="form-input"
+        value=${prodUri}
+        onInput=${(e) => setProdUri(e.target.value)}
+        placeholder="Same as development if empty"
+      />
+    </div>
+  </fragment>`;
+
+  const fieldInputs = html`<fragment>
+    <div
+      className="card-subtitle mb-3"
+      style=${{
+        fontSize: "12px",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+      }}
+    >
+      Development
+    </div>
+    <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) => setDbName(e.target.value)}
+        placeholder="myapp"
+      />
+    </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>
+
+    <div
+      className="card-subtitle mb-3"
+      style=${{
+        fontSize: "12px",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        borderTop: "1px solid var(--border)",
+        paddingTop: "16px",
+      }}
+    >
+      Production (optional — defaults to dev values)
+    </div>
+    <div className="grid-2 mb-2">
+      <div className="form-group">
+        <label className="form-label">Host</label>
+        <input
+          className="form-input"
+          value=${prodHost}
+          onInput=${(e) => setProdHost(e.target.value)}
+          placeholder=${host || "localhost"}
+        />
+      </div>
+      <div className="form-group">
+        <label className="form-label">Port</label>
+        <input
+          className="form-input"
+          value=${prodPort}
+          onInput=${(e) => setProdPort(e.target.value)}
+          placeholder=${port || "27017"}
+        />
+      </div>
+    </div>
+    <div className="form-group">
+      <label className="form-label">Database Name</label>
+      <input
+        className="form-input"
+        value=${prodDbName}
+        onInput=${(e) => setProdDbName(e.target.value)}
+        placeholder=${dbName || "myapp"}
+      />
+    </div>
+    <div className="grid-2">
+      <div className="form-group">
+        <label className="form-label">Username</label>
+        <input
+          className="form-input"
+          value=${prodUsername}
+          onInput=${(e) => setProdUsername(e.target.value)}
+          placeholder=${username || ""}
+        />
+      </div>
+      <div className="form-group">
+        <label className="form-label">Password</label>
+        <input
+          className="form-input"
+          type="password"
+          value=${prodPassword}
+          onInput=${(e) => setProdPassword(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(getDevUri())}
+          </div>
+        </div>`
+      : null;
+
+  return html`<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, false);
+            }
+            if (data.mongoProdUri) {
+              setProdUri(data.mongoProdUri);
+              if (data.mongoProdUri !== data.mongoUri)
+                parseUriToFields(data.mongoProdUri, true);
+            }
+            setEditing(true);
+          }}
+          style=${{ marginLeft: "auto" }}
+        >
+          Edit
+        </button>
+        <span className="badge badge-success">✓ Active</span>
+      </div>
+    </div>`}
+
+    <div className="card-title mb-3">Select Database</div>
+    <div className="card-subtitle mb-4">
+      Select which database to use for your project
+    </div>
+    <div className="grid-4 mb-6">
+      ${databases.map(
+        (db) =>
+          html`<div
+            key=${db.id}
+            className=${`db-card ${selectedDb === db.id ? "active" : ""} ${!db.available ? "disabled" : ""}`}
+            onClick=${() => db.available && setSelectedDb(db.id)}
+          >
+            ${!db.available &&
+            html`<span className="coming-soon">Coming Soon</span>`}
+            <div className="db-icon">
+              <img
+                src=${db.icon}
+                alt=${db.name}
+                style=${{
+                  width: "36px",
+                  height: "36px",
+                  objectFit: "contain",
+                }}
+              />
+            </div>
+            <div className="db-name">${db.name}</div>
+            <div className="db-desc">${db.desc}</div>
+          </div>`,
+      )}
+    </div>
+
+    ${showForm &&
+    html`<div className="card">
+      <div className="flex items-center gap-3 mb-4">
+        <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/skeleton/.4bnode/assets/js/pages/EnvironmentPage.js

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { html, api } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function EnvironmentPage() {
+  const { toast } = useApp();
+  const [selected, setSelected] = useState("development");
+  const [devContent, setDevContent] = useState("");
+  const [prodContent, setProdContent] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState({ development: false, production: false });
+
+  useEffect(() => {
+    api("/env")
+      .then((res) => {
+        setDevContent(res.development || "");
+        setProdContent(res.production || "");
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const currentContent = selected === "development" ? devContent : prodContent;
+  const setCurrentContent = selected === "development" ? setDevContent : setProdContent;
+
+  function handleChange(e) {
+    setCurrentContent(e.target.value);
+    setDirty((d) => ({ ...d, [selected]: true }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const result = await api("/env", {
+        method: "PUT",
+        body: { environment: selected, content: currentContent },
+      });
+      toast(result.message, "success");
+      setDirty((d) => ({ ...d, [selected]: false }));
+    } catch (err) {
+      toast(err.message, "error");
+    }
+    setSaving(false);
+  }
+
+  function countVars(content) {
+    if (!content) return 0;
+    return content.split('\n').filter(l => l.trim() && !l.trim().startsWith('#') && l.includes('=')).length;
+  }
+
+  const files = [
+    { id: "development", label: ".env.development", content: devContent },
+    { id: "production", label: ".env.production", content: prodContent },
+  ];
+
+  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="routes-layout">
+      <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
+        <div style=${{ padding: '14px 16px 10px', borderBottom: '1px solid var(--border)' }}>
+          <span style=${{ fontWeight: 600, fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Files</span>
+        </div>
+        <div className="routes-list">
+          ${files.map(f => html`<div key=${f.id}
+            className=${`route-item ${selected === f.id ? 'active' : ''}`}
+            onClick=${() => setSelected(f.id)}>
+            <div style=${{ display: 'flex', flexDirection: 'column', gap: '4px', flex: 1, minWidth: 0 }}>
+              <span className="ri-name">${f.label}</span>
+              <span className="ri-file">${countVars(f.content)} variable${countVars(f.content) !== 1 ? 's' : ''}</span>
+            </div>
+            ${dirty[f.id] && html`<span className="badge badge-warning" style=${{ fontSize: '10px' }}>Modified</span>`}
+          </div>`)}
+        </div>
+      </div>
+
+      <div className="routes-detail">
+        <div className="card mb-4">
+          <div className="flex items-center justify-between mb-3">
+            <div>
+              <div style=${{ fontWeight: 600, fontSize: '16px', marginBottom: '2px' }}>.env.${selected}</div>
+              <div className="text-sm text-muted">${countVars(currentContent)} variable${countVars(currentContent) !== 1 ? 's' : ''} defined</div>
+            </div>
+            <div className="flex gap-2 items-center">
+              ${dirty[selected] && html`<span className="text-sm text-muted" style=${{ fontSize: '11px' }}>Unsaved</span>`}
+              <button className="btn btn-sm btn-primary" onClick=${handleSave} disabled=${saving || !dirty[selected]}>
+                ${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>
+          <${AnimatePresence} mode="wait">
+            <${motion.div} key=${selected}
+              initial=${{ opacity: 0, y: 6 }} animate=${{ opacity: 1, y: 0 }}
+              exit=${{ opacity: 0, y: -6 }} 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=${currentContent}
+                    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;
+                        const val = e.target.value;
+                        setCurrentContent(val.substring(0, start) + "  " + val.substring(end));
+                        setTimeout(() => { e.target.selectionStart = e.target.selectionEnd = start + 2; }, 0);
+                      }
+                      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+                        e.preventDefault();
+                        if (dirty[selected]) handleSave();
+                      }
+                    }}
+                  />`}
+            <//>
+          <//>
+        </div>
+      </div>
+    </div>
+  </div>`;
+}
+