node-red-contrib-aedes/aedes.html

Node Red MQTT broker node based on aedes.js

<!--
  Copyright 2013,2014 IBM Corp.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/html" data-template-name="aedes broker">
  <div class="form-row">
      <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
      <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
  </div>
  <div class="form-row">
      <ul style="min-width: 600px; margin-bottom: 20px;" id="node-config-aedes-broker-tabs"></ul>
  </div>
  <div id="node-config-aedes-broker-tabs-content" style="min-height:150px;">
      <div id="aedes-broker-tab-connection" style="display:none">
          <div class="form-row">
              <label for="node-input-mqtt_port"><i class="fa fa-globe"></i> <span
                      data-i18n="aedes-mqtt-broker.label.mqtt_port"></span></label>
              <input type="text" id="node-input-mqtt_port"
                  data-i18n="[placeholder]aedes-mqtt-broker.placeholder.mqtt_port">
          </div>
          <div class="form-row">
              <label for="node-input-mqtt_ws_bind"><i class="fa fa-globe"></i> WS bind</label>
              <select id="node-input-mqtt_ws_bind" type="text" style="width:30%" text-center>
                  <option value="path" default>path</option>
                  <option value="port">port</option>
              </select>
          </div>
          <div class="form-row" id="node-input-mqtt_ws_path-label">
              <label for="node-input-mqtt_ws_path"><i class="fa fa-globe"></i> <span
                      data-i18n="aedes-mqtt-broker.label.mqtt_ws_path"></label>
              <input type="text" id="node-input-mqtt_ws_path"
                  data-i18n="[placeholder]aedes-mqtt-broker.placeholder.mqtt_ws_path">
          </div>
          <div class="form-row" id="node-input-mqtt_ws_port-label">
              <label for="node-input-mqtt_ws_port"><i class="fa fa-globe"></i> <span
                      data-i18n="aedes-mqtt-broker.label.mqtt_ws_port"></label>
              <input type="text" id="node-input-mqtt_ws_port"
                  data-i18n="[placeholder]aedes-mqtt-broker.placeholder.mqtt_ws_port">
          </div>
          <div class="form-row">
              <input type="checkbox" id="node-input-usetls"
                  style="display: inline-block; width: auto; vertical-align: top;">
              <label for="node-input-usetls" style="width: auto" data-i18n="aedes-mqtt-broker.label.use-tls"></label>
              <div id="node-input-tls" class="hide">
                  <div class="form-row" id="node-row-uselocalfiles">
                      <input type="checkbox" id="node-input-uselocalfiles"
                          style="display: inline-block; width: auto; vertical-align: top;">
                      <label for="node-input-uselocalfiles" style="width: 70%;"><span
                              data-i18n="aedes-mqtt-broker.label.use-local-files"></label>
                  </div>

                  <div class="form-row">
                      <label style="width: 120px;"><i class="fa fa-file-text-o"></i> <span
                              data-i18n="aedes-mqtt-broker.label.cert"></span></label>
                      <span class="tls-input-data">
                          <label class="red-ui-button" for="node-input-certfile"><i class="fa fa-upload"></i> <span
                                  data-i18n="aedes-mqtt-broker.label.upload"></span></label>
                          <input class="hide" type="file" id="node-input-certfile">
                          <span id="tls-certname"
                              style="width: calc(100% - 280px); overflow: hidden; line-height:34px; height:34px; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle;">
                          </span>
                          <button type="button" class="red-ui-button red-ui-button-small" id="tls-button-cert-clear"
                              style="margin-left: 10px"><i class="fa fa-times"></i></button>
                      </span>
                      <input type="hidden" id="node-input-certname">
                      <input type="hidden" id="node-input-certdata">
                      <input class="hide tls-input-path" style="width: calc(100% - 170px);" type="text"
                          id="node-input-cert" data-i18n="[placeholder]aedes-mqtt-broker.placeholder.cert">
                  </div>

                  <div class="form-row">
                      <label style="width: 120px;" for="node-input-key"><i class="fa fa-file-text-o"></i> <span
                              data-i18n="aedes-mqtt-broker.label.key"></span></label>
                      <span class="tls-input-data">
                          <label class="red-ui-button" for="node-input-keyfile"><i class="fa fa-upload"></i> <span
                                  data-i18n="aedes-mqtt-broker.label.upload"></span></label>
                          <input class="hide" type="file" id="node-input-keyfile">
                          <span id="tls-keyname"
                              style="width: calc(100% - 280px); overflow: hidden; line-height:34px; height:34px; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle;">
                          </span>
                          <button type="button" class="red-ui-button red-ui-button-small" id="tls-button-key-clear"
                              style="margin-left: 10px"><i class="fa fa-times"></i></button>
                      </span>
                      <input type="hidden" id="node-input-keyname">
                      <input type="hidden" id="node-input-keydata">
                      <input class="hide tls-input-path" style="width: calc(100% - 170px);" type="text"
                          id="node-input-key" data-i18n="[placeholder]aedes-mqtt-broker.placeholder.key">
                  </div>

                  <div class="form-row">
                      <label style="width: 120px;" for="node-input-ca"><i class="fa fa-file-text-o"></i> <span
                              data-i18n="aedes-mqtt-broker.label.ca"></span></label>
                      <span class="tls-input-data">
                          <label class="red-ui-button" for="node-input-cafile"><i class="fa fa-upload"></i> <span
                                  data-i18n="aedes-mqtt-broker.label.upload"></span></label>
                          <input class="hide" type="file" title=" " id="node-input-cafile">
                          <span id="tls-caname"
                              style="width: calc(100% - 280px); overflow: hidden; line-height:34px; height:34px; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle;">
                          </span>
                          <button type="button" class="red-ui-button red-ui-button-small" id="tls-button-ca-clear"
                              style="margin-left: 10px"><i class="fa fa-times"></i></button>
                      </span>
                      <input type="hidden" id="node-input-caname">
                      <input type="hidden" id="node-input-cadata">
                      <input class="hide tls-input-path" style="width: calc(100% - 170px);" type="text" id="node-input-ca"
                          data-i18n="[placeholder]aedes-mqtt-broker.placeholder.ca">
                  </div>
              </div>
          </div>
      </div>
      <div id="aedes-broker-tab-persistence" style="display:none">
          <div class="form-row">
              <label for="node-input-persistence_bind"><i class="fa fa-globe"></i> <span
                      data-i18n="aedes-mqtt-broker.label.persistence_bind"></label>
              <select id="node-input-persistence_bind" type="text" style="width:30%" text-center>
                  <option value="memory" data-i18n="aedes-mqtt-broker.label.persistence_memory" default></option>
                  <option value="mongodb" data-i18n="aedes-mqtt-broker.label.persistence_mongodb"></option>
             <!--     <option value="level" data-i18n="aedes-mqtt-broker.label.persistence_level"></option> -->
              </select>
          </div>
          <div class="form-row" id="node-row-dburl" class="hide">
              <label for="node-input-dburl"><i class="fa fa-database"></i> <span
                      data-i18n="aedes-mqtt-broker.label.dburl"></label>
              <input type="text" id="node-input-dburl" data-i18n="[placeholder]aedes-mqtt-broker.placeholder.dburl">
          </div>
      </div>
      <div id="aedes-broker-tab-security" style="display:none">
          <div class="form-row">
              <label for="node-input-username"><i class="fa fa-user"></i> <span
                      data-i18n="node-red:common.label.username"></span></label>
              <input type="text" id="node-input-username" data-i18n="[placeholder]aedes-mqtt-broker.placeholder.username">
          </div>
          <div class="form-row">
              <label for="node-input-password"><i class="fa fa-lock"></i> <span
                      data-i18n="node-red:common.label.password"></span></label>
              <input type="password" id="node-input-password"
                  data-i18n="[placeholder]aedes-mqtt-broker.placeholder.password">
          </div>
      </div>
  </div>
</script>

<script type="text/javascript">
  RED.nodes.registerType('aedes broker', {
    category: 'network',
    defaults: {
      name: { value: '' },
      mqtt_port: { value: 1883, validate: RED.validators.number() },
      mqtt_ws_bind: { value: 'port', required: true },
      mqtt_ws_port: { value: null, required: false, validate: RED.validators.number(true) },
      mqtt_ws_path: { value: '', required: false },
      cert: {
        value: '',
        validate: function (v) {
          var currentKey = $('#node-input-key').val();
          if (currentKey === undefined) {
            currentKey = this.key;
          }
          return currentKey === '' || v !== '';
        }
      },
      key: {
        value: '',
        validate: function (v) {
          var currentCert = $('#node-input-cert').val();
          if (currentCert === undefined) {
            currentCert = this.cert;
          }
          return currentCert === '' || v !== '';
        }
      },
      ca: {value:""},
      certname: { value: '' },
      keyname: { value: '' },
      caname: {value:""},
      persistence_bind: { value: 'memory', required: true },
      dburl: { value: '', required: false },
      usetls: { value: false }
    },
    credentials: {
      username: { type: 'text' },
      password: { type: 'password' },
      certdata: { type: 'text' },
      keydata: { type: 'text' },
      cadata: {type:"text"}
    },
    color: '#d8bfd8',
    inputs: 0,
    outputs: 2,
    icon: 'aedes.png',
    label: function () {
      return this.name || 'Aedes MQTT broker';
    },
    labelStyle: function () {
      return this.name ? 'node_label_italic' : '';
    },
    outputLabels: ['events', 'publish'],
    oneditprepare: function () {
      var tabs = RED.tabs.create({
        id: 'node-config-aedes-broker-tabs',
        onchange: function (tab) {
          $('#node-config-aedes-broker-tabs-content').children().hide();
          $('#' + tab.id).show();
        }
      });
      tabs.addTab({
        id: 'aedes-broker-tab-connection',
        label: this._('aedes-mqtt-broker.tabs-label.connection')
      });
      tabs.addTab({
        id: 'aedes-broker-tab-persistence',
        label: this._('aedes-mqtt-broker.tabs-label.persistence')
      })
      tabs.addTab({
        id: 'aedes-broker-tab-security',
        label: this._('aedes-mqtt-broker.tabs-label.security')
      });
      setTimeout(function () {
        tabs.resize();
      }, 0);

      if (typeof this.mqtt_ws_bind === 'undefined') {
        this.mqtt_ws_bind = 'port';
        $('#node-input-mqtt_ws_bind').text('Port');
      }
      $('#node-input-mqtt_ws_bind').on('change', function () {
        var wsPathLabel = $('#node-input-mqtt_ws_path-label');
        var wsPortLabel = $('#node-input-mqtt_ws_port-label');
        switch ($(this).val()) {
          case 'path':
            wsPathLabel.show();
            wsPortLabel.hide();
            break;
          case 'port':
            wsPathLabel.hide();
            wsPortLabel.show();
            break;
          default:
            wsPathLabel.hide();
            wsPortLabel.show();
            break;
        }
      });

      const persistenceInput = $('#node-input-persistence_bind');
      const dburlRow = $('#node-row-dburl');
      const dburl = this.dburl;
      persistenceInput.on('change', function () {
        switch ($(this).val()) {
          case 'memory':
            dburlRow.hide();
            break;
          case 'mongodb':
            dburlRow.show();
            break;
          case 'level':
            dburlRow.hide();
            break;
          case null:
            if (dburl) {
              this.persistence_bind = 'mongodb';
              persistenceInput.val('mongodb');
              dburlRow.show();
            } else {
              this.persistence_bind = 'memory';
              persistenceInput.val('memory');
              dburlRow.hide();
            }
            break;
        }
      });

      if (typeof this.usetls === 'undefined') {
        this.usetls = false;
        $('#node-input-usetls').prop('checked', false);
      }
      function updateTLSOptions() {
        if ($('#node-input-usetls').is(':checked')) {
          $('#node-input-tls').show();
        } else {
          $('#node-input-tls').hide();
        }
      }

      updateTLSOptions();

      function saveFile(property, file) {
        var dataInputId = '#node-input-' + property + 'data';
        var filenameInputId = '#node-input-' + property + 'name';
        var filename = file.name;
        var reader = new FileReader();
        reader.onload = function (event) {
          $('#tls-' + property + 'name').text(filename);
          $(filenameInputId).val(filename);
          $(dataInputId).val(event.target.result);
        };
        reader.readAsText(file, 'UTF-8');
      }
      $('#node-input-usetls').on('click', function () {
        updateTLSOptions();
      });
      $('#node-input-certfile').on('change', function () {
        saveFile('cert', this.files[0]);
      });
      $('#node-input-keyfile').on('change', function () {
        saveFile('key', this.files[0]);
      });
      $("#node-input-cafile" ).on("change", function() {
        saveFile("ca", this.files[0]);
      });
      function clearNameData(prop) {
        $('#tls-' + prop + 'name').text('');
        $('#node-input-' + prop + 'data').val('');
        $('#node-input-' + prop + 'name').val('');
      }
      $('#tls-button-cert-clear').on('click', function () {
        clearNameData('cert');
      });
      $('#tls-button-key-clear').on('click', function () {
        clearNameData('key');
      });
      $("#tls-config-button-ca-clear").on("click", function() {
        clearNameData("ca");
      });

      function updateFileUpload() {
        if ($("#node-input-uselocalfiles").is(':checked')) {
          $(".tls-input-path").show();
          $(".tls-input-data").hide();
        } else {
          $(".tls-input-data").show();
          $(".tls-input-path").hide();
        }
      }
      $("#node-input-uselocalfiles").on("click",function() {
        updateFileUpload();
      });
      if(this.cert || this.key || this.ca) {
        $("#node-input-uselocalfiles").prop('checked',true);
      }
      $('#tls-certname').text(this.certname);
      $('#tls-keyname').text(this.keyname);
      $('#tls-caname').text(this.caname);
      updateFileUpload();
    },
    oneditsave: function () {
      if (!$('#node-input-usetls').is(':checked')) {
        $('#node-input-tls').val('');
      }
      if ($("#node-input-uselocalfiles").is(':checked')) {
          clearNameData("ca");
          clearNameData("cert");
          clearNameData("key");
      } else {
          $("#node-input-ca").val("");
          $("#node-input-cert").val("");
          $("#node-input-key").val("");
      }
    }
  });
</script>