api-console-assets/bower_components/auth-methods/auth-method-basic.html

This repo only exists to publish api console components to npm

<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
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.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-masked-input/paper-masked-input.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../arc-icons/arc-icons.html">
<link rel="import" href="../iron-form/iron-form.html">
<link rel="import" href="auth-methods-behavior.html">
<link rel="import" href="auth-methods-styles.html">
<!--
The `<auth-method-basic>` element displays a form to provide the Basic auth credentials.
It calculates base64 has while typing into username or password field.

It accepts `hash` as a property and once set it will atempt to decode it and set username and
paswword.

### Example
```
<auth-method-basic hash="dGVzdDp0ZXN0"></auth-method-basic>
```
This example will produce a form with prefilled username and passowrd with value "test".

### Styling
`<auth-methods>` provides the following custom properties and mixins for styling:

Custom property | Description | Default
----------------|-------------|----------
`--auth-method-basic` | Mixin applied to the element. | `{}`
`--auth-method-panel` | Mixin applied to all auth elements. | `{}`

This is very basic element. Style inputs using `paper-input`'s or `paper-toggle`'s css variables.

@group UI Elements
@element auth-method-basic
@demo demo/basic.html
-->
<dom-module id="auth-method-basic">
  <template>
    <style include="auth-methods-styles">
     :host {
      display: block;
      @apply --auth-method-panel;
      @apply --auth-method-basic;
    }
    </style>
    <div class="row">
      <div class="stepper">
        <span class="step">[[_computeStep(stepStartIndex, 1)]]</span>
        <span class="step-header">
          <span class="step-title">Set authorization data</span>
        </span>
      </div>
      <div class="step-content">
        <div class="line"></div>
        <form is="iron-form" id="form" autocomplete="on">
          <paper-input label="User name" value="{{username}}" type="text" required auto-validate autocomplete="on">
            <paper-icon-button suffix on-tap="clearUsername" icon="arc:clear" alt="Clear input icon" title="Clear input"></paper-icon-button>
          </paper-input>
          <paper-masked-input label="Password" value="{{password}}" auto-validate autocomplete="on"></paper-masked-input>
        </form>
      </div>
    </div>
  </template>
  <script>
  Polymer({
    is: 'auth-method-basic',
    behaviors: [ArcBehaviors.AuthMethodsBehavior],
    /**
     * Fired when error occured when decoding hash.
     *
     * @event error
     * @param {Error} error The error object.
     */
    /**
     * Fired when the any of the auth method settings has changed.
     * This event will be fired quite frequently - each time anything in the text field changed.
     * With one exception. This event will not be fired if the validation of the form didn't passed.
     *
     * @event auth-settings-changed
     * @param {Object} settings Current settings containing hash, password
     * and username.
     * @param {String} type The authorization type - basic
     * @param {Boolean} valid True if the form has been validated.
     */
    properties: {
      // base64 hash of the uid and passwd. When set it will override current username and password.
      hash: {
        type: String,
        notify: true
      },
      // The password.
      password: {
        type: String,
        notify: true,
        value: ''
      },
      // The username.
      username: {
        type: String,
        notify: true,
        value: ''
      }
    },

    _attachListeners: function(node) {
      this.listen(node, 'auth-settings-changed', '_onAuthSettings');
      this.listen(node, 'request-header-changed', '_headerChangedHandler');
    },

    _detachListeners: function(node) {
      this.unlisten(node, 'auth-settings-changed', '_onAuthSettings');
      this.unlisten(node, 'request-header-changed', '_headerChangedHandler');
    },

    /**
     * Gets a map of current settings (user provided data).
     */
    get settings() {
      return this._getSettings();
    },

    /**
     * Validate the form.
     *
     * @param {Boolean} passive If true then it will check validity of the form but will not
     * highlight the fields when invalid. Default to false.
     * @return {Boolean} `true` if valid, `false` otherwise.
     */
    validate: function(passive) {
      return passive ? this.$.form.checkValidity() : this.$.form.validate();
    },

    observers: [
      '_hashChanged(hash)',
      '_userInputChanged(username, password)',
      '_settingsChanged(hash)'
    ],

    reset: function() {
      this.set('hash', '');
      this.set('username', '');
      this.set('password', '');
    },

    _settingsChanged: function() {
      var validationResult = this.$.form.validate();
      var settings = this._getSettings();
      var detail = {
        settings: settings,
        type: 'basic',
        valid: validationResult
      };
      this.fire('auth-settings-changed', detail);
    },

    _getSettings: function() {
      return {
        hash: this.hash,
        password: this.password,
        username: this.username
      };
    },

    /**
     * Restores settings from stored value.
     *
     * @param {Object} settings Object returned by `_getSettings()`
     */
    restore: function(settings) {
      this.hash = settings.hash;
      this.password = settings.password;
      this.username = settings.username;
    },

    _hashChanged: function(hash) {
      if (this._internalHashChange || !hash) {
        return;
      }
      var encoded;
      try {
        encoded = atob(hash);
        var parts = encoded.split(':');
        if (parts.length) {
          this.username = parts[0];
          if (parts[1]) {
            this.password = parts[1];
          }
        }
      } catch (e) {
        console.warn(e);
        this.fire('error', {
          error: e
        });
      }
    },
    /**
     * Computes hash value for given username or password.
     * It computes value if at least one value for username and password is
     * provided. Otherwise it sets hash to empty string.
     *
     * @param {String} uid Username
     * @param {String} passwd Password
     * @return {String} Computed hash.
     */
    hashData: function(uid, passwd) {
      if (!uid) {
        uid = '';
      }
      if (!passwd) {
        passwd = '';
      }
      var hash;
      if (uid || passwd) {
        var enc = uid + ':' + passwd;
        hash = btoa(enc);
      } else {
        hash = '';
      }
      return hash;
    },
    /**
     * Sets the hash value for current username and password.
     *
     * @param {String} uid Username
     * @param {String} passwd Password
     */
    _userInputChanged: function(uid, passwd) {
      this._internalHashChange = true;
      this.set('hash', this.hashData(uid, passwd));
      this._internalHashChange = false;
    },

    clearUsername: function() {
      this.username = '';
    },

    /**
     * Handler to the `auth-settings-changed` event (fired by all auth panels).
     * If the event was fired by other element with the same method ttype
     * then the form will be updated to incomming values.
     * This helps to sync changes between elements in the same app.
     */
    _onAuthSettings: function(e) {
      if (!this._initialized) {
        return;
      }
      var event = Polymer.dom(e);
      if (event.rootTarget === this) {
        return;
      }
      if (e.detail.type !== 'basic') {
        return;
      }
      var otherSettings = e.detail.settings;
      for (var _key in otherSettings) {
        if (this[_key] !== otherSettings[_key]) {
          this[_key] = otherSettings[_key];
        }
      }
    },
    /**
     * Handler for the `request-header-changed` custom event.
     * If the panel is opened the it checks if current header updates
     * authorization.
     */
    _headerChangedHandler: function(e) {
      if (!this._isOpened || e.defaultPrevented) {
        return;
      }
      var name = e.detail.name;
      if (!name) {
        return;
      }
      name = name.toLowerCase();
      if (name !== 'authorization') {
        return;
      }
      var value = e.detail.value;
      if (!value) {
        if (this.hash) {
          this.reset();
        }
        return;
      }
      var lowerValue = value.toLowerCase();
      if (lowerValue.indexOf('basic') !== 0) {
        if (this.hash) {
          this.reset();
        }
        return;
      }
      value = value.substr(6);
      this.set('hash', value);
    }
  });
  </script>
</dom-module>