auth-role.html

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="auth-store.html">

<script>
  'use strict';

  /**
   * Stamps the template if the authentication status matches.
   *
   * auth-role is a custom 'dom-if' implementation that checks authentication status
   * and role membership (from the JWT token). Note any of the role membership checks
   * imply `authenticated`
   *
   * Examples:
   *
   * User must be anonymous (unauthenticated):
   *
   *     <template is="auth-role" anonymous>...</template>
   *
   * User must be authenticated:
   *
   *     <template is="auth-role" authenticated>...</template>
   *
   * User must have 'admin' role:
   *
   *     <template is="auth-role" role="admin">...</template>
   *
   * User must have 'admin' OR operator 'role':
   *
   *     <template is="auth-role" any="['admin', 'operator']">...</template>
   *
   * User must have 'admin' AND 'operator' roles:
   *
   *     <template is="auth-role" all="['admin', 'operator']">...</template>
   *
   * When `if` becomes falsey, the stamped content is hidden but not
   * removed from dom. When `if` subsequently becomes truthy again, the content
   * is simply re-shown. This approach is used due to its favorable performance
   * characteristics: the expense of creating template content is paid only
   * once and lazily.
   *
   * Set the `restamp` property to true to force the stamped content to be
   * created / destroyed when the `if` condition changes.
   *
   * @demo demo/index.html
   */
  Polymer({
    is: 'auth-role',

    extends: 'template',

    _template: null,

    /**
     * Fired whenever DOM is added or removed/hidden by this template (by
     * default, rendering occurs lazily).  To force immediate rendering, call
     * `render`.
     *
     * @event dom-change
     */

    properties: {
      /**
       * When true, this template will stamp if the user is un-authenticated (i.e. anonymous)
       */
      anonymous: {
        type: Boolean,
        value: false
      },

      /**
       * When true, this template will stamp if the use is authenticated (i.e. signed-in)
       * but without requiring any specific roles
       */
      authenticated: {
        type: Boolean,
        value: false
      },

      /**
       * A single role that a user needs to have for this template to be stamped.
       * Implies authenticated.
       */
      role: {
        type: String,
        value: ''
      },

      /**
       * List of any roles that the user needs to have for this template to be stamped.
       * Implies authentication.
       */
      any: {
        type: Array,
        value: function() {
          return [];
        }
      },

      /**
       * List of all roles that the user needs to have for this template to be stamped.
       * Implies authentication.
       */
      all: {
        type: Array,
        value: function() {
          return [];
        }
      },

      'if': {
        type: Boolean,
        computed: '_computeIf(data, anonymous, authenticated, role, any, all)',
        observer: '_queueRender'
      },
      /**
       * When true, elements will be removed from DOM and discarded when `if`
       * becomes false and re-created and added back to the DOM when `if`
       * becomes true.  By default, stamped elements will be hidden but left
       * in the DOM when `if` becomes false, which is generally results
       * in better performance.
       */
      restamp: {
        type: Boolean,
        value: false,
        observer: '_queueRender'
      }
    },

    behaviors: [
      Polymer.Templatizer,
      Polymer.AuthTokenReadBehavior
    ],

    _computeIf: function(data, anonymous, authenticated, role, any, all) {
      if (anonymous && !data) return true;

      if (!data) return false;

      if (authenticated) return true;

      if (role.length > 0) {
        return (data.roles.indexOf(role) !== -1);
      }

      if (any.length > 0) {
        for (var i = 0; i < any.length; i++) {
          for (var j = 0; j < data.roles.length; j++) {
            if (any[i] === data.roles[j]) return true;
          }
        }
        return false;
      }

      if (all.length > 0) {
        for (var i = 0; i < all.length; i++) {
          var ok = false;
          for (var j = 0; j < data.roles.length; j++) {
            if (all[i] === data.roles[j]) {
              ok = true;
              break;
            }
          }
          if (!ok) return false
        }
        return true;
      }

      return false;
    },

    _queueRender: function() {
      this._debounceTemplate(this._render);
    },

    detached: function() {
      if (!this.parentNode ||
          (this.parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE &&
           (!Polymer.Settings.hasShadow ||
            !(this.parentNode instanceof ShadowRoot)))) {
        this._teardownInstance();
      }
    },

    attached: function() {
      if (this.if && this.ctor) {
        // NOTE: ideally should not be async, but node can be attached
        // when shady dom is in the act of distributing/composing so push it out
        this.async(this._ensureInstance);
      }
    },

    /**
     * Forces the element to render its content. Normally rendering is
     * asynchronous to a provoking change. This is done for efficiency so
     * that multiple changes trigger only a single render. The render method
     * should be called if, for example, template rendering is required to
     * validate application state.
     */
    render: function() {
      this._flushTemplates();
    },

    _render: function() {
      if (this.if) {
        if (!this.ctor) {
          this.templatize(this);
        }
        this._ensureInstance();
        this._showHideChildren();
      } else if (this.restamp) {
        this._teardownInstance();
      }
      if (!this.restamp && this._instance) {
        this._showHideChildren();
      }
      if (this.if != this._lastIf) {
        this.fire('dom-change');
        this._lastIf = this.if;
      }
    },

    _ensureInstance: function() {
      var parentNode = Polymer.dom(this).parentNode;
      // Guard against element being detached while render was queued
      if (parentNode) {
        var parent = Polymer.dom(parentNode);
        if (!this._instance) {
          this._instance = this.stamp();
          var root = this._instance.root;
          parent.insertBefore(root, this);
        } else {
          var c$ = this._instance._children;
          if (c$ && c$.length) {
            // Detect case where dom-if was re-attached in new position
            var lastChild = Polymer.dom(this).previousSibling;
            if (lastChild !== c$[c$.length-1]) {
              for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
                parent.insertBefore(n, this);
              }
            }
          }
        }
      }
    },

    _teardownInstance: function() {
      if (this._instance) {
        var c$ = this._instance._children;
        if (c$ && c$.length) {
          // use first child parent, for case when dom-if may have been detached
          var parent = Polymer.dom(Polymer.dom(c$[0]).parentNode);
          for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
            parent.removeChild(n);
          }
        }
        this._instance = null;
      }
    },

    _showHideChildren: function() {
      var hidden = this.__hideTemplateChildren__ || !this.if;
      if (this._instance) {
        this._instance._showHideChildren(hidden);
      }
    },

    // Implements extension point from Templatizer mixin
    // Called as side-effect of a host property change, responsible for
    // notifying parent.<prop> path change on instance
    _forwardParentProp: function(prop, value) {
      if (this._instance) {
        this._instance.__setProperty(prop, value, true);
      }
    },

    // Implements extension point from Templatizer
    // Called as side-effect of a host path change, responsible for
    // notifying parent.<path> path change on each row
    _forwardParentPath: function(path, value) {
      if (this._instance) {
        this._instance._notifyPath(path, value, true);
      }
    }
  });
</script>