group user assignment

src/app/organization/organizationCollectionsGroupsController.js

@@ -1,11 +0,0 @@
-angular
-    .module('bit.organization')
-
-    .controller('organizationCollectionsGroupsController', function ($scope, $state, $uibModalInstance, collection, $analytics) {
-        $analytics.eventTrack('organizationCollectionsGroupsController', { category: 'Modal' });
-        $scope.collection = collection;
-
-        $scope.close = function () {
-            $uibModalInstance.dismiss('cancel');
-        };
-    });

src/app/organization/organizationGroupsController.js

@@ -44,7 +44,19 @@
         };
 
         $scope.users = function (group) {
-            
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/organization/views/organizationGroupsUsers.html',
+                controller: 'organizationGroupsUsersController',
+                size: 'lg',
+                resolve: {
+                    group: function () { return group; }
+                }
+            });
+
+            modal.result.then(function () {
+                // nothing to do
+            });
         };
 
         $scope.delete = function (group) {

src/app/organization/organizationGroupsUsersController.js

@@ -0,0 +1,56 @@
+angular
+    .module('bit.organization')
+
+    .controller('organizationGroupsUsersController', function ($scope, $state, $uibModalInstance, apiService,
+        $analytics, group, toastr) {
+        $analytics.eventTrack('organizationGroupUsersController', { category: 'Modal' });
+        $scope.loading = true;
+        $scope.group = group;
+        $scope.users = [];
+
+        $uibModalInstance.opened.then(function () {
+            return apiService.groups.listUsers({
+                orgId: $state.params.orgId,
+                id: group.id
+            }).$promise;
+        }).then(function (userList) {
+            var users = [];
+            if (userList && userList.Data.length) {
+                for (var i = 0; i < userList.Data.length; i++) {
+                    users.push({
+                        organizationUserId: userList.Data[i].OrganizationUserId,
+                        name: userList.Data[i].Name,
+                        email: userList.Data[i].Email,
+                        type: userList.Data[i].Type,
+                        status: userList.Data[i].Status,
+                        accessAll: userList.Data[i].AccessAll
+                    });
+                }
+            }
+
+            $scope.users = users;
+            $scope.loading = false;
+        });
+
+        $scope.remove = function (user) {
+            if (!confirm('Are you sure you want to remove this user (' + user.email + ') from this ' +
+                'group (' + group.name + ')?')) {
+                return;
+            }
+
+            //apiService.collectionUsers.del({ orgId: $state.params.orgId, id: user.id }, null, function () {
+            //    toastr.success(user.email + ' has been removed.', 'User Removed');
+            //    $analytics.eventTrack('Removed User From Collection');
+            //    var index = $scope.users.indexOf(user);
+            //    if (index > -1) {
+            //        $scope.users.splice(index, 1);
+            //    }
+            //}, function () {
+            //    toastr.error('Unable to remove user.', 'Error');
+            //});
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/organization/organizationPeopleController.js

@@ -86,6 +86,21 @@
             });
         };
 
+        $scope.groups = function (user) {
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/organization/views/organizationPeopleGroups.html',
+                controller: 'organizationPeopleGroupsController',
+                resolve: {
+                    orgUser: function () { return user; }
+                }
+            });
+
+            modal.result.then(function () {
+                
+            });
+        };
+
         function loadList() {
             apiService.organizationUsers.list({ orgId: $state.params.orgId }, function (list) {
                 var users = [];

src/app/organization/organizationPeopleGroupsController.js

@@ -0,0 +1,87 @@
+angular
+    .module('bit.organization')
+
+    .controller('organizationPeopleGroupsController', function ($scope, $state, $uibModalInstance, apiService,
+        orgUser, $analytics) {
+        $analytics.eventTrack('organizationPeopleGroupsController', { category: 'Modal' });
+
+        $scope.loading = true;
+        $scope.groups = [];
+        $scope.selectedGroups = {};
+        $scope.orgUser = orgUser;
+
+        $uibModalInstance.opened.then(function () {
+            return apiService.groups.listOrganization({ orgId: $state.params.orgId }).$promise;
+        }).then(function (groupsList) {
+            var groups = [];
+            for (var i = 0; i < groupsList.Data.length; i++) {
+                groups.push({
+                    id: groupsList.Data[i].Id,
+                    name: groupsList.Data[i].Name
+                });
+            }
+            $scope.groups = groups;
+
+            return apiService.organizationUsers.listGroups({ orgId: $state.params.orgId, id: orgUser.id }).$promise;
+        }).then(function (groupIds) {
+            var selectedGroups = {};
+            if (groupIds) {
+                for (var i = 0; i < groupIds.length; i++) {
+                    selectedGroups[groupIds[i]] = true;
+                }
+            }
+            $scope.selectedGroups = selectedGroups;
+            $scope.loading = false;
+        }, function (error) {
+
+        });
+
+        $scope.toggleGroupSelectionAll = function ($event) {
+            var groups = {};
+            if ($event.target.checked) {
+                for (var i = 0; i < $scope.groups.length; i++) {
+                    groups[$scope.groups[i].id] = true;
+                }
+            }
+
+            $scope.selectedGroups = groups;
+        };
+
+        $scope.toggleGroupSelection = function (id) {
+            if (id in $scope.selectedGroups) {
+                delete $scope.selectedGroups[id];
+            }
+            else {
+                $scope.selectedGroups[id] = true;
+            }
+        };
+
+        $scope.groupSelected = function (group) {
+            return group.id in $scope.selectedGroups;
+        };
+
+        $scope.allSelected = function () {
+            return Object.keys($scope.selectedGroups).length === $scope.groups.length;
+        };
+
+        $scope.submitPromise = null;
+        $scope.submit = function (model) {
+            var groups = [];
+            for (var groupId in $scope.selectedGroups) {
+                if ($scope.selectedGroups.hasOwnProperty(groupId)) {
+                    groups.push(groupId);
+                }
+            }
+
+            $scope.submitPromise = apiService.organizationUsers.putGroups({ orgId: $state.params.orgId, id: orgUser.id }, {
+                groupIds: groups,
+            }, function () {
+                $analytics.eventTrack('Edited User Groups');
+                $uibModalInstance.close();
+            }).$promise;
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/organization/views/organizationCollections.html

@@ -48,11 +48,6 @@
                                                 <i class="fa fa-fw fa-users"></i> Users
                                             </a>
                                         </li>
-                                        <li>
-                                            <a href="javascript:void(0)" ng-click="groups(collection)">
-                                                <i class="fa fa-fw fa-sitemap"></i> Groups
-                                            </a>
-                                        </li>
                                         <li>
                                             <a href="javascript:void(0)" ng-click="delete(collection)" class="text-red">
                                                 <i class="fa fa-fw fa-trash"></i> Delete

src/app/organization/views/organizationCollectionsGroups.html

@@ -1,10 +0,0 @@
-<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-sitemap"></i> Groups <small>{{collection.name}}</small></h4>
-</div>
-<div class="modal-body">
-    Groups are coming soon to bitwarden Enterprise organizations.
-</div>
-<div class="modal-footer">
-    <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
-</div>

src/app/organization/views/organizationGroupsUsers.html

@@ -0,0 +1,55 @@
+<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-users"></i> User Access <small>{{group.name}}</small></h4>
+</div>
+<div class="modal-body">
+    <div ng-show="loading && !users.length">
+        Loading...
+    </div>
+    <div ng-show="!loading && !users.length">
+        <p>
+            No users for this group. You can associate a new user to this group by
+            selecting a specific user's "Groups" on the "People" page.
+        </p>
+    </div>
+    <div class="table-responsive" ng-show="users.length" style="margin: 0;">
+        <table class="table table-striped table-hover table-vmiddle" style="margin: 0;">
+            <tbody>
+                <tr ng-repeat="user in users | orderBy: ['email']">
+                    <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 ng-show="user.organizationUserId">
+                                    <a href="javascript:void(0)" ng-click="remove(user)" class="text-red">
+                                        <i class="fa fa-fw fa-remove"></i> Remove
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </td>
+                    <td style="width: 45px;">
+                        <letter-avatar data="{{user.name || user.email}}"></letter-avatar>
+                    </td>
+                    <td>
+                        {{user.email}}
+                        <div ng-if="user.name"><small class="text-muted">{{user.name}}</small></div>
+                    </td>
+                    <td style="width: 100px;">
+                        {{user.type | enumName: 'OrgUserType'}}
+                    </td>
+                    <td style="width: 120px;">
+                        <span class="label {{user.status | enumLabelClass: 'OrgUserStatus'}}">
+                            {{user.status | enumName: 'OrgUserStatus'}}
+                        </span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+</div>

src/app/organization/views/organizationPeople.html

@@ -41,6 +41,11 @@
                                                 <i class="fa fa-fw fa-pencil"></i> Edit
                                             </a>
                                         </li>
+                                        <li>
+                                            <a href="javascript:void(0)" ng-click="groups(user)">
+                                                <i class="fa fa-fw fa-sitemap"></i> Groups
+                                            </a>
+                                        </li>
                                         <li ng-show="user.status === 1">
                                             <a href="javascript:void(0)" ng-click="confirm(user)">
                                                 <i class="fa fa-fw fa-check"></i> Confirm

src/app/organization/views/organizationPeopleGroups.html

@@ -0,0 +1,55 @@
+<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-sitemap"></i> Edit User Groups <small>{{orgUser.email}}</small></h4>
+</div>
+<form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
+    <div class="modal-body">
+        <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 ng-show="loading && !groups.length">
+            Loading...
+        </div>
+        <div ng-show="!loading && !groups.length">
+            <p>No groups for your organization.</p>
+        </div>
+        <p ng-show="groups.length">Edit the groups that this user belongs to.</p>
+        <div class="table-responsive" ng-show="groups.length" style="margin: 0;">
+            <table class="table table-striped table-hover" style="margin: 0;">
+                <thead>
+                    <tr>
+                        <th style="width: 40px;">
+                            <input type="checkbox"
+                                   ng-checked="allSelected()"
+                                   ng-click="toggleGroupSelectionAll($event)">
+                        </th>
+                        <th>Name</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="group in groups | orderBy: ['name']">
+                        <td valign="middle">
+                            <input type="checkbox"
+                                   name="selectedGroups[]"
+                                   value="{{group.id}}"
+                                   ng-checked="groupSelected(group)"
+                                   ng-click="toggleGroupSelection(group.id)">
+                        </td>
+                        <td valign="middle">
+                            {{group.name}}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </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>Submit
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/services/apiService.js

@@ -59,11 +59,13 @@
         _service.organizationUsers = $resource(_apiUri + '/organizations/:orgId/users/:id', {}, {
             get: { method: 'GET', params: { id: '@id', orgId: '@orgId' } },
             list: { method: 'GET', params: { orgId: '@orgId' } },
+            listGroups: { url: _apiUri + '/organizations/:orgId/users/:id/groups', method: 'GET', params: { id: '@id', orgId: '@orgId' }, isArray: true },
             invite: { url: _apiUri + '/organizations/:orgId/users/invite', method: 'POST', params: { orgId: '@orgId' } },
             reinvite: { url: _apiUri + '/organizations/:orgId/users/:id/reinvite', method: 'POST', params: { id: '@id', orgId: '@orgId' } },
             accept: { url: _apiUri + '/organizations/:orgId/users/:id/accept', method: 'POST', params: { id: '@id', orgId: '@orgId' } },
             confirm: { url: _apiUri + '/organizations/:orgId/users/:id/confirm', method: 'POST', params: { id: '@id', orgId: '@orgId' } },
             put: { method: 'POST', params: { id: '@id', orgId: '@orgId' } },
+            putGroups: { url: _apiUri + '/organizations/:orgId/users/:id/groups', method: 'POST', params: { id: '@id', orgId: '@orgId' } },
             del: { url: _apiUri + '/organizations/:orgId/users/:id/delete', method: 'POST', params: { id: '@id', orgId: '@orgId' } }
         });
 
@@ -86,6 +88,7 @@
             get: { method: 'GET', params: { id: '@id', orgId: '@orgId' } },
             getDetails: { url: _apiUri + '/organizations/:orgId/groups/:id/details', method: 'GET', params: { id: '@id', orgId: '@orgId' } },
             listOrganization: { method: 'GET', params: { orgId: '@orgId' } },
+            listUsers: { url: _apiUri + '/organizations/:orgId/groups/:id/users', method: 'GET', params: { id: '@id', orgId: '@orgId' } },
             post: { method: 'POST', params: { orgId: '@orgId' } },
             put: { method: 'POST', params: { id: '@id', orgId: '@orgId' } },
             del: { url: _apiUri + '/organizations/:orgId/groups/:id/delete', method: 'POST', params: { id: '@id', orgId: '@orgId' } }

src/index.html

@@ -134,6 +134,7 @@
     <script src="app/organization/organizationPeopleController.js"></script>
     <script src="app/organization/organizationPeopleInviteController.js"></script>
     <script src="app/organization/organizationPeopleEditController.js"></script>
+    <script src="app/organization/organizationPeopleGroupsController.js"></script>
     <script src="app/organization/organizationCollectionsController.js"></script>
     <script src="app/organization/organizationCollectionsAddController.js"></script>
     <script src="app/organization/organizationCollectionsEditController.js"></script>
@@ -151,6 +152,7 @@
     <script src="app/organization/organizationGroupsController.js"></script>
     <script src="app/organization/organizationGroupsAddController.js"></script>
     <script src="app/organization/organizationGroupsEditController.js"></script>
+    <script src="app/organization/organizationGroupsUsersController.js"></script>
     <script src="app/organization/organizationCollectionsGroupsController.js"></script>
 
     <script src="app/settings/settingsModule.js"></script>