From a1dd4274201db740a945ae728fd12cb6dfe390ad Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 23 Jun 2016 17:27:23 +0100 Subject: [PATCH] Implement device blocking This is the react-sdk part of https://github.com/matrix-org/matrix-js-sdk/pull/146. It adds 'Block'/'Unblock' buttons to the device list, and updates the deviceVerified listeners to listen for deviceVerificationChanged instead. Also adds an extra
to the deviceinfo section to help me with the CSS. --- src/components/views/rooms/EventTile.js | 8 ++- .../views/rooms/MemberDeviceInfo.js | 57 ++++++++++++++++--- src/components/views/rooms/MemberInfo.js | 10 ++-- 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index ff02139d87..70dfe8ac33 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -139,7 +139,8 @@ module.exports = React.createClass({ componentDidMount: function() { this._suppressReadReceiptAnimation = false; - MatrixClientPeg.get().on("deviceVerified", this.onDeviceVerified); + MatrixClientPeg.get().on("deviceVerificationChanged", + this.onDeviceVerificationChanged); }, componentWillReceiveProps: function (nextProps) { @@ -163,11 +164,12 @@ module.exports = React.createClass({ componentWillUnmount: function() { var client = MatrixClientPeg.get(); if (client) { - client.removeListener("deviceVerified", this.onDeviceVerified); + client.removeListener("deviceVerificationChanged", + this.onDeviceVerificationChanged); } }, - onDeviceVerified: function(userId, device) { + onDeviceVerificationChanged: function(userId, device) { if (userId == this.props.mxEvent.getSender()) { this._verifyEvent(this.props.mxEvent); } diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js index ebc2ab1c32..b7ddf9b2ce 100644 --- a/src/components/views/rooms/MemberDeviceInfo.js +++ b/src/components/views/rooms/MemberDeviceInfo.js @@ -36,32 +36,73 @@ module.exports = React.createClass({ ); }, + onBlockClick: function() { + MatrixClientPeg.get().setDeviceBlocked( + this.props.userId, this.props.device.id, true + ); + }, + + onUnblockClick: function() { + MatrixClientPeg.get().setDeviceBlocked( + this.props.userId, this.props.device.id, false + ); + }, + render: function() { - var indicator = null, button = null; - if (this.props.device.verified) { - indicator = ( -
+ var indicator = null, blockButton = null, verifyButton = null; + if (this.props.device.blocked) { + blockButton = ( +
+ Unblock +
); - button = ( + } else { + blockButton = ( +
+ Block +
+ ); + } + + if (this.props.device.verified) { + verifyButton = (
Unverify
); } else { - button = ( + verifyButton = (
Verify
); } + + if (this.props.device.blocked) { + indicator = ( +
+ ); + } else if (this.props.device.verified) { + indicator = ( +
+ ); + + } else { + indicator = ( +
?
+ ); + } + return (
{this.props.device.id}
-
{this.props.device.key}
{indicator} - {button} + {verifyButton} + {blockButton}
); }, diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index 97cfecc9e1..66501abfa5 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -70,7 +70,7 @@ module.exports = React.createClass({ componentDidMount: function() { this._updateStateForNewMember(this.props.member); - MatrixClientPeg.get().on("deviceVerified", this.onDeviceVerified); + MatrixClientPeg.get().on("deviceVerificationChanged", this.onDeviceVerificationChanged); }, componentWillReceiveProps: function(newProps) { @@ -82,14 +82,14 @@ module.exports = React.createClass({ componentWillUnmount: function() { var client = MatrixClientPeg.get(); if (client) { - client.removeListener("deviceVerified", this.onDeviceVerified); + client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged); } if (this._cancelDeviceList) { this._cancelDeviceList(); } }, - onDeviceVerified: function(userId, device) { + onDeviceVerificationChanged: function(userId, device) { if (userId == this.props.member.userId) { // no need to re-download the whole thing; just update our copy of // the list. @@ -535,7 +535,9 @@ module.exports = React.createClass({ return (

Devices

- {devComponents} +
+ {devComponents} +
); },