vaadin-login.html

<!--
@license
Copyright (c) 2018 Vaadin Ltd.
This program is available under Commercial Vaadin Add-On License 3.0 (CVALv3).
See <a href="https://vaadin.com/license/cval-3">the website</a> for the complete 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-license-checker/vaadin-license-checker.html">

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

<link rel="import" href="../../iron-form/iron-form.html">
<link rel="import" href="../../vaadin-text-field/src/vaadin-text-field.html">
<link rel="import" href="../../vaadin-text-field/src/vaadin-password-field.html">
<link rel="import" href="../../vaadin-button/src/vaadin-button.html">

<dom-module id="vaadin-login">
  <template>
    <style>
      :host {
        overflow: hidden;
        display: inline-block;
      }

      :host([hidden]) {
        display: none !important;
      }

      [part="card"] {
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      [part="brand"] {
        box-sizing: border-box;
        overflow: hidden;
        flex-grow: 1;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }

      [part="brand"] h1 {
        color: inherit;
        margin: 0;
      }

      [part="form"] {
        flex: none;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
      }

      [part="form"] h2 {
        margin: 0;
      }

      vaadin-text-field,
      vaadin-password-field,
      #submit {
        width: 100%;
      }

      [part="error-message"] {
        position: relative;
      }
    </style>
      <section part="card">
        <div part="brand">
          <h1>[[i18n.header.title]]</h1>
          <p>[[i18n.header.description]]</p>
        </div>

        <div part="form">
          <h2>[[i18n.form.title]]</h2>
          <div part="error-message" hidden$="[[!error]]">
            <h5>[[i18n.errorMessage.title]]</h5>
            <p>[[i18n.errorMessage.message]]</p>
          </div>
          <iron-form id="loginForm" allow-redirect>
            <form method="POST" action$="[[action]]">
              <vaadin-text-field label="[[i18n.form.username]]" name="username" id="username" autofocus required on-keydown="_handleInputKeydown"></vaadin-text-field>
              <vaadin-password-field label="[[i18n.form.password]]" name="password" id="password" required on-keydown="_handleInputKeydown"></vaadin-password-field>

              <vaadin-button id="submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]">[[i18n.form.submit]]</vaadin-button>
            </form>
          </iron-form>

          <vaadin-button id="forgotPasswordButton" theme="tertiary small" on-click="_forgotPassword" hidden$="[[hideForgotPasswordButton]]">[[i18n.form.forgotPassword]]</vaadin-button>

          <div part="footer">
            <p>[[i18n.additionalInformation]]</p>
          </div>
        </div>
      </section>
  </template>

  <script>
    (function() {

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

        submit() {
          if (this.disabled || !(this.$.username.validate() && this.$.password.validate())) {
            return;
          }

          this.error = false;
          this.disabled = true;
          if (this.action == null) {
            const eventDetails = {
              bubbles: true,
              cancelable: true,
              detail: {
                username: this.$.username.value,
                password: this.$.password.value
              }
            };
            this.dispatchEvent(new CustomEvent('login', eventDetails));
          } else {
            this.$.loginForm.submit();
          }
        }

        _forgotPassword() {
          this.dispatchEvent(new CustomEvent('forgot-password'));
        }

        _handleInputKeydown(e) {
          if (this._isEnterKey(e)) {
            const {target: inputActive} = e;
            const nextInput = inputActive.name === 'username' ? this.$.password : this.$.username;
            if (inputActive.validate()) {
              if (nextInput.checkValidity()) {
                this.submit();
              } else {
                nextInput.focus();
              }
            }
          }
        }

        _isEnterKey(e) {
          return e.key === 'Enter' || e.keyCode === 13;
        }

        /**
         * Fired when user clicks on the "Forgot password" button
         *
         * @event forgot-password
        */

        /**
         * Fired when an user submits the login.
         * This event is fired **only** if `action` is `null`
         *
         * @event login
         *
        */
      }

      customElements.define(VaadinLogin.is, VaadinLogin);

      /**
       * @namespace Vaadin
       */
      window.Vaadin.VaadinLogin = VaadinLogin;

      const licenseChecker = window.Vaadin.developmentModeCallback
        && window.Vaadin.developmentModeCallback['vaadin-license-checker'];
      if (typeof licenseChecker === 'function') {
        licenseChecker(VaadinLogin);
      }
    })();
  </script>
</dom-module>