4bnode 4.1.4 → 4.1.6

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

@@ -3,26 +3,109 @@ 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("resend");
+  const [form, setForm] = useState({
+    apiKey: "", resendFrom: "",
+    host: "", port: 587, secure: false, user: "", pass: "", smtpFrom: "",
+  });
   const [busy, setBusy] = useState(false);
+  const [configError, setConfigError] = useState("");
+  const [domainPassword, setDomainPassword] = useState("");
   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 {
       const r = await api("/mail");
       setInfo(r);
+      // Persisted failure from the last save survives reloads until it's fixed.
+      setConfigError(r.configured && r.verified === false
+        ? "The saved email configuration failed its last connection test. Update the details and save again."
+        : "");
+      setProvider(r.provider || "resend");
+      const rs = r.resend || {}, sm = r.smtp || {};
       setForm((f) => ({
         ...f,
-        host: r.host || f.host,
-        port: r.port || f.port || 587,
-        secure: !!r.secure,
-        user: r.user || f.user,
-        from: r.from || f.from,
+        resendFrom: rs.from || f.resendFrom,
+        host: sm.host || f.host,
+        port: sm.port || f.port || 587,
+        secure: !!sm.secure,
+        user: sm.user || f.user,
+        smtpFrom: sm.from || f.smtpFrom,
       }));
     } catch (err) { toast(err.message, "error"); }
   }, [toast]);
@@ -31,20 +114,35 @@ export function MailPage() {
 
   function setField(patch) { setForm((f) => ({ ...f, ...patch })); }
 
-  function pickProvider(p) {
-    setProvider(p.id);
-    if (p.id !== "smtp") setField({ host: p.host, port: p.port, secure: p.secure, user: p.user || form.user });
-  }
+  function pickProvider(p) { setProvider(p.id); }
+  // TLS drives the SMTP port: on → 465 (implicit TLS), off → 587 (STARTTLS).
+  function setTls(on) { setForm((f) => ({ ...f, secure: on, port: on ? 465 : 587 })); }
 
   async function save() {
-    if (!form.host.trim()) { toast("SMTP host is required", "error"); return; }
+    let body;
+    if (provider === "resend") {
+      if (!form.apiKey.trim() && !(info.resend && info.resend.hasKey)) { toast("API key is required", "error"); return; }
+      body = { provider: "resend", apiKey: form.apiKey.trim(), from: form.resendFrom.trim(), domainPassword };
+    } else {
+      if (!form.host.trim()) { toast("SMTP host is required", "error"); return; }
+      body = { provider: "smtp", host: form.host.trim(), port: form.port, secure: form.secure, user: form.user.trim(), pass: form.pass, from: form.smtpFrom.trim(), domainPassword };
+    }
     setBusy(true);
     try {
-      const r = await api("/mail/setup", { method: "POST", body: { provider, ...form } });
-      toast(r.message, "success");
-      await load();
+      const r = await api("/mail/setup", { method: "POST", body });
+      await load(); // refresh info (and the persisted verify status)
+      if (r && r.verified === false) {
+        setConfigError(r.error || "Configuration failed. Check the details and try again.");
+        toast(r.message || "Configuration test failed", "error");
+      } else {
+        setConfigError("");
+        toast(r.message, "success");
+      }
       refresh().catch(() => {});
-    } catch (err) { toast(err.message, "error"); }
+    } catch (err) {
+      setConfigError(err.message || "Configuration failed.");
+      toast(err.message, "error");
+    }
     setBusy(false);
   }
 
@@ -60,75 +158,127 @@ 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) || {};
+  const current = (info.providers || []).find((p) => p.id === provider) || {};
+  const providers = info.providers || [];
+
+  // 4brains.in is an official domain — it can't be used directly; an authorization
+  // password is required and its use is reported to the domain owner. The effective
+  // SMTP sender is the From, or the User when From is blank — check both, matching
+  // the server (from || user).
+  const officialRe = /4brains\.in/i;
+  const officialValues = provider === "resend" ? [form.resendFrom] : [form.host, form.user, form.smtpFrom];
+  const isOfficial = officialValues.some((v) => officialRe.test(String(v || "")));
+
+  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 IntraApp(Postmaster) or any custom SMTP server</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>
-        <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>
+    <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>
+        ${current.hint && html`<div className="text-sm text-muted" style=${{ marginBottom: "14px" }}>${current.hint}</div>`}
+
+        ${provider === "resend"
+          ? html`<div className="form-group">
+              <label className="form-label">From address</label>
+              <input className="form-input" value=${form.resendFrom} onInput=${(e) => setField({ resendFrom: e.target.value })} placeholder="no-reply@yourdomain.com" />
+            </div>
+            <div className="form-group">
+              <label className="form-label">API Key ${info.resend && info.resend.hasKey ? html`<span className="text-muted" style=${{ fontWeight: 400 }}>(saved)</span>` : ""}</label>
+              <input className="form-input" type="password" value=${form.apiKey} onInput=${(e) => setField({ apiKey: e.target.value })} placeholder=${info.resend && info.resend.hasKey ? "••••••••" : "re_..."} />
+            </div>`
+          : html`<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.example.com" />
+              </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 110px", 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) => setTls(e.target.checked)} /> TLS
+                </label>
+              </div>
+            </div>
+            <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.smtp && info.smtp.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.smtp && info.smtp.hasPass ? "••••••••" : "secret"} />
+              </div>
+            </div>
+            <div className="form-group">
+              <label className="form-label">From address</label>
+              <input className="form-input" value=${form.smtpFrom} onInput=${(e) => setField({ smtpFrom: e.target.value })} placeholder="no-reply@yourdomain.com" />
+            </div>`}
+        ${isOfficial && html`<div className="form-group" style=${{ border: "1px solid #f59e0b", borderRadius: "8px", padding: "12px", background: "rgba(245,158,11,0.08)" }}>
+          <div className="text-sm" style=${{ color: "#f59e0b", marginBottom: "8px", fontWeight: 600 }}>
+            4brains.in is an official email domain — you can't use it directly.
+          </div>
+          <div className="text-sm text-muted" style=${{ marginBottom: "8px" }}>
+            Enter the authorization password to continue. Its use will be reported to the domain owner.
+          </div>
+          <label className="form-label">Authorization password</label>
+          <input className="form-input" type="password" value=${domainPassword} onInput=${(e) => setDomainPassword(e.target.value)} placeholder="Required for 4brains.in" />
+        </div>`}
+        <button className="btn btn-primary" onClick=${save} disabled=${busy || (provider === "smtp" && !form.host.trim()) || (isOfficial && !domainPassword)}>
+          ${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 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>
-        <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"} />
+
+      <!-- RIGHT: code card + (optional) error card, stacked -->
+      <div style=${{ flex: "1 1 360px", minWidth: 0, display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div className="card">
+        <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>
+        <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 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" />
-        </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>
+      ${configError && html`<div className="card" style=${{ border: "1px solid #ef4444", background: "rgba(239,68,68,0.08)" }}>
+        <div style=${{ color: "#ef4444", fontWeight: 600, marginBottom: "6px" }}>⚠ Configuration failed</div>
+        <div className="text-sm" style=${{ color: "var(--text-secondary)", whiteSpace: "pre-wrap", wordBreak: "break-word" }}>${configError}</div>
+      </div>`}
       </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() {