encrypt, upload, and view attachments

src/app/vault/vaultAttachmentsController.js

@@ -0,0 +1,53 @@
+angular
+    .module('bit.vault')
+
+    .controller('vaultAttachmentsController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
+        loginId, $analytics, validationService) {
+        $analytics.eventTrack('vaultAttachmentsController', { category: 'Modal' });
+        $scope.login = {};
+        $scope.readOnly = false;
+        $scope.loading = true;
+
+        apiService.logins.get({ id: loginId }, function (login) {
+            $scope.login = cipherService.decryptLogin(login);
+            $scope.readOnly = !login.Edit;
+            $scope.loading = false;
+        }, function () {
+            $scope.loading = false;
+        });
+
+        $scope.save = function (form) {
+            var files = document.getElementById('file').files;
+            if (!files || !files.length) {
+                validationService.addError(form, 'file', 'Select a file.', true);
+                return;
+            }
+
+            var file = files[0];
+            var reader = new FileReader();
+            reader.readAsArrayBuffer(file);
+            reader.onload = function (evt) {
+                var key = null;
+                var encFilename = cryptoService.encrypt(file.name, key);
+                cryptoService.encryptToBytes(evt.target.result, key).then(function (encData) {
+                    var fd = new FormData();
+                    var blob = new Blob([encData], { type: 'application/octet-stream' });
+                    fd.append('data', blob, encFilename);
+                    return apiService.ciphers.postAttachment({ id: loginId }, fd).$promise;
+                }).then(function (response) {
+                    $analytics.eventTrack('Added Attachment');
+                    $uibModalInstance.close({
+                        action: 'attach',
+                        data: $scope.login
+                    });
+                });
+            };
+            reader.onerror = function (evt) {
+                validationService.addError(form, 'file', 'Error reading file.', true);
+            };
+        }
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/vault/vaultController.js

@@ -199,6 +199,21 @@
             });
         };
 
+        $scope.attachments = function (login) {
+            var addModel = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/vault/views/vaultAttachments.html',
+                controller: 'vaultAttachmentsController',
+                resolve: {
+                    loginId: function () { return login.id; }
+                }
+            });
+
+            addModel.result.then(function (data) {
+                
+            });
+        };
+
         $scope.editFolder = function (folder) {
             var editModel = $uibModal.open({
                 animation: true,

src/app/vault/views/vault.html

@@ -86,6 +86,11 @@
                                                 <i class="fa fa-fw fa-pencil"></i> Edit
                                             </a>
                                         </li>
+                                        <li ng-show="login.edit">
+                                            <a href="#" stop-click ng-click="attachments(login)">
+                                                <i class="fa fa-fw fa-paperclip"></i> Attachments
+                                            </a>
+                                        </li>
                                         <li ng-show="!login.organizationId">
                                             <a href="#" stop-click ng-click="share(login)">
                                                 <i class="fa fa-fw fa-share-alt"></i> Share
@@ -115,7 +120,9 @@
                             </td>
                             <td ng-click="select($event)">
                                 <a href="#" stop-click ng-click="editLogin(login)" stop-prop>{{login.name}}</a>
-                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="login.organizationId"
+                                <i class="fa fa-share-alt text-muted" title="Shared" ng-if="login.organizationId"
+                                   stop-prop></i>
+                                <i class="fa fa-paperclip text-muted" title="Attachments" ng-if="login.hasAttachments"
                                    stop-prop></i><br />
                                 <span class="text-sm text-muted" stop-prop>{{login.username}}</span>
                             </td>
@@ -189,6 +196,11 @@
                                                 <i class="fa fa-fw fa-pencil"></i> Edit
                                             </a>
                                         </li>
+                                        <li ng-show="login.edit">
+                                            <a href="#" stop-click ng-click="attachments(login)">
+                                                <i class="fa fa-fw fa-paperclip"></i> Attachments
+                                            </a>
+                                        </li>
                                         <li ng-show="!login.organizationId">
                                             <a href="#" stop-click ng-click="share(login)">
                                                 <i class="fa fa-fw fa-share-alt"></i> Share
@@ -219,7 +231,10 @@
                             <td ng-click="select($event)">
                                 <a href="#" stop-click ng-click="editLogin(login)" stop-prop>{{login.name}}</a>
                                 <i class="fa fa-star text-muted" title="Favorite" ng-show="login.favorite" stop-prop></i>
-                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="login.organizationId" stop-prop></i>
+                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="login.organizationId"
+                                   stop-prop></i>
+                                <i class="fa fa-paperclip text-muted" title="Attachments" ng-if="login.hasAttachments"
+                                   stop-prop></i>
                                 <br />
                                 <span class="text-sm text-muted" stop-prop>{{login.username}}</span>
                             </td>

src/app/vault/views/vaultAttachments.html

@@ -0,0 +1,66 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h4 class="modal-title">
+        <i class="fa fa-paperclip"></i> Secure Attachments <small>{{login.name}}</small>
+    </h4>
+</div>
+<form name="form" ng-submit="form.$valid && save(form)" api-form="savePromise">
+    <div class="modal-body">
+        <div ng-if="loading">
+            Loading...
+        </div>
+        <div ng-if="!loading && !login.attachments.length">
+            There are no attachments for this login.
+        </div>
+        <div class="table-responsive" ng-if="login.attachments.length" style="margin: 0;">
+            <table class="table table-striped table-hover table-vmiddle" style="margin: 0;">
+                <tbody>
+                    <tr ng-repeat="attachment in login.attachments | orderBy: ['fileName']">
+                        <td style="width: 70px;">
+                            <div class="btn-group" data-append-to=".modal">
+                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                    <i class="fa fa-cog"></i> <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li>
+                                        <a href="#" stop-click ng-click="download(attachment)">
+                                            <i class="fa fa-fw fa-download"></i> Download
+                                        </a>
+                                        <a href="#" stop-click ng-click="remove(attachment)" class="text-red"
+                                           ng-show="!readOnly">
+                                            <i class="fa fa-fw fa-trash"></i> Delete
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>
+                        <td>
+                            <a href="#" stop-click ng-click="download(attachment)">{{attachment.fileName}}</a>
+                        </td>
+                        <td style="width: 80px; min-width: 80px;">
+                            {{attachment.size}}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <hr />
+        <h4>Add New Attachment</h4>
+        <div class="callout callout-danger validation-errors" ng-show="form.$errors">
+            <h4>Errors have occurred</h4>
+            <ul>
+                <li ng-repeat="e in form.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-error>
+            <label for="file" class="sr-only">File</label>
+            <input type="file" id="file" name="file" />
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Save
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>