vaadin-login-overlay.html

<!--
@license
Vaadin Login
Copyright (C) 2018 Vaadin Ltd
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">

<link rel="import" href="vaadin-login.html">
<link rel="import" href="vaadin-login-mixin.html">
<link rel="import" href="vaadin-login-overlay-wrapper.html">


<dom-module id="vaadin-login-overlay">
  <template>
    <vaadin-login-overlay-wrapper
      id="wrapper"
      opened="{{opened}}"
      focus-trap
      with-backdrop
      title="[[title]]"
      description="[[description]]">

      <vaadin-login
        theme="with-overlay"
        id="login"
        action="{{action}}"
        disabled="{{disabled}}"
        error="{{error}}"
        no-forgot-password="{{noForgotPassword}}"
        i18n="{{i18n}}"
        on-login="_handleEvent"
        on-forgot-password="_handleEvent">
        <vaadin-text-field slot="username" label="[[i18n.form.username]]" name="username" id="username" required>
          <input type="text" slot="input">
        </vaadin-text-field>
        <vaadin-password-field slot="password" label="[[i18n.form.password]]" name="password" id="password" required>
          <input type="password" slot="input">
        </vaadin-password-field>
      </vaadin-login>

    </vaadin-login-overlay-wrapper>
  </template>

  <script>
    (function() {
      /**
       * `<vaadin-login-overlay>` is a Web Component.
        *
        * ```
        * <vaadin-login-overlay></vaadin-login-overlay>
        * ```
        *
        * @memberof Vaadin
        * @mixes Vaadin.ElementMixin
        * @mixes Vaadin.ThemableMixin
        * @mixes Vaadin.Login.LoginMixin
        * @demo demo/index.html
        */
      class LoginOverlayElement extends Vaadin.Login.LoginMixin(Vaadin.ElementMixin(Vaadin.ThemableMixin(Polymer.Element))) {
        static get is() {
          return 'vaadin-login-overlay';
        }

        static get properties() {
          return {
            /**
             * Defines the application description
             */
            description: {
              type: String,
              value: 'Application description',
              notify: true
            },
            opened: {
              type: Boolean,
              value: false,
              observer: '_onOpenedChange'
            },
            /**
             * Defines the application title
             */
            title: {
              type: String,
              value: 'App name'
            }
          };
        }

        static get observers() {
          return [
            '__i18nChanged(i18n.header.*)'
          ];
        }

        ready() {
          super.ready();

          this._preventClosingLogin = this._preventClosingLogin.bind(this);
        }

        connectedCallback() {
          super.connectedCallback();

          this.$.wrapper.addEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
          this.$.wrapper.addEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
        }

        disconnectedCallback() {
          super.disconnectedCallback();

          this.$.wrapper.removeEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
          this.$.wrapper.removeEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
          this.$.wrapper.opened = false;
        }

        __i18nChanged(i18n) {
          const header = i18n.base;
          if (!header) {
            return;
          }
          this.title = header.title;
          this.description = header.description;
        }

        _preventClosingLogin(e) {
          e.preventDefault();
        }

        _handleEvent(e) {
          e.stopPropagation();
          const {
            detail,
            composed,
            cancelable,
            bubbles
          } = e;

          this.dispatchEvent(new CustomEvent(e.type, {bubbles, cancelable, composed, detail}));
        }

        _onOpenedChange() {
          if (!this.opened) {

            this.$.login.$.username.value = '';
            this.$.login.$.password.value = '';
            this.disabled = false;

            if (this._undoTeleport) {
              this._undoTeleport();
            }
          } else {
            this._undoTeleport = this._teleport(this._getElementsToTeleport());

            // Overlay sets pointerEvents on body to `none`, which breaks LastPass popup
            // Reverting it back to the previous state
            // https://github.com/vaadin/vaadin-overlay/blob/041cde4481b6262eac68d3a699f700216d897373/src/vaadin-overlay.html#L660
            document.body.style.pointerEvents = this.$.wrapper._previousDocumentPointerEvents;
          }
        }

        _teleport(elements) {
          const teleported = Array.from(elements).map(e => {
            return this.$.wrapper.appendChild(e);
          });
          // Function to undo the teleport
          return () => {
            while (teleported.length > 0) {
              this.appendChild(teleported.shift());
            }
          };
        }

        _getElementsToTeleport() {
          if (!this._elementsToTeleport) {
            this._elementsToTeleport = this.querySelectorAll('[slot=title]');
          }
          return this._elementsToTeleport;
        }
      }

      customElements.define(LoginOverlayElement.is, LoginOverlayElement);

      /**
       * @namespace Vaadin
       */
      window.Vaadin.LoginOverlayElement = LoginOverlayElement;
    })();
  </script>
</dom-module>