Styling of strength meter

[binarykitchen]

Make it look like the screenshot at
https://blogs.dropbox.com/tech/2012/04/zxcvbn-realistic-password-strength-estimation/

Split it in bars and alter color on score.

Would be great, thanks

[seethroughdev]

There is currently valid and invalid, so you can easily hook into those. If you want to style based off each score value, you can use the parent attribute data-score attribute.

[data-score="4"] span.passwordField__meter {
   background: orange !important;
}

or pass the style in as an object.

[seethroughdev]

the split bars, you could use gradient if you know the width, or overlay with lines. Best I can think of there.

[binarykitchen]

tell me, how do you pass the style in as an object?

[binarykitchen]

would be great if I can set the background of the getMeterStyle() on ever score change in a listener.

[binarykitchen]

here some inspiration i worked out the SASS/CSS for the split bars:

  @mixin passwordMeter($score, $colour) {
    background: linear-gradient(
      to right,
      $colour, $colour 90%,
      transparent 90%, transparent 100%
    ) !important;

    width:           #{($score * $barWidth) + $barWidth} !important;
    background-size: $barWidth 24px !important;
  }

  .passwordField__meter {
    @include passwordMeter(0, #FC6F6F);
    margin-right: 0 !important;
  }

  &[data-score="1"] .passwordField__meter {
    @include passwordMeter(1, #FCAF6F);
  }

  &[data-score="2"] .passwordField__meter {
    @include passwordMeter(2, #DCCF73);
  }

  &[data-score="3"] .passwordField__meter {
    @include passwordMeter(3, #CCEF7F);
  }

  &[data-score="4"] .passwordField__meter {
    @include passwordMeter(4, #5CF072);
  }

[seethroughdev]

nice. looks good... lemme know when there's something public to check out.