@clarify/node-red-contrib-clarify/nodes/clarify_api.html

A Node-Red node to insert data into Clarify

<!-- <script type="text/javascript" src="tools.js"></script> -->
<script type="text/javascript">
  RED.nodes.registerType('clarify_api', {
    category: 'config',
    credentials: {
      credentialsFile: {type: 'password'},
    },
    defaults: {
      name: {
        value: '',
      },
    },
    label: function () {
      return this.name ? this.name : 'Client Credentials';
    },
    oneditprepare: function () {
      $('#credentialsFileHidden').change(e => {
        const file = e.target.files[0];
        if (file === undefined) {
          return;
        }

        if (file.type !== 'application/json') {
          $('#credentialFileError').html('Accepts only JSON files.');
          return;
        }

        let reader = new FileReader();
        reader.onerror = function (e) {
          console.error(e);
        };
        reader.onload = function (e) {
          fetch('validateToken', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              credentials: e.target.result,
            }),
          })
            .then(response => {
              return response.json();
            })
            .then(data => {
              if (data.isValid) {
                $('#credentialFileError').html(``);
                $('#node-config-input-credentialsFile').val(e.target.result).change();
              } else {
                $('#credentialFileError').html(`Validation failed: ${data.error}`);
              }
            })
            .catch(error => {
              $('#credentialFileError').html(`Exception: ${error}`);
            });
        };
        reader.readAsText(file);
      });

      // chooseCredentialFileButton is a dummy button with correct styling that
      // clicks the actual file input element that is hidden.
      $('#chooseCredentialFileButton').click(() => {
        $('#credentialsFileHidden').click();
      });

      $('#clearCredentialsFile').click(() => {
        $('#credentialsFileHidden').val('');
        $('#node-config-input-credentialsFile').val('').change();
      });

      $('#node-config-input-credentialsFile').on('change', function (event) {
        if (event.currentTarget.value === '') {
          $('#credentialsFile-add').show();
          $('#credentialsFile-clear').hide();
        } else {
          $('#credentialsFile-add').hide();
          $('#credentialsFile-clear').show();
        }
      });

      $('#clearCache').click(e => {
        fetch('clearCache', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            nodeId: this.id,
          }),
        })
          .then(response => {
            return response.json();
          })
          .then(data => {
            if (data.cleared) {
              $('#clearCacheFeedback').html(data.msg);
              // Clear feedback message after 3 seconds
              setTimeout(function () {
                $('#clearCacheFeedback').html('');
              }, 3000);
              $('#clearCacheError').html('');
            } else {
              $('#clearCacheFeedback').html('');
              $('#clearCacheError').html(data.msg);
            }
          })
          .catch(error => {
            $('#clearCacheFeedback').html('');
            $('#clearCacheError').html(`Unknown error happen: ${error.message}`);
          });
      });
    },
  });
</script>

<script type="text/html" data-template-name="clarify_api">
  <div class="form-row">
    <label for="node-config-input-name"><span data-i18n="clarify_api.label.name"></label>
    <input type="text" id="node-config-input-name"  data-i18n="[placeholder]clarify_api.label.name" />
  </div>
  <div class="form-row">
    <label for="credentialsFile"><span data-i18n="clarify_api.label.credentials"></label>
    <input type="hidden" id="node-config-input-credentialsFile" />
    <span id="credentialsFile-add">
      <button type="button" id="chooseCredentialFileButton" class="red-ui-button">
        <span data-i18n="clarify_api.label.chooseFile">
      </button>
      <span id="credentialFileError" style="color: #AD1625;"></span>
      <div style="height: 0px;width:0px; overflow:hidden;">
        <input type="file" class="red-ui-button" id="credentialsFileHidden" />
      </div>
    </span>
    <span id="credentialsFile-clear">
      <button type="button" id="clearCredentialsFile" class="red-ui-button">
        <span data-i18n="clarify_api.label.clear">
      </button>
    </span>
  </div>
  <div class="form-row">
    <label for="clearCache">
      <span data-i18n="clarify_api.label.clearCache">
    </label>
    <button type="button" id="clearCache" class="red-ui-button">
      <span data-i18n="clarify_api.label.clear">
    </button>
    <span id="clearCacheFeedback"></span>
    <span id="clearCacheError" style="color: #AD1625;"></span>
  </div>
</script>