Email validate and strength, generate etc of password

1. Email validation 2.. Password strength message 3. Password generate and 4. Show password

by masudcsesust04

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<h3>New User</h3>                    
<div class="row-fluid" data-ng-controller="LoginCtrl">
    <form name="loginForm" class="form-horizontal" data-ng-submit="submit()" autocomplete='on'>           
        <div class="control-group">
            <label class="control-label">Email</label>
            <div class="controls">
                <input type="email" name="email" data-ng-model="user.mail" required />
                <span class="help-inline weak" data-ng-show="loginForm.email.$error.email">Invalid email!</span>
            </div>
        </div>        
        <div class="control-group">            
            <label class="control-label">Password</label>
            <div class="controls">
                <input type="password" name="password" id="password" data-ng-model="password" size="25" required />
                <span class="help-inline strength" ng-show='loginForm.password.$valid' ng:class="strength">This password is {{strength}} !</span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">&nbsp;</label>
            <div class="controls">
                 <button type="button" class="btn" data-ng-click="generate()">Generate</button>
                <input type="checkbox" name="showPwd" ng:model="show_pwd"> Show password:
                <span ng:show="show_pwd">{{password}}</span>
            </div>
        </div>        
        <div class="control-group">
            <label class="control-label">&nbsp;</label>
            <div class="controls">
                 <button type="submit" class="btn btn-info" data-ng-disabled="loginForm.$invalid">Save</button>
            </div>
        </div>        
    </form>
</div>

CSS

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

JavaScript

'use strict';

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

// url of the service
var SERVICE_URL = 'http://angularjs.org/generatePassword.php' + '?callback=JSON_CALLBACK';

app.controller('LoginCtrl', function($scope, $http){          
    // watch the password field and grade it.
    $scope.$watch('password', function() {
        if (angular.isDefined($scope.password)) {
            if ($scope.password.length > 8) {
                $scope.strength = 'strong';
            } else if ($scope.password.length > 3) {
                $scope.strength = 'medium';
            } else {
                $scope.strength = 'weak';
            }
        }
    });
    
    // onclick genrate password
    $scope.generate = function() {        
        $http.jsonp(SERVICE_URL).then(function(e){
            //console.log(e);            
            $scope.password = e.data.password;            
        });
    };    
    
    $scope.password = "";
    $scope.list = [];
    $scope.submit = function() {        
    };
});