Merge remote-tracking branch 'upstream/develop' into public-e2ee-warn
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
commit
e445c9c3ff
592 changed files with 16697 additions and 9640 deletions
|
|
@ -15,54 +15,45 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { GuestAccess, HistoryVisibility, JoinRule, RestrictedAllowType } from "matrix-js-sdk/src/@types/partials";
|
||||
import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { EventType } from 'matrix-js-sdk/src/@types/event';
|
||||
|
||||
import { _t } from "../../../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
|
||||
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
|
||||
import Modal from "../../../../../Modal";
|
||||
import QuestionDialog from "../../../dialogs/QuestionDialog";
|
||||
import StyledRadioGroup from '../../../elements/StyledRadioGroup';
|
||||
import StyledRadioGroup, { IDefinition } from '../../../elements/StyledRadioGroup';
|
||||
import { SettingLevel } from "../../../../../settings/SettingLevel";
|
||||
import SettingsStore from "../../../../../settings/SettingsStore";
|
||||
import { UIFeature } from "../../../../../settings/UIFeature";
|
||||
import { replaceableComponent } from "../../../../../utils/replaceableComponent";
|
||||
import AccessibleButton from "../../../elements/AccessibleButton";
|
||||
import SpaceStore from "../../../../../stores/SpaceStore";
|
||||
import RoomAvatar from "../../../avatars/RoomAvatar";
|
||||
import ManageRestrictedJoinRuleDialog from '../../../dialogs/ManageRestrictedJoinRuleDialog';
|
||||
import RoomUpgradeWarningDialog from '../../../dialogs/RoomUpgradeWarningDialog';
|
||||
import { upgradeRoom } from "../../../../../utils/RoomUpgrade";
|
||||
import { arrayHasDiff } from "../../../../../utils/arrays";
|
||||
import SettingsFlag from '../../../elements/SettingsFlag';
|
||||
import createRoom, { IOpts } from '../../../../../createRoom';
|
||||
import CreateRoomDialog from '../../../dialogs/CreateRoomDialog';
|
||||
|
||||
// Knock and private are reserved keywords which are not yet implemented.
|
||||
export enum JoinRule {
|
||||
Public = "public",
|
||||
Knock = "knock",
|
||||
Invite = "invite",
|
||||
/**
|
||||
* @deprecated Reserved. Should not be used.
|
||||
*/
|
||||
Private = "private",
|
||||
}
|
||||
|
||||
export enum GuestAccess {
|
||||
CanJoin = "can_join",
|
||||
Forbidden = "forbidden",
|
||||
}
|
||||
|
||||
export enum HistoryVisibility {
|
||||
Invited = "invited",
|
||||
Joined = "joined",
|
||||
Shared = "shared",
|
||||
WorldReadable = "world_readable",
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
roomId: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
joinRule: JoinRule;
|
||||
restrictedAllowRoomIds?: string[];
|
||||
guestAccess: GuestAccess;
|
||||
history: HistoryVisibility;
|
||||
hasAliases: boolean;
|
||||
encrypted: boolean;
|
||||
roomSupportsRestricted?: boolean;
|
||||
preferredRestrictionVersion?: string;
|
||||
showAdvancedSection: boolean;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab")
|
||||
|
|
@ -72,44 +63,58 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
|
||||
this.state = {
|
||||
joinRule: JoinRule.Invite,
|
||||
guestAccess: GuestAccess.CanJoin,
|
||||
guestAccess: GuestAccess.Forbidden,
|
||||
history: HistoryVisibility.Shared,
|
||||
hasAliases: false,
|
||||
encrypted: false,
|
||||
showAdvancedSection: false,
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: [REACT-WARNING] Move this to constructor
|
||||
async UNSAFE_componentWillMount() { // eslint-disable-line camelcase
|
||||
MatrixClientPeg.get().on("RoomState.events", this.onStateEvent);
|
||||
UNSAFE_componentWillMount() { // eslint-disable-line
|
||||
const cli = MatrixClientPeg.get();
|
||||
cli.on("RoomState.events", this.onStateEvent);
|
||||
|
||||
const room = MatrixClientPeg.get().getRoom(this.props.roomId);
|
||||
const room = cli.getRoom(this.props.roomId);
|
||||
const state = room.currentState;
|
||||
|
||||
const joinRule: JoinRule = this.pullContentPropertyFromEvent(
|
||||
state.getStateEvents("m.room.join_rules", ""),
|
||||
const joinRuleEvent = state.getStateEvents(EventType.RoomJoinRules, "");
|
||||
const joinRule: JoinRule = this.pullContentPropertyFromEvent<JoinRule>(
|
||||
joinRuleEvent,
|
||||
'join_rule',
|
||||
JoinRule.Invite,
|
||||
);
|
||||
const guestAccess: GuestAccess = this.pullContentPropertyFromEvent(
|
||||
state.getStateEvents("m.room.guest_access", ""),
|
||||
const restrictedAllowRoomIds = joinRule === JoinRule.Restricted
|
||||
? joinRuleEvent?.getContent().allow
|
||||
?.filter(a => a.type === RestrictedAllowType.RoomMembership)
|
||||
?.map(a => a.room_id)
|
||||
: undefined;
|
||||
|
||||
const guestAccess: GuestAccess = this.pullContentPropertyFromEvent<GuestAccess>(
|
||||
state.getStateEvents(EventType.RoomGuestAccess, ""),
|
||||
'guest_access',
|
||||
GuestAccess.Forbidden,
|
||||
);
|
||||
const history: HistoryVisibility = this.pullContentPropertyFromEvent(
|
||||
state.getStateEvents("m.room.history_visibility", ""),
|
||||
const history: HistoryVisibility = this.pullContentPropertyFromEvent<HistoryVisibility>(
|
||||
state.getStateEvents(EventType.RoomHistoryVisibility, ""),
|
||||
'history_visibility',
|
||||
HistoryVisibility.Shared,
|
||||
);
|
||||
|
||||
const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
|
||||
this.setState({ joinRule, guestAccess, history, encrypted });
|
||||
const hasAliases = await this.hasAliases();
|
||||
this.setState({ hasAliases });
|
||||
const restrictedRoomCapabilities = SpaceStore.instance.restrictedJoinRuleSupport;
|
||||
const roomSupportsRestricted = Array.isArray(restrictedRoomCapabilities?.support)
|
||||
&& restrictedRoomCapabilities.support.includes(room.getVersion());
|
||||
const preferredRestrictionVersion = roomSupportsRestricted ? undefined : restrictedRoomCapabilities?.preferred;
|
||||
this.setState({ joinRule, restrictedAllowRoomIds, guestAccess, history, encrypted,
|
||||
roomSupportsRestricted, preferredRestrictionVersion });
|
||||
|
||||
this.hasAliases().then(hasAliases => this.setState({ hasAliases }));
|
||||
}
|
||||
|
||||
private pullContentPropertyFromEvent<T>(event: MatrixEvent, key: string, defaultValue: T): T {
|
||||
if (!event || !event.getContent()) return defaultValue;
|
||||
return event.getContent()[key] || defaultValue;
|
||||
return event?.getContent()[key] || defaultValue;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
|
@ -117,13 +122,13 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
}
|
||||
|
||||
private onStateEvent = (e: MatrixEvent) => {
|
||||
const refreshWhenTypes = [
|
||||
'm.room.join_rules',
|
||||
'm.room.guest_access',
|
||||
'm.room.history_visibility',
|
||||
'm.room.encryption',
|
||||
const refreshWhenTypes: EventType[] = [
|
||||
EventType.RoomJoinRules,
|
||||
EventType.RoomGuestAccess,
|
||||
EventType.RoomHistoryVisibility,
|
||||
EventType.RoomEncryption,
|
||||
];
|
||||
if (refreshWhenTypes.includes(e.getType())) this.forceUpdate();
|
||||
if (refreshWhenTypes.includes(e.getType() as EventType)) this.forceUpdate();
|
||||
};
|
||||
|
||||
private onEncryptionChange = async () => {
|
||||
|
|
@ -139,7 +144,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
"receiving and sending messages slower than necessary.",
|
||||
null,
|
||||
{ "b": (sub) => <b> { sub } </b> },
|
||||
)} </p>
|
||||
) } </p>
|
||||
<p> { _t(
|
||||
"To avoid these issues, create a <a> new private encrypted room </a> for " +
|
||||
"the conversation you plan to have.",
|
||||
|
|
@ -147,8 +152,8 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
{ "a": (sub) => <a onClick={() => {
|
||||
dialog.close();
|
||||
this.createNewRoom(false, true);
|
||||
}}> {sub} </a> },
|
||||
)} </p>
|
||||
}}> { sub } </a> },
|
||||
) } </p>
|
||||
</div>,
|
||||
|
||||
});
|
||||
|
|
@ -166,9 +171,11 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
"may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>",
|
||||
{},
|
||||
{
|
||||
a: sub => <a href="https://element.io/help#encryption"
|
||||
rel="noreferrer noopener" target="_blank"
|
||||
>{sub}</a>,
|
||||
a: sub => <a
|
||||
href="https://element.io/help#encryption"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>{ sub }</a>,
|
||||
},
|
||||
),
|
||||
onFinished: (confirm) => {
|
||||
|
|
@ -180,7 +187,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
const beforeEncrypted = this.state.encrypted;
|
||||
this.setState({ encrypted: true });
|
||||
MatrixClientPeg.get().sendStateEvent(
|
||||
this.props.roomId, "m.room.encryption",
|
||||
this.props.roomId, EventType.RoomEncryption,
|
||||
{ algorithm: "m.megolm.v1.aes-sha2" },
|
||||
).catch((e) => {
|
||||
console.error(e);
|
||||
|
|
@ -190,89 +197,126 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
});
|
||||
};
|
||||
|
||||
private fixGuestAccess = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const joinRule = JoinRule.Invite;
|
||||
const guestAccess = GuestAccess.CanJoin;
|
||||
|
||||
private onJoinRuleChange = async (joinRule: JoinRule) => {
|
||||
const beforeJoinRule = this.state.joinRule;
|
||||
const beforeGuestAccess = this.state.guestAccess;
|
||||
this.setState({ joinRule, guestAccess });
|
||||
|
||||
let restrictedAllowRoomIds: string[];
|
||||
if (joinRule === JoinRule.Restricted) {
|
||||
const matrixClient = MatrixClientPeg.get();
|
||||
const roomId = this.props.roomId;
|
||||
const room = matrixClient.getRoom(roomId);
|
||||
|
||||
if (beforeJoinRule === JoinRule.Restricted || this.state.roomSupportsRestricted) {
|
||||
// Have the user pick which spaces to allow joins from
|
||||
restrictedAllowRoomIds = await this.editRestrictedRoomIds();
|
||||
if (!Array.isArray(restrictedAllowRoomIds)) return;
|
||||
} else if (this.state.preferredRestrictionVersion) {
|
||||
// Block this action on a room upgrade otherwise it'd make their room unjoinable
|
||||
const targetVersion = this.state.preferredRestrictionVersion;
|
||||
Modal.createTrackedDialog('Restricted join rule upgrade', '', RoomUpgradeWarningDialog, {
|
||||
roomId,
|
||||
targetVersion,
|
||||
description: _t("This upgrade will allow members of selected spaces " +
|
||||
"access to this room without an invite."),
|
||||
onFinished: (resp) => {
|
||||
if (!resp?.continue) return;
|
||||
upgradeRoom(room, targetVersion, resp.invite);
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
this.state.encrypted &&
|
||||
this.state.joinRule !== JoinRule.Public &&
|
||||
joinRule === JoinRule.Public
|
||||
) {
|
||||
const dialog = Modal.createTrackedDialog('Confirm Public Encrypted Room', '', QuestionDialog, {
|
||||
title: _t("Are you sure you want to make this encrypted room public?"),
|
||||
description: <div>
|
||||
<p> { _t(
|
||||
"<b> It’s not recommended to make end-to-end encrypted rooms public. </b> It " +
|
||||
"means anyone can find and join this room, so anyone can read messages. You’ll " +
|
||||
"get none of the benefits of encryption. Encrypting messages in a public room " +
|
||||
"will also likely make receiving and sending messages slower than necessary.",
|
||||
null,
|
||||
{ "b": (sub) => <b> { sub } </b> },
|
||||
) } </p>
|
||||
<p> { _t(
|
||||
"To avoid these issues, create a <a> new public room </a> for the conversation " +
|
||||
"you plan to have.",
|
||||
null,
|
||||
{
|
||||
"a": (sub) => <a onClick={() => {
|
||||
dialog.close();
|
||||
this.createNewRoom(true, false);
|
||||
}}> { sub } </a>,
|
||||
},
|
||||
) } </p>
|
||||
</div>,
|
||||
});
|
||||
|
||||
const { finished } = dialog;
|
||||
const [confirm] = await finished;
|
||||
if (!confirm) return;
|
||||
}
|
||||
|
||||
if (beforeJoinRule === joinRule && !restrictedAllowRoomIds) return;
|
||||
|
||||
const content: IContent = {
|
||||
join_rule: joinRule,
|
||||
};
|
||||
|
||||
// pre-set the accepted spaces with the currently viewed one as per the microcopy
|
||||
if (joinRule === JoinRule.Restricted) {
|
||||
content.allow = restrictedAllowRoomIds.map(roomId => ({
|
||||
"type": RestrictedAllowType.RoomMembership,
|
||||
"room_id": roomId,
|
||||
}));
|
||||
}
|
||||
|
||||
this.setState({ joinRule, restrictedAllowRoomIds });
|
||||
|
||||
const client = MatrixClientPeg.get();
|
||||
client.sendStateEvent(
|
||||
this.props.roomId,
|
||||
"m.room.join_rules",
|
||||
{ join_rule: joinRule },
|
||||
"",
|
||||
).catch((e) => {
|
||||
client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, content, "").catch((e) => {
|
||||
console.error(e);
|
||||
this.setState({ joinRule: beforeJoinRule });
|
||||
});
|
||||
client.sendStateEvent(
|
||||
this.props.roomId,
|
||||
"m.room.guest_access",
|
||||
{ guest_access: guestAccess },
|
||||
"",
|
||||
).catch((e) => {
|
||||
console.error(e);
|
||||
this.setState({ guestAccess: beforeGuestAccess });
|
||||
this.setState({
|
||||
joinRule: beforeJoinRule,
|
||||
restrictedAllowRoomIds: undefined,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
private setRoomAccess = (roomAccess: string) => {
|
||||
// join_rule
|
||||
// INVITE | PUBLIC
|
||||
// ----------------------+----------------
|
||||
// guest CAN_JOIN | inv_only | pub_with_guest
|
||||
// access ----------------------+----------------
|
||||
// FORBIDDEN | inv_only | pub_no_guest
|
||||
// ----------------------+----------------
|
||||
|
||||
// we always set guests can_join here as it makes no sense to have
|
||||
// an invite-only room that guests can't join. If you explicitly
|
||||
// invite them, you clearly want them to join, whether they're a
|
||||
// guest or not. In practice, guest_access should probably have
|
||||
// been implemented as part of the join_rules enum.
|
||||
let joinRule = JoinRule.Invite;
|
||||
let guestAccess = GuestAccess.CanJoin;
|
||||
|
||||
switch (roomAccess) {
|
||||
case "invite_only":
|
||||
// no change - use defaults above
|
||||
break;
|
||||
case "public_no_guests":
|
||||
joinRule = JoinRule.Public;
|
||||
guestAccess = GuestAccess.Forbidden;
|
||||
break;
|
||||
case "public_with_guests":
|
||||
joinRule = JoinRule.Public;
|
||||
guestAccess = GuestAccess.CanJoin;
|
||||
break;
|
||||
}
|
||||
|
||||
const beforeJoinRule = this.state.joinRule;
|
||||
const beforeGuestAccess = this.state.guestAccess;
|
||||
this.setState({ joinRule, guestAccess });
|
||||
private onRestrictedRoomIdsChange = (restrictedAllowRoomIds: string[]) => {
|
||||
const beforeRestrictedAllowRoomIds = this.state.restrictedAllowRoomIds;
|
||||
if (!arrayHasDiff(beforeRestrictedAllowRoomIds || [], restrictedAllowRoomIds)) return;
|
||||
this.setState({ restrictedAllowRoomIds });
|
||||
|
||||
const client = MatrixClientPeg.get();
|
||||
client.sendStateEvent(
|
||||
this.props.roomId,
|
||||
"m.room.join_rules",
|
||||
{ join_rule: joinRule },
|
||||
"",
|
||||
).catch((e) => {
|
||||
client.sendStateEvent(this.props.roomId, EventType.RoomJoinRules, {
|
||||
join_rule: JoinRule.Restricted,
|
||||
allow: restrictedAllowRoomIds.map(roomId => ({
|
||||
"type": RestrictedAllowType.RoomMembership,
|
||||
"room_id": roomId,
|
||||
})),
|
||||
}, "").catch((e) => {
|
||||
console.error(e);
|
||||
this.setState({ joinRule: beforeJoinRule });
|
||||
this.setState({ restrictedAllowRoomIds: beforeRestrictedAllowRoomIds });
|
||||
});
|
||||
client.sendStateEvent(
|
||||
this.props.roomId,
|
||||
"m.room.guest_access",
|
||||
{ guest_access: guestAccess },
|
||||
"",
|
||||
).catch((e) => {
|
||||
};
|
||||
|
||||
private onGuestAccessChange = (allowed: boolean) => {
|
||||
const guestAccess = allowed ? GuestAccess.CanJoin : GuestAccess.Forbidden;
|
||||
const beforeGuestAccess = this.state.guestAccess;
|
||||
if (beforeGuestAccess === guestAccess) return;
|
||||
|
||||
this.setState({ guestAccess });
|
||||
|
||||
const client = MatrixClientPeg.get();
|
||||
client.sendStateEvent(this.props.roomId, EventType.RoomGuestAccess, {
|
||||
guest_access: guestAccess,
|
||||
}, "").catch((e) => {
|
||||
console.error(e);
|
||||
this.setState({ guestAccess: beforeGuestAccess });
|
||||
});
|
||||
|
|
@ -292,46 +336,12 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
return shouldCreate;
|
||||
};
|
||||
|
||||
private onRoomAccessRadioToggle = (roomAccess: string) => {
|
||||
if (
|
||||
this.state.encrypted &&
|
||||
this.state.joinRule != "public" &&
|
||||
roomAccess != "invite_only"
|
||||
) {
|
||||
const dialog = Modal.createTrackedDialog('Confirm Public Encrypted Room', '', QuestionDialog, {
|
||||
title: _t("Are you sure you want to make this encrypted room public?"),
|
||||
description: <div>
|
||||
<p> { _t(
|
||||
"<b> It’s not recommended to make end-to-end encrypted rooms public. </b> It " +
|
||||
"means anyone can find and join this room, so anyone can read messages. You’ll " +
|
||||
"get none of the benefits of encryption. Encrypting messages in a public room " +
|
||||
"will also likely make receiving and sending messages slower than necessary.",
|
||||
null,
|
||||
{ "b": (sub) => <b> { sub } </b> },
|
||||
)} </p>
|
||||
<p> { _t(
|
||||
"To avoid these issues, create a <a> new public room </a> for the conversation " +
|
||||
"you plan to have.",
|
||||
null,
|
||||
{ "a": (sub) => <a onClick={() => {
|
||||
dialog.close();
|
||||
this.createNewRoom(true, false);
|
||||
}}> {sub} </a> },
|
||||
)} </p>
|
||||
</div>,
|
||||
onFinished: (confirm) => {
|
||||
if (confirm) this.setRoomAccess(roomAccess);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.setRoomAccess(roomAccess);
|
||||
}
|
||||
};
|
||||
|
||||
private onHistoryRadioToggle = (history: HistoryVisibility) => {
|
||||
const beforeHistory = this.state.history;
|
||||
if (beforeHistory === history) return;
|
||||
|
||||
this.setState({ history: history });
|
||||
MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
|
||||
MatrixClientPeg.get().sendStateEvent(this.props.roomId, EventType.RoomHistoryVisibility, {
|
||||
history_visibility: history,
|
||||
}, "").catch((e) => {
|
||||
console.error(e);
|
||||
|
|
@ -351,74 +361,159 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
return Array.isArray(localAliases) && localAliases.length !== 0;
|
||||
} else {
|
||||
const room = cli.getRoom(this.props.roomId);
|
||||
const aliasEvents = room.currentState.getStateEvents("m.room.aliases") || [];
|
||||
const aliasEvents = room.currentState.getStateEvents(EventType.RoomAliases) || [];
|
||||
const hasAliases = !!aliasEvents.find((ev) => (ev.getContent().aliases || []).length > 0);
|
||||
return hasAliases;
|
||||
}
|
||||
}
|
||||
|
||||
private renderRoomAccess() {
|
||||
private editRestrictedRoomIds = async (): Promise<string[] | undefined> => {
|
||||
let selected = this.state.restrictedAllowRoomIds;
|
||||
if (!selected?.length && SpaceStore.instance.activeSpace) {
|
||||
selected = [SpaceStore.instance.activeSpace.roomId];
|
||||
}
|
||||
|
||||
const matrixClient = MatrixClientPeg.get();
|
||||
const { finished } = Modal.createTrackedDialog('Edit restricted', '', ManageRestrictedJoinRuleDialog, {
|
||||
matrixClient,
|
||||
room: matrixClient.getRoom(this.props.roomId),
|
||||
selected,
|
||||
}, "mx_ManageRestrictedJoinRuleDialog_wrapper");
|
||||
|
||||
const [restrictedAllowRoomIds] = await finished;
|
||||
return restrictedAllowRoomIds;
|
||||
};
|
||||
|
||||
private onEditRestrictedClick = async () => {
|
||||
const restrictedAllowRoomIds = await this.editRestrictedRoomIds();
|
||||
if (!Array.isArray(restrictedAllowRoomIds)) return;
|
||||
if (restrictedAllowRoomIds.length > 0) {
|
||||
this.onRestrictedRoomIdsChange(restrictedAllowRoomIds);
|
||||
} else {
|
||||
this.onJoinRuleChange(JoinRule.Invite);
|
||||
}
|
||||
};
|
||||
|
||||
private renderJoinRule() {
|
||||
const client = MatrixClientPeg.get();
|
||||
const room = client.getRoom(this.props.roomId);
|
||||
const joinRule = this.state.joinRule;
|
||||
const guestAccess = this.state.guestAccess;
|
||||
|
||||
const canChangeAccess = room.currentState.mayClientSendStateEvent("m.room.join_rules", client)
|
||||
&& room.currentState.mayClientSendStateEvent("m.room.guest_access", client);
|
||||
|
||||
let guestWarning = null;
|
||||
if (joinRule !== 'public' && guestAccess === 'forbidden') {
|
||||
guestWarning = (
|
||||
<div className='mx_SecurityRoomSettingsTab_warning'>
|
||||
<img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
|
||||
<span>
|
||||
{_t("Guests cannot join this room even if explicitly invited.")}
|
||||
<a href="" onClick={this.fixGuestAccess}>{_t("Click here to fix")}</a>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const canChangeJoinRule = room.currentState.mayClientSendStateEvent(EventType.RoomJoinRules, client);
|
||||
|
||||
let aliasWarning = null;
|
||||
if (joinRule === 'public' && !this.state.hasAliases) {
|
||||
if (joinRule === JoinRule.Public && !this.state.hasAliases) {
|
||||
aliasWarning = (
|
||||
<div className='mx_SecurityRoomSettingsTab_warning'>
|
||||
<img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
|
||||
<span>
|
||||
{_t("To link to this room, please add an address.")}
|
||||
{ _t("To link to this room, please add an address.") }
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const radioDefinitions: IDefinition<JoinRule>[] = [{
|
||||
value: JoinRule.Invite,
|
||||
label: _t("Private (invite only)"),
|
||||
description: _t("Only invited people can join."),
|
||||
checked: this.state.joinRule === JoinRule.Invite
|
||||
|| (this.state.joinRule === JoinRule.Restricted && !this.state.restrictedAllowRoomIds?.length),
|
||||
}, {
|
||||
value: JoinRule.Public,
|
||||
label: _t("Public"),
|
||||
description: _t("Anyone can find and join."),
|
||||
}];
|
||||
|
||||
if (this.state.roomSupportsRestricted ||
|
||||
this.state.preferredRestrictionVersion ||
|
||||
joinRule === JoinRule.Restricted
|
||||
) {
|
||||
let upgradeRequiredPill;
|
||||
if (this.state.preferredRestrictionVersion) {
|
||||
upgradeRequiredPill = <span className="mx_SecurityRoomSettingsTab_upgradeRequired">
|
||||
{ _t("Upgrade required") }
|
||||
</span>;
|
||||
}
|
||||
|
||||
let description;
|
||||
if (joinRule === JoinRule.Restricted && this.state.restrictedAllowRoomIds?.length) {
|
||||
const shownSpaces = this.state.restrictedAllowRoomIds
|
||||
.map(roomId => client.getRoom(roomId))
|
||||
.filter(room => room?.isSpaceRoom())
|
||||
.slice(0, 4);
|
||||
|
||||
let moreText;
|
||||
if (shownSpaces.length < this.state.restrictedAllowRoomIds.length) {
|
||||
if (shownSpaces.length > 0) {
|
||||
moreText = _t("& %(count)s more", {
|
||||
count: this.state.restrictedAllowRoomIds.length - shownSpaces.length,
|
||||
});
|
||||
} else {
|
||||
moreText = _t("Currently, %(count)s spaces have access", {
|
||||
count: this.state.restrictedAllowRoomIds.length,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
description = <div>
|
||||
<span>
|
||||
{ _t("Anyone in a space can find and join. <a>Edit which spaces can access here.</a>", {}, {
|
||||
a: sub => <AccessibleButton
|
||||
disabled={!canChangeJoinRule}
|
||||
onClick={this.onEditRestrictedClick}
|
||||
kind="link"
|
||||
>
|
||||
{ sub }
|
||||
</AccessibleButton>,
|
||||
}) }
|
||||
</span>
|
||||
|
||||
<div className="mx_SecurityRoomSettingsTab_spacesWithAccess">
|
||||
<h4>{ _t("Spaces with access") }</h4>
|
||||
{ shownSpaces.map(room => {
|
||||
return <span key={room.roomId}>
|
||||
<RoomAvatar room={room} height={32} width={32} />
|
||||
{ room.name }
|
||||
</span>;
|
||||
}) }
|
||||
{ moreText && <span>{ moreText }</span> }
|
||||
</div>
|
||||
</div>;
|
||||
} else if (SpaceStore.instance.activeSpace) {
|
||||
description = _t("Anyone in %(spaceName)s can find and join. You can select other spaces too.", {
|
||||
spaceName: SpaceStore.instance.activeSpace.name,
|
||||
});
|
||||
} else {
|
||||
description = _t("Anyone in a space can find and join. You can select multiple spaces.");
|
||||
}
|
||||
|
||||
radioDefinitions.splice(1, 0, {
|
||||
value: JoinRule.Restricted,
|
||||
label: <>
|
||||
{ _t("Space members") }
|
||||
{ upgradeRequiredPill }
|
||||
</>,
|
||||
description,
|
||||
// if there are 0 allowed spaces then render it as invite only instead
|
||||
checked: this.state.joinRule === JoinRule.Restricted && !!this.state.restrictedAllowRoomIds?.length,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{guestWarning}
|
||||
{aliasWarning}
|
||||
<div className="mx_SecurityRoomSettingsTab_joinRule">
|
||||
<div className="mx_SettingsTab_subsectionText">
|
||||
<span>{ _t("Decide who can join %(roomName)s.", {
|
||||
roomName: client.getRoom(this.props.roomId)?.name,
|
||||
}) }</span>
|
||||
</div>
|
||||
{ aliasWarning }
|
||||
<StyledRadioGroup
|
||||
name="roomVis"
|
||||
name="joinRule"
|
||||
value={joinRule}
|
||||
onChange={this.onRoomAccessRadioToggle}
|
||||
definitions={[
|
||||
{
|
||||
value: "invite_only",
|
||||
disabled: !canChangeAccess,
|
||||
label: _t('Only people who have been invited'),
|
||||
checked: joinRule !== "public",
|
||||
},
|
||||
{
|
||||
value: "public_no_guests",
|
||||
disabled: !canChangeAccess,
|
||||
label: _t('Anyone who knows the room\'s link, apart from guests'),
|
||||
checked: joinRule === "public" && guestAccess !== "can_join",
|
||||
},
|
||||
{
|
||||
value: "public_with_guests",
|
||||
disabled: !canChangeAccess,
|
||||
label: _t("Anyone who knows the room's link, including guests"),
|
||||
checked: joinRule === "public" && guestAccess === "can_join",
|
||||
},
|
||||
]}
|
||||
onChange={this.onJoinRuleChange}
|
||||
definitions={radioDefinitions}
|
||||
disabled={!canChangeJoinRule}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -428,50 +523,77 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
const client = MatrixClientPeg.get();
|
||||
const history = this.state.history;
|
||||
const state = client.getRoom(this.props.roomId).currentState;
|
||||
const canChangeHistory = state.mayClientSendStateEvent('m.room.history_visibility', client);
|
||||
const canChangeHistory = state.mayClientSendStateEvent(EventType.RoomHistoryVisibility, client);
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: HistoryVisibility.Shared,
|
||||
label: _t('Members only (since the point in time of selecting this option)'),
|
||||
},
|
||||
{
|
||||
value: HistoryVisibility.Invited,
|
||||
label: _t('Members only (since they were invited)'),
|
||||
},
|
||||
{
|
||||
value: HistoryVisibility.Joined,
|
||||
label: _t('Members only (since they joined)'),
|
||||
},
|
||||
];
|
||||
|
||||
// World readable doesn't make sense for encrypted rooms
|
||||
if (!this.state.encrypted || history === HistoryVisibility.WorldReadable) {
|
||||
options.unshift({
|
||||
value: HistoryVisibility.WorldReadable,
|
||||
label: _t("Anyone"),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
{_t('Changes to who can read history will only apply to future messages in this room. ' +
|
||||
'The visibility of existing history will be unchanged.')}
|
||||
{ _t('Changes to who can read history will only apply to future messages in this room. ' +
|
||||
'The visibility of existing history will be unchanged.') }
|
||||
</div>
|
||||
<StyledRadioGroup
|
||||
name="historyVis"
|
||||
value={history}
|
||||
onChange={this.onHistoryRadioToggle}
|
||||
definitions={[
|
||||
{
|
||||
value: HistoryVisibility.WorldReadable,
|
||||
disabled: !canChangeHistory,
|
||||
label: _t("Anyone"),
|
||||
},
|
||||
{
|
||||
value: HistoryVisibility.Shared,
|
||||
disabled: !canChangeHistory,
|
||||
label: _t('Members only (since the point in time of selecting this option)'),
|
||||
},
|
||||
{
|
||||
value: HistoryVisibility.Invited,
|
||||
disabled: !canChangeHistory,
|
||||
label: _t('Members only (since they were invited)'),
|
||||
},
|
||||
{
|
||||
value: HistoryVisibility.Joined,
|
||||
disabled: !canChangeHistory,
|
||||
label: _t('Members only (since they joined)'),
|
||||
},
|
||||
]}
|
||||
disabled={!canChangeHistory}
|
||||
definitions={options}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private toggleAdvancedSection = () => {
|
||||
this.setState({ showAdvancedSection: !this.state.showAdvancedSection });
|
||||
};
|
||||
|
||||
private renderAdvanced() {
|
||||
const client = MatrixClientPeg.get();
|
||||
const guestAccess = this.state.guestAccess;
|
||||
const state = client.getRoom(this.props.roomId).currentState;
|
||||
const canSetGuestAccess = state.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
|
||||
|
||||
return <div className="mx_SettingsTab_section">
|
||||
<LabelledToggleSwitch
|
||||
value={guestAccess === GuestAccess.CanJoin}
|
||||
onChange={this.onGuestAccessChange}
|
||||
disabled={!canSetGuestAccess}
|
||||
label={_t("Enable guest access")}
|
||||
/>
|
||||
<p>
|
||||
{ _t("People with supported clients will be able to join " +
|
||||
"the room without having a registered account.") }
|
||||
</p>
|
||||
</div>;
|
||||
}
|
||||
|
||||
render() {
|
||||
const client = MatrixClientPeg.get();
|
||||
const room = client.getRoom(this.props.roomId);
|
||||
const isEncrypted = this.state.encrypted;
|
||||
const hasEncryptionPermission = room.currentState.mayClientSendStateEvent("m.room.encryption", client);
|
||||
const hasEncryptionPermission = room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, client);
|
||||
const canEnableEncryption = !isEncrypted && hasEncryptionPermission;
|
||||
|
||||
let encryptionSettings = null;
|
||||
|
|
@ -485,9 +607,9 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
}
|
||||
|
||||
let historySection = (<>
|
||||
<span className='mx_SettingsTab_subheading'>{_t("Who can read history?")}</span>
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("Who can read history?") }</span>
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
{this.renderHistory()}
|
||||
{ this.renderHistory() }
|
||||
</div>
|
||||
</>);
|
||||
if (!SettingsStore.getValue(UIFeature.RoomHistorySettings)) {
|
||||
|
|
@ -496,27 +618,39 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
|
|||
|
||||
return (
|
||||
<div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
|
||||
<div className="mx_SettingsTab_heading">{ _t("Security & Privacy") }</div>
|
||||
|
||||
<span className='mx_SettingsTab_subheading'>{_t("Encryption")}</span>
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("Encryption") }</span>
|
||||
<div className='mx_SettingsTab_section mx_SecurityRoomSettingsTab_encryptionSection'>
|
||||
<div>
|
||||
<div className='mx_SettingsTab_subsectionText'>
|
||||
<span>{_t("Once enabled, encryption cannot be disabled.")}</span>
|
||||
<span>{ _t("Once enabled, encryption cannot be disabled.") }</span>
|
||||
</div>
|
||||
<LabelledToggleSwitch value={isEncrypted} onChange={this.onEncryptionChange}
|
||||
label={_t("Encrypted")} disabled={!canEnableEncryption}
|
||||
<LabelledToggleSwitch
|
||||
value={isEncrypted}
|
||||
onChange={this.onEncryptionChange}
|
||||
label={_t("Encrypted")}
|
||||
disabled={!canEnableEncryption}
|
||||
/>
|
||||
</div>
|
||||
{encryptionSettings}
|
||||
{ encryptionSettings }
|
||||
</div>
|
||||
|
||||
<span className='mx_SettingsTab_subheading'>{_t("Who can access this room?")}</span>
|
||||
<span className='mx_SettingsTab_subheading'>{ _t("Access") }</span>
|
||||
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
||||
{this.renderRoomAccess()}
|
||||
{ this.renderJoinRule() }
|
||||
</div>
|
||||
|
||||
{historySection}
|
||||
<AccessibleButton
|
||||
onClick={this.toggleAdvancedSection}
|
||||
kind="link"
|
||||
className="mx_SettingsTab_showAdvanced"
|
||||
>
|
||||
{ this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") }
|
||||
</AccessibleButton>
|
||||
{ this.state.showAdvancedSection && this.renderAdvanced() }
|
||||
|
||||
{ historySection }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue