Comparing passwords using angularJS

While working on a single page application using AngularJs, I did come across a situation where I needed to compare and validate passwords. Using angular documentation site, I found that the answer to my problem was to use directives. With angularJs directive you have all the control about you HTML markup.  Directives are executed during DOM compilation allowing you to transform DOM or add new behaviours.

There are directives that are offered out of box, but that does not mean you can not implement yours.  Some of the points you should have when implementing your directives include:

-Directives have camel cased name e.g ngBind. The directives can then be invoked by translating the camel case name into a snake case with special characters like – or _. Optionally you can prefix the directive with x- or data- to make it HTML validator compliant. This is seen on the custom directive I have worked on here.

e.g


<input bs-password-validator="password" ></span>

-AngularJS have restrictions which are a subset of EACM which provides restriction to specific declarations style. Omitting means that the directive will be allowed on attributes only. They are as follows:

  1. E-Element name <my-directive></my-directive>
  2. A-attribute <div my-directive=”expression”></div>
  3. C-class <div class=”my-directive:expression;”></div>
  4. M-comment <!–directive: my-directive exp –>

Without further ado, lets dive to the main topic of the day.  I started by adding html markup  as shown below

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;"><div></span></pre>
<div class="container" style="padding-top:100px">
 <div class="content">
 <div class="wrapper">
 <div class="proper-content">
 <form class="form-horizontal" name="registerForm" data-ng-controller="testCtrl" novalidate>

<div class="control-group">
 <label class="control-label" for="password">Password</label>
 <div class="controls">
 <input type="password" name="password" placeholder="password" id="password" data-ng-model="account.Password" required />
 <span class="text-error" data-ng-show="registerForm.password.$dirty && registerForm.password.$error.required">Password is required</span>

</div>
 </div>

<div class="control-group">
 <label class="control-label" for="repeatPassword">Confirm Password</label>
 <div class="controls">
 <input type="password" name="repeatPassword" id="repeatPassword" placeholder="repeat password" bs-password-validator="password" ng-model="account.ConfirmPassword" required>

<span class="text-error" ng-show="registerForm.repeatPassword.$dirty &amp;&amp; registerForm.repeatPassword.$error.required" style="display: none;">Repeat password</span>
 <span class="text-error" data-ng-show="registerForm.repeatPassword.$dirty && !registerForm.repeatPassword.$error.required && registerForm.repeatPassword.$error.repeat" style="display: none">Fields are not equal!
 </span>
 </div>
 </div>

 <div class="control-group">
 <div class="controls">
 <button class="btn btn-primary" data-ng-click="SaveUser()">Save</button>
 </div>
 </div>
 </form>
 </div></div></div></div></div>

My directive looks like this:

angular.module('test.directives',[]).directive('bsPasswordValidator', function () {</pre>
return {
 require: "ngModel",
 link: function (scope, elem, attrs, ctrl) {
 var otherInput = elem.inheritedData("$formController")[attrs.bsPasswordValidator];

ctrl.$parsers.push(function (value) {
 if (value === otherInput.$viewValue) {
 ctrl.$setValidity("repeat", true);
 return value;
 }
 ctrl.$setValidity("repeat", false);
 });

otherInput.$parsers.push(function (value) {
 ctrl.$setValidity("repeat", value === ctrl.$viewValue);
 return value;
 });
 }
 };
});

<span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">

 

In angular a controller is a javascript type that is used to make instances of the Scope, and this excludes root scope (more about scope to come).  There are mainly two uses of controllers:

  1. Set up the initial state of a scope object
  2. Add behavior to the scope object

So here is the my test controller and application set up

angular.module('test',['test.directives']);</pre>
function testCtrl($scope) {
$scope.Password='';
$scope.ConfirmPassword='';
 $scope.SaveUser = function () {

 $scope.registerForm.repeatPassword.$dirty = true;
 $scope.registerForm.password.$dirty = true;

 if ($scope.registerForm.$valid && $scope.registerForm.repeatPassword.$valid) {
<!--call your services after here-->
 }
}
}
<pre>

If you have followed and done everything correctly you should be able to get the following screen if you type mismatched passwords.
password_comparer

And there you go.This code is just for demonstration, and so where I would prefer if you can separate directives into there own directory.

And your comments are highly appreciated, and its the only way to know you were here 😉

Happy coding and welcome back!! 🙂

Sample code can be found here 

Advertisements

Tags: ,

About Piusn

Enthusiastic Software Developer

2 responses to “Comparing passwords using angularJS”

  1. shahzebkhan111 says :

    Great tutorial, it helped me alot.

What's your thought on the subject?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: