setup attachments page

src/_locales/en/messages.json

@@ -718,5 +718,29 @@
   "attachments": {
     "message": "Attachments",
     "description": "Attachments"
+  },
+  "deleteAttachment": {
+    "message": "Delete attachment",
+    "description": "Delete attachment"
+  },
+  "deleteAttachmentConfirmation": {
+    "message": "Are you sure you want to delete this attachment?",
+    "description": "Are you sure you want to delete this attachment?"
+  },
+  "deletedAttachment": {
+    "message": "Deleted attachment",
+    "description": "Deleted attachment"
+  },
+  "newAttachment": {
+    "message": "Add New Attachment",
+    "description": "Add New Attachment"
+  },
+  "noAttachments": {
+    "message": "No attachments.",
+    "description": "No attachments."
+  },
+  "file": {
+    "message": "File",
+    "description": "File"
   }
 }

src/popup/app/config.js

@@ -140,6 +140,13 @@
                 data: { authorize: true },
                 params: { animation: null, fromView: true, login: null, from: 'vault' }
             })
+            .state('attachments', {
+                url: '/attachments?id',
+                templateUrl: 'app/vault/views/vaultAttachments.html',
+                controller: 'vaultAttachmentsController',
+                data: { authorize: true },
+                params: { animation: null, fromView: true, login: null, from: 'vault' }
+            })
 
             .state('passwordGenerator', {
                 url: '/password-generator',

src/popup/app/vault/vaultAttachmentsController.js

@@ -0,0 +1,57 @@
+angular
+    .module('bit.vault')
+
+    .controller('vaultAttachmentsController', function ($scope, $state, $stateParams, loginService, folderService,
+        cryptoService, $q, toastr, SweetAlert, utilsService, $analytics, i18nService) {
+        $scope.i18n = i18nService;
+        $scope.login = $stateParams.login;
+        utilsService.initListSectionItemListeners($(document), angular);
+
+        $scope.submitPromise = null;
+        $scope.submit = function () {
+            $scope.close(true);
+        };
+
+        $scope.delete = function (attachment) {
+            SweetAlert.swal({
+                title: i18nService.deleteAttachment,
+                text: i18nService.deleteAttachmentConfirmation,
+                showCancelButton: true,
+                confirmButtonText: i18nService.yes,
+                cancelButtonText: i18nService.no
+            }, function (confirmed) {
+                if (confirmed) {
+                    $q.when(loginService.deleteAttachmentWithServer($stateParams.id, attachment.id)).then(function () {
+                        $analytics.eventTrack('Deleted Attachment');
+                        toastr.success(i18nService.deletedAttachment);
+                    });
+                }
+            });
+        };
+
+        $scope.close = function (allOut) {
+            if (!allOut) {
+                $state.go('editLogin', {
+                    loginId: $stateParams.id,
+                    animation: 'out-slide-down',
+                    from: $stateParams.from,
+                    fromView: $stateParams.fromView
+                });
+
+                return;
+            }
+
+            if ($stateParams.fromView) {
+                $state.go('viewLogin', {
+                    loginId: $stateParams.id,
+                    animation: 'out-slide-down',
+                    from: $stateParams.from
+                });
+            }
+            else {
+                $state.go('tabs.vault', {
+                    animation: 'out-slide-down'
+                });
+            }
+        };
+    });

src/popup/app/vault/vaultEditLoginController.js

@@ -68,6 +68,16 @@ angular
             });
         };
 
+        $scope.attachments = function () {
+            $state.go('attachments', {
+                id: loginId,
+                login: $scope.login,
+                animation: 'in-slide-up',
+                from: from,
+                fromView: fromView
+            });
+        };
+
         $scope.close = function () {
             if (fromView) {
                 $state.go('viewLogin', {

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

@@ -0,0 +1,40 @@
+<div class="header">
+    <div class="left">
+        <a href="" ng-click="close()">{{i18n.close}}</a>
+    </div>
+    <div class="right">
+        <a href="" ng-click="submit()">{{i18n.submit}}</a>
+    </div>
+    <div class="title">{{i18n.attachments}}</div>
+</div>
+<div class="content">
+    <div class="list list-no-selection">
+        <div class="list-section">
+            <div class="list-section-items">
+                <div class="list-section-item" ng-if="!login.attachments.length">
+                    {{i18n.noAttachments}}
+                </div>
+                <div class="list-section-item" ng-repeat="attachment in login.attachments">
+                    <a href="#" stop-click ng-click="download(attachment)">{{attachment.fileName}}</a>
+                    <i class="fa fa-spin fa-spinner text-muted no-animation" ng-if="attachment.downloading"></i>
+                    <span class="btn-list no-padding" stop-prop stop-click title="{{i18n.deleteAttachment}}"
+                          ng-click="delete(attachment)">
+                        <i class="fa fa-lg fa-trash"></i>
+                    </span>
+                    <small class="item-sub-label">{{attachment.sizeName}}</small>
+                </div>
+            </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-header">
+                {{i18n.newAttachment}}
+            </div>
+            <div class="list-section-items">
+                <div class="list-section-item">
+                    <label for="file" class="item-label">{{i18n.file}}</label>
+                    <input type="file" id="file" name="file" />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -57,6 +57,10 @@
                         <label for="favorite">{{i18n.favorite}}</label>
                         <input id="favorite" name="Favorite" type="checkbox" ng-model="login.favorite">
                     </div>
+                    <a class="list-section-item" href="#" stop-click ng-click="attachments()">
+                        {{i18n.attachments}}
+                        <i class="fa fa-chevron-right"></i>
+                    </a>
                 </div>
             </div>
             <div class="list-section">

src/popup/index.html

@@ -72,6 +72,7 @@
     <script src="app/vault/vaultAddLoginController.js"></script>
     <script src="app/vault/vaultEditLoginController.js"></script>
     <script src="app/vault/vaultViewLoginController.js"></script>
+    <script src="app/vault/vaultAttachmentsController.js"></script>
 
     <script src="app/settings/settingsModule.js"></script>
     <script src="app/settings/settingsController.js"></script>

src/popup/less/components.less

@@ -467,6 +467,14 @@
     }
 }
 
+.no-padding {
+    padding: 0 !important;
+}
+
+.no-margin {
+    margin: 0 !important;
+}
+
 .btn {
     border-radius: 0;
     -webkit-border-radius: 0;