@aaqu/fromcubes-portal-react 0.1.0-alpha.3 → 0.1.0-alpha.5

package/nodes/portal-react.html

@@ -45,7 +45,7 @@
       var libContent = [
         "declare var React: any;",
         "declare var ReactDOM: any;",
-        "declare function useNodeRed(): { data: any; send: (payload: any, topic?: string) => void };",
+        "declare function useNodeRed(): { data: any; send: (payload: any, topic?: string) => void; user: { userId?: string; userName?: string; username?: string; email?: string; role?: string; groups?: any[] } | null };",
       ].join("\n");
       console.log(PREFIX, "addExtraLib globals.d.ts");
       jsDef.addExtraLib(libContent, "file:///globals.d.ts");
@@ -660,7 +660,7 @@
       <div class="form-row" style="margin-bottom:0;">
         <div style="font-size:11px;opacity:.6;margin-bottom:4px;">
           <code>useNodeRed()</code> &rarr;
-          <code>{ data, send }</code> &nbsp;|&nbsp; Components from
+          <code>{ data, send, user }</code> &nbsp;|&nbsp; Components from
           <code>fc-portal-component</code> nodes auto-imported &nbsp;|&nbsp;
           Must export <code>&lt;App /&gt;</code> &nbsp;|&nbsp;
           <strong>Transpiled server-side at deploy</strong>
@@ -711,6 +711,31 @@
         </div>
       </div>
     </div>
+    <!-- ── Tab: Auth ── -->
+    <div id="fc-tab-auth" class="fc-tab-pane" style="display:none;">
+      <div class="form-row">
+        <label style="width:auto;">
+          <input
+            type="checkbox"
+            id="node-input-portalAuth"
+            style="width:auto;margin:0 8px 0 0;vertical-align:middle;"
+          />
+          Enable Portal Auth headers
+        </label>
+      </div>
+      <div class="form-row" style="padding-left:4px;">
+        <div style="font-size:11px;opacity:.6;line-height:1.5;">
+          Read <code>X-Portal-*</code> headers set by Nginx proxy and expose user data
+          via <code>useNodeRed()</code>.<br><br>
+          When enabled:<br>
+          &bull; <code>useNodeRed()</code> returns <code>{ data, send, user }</code> where
+          <code>user</code> contains <code>userId</code>, <code>userName</code>,
+          <code>username</code>, <code>email</code>, <code>role</code>, <code>groups</code><br>
+          &bull; Messages from WebSocket include <code>msg._client</code> with user data<br><br>
+          Requires <code>@aaqu/node-red-dashboard-2-portal-auth</code> Nginx setup.
+        </div>
+      </div>
+    </div>
   </div>
 
   <input type="hidden" id="node-input-componentCode" />
@@ -758,6 +783,7 @@
         pageTitle: { value: "Portal" },
         componentCode: { value: STARTER },
         customHead: { value: "" },
+        portalAuth: { value: false },
       },
       inputs: 1,
       outputs: 1,
@@ -798,6 +824,7 @@
         fcTabs.addTab({ id: "fc-tab-jsx", label: "JSX" });
         fcTabs.addTab({ id: "fc-tab-props", label: "Properties" });
         fcTabs.addTab({ id: "fc-tab-head", label: "Head HTML" });
+        fcTabs.addTab({ id: "fc-tab-auth", label: "Auth" });
         fcTabs.activateTab("fc-tab-jsx");
 
         // URL hint
@@ -1048,6 +1075,17 @@ const { data, send } = useNodeRed();
     by their component name.
   </p>
 
+  <h3>Portal Auth</h3>
+  <p>
+    When enabled in the Auth tab, reads <code>X-Portal-*</code> headers set by
+    an Nginx proxy (via <code>@aaqu/node-red-dashboard-2-portal-auth</code>) and
+    exposes user data:
+  </p>
+  <ul>
+    <li><code>useNodeRed()</code> returns <code>{ data, send, user }</code></li>
+    <li>Messages from WebSocket include <code>msg._client</code> with user info</li>
+  </ul>
+
   <h3>Custom Head HTML</h3>
   <p>
     Inject CDN links, fonts, or extra stylesheets into

package/nodes/portal-react.js

@@ -134,6 +134,23 @@ module.exports = function (RED) {
     );
   }
 
+  function extractPortalUser(headers) {
+    const user = {};
+    if (headers["x-portal-user-id"]) user.userId = headers["x-portal-user-id"];
+    if (headers["x-portal-user-name"]) user.userName = headers["x-portal-user-name"];
+    if (headers["x-portal-user-username"]) user.username = headers["x-portal-user-username"];
+    if (headers["x-portal-user-email"]) user.email = headers["x-portal-user-email"];
+    if (headers["x-portal-user-role"]) user.role = headers["x-portal-user-role"];
+    if (headers["x-portal-user-groups"]) {
+      try {
+        user.groups = JSON.parse(headers["x-portal-user-groups"]);
+      } catch (_) {
+        user.groups = headers["x-portal-user-groups"];
+      }
+    }
+    return Object.keys(user).length > 0 ? user : null;
+  }
+
   function removeRoute(router, path) {
     if (!router || !router.stack) return;
     router.stack = router.stack.filter(
@@ -196,6 +213,7 @@ module.exports = function (RED) {
     const componentCode = config.componentCode || "";
     const pageTitle = config.pageTitle || "Portal";
     const customHead = config.customHead || "";
+    const portalAuth = config.portalAuth === true;
 
     // State
     const clients = new Set();
@@ -238,7 +256,8 @@ module.exports = function (RED) {
   const send = React.useCallback((payload, topic) => {
     window.__NR.send(payload, topic);
   }, []);
-  return { data, send };
+  const user = window.__NR._user || null;
+  return { data, send, user };
 }`,
         "",
         "// ── Library components ──",
@@ -278,6 +297,7 @@ module.exports = function (RED) {
         pageTitle,
         wsPath,
         customHead,
+        portalAuth,
       };
     }
 
@@ -305,6 +325,7 @@ module.exports = function (RED) {
             return;
           }
           const cssHash = await state.cssHashReady;
+          const user = state.portalAuth ? extractPortalUser(_req.headers) : null;
           res
             .type("text/html")
             .send(
@@ -314,6 +335,7 @@ module.exports = function (RED) {
                 state.wsPath,
                 state.customHead,
                 cssHash,
+                user,
               ),
             );
         });
@@ -351,11 +373,14 @@ module.exports = function (RED) {
         RED.server.on("upgrade", onUpgrade);
         upgradeHandlers[nodeId] = onUpgrade;
 
-        wsServer.on("connection", (ws) => {
+        wsServer.on("connection", (ws, request) => {
           if (isClosing) {
             ws.close();
             return;
           }
+          if (portalAuth) {
+            ws._portalUser = extractPortalUser(request.headers);
+          }
           clients.add(ws);
           updateStatus();
 
@@ -368,10 +393,14 @@ module.exports = function (RED) {
             try {
               const msg = JSON.parse(raw.toString());
               if (msg.type === "output") {
-                node.send({
+                const out = {
                   payload: msg.payload,
                   topic: msg.topic || "",
-                });
+                };
+                if (portalAuth && ws._portalUser) {
+                  out._client = ws._portalUser;
+                }
+                node.send(out);
               }
             } catch (e) {
               node.warn("Bad WS message: " + e.message);
@@ -534,7 +563,7 @@ module.exports = function (RED) {
 
   // ── Page builders ─────────────────────────────────────────────
 
-  function buildPage(title, transpiledJs, wsPath, customHead, cssHash) {
+  function buildPage(title, transpiledJs, wsPath, customHead, cssHash, user) {
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -561,14 +590,14 @@ body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a0a;color:#e0
 <div id="__cs" class="err">disconnected</div>
 <script>
 window.__NR={
-  _ws:null,_listeners:new Set(),_lastData:null,_retries:0,_wasConnected:false,
+  _ws:null,_listeners:new Set(),_lastData:null,_retries:0,_wasConnected:false,_user:${user ? escScript(JSON.stringify(user)) : 'null'},
   connect(){
     const p=location.protocol==='https:'?'wss:':'ws:';
     const ws=new WebSocket(p+'//'+location.host+'${wsPath}');
     this._ws=ws;
     const s=document.getElementById('__cs');
     ws.onopen=()=>{
-      if(this._wasConnected){location.reload();return;}
+      if(this._wasConnected){s.textContent='connected';s.className='ok';this._retries=0;return;}
       s.textContent='connected';s.className='ok';this._retries=0;this._wasConnected=true;
     };
     ws.onmessage=(e)=>{

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@aaqu/fromcubes-portal-react",
-  "version": "0.1.0-alpha.3",
-  "description": "Fromcubes Portal - React for Node-RED",
+  "version": "0.1.0-alpha.5",
+  "description": "Fromcubes Portal - React for Node-RED with Tailwind CSS and auto complete",
   "keywords": [
     "node-red",
-    "react",
     "dashboard",
     "portal",
     "jsx",