jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add roles UI creating and editing a group

Browse Source
This commit is contained in:
Girish Ramakrishnan
2018-06-18 17:45:09 -07:00
parent 5bd57b6dbd
commit 12b1909c7a
3 changed files with 156 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/users.html
+66 -2
View File
@@ -154,6 +154,26 @@
<small ng-show="!groupAddForm.name.$dirty && groupAdd.error.name">{{ groupAdd.error.name }}</small>
</div>
<input type="text" class="form-control" ng-model="groupAdd.name" id="groupAddName" name="name" ng-maxlength="200" ng-minlength="1" required autofocus>
<br/>
<div class="form-group">
<label class="control-label">Permissions</label>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="groupAdd.roles.canManageUsers" id="inputGroupAddManageUsers"> Manage Users & Groups </input>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="groupAdd.roles.canManageApps" id="inputGroupAddManageUsers"> Manage Apps </input>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="groupAdd.roles.canManageDomains" id="inputGroupAddManageUsers"> Manage Domains </input>
</label>
</div>
</div>
</div>
<input class="hide" type="submit" ng-disabled="groupAddForm.$invalid || groupAdd.busy"/>
</form>
@@ -166,6 +186,49 @@
</div>
</div>
<!-- Modal edit group -->
<div class="modal fade" id="groupEditModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit group {{ groupEdit.groupInfo.name }}</h4>
</div>
<div class="modal-body">
<form name="groupEdit_form" role="form" ng-submit="groupEdit.submit()" autocomplete="off">
<!-- currently hidden since not sure if this should be supported -->
<div class="form-group" ng-class="{ 'has-error': groupEditForm.groupName.$invalid }" ng-hide="true">
<label class="control-label">Group name</label>
<input type="text" class="form-control" ng-model="groupEdit.name" name="groupName" ng-disabled="groupEdit.busy" autofocus>
</div>
<div class="form-group">
<label class="control-label">Permissions</label>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="groupEdit.roles.canManageUsers" id="inputGroupEditManageUsers"> Manage Users & Groups </input>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="groupEdit.roles.canManageApps" id="inputGroupEditManageUsers"> Manage Apps </input>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="groupEdit.roles.canManageDomains" id="inputGroupEditManageUsers"> Manage Domains </input>
</label>
</div>
</div>
<input class="hide" type="submit" ng-disabled="groupEdit_form.$invalid || useredit.busy"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="groupEdit.submit()" ng-disabled="groupEdit_form.$invalid || groupEdit.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="groupEdit.busy"></i> Save</button>
</div>
</div>
</div>
</div>
<!-- Modal remove group -->
<div class="modal fade" id="groupRemoveModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -275,7 +338,7 @@
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button ng-show="!isMe(user)" class="btn btn-xs btn-default" ng-click="sendInvite(user)" title="Send invitation email"><i class="fa fa-paper-plane-o"></i></button>
<button class="btn btn-xs btn-default" ng-click="useredit.show(user)" title="Edit User Profile"><i class="fa fa-pencil"></i></button>
<button class="btn btn-xs btn-default" ng-click="useredit.show(user)" title="Edit User"><i class="fa fa-pencil"></i></button>
<button ng-show="!isMe(user)" class="btn btn-xs btn-danger" ng-click="userremove.show(user)" title="Remove User"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
@@ -313,10 +376,11 @@
</thead>
<tbody>
<tr ng-repeat="group in groups | ignoreAdminGroup">
<td style="text-overflow: ellipsis; white-space: nowrap;">
<td class="hand elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;" ng-click="groupEdit.show(group)">
{{ group.name }}
</td>
<td class="text-right" style="vertical-align: bottom">
<button class="btn btn-xs btn-default" ng-click="groupEdit.show(group)" title="Edit Group"><i class="fa fa-pencil"></i></button>
<button class="btn btn-xs btn-danger" ng-click="groupRemove.show(group)" title="Remove Group"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
src/views/users.js
+75 -2
View File
@@ -226,6 +226,11 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
busy: false,
error: {},
name: '',
roles: {
canManageUsers: false,
canManageApps: false,
canManageDomains: false,
},
show: function () {
$scope.groupAdd.busy = false;
@@ -243,7 +248,12 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
$scope.groupAdd.busy = true;
$scope.groupAdd.error = {};
Client.createGroup($scope.groupAdd.name, function (error) {
var roles = [ ];
if ($scope.groupAdd.roles.canManageApps) roles.push('manage_apps');
if ($scope.groupAdd.roles.canManageUsers) roles.push('manage_users');
if ($scope.groupAdd.roles.canManageDomains) roles.push('manage_domains');
Client.createGroup($scope.groupAdd.name, roles, function (error) {
$scope.groupAdd.busy = false;
if (error && error.statusCode === 409) {
@@ -266,6 +276,69 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
}
};
$scope.groupEdit = {
busy: false,
error: {},
groupInfo: {},
name: '',
roles: {
canManageUsers: false,
canManageApps: false,
canManageDomains: false,
},
show: function (groupInfo) {
$scope.groupEdit.error = {};
$scope.groupEdit.groupInfo = groupInfo;
$scope.groupEdit.name = groupInfo.name;
for (var i = 0; i < groupInfo.roles.length; i++) {
switch (groupInfo.roles[i]) {
case 'manage_apps': $scope.groupEdit.roles.canManageApps = true; break;
case 'manage_users': $scope.groupEdit.roles.canManageUsers = true; break;
case 'manage_domains': $scope.groupEdit.roles.canManageDomains = true; break;
default: break;
}
}
$scope.groupEdit_form.$setPristine();
$scope.groupEdit_form.$setUntouched();
$('#groupEditModal').modal('show');
},
submit: function () {
$scope.groupEdit.busy = true;
$scope.groupEdit.error = {};
var roles = [ ];
if ($scope.groupEdit.roles.canManageApps) roles.push('manage_apps');
if ($scope.groupEdit.roles.canManageUsers) roles.push('manage_users');
if ($scope.groupEdit.roles.canManageDomains) roles.push('manage_domains');
Client.updateGroup($scope.groupEdit.groupInfo.id, $scope.groupEdit.name, roles, function (error) {
$scope.groupEdit.busy = false;
if (error && error.statusCode === 409) {
$scope.groupEdit.error.name = 'Name already taken';
$scope.groupEditForm.name.$setPristine();
$('#groupEditName').focus();
return;
} else if (error && error.statusCode === 400) {
$scope.groupEdit.error.name = error.message;
$scope.groupEditForm.name.$setPristine();
$('#groupEditName').focus();
return;
}
if (error) return console.error('Unable to edit group.', error.statusCode, error.message);
refresh();
$('#groupEditModal').modal('hide');
});
}
};
$scope.inviteSent = {
email: '',
setupLink: ''
@@ -365,7 +438,7 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
Client.onReady(refresh);
// setup all the dialog focus handling
['userAddModal', 'userRemoveModal', 'userEditModal', 'groupAddModal', 'groupRemoveModal'].forEach(function (id) {
['userAddModal', 'userRemoveModal', 'userEditModal', 'groupAddModal', 'groupEditModal', 'groupRemoveModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});