2019-01-30 00:30:53 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-02-22 20:47:18 +03:00
|
|
|
import {_t} from "../../../../../languageHandler";
|
2019-12-21 00:13:46 +03:00
|
|
|
import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as sdk from "../../../../..";
|
2019-02-22 20:47:18 +03:00
|
|
|
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
|
|
|
|
import {SettingLevel} from "../../../../../settings/SettingsStore";
|
2019-03-01 06:34:34 +03:00
|
|
|
import Modal from "../../../../../Modal";
|
|
|
|
import QuestionDialog from "../../../dialogs/QuestionDialog";
|
2019-01-30 00:30:53 +03:00
|
|
|
|
|
|
|
export default class SecurityRoomSettingsTab extends React.Component {
|
|
|
|
static propTypes = {
|
|
|
|
roomId: PropTypes.string.isRequired,
|
|
|
|
};
|
|
|
|
|
2019-02-08 00:01:34 +03:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
joinRule: "invite",
|
|
|
|
guestAccess: "can_join",
|
|
|
|
history: "shared",
|
2020-02-19 13:18:56 +03:00
|
|
|
hasAliases: false,
|
2019-02-08 00:01:34 +03:00
|
|
|
encrypted: false,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-03-31 23:12:52 +03:00
|
|
|
// TODO: [REACT-WARNING] Move this to constructor
|
2020-03-31 23:21:12 +03:00
|
|
|
async UNSAFE_componentWillMount(): void { // eslint-disable-line camelcase
|
2019-01-30 00:30:53 +03:00
|
|
|
MatrixClientPeg.get().on("RoomState.events", this._onStateEvent);
|
2019-02-08 00:01:34 +03:00
|
|
|
|
|
|
|
const room = MatrixClientPeg.get().getRoom(this.props.roomId);
|
|
|
|
const state = room.currentState;
|
2019-02-14 21:09:37 +03:00
|
|
|
|
|
|
|
const joinRule = this._pullContentPropertyFromEvent(
|
|
|
|
state.getStateEvents("m.room.join_rules", ""),
|
|
|
|
'join_rule',
|
|
|
|
'invite',
|
|
|
|
);
|
|
|
|
const guestAccess = this._pullContentPropertyFromEvent(
|
|
|
|
state.getStateEvents("m.room.guest_access", ""),
|
|
|
|
'guest_access',
|
|
|
|
'forbidden',
|
|
|
|
);
|
|
|
|
const history = this._pullContentPropertyFromEvent(
|
|
|
|
state.getStateEvents("m.room.history_visibility", ""),
|
|
|
|
'history_visibility',
|
|
|
|
'shared',
|
|
|
|
);
|
2019-02-08 00:01:34 +03:00
|
|
|
const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
|
|
|
|
this.setState({joinRule, guestAccess, history, encrypted});
|
2020-02-19 13:18:56 +03:00
|
|
|
const hasAliases = await this._hasAliases();
|
|
|
|
this.setState({hasAliases});
|
2019-01-30 00:30:53 +03:00
|
|
|
}
|
|
|
|
|
2019-02-14 21:09:37 +03:00
|
|
|
_pullContentPropertyFromEvent(event, key, defaultValue) {
|
|
|
|
if (!event || !event.getContent()) return defaultValue;
|
|
|
|
return event.getContent()[key] || defaultValue;
|
|
|
|
}
|
|
|
|
|
2019-01-30 00:30:53 +03:00
|
|
|
componentWillUnmount(): void {
|
|
|
|
MatrixClientPeg.get().removeListener("RoomState.events", this._onStateEvent);
|
|
|
|
}
|
|
|
|
|
|
|
|
_onStateEvent = (e) => {
|
2019-02-02 00:56:29 +03:00
|
|
|
const refreshWhenTypes = [
|
|
|
|
'm.room.join_rules',
|
|
|
|
'm.room.guest_access',
|
|
|
|
'm.room.history_visibility',
|
|
|
|
'm.room.encryption',
|
|
|
|
];
|
2019-01-30 00:30:53 +03:00
|
|
|
if (refreshWhenTypes.includes(e.getType())) this.forceUpdate();
|
|
|
|
};
|
|
|
|
|
|
|
|
_onEncryptionChange = (e) => {
|
2019-03-01 06:34:34 +03:00
|
|
|
Modal.createTrackedDialog('Enable encryption', '', QuestionDialog, {
|
|
|
|
title: _t('Enable encryption?'),
|
|
|
|
description: _t(
|
|
|
|
"Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted " +
|
2019-03-01 06:45:31 +03:00
|
|
|
"room cannot be seen by the server, only by the participants of the room. Enabling encryption " +
|
2019-03-01 06:34:34 +03:00
|
|
|
"may prevent many bots and bridges from working correctly. <a>Learn more about encryption.</a>",
|
|
|
|
{},
|
|
|
|
{
|
|
|
|
'a': (sub) => {
|
2020-02-24 01:14:29 +03:00
|
|
|
return <a rel='noreferrer noopener' target='_blank'
|
2019-03-01 06:34:34 +03:00
|
|
|
href='https://about.riot.im/help#end-to-end-encryption'>{sub}</a>;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
),
|
|
|
|
onFinished: (confirm) => {
|
|
|
|
if (!confirm) {
|
|
|
|
this.setState({encrypted: false});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const beforeEncrypted = this.state.encrypted;
|
|
|
|
this.setState({encrypted: true});
|
|
|
|
MatrixClientPeg.get().sendStateEvent(
|
|
|
|
this.props.roomId, "m.room.encryption",
|
|
|
|
{ algorithm: "m.megolm.v1.aes-sha2" },
|
|
|
|
).catch((e) => {
|
|
|
|
console.error(e);
|
|
|
|
this.setState({encrypted: beforeEncrypted});
|
|
|
|
});
|
|
|
|
},
|
2019-02-08 00:01:34 +03:00
|
|
|
});
|
2019-01-30 00:30:53 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
_fixGuestAccess = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
|
2019-02-08 00:01:34 +03:00
|
|
|
const joinRule = "invite";
|
|
|
|
const guestAccess = "can_join";
|
|
|
|
|
|
|
|
const beforeJoinRule = this.state.joinRule;
|
|
|
|
const beforeGuestAccess = this.state.guestAccess;
|
|
|
|
this.setState({joinRule, guestAccess});
|
|
|
|
|
2019-01-30 00:30:53 +03:00
|
|
|
const client = MatrixClientPeg.get();
|
2019-02-08 00:01:34 +03:00
|
|
|
client.sendStateEvent(this.props.roomId, "m.room.join_rules", {join_rule: joinRule}, "").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});
|
|
|
|
});
|
2019-01-30 00:30:53 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
_onRoomAccessRadioToggle = (ev) => {
|
|
|
|
// 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 = "invite";
|
|
|
|
let guestAccess = "can_join";
|
|
|
|
|
|
|
|
switch (ev.target.value) {
|
|
|
|
case "invite_only":
|
|
|
|
// no change - use defaults above
|
|
|
|
break;
|
|
|
|
case "public_no_guests":
|
|
|
|
joinRule = "public";
|
|
|
|
guestAccess = "forbidden";
|
|
|
|
break;
|
|
|
|
case "public_with_guests":
|
|
|
|
joinRule = "public";
|
|
|
|
guestAccess = "can_join";
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
2019-02-08 00:01:34 +03:00
|
|
|
const beforeJoinRule = this.state.joinRule;
|
|
|
|
const beforeGuestAccess = this.state.guestAccess;
|
|
|
|
this.setState({joinRule, guestAccess});
|
|
|
|
|
2019-01-30 00:30:53 +03:00
|
|
|
const client = MatrixClientPeg.get();
|
2019-02-08 00:01:34 +03:00
|
|
|
client.sendStateEvent(this.props.roomId, "m.room.join_rules", {join_rule: joinRule}, "").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});
|
|
|
|
});
|
2019-01-30 00:30:53 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
_onHistoryRadioToggle = (ev) => {
|
2019-02-08 00:01:34 +03:00
|
|
|
const beforeHistory = this.state.history;
|
|
|
|
this.setState({history: ev.target.value});
|
2019-01-30 00:30:53 +03:00
|
|
|
MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.history_visibility", {
|
|
|
|
history_visibility: ev.target.value,
|
2019-02-08 00:01:34 +03:00
|
|
|
}, "").catch((e) => {
|
|
|
|
console.error(e);
|
|
|
|
this.setState({history: beforeHistory});
|
|
|
|
});
|
2019-01-30 00:30:53 +03:00
|
|
|
};
|
|
|
|
|
2019-03-22 23:22:20 +03:00
|
|
|
_updateBlacklistDevicesFlag = (checked) => {
|
|
|
|
MatrixClientPeg.get().getRoom(this.props.roomId).setBlacklistUnverifiedDevices(checked);
|
|
|
|
};
|
|
|
|
|
2020-02-19 13:18:56 +03:00
|
|
|
async _hasAliases() {
|
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
|
|
|
|
const response = await cli.unstableGetLocalAliases(this.props.roomId);
|
|
|
|
const localAliases = response.aliases;
|
|
|
|
return Array.isArray(localAliases) && localAliases.length !== 0;
|
|
|
|
} else {
|
|
|
|
const room = cli.getRoom(this.props.roomId);
|
|
|
|
const aliasEvents = room.currentState.getStateEvents("m.room.aliases") || [];
|
|
|
|
const hasAliases = !!aliasEvents.find((ev) => (ev.getContent().aliases || []).length > 0);
|
|
|
|
return hasAliases;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-01-30 00:30:53 +03:00
|
|
|
_renderRoomAccess() {
|
|
|
|
const client = MatrixClientPeg.get();
|
|
|
|
const room = client.getRoom(this.props.roomId);
|
2019-02-08 00:01:34 +03:00
|
|
|
const joinRule = this.state.joinRule;
|
|
|
|
const guestAccess = this.state.guestAccess;
|
2019-01-30 00:30:53 +03:00
|
|
|
|
|
|
|
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'>
|
2019-02-22 20:47:18 +03:00
|
|
|
<img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
|
2019-01-30 00:30:53 +03:00
|
|
|
<span>
|
|
|
|
{_t("Guests cannot join this room even if explicitly invited.")}
|
|
|
|
<a href="" onClick={this._fixGuestAccess}>{_t("Click here to fix")}</a>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
let aliasWarning = null;
|
2020-02-19 13:18:56 +03:00
|
|
|
if (joinRule === 'public' && !this.state.hasAliases) {
|
2019-01-30 00:30:53 +03:00
|
|
|
aliasWarning = (
|
|
|
|
<div className='mx_SecurityRoomSettingsTab_warning'>
|
2019-02-22 20:47:18 +03:00
|
|
|
<img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
|
2019-01-30 00:30:53 +03:00
|
|
|
<span>
|
|
|
|
{_t("To link to this room, please add an alias.")}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{guestWarning}
|
|
|
|
{aliasWarning}
|
|
|
|
<label>
|
|
|
|
<input type="radio" name="roomVis" value="invite_only"
|
|
|
|
disabled={!canChangeAccess}
|
|
|
|
onChange={this._onRoomAccessRadioToggle}
|
|
|
|
checked={joinRule !== "public"} />
|
|
|
|
{_t('Only people who have been invited')}
|
|
|
|
</label>
|
|
|
|
<label>
|
|
|
|
<input type="radio" name="roomVis" value="public_no_guests"
|
|
|
|
disabled={!canChangeAccess}
|
|
|
|
onChange={this._onRoomAccessRadioToggle}
|
|
|
|
checked={joinRule === "public" && guestAccess !== "can_join"} />
|
|
|
|
{_t('Anyone who knows the room\'s link, apart from guests')}
|
|
|
|
</label>
|
|
|
|
<label>
|
|
|
|
<input type="radio" name="roomVis" value="public_with_guests"
|
|
|
|
disabled={!canChangeAccess}
|
|
|
|
onChange={this._onRoomAccessRadioToggle}
|
|
|
|
checked={joinRule === "public" && guestAccess === "can_join"} />
|
|
|
|
{_t("Anyone who knows the room's link, including guests")}
|
|
|
|
</label>
|
|
|
|
</div>
|
2019-01-30 00:37:21 +03:00
|
|
|
);
|
2019-01-30 00:30:53 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
_renderHistory() {
|
|
|
|
const client = MatrixClientPeg.get();
|
2019-02-08 00:01:34 +03:00
|
|
|
const history = this.state.history;
|
|
|
|
const state = client.getRoom(this.props.roomId).currentState;
|
2019-01-30 00:30:53 +03:00
|
|
|
const canChangeHistory = state.mayClientSendStateEvent('m.room.history_visibility', client);
|
|
|
|
|
|
|
|
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.')}
|
|
|
|
</div>
|
|
|
|
<label>
|
|
|
|
<input type="radio" name="historyVis" value="world_readable"
|
|
|
|
disabled={!canChangeHistory}
|
|
|
|
checked={history === "world_readable"}
|
|
|
|
onChange={this._onHistoryRadioToggle} />
|
|
|
|
{_t("Anyone")}
|
|
|
|
</label>
|
|
|
|
<label>
|
|
|
|
<input type="radio" name="historyVis" value="shared"
|
|
|
|
disabled={!canChangeHistory}
|
|
|
|
checked={history === "shared"}
|
|
|
|
onChange={this._onHistoryRadioToggle} />
|
|
|
|
{_t('Members only (since the point in time of selecting this option)')}
|
|
|
|
</label>
|
|
|
|
<label>
|
|
|
|
<input type="radio" name="historyVis" value="invited"
|
|
|
|
disabled={!canChangeHistory}
|
|
|
|
checked={history === "invited"}
|
|
|
|
onChange={this._onHistoryRadioToggle} />
|
|
|
|
{_t('Members only (since they were invited)')}
|
|
|
|
</label>
|
|
|
|
<label >
|
|
|
|
<input type="radio" name="historyVis" value="joined"
|
|
|
|
disabled={!canChangeHistory}
|
|
|
|
checked={history === "joined"}
|
|
|
|
onChange={this._onHistoryRadioToggle} />
|
|
|
|
{_t('Members only (since they joined)')}
|
|
|
|
</label>
|
|
|
|
</div>
|
2019-01-30 00:37:21 +03:00
|
|
|
);
|
2019-01-30 00:30:53 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
|
|
|
|
|
|
|
|
const client = MatrixClientPeg.get();
|
|
|
|
const room = client.getRoom(this.props.roomId);
|
2019-02-08 00:01:34 +03:00
|
|
|
const isEncrypted = this.state.encrypted;
|
2019-01-30 00:30:53 +03:00
|
|
|
const hasEncryptionPermission = room.currentState.mayClientSendStateEvent("m.room.encryption", client);
|
|
|
|
const canEnableEncryption = !isEncrypted && hasEncryptionPermission;
|
|
|
|
|
|
|
|
let encryptionSettings = null;
|
|
|
|
if (isEncrypted) {
|
|
|
|
encryptionSettings = <SettingsFlag name="blacklistUnverifiedDevices" level={SettingLevel.ROOM_DEVICE}
|
2019-03-22 23:22:20 +03:00
|
|
|
onChange={this._updateBlacklistDevicesFlag}
|
2019-01-30 00:37:21 +03:00
|
|
|
roomId={this.props.roomId} />;
|
2019-01-30 00:30:53 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="mx_SettingsTab mx_SecurityRoomSettingsTab">
|
|
|
|
<div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
|
|
|
|
|
|
|
|
<span className='mx_SettingsTab_subheading'>{_t("Encryption")}</span>
|
|
|
|
<div className='mx_SettingsTab_section mx_SecurityRoomSettingsTab_encryptionSection'>
|
2019-01-30 00:37:21 +03:00
|
|
|
<div>
|
|
|
|
<div className='mx_SettingsTab_subsectionText'>
|
|
|
|
<span>{_t("Once enabled, encryption cannot be disabled.")}</span>
|
|
|
|
</div>
|
|
|
|
<LabelledToggleSwitch value={isEncrypted} onChange={this._onEncryptionChange}
|
|
|
|
label={_t("Encrypted")} disabled={!canEnableEncryption} />
|
|
|
|
</div>
|
2019-01-30 00:30:53 +03:00
|
|
|
{encryptionSettings}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<span className='mx_SettingsTab_subheading'>{_t("Who can access this room?")}</span>
|
|
|
|
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
|
|
|
{this._renderRoomAccess()}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<span className='mx_SettingsTab_subheading'>{_t("Who can read history?")}</span>
|
|
|
|
<div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
|
|
|
|
{this._renderHistory()}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|