node-red-contrib-salesforce-chatter/salesforce.html

A processing node of Node-RED nodes for Salesforce Chatter.

<!--
  Copyright 2014 Atsushi Kojo.

  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/x-red" data-template-name="salesforce">
  <div id="node-config-force-client-keys">
      <div class="form-row">
        <label for="node-config-input-logintype"><i class="fa fa-plug"></i> Login Type</label>
        <select type="text" id="node-config-input-logintype" style="width:70%">
          <option value="Username-Password">login By Username-Password</option>
          <option value="oauth">login By OAuth2</option>
          <option value="Signed-Request">login By Signed-Request</option>
        </select>
      </div>
      <div class="form-tips" id="node-config-force-tooltip">
      </div>
      <div class="form-row input-loginurl-row">
        <label for="node-config-input-loginurl"><i class="fa fa-plug"></i> Login URL</label>
        <select type="text" id="node-config-input-loginurl" style="width:70%">
          <option value="https://login.salesforce.com">Production(login.salesforce.com)</option>
          <option value="https://test.salesforce.com">Sandbox(test.salesforce.com)</option>
        </select>
      </div>
      <div class="form-row">
        <label for="node-config-input-username"><i class="fa fa-bookmark"></i> User Name</label>
        <input type="text" id="node-config-input-username" placeholder="example@example.com" />
      </div>
      <div class="form-row input-password-row">
        <label for="node-config-input-password"><i class="fa fa-lock"></i> Password</label>
        <input type="password" id="node-config-input-password">
      </div>
      <div class="form-row input-clientid-row">
        <label for="node-config-input-clientid"><i class="fa fa-bookmark"></i> Client Id</label>
        <input type="password" id="node-config-input-clientid" />
      </div>
      <div class="form-row input-clientsecret-row">
        <label for="node-config-input-clientsecret"><i class="fa fa-lock"></i> Client Secret</label>
        <input type="password" id="node-config-input-clientsecret" />
      </div>
      <div class="form-row input-startauth-row">
        <label>&nbsp;</label>
        <a class="btn" id="node-config-start-auth" href="#" target="_blank">Authenticate with Force</a>
      </div>
  </div>
  <div id="node-config-force">
    <div class="form-row">
        <label><i class="fa fa-user"></i> salesforce User</label>
        <span id="node-config-force-username" class="input-xlarge uneditable-input"></span>
    </div>
    <input type="hidden" id="node-config-input-userId">
  </div>
</script>

<script type="text/x-red" data-help-name="salesforce" data-lang="en-US">
    <p>Set login information for force.com. This node uses the following three login methods.</p>
    <ul>
      <li>Login with username / password：
        <p>Set Username(<code>User Name</code>) and Password(<code>Password</code>).</p>
      </li>
      <li>Login with OAuth2：
        <p>When logging in with OAuth2, Create a Connected App with salesforce Setup -> Create -> Apps</p>
        <p>At this time, specify the Redirect URL displayed on the node setting screen as the Callback URL of the Connected App.</p>
        <p>Set the Username(<code>User Name</code>), Consumer Key(<code>Client Id</code>), and Consumer Secret(<code>Client Secret</code>), and click the <code>Authenticate with Force</code> button to get login information.</p>
      </li>
      <li>Login with Signed Request：
        <p>When logging in with a Signed Request, Create a Connected App with salesforce Setup -> Create -> Apps</p>
        <p>Set the Username(<code>User Name</code>) and Consumer Secret(<code>Client Secret</code>).</p>
      </li>
    </ul>
</script>

<script type="text/javascript">
  RED.nodes.registerType('salesforce', {
    category: 'config',
    color: "#48ace4",
    defaults: {
      username: { value: '', required: true },
      loginurl: { value: "https://login.salesforce.com" },
      logintype: { value: "Username-Password" },
    },
    credentials: {
      password: { type: 'password', required: true },
      clientid: { type: 'password', required: true },
      clientsecret: { type: 'password', required: true },
      userId: { type: 'text' }
    },
    label: function() {
      return this.username
    },
    oneditprepare: function() {
        var configNode = this;
        var id = this.id;
        var pathname = document.location.pathname;
        if (pathname.slice(-1) != "/") {
            pathname += "/";
        }
        var callback = location.protocol + "//";
        callback += (location.port == "")? location.hostname : location.hostname + ":" + location.port;
        callback += pathname + "force/credentials/"+id+"/auth/callback";
        $("#node-config-force-tooltip").html("<p>Please configure the authorized <b>Redirect URIs</b> of your app to include the following url:</p>\n<code>"+callback+"</code>");

        function updateForceAuthButton() {
            var v1 = $("#node-config-input-clientid").val();
            var v2 = $("#node-config-input-clientsecret").val();
            var v3 = $("#node-config-input-username").val();
            $("#node-config-start-auth").toggleClass("disabled",(v1.length === 0 || v2.length === 0 || v3.length === 0));
        }
        $("#node-config-input-username").on('change keydown paste input',updateForceAuthButton);
        $("#node-config-input-clientid").on('change keydown paste input',updateForceAuthButton);
        $("#node-config-input-clientsecret").on('change keydown paste input',updateForceAuthButton);

        updateForceAuthButton();

        function pollForceCredentialsUrl() {
            $.getJSON('credentials/force/'+id,function(data) {
                if (data.userId) {
                    updateForceUserId(data.userId);
                    delete window.forceConfigNodeIntervalId;
                } else {
                    window.forceConfigNodeIntervalId = window.setTimeout(pollForceCredentialsUrl,2000);
                }
            });
        }

        function updateForceUserId(dn) {
            $("#node-config-force-client-keys").hide();
            $("#node-config-force").show();
            $("#node-config-input-userId").val(dn);
            var username = $("#node-config-input-username").val();
            $("#node-config-force-username").html(username);
        }

        if (this.credentials.userId) {
            updateForceUserId(this.userId);
        } else {
            $("#node-config-force-client-keys").show();
            $("#node-config-force").hide();
        }

        $("#node-config-start-auth").mousedown(function() {
            var clientid = $("#node-config-input-clientid").val();
            var clientsecret = $("#node-config-input-clientsecret").val();
            var username = $("#node-config-input-username").val();
            var loginurl = $("#node-config-input-loginurl option:selected").val();
            var url = 'force/credentials/'+id+'/auth?id='+id
                      +'&clientid='+clientid
                      +'&clientsecret='+clientsecret
                      +'&callback='+encodeURIComponent(callback)
                      +'&username='+username
                      +'&loginurl='+encodeURIComponent(loginurl);
            $(this).attr("href", url);
            window.forceConfigNodeIntervalId = window.setTimeout(pollForceCredentialsUrl,2000);
        });

        $("#node-config-start-auth").click(function(e) {
            var clientid = $("#node-config-input-clientid").val();
            var clientsecret = $("#node-config-input-clientsecret").val();
            var username = $("#node-config-input-username").val();
            if (clientid === "" || clientsecret === "" || username === "") {
                e.preventDefault();
            }
        });


        $("#node-config-input-logintype").change(function () {
            var passwordel = $(".input-password-row");
            var clientidel = $(".input-clientid-row");
            var secretel = $(".input-clientsecret-row");
            var buttonel = $(".input-startauth-row");
            var loginurlel = $(".input-loginurl-row");
            var tooltipel = $("#node-config-force-tooltip");

            var id = $("#node-config-input-logintype option:selected").val();
            if (id == 'oauth') {
              passwordel.hide();
              clientidel.show();
              secretel.show();
              buttonel.show();
              tooltipel.show();
              loginurlel.show();
            } else if (id == 'Username-Password') {
              passwordel.show();
              clientidel.hide();
              secretel.hide();
              buttonel.hide();
              tooltipel.hide();
              loginurlel.show();
            } else {
              passwordel.hide();
              clientidel.hide();
              secretel.show();
              buttonel.hide();
              tooltipel.hide();
              loginurlel.hide();
            }
        });
    }
  });


</script>