AngularJS : Filters - Custom

Encrypt Decrypt

by Sukanya Halder

HTML

<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<div class='description'>
  <h3>
custom filters
</h3>
  <h4>
Encrypt and Decrypt using 
</h4>
</div>

<div ng-app='myModule' ng-controller='myController'>
  <!-- Description
  <br /><span ng-model='description'>{{description|lowercase}}</span>
<span ng-module='description'>{{description|charCounter}}</span>-->
  <div>Encrypt
    <br />
    <textarea ng-model='description'>{{description}}</textarea>
    </div>
  <div>    
    <span ng-model='description'>{{description|encrypt}}</span>
    <br /><br /><br />
    Decrypt<br /><textarea ng-model='decoded'>{{decoded}}</textarea> 
    <span ng-model='decoded'>{{decoded|decrypt}}</span></div>
</div>

CSS

span {
  margin: 12px;
  background: yellow;
}

textarea {
  width: 250px;
  height: 100px;
}

a {
  font-family: verdana;
  font-weight: bold;
  font-size: 0.6em;
}

JavaScript

var app = angular.module('myModule', []);
app.filter('lowercase', function() {
  return function(input) {
    return input.toLowerCase();
  };
});
app.filter('charCounter', function() {
  return function(input) {
    return input.length;
  };
});
app.filter('wordCounter', function() {
  return function(input) {
    if (input.length == 0) return 0;
    var regex = /\s\s+/g;
    return input.trim().replace(regex, ' ').split(' ').length;
  };
});
app.filter('encrypt', function() {
  return function(input) {
    var encrypted = CryptoJS.AES.encrypt(input, "1234");
    return encrypted.toString();
  };
});
app.filter('decrypt', function() {
  return function(input) {
    var decrypted = CryptoJS.AES.decrypt(input, "1234");
    return decrypted.toString(CryptoJS.enc.Utf8);
  };
});
app.controller('myController', ['$scope', function($scope) {
  $scope.date1 = 20161212;
  $scope.description = "sukanya";
  $scope.decoded = "";
}]);