attachment display and download. refactor to WC

src/popup/app/vault/vaultViewLoginController.js

@@ -2,7 +2,7 @@ angular
     .module('bit.vault')
 
     .controller('vaultViewLoginController', function ($scope, $state, $stateParams, loginService, toastr, $q,
-        $analytics, i18nService, utilsService, totpService, $timeout, tokenService) {
+        $analytics, i18nService, utilsService, totpService, $timeout, tokenService, $window, cryptoService) {
         $scope.i18n = i18nService;
         var from = $stateParams.from,
             totpInterval = null;
@@ -104,6 +104,49 @@ angular
             $scope.showPassword = !$scope.showPassword;
         };
 
+        $scope.download = function (attachment) {
+            if (attachment.downloading) {
+                return;
+            }
+
+            attachment.downloading = true;
+            var req = new XMLHttpRequest();
+            req.open('GET', attachment.url, true);
+            req.responseType = 'arraybuffer';
+            req.onload = function (evt) {
+                if (!req.response) {
+                    toastr.error(i18n.errorsOccurred);
+                    $timeout(function () {
+                        attachment.downloading = false;
+                    });
+                    return;
+                }
+
+                cryptoService.getOrgKey($scope.login.organizationId).then(function (key) {
+                    return cryptoService.decryptFromBytes(req.response, key);
+                }).then(function (decBuf) {
+                    var blob = new Blob([decBuf]);
+
+                    var a = $window.document.createElement('a');
+                    a.href = $window.URL.createObjectURL(blob);
+                    a.download = attachment.fileName;
+                    $window.document.body.appendChild(a);
+                    a.click();
+                    $window.document.body.removeChild(a);
+
+                    $timeout(function () {
+                        attachment.downloading = false;
+                    });
+                }, function () {
+                    toastr.error(i18n.errorsOccurred);
+                    $timeout(function () {
+                        attachment.downloading = false;
+                    });
+                });
+            };
+            req.send(null);
+        };
+
         $scope.$on("$destroy", function () {
             if (totpInterval) {
                 clearInterval(totpInterval);

src/popup/app/vault/views/vault.html

@@ -52,6 +52,7 @@
                     <span class="text">
                         {{login.name}}
                         <i class="fa fa-share-alt text-muted" ng-if="login.organizationId" title="{{i18n.shared}}"></i>
+                        <i class="fa fa-paperclip text-muted" ng-if="login.attachments" title="{{i18n.attachments}}"></i>
                     </span>
                     <span class="detail">{{login.username}}</span>
                 </a>

src/popup/app/vault/views/vaultViewLogin.html

@@ -76,5 +76,20 @@
                 <div class="list-section-item pre">{{login.notes}}</div>
             </div>
         </div>
+        <div class="list-section" ng-if="login.attachments && login.attachments.length">
+            <div class="list-section-header">
+                {{i18n.attachments}}
+            </div>
+            <div class="list-section-items">
+                <a class="list-section-item list-allow-selection" href="#" stop-click
+                   ng-repeat="attachment in login.attachments"
+                   ng-click="download(attachment)">
+                    {{attachment.fileName}}
+                    <i class="fa fa-spin fa-spinner text-muted" ng-if="attachment.downloading"></i>
+                    <i class="fa fa-chevron-right"></i>
+                    <small class="item-sub-label">{{attachment.sizeName}}</small>
+                </a>
+            </div>
+        </div>
     </div>
 </div>

src/popup/less/components.less

@@ -354,6 +354,10 @@
             color: @gray-light;
         }
 
+        small.item-sub-label {
+            margin-top: 2px;
+        }
+
         &.condensed {
             padding: 3px 10px;
 
@@ -449,7 +453,7 @@
     }
 
     &.list-no-selection {
-        .list-grouped-item, .list-section-item {
+        .list-grouped-item:not(.list-allow-selection), .list-section-item:not(.list-allow-selection) {
             &:hover {
                 background-color: white;
             }