4bnode 4.1.3 → 4.1.5

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

@@ -3,14 +3,85 @@ import { LuMail, LuCheck, LuSend } from "react-icons/lu";
 import { html, api } from "../lib.js";
 import { useApp } from "../context.js";
 
+// Copy-paste usage shown in the right-hand code panel.
+const USAGE_TABS = [
+  {
+    id: "basic",
+    label: "Basic",
+    code: `import { sendMail, emailTemplate } from '../services/mailer.js';
+
+// Call from any route handler. Credentials come from .env.
+await sendMail({
+  to: 'user@example.com',
+  subject: 'Welcome to 4Brains!',
+  html: emailTemplate({ title: 'Welcome', body: 'Thanks for signing up.' }),
+  // text: 'Plain-text fallback',     // optional
+  // cc, bcc, replyTo, from           // optional
+});`,
+  },
+  {
+    id: "attachment",
+    label: "Attachment",
+    code: `import { sendMail } from '../services/mailer.js';
+
+await sendMail({
+  to: 'user@example.com',
+  subject: 'Your invoice',
+  text: 'Invoice attached.',
+  attachments: [
+    // a) from a file on disk
+    { filename: 'invoice.pdf', path: './invoices/inv-001.pdf' },
+    // b) generated content (string or Buffer)
+    { filename: 'note.txt', content: 'Generated at ' + new Date().toISOString() },
+    // c) an uploaded file (multer)  ->  req.file
+    { filename: req.file.originalname, path: req.file.path },
+  ],
+});`,
+  },
+  {
+    id: "ejs",
+    label: "Dynamic (EJS)",
+    code: `// Any template engine works: render it to an HTML string, pass as \`html\`.
+import { sendMail } from '../services/mailer.js';
+import ejs from 'ejs';           // npm i ejs
+import path from 'path';
+
+// views/emails/welcome.ejs:
+//   <h1>Hi <%= name %></h1>
+//   <p>Verify: <a href="<%= link %>"><%= link %></a></p>
+
+const html = await ejs.renderFile(
+  path.join(process.cwd(), 'views/emails/welcome.ejs'),
+  { name: user.name, link: 'https://app.com/verify/' + token }   // dynamic data
+);
+
+await sendMail({ to: user.email, subject: 'Welcome', html });
+
+// Handlebars / Pug / React Email: same idea — produce an HTML
+// string from your data, then hand it to sendMail({ html }).`,
+  },
+];
+
 export function MailPage() {
   const { toast, refresh } = useApp();
   const [info, setInfo] = useState(null);
-  const [provider, setProvider] = useState("brevo");
-  const [form, setForm] = useState({ host: "", port: 587, secure: false, user: "", pass: "", from: "" });
+  const [provider, setProvider] = useState("mailgun");
+  const [form, setForm] = useState({ host: "smtp.mailgun.org", port: 587, secure: false, user: "", pass: "", from: "" });
   const [busy, setBusy] = useState(false);
   const [testTo, setTestTo] = useState("");
   const [testing, setTesting] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [tab, setTab] = useState("basic");
+
+  const activeTab = USAGE_TABS.find((t) => t.id === tab) || USAGE_TABS[0];
+
+  function copyUsage() {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(activeTab.code);
+    } catch (e) {}
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
 
   const load = useCallback(async () => {
     try {
@@ -61,74 +132,93 @@ export function MailPage() {
   if (!info) return html`<div className="text-muted" style=${{ padding: "16px" }}>Loading…</div>`;
 
   const current = info.providers.find((p) => p.id === provider) || {};
+  // Render Mailgun first regardless of the backend list order.
+  const providers = info.providers.slice().sort((a, b) => (a.id === "mailgun" ? -1 : b.id === "mailgun" ? 1 : 0));
+
+  const labelStyle = { fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", marginBottom: "8px" };
 
   return html`<div>
     <div className="flex items-center justify-between mb-4">
       <div>
         <div className="card-title">Email</div>
-        <div className="card-subtitle">Send transactional email via Brevo, SendGrid, Mailgun, Gmail, or any SMTP</div>
+        <div className="card-subtitle">Transactional email via Mailgun, Brevo, SendGrid, Gmail, or any SMTP</div>
       </div>
       ${info.configured && html`<span className="badge badge-success">Configured</span>`}
     </div>
 
-    <div className="card mb-4">
-      <div style=${{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", marginBottom: "8px" }}>Provider</div>
-      <div style=${{ display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "8px" }}>
-        ${info.providers.map((p) => html`<button key=${p.id} className="badge"
-          onClick=${() => pickProvider(p)}
-          style=${{ cursor: "pointer", border: "1px solid var(--border)", background: provider === p.id ? "var(--accent-glow)" : "var(--bg-input)", color: provider === p.id ? "var(--accent-light)" : "var(--text-secondary)" }}>${p.label}</button>`)}
-      </div>
-      ${current.hint && html`<div className="text-sm text-muted">${current.hint}</div>`}
-    </div>
-
-    <div className="card mb-4">
-      <div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
-        <div className="form-group" style=${{ flex: "1 1 260px" }}>
-          <label className="form-label">SMTP Host</label>
-          <input className="form-input" value=${form.host} onInput=${(e) => setField({ host: e.target.value })} placeholder="smtp-relay.brevo.com" />
+    <div style=${{ display: "flex", gap: "16px", alignItems: "flex-start", flexWrap: "wrap" }}>
+      <!-- LEFT: provider + SMTP config -->
+      <div className="card" style=${{ flex: "1 1 420px", minWidth: 0 }}>
+        <div style=${labelStyle}>Provider</div>
+        <div style=${{ display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: current.hint ? "6px" : "14px" }}>
+          ${providers.map((p) => html`<button key=${p.id} className="badge"
+            onClick=${() => pickProvider(p)}
+            style=${{ cursor: "pointer", border: "1px solid var(--border)", background: provider === p.id ? "var(--accent-glow)" : "var(--bg-input)", color: provider === p.id ? "var(--accent-light)" : "var(--text-secondary)" }}>${p.label}</button>`)}
         </div>
-        <div className="form-group" style=${{ flex: "0 0 110px" }}>
-          <label className="form-label">Port</label>
-          <input className="form-input" type="number" value=${form.port} onInput=${(e) => setField({ port: e.target.value })} />
-        </div>
-        <div className="form-group" style=${{ flex: "0 0 130px", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
-          <label style=${{ display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "var(--text-secondary)", cursor: "pointer", paddingBottom: "10px" }}>
-            <input type="checkbox" checked=${form.secure} onChange=${(e) => setField({ secure: e.target.checked })} /> Secure (465)
-          </label>
+        ${current.hint && html`<div className="text-sm text-muted" style=${{ marginBottom: "14px" }}>${current.hint}</div>`}
+
+        <div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+          <div className="form-group" style=${{ flex: "1 1 200px" }}>
+            <label className="form-label">SMTP Host</label>
+            <input className="form-input" value=${form.host} onInput=${(e) => setField({ host: e.target.value })} placeholder="smtp.mailgun.org" />
+          </div>
+          <div className="form-group" style=${{ flex: "0 0 90px" }}>
+            <label className="form-label">Port</label>
+            <input className="form-input" type="number" value=${form.port} onInput=${(e) => setField({ port: e.target.value })} />
+          </div>
+          <div className="form-group" style=${{ flex: "0 0 120px", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
+            <label style=${{ display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "var(--text-secondary)", cursor: "pointer", paddingBottom: "10px" }}>
+              <input type="checkbox" checked=${form.secure} onChange=${(e) => setField({ secure: e.target.checked })} /> Secure (465)
+            </label>
+          </div>
         </div>
-      </div>
-      <div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
-        <div className="form-group" style=${{ flex: "1 1 240px" }}>
-          <label className="form-label">User</label>
-          <input className="form-input" value=${form.user} onInput=${(e) => setField({ user: e.target.value })} placeholder="login / apikey" />
+        <div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+          <div className="form-group" style=${{ flex: "1 1 180px" }}>
+            <label className="form-label">User</label>
+            <input className="form-input" value=${form.user} onInput=${(e) => setField({ user: e.target.value })} placeholder="SMTP username" />
+          </div>
+          <div className="form-group" style=${{ flex: "1 1 180px" }}>
+            <label className="form-label">Password ${info.hasPass ? html`<span className="text-muted" style=${{ fontWeight: 400 }}>(saved)</span>` : ""}</label>
+            <input className="form-input" type="password" value=${form.pass} onInput=${(e) => setField({ pass: e.target.value })} placeholder=${info.hasPass ? "••••••••" : "secret"} />
+          </div>
         </div>
-        <div className="form-group" style=${{ flex: "1 1 240px" }}>
-          <label className="form-label">Password / API key ${info.hasPass ? html`<span className="text-muted" style=${{ fontWeight: 400 }}>(saved — leave blank to keep)</span>` : ""}</label>
-          <input className="form-input" type="password" value=${form.pass} onInput=${(e) => setField({ pass: e.target.value })} placeholder=${info.hasPass ? "••••••••" : "secret"} />
+        <div className="form-group">
+          <label className="form-label">From address</label>
+          <input className="form-input" value=${form.from} onInput=${(e) => setField({ from: e.target.value })} placeholder="no-reply@yourdomain.com" />
         </div>
+        <button className="btn btn-primary" onClick=${save} disabled=${busy || !form.host.trim()}>
+          ${busy ? html`<span className="spinner" />` : html`<${LuCheck} size=${16} />`}
+          ${busy ? "Saving..." : "Save & install"}
+        </button>
+
+        ${info.configured && html`<div style=${{ marginTop: "16px", paddingTop: "16px", borderTop: "1px solid var(--border)" }}>
+          <div style=${labelStyle}>Send test email</div>
+          <div style=${{ display: "flex", gap: "8px", alignItems: "flex-end", flexWrap: "wrap" }}>
+            <div className="form-group" style=${{ flex: "1 1 200px", marginBottom: 0 }}>
+              <input className="form-input" value=${testTo} onInput=${(e) => setTestTo(e.target.value)} placeholder="you@example.com" />
+            </div>
+            <button className="btn btn-primary" onClick=${sendTest} disabled=${testing || !testTo.trim()}>
+              ${testing ? html`<span className="spinner" />` : html`<${LuSend} size=${16} />`}
+              ${testing ? "Sending..." : "Send test"}
+            </button>
+          </div>
+        </div>`}
       </div>
-      <div className="form-group">
-        <label className="form-label">From address</label>
-        <input className="form-input" value=${form.from} onInput=${(e) => setField({ from: e.target.value })} placeholder="no-reply@yourdomain.com" style=${{ maxWidth: "320px" }} />
-      </div>
-      <button className="btn btn-primary" onClick=${save} disabled=${busy || !form.host.trim()}>
-        ${busy ? html`<span className="spinner" />` : html`<${LuCheck} size=${16} />`}
-        ${busy ? "Saving..." : "Save & install"}
-      </button>
-    </div>
 
-    ${info.configured && html`<div className="card">
-      <div className="card-title mb-2">Send test email</div>
-      <div style=${{ display: "flex", gap: "8px", alignItems: "flex-end", flexWrap: "wrap" }}>
-        <div className="form-group" style=${{ flex: "1 1 260px", marginBottom: 0 }}>
-          <label className="form-label">Recipient</label>
-          <input className="form-input" value=${testTo} onInput=${(e) => setTestTo(e.target.value)} placeholder="you@example.com" />
+      <!-- RIGHT: code only -->
+      <div className="card" style=${{ flex: "1 1 360px", minWidth: 0 }}>
+        <div className="flex items-center justify-between mb-2">
+          <div style=${{ display: "flex", gap: "4px", flexWrap: "wrap" }}>
+            ${USAGE_TABS.map((t) => html`<button key=${t.id}
+              onClick=${() => setTab(t.id)}
+              style=${{ cursor: "pointer", fontSize: "12px", padding: "5px 11px", borderRadius: "7px", border: "1px solid var(--border)", background: tab === t.id ? "var(--accent-glow)" : "var(--bg-input)", color: tab === t.id ? "var(--accent-light)" : "var(--text-secondary)" }}>${t.label}</button>`)}
+          </div>
+          <button className="btn btn-sm" style=${{ background: "var(--bg-input)", border: "1px solid var(--border)", color: "var(--text-secondary)" }} onClick=${copyUsage}>
+            ${copied ? html`<${LuCheck} size=${14} />` : null} ${copied ? "Copied" : "Copy"}
+          </button>
         </div>
-        <button className="btn btn-primary" onClick=${sendTest} disabled=${testing || !testTo.trim()}>
-          ${testing ? html`<span className="spinner" />` : html`<${LuSend} size=${16} />`}
-          ${testing ? "Sending..." : "Send test"}
-        </button>
+        <pre style=${{ background: "#0a0c12", border: "1px solid var(--border)", borderRadius: "8px", padding: "14px", fontSize: "12px", lineHeight: 1.55, color: "#d5d8e3", overflow: "auto", margin: 0, fontFamily: "ui-monospace,Menlo,monospace", whiteSpace: "pre" }}>${activeTab.code}</pre>
       </div>
-    </div>`}
+    </div>
   </div>`;
 }

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

@@ -617,6 +617,7 @@ function CreateRoutePanel({ onCreated }) {
   const [authRequired, setAuthRequired] = useState(false);
   const [newFieldName, setNewFieldName] = useState("");
   const [newFieldType, setNewFieldType] = useState("String");
+  const [newFieldRequired, setNewFieldRequired] = useState(true);
   const [loading, setLoading] = useState(false);
   const nameRef = useRef(null);
 
@@ -1099,6 +1100,35 @@ function CreateRoutePanel({ onCreated }) {
                   }}
                   >${f.type}</span
                 >
+                <span
+                  title="Click to toggle required / optional"
+                  style=${{
+                    cursor: "pointer",
+                    fontSize: "9px",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.3px",
+                    padding: "1px 5px",
+                    borderRadius: "4px",
+                    color:
+                      f.required === false
+                        ? "var(--text-muted)"
+                        : "var(--success)",
+                    background:
+                      f.required === false
+                        ? "var(--bg-input)"
+                        : "var(--success-glow)",
+                  }}
+                  onClick=${() =>
+                    setCustomFields((prev) =>
+                      prev.map((x, idx) =>
+                        idx === i
+                          ? { ...x, required: x.required === false }
+                          : x,
+                      ),
+                    )}
+                  >${f.required === false ? "optional" : "required"}</span
+                >
                 <span
                   style=${{
                     cursor: "pointer",
@@ -1131,7 +1161,7 @@ function CreateRoutePanel({ onCreated }) {
               if (e.key === "Enter" && newFieldName.trim()) {
                 setCustomFields((prev) => [
                   ...prev,
-                  { name: newFieldName.trim(), type: newFieldType },
+                  { name: newFieldName.trim(), type: newFieldType, required: newFieldRequired },
                 ]);
                 setNewFieldName("");
               }
@@ -1151,6 +1181,25 @@ function CreateRoutePanel({ onCreated }) {
             <option value="Object">Object</option>
             <option value="File">File</option>
           </select>
+          <label
+            title="New field is required in the request body (validated by Zod)"
+            style=${{
+              display: "flex",
+              alignItems: "center",
+              gap: "5px",
+              fontSize: "12px",
+              color: "var(--text-secondary)",
+              cursor: "pointer",
+              whiteSpace: "nowrap",
+            }}
+          >
+            <input
+              type="checkbox"
+              checked=${newFieldRequired}
+              onChange=${(e) => setNewFieldRequired(e.target.checked)}
+            />
+            required
+          </label>
           <button
             className="btn btn-sm"
             style=${{
@@ -1168,7 +1217,7 @@ function CreateRoutePanel({ onCreated }) {
               if (newFieldName.trim()) {
                 setCustomFields((prev) => [
                   ...prev,
-                  { name: newFieldName.trim(), type: newFieldType },
+                  { name: newFieldName.trim(), type: newFieldType, required: newFieldRequired },
                 ]);
                 setNewFieldName("");
               }

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

@@ -12,7 +12,7 @@ export function SecurityPage() {
   useEffect(() => {
     api("/security/rate-limit")
       .then((r) => setRl({ windowMinutes: r.windowMinutes, max: r.max }))
-      .catch(() => setRl({ windowMinutes: 15, max: 100 }));
+      .catch(() => setRl({ windowMinutes: 15, max: 500 }));
   }, []);
 
   async function saveRl() {