diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js index fadb97705b..22ac7c7c72 100644 --- a/src/components/structures/UserSettings.js +++ b/src/components/structures/UserSettings.js @@ -72,6 +72,7 @@ module.exports = React.createClass({ getInitialState: function() { return { avatarUrl: null, + myDevice: null, threePids: [], phase: "UserSettings.LOADING", // LOADING, DISPLAY email_add_pending: false, @@ -342,14 +343,17 @@ module.exports = React.createClass({ var client = MatrixClientPeg.get(); var deviceId = client.deviceId; - var olmKey = client.getDeviceEd25519Key() || ""; + var identityKey = client.getDeviceEd25519Key() || ""; + + var myDevice = client.getStoredDevicesForUser(MatrixClientPeg.get().credentials.userId)[0]; return (

Cryptography

-
+
    -
  • Device ID: {deviceId}
  • -
  • Device key: {olmKey}
  • +
  • { myDevice.getDisplayName() }
  • +
  • {deviceId}
  • +
  • {identityKey}
@@ -364,7 +368,7 @@ module.exports = React.createClass({ return (

Devices

- +
); }, diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js index 927cc90491..27bafa86cd 100644 --- a/src/components/views/rooms/MemberDeviceInfo.js +++ b/src/components/views/rooms/MemberDeviceInfo.js @@ -16,6 +16,8 @@ limitations under the License. import React from 'react'; import MatrixClientPeg from '../../../MatrixClientPeg'; +import sdk from '../../../index'; +import Modal from '../../../Modal'; export default class MemberDeviceInfo extends React.Component { constructor(props) { @@ -27,9 +29,43 @@ export default class MemberDeviceInfo extends React.Component { } onVerifyClick() { - MatrixClientPeg.get().setDeviceVerified( - this.props.userId, this.props.device.deviceId, true - ); + var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); + Modal.createDialog(QuestionDialog, { + title: "Verify device", + description: ( +
+

+ To verify that this device can be trusted, please contact its + owner using some other means (e.g. in person or a phone call) + and ask them whether the key they see in their User Settings + for this device matches the key below: +

+
+
    +
  • { this.props.device.getDisplayName() }
  • +
  • { this.props.device.deviceId}
  • +
  • { this.props.device.getFingerprint() }
  • +
+
+

+ If it matches, press the verify button below. + If it doesn't, then someone else is intercepting this device + and you probably want to press the block button instead. +

+

+ In future this verification process will be more sophisticated. +

+
+ ), + button: "I verify that the keys match", + onFinished: confirm=>{ + if (confirm) { + MatrixClientPeg.get().setDeviceVerified( + this.props.userId, this.props.device.deviceId, true + ); + } + }, + }); } onUnverifyClick() { @@ -104,12 +140,9 @@ export default class MemberDeviceInfo extends React.Component { var info; if (!this.props.hideInfo) { info = ( -
+
{deviceName}
{indicator} -
- {this.props.device.getFingerprint()} -
); } diff --git a/src/components/views/settings/DevicesPanel.js b/src/components/views/settings/DevicesPanel.js index 2914b0789d..f48d4bec85 100644 --- a/src/components/views/settings/DevicesPanel.js +++ b/src/components/views/settings/DevicesPanel.js @@ -137,3 +137,8 @@ export default class DevicesPanel extends React.Component { ); } } + +DevicesPanel.displayName = 'MemberDeviceInfo'; +DevicesPanel.propTypes = { + className: React.PropTypes.string, +}; diff --git a/src/components/views/settings/DevicesPanelEntry.js b/src/components/views/settings/DevicesPanelEntry.js index 8e8351de43..16345edcce 100644 --- a/src/components/views/settings/DevicesPanelEntry.js +++ b/src/components/views/settings/DevicesPanelEntry.js @@ -107,8 +107,13 @@ export default class DevicesPanelEntry extends React.Component { ); } + var myDeviceClass = ''; + if (device.device_id === MatrixClientPeg.get().getDeviceId()) { + myDeviceClass = " mx_DevicesPanel_myDevice"; + } + return ( -
+
{device.device_id}