Strength of the password Directive in Angular

Recently I was working a Angular form validation and directive. I was creating a strength of the password Directive in Angular.
In this post I will show how to code an Angular directive to measure the strength of the password.

**********************************************************************************
Directive
passwordStrengthBar.ts

import {Component, OnChanges, Input, SimpleChange} from '@angular/core';

@Component({
    selector: 'password-strength-bar',
    styles: [`
        ul#strengthBar {
        display:inline;
        list-style:none;
        margin:0;
        margin-left:15px;
        padding:0;
        vertical-align:2px;
    }
    .point:last {
        margin:0 !important;
    }
    .point {
        background:#DDD;
        border-radius:2px;
        display:inline-block;
        height:5px;
        margin-right:1px;
        width:20px;
    }`],
    template: `<div id="strength" #strength> 
                         <small>{{barLabel}}</small> 
                         <ul id="strengthBar"> 
                             <li class="point" [style.background-color]="bar0"> </li> 
                             <li class="point" [style.background-color]="bar1"> </li> 
                             <li class="point" [style.background-color]="bar2"> </li> 
                             <li class="point" [style.background-color]="bar3"> </li>
                             <li class="point" [style.background-color]="bar4"> </li> 
                         </ul> 
                     </div>`
})

export class PasswordStrengthBar implements OnChanges {
    @Input() passwordToCheck: string;
    @Input() barLabel: string;
    bar0: string;
    bar1: string;
    bar2: string;
    bar3: string;
    bar4: string;
    private colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
    private static measureStrength(p) {
        var _force = 0;
        var _regex = /[$-/:-?{-~!"^_`\[\]]/g; // "
        var _lowerLetters = /[a-z]+/.test(p);
        var _upperLetters = /[A-Z]+/.test(p);
        var _numbers = /[0-9]+/.test(p);
        var _symbols = _regex.test(p);
        var _flags = [_lowerLetters, _upperLetters, _numbers, _symbols];
        var _passedMatches = 0;

        for (let _flag of _flags) {
            _passedMatches += _flag === true ? 1 : 0;
        }

        _force += 2 * p.length + ((p.length >= 10) ? 1 : 0);
        _force += _passedMatches * 10;

        // penality (short password)
        _force = (p.length <= 6) ? Math.min(_force, 10) : _force;

        // penality (poor variety of characters)
        _force = (_passedMatches === 1) ? Math.min(_force, 10) : _force;
        _force = (_passedMatches === 2) ? Math.min(_force, 20) : _force;
        _force = (_passedMatches === 3) ? Math.min(_force, 40) : _force;
        return _force;
    }
    private getColor(s) {
        var idx = 0;
        if (s <= 10) {
            idx = 0;
        }
        else if (s <= 20) {
            idx = 1;
        }
        else if (s <= 30) {
            idx = 2;
        }
        else if (s <= 40) {
            idx = 3;
        }
        else {
            idx = 4;
        }
        return {
            idx: idx + 1,
            col: this.colors[idx]
        };
    }
    ngOnChanges(changes: {[propName: string]: SimpleChange}): void {
        var password = changes['passwordToCheck'].currentValue;
        this.setBarColors(5, '#DDD');
        if (password) {
            let c = this.getColor(PasswordStrengthBar.measureStrength(password));
            this.setBarColors(c.idx, c.col);
        }
    }
    private setBarColors(count, col) {
        for (let _n = 0; _n < count; _n++) {
            this['bar' + _n] = col;
        }
    }
}
**********************************************************************************
app.ts

import {Component, NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import { PasswordStrengthBar } from './passwordStrengthBar';

@Component({
    selector: 'my-app',
    template: `<h3>Angular 2 Password Strength Bar</h3> 
                         <div> 
                             <form name="myForm" novalidate> 
                                 <input type="password" 
                                            class="form-control" 
                                            id="password" 
                                            name="password" 
                                            placeholder="Enter password" 
                                            [(ngModel)]="account.password" 
                                            #password="ngModel" 
                                            minlength="5" 
                                            maxlength="50" 
                                            required> 
                                 <password-strength-bar [passwordToCheck]="account.password"  barLabel]="barLabel"> </password-strength-bar>                                       
                            </form> 
                         </div>`,
})

export class App {
    public account = {
        password: null
    };

    public barLabel: string = "Password strength:";
}
**********************************************************************************
Happy Coding :)