@cyprnet/node-red-contrib-uibuilder-formgen 0.5.17 → 0.5.19

package/CHANGELOG.md

@@ -19,6 +19,17 @@ All notable changes to this package will be documented in this file.
 - Lookup/Auto-fill (dynamic): improved per-selection requests and pending/timeout handling to make <code>lookup:get</code> reliable.
 - Documentation: expanded <code>schema.lookups</code> formatting guidance and added dynamic lookup examples in Node-RED help + Schema Builder help.
 
+## 0.5.19
+
+- Legacy node: fixed license resolution for <code>uibuilder-formgen-uib2</code> to match other nodes and clarified the “logo disabled” warning when custom branding is not enabled by the license policy.
+
+## 0.5.18
+
+- Added <code>uibuilder-formgen-uib2</code> legacy generator for <strong>uibuilder 2.x</strong> (vendor Vue 2 + Bootstrap-Vue v2 stack).
+- Results view: added <strong>Form</strong> mode (single-record navigation) and <strong>Download Record JSON</strong>.
+- Portal UX: added submit/draft spinners with cancel/timeout behavior.
+- Safety: added <strong>Protect portal edits</strong> overwrite protection using file fingerprints stored in <code>portalsmith.runtime.json</code>.
+
 ## 0.5.17
 
 - Results view: portals now also display **generic results** sent via uibuilder (e.g. <code>msg.payload.result</code> or an array payload), not only <code>submit:ok</code>/<code>submit:error</code>.

package/docs/user-guide.html

@@ -188,7 +188,7 @@
                 <li>Validation</li>
                 <li>Draft save/load</li>
                 <li>Export JSON/CSV/HTML</li>
-                <li>Submit + Result page (Table/JSON)</li>
+                <li>Submit + Result page (Table/JSON/Form)</li>
               </ul>
             </li>
             <li><strong>Industry templates</strong>: ready-to-use example schemas (IT, HR, Banking, Healthcare, Maintenance).</li>
@@ -245,6 +245,29 @@
             <code>../uibuilder/uibuilder.iife.min.js</code>. This confirms that uibuilder v7 is installed
             and serving the client bundle.
           </div>
+
+          <h3>Legacy node (uibuilder 2.x)</h3>
+          <p>
+            If you must support older uibuilder installations, use the legacy generator node
+            <code>uibuilder-formgen-uib2</code>. This node is additive and does not change the behavior of
+            <code>uibuilder-formgen</code> (uibuilder v7 + Vue 2) or <code>uibuilder-formgen-v3</code> (Vue 3 + Bootstrap 5).
+          </p>
+
+          <h3>Legacy versions (uibuilder 2.8 baseline)</h3>
+          <ul>
+            <li><strong>node-red-contrib-uibuilder:</strong> 2.8.x (target baseline)</li>
+            <li><strong>Vue:</strong> 2.x (loaded from uibuilder <code>vendor/</code>)</li>
+            <li><strong>Bootstrap:</strong> 4.x (loaded from uibuilder <code>vendor/</code>)</li>
+            <li><strong>Bootstrap-Vue:</strong> v2.x (loaded from uibuilder <code>vendor/</code>)</li>
+            <li><strong>Browser:</strong> modern Chrome / Firefox / Edge (recommended)</li>
+          </ul>
+
+          <div class="note">
+            <strong>uibuilder 2.x sanity check:</strong>
+            For portals generated by <code>uibuilder-formgen-uib2</code>, verify that the page successfully loads
+            <code>./uibuilderfe.min.js</code> and the uibuilder vendor libraries (e.g. <code>../uibuilder/vendor/vue/...</code>).
+            This confirms that uibuilder 2.x is installed and serving the legacy frontend bundle.
+          </div>
         </section>
 
         <section id="install">
@@ -674,10 +697,18 @@ return msg;</pre>
         </section>
 
         <section id="generate">
-          <h2>Generating a portal (uibuilder-formgen / uibuilder-formgen-v3)</h2>
-          <p>You generate portals by sending a schema into either the <code>uibuilder-formgen</code> node (legacy Vue 2) or the <code>uibuilder-formgen-v3</code> node (Vue 3).</p>
+          <h2>Generating a portal (uibuilder-formgen / uibuilder-formgen-v3 / uibuilder-formgen-uib2)</h2>
+          <p>
+            You generate portals by sending a schema into one of the generator nodes:
+            <code>uibuilder-formgen</code> (Vue 2 + uibuilder v7),
+            <code>uibuilder-formgen-v3</code> (Vue 3 + Bootstrap 5),
+            or <code>uibuilder-formgen-uib2</code> (legacy uibuilder 2.x vendor stack).
+          </p>
           <div class="note ok">
-            <strong>Which one should I use?</strong> Use <code>uibuilder-formgen-v3</code> for new portals (Vue 3 + Bootstrap 5). Use <code>uibuilder-formgen</code> only for legacy compatibility.
+            <strong>Which one should I use?</strong>
+            Use <code>uibuilder-formgen-v3</code> for new portals (Vue 3 + Bootstrap 5).
+            Use <code>uibuilder-formgen</code> only when you need Vue 2 portals on uibuilder v7.
+            Use <code>uibuilder-formgen-uib2</code> only when you must support uibuilder 2.x (e.g. 2.8).
           </div>
           <div class="note">
             <strong>How to confirm which runtime generated a portal:</strong> open the generated <code>portalsmith.runtime.json</code> file and check <code>generatorNode</code>.
@@ -696,6 +727,28 @@ return msg;</pre>
     "overwrite": true
   }
 }</pre>
+
+          <h3>Protecting user customizations (important)</h3>
+          <p>
+            Regenerating a portal updates the generated <code>src/index.html</code> and <code>src/index.js</code> files to pick up new features.
+            If you (or your users) customize those files, accidental overwrites can be costly.
+          </p>
+          <ul>
+            <li>
+              <strong>Default behavior:</strong> PortalSmith enables <strong>Protect portal edits</strong> by default.
+              If it detects that <code>src/index.html</code> or <code>src/index.js</code> were modified since the last generation,
+              it will refuse to overwrite and return an error.
+            </li>
+            <li>
+              <strong>Override (use carefully):</strong> If you have a backup and intentionally want to replace the portal files,
+              send <code>msg.options.forceOverwrite=true</code> along with <code>overwrite=true</code>.
+            </li>
+          </ul>
+          <div class="note warn">
+            <strong>Recommendation:</strong> If you expect long-lived customizations, keep them in separate files
+            (for example, your own <code>custom.css</code> / <code>custom.js</code>) and avoid editing generated files directly.
+            This makes upgrades much easier.
+          </div>
         </section>
 
         <section id="customize">

package/index.js

@@ -8,6 +8,7 @@
 module.exports = function(RED) {
   require("./nodes/portalsmith-license")(RED);
   require("./nodes/uibuilder-formgen")(RED);
+  require("./nodes/uibuilder-formgen-uib2")(RED);
   require("./nodes/uibuilder-formgen-v3")(RED);
 };
 

package/nodes/uibuilder-formgen-uib2.html

@@ -0,0 +1,302 @@
+<script type="text/javascript">
+  RED.nodes.registerType('uibuilder-formgen-uib2', {
+    category: 'PortalSmith',
+    color: '#E2D96E',
+    defaults: {
+      name: { value: "" },
+      uibuilderUrl: { value: "/uibuilder" },
+      instanceName: { value: "formgen-uib2" },
+      projectName: { value: "" },
+      uibRootDir: { value: "" },
+      instanceRootDir: { value: "" },
+      themeMode: { value: "auto" },
+      logoPath: { value: "" },
+      logoAlt: { value: "Logo" },
+      logoHeight: { value: 252 },
+      logoWidth: { value: 1100 },
+      licenseConfig: { value: "", type: "portalsmith-license", required: false },
+      submitMode: { value: "uibuilder" },
+      submitUrl: { value: "" },
+      submitHeadersJson: { value: "" },
+      apiUrl: { value: "" },
+      apiMethod: { value: "POST" },
+      apiHeadersJson: { value: "" },
+      apiInsecureTls: { value: false },
+      apiTimeoutMs: { value: 15000 },
+      overwrite: { value: true },
+      protectEdits: { value: true },
+      storageMode: { value: "file", validate: function(val) { return val === "file" || val === "localstorage"; } },
+      exportFormats: { value: '["json","csv","html"]' }
+    },
+    credentials: {
+      licenseKey: { type: "password" }
+    },
+    inputs: 1,
+    outputs: 1,
+    icon: "font-awesome/fa-magic",
+    label: function() {
+      return this.name || "uibuilder-formgen-uib2";
+    },
+    oneditprepare: function() {
+      var statusEl = $("#ps-license-status");
+      var timer = null;
+      var overwriteEl = $("#node-input-overwrite");
+      var protectEl = $("#node-input-protectEdits");
+
+      function setStatus(text, cls) {
+        statusEl.removeClass("text-success text-warning text-danger text-muted");
+        if (cls) statusEl.addClass(cls);
+        statusEl.text(text);
+      }
+
+      function validate() {
+        var licenseKey = $("#node-input-licenseKey").val() || "";
+        var licenseConfigId = $("#node-input-licenseConfig").val() || "";
+        setStatus("Checking...", "text-muted");
+
+        $.ajax({
+          url: "portalsmith/license/validate",
+          type: "POST",
+          contentType: "application/json",
+          data: JSON.stringify({ licenseKey: licenseKey, licenseConfigId: licenseConfigId })
+        })
+        .done(function(resp) {
+          if (!resp || resp.ok !== true) {
+            setStatus("Unknown", "text-muted");
+            return;
+          }
+          var keyInfo = "";
+          if (resp.verifier && resp.verifier.source) {
+            keyInfo = " (key: " + resp.verifier.source + (resp.verifier.fingerprint ? " " + resp.verifier.fingerprint : "") + ")";
+          }
+          if (resp.licensed) {
+            setStatus((resp.displayName || "Licensed") + keyInfo, "text-success");
+          } else if (resp.reason && resp.reason !== "missing") {
+            setStatus("Invalid/Expired (" + resp.reason + ")" + keyInfo, "text-warning");
+          } else {
+            setStatus("Free (Watermarked)" + keyInfo, "text-muted");
+          }
+        })
+        .fail(function() {
+          setStatus("Status unavailable (deploy/restart may be needed)", "text-muted");
+        });
+      }
+
+      function scheduleValidate() {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(validate, 250);
+      }
+
+      $("#node-input-licenseKey").on("keyup change", scheduleValidate);
+      $("#node-input-licenseConfig").on("change", scheduleValidate);
+      scheduleValidate();
+
+      function maybeWarnProtectOff() {
+        try {
+          var overwriteOn = !!overwriteEl.prop("checked");
+          var protectOn = !!protectEl.prop("checked");
+          if (overwriteOn && !protectOn) {
+            var ok = confirm("Warning: You have disabled 'Protect portal edits' while Overwrite is enabled.\n\nThis can overwrite user-customized index.html/index.js.\n\nAre you sure?");
+            if (!ok) {
+              protectEl.prop("checked", true);
+            }
+          }
+        } catch (e) { /* ignore */ }
+      }
+      protectEl.on("change", maybeWarnProtectOff);
+    }
+  });
+</script>
+
+<script type="text/html" data-template-name="uibuilder-formgen-uib2">
+<div class="form-row">
+  <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+  <input type="text" id="node-input-name" placeholder="PortalSmith FormGen (uibuilder 2.x legacy)" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-uibuilderUrl"><i class="fa fa-link"></i> uibuilder base</label>
+  <input type="text" id="node-input-uibuilderUrl" placeholder="/uibuilder" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-instanceName"><i class="fa fa-folder"></i> Instance</label>
+  <input type="text" id="node-input-instanceName" placeholder="form-jobapp" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-projectName"><i class="fa fa-briefcase"></i> Project (optional)</label>
+  <input type="text" id="node-input-projectName" placeholder="my-project" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-uibRootDir"><i class="fa fa-folder-open"></i> uibuilder root dir (optional)</label>
+  <input type="text" id="node-input-uibRootDir" placeholder="/opt/node-red-home/projects/my-project/uibuilder" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-instanceRootDir"><i class="fa fa-map-marker"></i> Instance root dir (optional)</label>
+  <input type="text" id="node-input-instanceRootDir" placeholder="/opt/node-red-home/projects/my-project/uibuilder/form-jobapp" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-themeMode"><i class="fa fa-adjust"></i> Theme</label>
+  <select id="node-input-themeMode">
+    <option value="auto">Auto (prefers-color-scheme)</option>
+    <option value="light">Light</option>
+    <option value="dark">Dark</option>
+  </select>
+</div>
+
+<div class="form-row">
+  <label for="node-input-logoPath"><i class="fa fa-image"></i> Logo path (optional)</label>
+  <input type="text" id="node-input-logoPath" placeholder="Either /abs/path/to/logo.png OR just logo.png (assumes src/images/)" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-logoAlt"><i class="fa fa-font"></i> Logo alt text</label>
+  <input type="text" id="node-input-logoAlt" placeholder="Logo" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-logoHeight"><i class="fa fa-arrows-v"></i> Logo height (px)</label>
+  <input type="number" id="node-input-logoHeight" min="1" placeholder="252" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-logoWidth"><i class="fa fa-arrows-h"></i> Logo width (px)</label>
+  <input type="number" id="node-input-logoWidth" min="1" placeholder="1100" />
+</div>
+
+<hr/>
+<div class="form-row">
+  <strong>Licensing (offline-first)</strong>
+</div>
+
+<div class="form-row">
+  <label for="node-input-licenseConfig"><i class="fa fa-id-card"></i> License (shared config)</label>
+  <input type="text" id="node-input-licenseConfig" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-licenseKey"><i class="fa fa-key"></i> License Key (optional)</label>
+  <input type="password" id="node-input-licenseKey" placeholder="PSLF1.<payload>.<signature>" />
+</div>
+
+<div class="form-tips">
+  This legacy node generates portals compatible with <strong>uibuilder 2.x</strong> (vendor Vue 2 + Bootstrap-Vue v2 + <code>uibuilderfe.min.js</code>). Leave license fields blank to run in <strong>Free (Watermarked)</strong> mode.
+</div>
+
+<div class="form-row">
+  <label>License Status</label>
+  <span id="ps-license-status" class="text-muted">Free (Watermarked)</span>
+</div>
+
+<div class="form-row">
+  <label for="node-input-overwrite"><i class="fa fa-refresh"></i> Overwrite</label>
+  <input type="checkbox" id="node-input-overwrite" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-protectEdits"><i class="fa fa-shield"></i> Protect portal edits</label>
+  <input type="checkbox" id="node-input-protectEdits" />
+</div>
+
+<div class="form-tips">
+  <strong>Recommended:</strong> Keep <strong>Protect portal edits</strong> enabled. If a user modified <code>src/index.html</code> or <code>src/index.js</code>,
+  regeneration will refuse to overwrite to avoid data loss. You can override once by sending <code>msg.options.forceOverwrite=true</code>.
+</div>
+
+<div class="form-row">
+  <label for="node-input-storageMode"><i class="fa fa-hdd-o"></i> Storage</label>
+  <select id="node-input-storageMode">
+    <option value="file">File (recommended)</option>
+    <option value="localstorage">Browser localStorage</option>
+  </select>
+</div>
+
+<div class="form-row">
+  <label for="node-input-exportFormats"><i class="fa fa-download"></i> Export Formats (JSON array)</label>
+  <input type="text" id="node-input-exportFormats" placeholder='["json","csv","html"]' />
+</div>
+
+<div class="form-row">
+  <label for="node-input-submitMode"><i class="fa fa-paper-plane"></i> Submit mode</label>
+  <select id="node-input-submitMode">
+    <option value="uibuilder">uibuilder message (default)</option>
+    <option value="http">HTTP POST (API / Node-RED http in)</option>
+  </select>
+</div>
+
+<div class="form-row">
+  <label for="node-input-submitUrl"><i class="fa fa-globe"></i> Submit URL (http mode)</label>
+  <input type="text" id="node-input-submitUrl" placeholder="e.g. /api/forms/submit or https://api.example.com/submit" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-submitHeadersJson"><i class="fa fa-code"></i> Submit headers (JSON, optional)</label>
+  <input type="text" id="node-input-submitHeadersJson" placeholder='e.g. {"Authorization":"Bearer ...","X-Org":"CyprNet"}' />
+</div>
+
+<hr/>
+<div class="form-row">
+  <strong>Server-side API proxy (for uibuilder submit)</strong>
+</div>
+
+<div class="form-row">
+  <label for="node-input-apiUrl"><i class="fa fa-exchange"></i> API URL</label>
+  <input type="text" id="node-input-apiUrl" placeholder="https://api.example.com/submit (leave blank to just emit submit msg)" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-apiMethod"><i class="fa fa-bolt"></i> API method</label>
+  <select id="node-input-apiMethod">
+    <option value="POST">POST</option>
+    <option value="PUT">PUT</option>
+    <option value="PATCH">PATCH</option>
+  </select>
+</div>
+
+<div class="form-row">
+  <label for="node-input-apiHeadersJson"><i class="fa fa-code"></i> API headers (JSON, optional)</label>
+  <input type="text" id="node-input-apiHeadersJson" placeholder='e.g. {"Authorization":"Bearer ..."}' />
+</div>
+
+<div class="form-row">
+  <label for="node-input-apiInsecureTls"><i class="fa fa-shield"></i> Allow insecure TLS (self-signed)</label>
+  <input type="checkbox" id="node-input-apiInsecureTls" />
+</div>
+
+<div class="form-row">
+  <label for="node-input-apiTimeoutMs"><i class="fa fa-clock-o"></i> API timeout (ms)</label>
+  <input type="number" id="node-input-apiTimeoutMs" min="1000" step="500" placeholder="15000" />
+</div>
+
+<div class="form-tips">
+  Input: <code>msg.schema</code> (required), optional <code>msg.uibuilder</code>, <code>msg.options</code><br/>
+  Output: generated file list + URL
+</div>
+</script>
+
+<script type="text/markdown" data-help-name="uibuilder-formgen-uib2">
+Generates a uibuilder instance (`src/index.html`, `src/index.js`, `src/form.schema.json`) from `msg.schema`.
+
+This is a **legacy generator** intended for users running **uibuilder 2.x**.
+It generates a portal that loads the uibuilder 2.x vendor stack (Socket.IO + Vue 2 + Bootstrap-Vue v2) and uses `uibuilderfe.min.js`.
+
+**Schema compatibility**
+- Uses the **same PortalSmith schema** as the main nodes and is compatible with the Schema Builder output.
+
+**Licensing**
+- Free mode is fully functional but **watermarked** and **custom branding/logo is disabled**.
+- Licensing is **offline-first** (no phone-home). Keys are stored in the Node-RED credentials store.
+
+**Paths**
+- Default: `${userDir}/uibuilder/<instance>/src/`
+- Optional overrides (highest priority first): `instanceRootDir`, `uibRootDir`, `projectName`.
+
+**Note**
+- This node does not change the behavior of `uibuilder-formgen` (Vue 2 + uibuilder v7) or `uibuilder-formgen-v3` (Vue 3 + Bootstrap 5).
+</script>
+
+