All files strength-meter.component.ts

90% Statements 9/10
50% Branches 1/2
100% Functions 3/3
88.89% Lines 8/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96                                                                                                                                                              1x     2x     2x 1x 1x 1x 1x         1x  
import {Component, EventEmitter, Input, Output} from '@angular/core';
import zxcvbn from 'zxcvbn/dist/zxcvbn.js';
 
@Component({
  template: `
        <div class="strength-meter">
            <div class="strength-meter-fill" [attr.data-strength]="strength"></div>
        </div>
    `,
  styles: [
    `
            .strength-meter {
                position: relative;
                height: 3px;
                background: #DDD;
                margin: 10px auto 20px;
                border-radius: 3px;
            }
 
            .strength-meter:before,
            .strength-meter:after {
                content: '';
                height: inherit;
                background: transparent;
                display: block;
                border-color: #FFF;
                border-style: solid;
                border-width: 0 5px 0 5px;
                position: absolute;
                width: 80px;
                z-index: 10;
            }
 
            .strength-meter:before {
                left: 70px;
            }
 
            .strength-meter:after {
                right: 70px;
            }
 
            .strength-meter-fill {
                background: transparent;
                height: inherit;
                position: absolute;
                width: 0;
                border-radius: inherit;
                transition: width 0.5s ease-in-out, background 0.25s;
                -webkit-transition: width 0.5s ease-in-out, background 0.25s;
            }
 
            .strength-meter-fill[data-strength='0'] {
                background: darkred;
                width: 20%;
            }
 
            .strength-meter-fill[data-strength='1'] {
                background: orangered;
                width: 40%;
            }
 
            .strength-meter-fill[data-strength='2'] {
                background: orange;
                width: 60%;
            }
 
            .strength-meter-fill[data-strength='3'] {
                background: yellowgreen;
                width: 80%;
            }
 
            .strength-meter-fill[data-strength='4'] {
                background: green;
                width: 100%;
            }
        `
  ],
  selector: 'strength-meter'
})
export class StrengthMeterComponent {
  strength: any;
  @Output()
  measure = new EventEmitter();
 
  @Input()
  set value(value: string) {
    Eif (value) {
      const result = zxcvbn(value);
      this.strength = result.score;
      this.measure.emit(this.strength);
    } else {
      this.strength = undefined;
    }
  }
}