mtz-update-password.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../toggle-icon/toggle-icon.html">
<link rel="import" href="../lazy-imports/lazy-imports-behavior.html">
<link rel="import" href="mtz-validation-status.html">
<link rel="import" href="mtz-password-validator.html">

<!--
`mtz-update-password`
Takes a password in from the user and validates it against a set of requirements.

### Styling
Custom property | Description | Default
----------------|-------------|----------
`--mtz-update-password` | A mixin for styling this element | {}
`--mtz-update-password-valid-status` | A mixin for styling the valid-status group | {}
`--mtz-update-password-input` | A mixin to style the password input field | {}
`--mtz-update-password-retype-input` | A mixin to style the retype password input field | {}
`--mtz-update-password-input-fields` | A mixin to style the grouping element around both input fields | {}
`--mtz-update-password-strength-text` | A mixin to style the strength text | {}
`--mtz-update-password-too-short-color` | A variable to set color when the password is too short | #FF0000
`--mtz-update-password-weak-color` | A variable to set color when the password is weak | #ff9800
`--mtz-update-password-fair-color` | A variable to set color when the password is fair | #ddca7e
`--mtz-update-password-good-color` | A variable to set color when the password is good | #77a464
`--mtz-update-password-strong-color` | A variable to set color when the password is strong | #009400

@demo demo/index.html
-->
<dom-module id="mtz-update-password">
  <link rel="lazy-import" group="zxcvbn" href="zxcvbn-import.html">
  <template>
    <style>
      :host {
        @apply --mtz-update-password;
        --color-worst: var(--mtz-update-password-too-short-color, #FF0000);
        --color-bad: var(--mtz-update-password-weak-color, #ff9800);
        --color-weak: var(--mtz-update-password-fair-color, #ddca7e);
        --color-good: var(--mtz-update-password-good-color, #77a464);
        --color-strong: var(--mtz-update-password-strong-color, #009400);
      }
      .valid-status {
        @apply --mtz-update-password-valid-status;
      }
      #password {
        @apply --mtz-update-password-input;
      }
      #retype-password {
        padding-bottom: 20px;

        @apply --mtz-update-password-retype-input;
      }
      .password-input {
        @apply --mtz-update-password-input-fields;
      }
      #strengthText {
        display: flex;
        flex: 1 1 auto;
        text-align: right;
        justify-content: flex-end;
        align-items: center;
        @apply --mtz-update-password-strength-text;
      }
      iron-icon {
        --iron-icon-widih: 15px;
        --iron-icon-height: 15px;
      }
      toggle-icon {
        color: gray;
        width: 24px;
        height: 24px;
        --paper-icon-button: {
          padding: 0px;
          width: 24px;
          height: 24px;
        };
      }
      .strength-meter {
        display: flex;
      }
      .result-color0 {
        color: var(--color-worst);
      }
      .result-color1 {
        color: var(--color-bad);
      }
      .result-color2 {
        color: var(--color-weak);
      }
      .result-color3 {
        color: var(--color-good);
      }
      .result-color4 {
        color: var(--color-strong);
      }
      .meter-color0 {
        --paper-progress-active-color: var(--color-worst);
      }
      .meter-color1 {
        --paper-progress-active-color: var(--color-bad);
      }
      .meter-color2 {
        --paper-progress-active-color: var(--color-weak);
      }
      .meter-color3 {
        --paper-progress-active-color: var(--color-good);
      }
      .meter-color4 {
        --paper-progress-active-color: var(--color-strong);
      }
    </style>

    <slot name="title"></slot>
    <div class="password-input">
      <!-- Not sure why, but I have to pass these properties to the validator itself... -->
      <mtz-password-validator id="validator"
        allowed-characters="[[allowedCharacters]]"
        allowed-symbols="[[allowedSymbols]]"
        maxlength="[[maxlength]]"
        minlength="[[minlength]]"
        min-letters="[[minLetters]]"
        min-numbers="[[minNumbers]]"
        min-symbols="[[minSymbols]]"
        min-upper="[[minUpper]]"
        min-lower="[[minLower]]"
        required="[[required]]"
        validation-errors="{{validationErrors}}"
        retype-value="{{retypeValue}}"
        disable-retype="{{disableRetype}}"
        invalid="{{__passwordInvalid}}"
      ></mtz-password-validator>
      <paper-input id="password"
        type="[[__setPasswordType(__checked)]]"
        validator="mtz-password-validator"
        value="{{value}}"
        label="[[passwordLabel]]"
        no-label-float="[[noLabelFloat]]"
        placeholder="[[placeholder]]"
        always-float-label="[[alwaysFloatLabel]]"
        autofocus="[[autofocus]]"
        maxlength="[[maxlength]]"
        minlength="[[minlength]]"
        required$="[[required]]"
        autocomplete="[[autocomplete]]"
        invalid="[[__passwordInvalid]]">
        <template is="dom-if" if="[[reveal]]">
          <div slot="suffix">
            <toggle-icon
              noink
              tabindex="-1"
              slot="suffix"
              id="reveal"
              icon="visibility"
              icon-checked="visibility-off"
              checked="{{__checked}}"
              animation="flip-horizontal">
            </toggle-icon>
          </div>
        </template>
      </paper-input>
      <template is="dom-if" if="[[showStrengthMeter]]">
        <div class="strength-meter">
          <div id="strengthText" inner-h-t-m-l="[[__passwordStrengthTextValue]]"></div>
          <iron-icon hidden$="[[!__passwordStrengthTextValue]]" icon="info"></iron-icon>
        </div>
      </template>
      <template is="dom-if"
        if="[[!disableRetype]]"
        restamp>
        <paper-input id="retype-password"
          type="password"
          value="{{retypeValue}}"
          label="[[retypePasswordLabel]]"
          no-label-float="[[retypeNoLabelFloat]]"
          placeholder="[[retypePlaceholder]]"
          always-float-label="[[retypeAlwaysFloatLabel]]"
          autofocus="[[retypeAutofocus]]"
          pattern="[[__getPattern(value, allowedSymbols)]]"
          required$="[[__toBoolean(value)]]"
          maxlength="[[maxlength]]"
          minlength="[[minlength]]"
          invalid="{{validationErrors.matching}}"
          autocomplete="[[autocomplete]]"
          error-message="[[retypePasswordError]]"
        ></paper-input>
      </template>
    </div>

    <slot></slot>

    <template is="dom-if"
      if="[[!disableValidStatus]]">
      <mtz-validation-status
        errors="[[validationErrors]]"
        invalid-icon="[[invalidStatusIcon]]"
        valid-icon="[[validStatusIcon]]"
        messages="[[__filterMessages(validationMessages, disableRetype)]]"
        values="[[__validationValues]]"
      ></mtz-validation-status>
    </template>
  </template>

  <script>
    Polymer({
      is: 'mtz-update-password',
      /* global zxcvbn */
      behaviors: [
        Polymer.IronValidatableBehavior,
        Polymer.LazyImportsBehavior
      ],
      properties: {
        /* Allowed characters regex pattern, gets combined with symbols to build allowedPattern */
        allowedCharacters: {
          type: String,
          value: 'a-zA-Z\\d',
        },
        /* Allowed symbols regex pattern, gets combined with characters to build allowedPattern */
        allowedSymbols: {
          type: String,
          value: '~`!@#\\$%\\^&\\*\\(\\)_\\+\\-=\\[\\]{}\\|;:\'\",<\\.>\\/\\?;',
        },
        /* AlwaysFloatLabel override for the password input */
        alwaysFloatLabel: {
          type: Boolean,
          value: false,
        },
        /* Triggers this element to immediately validate itself when it is attached */
        autoValidate: {
          type: Boolean,
          value: false,
          observer: '__autoValidate',
        },
        /* Passthrough for autocomplete */
        autocomplete: {
          type: String,
          value: 'new-password',
        },
        /* AutoFocus override for the password input */
        autofocus: {
          type: Boolean,
          value: false,
        },
        /* Removes the status section showing if you've hit all the requirements or not */
        disableValidStatus: {
          type: Boolean,
          value: false,
        },
        /* Removes the requirement for entering a password twice */
        disableRetype: {
          type: Boolean,
          value: false,
        },
        /* Maximum number of characters allowed */
        maxlength: {
          type: Number,
          // Our observer for building out values won't fire in 1.x if we don't have a base value
          value: Infinity,
        },
        /* Minimum number of characters required */
        minlength: {
          type: Number,
          value: 8,
        },
        /* Minimum number of capital letters required */
        minUpper: {
          type: Number,
          value: 1,
        },
        /* Minimum number of letters required, regardless of case */
        minLetters: {
          type: Number,
          value: 0,
        },
        /* Minimum number of lower case letters required */
        minLower: {
          type: Number,
          value: 1,
        },
        /* Minimum number of numbers required */
        minNumbers: {
          type: Number,
          value: 1,
        },
        /* Minimum number of symbols required, valid symbols are defined by the symbols property */
        minSymbols: {
          type: Number,
          value: 0,
        },
        /* The user entered password */
        value: {
          type: String,
          notify: true,
          observer: 'validate',
        },
        /* Error message to display when the retype password does not match */
        retypePasswordError: {
          type: String,
          value: 'Passwords do not match',
        },
        /* The second user entered password to validate against */
        retypeValue: {
          type: String,
          notify: true,
          observer: 'validate',
        },
        /* option to show/hide reveal password text icon */
        reveal: {
          type: Boolean,
          value: false
        },
        /* Whether or not this element is form required */
        required: {
          type: Boolean,
          value: false,
        },
        /* NoLabelFloat override for the password input */
        noLabelFloat: String,
        /* show/hide strength meter */
        showStrengthMeter: {
          type: Boolean,
          value: false
        },
        /* Whether or not this elements state is invalid */
        invalid: {
          type: Boolean,
          notify: true,
          reflectToAttribute: true,
        },
        /* The icon to use when a status message is invalid */
        invalidStatusIcon: String,
        /* Label override for the password input */
        passwordLabel: {
          type: String,
          value: 'Password',
        },
        /* Placeholder override for the password input */
        placeholder: String,
        /* AlwaysFloatLabel override for the retype password input */
        retypeAlwaysFloatLabel: {
          type: Boolean,
          value: false,
        },
        /* AutoFocus override for the retype password input */
        retypeAutofocus: {
          type: Boolean,
          value: false,
        },
        /* NoLabelFloat override for the retype password input */
        retypeNoLabelFloat: String,
        /* Label override for the retype password input */
        retypePasswordLabel: {
          type: String,
          value: 'Confirm Password',
        },
        /* Placeholder override for the retype password input */
        retypePlaceholder: String,
        /* The icon to use when a status message is valid */
        validStatusIcon: String,
        /* Strength score and corresponding text to display */
        strength: {
          type: Object,
          value() {
            return {
              0: 'Too short',
              1: 'Weak',
              2: 'Fair',
              3: 'Good',
              4: 'Strong'
            };
          }
        },
        /* The current validation errors */
        validationErrors: {
          type: Object,
          notify: true,
        },
        /* The messages to display when matching against an error */
        validationMessages: {
          type: Array,
          value() {
            return [
              {
                key: 'maxlength',
                message: 'A maximum of ${maxlength} characters',
              },
              {
                key: 'minlength',
                message: 'A minimum of ${minlength} characters',
              },
              {
                key: 'minUpper',
                message: 'At least ${minUpper} uppercase',
              },
              {
                key: 'minLetters',
                message: 'At least ${minLetters} ${lettersText}',
              },
              {
                key: 'minLower',
                message: 'At least ${minLower} lowercase',
              },
              {
                key: 'minNumbers',
                message: 'At least ${minNumbers} ${numbersText}',
              },
              {
                key: 'minSymbols',
                message: 'At least ${minSymbols} ${symbolsText}',
              },
            ];
          },
        },
        /* The values to pass to the `<mtz-validation-status>` element, constructed from the flags. */
        __validationValues: {
          type: Object,
          computed: `__buildValidationValues(allowedCharacters, allowedSymbols, maxlength, minlength, minUpper,
            minLetters, minLower, minNumbers, minSymbols)`,
        },
        __passwordStrengthMeterValue: String,
        __passwordStrengthTextValue: {
          type: String,
          value: ''
        },
        __checked: {
          type: Boolean,
          value: false
        }
      },
      observers: [
        '__updateStrengthMeter(value)'
      ],
      /**
       * Update strength meter indicator and strength text
       * @private
       *
       * @param {String} value
       */
      __updateStrengthMeter(value) {

        //do not run strength meter when its hidden
        if (!this.showStrengthMeter) return;

        this.importLazyGroup('zxcvbn').then(() => {
          const result = zxcvbn(value);
          // Update the password strength meter
          this.__passwordStrengthMeterValue = result.score;

          // Update the text indicator
          this.__passwordStrengthTextValue = value !== '' ?
            `Strength:&nbsp;<span class="result-color${result.score}">${this.strength[result.score]}</span>` : '';
        });
      },
      /**
       * set password type when the reveal icon is clicked
       * @private
       *
       * @param {Boolean} checked
       * @return {String} - password type
       */
      __setPasswordType(checked) {
        return checked ? 'text' : 'password';
      },
      /**
       * Overloads how this element fetches it's valid status
       * @protected
       *
       * @param {String} value
       * @return {Boolean}
       */
      _getValidity() {
        const validPassword = this.$.validator.validate(this.value);
        const validRetype = this.__validateRetype();
        // Using this.value instead of the supplied value to prevent issues with using retype
        return this.value ?
          // Using $.validator instead of $.password here to get around the minlength issue
          (validPassword && validRetype) :
          !this.required;
      },
      /**
       * Used to trigger validation if autoValidate is set to true.
       * @private
       *
       * @param {Boolean} auto
       */
      __autoValidate(auto) {
        if (auto) {
          this.validate(this.value);
        }
      },
      /**
       * Constructs the _validationValues object from the requirements.
       *
       * @protected
       * @param {String} allowedCharacters
       * @param {String} allowedSymbols
       * @param {Number} maxlength
       * @param {Number} minlength
       * @param {Number} minUpper
       * @param {Number} minLetters
       * @param {Number} minLower
       * @param {Number} minNumbers
       * @param {Number} minSymbols
       * @return {Object}
       */
      __buildValidationValues(allowedCharacters, allowedSymbols, maxlength, minlength, minUpper, minLetters,
        minLower, minNumbers, minSymbols) {
        return {
          allowedCharacters,
          allowedSymbols,
          maxlength,
          minlength,
          minUpper,
          minLetters,
          minLower,
          minNumbers,
          minSymbols,
          lettersText: minLetters > 1 ? 'letters' : 'letter',
          numbersText: minNumbers > 1 ? 'numbers' : 'number',
          symbolsText: minSymbols > 1 ? 'symbols' : 'symbol',
        };
      },
      /**
       * Removes retype validation message when retype is disabled.
       * @private
       *
       * @param {Object[]} messages
       * @param {Boolean} disableRetype
       * @return {Object[]}
       */
      __filterMessages(messages, disableRetype) {
        return messages.filter((message) => {
          return !disableRetype || (message.key !== 'matching');
        });
      },
      /**
       * Takes a value and converts it to a safe pattern to use with paper-input.
       *
       * @protected
       * @param {String} value
       * @param {String} [symbols = '']
       * @return {String}
       */
      __getPattern(value, symbols = '') {
        // Take our value and check to see what symbols require a '\' prefix, then inject it as needed.
        return (value || '').replace(
          new RegExp(`([${symbols}])`, 'g'),
          (str, symbol) => {
            return (symbols.match(`\\\\\\${symbol}`) || []).length > 0 ?
              `\\${symbol}` :
              symbol;
          });
      },
      /**
       * Takes a value and casts it to a Boolean.
       * @private
       *
       * @param {Object} value
       * @return {Boolean}
       */
      __toBoolean(value) {
        return Boolean(value);
      },
      /**
       * Calls validate() on the retype-password field if it exists.
       * @private
       *
       * @return {Boolean} - whether or not retype-password is valid
       */
      __validateRetype() {
        const retype = Polymer.dom(this.root).querySelector('#retype-password');
        return !retype || retype.validate(this.retypeValue);
      },
    });
  </script>
</dom-module>