feat: Invite a user in a group

This closes gravitee-io/issues#1818

src/management/components/notifications/notificationsettings/notificationsettings.component.ts

@@ -102,6 +102,7 @@ const NotificationSettingsComponent: ng.IComponentOptions = {
           vm.notificationSettings[idx] = response.data;
         }
         NotificationService.show('Notifications saved with success');
+        vm.formNotification.$setPristine();
       });
     };
 

src/management/configuration/configuration.route.ts

@@ -192,21 +192,19 @@ function configurationRouterConfig($stateProvider) {
       component: 'group',
       resolve: {
         group: (GroupService: GroupService, $stateParams) =>
-          GroupService.get($stateParams.groupId).then(response =>
-            response.data
-          ),
+          GroupService.get($stateParams.groupId).then(response => response.data),
         members: (GroupService: GroupService, $stateParams) =>
-          GroupService.getMembers($stateParams.groupId).then(response =>
-            response.data
-          ),
+          GroupService.getMembers($stateParams.groupId).then(response => response.data),
         apiRoles: (RoleService: RoleService) =>
           RoleService.list("API").then( (roles) =>
             [{"scope":"API", "name": "", "system":false}].concat(roles)
           ),
         applicationRoles: (RoleService: RoleService) =>
           RoleService.list("APPLICATION").then( (roles) =>
             [{"scope":"APPLICATION", "name": "", "system":false}].concat(roles)
-          )
+          ),
+        invitations: (GroupService: GroupService, $stateParams) =>
+          GroupService.getInvitations($stateParams.groupId).then(response => response.data)
       },
       data: {
         menu: null,

src/management/configuration/group/addMember.dialog.html

@@ -17,13 +17,13 @@
 -->
 <md-dialog aria-label="Add member" layout-padding flex="30">
   <md-dialog-content class="searchMembers">
-    <h4>Add members to {{ctrl.group.name}}</h4>
+    <h4>Add members to {{$ctrl.group.name}}</h4>
     <div layout="row" layout-align="space-between center">
       <span>Choose an API role</span>
-      <md-select ng-model="ctrl.defaultApiRole"
+      <md-select ng-model="$ctrl.defaultApiRole"
                  aria-label="API Role"
-                 class="md-no-underline">
-        <md-option ng-repeat="role in ctrl.apiRoles"
+                 class="md-no-underline" ng-disabled="!$ctrl.canChangeDefaultApiRole()">
+        <md-option ng-repeat="role in $ctrl.apiRoles"
                    ng-value="role.name"
                    ng-disabled="role.system">
           {{role.name}}
@@ -32,26 +32,26 @@ <h4>Add members to {{ctrl.group.name}}</h4>
     </div>
     <div layout="row" layout-align="space-between center">
       <span>Choose an Application role</span>
-      <md-select ng-model="ctrl.defaultApplicationRole"
+      <md-select ng-model="$ctrl.defaultApplicationRole"
                  aria-label="Application Role"
-                 class="md-no-underline">
-        <md-option ng-repeat="role in ctrl.applicationRoles"
+                 class="md-no-underline" ng-disabled="!$ctrl.canChangeDefaultApplicationRole()">
+        <md-option ng-repeat="role in $ctrl.applicationRoles"
                    ng-value="role.name"
                    ng-disabled="role.system">
           {{role.name}}
         </md-option>
       </md-select>
     </div>
-    <div ng-if="!ctrl.defaultApiRole && !ctrl.defaultApplicationRole"
+    <div ng-if="!$ctrl.defaultApiRole && !$ctrl.defaultApplicationRole"
          style="margin: 0 0 8px 0; text-align: right;">
       <em style="color: red;">Select at least one role</em>
     </div>
     <form name="formMember" ng-submit="$event.preventDefault()">
       <md-autocomplete
         md-selected-item="selectedItem"
-        md-search-text="ctrl.searchText"
-        md-selected-item-change="ctrl.selectUser(user)"
-        md-items="user in ctrl.searchUser(ctrl.searchText)"
+        md-search-text="$ctrl.searchText"
+        md-selected-item-change="$ctrl.selectUser(user)"
+        md-items="user in $ctrl.searchUser($ctrl.searchText)"
         md-item-text="user.reference"
         md-min-length="1"
         md-delay="500"
@@ -61,23 +61,23 @@ <h4>Add members to {{ctrl.group.name}}</h4>
         flex>
         <md-item-template>
           <md-list-item class="md-2-line contact-item">
-            <img ng-src="{{ctrl.getUserAvatar(user.id)}}" class="md-avatar" alt="User avatar" />
+            <img ng-src="{{$ctrl.getUserAvatar(user.id)}}" class="md-avatar" alt="User avatar" />
             <div class="md-list-item-text compact">
               <h3>{{user.displayName}}</h3>
             </div>
           </md-list-item>
         </md-item-template>
         <md-not-found>
-          No user matching "{{ctrl.searchText}}" were found, or users already selected.
+          No user matching "{{$ctrl.searchText}}" were found, or users already selected.
         </md-not-found>
       </md-autocomplete>
 
       <br />
 
-      <md-list class="fixedRows" ng-show="ctrl.usersSelected.length > 0">
+      <md-list class="fixedRows" ng-show="$ctrl.usersSelected.length > 0">
         <md-subheader class="md-no-sticky">Selected users</md-subheader>
-        <md-list-item class="md-2-line contact-item" ng-repeat="(index, user) in ctrl.usersSelected">
-          <img ng-src="{{ctrl.getUserAvatar(user.id)}}" class="md-avatar" alt="{{user.displayName}}" />
+        <md-list-item class="md-2-line contact-item" ng-repeat="(index, user) in $ctrl.usersSelected">
+          <img ng-src="{{$ctrl.getUserAvatar(user.id)}}" class="md-avatar" alt="{{user.displayName}}" />
           <div class="md-list-item-text compact">
             <h3>{{user.displayName}}</h3>
           </div>
@@ -87,10 +87,10 @@ <h3>{{user.displayName}}</h3>
   </md-dialog-content>
 
   <md-dialog-actions layout="row">
-    <md-button ng-click="ctrl.hide()">
+    <md-button ng-click="$ctrl.hide()">
       Cancel
     </md-button>
-    <md-button type="submit" class="md-raised md-primary" ng-click="ctrl.addMembers()" ng-disabled="formMember.$invalid || ctrl.invalid()">
+    <md-button type="submit" class="md-raised md-primary" ng-click="$ctrl.addMembers()" ng-disabled="formMember.$invalid || $ctrl.invalid()">
       Add
     </md-button>
   </md-dialog-actions>

src/management/configuration/group/addMemberDialog.controller.ts

@@ -28,7 +28,9 @@ function DialogAddGroupMemberController(
   defaultApiRole: string,
   defaultApplicationRole: string,
   apiRoles: Role[],
-  applicationRoles: Role[]
+  applicationRoles: Role[],
+  canChangeDefaultApiRole,
+  canChangeDefaultApplicationRole
   ) {
   'ngInject';
 
@@ -43,6 +45,9 @@ function DialogAddGroupMemberController(
   this.defaultApiRole = (defaultApiRole) ? defaultApiRole : _.find(apiRoles, {default: true}).name;
   this.defaultApplicationRole = (defaultApplicationRole) ? defaultApplicationRole : _.find(applicationRoles, {default: true}).name;
 
+  this.canChangeDefaultApiRole = canChangeDefaultApiRole;
+  this.canChangeDefaultApplicationRole = canChangeDefaultApplicationRole;
+
   this.hide = () => {
     $mdDialog.cancel();
   };

src/management/configuration/group/group.component.ts

@@ -17,6 +17,7 @@ import GroupService from "../../../services/group.service";
 import NotificationService from "../../../services/notification.service";
 import { StateService } from '@uirouter/core';
 import _ = require('lodash');
+import UserService from "../../../services/user.service";
 
 interface IGroupDetailComponentScope extends ng.IScope {
   groupApis: any[],
@@ -30,15 +31,17 @@ const GroupComponent: ng.IComponentOptions = {
     group: '<',
     members: '<',
     apiRoles: '<',
-    applicationRoles: '<'
+    applicationRoles: '<',
+    invitations: '<'
   },
   template: require("./group.html"),
   controller: function (
     GroupService: GroupService,
     NotificationService: NotificationService,
     $mdDialog: angular.material.IDialogService,
     $state: StateService,
-    $scope: IGroupDetailComponentScope
+    $scope: IGroupDetailComponentScope,
+    UserService: UserService
   ) {
     'ngInject';
 
@@ -55,12 +58,12 @@ const GroupComponent: ng.IComponentOptions = {
 
     this.updateRole = (member: any) => {
       GroupService.addOrUpdateMember(this.group.id, [member]).then((response) => {
-        NotificationService.show('User updated.');
+        NotificationService.show('Member successfully updated');
         $state.reload();
       });
     };
 
-    this.updateDefaultRole = () => {
+    this.update = () => {
       let roles = {};
 
       if ($scope.selectedApiRole) {
@@ -78,9 +81,17 @@ const GroupComponent: ng.IComponentOptions = {
       GroupService.update(this.group.id, {
         name: this.group.name,
         roles: roles,
-        defaultApi: 'defaultApi',
-        defaultApplication: 'defaultApplication',
-      }).then(() => {
+        defaultApi: true,
+        defaultApplication: true,
+        max_invitation: this.group.max_invitation,
+        lock_api_role: this.group.lock_api_role,
+        lock_application_role: this.group.lock_application_role,
+        system_invitation: this.group.system_invitation,
+        email_invitation: this.group.email_invitation
+      }).then((response) => {
+        this.group = response.data;
+        this.$onInit();
+        $scope.formGroup.$setPristine();
         NotificationService.show('Default roles for group ' + this.group.name + ' have been updated.');
       });
     };
@@ -94,13 +105,13 @@ const GroupComponent: ng.IComponentOptions = {
         clickOutsideToClose: true,
         locals: {
           msg: '',
-          title: 'Would you like to remove the user "' + member.displayName + '" ?',
+          title: 'Are you sure you want to remove the user "' + member.displayName + '"?',
           confirmButton: 'Remove'
         }
       }).then( (response) => {
         if (response) {
           GroupService.deleteMember(this.group.id, member.id).then((response) => {
-            NotificationService.show('User ' + member.displayName + ' has been removed.');
+            NotificationService.show('Member ' + member.displayName + ' has been successfully removed');
             GroupService.getMembers(this.group.id).then(response =>
               this.members = response.data
             );
@@ -109,23 +120,25 @@ const GroupComponent: ng.IComponentOptions = {
       });
     };
 
-    this.showAddMemberModal = (ev) => {
+    this.showAddMemberModal = () => {
       $mdDialog.show({
         controller: 'DialogAddGroupMemberController',
-        controllerAs: 'ctrl',
+        controllerAs: '$ctrl',
         template: require('./addMember.dialog.html'),
         clickOutsideToClose: true,
         locals: {
           defaultApiRole: $scope.selectedApiRole,
           defaultApplicationRole: $scope.selectedApplicationRole,
           group: this.group,
           apiRoles: this.apiRoles,
-          applicationRoles: this.applicationRoles
+          applicationRoles: this.applicationRoles,
+          canChangeDefaultApiRole: this.canChangeDefaultApiRole,
+          canChangeDefaultApplicationRole: this.canChangeDefaultApplicationRole
         }
       }).then( (members) => {
         if (members) {
           GroupService.addOrUpdateMember(this.group.id, members).then((response) => {
-              NotificationService.show('Users added.');
+              NotificationService.show('Member(s) successfully added');
               $state.reload();
           });
         }
@@ -147,6 +160,113 @@ const GroupComponent: ng.IComponentOptions = {
         }
       );
     };
+
+    this.reset = () => {
+      $state.reload();
+    };
+
+    this.canChangeDefaultApiRole = () => {
+      return this.isSuperAdmin() || !this.group.lock_api_role;
+    };
+
+    this.canChangeDefaultApplicationRole = () => {
+      return this.isSuperAdmin()|| !this.group.lock_application_role;
+    };
+
+    this.canAddMembers = () => {
+      if (this.isSuperAdmin()) {
+        return true;
+      } else if (this.group.manageable) {
+        const numberOfMembers = this.members ? this.members.length : 0;
+        const numberOfInvitations = this.invitations ? this.invitations.length : 0;
+        const numberOfSlots = numberOfMembers + numberOfInvitations;
+        return !this.group.max_invitation || (numberOfSlots < this.group.max_invitation);
+      } else {
+        return false;
+      }
+    };
+
+    this.isSuperAdmin = () => {
+      return UserService.isUserHasPermissions(['management-group-u']);
+    };
+
+    this.canSave = () => {
+      return this.group.manageable;
+    };
+
+    this.updateInvitation = (invitation: any) => {
+      GroupService.updateInvitation(this.group.id, invitation).then(() => {
+        NotificationService.show('Invitation successfully updated');
+        $state.reload();
+      });
+    };
+
+    this.showInviteMemberModal = () => {
+      $mdDialog.show({
+        controller: function($mdDialog, group, apiRoles, applicationRoles, defaultApiRole, defaultApplicationRole,
+                             canChangeDefaultApiRole, canChangeDefaultApplicationRole) {
+          'ngInject';
+          this.group = group;
+          this.group.api_role = group.api_role || defaultApiRole;
+          this.group.application_role = group.application_role || defaultApplicationRole;
+          this.apiRoles = apiRoles;
+          this.applicationRoles = applicationRoles;
+          this.canChangeDefaultApiRole = canChangeDefaultApiRole;
+          this.canChangeDefaultApplicationRole = canChangeDefaultApplicationRole;
+          this.hide = function () {$mdDialog.hide();};
+          this.save = function () {$mdDialog.hide(this.email);};
+        },
+        controllerAs: '$ctrl',
+        template: require('./inviteMember.dialog.html'),
+        clickOutsideToClose: true,
+        locals: {
+          defaultApiRole: $scope.selectedApiRole,
+          defaultApplicationRole: $scope.selectedApplicationRole,
+          group: this.group,
+          apiRoles: this.apiRoles,
+          applicationRoles: this.applicationRoles,
+          canChangeDefaultApiRole: this.canChangeDefaultApiRole,
+          canChangeDefaultApplicationRole: this.canChangeDefaultApplicationRole
+        }
+      }).then((email) => {
+        if (email) {
+          GroupService.inviteMember(this.group, email).then((response) => {
+            if (response.data.id) {
+              NotificationService.show('Invitation successfully sent');
+            } else {
+              NotificationService.show('Member successfully added');
+            }
+            $state.reload();
+          });
+        }
+      },
+        // you cancelled the dialog
+        () => {});
+    };
+
+    this.removeInvitation = (ev, invitation: any) => {
+      ev.stopPropagation();
+      $mdDialog.show({
+        controller: 'DialogConfirmController',
+        controllerAs: 'ctrl',
+        template: require('../../../components/dialog/confirmWarning.dialog.html'),
+        clickOutsideToClose: true,
+        locals: {
+          msg: '',
+          title: 'Are you sure you want to remove the invitation for "' + invitation.email + '"?',
+          confirmButton: 'Remove'
+        }
+      }).then((response) => {
+          if (response) {
+            GroupService.deleteInvitation(this.group.id, invitation.id).then(() => {
+              NotificationService.show('Invitation for ' + invitation.email + ' has been successfully removed');
+              $state.reload();
+            });
+          }
+        },
+        // you cancelled the dialog
+        () => {});
+    };
   }
 };