4bnode 4.1.0 → 4.1.1

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

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+import { LuCheck, LuGauge } from "react-icons/lu";
+import { html, api } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function SecurityPage() {
+  const { toast } = useApp();
+
+  const [rl, setRl] = useState(null);
+  const [savingRl, setSavingRl] = useState(false);
+
+  useEffect(() => {
+    api("/security/rate-limit")
+      .then((r) => setRl({ windowMinutes: r.windowMinutes, max: r.max }))
+      .catch(() => setRl({ windowMinutes: 15, max: 100 }));
+  }, []);
+
+  async function saveRl() {
+    setSavingRl(true);
+    try {
+      await api("/security/rate-limit", {
+        method: "POST",
+        body: { windowMinutes: Number(rl.windowMinutes), max: Number(rl.max) },
+      });
+      toast("Rate limit saved — restart the app to apply.", "success");
+    } catch (err) {
+      toast(err.message, "error");
+    }
+    setSavingRl(false);
+  }
+
+  return html`<div>
+    <div className="mb-4">
+      <div className="card-title">Security</div>
+      <div className="card-subtitle">
+        <b>Security is built in</b> — Helmet, rate limiting, CORS, error handling, RBAC, and Zod
+        validation ship with every app. Validation is generated per route from each route's own
+        fields when you create it. Adjust rate limiting below.
+      </div>
+    </div>
+
+    <div className="card">
+      <div className="flex items-center gap-2 mb-1">
+        <${LuGauge} size=${16} />
+        <div className="card-title" style=${{ margin: 0 }}>Rate limiting</div>
+      </div>
+      <div className="card-subtitle mb-4">
+        Throttle requests per IP. Applies to your API routes (the <span style=${{ fontFamily: "monospace" }}>/_dev</span> dashboard is exempt).
+      </div>
+      ${rl === null
+        ? html`<div className="text-muted text-sm">Loading…</div>`
+        : html`<div style=${{ display: "flex", gap: "16px", alignItems: "flex-end", flexWrap: "wrap" }}>
+            <div className="form-group" style=${{ marginBottom: 0 }}>
+              <label className="form-label">Window (minutes)</label>
+              <input className="form-input" type="number" min="1" value=${rl.windowMinutes}
+                onInput=${(e) => setRl((s) => ({ ...s, windowMinutes: e.target.value }))}
+                style=${{ width: "140px" }} />
+            </div>
+            <div className="form-group" style=${{ marginBottom: 0 }}>
+              <label className="form-label">Max requests / window</label>
+              <input className="form-input" type="number" min="1" value=${rl.max}
+                onInput=${(e) => setRl((s) => ({ ...s, max: e.target.value }))}
+                style=${{ width: "180px" }} />
+            </div>
+            <button className="btn btn-primary" onClick=${saveRl} disabled=${savingRl}>
+              ${savingRl ? html`<span className="spinner" />` : html`<${LuCheck} size=${15} />`} Save
+            </button>
+          </div>
+          <div className="text-sm text-muted" style=${{ marginTop: "10px" }}>
+            Restart the app for changes to take effect (values are read from <span style=${{ fontFamily: "monospace" }}>.env</span> at startup).
+          </div>`}
+    </div>
+  </div>`;
+}

package/skeleton/.4bnode/assets/js/screens/PasskeyScreen.js

@@ -1,70 +1,52 @@
 import React, { useState, useEffect, useRef } from "react";
 import { motion } from "framer-motion";
-import { LuLock } from "react-icons/lu";
-import { html, API, getStoredPasskey } from "../lib.js";
+import { LuLock, LuEye, LuEyeOff } from "react-icons/lu";
+import { html, API } from "../lib.js";
 
 export function PasskeyScreen({ onSuccess }) {
-  const [digits, setDigits] = useState(['', '', '', '', '', '']);
-  const [error, setError] = useState('');
+  const [passkey, setPasskey] = useState("");
+  const [show, setShow] = useState(false);
+  const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-  const inputRefs = useRef([]);
-
-  const handleChange = (index, value) => {
-    if (!/^\d?$/.test(value)) return;
-    const next = [...digits];
-    next[index] = value;
-    setDigits(next);
-    setError('');
-    if (value && index < 5) {
-      inputRefs.current[index + 1]?.focus();
-    }
-  };
-
-  const handleKeyDown = (index, e) => {
-    if (e.key === 'Backspace' && !digits[index] && index > 0) {
-      inputRefs.current[index - 1]?.focus();
-    }
-    if (e.key === 'Enter') handleSubmit();
-  };
-
-  const handlePaste = (e) => {
-    e.preventDefault();
-    const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);
-    if (pasted.length === 0) return;
-    const next = [...digits];
-    for (let i = 0; i < 6; i++) next[i] = pasted[i] || '';
-    setDigits(next);
-    const focusIdx = Math.min(pasted.length, 5);
-    inputRefs.current[focusIdx]?.focus();
-  };
+  const inputRef = useRef(null);
 
   const handleSubmit = async () => {
-    const pin = digits.join('');
-    if (pin.length !== 6) { setError('Enter all 6 digits'); return; }
+    if (loading) return;
+    if (!passkey) {
+      setError("Enter your passkey");
+      return;
+    }
     setLoading(true);
+    setError("");
     try {
-      const res = await fetch(API + '/auth', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ passkey: pin }),
+      const res = await fetch(API + "/auth", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ passkey }),
       });
-      const data = await res.json();
+      const data = await res.json().catch(() => ({}));
       if (!res.ok) {
-        setError(data.error || 'Invalid passkey');
-        setDigits(['', '', '', '', '', '']);
-        inputRefs.current[0]?.focus();
+        setError(data.error || "Invalid passkey");
+        setPasskey("");
+        inputRef.current?.focus();
       } else {
-        sessionStorage.setItem('_dev_passkey', pin);
+        sessionStorage.setItem("_dev_passkey", passkey);
         onSuccess();
       }
     } catch {
-      setError('Connection failed');
+      setError("Connection failed");
     } finally {
       setLoading(false);
     }
   };
 
-  useEffect(() => { inputRefs.current[0]?.focus(); }, []);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") handleSubmit();
+  };
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
 
   return html`<${motion.div}
     className="passkey-screen"
@@ -82,23 +64,41 @@ export function PasskeyScreen({ onSuccess }) {
     >
       <${LuLock} size=${28} color="#0072ff" />
       <h2>Dashboard Passkey</h2>
-      <p>Enter your 6-digit passkey to continue</p>
-      <div className="passkey-inputs" onPaste=${handlePaste}>
-        ${digits.map((d, i) => html`<input
-          key=${i}
-          ref=${(el) => { inputRefs.current[i] = el; }}
-          type="text"
-          inputMode="numeric"
-          maxLength="1"
-          value=${d}
-          className=${error ? 'error' : ''}
-          onInput=${(e) => handleChange(i, e.target.value)}
-          onKeyDown=${(e) => handleKeyDown(i, e)}
-        />`)}
+      <p>Enter your passkey to continue</p>
+      <div className="passkey-field" style=${{ position: "relative", width: "100%" }}>
+        <input
+          ref=${inputRef}
+          type=${show ? "text" : "password"}
+          autoComplete="current-password"
+          className=${error ? "error" : ""}
+          value=${passkey}
+          placeholder="Passkey"
+          style=${{ width: "100%", paddingRight: "40px" }}
+          onInput=${(e) => {
+            setPasskey(e.target.value);
+            setError("");
+          }}
+          onKeyDown=${handleKeyDown}
+        />
+        <span
+          onClick=${() => setShow((s) => !s)}
+          title=${show ? "Hide" : "Show"}
+          style=${{
+            position: "absolute",
+            right: "12px",
+            top: "50%",
+            transform: "translateY(-50%)",
+            cursor: "pointer",
+            color: "var(--text-muted, #888)",
+            display: "flex",
+          }}
+        >
+          ${show ? html`<${LuEyeOff} size=${18} />` : html`<${LuEye} size=${18} />`}
+        </span>
       </div>
       <div className="passkey-error">${error}</div>
       <button className="passkey-btn" onClick=${handleSubmit} disabled=${loading}>
-        ${loading ? 'Verifying...' : 'Unlock Dashboard'}
+        ${loading ? "Verifying..." : "Unlock Dashboard"}
       </button>
     <//>
   <//>`;