JSFiddle - React, Tailwind, and code Playground

by nishant969

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://crypto.stanford.edu/sjcl/sjcl.js"></script>
<body ng-app="ServiceExample">
    <div ng-controller="MyController">
        	<h4>{{labelText}}</h4>
        <div>
            <textarea name="text" ng-model="text" type="text" rows="4" cols="50"></textarea>
        </div>
        <br/>
        <button ng-click="encryptService()">Encrypt</button>
        <button ng-click="decryptService()">Decrypt</button>
        <br/>
    </div>
</body>

</html>

JavaScript

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

app.controller( 'MyController', function AppCtrl($scope, EncryptService, DecryptService) {
  $scope.text = 'AngularJS';
  $scope.labelText = "";
  $scope.encryptService = function() {
  	$scope.labelText = "Encrypted text: " + EncryptService.encrypt($scope.text);
  };
  $scope.decryptService = function() {
  	$scope.labelText = "Decrypted text: " + DecryptService.decrypt($scope.text);
  };
});

app.service('EncryptService', function() {
  this.encrypt = function(text) {
    return sjcl.encrypt("password", text);
  };
});

app.service('DecryptService', function() {
  this.decrypt = function(text) {
    return sjcl.decrypt("password", text);
  };
});