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 <div> to the deviceinfo section to help me with the
CSS.

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);
         }

src/components/views/rooms/MemberDeviceInfo.js

@@ -36,32 +36,73 @@ module.exports = React.createClass({
         );
     },
 
-    render: function() {
+    onBlockClick: function() {
-        var indicator = null, button = null;
+        MatrixClientPeg.get().setDeviceBlocked(
-        if (this.props.device.verified) {
+            this.props.userId, this.props.device.id, true
-            indicator = (
-                <div className="mx_MemberDeviceInfo_verified">&#x2714;</div>
         );
-            button = (
+    },
+
+    onUnblockClick: function() {
+        MatrixClientPeg.get().setDeviceBlocked(
+            this.props.userId, this.props.device.id, false
+        );
+    },
+
+    render: function() {
+        var indicator = null, blockButton = null, verifyButton = null;
+        if (this.props.device.blocked) {
+            blockButton = (
+                <div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblock"
+                  onClick={this.onUnblockClick}>
+                    Unblock
+                </div>
+            );
+        } else {
+            blockButton = (
+                <div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_block"
+                  onClick={this.onBlockClick}>
+                    Block
+                </div>
+            );
+        }
+
+        if (this.props.device.verified) {
+            verifyButton = (
                 <div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
                   onClick={this.onUnverifyClick}>
                     Unverify
                 </div>
             );
         } else {
-            button = (
+            verifyButton = (
                 <div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
                   onClick={this.onVerifyClick}>
                     Verify
                 </div>
             );
         }
+
+        if (this.props.device.blocked) {
+            indicator = (
+                <div className="mx_MemberDeviceInfo_blocked">&#x2716;</div>
+            );
+        } else if (this.props.device.verified) {
+            indicator = (
+                    <div className="mx_MemberDeviceInfo_verified">&#x2714;</div>
+            );
+
+        } else {
+            indicator = (
+                <div className="mx_MemberDeviceInfo_unverified">?</div>
+            );
+        }
+
         return (
             <div className="mx_MemberDeviceInfo">
                 <div className="mx_MemberDeviceInfo_deviceId">{this.props.device.id}</div>
-                <div className="mx_MemberDeviceInfo_deviceKey">{this.props.device.key}</div>
                 {indicator}
-                {button}
+                {verifyButton}
+                {blockButton}
             </div>
         );
     },

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,8 +535,10 @@ module.exports = React.createClass({
         return (
             <div>
                 <h3>Devices</h3>
+                <div className="mx_MemberInfo_devices">
                     {devComponents}
                 </div>
+            </div>
         );
     },