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; } } } |