+
+ );
+});
+
+const onRoomTileClick = (roomId) => {
+ dis.dispatch({
+ action: 'view_room',
+ room_id: roomId,
+ });
+};
+
+const DirectChatsSection = withLegacyMatrixClient(({cli, userId, startUpdating, stopUpdating}) => {
+ const onNewDMClick = async () => {
+ startUpdating();
+ await createRoom({dmUserId: userId});
+ stopUpdating();
+ };
+
+ // TODO: Immutable DMs replaces a lot of this
+ // dmRooms will not include dmRooms that we have been invited into but did not join.
+ // Because DMRoomMap runs off account_data[m.direct] which is only set on join of dm room.
+ // XXX: we potentially want DMs we have been invited to, to also show up here :L
+ // especially as logic below concerns specially if we haven't joined but have been invited
+ const [dmRooms, setDmRooms] = useState(new DMRoomMap(cli).getDMRoomsForUserId(userId));
+
+ // TODO bind the below
+ // cli.on("Room", this.onRoom);
+ // cli.on("Room.name", this.onRoomName);
+ // cli.on("deleteRoom", this.onDeleteRoom);
+
+ const accountDataHandler = useCallback((ev) => {
+ if (ev.getType() === "m.direct") {
+ const dmRoomMap = new DMRoomMap(cli);
+ setDmRooms(dmRoomMap.getDMRoomsForUserId(userId));
+ }
+ }, [cli, userId]);
+
+ useEventListener("accountData", accountDataHandler, cli);
+
+ const RoomTile = sdk.getComponent("rooms.RoomTile");
+
+ const tiles = [];
+ for (const roomId of dmRooms) {
+ const room = cli.getRoom(roomId);
+ if (room) {
+ const myMembership = room.getMyMembership();
+ // not a DM room if we have are not joined
+ if (myMembership !== 'join') continue;
+
+ const them = room.getMember(userId);
+ // not a DM room if they are not joined
+ if (!them || !them.membership || them.membership !== 'join') continue;
+
+ const highlight = room.getUnreadNotificationCount('highlight') > 0;
+
+ tiles.push(
+ { _t("Trust & Devices") }
+
+ { devices.map((device, i) =>
+
+ ![{_t("Start]({require("../../../../res/img/create-big.svg")})
+
+
+ { _t("Start a chat") }
+
+
+ );
+});
+
+const UserOptionsSection = withLegacyMatrixClient(({cli, member, isIgnored, canInvite}) => {
+ let ignoreButton = null;
+ let insertPillButton = null;
+ let inviteUserButton = null;
+ let readReceiptButton = null;
+
+ const onShareUserClick = () => {
+ const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+ Modal.createTrackedDialog('share room member dialog', '', ShareDialog, {
+ target: member,
+ });
+ };
+
+ // Only allow the user to ignore the user if its not ourselves
+ // same goes for jumping to read receipt
+ if (member.userId !== cli.getUserId()) {
+ const onIgnoreToggle = () => {
+ const ignoredUsers = cli.getIgnoredUsers();
+ if (isIgnored) {
+ const index = ignoredUsers.indexOf(member.userId);
+ if (index !== -1) ignoredUsers.splice(index, 1);
+ } else {
+ ignoredUsers.push(member.userId);
+ }
+
+ cli.setIgnoredUsers(ignoredUsers).then(() => {
+ // return this.setState({isIgnoring: !this.state.isIgnoring});
+ });
+ };
+
+ ignoreButton = (
+
+
+ { body }
+ { _t("Direct messages") }
+
+
+ );
+});
+
+const _warnSelfDemote = async () => {
+ const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+ const {finished} = Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
+ title: _t("Demote yourself?"),
+ description:
+ { _t("User Options") }
+
+ { readReceiptButton }
+ { shareUserButton }
+ { insertPillButton }
+ { ignoreButton }
+ { inviteUserButton }
+
+
+ { _t("You will not be able to undo this change as you are demoting yourself, " +
+ "if you are the last privileged user in the room it will be impossible " +
+ "to regain privileges.") }
+
,
+ button: _t("Demote"),
+ });
+
+ const [confirmed] = await finished;
+ return confirmed;
+};
+
+const GenericAdminToolsContainer = ({children}) => {
+ return (
+
+
+ );
+};
+
+const _isMuted = (member, powerLevelContent) => {
+ if (!powerLevelContent || !member) return false;
+
+ const levelToSend = (
+ (powerLevelContent.events ? powerLevelContent.events["m.room.message"] : null) ||
+ powerLevelContent.events_default
+ );
+ return member.powerLevel < levelToSend;
+};
+
+const useRoomPowerLevels = (room) => {
+ const [powerLevels, setPowerLevels] = useState({});
+
+ const update = useCallback(() => {
+ const event = room.currentState.getStateEvents("m.room.power_levels", "");
+ if (event) {
+ setPowerLevels(event.getContent());
+ } else {
+ setPowerLevels({});
+ }
+ return () => {
+ setPowerLevels({});
+ };
+ }, [room]);
+
+ useEventListener("RoomState.events", update, room);
+ useEffect(() => {
+ update();
+ return () => {
+ setPowerLevels({});
+ };
+ }, [update]);
+ return powerLevels;
+};
+
+const RoomAdminToolsContainer = withLegacyMatrixClient(({cli, room, children, member, startUpdating, stopUpdating}) => {
+ let kickButton;
+ let banButton;
+ let muteButton;
+ let redactButton;
+
+ const powerLevels = useRoomPowerLevels(room);
+ const editPowerLevel = (
+ (powerLevels.events ? powerLevels.events["m.room.power_levels"] : null) ||
+ powerLevels.state_default
+ );
+
+ const me = room.getMember(cli.getUserId());
+ const isMe = me.userId === member.userId;
+ const canAffectUser = member.powerLevel < me.powerLevel || isMe;
+ const membership = member.membership;
+
+ if (canAffectUser && me.powerLevel >= powerLevels.kick) {
+ const onKick = async () => {
+ const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
+ const {finished} = Modal.createTrackedDialog(
+ 'Confirm User Action Dialog',
+ 'onKick',
+ ConfirmUserActionDialog,
+ {
+ member,
+ action: membership === "invite" ? _t("Disinvite") : _t("Kick"),
+ title: membership === "invite" ? _t("Disinvite this user?") : _t("Kick this user?"),
+ askReason: membership === "join",
+ danger: true,
+ },
+ );
+
+ const [proceed, reason] = await finished;
+ if (!proceed) return;
+
+ startUpdating();
+ cli.kick(member.roomId, member.userId, reason || undefined).then(() => {
+ // NO-OP; rely on the m.room.member event coming down else we could
+ // get out of sync if we force setState here!
+ console.log("Kick success");
+ }, function(err) {
+ const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Kick error: " + err);
+ Modal.createTrackedDialog('Failed to kick', '', ErrorDialog, {
+ title: _t("Failed to kick"),
+ description: ((err && err.message) ? err.message : "Operation failed"),
+ });
+ }).finally(() => {
+ stopUpdating();
+ });
+ };
+
+ const kickLabel = membership === "invite" ? _t("Disinvite") : _t("Kick");
+ kickButton = (
+ { _t("Admin Tools") }
+
+ { children }
+
+
+
,
+ });
+ } else {
+ const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+ const {finished} = Modal.createTrackedDialog('Remove recent messages by user', '', QuestionDialog, {
+ title: _t("Remove recent messages by %(user)s", {user}),
+ description:
+ { _t("Try scrolling up in the timeline to see if there are any earlier ones.") }
+
+
,
+ button: _t("Remove %(count)s messages", {count}),
+ });
+
+ const [confirmed] = await finished;
+ if (!confirmed) {
+ return;
+ }
+
+ // Submitting a large number of redactions freezes the UI,
+ // so first yield to allow to rerender after closing the dialog.
+ await Promise.resolve();
+
+ console.info(`Started redacting recent ${count} messages for ${user} in ${roomId}`);
+ await Promise.all(eventsToRedact.map(async event => {
+ try {
+ await cli.redactEvent(roomId, event.getId());
+ } catch (err) {
+ // log and swallow errors
+ console.error("Could not redact", event.getId());
+ console.error(err);
+ }
+ }));
+ console.info(`Finished redacting recent ${count} messages for ${user} in ${roomId}`);
+ }
+ };
+
+ redactButton = (
+ { _t("You are about to remove %(count)s messages by %(user)s. This cannot be undone. Do you wish to continue?", {count, user}) }
+{ _t("For a large amount of messages, this might take some time. Please don't refresh your client in the meantime.") }
+{ _t(
+ "Deactivating this user will log them out and prevent them from logging back in. Additionally, " +
+ "they will leave all the rooms they are in. This action cannot be reversed. Are you sure you " +
+ "want to deactivate this user?",
+ ) }
,
+ button: _t("Deactivate user"),
+ danger: true,
+ });
+
+ const [accepted] = await finished;
+ if (!accepted) return;
+ try {
+ cli.deactivateSynapseUser(user.userId);
+ } catch (err) {
+ const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+ Modal.createTrackedDialog('Failed to deactivate user', '', ErrorDialog, {
+ title: _t('Failed to deactivate user'),
+ description: ((err && err.message) ? err.message : _t("Operation failed")),
+ });
+ }
+ }, [cli, user.userId]);
+
+ const onPowerChange = useCallback(async (powerLevel) => {
+ const _applyPowerChange = (roomId, target, powerLevel, powerLevelEvent) => {
+ startUpdating();
+ cli.setPowerLevel(roomId, target, parseInt(powerLevel), powerLevelEvent).then(
+ function() {
+ // NO-OP; rely on the m.room.member event coming down else we could
+ // get out of sync if we force setState here!
+ console.log("Power change success");
+ }, function(err) {
+ const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Failed to change power level " + err);
+ Modal.createTrackedDialog('Failed to change power level', '', ErrorDialog, {
+ title: _t("Error"),
+ description: _t("Failed to change power level"),
+ });
+ },
+ ).finally(() => {
+ stopUpdating();
+ }).done();
+ };
+
+ const roomId = user.roomId;
+ const target = user.userId;
+
+ const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
+ if (!powerLevelEvent) return;
+
+ if (!powerLevelEvent.getContent().users) {
+ _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+ return;
+ }
+
+ const myUserId = cli.getUserId();
+ const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+ // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
+ if (myUserId === target) {
+ try {
+ if (!(await _warnSelfDemote())) return;
+ _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+ } catch (e) {
+ console.error("Failed to warn about self demotion: ", e);
+ }
+ return;
+ }
+
+ const myPower = powerLevelEvent.getContent().users[myUserId];
+ if (parseInt(myPower) === parseInt(powerLevel)) {
+ const {finished} = Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
+ title: _t("Warning!"),
+ description:
+
+ { _t("You will not be able to undo this change as you are promoting the user " +
+ "to have the same power level as yourself.") }
+ { _t("Are you sure?") } +
,
+ button: _t("Continue"),
+ });
+
+ const [confirmed] = await finished;
+ if (confirmed) return;
+ }
+ _applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+ }, [user.roomId, user.userId, room && room.currentState, cli]); // eslint-disable-line
+
+ const onMemberAvatarClick = useCallback(() => {
+ const member = user;
+ const avatarUrl = member.getMxcAvatarUrl();
+ if (!avatarUrl) return;
+
+ const httpUrl = cli.mxcUrlToHttp(avatarUrl);
+ const ImageView = sdk.getComponent("elements.ImageView");
+ const params = {
+ src: httpUrl,
+ name: member.name,
+ };
+
+ Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+ }, [cli, user]);
+
+ let synapseDeactivateButton;
+ let spinner;
+
+ let directChatsSection;
+ if (user.userId !== cli.getUserId()) {
+ directChatsSection = + { _t("Are you sure?") } +
+
;
+ }
+
+ const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
+ let avatarElement;
+ if (avatarUrl) {
+ const httpUrl = cli.mxcUrlToHttp(avatarUrl, 800, 800);
+ avatarElement =
+
+
+
+ 
+
;
+ }
+
+ let closeButton;
+ if (onClose) {
+ closeButton =
+
+ );
+ }
+ }
+
+ let e2eIcon;
+ if (isRoomEncrypted && devices) {
+ e2eIcon = { _t("Trust & Devices") }
+
+ { text }
+
+
+ { closeButton }
+ { avatarElement }
+
+
+ { devicesSection }
+
+ { directChatsSection }
+
+
+
+ );
+});
+
+UserInfo.propTypes = {
+ user: PropTypes.oneOfType([
+ PropTypes.instanceOf(User),
+ PropTypes.instanceOf(RoomMember),
+ GroupMember,
+ ]).isRequired,
+ group: PropTypes.instanceOf(Group),
+ groupId: PropTypes.string,
+ roomId: PropTypes.string,
+
+ onClose: PropTypes.func,
+};
+
+export default UserInfo;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index b303b7a94d..03c9070db5 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -332,6 +332,7 @@
"Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
"Render simple counters in room header": "Render simple counters in room header",
"Multiple integration managers": "Multiple integration managers",
+ "Use the new, consistent UserInfo panel for Room Members and Group Members": "Use the new, consistent UserInfo panel for Room Members and Group Members",
"Use the new, faster, composer for writing messages": "Use the new, faster, composer for writing messages",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout",
@@ -1203,6 +1204,11 @@
"This alias is already in use": "This alias is already in use",
"Room directory": "Room directory",
"And %(count)s more...|other": "And %(count)s more...",
+ "Trust & Devices": "Trust & Devices",
+ "Direct messages": "Direct messages",
+ "Failed to deactivate user": "Failed to deactivate user",
+ "This client does not support end-to-end encryption.": "This client does not support end-to-end encryption.",
+ "Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.",
"ex. @bob:example.com": "ex. @bob:example.com",
"Add User": "Add User",
"Matrix ID": "Matrix ID",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 3c33ae57fe..7470641359 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -120,6 +120,12 @@ export const SETTINGS = {
supportedLevels: LEVELS_FEATURE,
default: false,
},
+ "feature_user_info_panel": {
+ isFeature: true,
+ displayName: _td("Use the new, consistent UserInfo panel for Room Members and Group Members"),
+ supportedLevels: LEVELS_FEATURE,
+ default: false,
+ },
"useCiderComposer": {
displayName: _td("Use the new, faster, composer for writing messages"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
diff --git a/yarn.lock b/yarn.lock
index ba7fea21ba..e40a1272cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -293,6 +293,11 @@
dependencies:
"@types/yargs-parser" "*"
+"@use-it/event-listener@^0.1.3":
+ version "0.1.3"
+ resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.3.tgz#a9920b2819d211cf55e68e830997546eec6886d3"
+ integrity sha512-UCHkLOVU+xj3/1R8jXz8GzDTowkzfIDPESOBlVC2ndgwUSBEqiFdwCoUEs2lcGhJOOiEdmWxF+T23C5+60eEew==
+
"@webassemblyjs/ast@1.8.5":
version "1.8.5"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -2891,6 +2896,11 @@ eslint-plugin-flowtype@^2.30.0:
dependencies:
lodash "^4.17.10"
+eslint-plugin-react-hooks@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.0.1.tgz#e898ec26a0a335af6f7b0ad1f0bedda7143ed756"
+ integrity sha512-xir+3KHKo86AasxlCV8AHRtIZPHljqCRRUYgASkbatmt0fad4+5GgC7zkT7o/06hdKM6MIwp8giHVXqBPaarHQ==
+
eslint-plugin-react@^7.7.0:
version "7.14.3"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"
+
+
+ { memberDetails &&
+
+
+
+ + { e2eIcon } + { displayName } +
+
+ { user.userId }
+
+
+ {presenceLabel}
+ {statusLabel}
+
+
+
}
+
+
+ { memberDetails }
+
+