dedicated dialog box for E2E messages
This commit is contained in:
parent
5a548c3d12
commit
9b7ab46a72
5 changed files with 35 additions and 70 deletions
|
@ -49,6 +49,7 @@ module.exports.components['views.create_room.Presets'] = require('./components/v
|
|||
module.exports.components['views.create_room.RoomAlias'] = require('./components/views/create_room/RoomAlias');
|
||||
module.exports.components['views.dialogs.ChatInviteDialog'] = require('./components/views/dialogs/ChatInviteDialog');
|
||||
module.exports.components['views.dialogs.DeactivateAccountDialog'] = require('./components/views/dialogs/DeactivateAccountDialog');
|
||||
module.exports.components['views.dialogs.EncryptedEventDialog'] = require('./components/views/dialogs/EncryptedEventDialog');
|
||||
module.exports.components['views.dialogs.ErrorDialog'] = require('./components/views/dialogs/ErrorDialog');
|
||||
module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/views/dialogs/LogoutPrompt');
|
||||
module.exports.components['views.dialogs.MultiInviteDialog'] = require('./components/views/dialogs/MultiInviteDialog');
|
||||
|
|
|
@ -18,6 +18,11 @@ var dis = require("../../../dispatcher");
|
|||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'LogoutPrompt',
|
||||
|
||||
propTypes: {
|
||||
onFinished: React.PropTypes.func,
|
||||
},
|
||||
|
||||
logOut: function() {
|
||||
dis.dispatch({action: 'logout'});
|
||||
if (this.props.onFinished) {
|
||||
|
|
|
@ -363,62 +363,11 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
onCryptoClicked: function(e) {
|
||||
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
||||
var EncryptedEventDialog = sdk.getComponent("dialogs.EncryptedEventDialog");
|
||||
var event = this.props.mxEvent;
|
||||
|
||||
// XXX: gutwrench - is there any reason not to expose this on MatrixClient itself?
|
||||
var device = MatrixClientPeg.get()._crypto.getDeviceByIdentityKey(
|
||||
event.getSender(),
|
||||
event.getWireContent().algorithm,
|
||||
event.getWireContent().sender_key
|
||||
);
|
||||
|
||||
Modal.createDialog(ErrorDialog, {
|
||||
title: "End-to-end encryption information",
|
||||
description: (
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sent by</td>
|
||||
<td>{ event.getSender() }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sender device name</td>
|
||||
<td>{ device.getDisplayName() }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sender device ID</td>
|
||||
<td>{ device.deviceId }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sender device verification:</td>
|
||||
<td>{ MatrixClientPeg.get().isEventSenderVerified(event) ? "verified" : <b>NOT verified</b> }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sender device ed25519 fingerprint</td>
|
||||
<td>{ device.getFingerprint() }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sender device curve25519 identity key</td>
|
||||
<td>{ event.getWireContent().sender_key }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Algorithm</td>
|
||||
<td>{ event.getWireContent().algorithm }</td>
|
||||
</tr>
|
||||
{
|
||||
event.getContent().msgtype === 'm.bad.encrypted' ? (
|
||||
<tr>
|
||||
<td>Decryption error</td>
|
||||
<td>{ event.getContent().body }</td>
|
||||
</tr>
|
||||
) : ''
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
Modal.createDialog(EncryptedEventDialog, {
|
||||
event: event,
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
@ -54,33 +54,33 @@ export default class MemberDeviceInfo extends React.Component {
|
|||
var indicator = null, blockButton = null, verifyButton = null;
|
||||
if (this.props.device.isBlocked()) {
|
||||
blockButton = (
|
||||
<div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblock"
|
||||
<button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblock"
|
||||
onClick={this.onUnblockClick}>
|
||||
Unblock
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
blockButton = (
|
||||
<div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_block"
|
||||
<button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_block"
|
||||
onClick={this.onBlockClick}>
|
||||
Block
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.device.isVerified()) {
|
||||
verifyButton = (
|
||||
<div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
|
||||
<button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
|
||||
onClick={this.onUnverifyClick}>
|
||||
Unverify
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
verifyButton = (
|
||||
<div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
|
||||
<button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
|
||||
onClick={this.onVerifyClick}>
|
||||
Verify
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -101,16 +101,25 @@ export default class MemberDeviceInfo extends React.Component {
|
|||
|
||||
var deviceName = this.props.device.getDisplayName() || this.props.device.deviceId;
|
||||
|
||||
var info;
|
||||
if (!this.props.hideInfo) {
|
||||
info = (
|
||||
<div>
|
||||
<div className="mx_MemberDeviceInfo_deviceId">{deviceName}</div>
|
||||
{indicator}
|
||||
<div className="mx_MemberDeviceInfo_deviceKey">
|
||||
{this.props.device.getFingerprint()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// add the deviceId as a titletext to help with debugging
|
||||
return (
|
||||
<div className="mx_MemberDeviceInfo" title={this.props.device.deviceId}>
|
||||
<div className="mx_MemberDeviceInfo_deviceId">{deviceName}</div>
|
||||
{indicator}
|
||||
<div className="mx_MemberDeviceInfo_deviceKey">
|
||||
{this.props.device.getFingerprint()}
|
||||
</div>
|
||||
{verifyButton}
|
||||
{blockButton}
|
||||
{ info }
|
||||
{ verifyButton }
|
||||
{ blockButton }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -120,4 +129,5 @@ MemberDeviceInfo.displayName = 'MemberDeviceInfo';
|
|||
MemberDeviceInfo.propTypes = {
|
||||
userId: React.PropTypes.string.isRequired,
|
||||
device: React.PropTypes.object.isRequired,
|
||||
hideInfo: React.PropTypes.bool,
|
||||
};
|
||||
|
|
|
@ -204,7 +204,7 @@ export default class MessageComposer extends React.Component {
|
|||
if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
|
||||
// FIXME: show a /!\ if there are untrusted devices in the room...
|
||||
controls.push(
|
||||
<img className="mx_MessageComposer_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" alt="Encrypted room"/>
|
||||
<img key="e2eIcon" className="mx_MessageComposer_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" alt="Encrypted room"/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue