From 769d24d196bd30ffa8d208439ff42250a03c6304 Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Mon, 10 Jan 2022 20:34:54 +0530 Subject: [PATCH] Add room permissions Signed-off-by: Ajay Bura --- .../room-permissions/RoomPermissions.jsx | 208 ++++++++++++++++++ .../room-permissions/RoomPermissions.scss | 11 + .../profile-viewer/ProfileViewer.jsx | 5 +- src/app/organisms/room/RoomSettings.jsx | 8 +- src/app/organisms/room/RoomSettings.scss | 22 +- 5 files changed, 238 insertions(+), 16 deletions(-) create mode 100644 src/app/molecules/room-permissions/RoomPermissions.jsx create mode 100644 src/app/molecules/room-permissions/RoomPermissions.scss diff --git a/src/app/molecules/room-permissions/RoomPermissions.jsx b/src/app/molecules/room-permissions/RoomPermissions.jsx new file mode 100644 index 0000000..d900197 --- /dev/null +++ b/src/app/molecules/room-permissions/RoomPermissions.jsx @@ -0,0 +1,208 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './RoomPermissions.scss'; + +import initMatrix from '../../../client/initMatrix'; +import { getPowerLabel } from '../../../util/matrixUtil'; + +import Text from '../../atoms/text/Text'; +import Button from '../../atoms/button/Button'; +import { MenuHeader } from '../../atoms/context-menu/ContextMenu'; +import SettingTile from '../setting-tile/SettingTile'; + +import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; + +const permissionsInfo = { + users_default: { + name: 'Default role', + description: 'Set default role for all members.', + default: 0, + }, + events_default: { + name: 'Send messages', + description: 'Set minimum power level to send messages in room.', + default: 0, + }, + redact: { + name: 'Delete messages sent by others', + description: 'Set minimum power level to delete messages in room.', + default: 50, + }, + notifications: { + name: 'Ping room', + description: 'Set minimum power level to ping room.', + default: { + room: 50, + }, + }, + 'm.space.child': { + parent: 'events', + name: 'Manage rooms in space', + description: 'Set minimum power level to manage rooms in space.', + default: 50, + }, + invite: { + name: 'Invite', + description: 'Set minimum power level to invite members.', + default: 50, + }, + kick: { + name: 'Kick', + description: 'Set minimum power level to kick members.', + default: 50, + }, + ban: { + name: 'Ban', + description: 'Set minimum power level to ban members.', + default: 50, + }, + 'm.room.avatar': { + parent: 'events', + name: 'Change avatar', + description: 'Set minimum power level to change room/space avatar.', + default: 50, + }, + 'm.room.name': { + parent: 'events', + name: 'Change name', + description: 'Set minimum power level to change room/space name.', + default: 50, + }, + 'm.room.topic': { + parent: 'events', + name: 'Change topic', + description: 'Set minimum power level to change room/space topic.', + default: 50, + }, + state_default: { + name: 'Change settings', + description: 'Set minimum power level to change settings.', + default: 50, + }, + 'm.room.canonical_alias': { + parent: 'events', + name: 'Change published address', + description: 'Set minimum power level to publish and set main address.', + default: 50, + }, + 'm.room.power_levels': { + parent: 'events', + name: 'Change permissions', + description: 'Set minimum power level to change permissions.', + default: 50, + }, + 'm.room.encryption': { + parent: 'events', + name: 'Enable room encryption', + description: 'Set minimum power level to enable room encryption.', + default: 50, + }, + 'm.room.history_visibility': { + parent: 'events', + name: 'Change history visibility', + description: 'Set minimum power level to change room messages history visibility.', + default: 50, + }, + 'm.room.tombstone': { + parent: 'events', + name: 'Upgrade room', + description: 'Set minimum power level to upgrade room.', + default: 50, + }, + 'm.room.pinned_events': { + parent: 'events', + name: 'Pin messages', + description: 'Set minimum power level to pin messages in room.', + default: 50, + }, + 'm.room.server_acl': { + parent: 'events', + name: 'Change server ACLs', + description: 'Set minimum power level to change server ACLs.', + default: 50, + }, + 'im.vector.modular.widgets': { + parent: 'events', + name: 'Modify widgets', + description: 'Set minimum power level to modify room widgets.', + default: 50, + }, +}; + +const roomPermsGroups = { + 'General Permissions': ['users_default', 'events_default', 'redact', 'notifications'], + 'Manage members permissions': ['invite', 'kick', 'ban'], + 'Room profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'], + 'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels', 'm.room.encryption', 'm.room.history_visibility'], + 'Other permissions': ['m.room.tombstone', 'm.room.pinned_events', 'm.room.server_acl', 'im.vector.modular.widgets'], +}; + +const spacePermsGroups = { + 'General Permissions': ['users_default', 'm.space.child'], + 'Manage members permissions': ['invite', 'kick', 'ban'], + 'Space profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'], + 'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels'], +}; + +function RoomPermissions({ roomId }) { + const mx = initMatrix.matrixClient; + const room = mx.getRoom(roomId); + const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0]; + const permissions = pLEvent.getContent(); + const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId()); + + return ( +
+ { + Object.keys(roomPermsGroups).map((groupKey) => { + const groupedPermKeys = roomPermsGroups[groupKey]; + return ( +
+ {groupKey} + { + groupedPermKeys.map((permKey) => { + const permInfo = permissionsInfo[permKey]; + + let powerLevel = 0; + let permValue = permInfo.parent + ? permissions[permInfo.parent][permKey] + : permissions[permKey]; + + if (!permValue) permValue = permInfo.default; + + if (typeof permValue === 'number') { + powerLevel = permValue; + } else if (permKey === 'notifications') { + powerLevel = permValue.room || 50; + } + return ( + {permInfo.description}} + options={( + + )} + /> + ); + }) + } +
+ ); + }) + } +
+ ); +} + +RoomPermissions.propTypes = { + roomId: PropTypes.string.isRequired, +}; + +export default RoomPermissions; diff --git a/src/app/molecules/room-permissions/RoomPermissions.scss b/src/app/molecules/room-permissions/RoomPermissions.scss new file mode 100644 index 0000000..81b22ca --- /dev/null +++ b/src/app/molecules/room-permissions/RoomPermissions.scss @@ -0,0 +1,11 @@ +.room-permissions { + & .setting-tile { + margin: 0 var(--sp-normal); + margin-top: var(--sp-tight); + padding-bottom: var(--sp-tight); + border-bottom: 1px solid var(--bg-surface-border); + &:last-child { + border-bottom: none; + } + } +} \ No newline at end of file diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx index 3b7a07c..73b722e 100644 --- a/src/app/organisms/profile-viewer/ProfileViewer.jsx +++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx @@ -261,6 +261,7 @@ function ProfileViewer() { function renderProfile() { const member = room.getMember(userId) || mx.getUser(userId) || {}; const avatarMxc = member.getMxcAvatarUrl?.() || member.avatarUrl; + const powerLevel = member.powerLevel || 0; const canChangeRole = room.currentState.maySendEvent('m.room.power_levels', mx.getUserId()); return ( @@ -278,7 +279,9 @@ function ProfileViewer() {
Role - +
diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx index 40e1d1d..98f49bc 100644 --- a/src/app/organisms/room/RoomSettings.jsx +++ b/src/app/organisms/room/RoomSettings.jsx @@ -19,12 +19,12 @@ import RoomVisibility from '../../molecules/room-visibility/RoomVisibility'; import RoomAliases from '../../molecules/room-aliases/RoomAliases'; import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomHistoryVisibility'; import RoomEncryption from '../../molecules/room-encryption/RoomEncryption'; +import RoomPermissions from '../../molecules/room-permissions/RoomPermissions'; import SettingsIC from '../../../../public/res/ic/outlined/settings.svg'; import SearchIC from '../../../../public/res/ic/outlined/search.svg'; import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg'; -import InfoIC from '../../../../public/res/ic/outlined/info.svg'; import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg'; import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg'; @@ -35,7 +35,6 @@ const tabText = { SEARCH: 'Search', PERMISSIONS: 'Permissions', SECURITY: 'Security', - ADVANCED: 'Advanced', }; const tabItems = [{ @@ -54,10 +53,6 @@ const tabItems = [{ iconSrc: LockIC, text: tabText.SECURITY, disabled: false, -}, { - iconSrc: InfoIC, - text: tabText.ADVANCED, - disabled: false, }]; function GeneralSettings({ roomId }) { @@ -156,6 +151,7 @@ function RoomSettings({ roomId }) { />
{selectedTab.text === tabText.GENERAL && } + {selectedTab.text === tabText.PERMISSIONS && } {selectedTab.text === tabText.SECURITY && }
diff --git a/src/app/organisms/room/RoomSettings.scss b/src/app/organisms/room/RoomSettings.scss index 480e4c8..617024a 100644 --- a/src/app/organisms/room/RoomSettings.scss +++ b/src/app/organisms/room/RoomSettings.scss @@ -32,16 +32,20 @@ padding: 0 var(--sp-normal); @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight)); } +} - &__card { - margin: var(--sp-normal) 0; - background-color: var(--bg-surface); - border-radius: var(--bo-radius); - box-shadow: var(--bs-surface-border); - overflow: hidden; +.room-settings__card { + margin: var(--sp-normal) 0; + background-color: var(--bg-surface); + border-radius: var(--bo-radius); + box-shadow: var(--bs-surface-border); + overflow: hidden; - & > .context-menu__header:first-child { - margin-top: 2px; - } + & > .context-menu__header:first-child { + margin-top: 2px; } +} + +.room-settings .room-permissions__card { + @extend .room-settings__card; } \ No newline at end of file