implemented write and encrypted preview

src/css/write.scss

@@ -19,13 +19,18 @@
 
         .subject-line {
             float: left;
-            padding: 0.813em;
+            padding: 0.563em;
+            width: 80%;
             color: $header-text-color;
         }
 
         .subject {
+            border: 0!important;
             font-weight: bold;
+            font-size: 1em;
+            width: 100%;
             color: $default-text-color;
+            outline: 0px;
         }
 
         .attachment-btn {
@@ -37,8 +42,12 @@
         }
     }
 
+    *[contentEditable] {
+        outline: 0px;
+    }
+
     .encrypt-preview {
-        margin-top: 1.5em;
+        margin-top: 3em;
         font-family: monospace;
         color: $grey-text-color;
         word-wrap: break-word;

src/js/app-config.js

@@ -19,5 +19,9 @@ define([], function() {
 		workerPath: 'js'
 	};
 
+	app.string = {
+		signature: 'Sent securely from whiteout mail'
+	};
+
 	return app;
 });

src/js/app.js

@@ -11,7 +11,7 @@ require([
 ], function(angular, MessageListCtrl, WriteCtrl) {
     'use strict';
 
-    var app = angular.module('mail', ['ngRoute', 'ngTouch']);
+    var app = angular.module('mail', ['ngRoute', 'ngTouch', 'write']);
     app.config(function($routeProvider) {
         $routeProvider.when('/folders/:folder', {
             templateUrl: 'tpl/message-list-desktop.html',

src/js/controller/write.js

@@ -1,14 +1,63 @@
-define(function() {
+define(function(require) {
     'use strict';
 
-    var dummyText = 'Hi Max,\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\nFrank',
+    var angular = require('angular'),
-        signature = 'Sent securely from whiteout mail';
+        aes = require('cryptoLib/aes-cbc'),
+        util = require('cryptoLib/util'),
+        str = require('js/app-config').string;
+
+    //
+    // Controller
+    //
 
     var WriteCtrl = function($scope) {
-        $scope.bodyPlaintextParts = dummyText.split('\n');
+        $scope.signature = str.signature;
-        $scope.bodyCiphertext = btoa(dummyText);
+
-        $scope.signature = signature;
+        // generate key,iv for encryption preview
+        var key = util.random(128),
+            iv = util.random(128);
+
+        $scope.updatePreview = function() {
+            // Although this does encrypt live using AES, this is just for show. The plaintext is encrypted seperately using before sending the email.
+            $scope.ciphertextPreview = aes.encrypt($scope.subject + $scope.body, key, iv);
+        };
     };
 
+    //
+    // Directives
+    //
+
+    var ngModule = angular.module('write', []);
+    ngModule.directive('contenteditable', function() {
+        return {
+            require: 'ngModel',
+            link: function(scope, elm, attrs, ctrl) {
+                // view -> model
+                elm.on('keyup', function() {
+                    scope.$apply(function() {
+                        ctrl.$setViewValue(elm.html());
+                    });
+                });
+
+                // model -> view
+                ctrl.$render = function(value) {
+                    elm.html(value);
+                };
+
+                // load init value from DOM
+                ctrl.$setViewValue(elm.html());
+            }
+        };
+    });
+    ngModule.directive('focusMe', function($timeout) {
+        return {
+            link: function(scope, element) {
+                $timeout(function() {
+                    element[0].focus();
+                });
+            }
+        };
+    });
+
     return WriteCtrl;
 });

src/tpl/write.html

@@ -7,20 +7,21 @@
   </div><!--/.address-headers-->
 
   <div class="subject-box">
-    <div class="subject-line">Subject: <span class="subject">Important stuff</span></div>
+    <div class="subject-line">
+      <input ng-model="subject" class="subject" spellcheck="true" tabindex="1" placeholder="Subject" ng-change="updatePreview()">
+    </div>
     <div class="attachment-btn btn-shadow">
       <div class="icon-attachment"></div>
     </div>
   </div><!--/.subject-box-->
 
   <div class="mail-text-body">
-    <p ng-repeat="part in bodyPlaintextParts">{{part}}</p>
+    <p ng-model="body" contentEditable="true" ng-change="updatePreview()" focus-me ></p>
 
     <div class="encrypt-preview">
-      <p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{bodyCiphertext}}<br>-----END ENCRYPTED PREVIEW-----</p>
+      <p>-----BEGIN ENCRYPTED PREVIEW-----<br>{{ciphertextPreview}}<br>-----END ENCRYPTED PREVIEW-----</p>
-      <p>--<br>{{signature}}</p>
+      <p>--</p><p>{{signature}}</p>
     </div><!--/.encrypt-preview-->
-
   </div><!--/.mail-text-body-->
 
   <div class="send-btn btn-shadow">Send securely</div>