firebase-auth-page.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/elements/dom-if.html">

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-input/paper-input.html">

<link rel="import" href="../gold-password-input/gold-password-input.html">
<link rel="import" href="../gold-password-input/gold-password-input-validator.html">

<link rel="import" href="./firebase-icons.html">

<!--
`<firebase-auth-page>` is a page with Material Design styling and optional animations that leverages firebase authentication in a flexible way. You can:
- setup a 'Sign-Up' or 'Sigh-In' flavor.
- configure the providers accessible within the page.
- configure the header e.g. a <h2></h2> with a "header" attribute
- configure different sections: "introduction", "provider" and "user" thanks to the corresponding attribute.

Example:

    <firebase-auth-page
      providers='["facebook", "github", "google"]'>
        <h2 slot="title-sign-up">Sign-Up Page</h2>
        <h2 slot="title-sign-in">Sign-In Page</h2>
        <span slot="introduction">-- Welcome to the Firebase Auth Page Demo: --</span>
        <span slot="provider">-- Login with one of the following provider(s): --</span>
        <span slot="user">-- or provide your email and password : --</span>
    </firebase-auth-page>

@element firebase-auth-page
@demo demo/index.html
-->
<dom-module id="firebase-auth-page">
  <template>
    <style>
      :host {
        display: block;
      }

      :host > ::slotted(*:first-child) {
        margin-top: 0;
      }

      .facebook {
        color: white;
        --iron-icon-fill-color: white;
        background-color: #3B5998;
      }
      .github {
        color: black;
        background-color: white;
      }
      .google {
        color: white;
        --iron-icon-fill-color: white;
        background-color: #DC4E41;
      }
      .twitter {
        color: white;
        --iron-icon-fill-color: white;
        background-color: #4099FF;
      }

      #introduction-section, #provider-section, #user-section {
        text-align: center;
      }

      #providers {
        @apply --layout-horizontal;
        @apply --layout-center-center;
      }
    </style>

    <template is="dom-if" if="[[_isSignUp(type)]]" restamp>
      <slot name="title-sign-up"></slot>
    </template>
    <template is="dom-if" if="[[_isSignIn(type)]]" restamp>
      <slot name="title-sign-in"></content>
    </template>

    <div id="introduction-section">
      <slot name="introduction" id="introduction"></slot>
    </div>

    <div id="provider-section" hidden$="[[_computeProviderHidden(providers)]]">
      <slot name="provider" id="provider"></slot>
    </div>
    <div id="providers">
      <template is="dom-repeat" items="{{providers}}" as="provider">
        <paper-button raised
                      class$="[[provider]]"
                      provider$="[[provider]]"
                      on-tap="_handleProvider">
          <iron-icon class$="[[provider]]" icon="firebase:[[provider]]"></iron-icon>
          [[provider]]
        </paper-button>
      </template>
    </div>

    <div id="user-section">
      <slot name="user" id="user"></slot>
      <!-- Email input -->
      <paper-input id="email"
        type="email"
        invalid="{{emailInvalid}}"
        auto-validate
        error-message="Please, enter a valid email">
      </paper-input>
      <!-- Primary password input -->
      <gold-password-input id="primary"
        reveal
        value="{{primary}}"
        invalid="{{primaryInvalid}}"
        auto-validate
        error-message="The password must contain at least 6 characters">
      </gold-password-input>
      <!-- Verification password input -->
      <gold-password-input-validator
        pattern="[[primary]]">
      </gold-password-input-validator>
      <gold-password-input id="verification"
        reveal
        invalid="{{verificationInvalid}}"
        auto-validate
        validator="gold-password-input-validator"
        error-message="The verification password you entered is different!">
      </gold-password-input>
    </div>

    <div class="buttons">
      <paper-button raised
                    disabled="[[_computeConfirmDisabled(type,emailInvalid,primary,primaryInvalid,verificationInvalid)]]"
                    on-tap="_handleConfirm">
        [[_computeConfirm(type)]]
      </paper-button>
      <paper-button raised
                    on-tap="_handleCancel">
        Cancel
      </paper-button>
    </div>

  </template>
  <script>
    (function() {
      /**
       * Enum dialog type values.
       * @readonly
       * @enum {string}
       */
      var DialogTypeValue = {
          SIGNUP: 'SignUp',
          SIGNIN: 'SignIn'
      };

      class FirebaseAuthPage extends Polymer.Element {

        static get is() { return 'firebase-auth-page' }

        static get properties() {
          return {
            /**
            * `type` indicates the type of authentication dialog to use. It can hold currently two
            * values, namely DialogTypeValue.SIGNUP and DialogTypeValue.SIGNIN.
            *
            * @type {string}
            */
            type: {
              type: String,
              observer: '_typeChanged'
            },

            /**
            * `providers` set the list of providers accessible for SignUp/SignIn.
            *
            * @type {Array}
            */
            providers: {
              type: Array,
              value: function() { return []; },
              observer: '_providersChanged'
            }
          }
        }

        //
        // Element Behavior
        //

        _typeChanged() {
          switch(this.type) {
            case DialogTypeValue.SIGNUP:
              this.$.primary.setAttribute('strength-meter', '');
              this.$.primary.setAttribute('minlength', '6');
              this.$.primary.setAttribute('autocomplete', 'new-password');
              this.$.verification.removeAttribute('hidden');
              break;
            case DialogTypeValue.SIGNIN:
              this.$.primary.removeAttribute('strength-meter');
              this.$.primary.removeAttribute('minlength');
              this.$.primary.setAttribute('autocomplete', 'current-password');
              this.$.verification.setAttribute('hidden', '');
              break;
            default:
              console.error('Invalid dialog type!');
          }
        }

        _providersChanged() {
          // TODO PG: check the list of provider given and filter only the supported one
        }

        _isSignUp(type) {
          return type === DialogTypeValue.SIGNUP;
        }

        _isSignIn(type) {
          return type === DialogTypeValue.SIGNIN;
        }

        _computeProviderHidden(provider) {
          return provider.length === 0;
        }

        _computeConfirm(type) {
          switch(type) {
            case DialogTypeValue.SIGNUP:
            case DialogTypeValue.SIGNIN:
              return type;
            default:
              console.error('Invalid dialog type!');
          }
        }

        _computeConfirmDisabled(type, emailInvalid, primary, primaryInvalid, verificationInvalid) {
          switch(type) {
            case DialogTypeValue.SIGNUP:
              if (this.$.verification.value === '' || verificationInvalid) {
                return true;
              }
              break;
            case DialogTypeValue.SIGNIN:
              if (this.$.email.value === '' || emailInvalid) {
                return true;
              }
              if (primary === '' || primaryInvalid) {
                return true;
              }
              break;
          }
          return false;
        }

        _handleProvider(e) {
          if (e && e.target && e.target.getAttribute('provider')) {
            this.dispatchEvent(new CustomEvent('sign-in',
              { bubbles: true, composed: true, detail: { provider: e.target.getAttribute('provider') } }));
          }
        }

        _handleConfirm() {
          var params = {};

          params.email = this.$.email.value;
          params.password = this.$.primary.value;

          switch(this.type) {
            case DialogTypeValue.SIGNUP:
              this.dispatchEvent(new CustomEvent('sign-up',
                { bubbles: true, composed: true, detail: { provider: 'password', params: params } }));
              break;
            case DialogTypeValue.SIGNIN:
              this.dispatchEvent(new CustomEvent('sign-in',
                { bubbles: true, composed: true, detail: { provider: 'password', params: params } }));
              break;
          }
        }

        _handleCancel() {
          this.$.email.value = '';
          this.$.primary.value = '';
          this.$.verification.value = '';
        }
      }

      /**
        Fired when a user confirm a Sign-Up.

        @event sign-up
        @param {{params: Object}} detail Contains user and password info.
      */
      /**
        Fired when a user confirm a Login.

        @event sign-in
        @param {{ provider: string, params: Object}} detail Contains user and password info.
      */

      customElements.define(FirebaseAuthPage.is, FirebaseAuthPage);
    }());
  </script>
</dom-module>