mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #241 from matrix-org/matthew/room-visibility

Browse source 
rework roomsettings for new visibility UI
This commit is contained in:
Matthew Hodgson 2016-03-22 12:30:21 +00:00
commit e141a44103
1 changed files with 131 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
src/components/views/rooms/RoomSettings.js
View file

@ -55,9 +55,20 @@ module.exports = React.createClass({
power_levels_changed: false,
tags_changed: false,
tags: tags,
areNotifsMuted: areNotifsMuted
areNotifsMuted: areNotifsMuted,
// isRoomPublished: // set in componentWillMount
};
},
componentWillMount: function() {
MatrixClientPeg.get().getRoomDirectoryVisibility(
this.props.room.roomId
).done((result) => {
this.setState({ isRoomPublished: result.visibility === "public" });
}, (err) => {
console.error("Failed to get room visibility: " + err);
});
},
setName: function(name) {
this.setState({
@ -112,6 +123,13 @@ module.exports = React.createClass({
));
}
if (this.state.isRoomPublished !== originalState.isRoomPublished) {
promises.push(MatrixClientPeg.get().setRoomDirectoryVisibility(
roomId,
this.state.isRoomPublished ? "public" : "private"
));
}
if (this.state.join_rule !== originalState.join_rule) {
promises.push(MatrixClientPeg.get().sendStateEvent(
roomId, "m.room.join_rules",
@ -252,6 +270,43 @@ module.exports = React.createClass({
});
},
_onRoomAccessRadioToggle: function(ev) {
// join_rule
// INVITE | PUBLIC
// ----------------------+----------------
// guest CAN_JOIN | inv_only | pub_with_guest
// access ----------------------+----------------
// FORBIDDEN | inv_only | pub_no_guest
// ----------------------+----------------
switch (ev.target.value) {
case "invite_only":
this.setState({
join_rule: "invite",
// 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.
guest_access: "can_join",
});
break;
case "public_no_guests":
this.setState({
join_rule: "public",
guest_access: "forbidden",
});
break;
case "public_with_guests":
this.setState({
join_rule: "public",
guest_access: "can_join",
});
break;
}
},
_onToggle: function(keyName, checkedValue, uncheckedValue, ev) {
console.log("Checkbox toggle: %s %s", keyName, ev.target.checked);
var state = {};
@ -280,6 +335,13 @@ module.exports = React.createClass({
});
},
mayChangeRoomAccess: function() {
var cli = MatrixClientPeg.get();
var roomState = this.props.room.currentState;
return (roomState.mayClientSendStateEvent("m.room.join_rules", cli) &&
roomState.mayClientSendStateEvent("m.room.guest_access", cli))
},
render: function() {
// TODO: go through greying out things you don't have permission to change
// (or turning them into informative stuff)
@ -427,7 +489,31 @@ module.exports = React.createClass({
// http://matrix.org/docs/spec/r0.0.0/client_server.html#id31
var historyVisibility = this.state.history_visibility || "shared";
// FIXME: disable guests_read if the user hasn't turned on shared history
var addressWarning;
var aliasEvents = this.props.room.currentState.getStateEvents('m.room.aliases') || [];
var aliasCount = 0;
aliasEvents.forEach((event) => {
aliasCount += event.getContent().aliases.length;
});
if (this.state.join_rule === "public" && aliasCount == 0) {
addressWarning =
<div className="mx_RoomSettings_warning">
To link to a room it must have <a href="#addresses">an address</a>.
</div>
}
var inviteGuestWarning;
if (this.state.join_rule !== "public" && this.state.guest_access === "forbidden") {
inviteGuestWarning =
<div className="mx_RoomSettings_warning">
Guests cannot join this room even if explicitly invited. <a href="#" onClick={ (e) => {
this.setState({ join_rule: "invite", guest_access: "can_join" });
e.preventDefault();
}}>Click here to fix</a>.
</div>
}
return (
<div className="mx_RoomSettings">
@ -440,43 +526,64 @@ module.exports = React.createClass({
defaultChecked={this.state.areNotifsMuted}/>
Mute notifications for this room
</label>
<label>
<input type="checkbox" disabled={ !roomState.mayClientSendStateEvent("m.room.join_rules", cli) }
onChange={this._onToggle.bind(this, "join_rule", "invite", "public")}
defaultChecked={this.state.join_rule !== "public"}/>
Make this room private
</label>
<label>
<input type="checkbox" disabled={ !roomState.mayClientSendStateEvent("m.room.guest_access", cli) }
onChange={this._onToggle.bind(this, "guest_access", "can_join", "forbidden")}
defaultChecked={this.state.guest_access === "can_join"}/>
Let guests join this room
</label>
<div className="mx_RoomSettings_settings">
<h3>Who can access this room?</h3>
{ inviteGuestWarning }
<label>
<input type="radio" name="roomVis" value="invite_only"
disabled={ !this.mayChangeRoomAccess() }
onChange={this._onRoomAccessRadioToggle}
checked={this.state.join_rule !== "public"}/>
Only people who have been invited
</label>
<label>
<input type="radio" name="roomVis" value="public_no_guests"
disabled={ !this.mayChangeRoomAccess() }
onChange={this._onRoomAccessRadioToggle}
checked={this.state.join_rule === "public" && this.state.guest_access !== "can_join"}/>
Anyone who knows the room's link, apart from guests
</label>
<label>
<input type="radio" name="roomVis" value="public_with_guests"
disabled={ !this.mayChangeRoomAccess() }
onChange={this._onRoomAccessRadioToggle}
checked={this.state.join_rule === "public" && this.state.guest_access === "can_join"}/>
Anyone who knows the room's link, including guests
</label>
{ addressWarning }
<br/>
<label>
<input type="checkbox" disabled={ !roomState.mayClientSendStateEvent("m.room.aliases", cli) }
onChange={ this._onToggle.bind(this, "isRoomPublished", true, false)}
checked={this.state.isRoomPublished}/>
List this room in { MatrixClientPeg.get().getDomain() }'s directory?
</label>
</div>
<div className="mx_RoomSettings_settings">
<h3>Who can read history?</h3>
<label htmlFor="hvis_wr">
<input type="radio" id="hvis_wr" name="historyVis" value="world_readable"
<label>
<input type="radio" name="historyVis" value="world_readable"
disabled={ !roomState.mayClientSendStateEvent("m.room.history_visibility", cli) }
checked={historyVisibility === "world_readable"}
onChange={this._onHistoryRadioToggle} />
Anyone
</label>
<label htmlFor="hvis_sh">
<input type="radio" id="hvis_sh" name="historyVis" value="shared"
<label>
<input type="radio" name="historyVis" value="shared"
disabled={ !roomState.mayClientSendStateEvent("m.room.history_visibility", cli) }
checked={historyVisibility === "shared"}
onChange={this._onHistoryRadioToggle} />
Members only (since the point in time of selecting this option)
</label>
<label htmlFor="hvis_inv">
<input type="radio" id="hvis_inv" name="historyVis" value="invited"
<label>
<input type="radio" name="historyVis" value="invited"
disabled={ !roomState.mayClientSendStateEvent("m.room.history_visibility", cli) }
checked={historyVisibility === "invited"}
onChange={this._onHistoryRadioToggle} />
Members only (since they were invited)
</label>
<label htmlFor="hvis_joi">
<input type="radio" id="hvis_joi" name="historyVis" value="joined"
<label >
<input type="radio" name="historyVis" value="joined"
disabled={ !roomState.mayClientSendStateEvent("m.room.history_visibility", cli) }
checked={historyVisibility === "joined"}
onChange={this._onHistoryRadioToggle} />
@ -495,6 +602,8 @@ module.exports = React.createClass({
<ColorSettings ref="color_settings" room={this.props.room} />
</div>
<a id="addresses"/>
<AliasSettings ref="alias_settings"
roomId={this.props.room.roomId}
canSetCanonicalAlias={ roomState.mayClientSendStateEvent("m.room.canonical_alias", cli) }