Refactor: Admin permissions page (#18932)
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>pull/18762/head
gabriellsh
5 years ago
committed by
GitHub
parent
ee1001af14
commit
aa6e674bb6
@ -1,39 +0,0 @@ |
||||
import { BlazeLayout } from 'meteor/kadira:blaze-layout'; |
||||
|
||||
import { registerAdminRoute } from '../../../client/admin'; |
||||
import { t } from '../../utils/client'; |
||||
|
||||
registerAdminRoute('/permissions', { |
||||
name: 'admin-permissions', |
||||
async action(/* params*/) { |
||||
await import('./views'); |
||||
return BlazeLayout.render('main', { |
||||
center: 'permissions', |
||||
pageTitle: t('Permissions'), |
||||
}); |
||||
}, |
||||
}); |
||||
|
||||
registerAdminRoute('/permissions/:name?/edit', { |
||||
name: 'admin-permissions-edit', |
||||
async action(/* params*/) { |
||||
await import('./views'); |
||||
return BlazeLayout.render('main', { |
||||
center: 'pageContainer', |
||||
pageTitle: t('Role_Editing'), |
||||
pageTemplate: 'permissionsRole', |
||||
}); |
||||
}, |
||||
}); |
||||
|
||||
registerAdminRoute('/permissions/new', { |
||||
name: 'admin-permissions-new', |
||||
async action(/* params*/) { |
||||
await import('./views'); |
||||
return BlazeLayout.render('main', { |
||||
center: 'pageContainer', |
||||
pageTitle: t('Role_Editing'), |
||||
pageTemplate: 'permissionsRole', |
||||
}); |
||||
}, |
||||
}); |
||||
@ -1,122 +0,0 @@ |
||||
.permissions-manager { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
height: 100%; |
||||
|
||||
&.page-container { |
||||
padding-bottom: 0 !important; |
||||
} |
||||
|
||||
.permission-edit { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
height: 100%; |
||||
|
||||
padding: 10px; |
||||
align-items: center; |
||||
} |
||||
|
||||
.permission-label, |
||||
.permission-icon { |
||||
display: flex; |
||||
|
||||
align-items: flex-end; |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
.permission-icon { |
||||
width: 30px; |
||||
|
||||
margin-bottom: 0; |
||||
flex-grow: 0; |
||||
} |
||||
|
||||
.content { |
||||
padding: 0 !important; |
||||
} |
||||
|
||||
.permission-grid { |
||||
overflow-x: scroll; |
||||
|
||||
table-layout: fixed; |
||||
|
||||
border-collapse: collapse; |
||||
|
||||
.id-styler { |
||||
white-space: nowrap; |
||||
|
||||
color: #7f7f7f; |
||||
|
||||
font-size: smaller; |
||||
} |
||||
|
||||
.edit-icon.role-name-edit-icon { |
||||
height: 30px; |
||||
} |
||||
|
||||
.role-name { |
||||
position: sticky; |
||||
|
||||
top: 0; |
||||
|
||||
width: 70px; |
||||
|
||||
text-align: left; |
||||
|
||||
vertical-align: middle; |
||||
|
||||
background: white; |
||||
} |
||||
|
||||
.role-name-edit-icon { |
||||
width: 70px; |
||||
height: 70px; |
||||
|
||||
text-align: center; |
||||
|
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.rotator { |
||||
overflow: hidden; |
||||
|
||||
width: 30px; |
||||
height: 130px; |
||||
|
||||
padding: 10px 0; |
||||
|
||||
transform: rotate(-180deg); |
||||
|
||||
white-space: nowrap; |
||||
|
||||
text-overflow: ellipsis; |
||||
writing-mode: vertical-rl; |
||||
} |
||||
|
||||
.admin-table-row { |
||||
height: 50px; |
||||
} |
||||
|
||||
td { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.permission-name { |
||||
width: 25%; |
||||
padding-left: 14px; |
||||
|
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.permission-checkbox { |
||||
text-align: center; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.icon-edit { |
||||
font-size: 1.5em; |
||||
} |
||||
} |
||||
} |
||||
@ -1,4 +0,0 @@ |
||||
import './permissions.html'; |
||||
import './permissions'; |
||||
import './permissionsRole.html'; |
||||
import './permissionsRole'; |
||||
@ -1,80 +0,0 @@ |
||||
<template name="permissionsTable"> |
||||
<div class="content"> |
||||
<table class="permission-grid secondary-background-color"> |
||||
|
||||
<thead class="content-background-color"> |
||||
<tr> |
||||
<th class=" role-name permission-name border-component-color"></th> |
||||
{{#each role in allRoles}} |
||||
<th class="edit-icon role-name border-component-color" title="{{role.description}}"> |
||||
<a class="permission-edit" href="{{pathFor "admin-permissions-edit" name=role._id}}"> |
||||
<p class="permission-label"> |
||||
<div class = "rotator"> |
||||
{{role._id}} |
||||
</div> |
||||
</p> |
||||
<p class="permission-icon"> |
||||
<i class="icon-edit"></i> |
||||
</p> |
||||
</a> |
||||
</th> |
||||
{{/each}} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{{#each permission in permissions}} |
||||
<tr class="admin-table-row"> |
||||
<td class="permission-name border-component-color" title="{{permissionDescription permission}}">{{permissionName permission}}<br><span class = "id-styler">[ID: {{permission._id}}]</span></td> |
||||
{{#each role in allRoles}} |
||||
<td class="permission-checkbox border-component-color"> |
||||
{{#if isRolePermissionEnabled role permission}} |
||||
<input type="checkbox" name="perm[{{role._id}}][{{permission._id}}]" class="role-permission" value="1" checked="{{granted permission.roles role}}" data-role="{{role._id}}" data-permission="{{permission._id}}"> |
||||
{{/if}} |
||||
</td> |
||||
{{else}} |
||||
<tr class="table-no-click"> |
||||
<td>{{_ "No_results_found_for"}} {{filter}}</td> |
||||
</tr> |
||||
{{/each}} |
||||
</tr> |
||||
{{/each}} |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</template> |
||||
<template name="permissions"> |
||||
<div class="page-container permissions-manager"> |
||||
<section class="permissions-manager page-container page-home page-static page-list"> |
||||
{{#if hasPermission}} |
||||
{{# header sectionName=pageTitle}} |
||||
<div class="rc-header__section-button"> |
||||
<a href="{{pathFor"admin-permissions-new"}}" |
||||
class="rc-button rc-button--primary new-role">{{_ "New_role"}}</a> |
||||
</div> |
||||
{{/header}} |
||||
<form class="search-form" role="form"> |
||||
<div class="rc-input__wrapper"> |
||||
<div class="rc-input__icon"> |
||||
{{> icon block="rc-input__icon-svg" icon="magnifier" }} |
||||
</div> |
||||
<input id="permissions-filter" type="text" class="rc-input__element" placeholder="{{_ " Search "}}" autofocus dir="auto"> |
||||
</div> |
||||
</form> |
||||
|
||||
{{>tabs tabs=tabsData}} |
||||
{{#if $eq tab 'settings'}} |
||||
{{> permissionsTable query=filter permissions=settingPermissions allRoles=roles collection='Setting'}} |
||||
{{else}} |
||||
{{> permissionsTable query=filter permissions=permissions allRoles=roles collection='Chat'}} |
||||
{{/if}} |
||||
{{/if}} |
||||
{{#if hasNoPermission}} |
||||
<div class="content"> |
||||
{{#if i18nPageTitle}} {{> header sectionName=i18nPageTitle}} {{else}} {{> header sectionName=pageTitle}} |
||||
{{/if}} |
||||
{{_ "Not_authorized"}} |
||||
</div> |
||||
{{/if}} |
||||
</section> |
||||
</div> |
||||
</template> |
||||
@ -1,205 +0,0 @@ |
||||
import { Meteor } from 'meteor/meteor'; |
||||
import _ from 'underscore'; |
||||
import s from 'underscore.string'; |
||||
import { ReactiveDict } from 'meteor/reactive-dict'; |
||||
import { Tracker } from 'meteor/tracker'; |
||||
import { Template } from 'meteor/templating'; |
||||
|
||||
import { Roles } from '../../../models/client'; |
||||
import { ChatPermissions } from '../lib/ChatPermissions'; |
||||
import { hasAllPermission } from '../hasPermission'; |
||||
import { t } from '../../../utils/client'; |
||||
import { SideNav } from '../../../ui-utils/client/lib/SideNav'; |
||||
import { CONSTANTS, AuthorizationUtils } from '../../lib'; |
||||
import { hasAtLeastOnePermission } from '..'; |
||||
|
||||
Template.permissions.helpers({ |
||||
tabsData() { |
||||
const { |
||||
state, |
||||
} = Template.instance(); |
||||
|
||||
const permissionsTab = { |
||||
label: t('Permissions'), |
||||
value: 'permissions', |
||||
condition() { |
||||
return true; |
||||
}, |
||||
}; |
||||
|
||||
const settingsTab = { |
||||
label: t('Settings'), |
||||
value: 'settings', |
||||
condition() { |
||||
return true; |
||||
}, |
||||
}; |
||||
|
||||
const tabs = [permissionsTab]; |
||||
|
||||
const settingsPermissions = hasAllPermission('access-setting-permissions'); |
||||
|
||||
if (settingsPermissions) { |
||||
tabs.push(settingsTab); |
||||
} |
||||
switch (settingsPermissions && state.get('tab')) { |
||||
case 'settings': |
||||
settingsTab.active = true; |
||||
break; |
||||
case 'permissions': |
||||
permissionsTab.active = true; |
||||
break; |
||||
default: |
||||
permissionsTab.active = true; |
||||
} |
||||
|
||||
|
||||
return { |
||||
tabs, |
||||
onChange(value) { |
||||
state.set({ |
||||
tab: value, |
||||
size: 50, |
||||
}); |
||||
}, |
||||
}; |
||||
}, |
||||
roles() { |
||||
return Roles.find(); |
||||
}, |
||||
|
||||
permissions() { |
||||
const { state } = Template.instance(); |
||||
const limit = state.get('size'); |
||||
const filter = new RegExp(s.escapeRegExp(state.get('filter')), 'i'); |
||||
|
||||
return ChatPermissions.find( |
||||
{ |
||||
level: { $ne: CONSTANTS.SETTINGS_LEVEL }, |
||||
_id: filter, |
||||
}, |
||||
{ |
||||
sort: { |
||||
_id: 1, |
||||
}, |
||||
limit, |
||||
}, |
||||
); |
||||
}, |
||||
|
||||
settingPermissions() { |
||||
const { state } = Template.instance(); |
||||
const limit = state.get('size'); |
||||
const filter = new RegExp(s.escapeRegExp(state.get('filter')), 'i'); |
||||
return ChatPermissions.find( |
||||
{ |
||||
_id: filter, |
||||
level: CONSTANTS.SETTINGS_LEVEL, |
||||
group: { $exists: true }, |
||||
}, |
||||
{ |
||||
limit, |
||||
sort: { |
||||
group: 1, |
||||
section: 1, |
||||
}, |
||||
}, |
||||
); |
||||
}, |
||||
|
||||
hasPermission() { |
||||
return hasAllPermission('access-permissions'); |
||||
}, |
||||
|
||||
hasNoPermission() { |
||||
return !hasAtLeastOnePermission([ |
||||
'access-permissions', |
||||
'access-setting-permissions', |
||||
]); |
||||
}, |
||||
filter() { |
||||
return Template.instance().state.get('filter'); |
||||
}, |
||||
|
||||
tab() { |
||||
return Template.instance().state.get('tab'); |
||||
}, |
||||
}); |
||||
|
||||
Template.permissions.events({ |
||||
'keyup #permissions-filter'(e, t) { |
||||
e.stopPropagation(); |
||||
e.preventDefault(); |
||||
t.state.set('filter', e.currentTarget.value); |
||||
}, |
||||
'scroll .content': _.throttle(({ currentTarget }, i) => { |
||||
if ( |
||||
currentTarget.offsetHeight + currentTarget.scrollTop |
||||
>= currentTarget.scrollHeight - 100 |
||||
) { |
||||
return i.state.set('size', i.state.get('size') + 50); |
||||
} |
||||
}, 300), |
||||
}); |
||||
|
||||
Template.permissions.onCreated(function() { |
||||
this.state = new ReactiveDict({ |
||||
filter: '', |
||||
tab: '', |
||||
size: 50, |
||||
}); |
||||
|
||||
this.autorun(() => { |
||||
this.state.get('filter'); |
||||
this.state.set('size', 50); |
||||
}); |
||||
}); |
||||
|
||||
Template.permissionsTable.helpers({ |
||||
granted(roles, role) { |
||||
return (roles && ~roles.indexOf(role._id) && 'checked') || null; |
||||
}, |
||||
|
||||
permissionName(permission) { |
||||
if (permission.level === CONSTANTS.SETTINGS_LEVEL) { |
||||
let path = ''; |
||||
if (permission.group) { |
||||
path = `${ t(permission.group) } > `; |
||||
} |
||||
if (permission.section) { |
||||
path = `${ path }${ t(permission.section) } > `; |
||||
} |
||||
return `${ path }${ t(permission.settingId) }`; |
||||
} |
||||
|
||||
return t(permission._id); |
||||
}, |
||||
|
||||
permissionDescription(permission) { |
||||
return t(`${ permission._id }_description`); |
||||
}, |
||||
|
||||
isRolePermissionEnabled(role, permission) { |
||||
return !AuthorizationUtils.isPermissionRestrictedForRole(permission._id, role._id); |
||||
}, |
||||
}); |
||||
|
||||
Template.permissionsTable.events({ |
||||
'click .role-permission'(e) { |
||||
const permissionId = e.currentTarget.getAttribute('data-permission'); |
||||
const role = e.currentTarget.getAttribute('data-role'); |
||||
|
||||
const permission = permissionId && ChatPermissions.findOne(permissionId); |
||||
|
||||
const action = ~permission.roles.indexOf(role) ? 'authorization:removeRoleFromPermission' : 'authorization:addPermissionToRole'; |
||||
|
||||
return Meteor.call(action, permissionId, role); |
||||
}, |
||||
}); |
||||
|
||||
Template.permissions.onRendered(() => { |
||||
Tracker.afterFlush(() => { |
||||
SideNav.setFlex('adminFlex'); |
||||
SideNav.openFlex(); |
||||
}); |
||||
}); |
||||
@ -1,110 +0,0 @@ |
||||
<template name="permissionsRole"> |
||||
<div class="permissions-manager"> |
||||
{{#if hasPermission}} |
||||
{{#with role}} |
||||
<form id="form-role" class="inline form-role form-inline"> |
||||
<div class="form-group"> |
||||
|
||||
<div class="rc-input"> |
||||
<div class="rc-input__title">{{_ "Role"}}</div> |
||||
{{#if editing}} |
||||
<input type="text" class="rc-input__element" name="name" autocomplete="off" value="{{_id}}" disabled> |
||||
{{else}} |
||||
<input type="text" class="rc-input__element" name="name" autocomplete="off"> |
||||
{{/if}} |
||||
</div> |
||||
</div> |
||||
<div class="form-group"> |
||||
<div class="rc-input"> |
||||
<div class="rc-input__title">{{_ "Description"}}</div> |
||||
<input type="text" class="rc-input__element" name="description" autocomplete="off" value="{{description}}"> |
||||
</div> |
||||
</div> |
||||
<div class="form-group"> |
||||
<div class="rc-input__title">{{_ "Scope"}}</div> |
||||
<div class="rc-select"> |
||||
<select name="scope" class="required rc-select__element" disabled="{{protected}}"> |
||||
<option value="Users" selected="{{$eq scope 'Users'}}">{{_ "Global"}}</option> |
||||
<option value="Subscriptions" selected="{{$eq scope 'Subscriptions'}}">{{_ "Rooms"}}</option> |
||||
</select> |
||||
{{> icon block="rc-select__arrow" icon="arrow-down" }} |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<label for="mandatory2fa">{{_ "Users must use Two Factor Authentication"}} :</label> |
||||
<input id="mandatory2fa" type="checkbox" name="mandatory2fa" checked="{{mandatory2fa}}"> |
||||
</div> |
||||
<div class="alert alert-warning"> |
||||
<p for="mandatory2fa">{{_ "Leave the description field blank if you dont want to show the role"}}.</p> |
||||
</div> |
||||
<div class="rc-button__group"> |
||||
{{#if editable}} |
||||
<button name="delete" class="rc-button rc-button--danger delete-role">{{_ "Delete"}}</button> |
||||
{{/if}} |
||||
<button name="save" class="rc-button rc-button--primary save">{{_ "Save"}}</button> |
||||
<a class="rc-button" href="{{pathFor "admin-permissions"}}">{{_ "Back_to_permissions"}}</a> |
||||
</div> |
||||
</form> |
||||
{{/with}} |
||||
{{#if editing}} |
||||
<h2 class="border-tertiary-background-color">{{_ "Users_in_role"}}</h2> |
||||
{{#if $eq role.scope 'Subscriptions'}} |
||||
<form id="form-search-room" class="inline"> |
||||
<label class="rc-input"> |
||||
<div class="rc-input__title">{{_ "Choose_a_room"}}</div> |
||||
{{> inputAutocomplete settings=autocompleteChannelSettings name="room" class="search autocomplete rc-input__element" placeholder=(_ "Enter_a_room_name") autocomplete="off"}} |
||||
</label> |
||||
</form> |
||||
{{/if}} |
||||
{{#if $or ($eq role.scope 'Users') searchRoom}} |
||||
<form id="form-users" class="inline"> |
||||
<label class="rc-input"> |
||||
<div class="rc-input__title">{{_ "Add_user"}}</div> |
||||
{{> inputAutocomplete settings=autocompleteUsernameSettings name="username" class="search autocomplete rc-input__element" placeholder=(_ "Enter_a_username") autocomplete="off"}} |
||||
</label> |
||||
<button name="add" class="rc-button rc-button--primary add">{{_ "Add"}}</button> |
||||
</form> |
||||
<div class="rc-table-content"> |
||||
{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize}} |
||||
<thead> |
||||
<tr> |
||||
<th width="30%"><div class="table-fake-th">{{_ "Name"}}</div></th> |
||||
<th width="25%"><div class="table-fake-th">{{_ "Username"}}</div></th> |
||||
<th width="25%"><div class="table-fake-th">{{_ "Email"}}</div></th> |
||||
<th width="5%"> </th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{{#unless hasUsers}} |
||||
<tr> |
||||
<td colspan="5" class="empty-role">{{_ "There_are_no_users_in_this_role"}}</td> |
||||
</tr> |
||||
{{/unless}} |
||||
{{#each userInRole}} |
||||
<tr class="user-info" data-id="{{_id}}"> |
||||
<td width="30%"> |
||||
<div class="rc-table-wrapper"> |
||||
<div class="rc-table-avatar">{{> avatar username=username}}</div> |
||||
<div class="rc-table-info"> |
||||
<span class="rc-table-title">{{name}}</span> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td><div class="rc-table-wrapper">{{username}}</div></td> |
||||
<td><div class="rc-table-wrapper">{{emailAddress}}</div></td> |
||||
<td><a href="#remove" class="remove-user"><i class="icon-block"></i></a></td> |
||||
</tr> |
||||
{{/each}} |
||||
</tbody> |
||||
{{/table}} |
||||
{{#if hasMore}} |
||||
<button class="rc-button rc-button--secondary load-more {{isLoading}}">{{_ "Load_more"}}</button> |
||||
{{/if}} |
||||
</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
{{else}} |
||||
{{_ "Not_authorized"}} |
||||
{{/if}} |
||||
</div> |
||||
</template> |
||||
@ -1,277 +0,0 @@ |
||||
import { Meteor } from 'meteor/meteor'; |
||||
import { ReactiveDict } from 'meteor/reactive-dict'; |
||||
import { ReactiveVar } from 'meteor/reactive-var'; |
||||
import { FlowRouter } from 'meteor/kadira:flow-router'; |
||||
import { Template } from 'meteor/templating'; |
||||
import { Tracker } from 'meteor/tracker'; |
||||
import toastr from 'toastr'; |
||||
|
||||
import { handleError } from '../../../utils/client/lib/handleError'; |
||||
import { t } from '../../../utils/lib/tapi18n'; |
||||
import { Roles } from '../../../models'; |
||||
import { hasAllPermission } from '../hasPermission'; |
||||
import { modal } from '../../../ui-utils/client/lib/modal'; |
||||
import { SideNav } from '../../../ui-utils/client/lib/SideNav'; |
||||
import { APIClient } from '../../../utils/client'; |
||||
import { call } from '../../../ui-utils/client'; |
||||
|
||||
const PAGE_SIZE = 50; |
||||
|
||||
const loadUsers = async (instance) => { |
||||
const offset = instance.state.get('offset'); |
||||
|
||||
const rid = instance.searchRoom.get(); |
||||
|
||||
const params = { |
||||
role: FlowRouter.getParam('name'), |
||||
offset, |
||||
count: PAGE_SIZE, |
||||
...rid && { roomId: rid }, |
||||
}; |
||||
|
||||
instance.state.set('loading', true); |
||||
const { users } = await APIClient.v1.get('roles.getUsersInRole', params); |
||||
|
||||
instance.usersInRole.set(instance.usersInRole.curValue.concat(users)); |
||||
instance.state.set({ |
||||
loading: false, |
||||
hasMore: users.length === PAGE_SIZE, |
||||
}); |
||||
}; |
||||
|
||||
Template.permissionsRole.helpers({ |
||||
role() { |
||||
return Roles.findOne({ |
||||
_id: FlowRouter.getParam('name'), |
||||
}) || {}; |
||||
}, |
||||
|
||||
userInRole() { |
||||
return Template.instance().usersInRole.get(); |
||||
}, |
||||
|
||||
editing() { |
||||
return FlowRouter.getParam('name') != null; |
||||
}, |
||||
|
||||
emailAddress() { |
||||
if (this.emails && this.emails.length > 0) { |
||||
return this.emails[0].address; |
||||
} |
||||
}, |
||||
|
||||
hasPermission() { |
||||
return hasAllPermission('access-permissions'); |
||||
}, |
||||
|
||||
protected() { |
||||
return this.protected; |
||||
}, |
||||
|
||||
editable() { |
||||
return this._id && !this.protected; |
||||
}, |
||||
|
||||
hasUsers() { |
||||
return Template.instance().usersInRole.get().length > 0; |
||||
}, |
||||
|
||||
hasMore() { |
||||
return Template.instance().state.get('hasMore'); |
||||
}, |
||||
|
||||
isLoading() { |
||||
const instance = Template.instance(); |
||||
return (!instance.subscription.ready() || instance.state.get('loading')) && 'btn-loading'; |
||||
}, |
||||
|
||||
searchRoom() { |
||||
return Template.instance().searchRoom.get(); |
||||
}, |
||||
|
||||
autocompleteChannelSettings() { |
||||
return { |
||||
limit: 10, |
||||
rules: [ |
||||
{ |
||||
collection: 'CachedChannelList', |
||||
endpoint: 'rooms.autocomplete.channelAndPrivate', |
||||
field: 'name', |
||||
template: Template.roomSearch, |
||||
noMatchTemplate: Template.roomSearchEmpty, |
||||
matchAll: true, |
||||
sort: 'name', |
||||
selector(match) { |
||||
return { |
||||
name: match, |
||||
}; |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
|
||||
autocompleteUsernameSettings() { |
||||
const instance = Template.instance(); |
||||
return { |
||||
limit: 10, |
||||
rules: [ |
||||
{ |
||||
collection: 'CachedUserList', |
||||
endpoint: 'users.autocomplete', |
||||
field: 'username', |
||||
template: Template.userSearch, |
||||
noMatchTemplate: Template.userSearchEmpty, |
||||
matchAll: true, |
||||
filter: { |
||||
exceptions: instance.usersInRole.get(), |
||||
}, |
||||
selector(match) { |
||||
return { |
||||
term: match, |
||||
}; |
||||
}, |
||||
sort: 'username', |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
}); |
||||
|
||||
Template.permissionsRole.events({ |
||||
async 'click .remove-user'(e, instance) { |
||||
e.preventDefault(); |
||||
modal.open({ |
||||
title: t('Are_you_sure'), |
||||
text: t('The_user_s_will_be_removed_from_role_s', this.username, FlowRouter.getParam('name')), |
||||
type: 'warning', |
||||
showCancelButton: true, |
||||
confirmButtonColor: '#DD6B55', |
||||
confirmButtonText: t('Yes'), |
||||
cancelButtonText: t('Cancel'), |
||||
closeOnConfirm: false, |
||||
html: false, |
||||
}, async () => { |
||||
await call('authorization:removeUserFromRole', FlowRouter.getParam('name'), this.username, instance.searchRoom.get()); |
||||
instance.usersInRole.set(instance.usersInRole.curValue.filter((user) => user.username !== this.username)); |
||||
modal.open({ |
||||
title: t('Removed'), |
||||
text: t('User_removed'), |
||||
type: 'success', |
||||
timer: 1000, |
||||
showConfirmButton: false, |
||||
}); |
||||
}); |
||||
}, |
||||
|
||||
'submit #form-role'(e/* , instance*/) { |
||||
e.preventDefault(); |
||||
const oldBtnValue = e.currentTarget.elements.save.value; |
||||
e.currentTarget.elements.save.value = t('Saving'); |
||||
const roleData = { |
||||
description: e.currentTarget.elements.description.value, |
||||
scope: e.currentTarget.elements.scope.value, |
||||
mandatory2fa: e.currentTarget.elements.mandatory2fa.checked, |
||||
}; |
||||
|
||||
if (this._id) { |
||||
roleData.name = this._id; |
||||
} else { |
||||
roleData.name = e.currentTarget.elements.name.value; |
||||
} |
||||
|
||||
Meteor.call('authorization:saveRole', roleData, (error/* , result*/) => { |
||||
e.currentTarget.elements.save.value = oldBtnValue; |
||||
if (error) { |
||||
return handleError(error); |
||||
} |
||||
|
||||
toastr.success(t('Saved')); |
||||
|
||||
if (!this._id) { |
||||
return FlowRouter.go('admin-permissions-edit', { |
||||
name: roleData.name, |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
async 'submit #form-users'(e, instance) { |
||||
e.preventDefault(); |
||||
if (e.currentTarget.elements.username.value.trim() === '') { |
||||
return toastr.error(t('Please_fill_a_username')); |
||||
} |
||||
const oldBtnValue = e.currentTarget.elements.add.value; |
||||
e.currentTarget.elements.add.value = t('Saving'); |
||||
|
||||
try { |
||||
await call('authorization:addUserToRole', FlowRouter.getParam('name'), e.currentTarget.elements.username.value, instance.searchRoom.get()); |
||||
instance.usersInRole.set([]); |
||||
instance.state.set({ |
||||
offset: 0, |
||||
cache: Date.now(), |
||||
}); |
||||
toastr.success(t('User_added')); |
||||
e.currentTarget.reset(); |
||||
} finally { |
||||
e.currentTarget.elements.add.value = oldBtnValue; |
||||
} |
||||
}, |
||||
|
||||
'submit #form-search-room'(e) { |
||||
return e.preventDefault(); |
||||
}, |
||||
|
||||
'click .delete-role'(e/* , instance*/) { |
||||
e.preventDefault(); |
||||
if (this.protected) { |
||||
return toastr.error(t('error-delete-protected-role')); |
||||
} |
||||
|
||||
Meteor.call('authorization:deleteRole', this._id, function(error/* , result*/) { |
||||
if (error) { |
||||
return handleError(error); |
||||
} |
||||
toastr.success(t('Role_removed')); |
||||
FlowRouter.go('admin-permissions'); |
||||
}); |
||||
}, |
||||
|
||||
'click .load-more'(e, t) { |
||||
t.state.set('offset', t.state.get('offset') + PAGE_SIZE); |
||||
}, |
||||
|
||||
'autocompleteselect input[name=room]'(event, template, doc) { |
||||
template.searchRoom.set(doc._id); |
||||
}, |
||||
}); |
||||
|
||||
Template.permissionsRole.onCreated(async function() { |
||||
this.state = new ReactiveDict({ |
||||
offset: 0, |
||||
loading: false, |
||||
hasMore: true, |
||||
cache: 0, |
||||
}); |
||||
this.searchRoom = new ReactiveVar(); |
||||
this.searchUsername = new ReactiveVar(); |
||||
this.usersInRole = new ReactiveVar([]); |
||||
}); |
||||
|
||||
Template.permissionsRole.onRendered(function() { |
||||
this.autorun(() => { |
||||
this.searchRoom.get(); |
||||
this.usersInRole.set([]); |
||||
this.state.set({ offset: 0 }); |
||||
}); |
||||
|
||||
this.autorun(() => { |
||||
this.state.get('cache'); |
||||
loadUsers(this); |
||||
}); |
||||
|
||||
Tracker.afterFlush(() => { |
||||
SideNav.setFlex('adminFlex'); |
||||
SideNav.openFlex(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,90 @@ |
||||
import React from 'react'; |
||||
import { Box, Field, FieldGroup, Button, Margins, Callout } from '@rocket.chat/fuselage'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import RoleForm from './RoleForm'; |
||||
import { useRoute } from '../../contexts/RouterContext'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { useRole } from './useRole'; |
||||
|
||||
const EditRolePageContainer = ({ _id }) => { |
||||
const t = useTranslation(); |
||||
const role = useRole(_id); |
||||
|
||||
if (!role) { |
||||
return <Callout type='danger'>{t('error-invalid-role')}</Callout>; |
||||
} |
||||
|
||||
return <EditRolePage key={_id} data={role} />; |
||||
}; |
||||
|
||||
const EditRolePage = ({ data }) => { |
||||
const t = useTranslation(); |
||||
const dispatchToastMessage = useToastMessageDispatch(); |
||||
const usersInRoleRouter = useRoute('admin-permissions'); |
||||
const router = useRoute('admin-permissions'); |
||||
|
||||
const { values, handlers } = useForm({ |
||||
name: data.name, |
||||
description: data.description || '', |
||||
scope: data.scope || 'Users', |
||||
mandatory2fa: !!data.mandatory2fa, |
||||
}); |
||||
|
||||
const saveRole = useMethod('authorization:saveRole'); |
||||
const deleteRole = useMethod('authorization:deleteRole'); |
||||
|
||||
const handleManageUsers = useMutableCallback(() => { |
||||
usersInRoleRouter.push({ |
||||
context: 'users-in-role', |
||||
_id: data.name, |
||||
}); |
||||
}); |
||||
|
||||
const handleSave = useMutableCallback(async () => { |
||||
try { |
||||
await saveRole(values); |
||||
dispatchToastMessage({ type: 'success', message: t('Saved') }); |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'error', message: error }); |
||||
} |
||||
}); |
||||
|
||||
const handleDelete = useMutableCallback(async () => { |
||||
try { |
||||
await deleteRole(data.name); |
||||
dispatchToastMessage({ type: 'success', message: t('Role_removed') }); |
||||
router.push({}); |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'error', message: error }); |
||||
} |
||||
}); |
||||
|
||||
return <Box w='full' alignSelf='center' mb='neg-x8'> |
||||
<Margins block='x8'> |
||||
<FieldGroup> |
||||
<RoleForm values={values} handlers={handlers} editing isProtected={data.protected}/> |
||||
<Field> |
||||
<Field.Row> |
||||
<Button primary w='full' onClick={handleSave}>{t('Save')}</Button> |
||||
</Field.Row> |
||||
</Field> |
||||
{!data.protected && <Field> |
||||
<Field.Row> |
||||
<Button danger w='full' onClick={handleDelete}>{t('Delete')}</Button> |
||||
</Field.Row> |
||||
</Field>} |
||||
<Field> |
||||
<Field.Row> |
||||
<Button w='full' onClick={handleManageUsers}>{t('Users_in_role')}</Button> |
||||
</Field.Row> |
||||
</Field> |
||||
</FieldGroup> |
||||
</Margins> |
||||
</Box>; |
||||
}; |
||||
|
||||
export default EditRolePageContainer; |
||||
@ -0,0 +1,46 @@ |
||||
import React from 'react'; |
||||
import { Box, FieldGroup, ButtonGroup, Button, Margins } from '@rocket.chat/fuselage'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import RoleForm from './RoleForm'; |
||||
import { useForm } from '../../hooks/useForm'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
|
||||
|
||||
const NewRolePage = () => { |
||||
const t = useTranslation(); |
||||
const dispatchToastMessage = useToastMessageDispatch(); |
||||
|
||||
const { values, handlers } = useForm({ |
||||
name: '', |
||||
description: '', |
||||
scope: 'Users', |
||||
mandatory2fa: false, |
||||
}); |
||||
|
||||
const saveRole = useMethod('authorization:saveRole'); |
||||
|
||||
const handleSave = useMutableCallback(async () => { |
||||
try { |
||||
await saveRole(values); |
||||
dispatchToastMessage({ type: 'success', message: t('Saved') }); |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'error', message: error }); |
||||
} |
||||
}); |
||||
|
||||
return <Box w='full' alignSelf='center' mb='neg-x8'> |
||||
<Margins block='x8'> |
||||
<FieldGroup> |
||||
<RoleForm values={values} handlers={handlers}/> |
||||
</FieldGroup> |
||||
<ButtonGroup stretch w='full'> |
||||
<Button primary onClick={handleSave}>{t('Save')}</Button> |
||||
</ButtonGroup> |
||||
</Margins> |
||||
</Box>; |
||||
}; |
||||
|
||||
export default NewRolePage; |
||||
@ -0,0 +1,34 @@ |
||||
import React from 'react'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import { useRouteParameter, useRoute } from '../../contexts/RouterContext'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import VerticalBar from '../../components/basic/VerticalBar'; |
||||
import NewRolePage from './NewRolePage'; |
||||
import EditRolePage from './EditRolePage'; |
||||
|
||||
const PermissionsContextBar = () => { |
||||
const t = useTranslation(); |
||||
const _id = useRouteParameter('_id'); |
||||
const context = useRouteParameter('context'); |
||||
|
||||
const router = useRoute('admin-permissions'); |
||||
|
||||
const handleVerticalBarCloseButton = useMutableCallback(() => { |
||||
router.push({}); |
||||
}); |
||||
|
||||
return (context && <VerticalBar className={'contextual-bar'}> |
||||
<VerticalBar.Header> |
||||
{context === 'new' && t('New_role')} |
||||
{context === 'edit' && t('Role_Editing')} |
||||
<VerticalBar.Close onClick={handleVerticalBarCloseButton} /> |
||||
</VerticalBar.Header> |
||||
<VerticalBar.ScrollableContent> |
||||
{context === 'new' && <NewRolePage />} |
||||
{context === 'edit' && <EditRolePage _id={_id} />} |
||||
</VerticalBar.ScrollableContent> |
||||
</VerticalBar>) || null; |
||||
}; |
||||
|
||||
export default PermissionsContextBar; |
||||
@ -0,0 +1,16 @@ |
||||
import React from 'react'; |
||||
|
||||
import { useRouteParameter } from '../../contexts/RouterContext'; |
||||
import UsersInRole from './UsersInRole'; |
||||
import PermissionsTable from './PermissionsTable'; |
||||
|
||||
const PermissionsRouter = () => { |
||||
const context = useRouteParameter('context'); |
||||
if (context === 'users-in-role') { |
||||
return <UsersInRole />; |
||||
} |
||||
|
||||
return <PermissionsTable />; |
||||
}; |
||||
|
||||
export default PermissionsRouter; |
||||
@ -0,0 +1,261 @@ |
||||
import React, { useState, useCallback, useEffect } from 'react'; |
||||
import { TextInput, Table, Margins, Box, Icon, CheckBox, Throbber, Tabs, Button } from '@rocket.chat/fuselage'; |
||||
import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks'; |
||||
import { css } from '@rocket.chat/css-in-js'; |
||||
|
||||
import Page from '../../components/basic/Page'; |
||||
import PermissionsContextBar from './PermissionsContextBar'; |
||||
import { GenericTable } from '../../components/GenericTable'; |
||||
import { useReactiveValue } from '../../hooks/useReactiveValue'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { useRoute } from '../../contexts/RouterContext'; |
||||
import { ChatPermissions } from '../../../app/authorization/client/lib/ChatPermissions'; |
||||
import { CONSTANTS, AuthorizationUtils } from '../../../app/authorization/lib'; |
||||
import { Roles } from '../../../app/models/client'; |
||||
|
||||
const useChangeRole = ({ onGrant, onRemove, permissionId }) => { |
||||
const dispatchToastMessage = useToastMessageDispatch(); |
||||
return useMutableCallback(async (roleId, granted) => { |
||||
try { |
||||
if (granted) { |
||||
await onRemove(permissionId, roleId); |
||||
} else { |
||||
await onGrant(permissionId, roleId); |
||||
} |
||||
return !granted; |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'error', message: error }); |
||||
} |
||||
return granted; |
||||
}); |
||||
}; |
||||
|
||||
|
||||
const usePermissionsAndRoles = (type = 'permissions', filter = '', limit = 25, skip = 0) => { |
||||
const getPermissions = useCallback(() => { |
||||
const filterRegExp = new RegExp(filter, 'i'); |
||||
|
||||
return ChatPermissions.find( |
||||
{ |
||||
level: type === 'permissions' ? { $ne: CONSTANTS.SETTINGS_LEVEL } : CONSTANTS.SETTINGS_LEVEL, |
||||
_id: filterRegExp, |
||||
}, |
||||
{ |
||||
sort: { |
||||
_id: 1, |
||||
}, |
||||
skip, |
||||
limit, |
||||
}, |
||||
); |
||||
}, [filter, limit, skip, type]); |
||||
|
||||
const getRoles = useMutableCallback(() => Roles.find().fetch(), []); |
||||
|
||||
const permissions = useReactiveValue(getPermissions); |
||||
const roles = useReactiveValue(getRoles); |
||||
|
||||
return [permissions.fetch(), permissions.count(false), roles]; |
||||
}; |
||||
|
||||
const RoleCell = React.memo(({ grantedRoles = [], _id, description, onChange, lineHovered, permissionId }) => { |
||||
const [granted, setGranted] = useState(() => !!grantedRoles.includes(_id)); |
||||
const [loading, setLoading] = useState(false); |
||||
|
||||
const isRestrictedForRole = AuthorizationUtils.isPermissionRestrictedForRole(permissionId, _id); |
||||
|
||||
const handleChange = useMutableCallback(async () => { |
||||
setLoading(true); |
||||
const result = await onChange(_id, granted); |
||||
setGranted(result); |
||||
setLoading(false); |
||||
}); |
||||
|
||||
const isDisabled = !!loading || !!isRestrictedForRole; |
||||
|
||||
return <Table.Cell withTruncatedText> |
||||
<Margins inline='x2'> |
||||
<CheckBox checked={granted} onChange={handleChange} disabled={isDisabled}/> |
||||
{!loading && <Box display='inline' color='hint' invisible={!lineHovered}> |
||||
{description || _id} |
||||
</Box>} |
||||
{loading && <Throbber size='x12' display='inline-block'/>} |
||||
</Margins> |
||||
</Table.Cell>; |
||||
}); |
||||
|
||||
const getName = (t, permission) => { |
||||
if (permission.level === CONSTANTS.SETTINGS_LEVEL) { |
||||
let path = ''; |
||||
if (permission.group) { |
||||
path = `${ t(permission.group) } > `; |
||||
} |
||||
if (permission.section) { |
||||
path = `${ path }${ t(permission.section) } > `; |
||||
} |
||||
return `${ path }${ t(permission.settingId) }`; |
||||
} |
||||
|
||||
return t(permission._id); |
||||
}; |
||||
|
||||
const PermissionRow = React.memo(({ permission, t, roleList, onGrant, onRemove, ...props }) => { |
||||
const { |
||||
_id, |
||||
roles, |
||||
} = permission; |
||||
|
||||
const [hovered, setHovered] = useState(false); |
||||
|
||||
const onMouseEnter = useMutableCallback(() => setHovered(true)); |
||||
const onMouseLeave = useMutableCallback(() => setHovered(false)); |
||||
|
||||
const changeRole = useChangeRole({ onGrant, onRemove, permissionId: _id }); |
||||
return <Table.Row |
||||
key={_id} |
||||
role='link' |
||||
action |
||||
tabIndex={0} |
||||
onMouseEnter={onMouseEnter} |
||||
onMouseLeave={onMouseLeave} |
||||
{...props} |
||||
> |
||||
<Table.Cell maxWidth='x300' withTruncatedText title={t(`${ _id }_description`)}>{getName(t, permission)}</Table.Cell> |
||||
{roleList.map(({ _id, description }) => <RoleCell |
||||
key={_id} |
||||
_id={_id} |
||||
description={description} |
||||
grantedRoles={roles} |
||||
onChange={changeRole} |
||||
lineHovered={hovered} |
||||
permissionId={_id} |
||||
/>)} |
||||
</Table.Row>; |
||||
}); |
||||
|
||||
const RoleHeader = React.memo(({ router, _id, description, ...props }) => { |
||||
const onClick = useMutableCallback(() => { |
||||
router.push({ |
||||
context: 'edit', |
||||
_id, |
||||
}); |
||||
}); |
||||
|
||||
return <GenericTable.HeaderCell clickable pi='x4' p='x8' onClick={onClick} {...props}> |
||||
<Box |
||||
className={css`white-space: nowrap`} |
||||
pb='x8' |
||||
pi='x12' |
||||
mi='neg-x2' |
||||
borderStyle='solid' |
||||
borderWidth='x2' |
||||
borderRadius='x2' |
||||
borderColor='neutral-300' |
||||
> |
||||
<Margins inline='x2'> |
||||
<span>{description || _id}</span> |
||||
<Icon name='edit' size='x16'/> |
||||
</Margins> |
||||
</Box> |
||||
</GenericTable.HeaderCell>; |
||||
}); |
||||
|
||||
const FilterComponent = ({ onChange }) => { |
||||
const t = useTranslation(); |
||||
const [filter, setFilter] = useState(''); |
||||
|
||||
const debouncedFilter = useDebouncedValue(filter, 500); |
||||
|
||||
useEffect(() => { |
||||
onChange(debouncedFilter); |
||||
}, [debouncedFilter, onChange]); |
||||
|
||||
const handleFilter = useMutableCallback(({ currentTarget: { value } }) => { |
||||
setFilter(value); |
||||
}); |
||||
|
||||
return <TextInput value={filter} onChange={handleFilter} placeholder={t('Search')} flexGrow={0}/>; |
||||
}; |
||||
|
||||
const PermissionsTable = () => { |
||||
const t = useTranslation(); |
||||
const [filter, setFilter] = useState(''); |
||||
const [type, setType] = useState('permissions'); |
||||
const [params, setParams] = useState({ limit: 25, skip: 0 }); |
||||
|
||||
const router = useRoute('admin-permissions'); |
||||
|
||||
const grantRole = useMethod('authorization:addPermissionToRole'); |
||||
const removeRole = useMethod('authorization:removeRoleFromPermission'); |
||||
|
||||
const permissionsData = usePermissionsAndRoles(type, filter, params.limit, params.skip); |
||||
|
||||
const [ |
||||
permissions, |
||||
total, |
||||
roleList, |
||||
] = permissionsData; |
||||
|
||||
const handleParams = useMutableCallback(({ current, itemsPerPage }) => { |
||||
setParams({ skip: current, limit: itemsPerPage }); |
||||
}); |
||||
|
||||
const handlePermissionsTab = useMutableCallback(() => { |
||||
if (type === 'permissions') { return; } |
||||
setType('permissions'); |
||||
}); |
||||
|
||||
const handleSettingsTab = useMutableCallback(() => { |
||||
if (type === 'settings') { return; } |
||||
setType('settings'); |
||||
}); |
||||
|
||||
const handleAdd = useMutableCallback(() => { |
||||
router.push({ |
||||
context: 'new', |
||||
}); |
||||
}); |
||||
|
||||
return <Page flexDirection='row'> |
||||
<Page> |
||||
<Page.Header title={t('Permissions')}> |
||||
<Button small square onClick={handleAdd}> |
||||
<Icon name='plus'/> |
||||
</Button> |
||||
</Page.Header> |
||||
<Margins blockEnd='x8'> |
||||
<Tabs> |
||||
<Tabs.Item selected={type === 'permissions'} onClick={handlePermissionsTab}> |
||||
{t('Permissions')} |
||||
</Tabs.Item> |
||||
<Tabs.Item selected={type === 'settings'} onClick={handleSettingsTab}> |
||||
{t('Settings')} |
||||
</Tabs.Item> |
||||
</Tabs> |
||||
</Margins> |
||||
<Page.Content mb='neg-x8'> |
||||
<Margins block='x8'> |
||||
<FilterComponent onChange={setFilter}/> |
||||
<GenericTable |
||||
header={<> |
||||
<GenericTable.HeaderCell width='x120'>{t('Name')}</GenericTable.HeaderCell> |
||||
{roleList.map(({ _id, description }) => <RoleHeader key={_id} _id={_id} description={description} router={router}/>)} |
||||
</>} |
||||
total={total} |
||||
results={permissions} |
||||
params={params} |
||||
setParams={handleParams} |
||||
fixed={false} |
||||
> |
||||
{useCallback((permission) => <PermissionRow key={permission._id} permission={permission} t={t} roleList={roleList} onGrant={grantRole} onRemove={removeRole} />, [grantRole, removeRole, roleList, t])} |
||||
</GenericTable> |
||||
</Margins> |
||||
</Page.Content> |
||||
</Page> |
||||
<PermissionsContextBar /> |
||||
</Page>; |
||||
}; |
||||
|
||||
export default PermissionsTable; |
||||
@ -0,0 +1,59 @@ |
||||
import React, { useMemo } from 'react'; |
||||
import { Box, Field, TextInput, Select, ToggleSwitch } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
|
||||
const RoleForm = ({ values, handlers, className, editing = false, isProtected = false }) => { |
||||
const t = useTranslation(); |
||||
|
||||
const { |
||||
name, |
||||
description, |
||||
scope, |
||||
mandatory2fa, |
||||
} = values; |
||||
|
||||
const { |
||||
handleName, |
||||
handleDescription, |
||||
handleScope, |
||||
handleMandatory2fa, |
||||
} = handlers; |
||||
|
||||
const options = useMemo(() => [ |
||||
['Users', t('Global')], |
||||
['Subscriptions', t('Rooms')], |
||||
], [t]); |
||||
|
||||
return <> |
||||
<Field className={className}> |
||||
<Field.Label>{t('Role')}</Field.Label> |
||||
<Field.Row> |
||||
<TextInput disabled={editing} value={name} onChange={handleName} placeholder={t('Role')}/> |
||||
</Field.Row> |
||||
</Field> |
||||
<Field className={className}> |
||||
<Field.Label>{t('Description')}</Field.Label> |
||||
<Field.Row> |
||||
<TextInput value={description} onChange={handleDescription} placeholder={t('Description')}/> |
||||
</Field.Row> |
||||
<Field.Hint>{('Leave the description field blank if you dont want to show the role')}</Field.Hint> |
||||
</Field> |
||||
<Field className={className}> |
||||
<Field.Label>{t('Scope')}</Field.Label> |
||||
<Field.Row> |
||||
<Select disabled={isProtected} options={options} value={scope} onChange={handleScope} placeholder={t('Scope')}/> |
||||
</Field.Row> |
||||
</Field> |
||||
<Field className={className}> |
||||
<Box display='flex' flexDirection='row'> |
||||
<Field.Label>{t('Users must use Two Factor Authentication')}</Field.Label> |
||||
<Field.Row> |
||||
<ToggleSwitch checked={mandatory2fa} onChange={handleMandatory2fa}/> |
||||
</Field.Row> |
||||
</Box> |
||||
</Field> |
||||
</>; |
||||
}; |
||||
|
||||
export default RoleForm; |
||||
@ -0,0 +1,95 @@ |
||||
import React, { useState, useRef } from 'react'; |
||||
import { Box, Field, Margins, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import Page from '../../components/basic/Page'; |
||||
import UsersInRoleTable from './UsersInRoleTable'; |
||||
import RoomAutoComplete from '../../components/basic/RoomAutoComplete'; |
||||
import { UserAutoComplete } from '../../components/basic/AutoComplete'; |
||||
import { useRoute, useRouteParameter } from '../../contexts/RouterContext'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { useRole } from './useRole'; |
||||
|
||||
const UsersInRolePageContainer = () => { |
||||
const _id = useRouteParameter('_id'); |
||||
|
||||
const role = useRole(_id); |
||||
|
||||
if (!role) { |
||||
return null; |
||||
} |
||||
|
||||
return <UsersInRolePage data={role} />; |
||||
}; |
||||
|
||||
const UsersInRolePage = ({ data }) => { |
||||
const t = useTranslation(); |
||||
const dispatchToastMessage = useToastMessageDispatch(); |
||||
|
||||
const reload = useRef(); |
||||
|
||||
const [user, setUser] = useState(); |
||||
const [rid, setRid] = useState(); |
||||
|
||||
const { name } = data; |
||||
|
||||
const router = useRoute('admin-permissions'); |
||||
|
||||
const addUser = useMethod('authorization:addUserToRole'); |
||||
|
||||
const handleReturn = useMutableCallback(() => { |
||||
router.push({ |
||||
context: 'edit', |
||||
_id: name, |
||||
}); |
||||
}); |
||||
|
||||
const handleAdd = useMutableCallback(async () => { |
||||
try { |
||||
await addUser(name, user, rid); |
||||
dispatchToastMessage({ type: 'success', message: t('User_added') }); |
||||
setUser(); |
||||
reload.current(); |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'error', message: error }); |
||||
} |
||||
}); |
||||
|
||||
return <Page> |
||||
<Page.Header title={`${ t('Users_in_role') } "${ name }"`}> |
||||
<ButtonGroup> |
||||
{/* <Button primary onClick={handleSave}>{t('Save')}</Button> */} |
||||
<Button onClick={handleReturn}>{t('Back')}</Button> |
||||
</ButtonGroup> |
||||
</Page.Header> |
||||
<Page.Content> |
||||
<Box display='flex' flexDirection='row' w='full' mi='neg-x4'> |
||||
<Margins inline='x4'> |
||||
{data.scope !== 'Users' && <Field> |
||||
<Field.Label>{t('Choose_a_room')}</Field.Label> |
||||
<Field.Row> |
||||
<RoomAutoComplete value={rid} onChange={setRid} placeholder={t('User')}/> |
||||
</Field.Row> |
||||
</Field>} |
||||
<Field> |
||||
<Field.Label>{t('Add_user')}</Field.Label> |
||||
<Field.Row> |
||||
<UserAutoComplete value={user} onChange={setUser} placeholder={t('User')}/> |
||||
</Field.Row> |
||||
</Field> |
||||
<Box display='flex' flexGrow={1} flexDirection='column' justifyContent='flex-end'> |
||||
<Button primary onClick={handleAdd}>{t('Add')}</Button> |
||||
</Box> |
||||
</Margins> |
||||
</Box> |
||||
<Margins blockStart='x8'> |
||||
{(data.scope === 'Users' || rid) && <UsersInRoleTable reloadRef={reload} scope={data.scope} rid={rid} roleName={data.name}/>} |
||||
{data.scope !== 'Users' && !rid && <Callout type='info'>{t('Select_a_room')}</Callout>} |
||||
</Margins> |
||||
</Page.Content> |
||||
</Page>; |
||||
}; |
||||
|
||||
export default UsersInRolePageContainer; |
||||
@ -0,0 +1,118 @@ |
||||
import React, { useState, useMemo } from 'react'; |
||||
import { Box, Table, Button, Icon } from '@rocket.chat/fuselage'; |
||||
import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks'; |
||||
|
||||
import UserAvatar from '../../components/basic/avatar/UserAvatar'; |
||||
import DeleteWarningModal from '../../components/DeleteWarningModal'; |
||||
import { useMethod } from '../../contexts/ServerContext'; |
||||
import { GenericTable } from '../../components/GenericTable'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext'; |
||||
import { useSetModal } from '../../contexts/ModalContext'; |
||||
import { useEndpointDataExperimental } from '../../hooks/useEndpointDataExperimental'; |
||||
|
||||
|
||||
const UserRow = React.memo(({ _id, username, name, avatarETag, emails, onRemove }) => { |
||||
const email = emails?.find(({ address }) => !!address).address; |
||||
|
||||
const handleRemove = useMutableCallback(() => { |
||||
onRemove(username); |
||||
}); |
||||
|
||||
return <Table.Row key={_id} tabIndex={0} role='link'> |
||||
<Table.Cell withTruncatedText> |
||||
<Box display='flex' alignItems='center'> |
||||
<UserAvatar size='x40' title={username} username={username} etag={avatarETag}/> |
||||
<Box display='flex' withTruncatedText mi='x8'> |
||||
<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText> |
||||
<Box fontScale='p2' withTruncatedText color='default'>{name || username}</Box> |
||||
{name && <Box fontScale='p1' color='hint' withTruncatedText> {`@${ username }`} </Box>} |
||||
</Box> |
||||
</Box> |
||||
</Box> |
||||
</Table.Cell> |
||||
<Table.Cell withTruncatedText>{email}</Table.Cell> |
||||
<Table.Cell withTruncatedText> |
||||
<Button small square danger onClick={handleRemove}> |
||||
<Icon name='trash' size='x20' /> |
||||
</Button> |
||||
</Table.Cell> |
||||
</Table.Row>; |
||||
}); |
||||
|
||||
export function UsersInRoleTable({ data, reload, roleName, total, params, setParams, rid }) { |
||||
const t = useTranslation(); |
||||
const dispatchToastMessage = useToastMessageDispatch(); |
||||
|
||||
const setModal = useSetModal(); |
||||
|
||||
const removeUser = useMethod('authorization:removeUserFromRole'); |
||||
|
||||
const closeModal = () => setModal(); |
||||
|
||||
const onRemove = useMutableCallback((username) => { |
||||
const remove = async () => { |
||||
try { |
||||
await removeUser(roleName, username, rid); |
||||
dispatchToastMessage({ type: 'success', message: t('User_removed') }); |
||||
} catch (error) { |
||||
dispatchToastMessage({ type: 'erroor', message: error }); |
||||
} |
||||
closeModal(); |
||||
reload(); |
||||
}; |
||||
setModal(<DeleteWarningModal onCancel={closeModal} onDelete={remove}> |
||||
{t('The_user_s_will_be_removed_from_role_s', username, roleName)} |
||||
</DeleteWarningModal>); |
||||
}); |
||||
|
||||
return <GenericTable |
||||
header={<> |
||||
<GenericTable.HeaderCell > |
||||
{t('Name')} |
||||
</GenericTable.HeaderCell> |
||||
<GenericTable.HeaderCell> |
||||
{t('Email')} |
||||
</GenericTable.HeaderCell> |
||||
<GenericTable.HeaderCell w='x80'> |
||||
</GenericTable.HeaderCell> |
||||
</>} |
||||
results={data} |
||||
params={params} |
||||
setParams={setParams} |
||||
total={total} |
||||
> |
||||
{(props) => <UserRow onRemove={onRemove} key={props._id} {...props}/>} |
||||
</GenericTable>; |
||||
} |
||||
|
||||
const UsersInRoleTableContainer = ({ rid, roleName, reloadRef }) => { |
||||
const [params, setParams] = useState({ current: 0, itemsPerPage: 25 }); |
||||
|
||||
const debouncedParams = useDebouncedValue(params, 500); |
||||
|
||||
const query = useMemo(() => ({ |
||||
roomId: rid, |
||||
role: roleName, |
||||
...debouncedParams.itemsPerPage && { count: debouncedParams.itemsPerPage }, |
||||
...debouncedParams.current && { offset: debouncedParams.current }, |
||||
}), [debouncedParams, rid, roleName]); |
||||
|
||||
const { data = {}, reload } = useEndpointDataExperimental('roles.getUsersInRole', query); |
||||
|
||||
reloadRef.current = reload; |
||||
|
||||
const tableData = data?.users || []; |
||||
|
||||
return <UsersInRoleTable |
||||
data={tableData} |
||||
total={data?.total} |
||||
reload={reload} |
||||
params={params} |
||||
setParams={setParams} |
||||
roleName={roleName} |
||||
rid={rid} |
||||
/>; |
||||
}; |
||||
|
||||
export default UsersInRoleTableContainer; |
||||
@ -0,0 +1,6 @@ |
||||
import { useCallback } from 'react'; |
||||
|
||||
import { Roles } from '../../../app/models/client'; |
||||
import { useReactiveValue } from '../../hooks/useReactiveValue'; |
||||
|
||||
export const useRole = (_id) => useReactiveValue(useCallback(() => Roles.findOne({ _id }), [_id])); |
||||
@ -0,0 +1,32 @@ |
||||
import React, { useMemo, useState } from 'react'; |
||||
import { AutoComplete, Option, Options } from '@rocket.chat/fuselage'; |
||||
|
||||
import { useEndpointDataExperimental } from '../../hooks/useEndpointDataExperimental'; |
||||
import RoomAvatar from './avatar/RoomAvatar'; |
||||
|
||||
const query = (term = '') => ({ selector: JSON.stringify({ name: term }) }); |
||||
|
||||
const Avatar = ({ value, type, avatarETag, ...props }) => <RoomAvatar size={Options.AvatarSize} room={{ type, _id: value, avatarETag }} {...props} />; |
||||
|
||||
const RoomAutoComplete = React.memo((props) => { |
||||
const [filter, setFilter] = useState(''); |
||||
const { data } = useEndpointDataExperimental('rooms.autocomplete.channelAndPrivate', useMemo(() => query(filter), [filter])); |
||||
const options = useMemo(() => (data && data.items.map(({ name, _id, avatarETag, t }) => ({ |
||||
value: _id, |
||||
label: { name, avatarETag, type: t }, |
||||
}))) || [], [data]); |
||||
|
||||
return <AutoComplete |
||||
{...props} |
||||
filter={filter} |
||||
setFilter={setFilter} |
||||
renderSelected={({ |
||||
value, |
||||
label, |
||||
}) => <><RoomAvatar size='x20' room={{ type: label?.type || 'c', _id: value, ...label }} /> {label?.name}</>} |
||||
renderItem={({ value, label, ...props }) => <Option key={value} {...props} label={label.name} avatar={<Avatar value={value} {...label} />} />} |
||||
options={ options } |
||||
/>; |
||||
}); |
||||
|
||||
export default RoomAutoComplete; |
||||
Loading…
Reference in new issue