Password strength check using directive

a directive for checking password strength

by masudcsesust04

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div class="" ng-app="myApp" ng-controller="AppCtrl">
    <form name="passwordForm">
    <div class="control-group">
        <label class="control-label">Password</label>
        <div class="controls">
            <input type="password" name="password" ng-model="user.password" password-strength="user.password" />
            <span class="help-inline" data-ng-show='passwordForm.password.$valid && passwordForm.password.$dirty' data-ng-class="strength">This password is {{strength}} ! </span>
        </div>        
    </div>
    </form>    
        
    <pre>strength = {{strength}}</pre>    
    <pre>password = {{user.password}}</pre>
</div>

CSS

.strong   { color: #060; border-color: #0F0;}
.medium   { color: #C60; border-color: #FC0;}
.weak     { color: #900; border-color: #F00;}
.strength { padding: 1px 10px; border: 2px solid; color: #FFF;}

JavaScript

'use strict';

var app = angular.module('myApp', []);

app.controller('AppCtrl', function($scope){    

});

app.directive("passwordStrength", function(){
    return {        
        restrict: 'A',
        link: function(scope, element, attrs){                    
            scope.$watch(attrs.passwordStrength, function(value) {
                console.log(value);
                if(angular.isDefined(value)){
                    if (value.length > 8) {
                        scope.strength = 'strong';
                    } else if (value.length > 3) {
                        scope.strength = 'medium';
                    } else {
                        scope.strength = 'weak';
                    }
                }
            });
        }
    };
});