use checkboxes for subvault selection

src/app/vault/vaultShareController.js

@@ -6,7 +6,9 @@
         $scope.model = {};
         $scope.login = {};
         $scope.subvaults = [];
+        $scope.selectedSubvaults = {};
         $scope.organizations = [];
+        $scope.loadingSubvaults = true;
         $scope.readOnly = false;
 
         apiService.logins.get({ id: loginId }).$promise.then(function (login) {
@@ -52,20 +54,55 @@
                     }
 
                     $scope.subvaults = subvaults;
+                    $scope.loadingSubvaults = false;
                 });
             }
         });
 
+        $scope.toggleSubvaultSelectionAll = function ($event) {
+            var subvaults = {};
+            if ($event.target.checked) {
+                for (var i = 0; i < $scope.subvaults.length; i++) {
+                    subvaults[$scope.subvaults[i].id] = true;
+                }
+            }
+
+            $scope.selectedSubvaults = subvaults;
+        };
+
+        $scope.toggleSubvaultSelection = function (id) {
+            if (id in $scope.selectedSubvaults) {
+                delete $scope.selectedSubvaults[id];
+            }
+            else {
+                $scope.selectedSubvaults[id] = true;
+            }
+        };
+
+        $scope.subvaultSelected = function (subvault) {
+            return subvault.id in $scope.selectedSubvaults;
+        };
+
+        $scope.allSelected = function () {
+            return Object.keys($scope.selectedSubvaults).length === $scope.subvaults.length;
+        };
+
         $scope.submitPromise = null;
         $scope.submit = function (model) {
             $scope.login.organizationId = model.organizationId;
 
             var request = {
-                subvaultIds: model.subvaultIds,
+                subvaultIds: [],
                 cipher: cipherService.encryptLogin($scope.login)
             };
 
-            $scope.savePromise = apiService.ciphers.move({ id: loginId }, request, function (response) {
+            for (var id in $scope.selectedSubvaults) {
+                if ($scope.selectedSubvaults.hasOwnProperty(id)) {
+                    request.subvaultIds.push(id);
+                }
+            }
+
+            $scope.submitPromise = apiService.ciphers.move({ id: loginId }, request, function (response) {
                 $analytics.eventTrack('Shared Login');
                 $uibModalInstance.close();
             }).$promise;

src/app/vault/views/vaultLoginSubvaults.html

@@ -4,6 +4,7 @@
 </div>
 <form name="form" ng-submit="form.$valid && submit(model)" api-form="submitPromise">
     <div class="modal-body">
+        <p>This login is shared with the following subvaults.</p>
         <div class="callout callout-danger validation-errors" ng-show="form.$errors">
             <h4>Errors have occured</h4>
             <ul>
@@ -25,7 +26,7 @@
                                    ng-checked="allSelected()"
                                    ng-click="toggleSubvaultSelectionAll($event)">
                         </th>
-                        <th>Name</th>
+                        <th>Subvault</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -37,7 +38,7 @@
                                    ng-checked="subvaultSelected(subvault)"
                                    ng-click="toggleSubvaultSelection(subvault.id)">
                         </td>
-                        <td valign="middle">
+                        <td valign="middle" ng-click="toggleSubvaultSelection(subvault.id)">
                             {{subvault.name}}
                         </td>
                     </tr>

src/app/vault/views/vaultShare.html

@@ -4,6 +4,7 @@
 </div>
 <form name="form" ng-submit="form.$valid && submit(model)" api-form="submitPromise">
     <div class="modal-body">
+        <p>Choose an organization that you wish to share this login with.</p>
         <div class="callout callout-danger validation-errors" ng-show="form.$errors">
             <h4>Errors have occured</h4>
             <ul>
@@ -16,12 +17,37 @@
                 <option ng-repeat="org in organizations | orderBy: ['name']" value="{{org.id}}">{{org.name}}</option>
             </select>
         </div>
-        <div class="form-group" show-errors>
+
-            <label for="subvaults">Subvault</label> <span>*</span>
+        <div ng-show="!loadingSubvaults && !subvaults.length">
-            <select id="subvaults" name="SubvaultIds" ng-model="model.subvaultIds" class="form-control" multiple api-field>
+            <p>No subvaults.</p>
-                <option ng-repeat="subvault in subvaults | filter: { organizationId: model.organizationId } | 
+        </div>
-                        orderBy: ['name']" value="{{subvault.id}}">{{subvault.name}}</option>
+        <div class="table-responsive" ng-show="subvaults.length" style="margin: 0;">
-            </select>
+            <table class="table table-striped table-hover" style="margin: 0;">
+                <thead>
+                    <tr>
+                        <th style="width: 40px;">
+                            <input type="checkbox"
+                                   ng-checked="allSelected()"
+                                   ng-click="toggleSubvaultSelectionAll($event)">
+                        </th>
+                        <th>Subvault</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="subvault in subvaults | filter: { organizationId: model.organizationId } | orderBy: ['name']">
+                        <td valign="middle">
+                            <input type="checkbox"
+                                   name="selectedSubvaults[]"
+                                   value="{{subvault.id}}"
+                                   ng-checked="subvaultSelected(subvault)"
+                                   ng-click="toggleSubvaultSelection(subvault.id)">
+                        </td>
+                        <td valign="middle" ng-click="toggleSubvaultSelection(subvault.id)">
+                            {{subvault.name}}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
     <div class="modal-footer">