PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Clean up typing to Security Room Settings

Browse source
This commit is contained in:
Michael Telatynski 2021-06-18 11:43:36 +01:00
parent 18cafeb221
commit e508ff003b
1 changed files with 72 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
View file

@ -15,8 +15,10 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import { JoinRule, GuestAccess, HistoryVisibility } from "matrix-js-sdk/src/@types/partials"; import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials";
import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { IRoomVersionsCapability } from 'matrix-js-sdk/src/client';
import { EventType } from 'matrix-js-sdk/src/@types/event';
import { _t } from "../../../../../languageHandler"; import { _t } from "../../../../../languageHandler";
import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
@ -24,7 +26,7 @@ import * as sdk from "../../../../..";
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch"; import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
import Modal from "../../../../../Modal"; import Modal from "../../../../../Modal";
import QuestionDialog from "../../../dialogs/QuestionDialog"; import QuestionDialog from "../../../dialogs/QuestionDialog";
import StyledRadioGroup from '../../../elements/StyledRadioGroup'; import StyledRadioGroup, { IDefinition } from '../../../elements/StyledRadioGroup';
import { SettingLevel } from "../../../../../settings/SettingLevel"; import { SettingLevel } from "../../../../../settings/SettingLevel";
import SettingsStore from "../../../../../settings/SettingsStore"; import SettingsStore from "../../../../../settings/SettingsStore";
import { UIFeature } from "../../../../../settings/UIFeature"; import { UIFeature } from "../../../../../settings/UIFeature";
@ -42,6 +44,12 @@ interface IState {
encrypted: boolean; encrypted: boolean;
} }
enum RoomVisibility {
InviteOnly = "invite_only",
PublicNoGuests = "public_no_guests",
PublicWithGuests = "public_with_guests",
}
@replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab") @replaceableComponent("views.settings.tabs.room.SecurityRoomSettingsTab")
export default class SecurityRoomSettingsTab extends React.Component<IProps, IState> { export default class SecurityRoomSettingsTab extends React.Component<IProps, IState> {
constructor(props) { constructor(props) {
@ -57,31 +65,33 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
} }
// TODO: [REACT-WARNING] Move this to constructor // TODO: [REACT-WARNING] Move this to constructor
async UNSAFE_componentWillMount() { // eslint-disable-line camelcase UNSAFE_componentWillMount() { // eslint-disable-line camelcase
MatrixClientPeg.get().on("RoomState.events", this.onStateEvent); 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 state = room.currentState;
const joinRule: JoinRule = this.pullContentPropertyFromEvent( const joinRule: JoinRule = this.pullContentPropertyFromEvent(
state.getStateEvents("m.room.join_rules", ""), state.getStateEvents(EventType.RoomJoinRules, ""),
'join_rule', 'join_rule',
JoinRule.Invite, JoinRule.Invite,
); );
const guestAccess: GuestAccess = this.pullContentPropertyFromEvent( const guestAccess: GuestAccess = this.pullContentPropertyFromEvent(
state.getStateEvents("m.room.guest_access", ""), state.getStateEvents(EventType.RoomGuestAccess, ""),
'guest_access', 'guest_access',
GuestAccess.Forbidden, GuestAccess.Forbidden,
); );
const history: HistoryVisibility = this.pullContentPropertyFromEvent( const history: HistoryVisibility = this.pullContentPropertyFromEvent(
state.getStateEvents("m.room.history_visibility", ""), state.getStateEvents(EventType.RoomHistoryVisibility, ""),
'history_visibility', 'history_visibility',
HistoryVisibility.Shared, HistoryVisibility.Shared,
); );
const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId); const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
this.setState({joinRule, guestAccess, history, encrypted}); this.setState({ joinRule, guestAccess, history, encrypted });
const hasAliases = await this.hasAliases();
this.setState({hasAliases}); this.hasAliases().then(hasAliases => this.setState({ hasAliases }));
} }
private pullContentPropertyFromEvent<T>(event: MatrixEvent, key: string, defaultValue: T): T { private pullContentPropertyFromEvent<T>(event: MatrixEvent, key: string, defaultValue: T): T {
@ -94,13 +104,13 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
} }
private onStateEvent = (e: MatrixEvent) => { private onStateEvent = (e: MatrixEvent) => {
const refreshWhenTypes = [ const refreshWhenTypes: EventType[] = [
'm.room.join_rules', EventType.RoomJoinRules,
'm.room.guest_access', EventType.RoomGuestAccess,
'm.room.history_visibility', EventType.RoomHistoryVisibility,
'm.room.encryption', EventType.RoomEncryption,
]; ];
if (refreshWhenTypes.includes(e.getType())) this.forceUpdate(); if (refreshWhenTypes.includes(e.getType() as EventType)) this.forceUpdate();
}; };
private onEncryptionChange = (e: React.ChangeEvent) => { private onEncryptionChange = (e: React.ChangeEvent) => {
@ -126,7 +136,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const beforeEncrypted = this.state.encrypted; const beforeEncrypted = this.state.encrypted;
this.setState({encrypted: true}); this.setState({encrypted: true});
MatrixClientPeg.get().sendStateEvent( MatrixClientPeg.get().sendStateEvent(
this.props.roomId, "m.room.encryption", this.props.roomId, EventType.RoomEncryption,
{ algorithm: "m.megolm.v1.aes-sha2" }, { algorithm: "m.megolm.v1.aes-sha2" },
).catch((e) => { ).catch((e) => {
console.error(e); console.error(e);
@ -140,25 +150,21 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const joinRule = JoinRule.Invite;
const guestAccess = GuestAccess.CanJoin; const guestAccess = GuestAccess.CanJoin;
const beforeJoinRule = this.state.joinRule;
const beforeGuestAccess = this.state.guestAccess; const beforeGuestAccess = this.state.guestAccess;
this.setState({joinRule, guestAccess}); this.setState({ guestAccess });
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
client.sendStateEvent(this.props.roomId, "m.room.join_rules", {join_rule: joinRule}, "").catch((e) => { client.sendStateEvent(this.props.roomId, EventType.RoomGuestAccess, {
console.error(e); guest_access: guestAccess,
this.setState({joinRule: beforeJoinRule}); }, "").catch((e) => {
});
client.sendStateEvent(this.props.roomId, "m.room.guest_access", {guest_access: guestAccess}, "").catch((e) => {
console.error(e); console.error(e);
this.setState({guestAccess: beforeGuestAccess}); this.setState({guestAccess: beforeGuestAccess});
}); });
}; };
private onRoomAccessRadioToggle = (roomAccess: string) => { private onRoomAccessRadioToggle = (roomAccess: RoomVisibility) => {
// join_rule // join_rule
// INVITE | PUBLIC // INVITE | PUBLIC
// ----------------------+---------------- // ----------------------+----------------
@ -176,14 +182,14 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
let guestAccess = GuestAccess.CanJoin; let guestAccess = GuestAccess.CanJoin;
switch (roomAccess) { switch (roomAccess) {
case "invite_only": case RoomVisibility.InviteOnly:
// no change - use defaults above // no change - use defaults above
break; break;
case "public_no_guests": case RoomVisibility.PublicNoGuests:
joinRule = JoinRule.Public; joinRule = JoinRule.Public;
guestAccess = GuestAccess.Forbidden; guestAccess = GuestAccess.Forbidden;
break; break;
case "public_with_guests": case RoomVisibility.PublicWithGuests:
joinRule = JoinRule.Public; joinRule = JoinRule.Public;
guestAccess = GuestAccess.CanJoin; guestAccess = GuestAccess.CanJoin;
break; break;
@ -194,11 +200,15 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
this.setState({joinRule, guestAccess}); this.setState({joinRule, guestAccess});
const client = MatrixClientPeg.get(); 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,
}, "").catch((e) => {
console.error(e); console.error(e);
this.setState({joinRule: beforeJoinRule}); this.setState({joinRule: beforeJoinRule});
}); });
client.sendStateEvent(this.props.roomId, "m.room.guest_access", {guest_access: guestAccess}, "").catch((e) => { client.sendStateEvent(this.props.roomId, EventType.RoomGuestAccess, {
guest_access: guestAccess,
}, "").catch((e) => {
console.error(e); console.error(e);
this.setState({guestAccess: beforeGuestAccess}); this.setState({guestAccess: beforeGuestAccess});
}); });
@ -207,7 +217,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
private onHistoryRadioToggle = (history: HistoryVisibility) => { private onHistoryRadioToggle = (history: HistoryVisibility) => {
const beforeHistory = this.state.history; const beforeHistory = this.state.history;
this.setState({history: history}); 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, history_visibility: history,
}, "").catch((e) => { }, "").catch((e) => {
console.error(e); console.error(e);
@ -227,7 +237,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
return Array.isArray(localAliases) && localAliases.length !== 0; return Array.isArray(localAliases) && localAliases.length !== 0;
} else { } else {
const room = cli.getRoom(this.props.roomId); 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); const hasAliases = !!aliasEvents.find((ev) => (ev.getContent().aliases || []).length > 0);
return hasAliases; return hasAliases;
} }
@ -239,11 +249,11 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const joinRule = this.state.joinRule; const joinRule = this.state.joinRule;
const guestAccess = this.state.guestAccess; const guestAccess = this.state.guestAccess;
const canChangeAccess = room.currentState.mayClientSendStateEvent("m.room.join_rules", client) const canChangeAccess = room.currentState.mayClientSendStateEvent(EventType.RoomJoinRules, client)
&& room.currentState.mayClientSendStateEvent("m.room.guest_access", client); && room.currentState.mayClientSendStateEvent(EventType.RoomGuestAccess, client);
let guestWarning = null; let guestWarning = null;
if (joinRule !== 'public' && guestAccess === 'forbidden') { if (joinRule !== JoinRule.Public && guestAccess === GuestAccess.Forbidden) {
guestWarning = ( guestWarning = (
<div className='mx_SecurityRoomSettingsTab_warning'> <div className='mx_SecurityRoomSettingsTab_warning'>
<img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} /> <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
@ -256,7 +266,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
} }
let aliasWarning = null; let aliasWarning = null;
if (joinRule === 'public' && !this.state.hasAliases) { if (joinRule === JoinRule.Public && !this.state.hasAliases) {
aliasWarning = ( aliasWarning = (
<div className='mx_SecurityRoomSettingsTab_warning'> <div className='mx_SecurityRoomSettingsTab_warning'>
<img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} /> <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
@ -267,34 +277,33 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
); );
} }
const radioDefinitions: IDefinition<RoomVisibility>[] = [
{
value: RoomVisibility.InviteOnly,
label: _t('Only people who have been invited'),
checked: joinRule !== JoinRule.Public && joinRule !== JoinRule.Restricted,
},
{
value: RoomVisibility.PublicNoGuests,
label: _t('Anyone who knows the room\'s link, apart from guests'),
checked: joinRule === JoinRule.Public && guestAccess !== GuestAccess.CanJoin,
},
{
value: RoomVisibility.PublicWithGuests,
label: _t("Anyone who knows the room's link, including guests"),
checked: joinRule === JoinRule.Public && guestAccess === GuestAccess.CanJoin,
},
];
return ( return (
<div> <div>
{guestWarning} { guestWarning }
{aliasWarning} { aliasWarning }
<StyledRadioGroup <StyledRadioGroup
name="roomVis" name="roomVis"
value={joinRule}
onChange={this.onRoomAccessRadioToggle} onChange={this.onRoomAccessRadioToggle}
definitions={[ definitions={radioDefinitions}
{ disabled={!canChangeAccess}
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",
},
]}
/> />
</div> </div>
); );
@ -304,7 +313,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
const history = this.state.history; const history = this.state.history;
const state = client.getRoom(this.props.roomId).currentState; const state = client.getRoom(this.props.roomId).currentState;
const canChangeHistory = state.mayClientSendStateEvent('m.room.history_visibility', client); const canChangeHistory = state.mayClientSendStateEvent(EventType.RoomHistoryVisibility, client);
return ( return (
<div> <div>
@ -349,7 +358,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
const room = client.getRoom(this.props.roomId); const room = client.getRoom(this.props.roomId);
const isEncrypted = this.state.encrypted; 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; const canEnableEncryption = !isEncrypted && hasEncryptionPermission;
let encryptionSettings = null; let encryptionSettings = null;