px-login.html

<!--
Copyright (c) 2018, General Electric

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.
-->

<!--
    Relative paths assume component is being run from inside an app or another component, where dependencies are flat
    siblings. When this component is run from its own repo (e.g. tests, examples), we assume the server is started with
    'gulp serve' (or similar server setup) to enable correct finding of bower dependencies for local runs.
-->
<link rel="import" href="../polymer/polymer.html"/>

<link rel="import" href="css/px-login-styles.html"/>
<link rel="import" href="../promise-polyfill/promise-polyfill-lite.html">
<link rel="import" href="../px-popover/px-popover.html"/>
<link rel="import" href="../iron-ajax/iron-ajax.html"/>
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html"/>
<link rel="import" href="../px-icon-set/px-icon-set-navigation.html"/>
<link rel="import" href="../px-icon-set/px-icon-set-utility.html"/>
<link rel="import" href="../px-icon-set/px-icon.html"/>

<!--
Element providing a login/logout button that integrates nicely with Cloud Foundry's UAA.
Supports custom menu items for other routes in your application, for instance a "Settings" page.
By default, the component will call UAA for user info on load, but this can be disabled with the
do-not-fetch-user-info-on-load property.

### Usage

    <px-login
      login-url="/login"
      logout-url="/logout"
      user-info-url="/userinfo"
      do-not-fetch-user-info-on-load
      popover-location="bottom"
      menu-items='[{"url":"#settings","label":"Settings"},{"url":"#account","label":"My Account"}]'>
    </px-login>

### Styling
The following custom properties are available for styling:

Custom property | Description
:------------|:-------------
`--px-login-button-width`   | Width of the login button including icons and text
`--px-login-custom-icon-height` | Use with the `custom-icon` slot
`--px-login-custom-icon-width` | Use with the `custom-icon` slot
`--px-login-custom-icon-radius` | Use with the `custom-icon` slot

@element px-login
@blurb Element providing a login/logout button.
@homepage index.html
@demo demo.html
-->

<dom-module id="px-login">
  <template>
    <style include="px-login-styles"></style>
    <iron-ajax id="userInfoAjax" url="{{userInfoUrl}}" handle-as="json" method="GET"></iron-ajax>
    <div>
      <div hidden$="{{!_showLogin}}">
        <button class="btn btn--bare login-button" id="loginButton" >
          <px-icon icon="px-nav:generic-user" class="login-button--user-icon text--center"></px-icon>
          <template is="dom-if" if="[[!collapsed]]">[[localize("Sign In")]]</template>
        </button>
      </div>
      <div hidden$="{{_showLogin}}">
        <px-popover id="userPopover" orientation="[[popoverLocation]]" enhanced="true" for="userNameButton" hide-overlay="true">
          <ul class="list-bare">
            <template is="dom-repeat" items="{{menuItems}}">
              <li class="login-menu--item truncate"><a class="actionable actionable--action" href$="{{item.url}}" title="{{item.label}}">{{item.label}}</a></li>
            </template>
            <li id="logoutButton"><a href="#" class="actionable actionable--action">[[localize("Sign Out")]]</a></li>
          </ul>
        </px-popover>
        <button id="userNameButton" name="userNameButton" class="btn btn--bare login-button">
          <template is="dom-if" if="[[!customUserIcon]]">
            <px-icon icon="px-nav:generic-user" class="login-button--user-icon text--center"></px-icon>
          </template>
          <template is="dom-if" if="[[customUserIcon]]">
            <div class="custom-icon">
              <slot name="custom-icon"></slot>
            </div>
          </template>
          <template is="dom-if" if="[[!collapsed]]">
            <div class="truncate" title="{{userName}}">{{userName}}</div>
            <px-icon icon="px-utl:chevron" class="login-button--chevron-icon"></px-icon>
          </template>
        </button>
      </div>
    </div>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-login',

    behaviors: [
      Polymer.AppLocalizeBehavior
    ],

    properties: {
      /**
      * URL for user login
      */
      loginUrl: {
          type: String,
          value: '/login'
      },
      /**
      * URL for fetching user info
      */
      userInfoUrl: {
          type: String,
          value: '/userinfo'
      },
      /**
      * URL for user logout
      */
      logoutUrl: {
          type: String,
          value: '/logout'
      },
      /**
      * username to display
      */
      userName: {
        type: String
      },
      /**
      * userInfo retrieved from UAA
      */
      userInfo: {
        type: Object,
        notify: true
      },
      /**
      * Key within `userInfo` object to use as `userName` - supply this in order to select
      * a custom field from UAA for display, e.g. cases where the user_name may be an SSO ID
      * or other less user-friendly value.
      */
      userNameKey: {
        type: String,
        value: 'user_name'
      },
      /**
       * Set to true to prevent a REST call for user info
       *
       */
      doNotFetchUserInfoOnLoad: {
        type: Boolean,
        value: false
      },
      /**
       * Where to position the popover: bottom, top, left, right
       */
      popoverLocation: {
        type: String,
        value: 'bottom'
      },
      /**
       * A valid IETF language tag as a string that `app-localize-behavior` will
       * use to localize this component.
       *
       * See https://github.com/PolymerElements/app-localize-behavior for API
       * documentation and more information.
       */
      language: {
        type: String,
        value: 'en'
      },
      /**
      * Use the key for localization if value for that language is missing.
      * Should always be true for Predix components.
      */
      useKeyIfMissing: {
        type: Boolean,
        value: true
      },
      /**
      * Library object of hardcoded strings used in this application.
      * Used by `app-localize-behavior` in conjunction with `language`.
      */
      resources: {
        type: Object,
        value: function() {
          return {
            'en': {
              "Sign In": "Sign In",
              "Sign Out": "Sign Out"
            }
          }
        }
      },
      /**
       * An array of objects to specify custom menu items.
       * Each object should look like this:
       *   {url: "/foo", label: "Foo Bar"}
       */
      menuItems: {
        type: Array
      },

      _showLogin: {
        type: Boolean,
        value: true,
        computed: '_computeShowLogin(userName)'
      },
      /**
       * If true, the generic user icon will not appear. Your application can then pass a custom user avatar
       * icon or photo into the `custom-icon` slot, e.g.
       *
       *     <px-login custom-user-icon>
       *       <img slot="custom-icon" src="..." />
       *     </px-login>
       *
       * By default, the image will be 2rem x 2rem with a 50% border radius (cropped into a circle).
       * You can override these using the CSS variables above.
       */
      customUserIcon: {
        type: Boolean,
        value: false
      },
      /**
      * When used with a vertical px-app-nav, the login component should have a "collapsed" state in which only
      * the icon is visible and the user name or other text is hidden. Collapsed status is changed based on the
      * collapsed state of the px-app-nav.
      */
      collapsed: {
        type: Boolean,
        value: false,
        observer: '_hidePopover'
      }
    },

    /**
    * Handles click on the "Sign in" button.
    */
    loginClicked: function(event, detail, sender) {
      window.location = Polymer.dom(this).getOwnerRoot().host.loginUrl;
    },

    /**
    * Handles click on the "Sign out" button.
    */
    logoutClicked: function(event, detail, sender) {
      event.preventDefault();
      var pxLogin = Polymer.dom(this).getOwnerRoot().host;
      pxLogin.userName = null;
      pxLogin.userInfo = null;
      window.location = pxLogin.logoutUrl
    },

    _computeShowLogin: function(userName) {
      return !userName || userName.length < 1;
    },

    _fetchUserInfo: function(url) {
      this.$.userInfoAjax.url = url;
      if (url && !this.doNotFetchUserInfoOnLoad) {
        this.$.userInfoAjax.generateRequest();
      }
    },

    _hidePopover: function(collapsed) {
      if(collapsed) this.$.userPopover.hide();
    },

    ready: function() {
      var self = this;
      this.$.loginButton.addEventListener('click', this.loginClicked);
      this.$.logoutButton.addEventListener('click', this.logoutClicked);
      this.$.userNameButton.addEventListener('click', function() {
        // Need to wait a few ticks, to see if popover is available or not.
        setTimeout(function() {
          self.$.userPopover.show();
        }, 10);
      });
      this.$.userInfoAjax.addEventListener('response', function(event) {
        if(event.detail.response) {
          self.userInfo = event.detail.response;
          self.userName = event.detail.response[self.userNameKey];
          /**
          * Event fired when the AJAX response is received from loginUrl.
          * evt.detail will contain the response object.
          *
          * @event px-login-response-received
          */
          this.fire('px-login-response-received', event.detail.response);
        }
      });
      this.$.userInfoAjax.addEventListener('error', function(event) {
        /**
          * Event fired when the AJAX response is received from loginUrl.
          * evt.detail will contain the error object.
          *
          * @event px-login-error-received
          */
        this.fire('px-login-error-received', event.detail.error);
        console.log(event.detail.error);
      });
      this._fetchUserInfo(this.userInfoUrl);
    }
  });
</script>