From 2f7b4f74fd1f8f61e0de5031a19d8cceb9d4c2c0 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 22 Sep 2016 19:23:34 +0100 Subject: [PATCH 1/2] Move the device verification buttons to their own class Instead of pulling in the whole of MemberDeviceInfo into EncryptedEventDialog for utterly no reason and breaking everything --- src/component-index.js | 1 + .../views/dialogs/EncryptedEventDialog.js | 4 +- .../views/elements/DeviceVerifyButtons.js | 131 +++++++++++++++ .../views/rooms/MemberDeviceInfo.js | 155 +++--------------- 4 files changed, 158 insertions(+), 133 deletions(-) create mode 100644 src/components/views/elements/DeviceVerifyButtons.js diff --git a/src/component-index.js b/src/component-index.js index 08477c676e..bb2d887e40 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -58,6 +58,7 @@ module.exports.components['views.dialogs.SetDisplayNameDialog'] = require('./com module.exports.components['views.dialogs.TextInputDialog'] = require('./components/views/dialogs/TextInputDialog'); module.exports.components['views.elements.AddressSelector'] = require('./components/views/elements/AddressSelector'); module.exports.components['views.elements.AddressTile'] = require('./components/views/elements/AddressTile'); +module.exports.components['views.elements.DeviceVerifyButtons'] = require('./components/views/elements/DeviceVerifyButtons'); module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText'); module.exports.components['views.elements.EditableTextContainer'] = require('./components/views/elements/EditableTextContainer'); module.exports.components['views.elements.EmojiText'] = require('./components/views/elements/EmojiText'); diff --git a/src/components/views/dialogs/EncryptedEventDialog.js b/src/components/views/dialogs/EncryptedEventDialog.js index be8656064c..c86b1d20f8 100644 --- a/src/components/views/dialogs/EncryptedEventDialog.js +++ b/src/components/views/dialogs/EncryptedEventDialog.js @@ -152,12 +152,12 @@ module.exports = React.createClass({ }, render: function() { - var MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo'); + var DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons'); var buttons = null; if (this.state.device) { buttons = ( - ); diff --git a/src/components/views/elements/DeviceVerifyButtons.js b/src/components/views/elements/DeviceVerifyButtons.js new file mode 100644 index 0000000000..90af1635c9 --- /dev/null +++ b/src/components/views/elements/DeviceVerifyButtons.js @@ -0,0 +1,131 @@ +/* +Copyright 2016 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import MatrixClientPeg from '../../../MatrixClientPeg'; +import sdk from '../../../index'; +import Modal from '../../../Modal'; + +export default React.createClass({ + displayName: 'DeviceVerifyButtons', + + propTypes: { + userId: React.PropTypes.string.isRequired, + device: React.PropTypes.object.isRequired, + }, + + onVerifyClick: function() { + 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 doesnt, 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: function() { + MatrixClientPeg.get().setDeviceVerified( + this.props.userId, this.props.device.deviceId, false + ); + }, + + onBlockClick: function() { + MatrixClientPeg.get().setDeviceBlocked( + this.props.userId, this.props.device.deviceId, true + ); + }, + + onUnblockClick: function() { + MatrixClientPeg.get().setDeviceBlocked( + this.props.userId, this.props.device.deviceId, false + ); + }, + + render: function() { + var blockButton = null, verifyButton = null; + + if (this.props.device.isBlocked()) { + blockButton = ( + + ); + } else { + blockButton = ( + + ); + } + + if (this.props.device.isVerified()) { + verifyButton = ( + + ); + } else { + verifyButton = ( + + ); + } + + // mx_MemberDeviceInfo because the vector's CSS on EncryptedEventDialog is awful + return ( +
+ { verifyButton } + { blockButton } +
+ ); + }, +}); diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js index fe308bd1c5..c161aa874e 100644 --- a/src/components/views/rooms/MemberDeviceInfo.js +++ b/src/components/views/rooms/MemberDeviceInfo.js @@ -15,152 +15,46 @@ 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) { - super(props); - this.onVerifyClick = this.onVerifyClick.bind(this); - this.onUnverifyClick = this.onUnverifyClick.bind(this); - this.onBlockClick = this.onBlockClick.bind(this); - this.onUnblockClick = this.onUnblockClick.bind(this); - } - - onVerifyClick() { - 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() { - MatrixClientPeg.get().setDeviceVerified( - this.props.userId, this.props.device.deviceId, false - ); - } - - onBlockClick() { - MatrixClientPeg.get().setDeviceBlocked( - this.props.userId, this.props.device.deviceId, true - ); - } - - onUnblockClick() { - MatrixClientPeg.get().setDeviceBlocked( - this.props.userId, this.props.device.deviceId, false - ); - } - render() { - if (!this.props.device) { - return
; - } + var indicator = null; + var DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons'); - var indicator = null, blockButton = null, verifyButton = null; if (this.props.device.isBlocked()) { - blockButton = ( - - ); - } else { - blockButton = ( - - ); - } - - if (this.props.device.isVerified()) { - verifyButton = ( - - ); - } else { - verifyButton = ( - - ); - } - - if (!this.props.hideInfo) { - if (this.props.device.isBlocked()) { - indicator = ( + indicator = (
- Blocked + Blocked
- ); - } else if (this.props.device.isVerified()) { - indicator = ( + ); + } else if (this.props.device.isVerified()) { + indicator = (
- Verified + Verified
- ); - } else { - indicator = ( + ); + } else { + indicator = (
- Unverified + Unverified
- ); - } - - var deviceName = this.props.device.ambiguous ? - (this.props.device.getDisplayName() ? this.props.device.getDisplayName() : "") + " (" + this.props.device.deviceId + ")" : - this.props.device.getDisplayName(); - - var info = ( -
-
{deviceName}{indicator}
-
); } + var deviceName = this.props.device.ambiguous ? + (this.props.device.getDisplayName() ? this.props.device.getDisplayName() : "") + " (" + this.props.device.deviceId + ")" : + this.props.device.getDisplayName(); + return ( -
- { info } - { verifyButton } - { blockButton } +
+
+
+ {deviceName} + {indicator} +
+
+
); } @@ -170,5 +64,4 @@ MemberDeviceInfo.displayName = 'MemberDeviceInfo'; MemberDeviceInfo.propTypes = { userId: React.PropTypes.string.isRequired, device: React.PropTypes.object.isRequired, - hideInfo: React.PropTypes.bool, }; From dd2da20031009f36c0858c497df1dc2433320b72 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 22 Sep 2016 19:28:50 +0100 Subject: [PATCH 2/2] Add the deviceId back to memberdeviceinfo It was removed by @ara4n in 5fa5489, but it's still useful! --- src/components/views/rooms/MemberDeviceInfo.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js index c161aa874e..51bf7d3637 100644 --- a/src/components/views/rooms/MemberDeviceInfo.js +++ b/src/components/views/rooms/MemberDeviceInfo.js @@ -46,8 +46,10 @@ export default class MemberDeviceInfo extends React.Component { (this.props.device.getDisplayName() ? this.props.device.getDisplayName() : "") + " (" + this.props.device.deviceId + ")" : this.props.device.getDisplayName(); + // add the deviceId as a titletext to help with debugging return ( -
+
{deviceName}