@teipublisher/pb-components/src/pb-restricted.js

Collection of webcomponents underlying TEI Publisher

import { LitElement, html, css } from 'lit-element';
import { pbMixin } from './pb-mixin.js';
import { registry } from './urls.js';

/**
 *
 * @param {Array<String>} arr array containg string values (name of groups)
 * @param {String} val value to check if it's in the array
 * @returns true if the checked values is in the array
 */
function _isItemInArray(arr, val) {
  return arr.some(arrVal => val === arrVal);
}

/**
 *
 * @param {object} user user name returned by login function;
 * @param {object} groups contains groups (an array) the logged user is a member of
 * @param {string} targetGroups string containing (optionally) space separated list of target groups
 * @returns true if user is member of one of the target groups
 */
export function isLoggedIn(user, groups, targetGroups) {
  if (user == null) {
    return false;
  }
  if (targetGroups) {
    if (!groups) {
      return false;
    }
    const groupArray = targetGroups.split(/[\s+,]+/);
    let exists = false;
    groupArray.forEach(async oneItem => {
      exists = _isItemInArray(groups, oneItem) || exists;
    });
    return exists;
  }
  return true;
}

/**
 * Show content if the user is logged in. Optionally requires the user
 * to be member of a specific group. Listens for the `pb-login` event
 * triggered by `pb-login` to be notified of user changes.
 *
 * You may specify fallback content to be shown if the user is not logged in
 * within a slot named 'fallback'.
 *
 * @slot - unnamed default slot
 * @slot fallback - optional content to show if user is not logged in
 * @fires pb-login - When received, changes the state of the component according to the user info received
 */
export class PbRestricted extends pbMixin(LitElement) {
  static get properties() {
    return {
      ...super.properties,
      /** Id of the pb-login element to connect to
       * @deprecated no longer used
       */
      login: {
        type: String,
      },
      show: {
        type: Boolean,
        reflect: true,
      },
      /**
       * If set, requires the logged in user to be member of
       * the given group.
       * Multiple groups can be defined separating items by space and/or comma.
       */
      group: {
        type: String,
      },
    };
  }

  constructor() {
    super();
    this.show = false;
  }

  firstUpdated() {
    const fallback = this.shadowRoot.querySelector('slot[name=fallback]');
    const hasFallback = fallback.assignedNodes().length > 0;
    if (hasFallback) {
      console.log(this);
      this.classList.add('fallback');
    }

    this.subscribeTo(
      'pb-login',
      ev => {
        this.show = this._loggedIn(ev.detail.user, ev.detail.groups);
      },
      [],
    );
    this.show =
      registry.currentUser &&
      this._loggedIn(registry.currentUser.user, registry.currentUser.groups);
  }

  render() {
    return html`
      ${this.show && !this.disabled ? html`<slot></slot>` : html`<slot name="fallback"></slot>`}
    `;
  }

  static get styles() {
    return css`
      :host {
        display: none;
      }

      :host(.fallback),
      :host([show]) {
        display: inherit;
      }
    `;
  }

  _loggedIn(user, groups) {
    return isLoggedIn(user, groups, this.group);
  }
}
customElements.define('pb-restricted', PbRestricted);