Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 14:05:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve e2e and scalar settings UI

Browse Source
This commit is contained in:
Matthew Hodgson 2016-09-14 02:07:37 +01:00
parent 0473b14564
commit 2752d6b444
1 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/views/rooms/RoomSettings.js
View File

@ -430,6 +430,27 @@ module.exports = React.createClass({
});
},
onEnableEncryptionClick() {
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
Modal.createDialog(QuestionDialog, {
title: "Warning!",
description: (
<div>
<p>End-to-end encryption is in beta and may not be reliable.</p>
<p>You should <b>not</b> yet trust it to secure data.</p>
<p>Once encryption is enabled for a room it <b>cannot</b> be turned off again (for now).</p>
<p>Encrypted messages will not be visible on clients that do not yet implement encryption<br/>
(e.g. Vector/iOS and Vector/Android).</p>
</div>
),
onFinished: confirm=>{
if (!confirm) {
this.refs.encrypt.checked = false;
}
},
});
},
_renderEncryptionSection: function() {
if (!UserSettingsStore.isFeatureEnabled("e2e_encryption")) {
return null;
@ -439,27 +460,27 @@ module.exports = React.createClass({
var roomState = this.props.room.currentState;
var isEncrypted = cli.isRoomEncrypted(this.props.room.roomId);
var text = "Encryption is " + (isEncrypted ? "" : "not ") +
"enabled in this room.";
var button;
if (!isEncrypted &&
roomState.mayClientSendStateEvent("m.room.encryption", cli)) {
button = (
return (
<label>
<input type="checkbox" ref="encrypt" />
<input type="checkbox" ref="encrypt" onClick={ this.onEnableEncryptionClick }/>
<img className="mx_RoomSettings_e2eIcon" src="img/e2e-unencrypted.svg" width="12" height="12" />
Enable encryption (warning: cannot be disabled again!)
</label>
);
}
return (
<div className="mx_RoomSettings_toggles">
<h3>Encryption</h3>
<label>{text}</label>
{button}
</div>
);
else {
return (
<label>
{ isEncrypted
? <img className="mx_RoomSettings_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" />
: <img className="mx_RoomSettings_e2eIcon" src="img/e2e-unencrypted.svg" width="12" height="12" />
}
Encryption is { isEncrypted ? "" : "not " } enabled in this room.
</label>
);
}
},
render: function() {
@ -628,33 +649,30 @@ module.exports = React.createClass({
</div>
}
var integrations_section;
var integrationsButton;
if (UserSettingsStore.isFeatureEnabled("integration_management")) {
let integrations_body;
if (this.scalarClient.hasCredentials()) {
integrations_body = (
<div className="mx_RoomSettings_settings">
<a href="#" onClick={ this.onManageIntegrations }>Manage integrations</a>
integrationsButton = (
<div className="mx_RoomSettings_integrationsButton" onClick={ this.onManageIntegrations }>
Manage Integrations
</div>
);
} else if (this.state.scalar_error) {
integrations_body = <div className="error">
Unable to contact integrations server
</div>;
console.error("Unable to contact integrations server");
} else {
integrations_body = <Loader />;
integrationsButton = (
<div className="mx_RoomSettings_integrationsButton" onClick={ this.onManageIntegrations }>
<Loader />
</div>
);
}
integrations_section = <div>
<h3>Integrations</h3>
{integrations_body}
</div>;
}
return (
<div className="mx_RoomSettings">
{ leaveButton }
{ integrationsButton }
{ tagsSection }
@ -685,6 +703,7 @@ module.exports = React.createClass({
</label>
{ addressWarning }
<br/>
{ this._renderEncryptionSection() }
<label>
<input type="checkbox" disabled={ !roomState.mayClientSendStateEvent("m.room.aliases", cli) }
onChange={ this._onToggle.bind(this, "isRoomPublished", true, false)}
@ -731,8 +750,6 @@ module.exports = React.createClass({
<ColorSettings ref="color_settings" room={this.props.room} />
</div>
{ integrations_section }
<a id="addresses"/>
<AliasSettings ref="alias_settings"
@ -791,8 +808,6 @@ module.exports = React.createClass({
{ bannedUsersSection }
{ this._renderEncryptionSection() }
<h3>Advanced</h3>
<div className="mx_RoomSettings_settings">
This room's internal ID is <code>{ this.props.room.roomId }</code>