JSFiddle - React, Tailwind, and code Playground

by allen Yu

HTML

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script type="text/javascript" src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-app="demoApp">
    <div class="container">
        <h1>CryptoJs AES Encryptor / Decryptor</h1>
        <h2>The Cipher Algorithms</h2>
        <p>Reference:<a href="https://code.google.com/p/crypto-js/">google crypto-js</a></p>
        <div ng-controller="mainCtrl as vm">
            <div class="form-group has-warning">
                <label class="control-label">Text to encrypt/decrypt</label>
                <textarea class="form-control" id="intext" data-ng-model="model.intext"></textarea>
            </div>
            <div class="form-group has-warning">
                <label class="control-label">Passphrase</label>
                <input type="text" class="form-control" id="passphrase" data-ng-model="model.pwd"></input>
            </div>
            <div class="form-group has-success">
                <label class="control-label">Encrypted text</label>
                <textarea class="form-control" id="encryptedText" data-ng-model="model.encTxt"></textarea>
            </div>
            <div class="form-group has-success">
                <label class="control-label">Decrypted text</label>
                <textarea class="form-control" id="decryptedText" ng-model="model.decText"></textarea>
            </div>
            <div >
                <button type="button" id="btnAES" class="btn btn-primary" data-ng-click="aes()">Encrypt/Decrypt</button>
                <button type="button" id="btnClear" class="btn btn-warning" data-ng-click="clear()">Clear</button>
            </div>
        </div>
        <hr>
    </div>
</body>

CSS

.container {
    margin-top: 20px;
}

JavaScript

angular.module("demoApp", [])
    .controller('mainCtrl', ['$scope', function ($scope) {
    var viewModel = function () {
        var self = this;
        self.intext = "";
        self.pwd = "";
        self.encTxt = null;
        self.decText = null;
    };

    $scope.model = new viewModel();

    $scope.aes = function () {
        var encrypted = CryptoJS.AES.encrypt($scope.model.intext, $scope.model.pwd);
        var decrypted = CryptoJS.AES.decrypt(encrypted, $scope.model.pwd);
        $scope.model.encTxt = encrypted;
        $scope.model.decText = decrypted.toString(CryptoJS.enc.Utf8);
    };

    $scope.clear = function () {
        $scope.model.intext = "";
        $scope.model.pwd = "";
        $scope.model.encTxt = "";
        $scope.model.decText = "";
    };
}]);