login-fire-form.html

<!--
@license
Copyright (c) 2016 Convoo All Rights Reserved.
Use of this source code is governed by a MIT license that can be found in the
LICENSE file or at https://github.com/convoo/login-fire/blob/master/LICENSE.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="./localize-behavior.html">
<link rel="import" href="./login-fire-form-behavior.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="./icons.html">
<link rel="import" href="./login-fire-styles.html">
<link rel="import" href="../paper-progress/paper-progress.html">

<!--
A pre-built login form to authenticate a user with email and password using the
[Firebase Auth API](https://firebase.google.com/docs/auth/).

Example:
```
<firebase-app
  name="myApp"
  api-key="API_KEY"
  auth-domain="AUTH_DOMAIN"
  database-url="DATABASE_URL">
</firebase-app>
<login-fire-form app-name="myApp"></login-fire-form>
```

### Styling

Style the buttons with CSS as you would a normal DOM element.

The following custom properties and mixins are available for styling:

Custom property | Description | Default
--------------- | ----------- | -------
`--login-fire-btn-signin` | Mixin applied to the signin button | `{}`
`--login-fire-btn-signout` | Mixin applied to the signin button | `{}`
`--login-fire-btn-signup` | Mixin applied to the signup button | `{}`
`--login-fire-error-msg-color` | The color for the error message  | `--error-color`
`--login-fire-form` | Mixin applied on the entire element | `{}`
`--login-fire-form-toggle` | Mixin applied on the div that contains the text asking if the user already has an account | `{}`
`--login-fire-info-msg-color` | The color for the info message | `gray`
`--login-fire-reset-password-color` | The color of reset password text | `gray`
`--login-fire-reset-password-hover-color` | The color of reset password text when hovered | `gray`
`--login-fire-progress-active-color` | The color that is applied to the paper-progress bar as active color | `--google-green-500`
`--login-fire-progress-container-color` | The color that is applied to the paper-progress-container | `--google-grey-300`

@customElement
@polymer
@demo demo/login-fire-form.html
-->
<dom-module id="login-fire-form">
  <template>
    <style include="login-fire-styles">
    :host {
      display: block;
      @apply --layout-vertical;
      width: 210px;
      @apply --login-fire-form;
    }
    :host([wide]) {
      width: 100%;
    }
    paper-button.btn--signup {
      width: 100%;
      margin-top: 10px;
      @apply --login-fire-btn-signup;
    }
    paper-button.btn--signin {
      width: 100%;
      @apply --login-fire-btn-signin;
    }
    .btn {
      color: gray;
    }
    .link--reset-pw {
      width: fit-content;
      color: var(--login-fire-reset-password-color, gray);
      text-decoration: none;
      text-transform: none;
      font-size: 12px;
      font-style: italic;
      font-weight: lighter;
      margin: 0;
      padding-left: 0;
    }
    .link--reset-pw:hover {
      color: var(--login-fire-reset-password-hover-color, gray);
      text-decoration: underline;
    }
    .msg {
      text-align: center;
      font-size: 12px;
      font-weight: 500;
      line-height: 24px;
      margin: 0;
      padding: 0;
    }
    .msg--error {
      color: var(--login-fire-error-msg-color, var(--error-color));
    }
    .msg--info {
      color: var(--login-fire-info-msg-color, gray);
    }
    .signup-toggle {
      font-size: 12px;
      color: grey;
      text-align: center;
      @apply --login-fire-form-toggle;
    }
    .signup-toggle paper-button {
      text-decoration: underline;
      text-transform: none;
      color: blue;
      cursor: pointer;
      margin: 0;
      padding: 0;
      min-width: 0;
    }
    paper-icon-button {
      color: grey;
    }
    </style>

    <div class="msg msg--error" hidden$="[[!_lastError]]">
      <span>[[_lastError]]</span>
    </div>
    <div class="msg msg--info" hidden$="[[!_lastMessage]]">
      <span>[[_lastMessage]]</span>
    </div>

    <paper-input id="emailInput"
      type="email"
      label="[[localize('lf-email')]]"
      value="{{email}}"
      pattern="[[emailRegex]]"
      error-message="[[localize('lf-email-invalid')]]"
      on-keydown="_submitOnEnter"
      required>
    </paper-input>

    <template is="dom-if" if="[[!showResetPassword]]">
      <paper-input id="passwordInput"
        type="password"
        label="[[localize('lf-password')]]"
        value="{{password}}"
        pattern="[[passwordRegex]]"
        error-message="[[localize('lf-password-invalid')]]"
        on-keydown="_submitOnEnter"
        required>
        <paper-icon-button
          id="passwordIconButton"
          slot="suffix"
          suffix
          on-down="_revealPW"
          on-up="_hidePW"
          icon="login-fire-icons:visibility"
          title="[[localize('lf-reveal-password')]]"
          hidden$="[[noToggleablePassword]]">
        </paper-icon-button>
      </paper-input>

      <template is="dom-if" if="[[_showSignUp]]">
        <paper-input id="repeatPasswordInput"
          type="password"
          label="[[localize('lf-reenter-password')]]"
          value="{{_passwordAgain}}"
          pattern="[[passwordRegex]]"
          error-message="[[localize('lf-passwords-dont-match')]]"
          on-keydown="_submitOnEnter"
          hidden$="[[!reenterPassword]]"
          required>
        </paper-input>
        <paper-button raised$="[[!flat]]" type="submit" on-click="confirm" class="btn--signup" disabled$="[[inProgress]]">
          <span>[[localize('lf-signup-button')]]</span>
          <paper-progress class="btn-progress" hidden$="[[!inProgress]]" disabled$="[[!inProgress]]" indeterminate></paper-progress>
        </paper-button>
        <div class="signup-toggle">
          <span>[[localize('lf-already-have-account')]]</span>
          <paper-button on-click="_toggleShowSignUp" tabindex="0"
            title="[[localize('lf-already-have-account')]] [[localize('lf-already-have-account-action')]]" noink>
            [[localize('lf-already-have-account-action')]]
          </paper-button>
        </div>
      </template>
      
      <template is="dom-if" if="[[!_showSignUp]]">
        <paper-button class="link--reset-pw"
          on-click="toggleShowResetPassword" tabindex="0" noink>
          <span>[[localize('lf-resetpw-link')]]</span>
        </paper-button>
        <paper-button raised$="[[!flat]]" type="submit" on-click="confirm" class="btn--signin" disabled$="[[inProgress]]">
          <span>[[localize('lf-signin-button')]]</span>
          <paper-progress class="btn-progress" hidden$="[[!inProgress]]" disabled$="[[!inProgress]]" indeterminate></paper-progress>
        </paper-button>

        <template is="dom-if" if="[[!noSignUp]]">
          <div class="signup-toggle">
            <span>[[localize('lf-no-account')]]</span>
            <paper-button on-click="_toggleShowSignUp" tabindex="0"
              title="[[localize('lf-no-account')]] [[localize('lf-no-account-action')]]" noink>
              [[localize('lf-no-account-action')]]
            </paper-button>
          </div>
        </template>

      </template>
    </template>

    <template is="dom-if" if="[[showResetPassword]]">
      <paper-button class="link--reset-pw" on-click="toggleShowResetPassword"
        tabindex="0" noink>[[localize('lf-resetpw-cancel-link')]]
      </paper-button>
      <paper-button raised$="[[!flat]]" type="submit" on-click="confirm" class="btn--resetpw" disabled$="[[inProgress]]">
        <span>[[localize('lf-resetpw-button')]]</span>
        <paper-progress class="btn-progress" hidden$="[[!inProgress]]" disabled$="[[!inProgress]]" indeterminate></paper-progress>
      </paper-button>
    </template>

  </template>

  <script>
  Polymer({
    is: 'login-fire-form',

    behaviors: [
      Convoo.LocalizeBehavior,
      Convoo.LoginFireFormBehavior
    ],

    properties: {
      /**
       * When `true`, signs up a user who attempts to sign in with an account
       * that doesn't already exist.
       *
       * @type {Boolean}
       */
      autoSignUp: {
        type: Boolean,
        value: false
      },

      /**
       * Federated identity provider ID to use for Firebase Authentication.
       *
       * @type {String}
       * @default 'email'
       */
      provider: {
        type: String,
        readOnly: true,
        notify: false,
        value: 'email'
      },

      /**
       * Email field value.
       *
       * @type {String}
       */
      email: {
        type: String
      },

      /**
       * Regular expression used to check email address format. It's a simplified
       * version that check the email address has the same syntax as described
       * on <a href="https://en.wikipedia.org/wiki/Email_address">Wikipedia</a>.
       * Pay attention, quoted email addresses are not passing the validation due
       * to the complexity of the regular expression it should have been write.
       *
       * Email address syntax validation can be disabled by setting this property
       * to "none", "null" or a falsy value.
       *
       * @type {String}
       */
      emailRegex: {
        type: String,
        value: "^[\\w\"]{1}([\\.!#$%&'*+-/=?^_`{|}~ ]?\\w){0,63}@\\w+([\\.-]?\\w+)*(\\.\\w{2,24})+$",
        observer: '_emailRegexChanged',
        notify: true,
      },

      /**
       * Password field value.
       *
       * @type {String}
       */
      password: {
        type: String
      },

      /**
       * Regular expression used to check password strength. The default Regex
       * checks if the password has a length at least of 8 chars and contains:
       * - 2 uppercase letters
       * - 1 special char letter [!@#$&*]
       * - 2 digits
       * - 3 lowercase letters
       * 
       * Password strength validation can be disabled by setting this property
       * to "none", "null" or a falsy value.
       * 
       * @type {String}
       */
      passwordRegex: {
        type: String,
        value: '^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8,}$',
        observer: '_passwordRegexChanged',
        notify: true,
      },

      /**
       * Password confirmation field value.
       *
       * @type {String}
       */
      _passwordAgain: {
        type: String
      },

      /**
       * Computed property to show sign up form.
       *
       * @type {Boolean}
       */
      _showSignUp: {
        type: Boolean,
        computed: '_computeShowSignUp(showSignUp, noSignUp)'
      },

      /**
       * Last error message.
       *
       * @type {String}
       */
      _lastError: {
        type: String
      },

      /**
       * Last info message.
       *
       * @type {String}
       */
      _lastMessage: {
        type: String
      }
    },

    listeners: {
      'error': '_handleError',
      'signedin': '_handleSignIn',
      'signedout': '_handleSignOut',
      'reset-password-email-sent': '_handleResetPasswordEmailSent'
    },

    /**
     * Empties the form. Fires a `cancel` event.
     */
    cancel: function() {
      this._cleanInputs();
      this.fire('cancel');
    },

    /**
     * Confirms the form. Depending of the form state, it tries to sign-in,
     * sign-up or reset the password.
     */
    confirm: function() {
      let validation = this.validate();
      if (!validation.passed) {
        return;
      }
      if (this._showSignUp) {
        this._signUp();
      } else if (this.showResetPassword) {
        this.sendPasswordResetEmail();
      } else if (!this._showSignUp) {
        this._signIn()
      }
      this.fire('confirm');
    },

    /**
     * Validates the email field. This is a basic validation. The only one way
     * to be sure the value is a true email address is to send it an email.
     * 
     * @return {Boolean} true if the provided email address has a good format.
     */
    validateEmail: function() {
      let input = !Polymer.Element ? this.querySelector('#emailInput') :
        this.root.querySelector('#emailInput');
      return input.validate();
    },

    /**
     * Validates the password field.
     * 
     * @return {Boolean} true if the password value pass the RegExp
     * `passwordRegex`.
     */
    validatePassword: function() {
      let input = !Polymer.Element ? this.querySelector('#passwordInput') :
        this.root.querySelector('#passwordInput');
      return !!this.showResetPassword || input.validate() &&
        (!this.reenterPassword || input.value == this._passwordAgain.value);
    },

    /**
     * Validates the form. Checks if the email address and the password are both
     * passing their validation.
     * 
     * @return {Object{passed: Boolean, error?: Object}} the validation result.
     */
    validate: function() {
      let isEmailValid = this.validateEmail();
      let isPasswordValid = this.validatePassword();
      let validation = {
        passed: isEmailValid && isPasswordValid
      };
      return validation.passed ? validation : Object.assign({}, validation, {
        error: {
          code: `form/invalid-${isEmailValid ? 'password' : 'email'}`,
          message: `${isEmailValid ?
            'The password does not pass the validation.' :
            'The email address is not valid.'} The form was not sent.`
        }
      });
    },

    _emailRegexChanged(regex) {
      if (typeof regex == 'string' &&
        (!regex || regex == 'none' || regex == 'null')) {
        this.set('emailRegex', null);
      }
    },

    _passwordRegexChanged: function(regex) {
      if (typeof regex == 'string' &&
        (!regex || regex == 'none' || regex == 'null')) {
        this.set('passwordRegex', null);
      }
    },

    /**
     * Cleans message and error sections.
     */
    _cleanMessages: function() {
      this.set('_lastError', '');
      this.set('_lastMessage', '');
    },

    /**
     * Cleans email and password inputs.
     */
    _cleanInputs: function() {
      this.$$('#emailInput').value = '';
      this._cleanPasswordInput();
    },

    /**
     * Cleans password input
     */
    _cleanPasswordInput: function() {
      let input = this.$$('#passwordInput');
      if (input) {
        input.value = '';
      }
    },

    /**
     * Calculates whether to show the sign up section. Returns `true` if the
     * form allows signing up and the element is asked to display the according
     * section.
     */
    _computeShowSignUp: function(showSignUp, noSignUp) {
      return showSignUp && !noSignUp;
    },

    /**
     * Tries to sign in a user using the form values.
     */
    _signIn: function() {
      this._cleanMessages();
      if (this.validateEmail() && this.validatePassword()) {
        this.signIn(this.email, this.password);
      }
    },

    /**
     * Tries to sign up a user using the form values.
     */
    _signUp: function(e) {
      this._cleanMessages();
      if (!this.validateEmail() || !this.validatePassword()) {
        if (this.reenterPassword) {
          const repeatPwInput = this.$$('#repeatPasswordInput');
          repeatPwInput.invalid = !repeatPwInput.validate() || this.password != this._passwordAgain;
          return;
        }
      }
      this.signUp(this.email, this.password);
      this._cleanInputs();
    },

    /**
     * Handler called after a successful `signIn` to clean form inputs.
     */
    _handleSignIn: function() {
      this._cleanInputs();
    },

    /**
     * Handler called after a successful `signOut`. Switches back to the `sign-in`
     * view if necessary.
     */
    _handleSignOut: function() {
      if (this.showSignUp) {
        this._toggleShowSignUp();
      }
    },

    _handleResetPasswordEmailSent: function() {
      this.showResetPassword = false;
    },

    /**
     * Displays error message. If the attribute `autoSignUp` is `true`, before
     * to display the error message, a sign up process is tried.
     *
     * @param  {Object} e the event caught that contains the error message
     */
    _handleError: function(e) {
      let errorCode = e.detail.code;
      if (this.autoSignUp && errorCode === 'auth/user-not-found') {
        this.signUp(this.email, this.password);
        this._cleanInputs();
        return;
      }
      // Display error message.
      var errorMessage = this.localize('lf-error-' + errorCode);
      this.set('_lastError', errorMessage || e.detail.message);
      if (['auth/wrong-password', 'auth/user-not-found'].includes(errorCode)) {
        this._cleanPasswordInput();
      }
    },

    /**
     * Sends an email for resetting the account password. The email is sent to
     * the address entered in the form when the user clicks on the link to reset
     * its password.
     */
    sendPasswordResetEmail: function() {
      this._cleanMessages();
      if (this.validateEmail()) {
        this._setInProgress(true);
        this._auth.sendPasswordResetEmail(this.email)
          .then(() => {
              this.set('_lastMessage', this.localize('lf-resetpw-success-message'));
              this.fire('reset-password-email-sent');
            },
            (error) => this.set('_lastError', error.message))
          .finally(()=> this._setInProgress(false));
      }
    },

    /**
     *  Checks for enter being pressed and submits the appropriate form action
     */
    _submitOnEnter: function(e) {
      if (e.keyCode === 13) {
        this.confirm();
      }
    },

    /**
     *  Reveals the password in the parent by switching the type to text
     */
    _revealPW: function(e) {
      this.$$('#passwordIconButton').icon = 'login-fire-icons:visibility-off';
      this.$$('#passwordInput').type = 'text';
    },

    /**
     * Hides the password in the parent by switching the type to password
     */
    _hidePW: function(e) {
      setTimeout(() => {
        this.$$('#passwordIconButton').icon = 'login-fire-icons:visibility';
        this.$$('#passwordInput').type = 'password';
      }, 1000);
    }

    /**
     * Fired when the form is canceled. At this time, inputs are cleaned.
     *
     * @event cancel
     */

    /**
     * Fired when the form is confirmed. At this time, the sign-in, sign-up or
     * reset password process is just started.
     *
     * @event confirm
     */

    /**
     * Fired when an email to reset the password is sent.
     *
     * @event reset-password-email-sent
     */
  });
  </script>
</dom-module>