diff --git a/src/component-index.js b/src/component-index.js
index 488b85670b..751332de1b 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -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');
diff --git a/src/components/views/dialogs/LogoutPrompt.js b/src/components/views/dialogs/LogoutPrompt.js
index 7c4ba18e82..c4bd7a0474 100644
--- a/src/components/views/dialogs/LogoutPrompt.js
+++ b/src/components/views/dialogs/LogoutPrompt.js
@@ -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) {
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 6a266b2f13..44f2050c51 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -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,
});
},
diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js
index 22bbdd2ce7..927cc90491 100644
--- a/src/components/views/rooms/MemberDeviceInfo.js
+++ b/src/components/views/rooms/MemberDeviceInfo.js
@@ -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,
};
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 2f954b908b..ff5c7f5259 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -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"/>
);
}