Bug fix release

• Fix for Issue #100 - Detection of whether Node-RED is currently using https.
• Fix for Issue #93 - Full screen editor doesn't work correctly for mobile users. Replaced custom code with equivalent feature from core.
• Remove test code from uibuilder.html

Long Overdue

Summary

As this contains rather a lot of changes, here is a summary of the key changes for users of the node. The details are in the following sections.

• Breaking Changes

  • Minimum Node-RED version is now 1.0
  • Minimum Node.js version is 10
  • IE11 and other older browsers now no longer guaranteed to work. All modern browsers including mobile and Microsoft Edge (Chromium) should work.

• New feature in uibuilderfe to be able to transparently feed data and configuration to VueJS components written to be compatible.

• New feature in uibuilderfe to be able to transparently create notification popovers (toasts) by sending a msg from Node-RED (no code needed).

• New security documentation - still evolving for the experimental security features

• vue and bootstrap-vue packages can now be removed (NB: if uibuilder previously installed, you need to remove and reinstall for this to be possible)

• Scoped packages can now be added and removed

• Improved Editor configuration panel layout for Advanced Settings

• Some simplification of the default VueJS JavaScript template. Makes it a little easier to read.

• New template file <uibRoot>/.config/security.js - used to give you control over the security process, please read the caveats before attempting to use in this version. Do not use in a live environment, for development only right now.

New

• By sending a msg from Node-RED with a pre-defined format, you can interact with VueJS with minimal or no front-end code

  • With no code at all, you can show a popover notification (toast) to the web page.

  • With as little as a single line of HTML, you can control and send values to a custom uibuilder compatible VueJS component.

    Suitable components are in development. See the experimental module uibuilder-vuejs-component-extras for some example components. Specifically the <gauge> component which is being developed as an exemplar and will be moved to a separate npm module at some point.

    The idea being to bridge some of the gap between the ease of use of Node-RED's Dashboard and the flexibility of uibuilder. Without needing to be a web development expert.

    This will be further enhanced in future releases

  • NOTE To use the Vue features, you need to pass a reference to your Vue app to uibuilder.
    This is normally as simple as changing uibuilder.start() to uibuilder.start(this)

  • This feature does not currently work with all Vue components. See the docs for an alternate low-code version.

• Moved pre-installed VueJS and bootstrap-vue to be installed into <userDir> instead of into the uibuilder package folder.

  This allows the vue and bootstrap-vue packages to be uninstalled like everything else and resolves Issue #75.

  Note that, at present, I have not added any clever code to remove the old installations of vue and bootstrap-vue. If you want to get them into the right place, remove and re-add uibuilder. Note that you don't need to do anything unless you want to be able to remove vue and bootstrap-vue.

• uibuilderfe: Added msg._socketId to sent messages.

• Added security documentation (Work in progress).

  Read these to understand how to use uibuilder security and how it works (respectively).

  uibuilder Security Documentation and security.js Technical Documentation.

• Added new VueJS documentation Vue Component Handling.

Changed

• Documentation: Greatly improved documentation coverage in the /docs folder. This contains a lot of developer documentation which should make it easier to work on improvements to uibuilder in the future. Still a work in progress.
• Documentation now uses Docsify for presentation and easier reading. Open ./docs/index.html in your browser.
• Editor: Tidy up the Advanced Settings section of the configuration panel.
• uibuilderfe: Internal improvements to get/set functions.
• uibuilderfe: Simplify default Vue templates.
• Further code tidy up.
• Add code isolation to Editor config code to prevent namespace clashes.
• Improve standardisation of output topic.
• Moved some serveStatic code back to instance level to allow caching to be changed by config.
• Changed palette category name from "UI Builder" to "uibuilder" and palette label to "uibuilder" from "UI Builder" for consistency with other nodes.
• Moved all front-end master code (e.g. nodes/src and nodes/dist) to new top-level folder front-end & refactored uibuilder.js accordingly. Folder references also changed to new properties in the uib variable.
• Moved the templates folder from nodes to its own top-level folder and refactored uibuilder.js accordingly. The folder reference is held in the uib.masterTemplateFolder variable.
• Change minify of uibuilderfe from uglify-js to bable-minify because uglify-js does not support ES6+

Fixed

• Running behind a proxy was causing Socket.IO namespace issues (see Issue #84
  Removing httpRoot from the namespace should fix that. It is no longer required anyway since url uniqueness checks were added.

Experimental and partially working new features

WARNING: Consider these features experimental, some parts may not work and might even cause Node-RED to crash if used. Do not yet use on production.

Leave the security flag OFF for production.

NOT YET FULLY WORKING

• Added configuration option to add browser/proxy caching control to all static assets - set the length of time before assets will be reloaded from the server. This may sometimes significantly improve performance in the browser. It depends on the performance of your server and the complexity of the UI.

  Added on options variable for serve-static to allow control of caching & other headers. uib.staticOpts.

  Some static folders are served at module level and so don't have access to instance settings. Would likely need to have different settings on global serves from instance ones. Needs more thought.

  This lets you control caching of your "static" assets like JavaScript, HTML, CSS, Images and any installed front-end library resources (Vue, etc).

  Note that this is not for caching the msg's coming through the node, see the caching examples in the WIKI for that.

• If you use Node-RED's projects feature, restart Node-RED after changing projects otherwise uibuilder will not recognise the new root folder location.

New security features

Summary

Security is mostly controlled via websocket messages, not by HTTP. The web UI itself is assumed to be non-sensitive. Only msg transfer is controlled. Read the security document for details. Don't put anything sensitive into your front-end code.

• Security features can be turned on via a flag in the node configuration. They are off by default.

• If running in Production mode but without using TLS encryption, the security won't turn on. This is to stop you sending secure information in plain-text over the wire. In Development mode, you will get a warning.

• Added a new standardised property to uibuilder control msg's. msg._auth. This contains all the necessary data for logon and ongoing session maintenance. As a minimum, this must contain an id property which uniquely identifies the user. It will also contain the JWT token since websockets don't allow custom headers.

• Security does use JWT but only as a convenience. JWT is NOT a security feature (despite what much of the web would have you believe). Session processing is required if you want real security. Again, see the security doc for details.

• Logon/logoff processing is done from the front-end using new logon() and logoff() functions in uibuilderfe.

• Logon/logoff and logon failure events are reported via uibuilder's control port (output port #2).

• Added security headers to protect against XSS and content sniffing.

• All custom security processing (validating user details - including password - and session validation/extension) is done via standard functions in the new <uibRoot>/.config/security.js file. A simple template is provided for you to use as a starting point. You can also override this with custom processing for a single instance by using <uibRoot>/<url>/security.js.

Details

• uibuilderfe: Added .logon(...) and .logoff() functions.

  The logon function takes a single parameter which must be an Object (schema not yet finalised).
  At the least, it MUST contain an id property which will be used by the server to track sessions.

  Added new variables to the uibuilder object for use in your front-end code:

  • isAuthorised {boolean} - informs whether the current client connection is authenticated.
  • authTokenExpiry {Date|null} - when the authentication token expires.
  • authData {Object} - Additional data returned from logon/logoff requests. Can be used by front-end to display messages at logon/off or anything else desired.
  • authToken {String} - this is not externally accessible. It is sent back to the server on every msg sent and validated by the server.

  Added new control message types:

  • 'authorised' - received from server after a successful logon request. Returns the token, expiry and any optional additional data (into authData).
  • 'authorisation failure' - received from server after an unsuccessful logon request.
  • 'logged off' - received from server after a successful logoff request. Returns optional additional data (into authData).

• Added useSecurity flag. If set,...

Fix for Issue #84 - simplifies the Socket.IO namespace

New

• Add a middleware JavaScript module file to allow use of socket.use. The new <uibRoot>/.config/sioUse.js file exports a single function.
  The function is called everytime the uibuilder node receives a message from a client. If the next() callback function is called with a new Error('err message')
  parameter, that is passed back to the client.

• uibuilderfe: Add socket.io error event handler - outputs a console warning message so switch on debug to see it.

  The Socket.IO server will send an error message if the socket.use middleware (see above) calls next( new Error('err message') )

  Add your own event handler to do something useful with the message.

  Typical use is to handle data errors or even authorisation failures.

• Add X-XSS-Protection: 1;mode=block and X-Content-Type-Options: nosniff security headers.

  If you want to add your own headers, make use of the uibMiddleware.js (for ExpressJS) and sioMiddleware.js (for Socket.IO initial connection and polling connections) middleware files.

Changed

• Further code tidy up.
• Move configuration template files from templates root to templates/.config and reduce copy processes down to just copying the folder with no overwrite
• Removed httpRoot from Socket.IO namespace. No longer required now that uniqueness checks are done on URL config. Simplifies configuration.

Fixed

• Issue #84 Proxy rewrites were messing with the Socket.IO namespace.
  Many thanks to Vinay Kharecha for reporting.

Minor bugfix and tweaks

Fixed

• Improved detection for projects. Previously if projects had been in use and were then disabled, uibuilder would still think them active.

Changed

• Add a new example to the library: cacheByTopic - A simple caching example that uses a function node to cache the last msg for each topic & replay them when a client connects.
• Improved initial debug msg in the front-end (if debug=true), shows versions and whether the minimised version of uibuilderfe is in use.
• Code safety improvements and tidy up.
• Slight tweak to the default template (VueJS). The button now has an ID and the increment function prints out the event object to console.

Fix for Issue #73

2.0.5 - 2019-10-04

Fixed

• Issue #73 Cannot read property 'endsWith' of undefined in uibuilderfe.js - added extra zero-length checks. Thanks to Scott Page - IndySoft for the fix.

Changed

• Further improvements to changelog format & fixes to formatting.
• Switch round some properties in package.json to make it easier to read.

New major version - BIG changes!

The list of changes between v1 and v2 is very large, please check out the README and the CHANGELOG and their pointers to further details.

Please note that you will need node.js v8.16 or above to make use of the new version. You will also need a reasonably up-to-date version of Node-RED.

If you have been using builder v1, please take careful note of the breaking changes. You will need to do some minor changes to code and configuration when moving up to v2 I'm afraid.

If you need a flexible web app that uses Node-RED to do the heavy lifting and communications, then please do check out uibuilder 62.

There were several drives for such a large rewrite:

• Tidy up and simplify the code-base making it more efficient and robust
• Make the code more maintainable and flexible
• Deliver key new features not previously feasible:
  • Built-in code editor
  • Built-in package installer
  • Simplified and improved configuration options
  • Support for Node-RED projects
  • Move from jQuery to VueJS for the default template
• Open up options for improved security
  • Open up the code to enable future improvements, including
  • Further security enhancements
  • Provide a "build" step for your custom front-end code
  • And much more

From the readme, here is a summary of the features of uibuilder v2:

• Designed as an alternative to the Node-RED official Dashboard. Without the overheads and restrictions.

• Control everything from the Node-RED admin ui. Edit your front-end resource files, manage front-end packages. No need to access the servers command line.

• Installs VueJS and bootstrap-vue by default giving you a very easy start with minimal boiler-plate.

• Have as many custom user interfaces as you want. Just 1 node is needed for each entry point. Use link nodes to send data from other parts of your flows.

• Has a control interface separate to the message interface. Know when a browser connects or disconnects, send cached data.

• Much lighter in weight and more mobile friendly than the Node-RED official Dashboard (assuming you don't use Angular as your framework).

• Finds these front-end framework packages automatically and makes them available: vue, bootstrap, bootstrap-vue, jquery, moonjs, reactjs, riot, angular, picnic,umbrellajs (note this list may expand).

• Use any front-end framework you like. Tested with at least JQuery, VueJS 2, MoonJS 2, REACT 2, UmbrellaJS and Riot.

• Use without any front-end framework if you like. Keep it light and simple.

• The included front-end library provides connectivity to Node-RED and msg event handling.

• Write your own HTML, CSS and JavaScript to define the perfect front-end user interface for your needs.

• Edit your custom front-end code from within the Node-RED Editor, little to no need for access to the server's filing system.

• Needs almost no boilerplate in your front-end code in order to work.

• Simple included example works out-of-the-box, no need to install anything other than the node.

• VueJS, MoonJS extended and caching example flows included.

• Optional index web page listing of available files.