skeleton-auth.js

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import './auth-mixin.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-input/paper-input.js';
import '@polymer/paper-styles/classes/typography.js';
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-icons/maps-icons.js';
import '@polymer/iron-form/iron-form.js';
import '@polymer/iron-pages/iron-pages.js';
import '@polymer/iron-flex-layout/iron-flex-layout.js';
import './icons.js';

/**
 * `skeleton-auth`
 *
 * Minimal Sign in module using polymer and firebase
 *
 * @customElement
 * @polymer
 * @appliesMixin Fabric.AuthMixin
 * @demo demo/index.html
 * */
class SkeletonAuth extends Fabric.AuthMixin(PolymerElement) {
  /**
   * @return {!HTMLTemplateElement}
   */
  static get template() {
    return html`
      <!--suppress CssInvalidPseudoSelector -->
      <!--suppress CssUnresolvedCustomProperty -->
      <!--suppress CssUnresolvedCustomPropertySet -->
      <style is="custom-style">
        :host {
          display: block;
          box-sizing: border-box;
          padding: 1rem 0;
        }

        :host([signed-in]) {
          display: none;
        }
  
        :host * {
          box-sizing: border-box;
        }
  
        a {
          text-decoration: none;
          color: var(--link-color, var(--paper-blue-a400));
        }
  
        a:hover {
          text-decoration: underline;
        }
  
        paper-input {
          @apply --auth-input;
        }
  
        paper-button {
          margin-top: 1rem;
          @apply --auth-button;
        }
  
        paper-button:not([disabled]) {
          background: var(--paper-grey-800);
          color: white;
        }
  
        paper-button.forgot-password {
          background: transparent;
          color: var(--button-forgot-password, var(--paper-grey-800));
          @apply --auth-forgot-password;
        }
  
        paper-button.action,
        paper-button.forgot-password {
          margin-top: 1.5rem;
        }
  
        paper-button.action:not([disabled]) {
          /* Recommended: --paper-red-a200 */
          background: var(--button-action, var(--accent-color));
        }
  
        paper-button.cancel:not([disabled]) {
          /* Recommended: --paper-red-a200 */
          background: var(--button-calcel, var(--paper-grey-800));
        }
  
        paper-button.google:not([disabled]) {
          /* Recommended: --paper-red-a200 */
          background: var(--button-google-color, var(--paper-grey-900));
        }
  
        paper-button.facebook:not([disabled]) {
          /* Recommended: --paper-indigo-a200 */
          background: var(--button-facebook-color, var(--paper-grey-900));
        }
  
        paper-button.twitter:not([disabled]) {
          /* Recommended: --paper-blue-a200 */
          background: var(--button-twitter-color, var(--paper-grey-900));
        }
  
        paper-button.phone:not([disabled]) {
          background: var(--button-phone-color, var(--paper-grey-900));
        }
  
        paper-button.github:not([disabled]) {
          background: var(--button-github-color, var(--paper-grey-900));
        }
  
        paper-button.anonymous:not([disabled]) {
          background: var(--button-anonymous-color, var(--paper-grey-900));
        }
  
        paper-button.email:not([disabled]) {
          background: var(--button-email-color, var(--paper-grey-900));
        }
  
        paper-button iron-icon {
          margin-right: 10px;
          --iron-icon-size: 16px;
        }
  
        .custom-select {
          display: block;
          padding: 8px 0;
          margin-right: 20px;
          max-width: 90px;
          position: relative;
          text-align: center;
        }
  
        .custom-select > .custom-select-label {
          display: inline-block;
          line-height: 1.5;
          border-bottom: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
          width: 90px;
        }
  
        .custom-select > .custom-select-label:empty::after {
          display: inline-block;
        }
  
        .arrow-down-icon {
          float: right;
        }
  
        .custom-select > select {
          background: none;
          border: none;
          bottom: 0;
          cursor: pointer;
          left: 0;
          opacity: 0;
          position: absolute;
          right: 0;
          top: 0;
        }
  
        .custom-select > select:focus {
          outline: none;
        }
  
        .phone-number {
          width: 100%;
          align-items: flex-end;
          @apply --layout-inline;
        }
  
        #phone-input {
          @apply --layout-flex-auto;
        }
  
        hr {
          border: 1px solid var(--divider-color, #FAFAFA);
          margin: 4rem 0 2rem 0;
        }
  
        iron-pages,
        iron-pages > * {
          position: relative;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          width: 100%;
          min-height: 100%;
          display: block;
          animation-fill-mode: both;
          animation-name: fadeOut;
          animation-duration: 2s;
          @apply --layout-flex-auto;
          @apply --layout-vertical;
        }
  
        iron-pages > :not([selected]) > * {
          display: none;
        }
  
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
  
          to {
            opacity: 1;
          }
        }
  
        .fadeIn,
        iron-pages > [selected],
        :not([hidden]) {
          animation-name: fadeIn;
        }
  
        @keyframes fadeOut {
          from {
            opacity: 1;
          }
  
          to {
            opacity: 0;
          }
        }
  
        .fadeOut,
        [hidden] {
          animation-name: fadeOut;
        }
      </style>
      <iron-pages id="pages" selected="{{selected}}" attr-for-selected="name" selected-attribute="selected" fallback-selection="options" role="navigation">
        <nav name="options">
          <template is="dom-if" if="[[phone]]" restamp="true">
            <paper-button class="phone" on-tap="_choosePhone">
              <iron-icon icon="auth:phone"></iron-icon>
              [[labelPhoneNumber]]
            </paper-button>
          </template>
          <template is="dom-if" if="[[google]]" restamp="true">
            <paper-button class="google" on-tap="signInGoogle">
              <iron-icon icon="auth:google"></iron-icon>
              [[labelGoogle]]
            </paper-button>
          </template>
          <template is="dom-if" if="[[facebook]]" restamp="true">
            <paper-button class="facebook" on-tap="signInFacebook">
              <iron-icon icon="auth:facebook"></iron-icon>
              [[labelFacebook]]
            </paper-button>
          </template>
          <template is="dom-if" if="[[twitter]]" restamp="true">
            <paper-button class="twitter" on-tap="signInTwitter">
              <iron-icon icon="auth:twitter"></iron-icon>
              [[labelTwitter]]
            </paper-button>
          </template>
          <template is="dom-if" if="[[github]]" restamp="true">
            <paper-button class="github" on-tap="signInGitHub">
              <iron-icon icon="auth:github"></iron-icon>
              [[labelGithub]]
            </paper-button>
          </template>
          <template is="dom-if" if="[[email]]" restamp="true">
            <paper-button class="email" on-tap="_chooseEmail">
              <iron-icon icon="auth:email"></iron-icon>
              [[labelEmail]]
            </paper-button>
          </template>
          <template is="dom-if" if="[[anonymous]]" restamp="true">
            <paper-button class="anonymous" on-tap="signInAnonymously">
              <iron-icon icon="auth:person-outline"></iron-icon>
              [[labelAnonymous]]
            </paper-button>
          </template>
        </nav>
        <!--
          Phone Login screen
        -->
        <template is="dom-if" if="[[phone]]" restamp="true">
          <section name="phone-login">
            <iron-form id="phone-login-form" on-submit="signInWithPhone">
              <form>
                <div class="phone-number">
                  <label class="custom-select" for="phone-code-select">
                    <span class="custom-select-label">
                      [[phoneCode]]
                      <iron-icon class="arrow-down-icon" icon="icons:arrow-drop-down"></iron-icon>
                    </span>
                    <select value="{{phoneCode::change}}" id="phone-code-select">
                      <template is="dom-repeat" items="[[dialingCodes]]">
                        <option value="[[item.phoneCode]]">
                          [[item.countryName]] [[item.phoneCode]]
                        </option>
                      </template>
                    </select>
                  </label>
                  <paper-input value="{{phoneNumber}}" autofocus="" id="phone-input" label="Phone number" type="phone" allowed-pattern="[\\d]" pattern="\\d*" minlength="4" maxlength="12" prevent-invalid-input="" on-keydown="_submitOnEnter"></paper-input>
                </div>
                <paper-button id="sign-in-button" class="action" on-tap="signInWithPhone" disabled$="[[!phoneNumber]]">
                  [[labelContinue]]
                </paper-button>
                <paper-button class="cancel" on-tap="_closeDialog">
                  [[labelCancel]]
                </paper-button>
              </form>
            </iron-form>
          </section>
          <!--
            Phone code verification screen
          -->
          <section name="confirm-code">
            <iron-form id="confirm-code-form" on-submit="confirmCode">
              <form>
                <paper-input value="{{confirmationCode}}" autofocus="" label="6-digit code" on-keydown="_submitOnEnter" type="number" minlength="6" maxlength="6" allowed-pattern="[\\d]" pattern="\\d*" prevent-invalid-input=""></paper-input>
                <paper-button class="action" on-tap="confirmCode" disabled$="[[!confirmationCode]]">
                  [[labelContinue]]
                </paper-button>
                <paper-button class="cancel" on-tap="_closeDialog">
                  [[labelCancel]]
                </paper-button>
              </form>
            </iron-form>
          </section>
        </template>
        <!--
          Email/Password Login screen
        -->
        <section name="email-login">
          <iron-form id="email-login-form" on-submit="fetchEmailProviders">
            <form>
              <paper-input id="login-input-mail" autofocus="" value="{{userEmail}}" required="" auto-validate$="[[userEmail]]" error-message="[[errorMessageEmail]]" label="[[labelEmailInput]]" type="email" on-keydown="_submitOnEnter"></paper-input>
              <paper-button class="action" on-tap="fetchEmailProviders" disabled$="[[!userEmail]]">
                [[labelSignIn]]
              </paper-button>
              <paper-button class="cancel" on-tap="_closeDialog">
                [[labelCancel]]
              </paper-button>
            </form>
          </iron-form>
        </section>
        <!--
          Email available providers screen
        -->
        <section name="email-providers">
          <nav id="providers">
            <template is="dom-if" if="[[availableProviders.google]]" restamp="true">
              <paper-button class="google" on-tap="signInGoogle">
                <iron-icon icon="auth:google"></iron-icon>
                [[labelGoogle]]
              </paper-button>
            </template>
            <template is="dom-if" if="[[availableProviders.facebook]]" restamp="true">
              <paper-button class="facebook" on-tap="signInFacebook">
                <iron-icon icon="auth:facebook"></iron-icon>
                [[labelFacebook]]
              </paper-button>
            </template>
            <template is="dom-if" if="[[availableProviders.twitter]]" restamp="true">
              <paper-button class="twitter" on-tap="signInTwitter">
                <iron-icon icon="auth:twitter"></iron-icon>
                [[labelTwitter]]
              </paper-button>
            </template>
            <template is="dom-if" if="[[availableProviders.github]]" restamp="true">
              <paper-button class="github" on-tap="signInGitHub">
                <iron-icon icon="auth:github"></iron-icon>
                [[labelGithub]]
              </paper-button>
            </template>
          </nav>
          <template is="dom-if" if="[[availableProviders.password]]" restamp="true">
            <div id="password-login">
              <iron-form on-submit="signInWithEmailAndPassword">
                <form>
                  <paper-input value="{{userEmail}}" autofocus="" disabled="[[disabled]]" type="email"></paper-input>
                  <paper-input value="{{userPassword}}" autofocus="" id="login-input-pass" label="[[labelPassSignIn]]" type="password" on-keydown="_submitOnEnter"></paper-input>
                  <paper-button class="forgot-password" on-tap="_forgotPass">
                    <iron-icon icon="auth:help"></iron-icon>
                    [[labelForgotPassword]]
                  </paper-button>
                  <paper-button class="action" on-tap="signInWithEmailAndPassword" disabled$="[[!userPassword]]">
                    [[labelSignIn]]
                  </paper-button>
                </form>
              </iron-form>
            </div>
          </template>
          <paper-button class="cancel" on-tap="_closeDialog">
            [[labelCancel]]
          </paper-button>
        </section>
        <!--
          Recover password screen
        -->
        <section name="forgot-pass">
          <iron-form id="forgot-pass-form" on-submit="passwordReset">
            <form>
              <h3>[[headlineForgot]]</h3>
              <p>[[descriptionForgot]]</p>
              <paper-input value="{{userEmail}}" autofocus="" type="text" on-keydown="_submitOnEnter"></paper-input>
              <paper-button class="action" on-tap="passwordReset" disabled$="[[!userEmail]]">
                [[labelSend]]
              </paper-button>
              <paper-button class="cancel" on-tap="_closeForgot">
                [[labelCancel]]
              </paper-button>
            </form>
          </iron-form>
        </section>
        <!--
          Email sent verification screen
        -->
        <section name="forgot-sent">
          <h3>[[headlineForgotSent]]</h3>
          <p>[[descriptionForgotSent]]</p>
          <paper-button class="cancel" on-tap="_closeDialog">
            [[labelContinue]]
          </paper-button>
        </section>
        <!--
          Email Sign-up screen
        -->
        <template is="dom-if" if="[[email]]" restamp="true">
          <section name="email-signup">
            <iron-form id="email-signup-form" on-submit="createUserWithEmailAndPassword">
              <form>
                <paper-input value="{{userEmail}}" autofocus="" disabled="[[disabled]]" id="signup-input-email" type="email"></paper-input>
                <paper-input value="{{userPassword}}" autofocus="" auto-validate$="[[userPassword]]" error-message="[[errorMessagePass]]" id="signup-input-pass" label="[[labelPassSignUp]]" minlength="[[minLength]]" required="" type="password" on-keydown="_submitOnEnter"></paper-input>
                <paper-button class="action" disabled$="[[!userPassword]]" on-tap="createUserWithEmailAndPassword">
                  [[labelSignUp]]
                </paper-button>
                <paper-button class="cancel" on-tap="_closeDialog">
                  [[labelCancel]]
                </paper-button>
              </form>
            </iron-form>
          </section>
        </template>
      </iron-pages>
    `;
  }

  /**
   * @return {object}
   */
  static get properties() {
    return {
      /**
       * Label Phone Number
       */
      labelPhoneNumber: {
        type: String,
        value: 'Phone Number',
      },
      /**
       * Label Google
       */
      labelGoogle: {
        type: String,
        value: 'Google',
      },
      /**
       * Label Facebook
       */
      labelFacebook: {
        type: String,
        value: 'Facebook',
      },
      /**
       * Label Twitter
       */
      labelTwitter: {
        type: String,
        value: 'Twitter',
      },
      /**
       * Label GitHub
       */
      labelGithub: {
        type: String,
        value: 'GitHub',
      },
      /**
       * Label Email
       */
      labelEmail: {
        type: String,
        value: 'Email',
      },
      /*
       * The label for the email input.
       */
      labelEmailInput: {
        type: String,
        value: 'email@example.com',
      },
      /*
       * The label for the sign in password input.
       */
      labelPassSignIn: {
        type: String,
        value: 'Type your password',
      },
      /*
       * The label for the sign up password input.
       */
      labelPassSignUp: {
        type: String,
        value: 'Choose password',
      },
      /**
       * Label labelAnonymous
       */
      labelAnonymous: {
        type: String,
        value: 'Anonymous',
      },
      /**
       * Label Cancel
       */
      labelCancel: {
        type: String,
        value: 'Cancel',
      },
      /**
       * Label Sign Up
       */
      labelSignUp: {
        type: String,
        value: 'Sign Up',
      },
      /**
       * Label Sign In
       */
      labelSignIn: {
        type: String,
        value: 'Sign In',
      },
      /**
       * Label Continue
       */
      labelContinue: {
        type: String,
        value: 'Continue',
      },
      /**
       * Label Send
       */
      labelSend: {
        type: String,
        value: 'Send',
      },
      /**
       * Label for Forgot Your Password?
       */
      labelForgotPassword: {
        type: String,
        value: 'Forgot Your Password?',
      },
      /*
       * The error message to display when the email input is invalid.
       */
      errorMessageEmail: {
        type: String,
        value: 'Please enter a valid email',
      },
      /*
       * The error message to display when the password input is invalid.
       */
      errorMessagePass: {
        type: String,
        value: 'Password should be at least 6 characters',
      },
      /**
       * Headline forgot
       */
      headlineForgot: {
        type: String,
        value: 'Recover password',
      },
      /**
       * Headline forgot
       */
      descriptionForgot: {
        type: String,
        value: 'Get instructions sent to this email to reset your password',
      },
      /**
       * Headline
       */
      headlineForgotSent: {
        type: String,
        value: 'Check your email',
      },
      /**
       * Headline
       */
      descriptionForgotSent: {
        type: String,
        value: 'Follow the instructions to recover your password.',
      },
    };
  }

  /**
   * Call to close the email dialog
   *
   * @private
   */
  _closeDialog() {
    this.clear();
  }

  /**
   * Close forgot section
   *
   * @private
   */
  _closeForgot() {
    let section = 'options';
    if (this.availableProviders && this.userEmail) {
      section = 'email-providers';
    }
    this.selected = section;
  }

  /**
   * Call to open the forgot password dialog
   *
   * @private
   */
  _forgotPass() {
    this.selected = 'forgot-pass';
  }
}

window.customElements.define('skeleton-auth', SkeletonAuth);