4bnode 4.1.5 → 4.1.6

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

@@ -25,33 +25,66 @@ export function LogsPage() {
   const [connected, setConnected] = useState(false);
   const bottomRef = useRef(null);
   const containerRef = useRef(null);
-  const eventSourceRef = useRef(null);
 
   // Load existing logs
   useEffect(() => {
     api("/logs").then(setLogs).catch(() => {});
   }, []);
 
-  // SSE stream for real-time logs
+  // SSE stream for real-time logs.
+  // Uses fetch() so the passkey travels in the x-passkey header instead of the
+  // query string (EventSource can't set headers, which leaked it into logs).
   useEffect(() => {
-    const passkey = getStoredPasskey();
-    const url = API + "/logs/stream" + (passkey ? "?passkey=" + encodeURIComponent(passkey) : "");
-    const es = new EventSource(url);
-    eventSourceRef.current = es;
+    const controller = new AbortController();
+    let aborted = false;
+    let retryTimer = null;
 
-    es.onopen = () => setConnected(true);
-    es.onmessage = (e) => {
+    async function stream() {
+      const passkey = getStoredPasskey();
       try {
-        const entry = JSON.parse(e.data);
-        setLogs((prev) => {
-          const next = [...prev, entry];
-          return next.length > 500 ? next.slice(-500) : next;
+        const res = await fetch(API + "/logs/stream", {
+          headers: passkey ? { "x-passkey": passkey } : {},
+          signal: controller.signal,
         });
-      } catch {}
-    };
-    es.onerror = () => setConnected(false);
+        if (!res.ok || !res.body) throw new Error("stream failed");
+        setConnected(true);
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          let idx;
+          while ((idx = buffer.indexOf("\n")) !== -1) {
+            const line = buffer.slice(0, idx);
+            buffer = buffer.slice(idx + 1);
+            if (!line.startsWith("data: ")) continue;
+            try {
+              const entry = JSON.parse(line.slice(6));
+              setLogs((prev) => {
+                const next = [...prev, entry];
+                return next.length > 500 ? next.slice(-500) : next;
+              });
+            } catch {}
+          }
+        }
+      } catch {
+        // network/parse error — fall through to reconnect below
+      }
+      if (!aborted) {
+        setConnected(false);
+        retryTimer = setTimeout(stream, 2000);
+      }
+    }
 
-    return () => es.close();
+    stream();
+
+    return () => {
+      aborted = true;
+      controller.abort();
+      if (retryTimer) clearTimeout(retryTimer);
+    };
   }, []);
 
   // Auto-scroll to bottom

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

@@ -65,9 +65,14 @@ await sendMail({ to: user.email, subject: 'Welcome', html });
 export function MailPage() {
   const { toast, refresh } = useApp();
   const [info, setInfo] = useState(null);
-  const [provider, setProvider] = useState("mailgun");
-  const [form, setForm] = useState({ host: "smtp.mailgun.org", 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);
@@ -87,13 +92,20 @@ export function MailPage() {
     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]);
@@ -102,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);
   }
 
@@ -131,9 +158,16 @@ 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 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" };
 
@@ -141,7 +175,7 @@ export function MailPage() {
     <div className="flex items-center justify-between mb-4">
       <div>
         <div className="card-title">Email</div>
-        <div className="card-subtitle">Transactional email via Mailgun, Brevo, SendGrid, 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>
@@ -157,36 +191,55 @@ export function MailPage() {
         </div>
         ${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 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" />
+        ${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="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 className="text-sm text-muted" style=${{ marginBottom: "8px" }}>
+            Enter the authorization password to continue. Its use will be reported to the domain owner.
           </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" />
-        </div>
-        <button className="btn btn-primary" onClick=${save} disabled=${busy || !form.host.trim()}>
+          <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>
@@ -205,8 +258,9 @@ export function MailPage() {
         </div>`}
       </div>
 
-      <!-- RIGHT: code only -->
-      <div className="card" style=${{ flex: "1 1 360px", minWidth: 0 }}>
+      <!-- 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}
@@ -219,6 +273,12 @@ export function MailPage() {
         </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>
+
+      ${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>`;
 }