@cyprnet/node-red-contrib-uibuilder-formgen 0.4.12 → 0.5.1

package/README.md

@@ -35,9 +35,19 @@ Then restart Node-RED.
 ### Quick start
 
 1. Create a `uibuilder` instance (example URL: `form-jobapp`) and deploy.
-2. Send a schema into `uibuilder-formgen` as `msg.schema` (or use the example flow).
+2. Send a schema into `uibuilder-formgen` (legacy Vue 2) or `uibuilder-formgen-v3` (Vue 3) as `msg.schema` (or use the example flow).
 3. Open `/uibuilder/<instance>/` in your browser.
 
+### Node differences (legacy vs v3)
+
+- **`uibuilder-formgen` (legacy)**: generates portals using **Vue 2 + Bootstrap 4**
+- **`uibuilder-formgen-v3`**: generates portals using **Vue 3 + Bootstrap 5**
+
+The two portals are intentionally very similar in appearance; the difference is the runtime stack and long-term supportability.
+
+To confirm which node generated a portal, open the generated `portalsmith.runtime.json` and check:
+- `generatorNode`: `uibuilder-formgen` or `uibuilder-formgen-v3`
+
 ### Licensing (offline-first)
 
 - **Free (default)**: watermarked portal + default PortalSmith branding.

package/docs/user-guide.html

@@ -434,8 +434,14 @@
         </section>
 
         <section id="generate">
-          <h2>Generating a portal (uibuilder-formgen)</h2>
-          <p>You generate portals by sending a schema into the <code>uibuilder-formgen</code> node.</p>
+          <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>
+          <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.
+          </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>.
+          </div>
 
           <h3>Minimum input</h3>
           <pre>{

package/index.js

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

package/nodes/uibuilder-formgen-v3.html

@@ -0,0 +1,237 @@
+<script type="text/javascript">
+  RED.nodes.registerType('uibuilder-formgen-v3', {
+    category: 'PortalSmith',
+    color: '#E2D96E',
+    defaults: {
+      name: { value: "" },
+      uibuilderUrl: { value: "/uibuilder" },
+      instanceName: { value: "formgen" },
+      projectName: { value: "" },
+      uibRootDir: { value: "" },
+      instanceRootDir: { value: "" },
+      themeMode: { value: "auto" },
+      logoPath: { value: "" },
+      logoAlt: { value: "Logo" },
+      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 },
+      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-v3";
+    },
+    oneditprepare: function() {
+      var statusEl = $("#ps-license-status");
+      var timer = null;
+      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();
+    }
+  });
+</script>
+
+<script type="text/html" data-template-name="uibuilder-formgen-v3">
+<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 (Vue 3)" />
+</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>
+
+<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="(provided by CyprNet Solutions)" />
+</div>
+
+<div class="form-tips">
+  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-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 ..."}' />
+</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">
+  <strong>Runtime:</strong> Vue 3 + Bootstrap 5 (native HTML controls).<br/>
+  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-v3">
+Generates a uibuilder instance (`src/index.html`, `src/index.js`, `src/form.schema.json`) from `msg.schema`.
+
+This node generates portals using **Vue 3 + Bootstrap 5** (native HTML controls).
+</script>
+
+