<commit_before><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../paper-input/paper-input-addon-behavior.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<script src="../zxcvbn/dist/zxcvbn.js"></script>
<!--
`<gold-password-input-strength-meter>` is a password strength meter for use with 
`<paper-input-container>`. It shows the strength of the password entered in the input.

### Styling

The following mixin is available for styling:

TODO: check what to do with styling and eventually custom property

Custom property | Description | Default
----------------|-------------|----------
`--gold-password-input-strength-meter-veryweak` | TODO | `TODO`
`--gold-password-input-strength-meter-weak` | TODO | `TODO`
`--gold-password-input-strength-meter-medium` | TODO | `TODO`
`--gold-password-input-strength-meter-strong` | TODO | `TODO`
`--gold-password-input-strength-meter-verystrong` | TODO | `TODO`
Not sure a mixin could be appliead in our case...
`--gold-password-input-strength-meter` | Mixin applied to the element | `{}`
-->
<dom-module id="gold-password-input-strength-meter">
  <template>

    <style>
      :host {
        display: inline-block;
        float: right;

        @apply(--paper-font-caption);
        @apply(--gold-password-input-strength-meter);
      }

      :host-context([dir="rtl"]) {
        float: left;
      }

    </style>

    <span>
      Password strength:
      <span id="strengthLabel">[[_strengthMeterScore]]</span>
      <paper-tooltip
        for="strengthLabel"
        position="bottom"
        offset="14"
        >
        <!-- TODO: add possible small icons for warning and suggestions... -->
        <span>[[_strengthMeterFeedback.warning]]</span>
        <span>[[_strengthMeterFeedback.suggestions]]</span>
      </paper-tooltip>
    </span>

  </template>
</dom-module>

<script>
  Polymer({
    is: 'gold-password-input-strength-meter',

    behaviors: [
      Polymer.PaperInputAddonBehavior
    ],

    properties: {
      _strengthMeterScore: {
        type: String,
        value: ''
      },
      _strengthMeterFeedback: {
        type: Object,
        notify: true,
        value: ''
      }
    },

    update: function(state) {
      if (!state.inputElement) {
        return;
      }

      state.value = state.value || '';

      // Use zxcvbn to evaluate the strength of the password.
      var result = zxcvbn(state.value);

      // TODO: to change the color, it might be better to use a class...
      this._strengthMeterFeedback = result.feedback;
      switch(result.score) {
        case 0:
          this._strengthMeterScore = "Very weak";
          this.$.strengthLabel.color = '#d32f2f'; //--paper-red-700;
          break;
        case 1:
          this._strengthMeterScore = "Weak";
          this.$.strengthLabel.color = '#f57c00'; // --paper-orange-700
          break;
        case 2:
          this._strengthMeterScore = "Medium";
          this.$.strengthLabel.color = '#fbc02d'; // --paper-yellow-700
          break;
        case 3:
          this._strengthMeterScore = "Strong";
          this.$.strengthLabel.color = '#1976d2'; // --paper-blue-700
          break;
        case 4:
          this._strengthMeterScore = "Very strong";
          this.$.strengthLabel.color = '#388e3c'; // --paper-green-700
          break;
      }
    }
  });<commit_msg>added strength color support through custom properties<commit_after><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-input/paper-input-addon-behavior.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<script src="../zxcvbn/dist/zxcvbn.js"></script>
<!--
`<gold-password-input-strength-meter>` is a password strength meter for use with 
`<paper-input-container>`. It shows the strength of the password entered in the input.

### Styling

The following mixin is available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--gold-password-input-strength-meter-none-color` | The text color for a strength value of None  | `--paper-red-700`
`--gold-password-input-strength-meter-veryweak-color` | The text color for a strength value of Very Weak  | `--paper-red-700`
`--gold-password-input-strength-meter-weak-color` | The text color for a strength value of Weak  | `--paper-orange-700`
`--gold-password-input-strength-meter-medium-color` | The text color for a strength value of Medium  | `--paper-yellow-700`
`--gold-password-input-strength-meter-strong-color` | The text color for a strength value of Strong  | `--paper-blue-700`
`--gold-password-input-strength-meter-verystrong-color` | The text color for a strength value of Very Strong  | `--paper-green-700`
Not sure a mixin could be appliead in our case...
`--gold-password-input-strength-meter` | Mixin applied to the element | `{}`
-->
<dom-module id="gold-password-input-strength-meter">
  <template>

    <style>
      :host {
        display: inline-block;
        float: right;

        @apply(--paper-font-caption);
        @apply(--gold-password-input-strength-meter);
      }

      :host-context([dir="rtl"]) {
        float: left;
      }
      
      .None {
        color: var(--gold-password-input-strength-meter-none-color, --paper-grey-700);
      }
      .Very.Weak {
        color: var(--gold-password-input-strength-meter-veryweak-color, --paper-red-700);
      }
      .Weak {
        color: var(--gold-password-input-strength-meter-weak-color, --paper-orange-700);
      }
      .Medium {
        color: var(--gold-password-input-strength-meter-medium-color, --paper-yellow-700);
      }
      .Strong {
        color: var(--gold-password-input-strength-meter-strong-color, --paper-blue-700);
      }
      .Very.Strong {
        color: var(--gold-password-input-strength-meter-verystrong-color, --paper-green-700);
      }

    </style>

    <span>
      Password strength:
      <span class$=[[_strengthMeterScore]] id="strengthLabel">[[_strengthMeterScore]]</span>
      <paper-tooltip
        for="strengthLabel"
        position="bottom"
        offset="14">
        <!-- TODO: add possible small icons for warning and suggestions... -->
        <div class="warning">[[_strengthMeterFeedback.warning]]</div>
        <div class="suggestions">[[_strengthMeterFeedback.suggestions]]</div>
      </paper-tooltip>
    </span>

  </template>
</dom-module>

<script>
  Polymer({
    is: 'gold-password-input-strength-meter',

    behaviors: [
      Polymer.PaperInputAddonBehavior
    ],

    properties: {
      _strengthMeterScore: {
        type: String,
        //notify: true, TODO: check if we need this to update the class...
        value: ''
      },
      _strengthMeterFeedback: {
        type: Object,
        //notify: true, TODO: check if we need this to update the paper-tooltip...
        value: ''
      }
    },

    update: function(state) {
      if (!state.inputElement) {
        return;
      }

      state.value = state.value || '';

      if (state.value === '') {
        this._strengthMeterScore = "None"
      }

      // Use zxcvbn to evaluate the strength of the password.
      var result = zxcvbn(state.value);

      this._strengthMeterFeedback = result.feedback;
      switch(result.score) {
        case 0:
          this._strengthMeterScore = "Very Weak";
          break;
        case 1:
          this._strengthMeterScore = "Weak";
          break;
        case 2:
          this._strengthMeterScore = "Medium";
          break;
        case 3:
          this._strengthMeterScore = "Strong";
          break;
        case 4:
          this._strengthMeterScore = "Very Strong";
          break;
      }
    }
  });
{'fraction_non_alphanumeric': 0.14826106594399277, 'fraction_numerical': 0.010275519421860885, 'mean_word_length': 2.440947940947941, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '658435', 'n_tokens_mistral': 2820, 'n_tokens_neox': 2578, 'n_words': 653}