oauth2.html

<script type="text/html" data-template-name="oauth2">
  <!-- node-input-name -->
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="oauth2.label.name"></span></label>
    <input type="text" id="node-input-name" data-i18n="[placeholder]oauth2.placeholder.name" style="width:70%;">
  </div>
  <!-- node-input-container -->
  <div class="form-row">
    <label for="node-input-container"><i class="fa fa-ellipsis-h"></i> <span data-i18n="oauth2.label.container"></span></label>
    <input type="text" id="node-input-container" data-i18n="[placeholder]oauth2.placeholder.container" style="width:70%;"/>
  </div>
  <!-- node-input-grant_type -->
  <div class="form-row">
    <label for="node-input-grant_type"><i class="fa fa-wrench"></i> <span data-i18n="oauth2.label.grant_type"></span></label>
    <select type="text" id="node-input-grant_type" style="width:70%;">
      <option value="client_credentials" data-i18n="oauth2.opts.client_credentials"></option>
      <option value="password" data-i18n="oauth2.opts.password_credentials"></option>
      <option value="set_by_credentials" data-i18n="oauth2.opts.set_by_credentials"></option>
    </select>
  </div>
  <!-- node-access_token_url -->
  <div class="form-row" id="node-access_token_url">
    <label for="node-input-access_token_url"><i class="fa fa-link fa-fw"></i> <span data-i18n="oauth2.label.access_token_url"></span></label>
    <input type="text" id="node-input-access_token_url" data-i18n="[placeholder]oauth2.placeholder.access_token_url" style="width:70%;">
  </div>
  <!-- node-password_credentials -->
  <div class="form-row" id="node-password_credentials">
    <!--node-input-username -->
    <div class="form-row">
      <label for="node-input-username"><i class="fa fa-user fa-fw"></i> <span data-i18n="oauth2.label.username"></span></label>
      <input type="text" id="node-input-username" data-i18n="[placeholder]oauth2.placeholder.username" style="width:70%;">
    </div>
    <!-- node-input-password -->
    <div class="form-row">
      <label for="node-input-password"><i class="fa  fa-lock fa-fw"></i> <span data-i18n="oauth2.label.password"></span></label>
      <input type="password" id="node-input-password" data-i18n="[placeholder]oauth2.placeholder.password" style="width:70%;">
    </div>
  </div>
  <!-- node-client_id -->
  <div class="form-row" id="node-client_id">
    <label for="node-input-client_id"><i class="fa fa-user fa-fw"></i> <span data-i18n="oauth2.label.client_id"></span></label>
    <input type="text" id="node-input-client_id" data-i18n="[placeholder]oauth2.placeholder.client_id" style="width:70%;">
  </div>
  <!-- node-client_secret -->
  <div class="form-row" id="node-client_secret">
    <label for="node-input-client_secret"><i class="fa fa-lock fa-fw"></i> <span data-i18n="oauth2.label.client_secret"></span></label>
    <input type="password" id="node-input-client_secret" data-i18n="[placeholder]oauth2.placeholder.client_secret" style="width:70%;">
  </div>
  <!-- node-scope -->
  <div class="form-row" id="node-scope">
      <label for="node-input-scope"><i class="fa fa-code fa-fw"></i> <span data-i18n="oauth2.label.scope"></span></label>
      <input type="text" id="node-input-scope" data-i18n="[placeholder]oauth2.placeholder.scope" style="width:70%;">
  </div>
  <!-- node-input-headers-container -->
  <div class="form-row" style="margin-bottom:0;">
      <label><i class="fa fa-list"></i> <span data-i18n="oauth2.placeholder.headers"></span></label>
  </div>
  <div class="form-row node-input-headers-container-row">
      <ol id="node-input-headers-container"></ol>
  </div>
</script>

<!-- text/javascript -->
<script type="text/javascript">
  (function() {
    var headerTypes = [
      {value:"content-type",label:"Content-Type",hasValue: false},
      {value:"location",label:"Location",hasValue: false},
      {value:"other",label:RED._("node-red:httpin.label.other"),icon:"red/images/typedInput/az.png"}
    ]
    var contentTypes = [
      {value:"application/json",label:"application/json",hasValue: false},
      {value:"application/xml",label:"application/xml",hasValue: false},
      {value:"text/css",label:"text/css",hasValue: false},
      {value:"text/html",label:"text/html",hasValue: false},
      {value:"text/plain",label:"text/plain",hasValue: false},
      {value:"image/gif",label:"image/gif",hasValue: false},
      {value:"image/png",label:"image/png",hasValue: false},
      {value:"other",label:RED._("node-red:httpin.label.other"),icon:"red/images/typedInput/az.png"}
    ];
    RED.nodes.registerType("oauth2", {
    category: 'DevSecOps',
    color: "#fff",
    defaults: {
      name: {
      value: ""},
      container: {value: "oauth2Response"},
      access_token_url: {value: ""},
      grant_type: {value: "set_by_credentials"},
      username: {value: ""},
      password: {value: ""},
      client_id: {value: ""},
      client_secret: {value: ""},
      scope: {value: ""},
      headers: {value:{}}
    },
    inputs: 1,
    outputs: 1,
    icon: "oauth2.svg",
    label: function () {
      return this.name || this._("oauth2.oauth2");
    },
    labelStyle: function () {
      return this.name ? "node_label_italic" : "";
    },
    oneditprepare: function () 
    {
      if (this.container === undefined) {
        $("#node-input-container").val("payload");
      }
      $("#node-input-container").typedInput({default: 'msg', types: ['msg']});
      $("#node-input-grant_type").on("change", function () {
        if ($("#node-input-grant_type").val() === "set_by_credentials") {
          $("#node-password_credentials").hide();
          $("#node-access_token_url").hide();
          $("#node-client_id").hide();
          $("#node-client_secret").hide();
          $("#node-scope").hide();
        } else if ($("#node-input-grant_type").val() === "client_credentials") {
          $("#node-password_credentials").hide();
          $("#node-access_token_url").show();
          $("#node-client_id").show();
          $("#node-client_secret").show();
          $("#node-scope").show();
        } else if ($("#node-input-grant_type").val() === "password") {
          $("#node-password_credentials").show();
          $("#node-access_token_url").show();
          $("#node-client_id").show();
          $("#node-client_secret").show();
          $("#node-scope").show();
        }
      });
      function resizeRule(rule) {
                var newWidth = rule.width();
                rule.find('.red-ui-typedInput').typedInput("width",(newWidth-15)/2);
            }
            var headerList = $("#node-input-headers-container").css('min-height','150px').css('min-width','450px').editableList({
                addItem: function(container,i,header) {
                    var row = $('<div/>').css({
                        overflow: 'hidden',
                        whiteSpace: 'nowrap'
                    }).appendTo(container);

                    var propertyName = $('<input/>',{class:"node-input-header-name",type:"text"})
                        .appendTo(row)
                        .typedInput({types:headerTypes});

                    var propertyValue = $('<input/>',{class:"node-input-header-value",type:"text",style:"margin-left: 10px"})
                        .appendTo(row)
                        .typedInput({types:
                            header.h === 'content-type'?contentTypes:[{value:"other",label:"other",icon:"red/images/typedInput/az.png"}]
                        });

                    var matchedType = headerTypes.filter(function(ht) {
                        return ht.value === header.h
                    });
                    if (matchedType.length === 0) {
                        propertyName.typedInput('type','other');
                        propertyName.typedInput('value',header.h);
                        propertyValue.typedInput('value',header.v);
                    } else {
                        propertyName.typedInput('type',header.h);

                        if (header.h === "content-type") {
                            matchedType = contentTypes.filter(function(ct) {
                                return ct.value === header.v;
                            });
                            if (matchedType.length === 0) {
                                propertyValue.typedInput('type','other');
                                propertyValue.typedInput('value',header.v);
                            } else {
                                propertyValue.typedInput('type',header.v);
                            }
                        } else {
                            propertyValue.typedInput('value',header.v);
                        }
                    }

                    matchedType = headerTypes.filter(function(ht) {
                        return ht.value === header.h
                    });
                    if (matchedType.length === 0) {
                        propertyName.typedInput('type','other');
                        propertyName.typedInput('value',header.h);
                    } else {
                        propertyName.typedInput('type',header.h);
                    }

                    propertyName.on('change',function(event) {
                        var type = propertyName.typedInput('type');
                        if (type === 'content-type') {
                            propertyValue.typedInput('types',contentTypes);
                        } else {
                            propertyValue.typedInput('types',[{value:"other",label:"other",icon:"red/images/typedInput/az.png"}]);
                        }
                    });



                    resizeRule(container);
                },
                resizeItem: resizeRule,
                removable: true
            });

            if (this.headers) {
                for (var key in this.headers) {
                    if (this.headers.hasOwnProperty(key)) {
                        headerList.editableList('addItem',{h:key,v:this.headers[key]});
                    }
                }
            }
        },
        oneditsave: function() {
            var headers = $("#node-input-headers-container").editableList('items');
            var node = this;
            node.headers = {};
            headers.each(function(i) {
                var header = $(this);
                var keyType = header.find(".node-input-header-name").typedInput('type');
                var keyValue = header.find(".node-input-header-name").typedInput('value');
                var valueType = header.find(".node-input-header-value").typedInput('type');
                var valueValue = header.find(".node-input-header-value").typedInput('value');
                var key = keyType;
                var value = valueType;
                if (keyType === 'other') {
                    key = keyValue;
                }
                if (valueType === 'other') {
                    value = valueValue;
                }
                if (key !== '') {
                    node.headers[key] = value;
                }
            });
        },
        oneditresize: function(size) {
            var rows = $("#dialog-form>div:not(.node-input-headers-container-row)");
            var height = size.height;
            for (var i=0; i<rows.length; i++) {
                height -= $(rows[i]).outerHeight(true);
            }
            var editorRow = $("#dialog-form>div.node-input-headers-container-row");
            height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
            $("#node-input-headers-container").editableList('height', height);
        }
    });
  })();
</script>