Show when you've been kicked or banned

Update the room state when you've been kicked or banned, and show
a message in the preview bar, including the reason.

src/components/structures/RoomView.js

@@ -159,6 +159,7 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("Room.name", this.onRoomName);
         MatrixClientPeg.get().on("Room.accountData", this.onRoomAccountData);
         MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
+        MatrixClientPeg.get().on("RoomMember.membership", this.onRoomMemberMembership);
         MatrixClientPeg.get().on("accountData", this.onAccountData);
 
         this.tabComplete = new TabComplete({
@@ -347,6 +348,7 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
             MatrixClientPeg.get().removeListener("Room.accountData", this.onRoomAccountData);
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+            MatrixClientPeg.get().removeListener("RoomMember.membership", this.onRoomMemberMembership);
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
         }
 
@@ -612,6 +614,12 @@ module.exports = React.createClass({
         this._updateRoomMembers();
     },
 
+    onRoomMemberMembership: function(ev, member, oldMembership) {
+        if (member.userId == MatrixClientPeg.get().credentials.userId) {
+            this.forceUpdate();
+        }
+    },
+
     // rate limited because a power level change will emit an event for every
     // member in the room.
     _updateRoomMembers: new rate_limited_func(function() {
@@ -1456,6 +1464,7 @@ module.exports = React.createClass({
                             />
                             <div className="mx_RoomView_auxPanel">
                                 <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }
+                                                onForgetClick={ this.onForgetClick }
                                                 onRejectClick={ this.onRejectThreepidInviteButtonClicked }
                                                 canPreview={ false } error={ this.state.roomLoadError }
                                                 roomAlias={room_alias}
@@ -1498,6 +1507,7 @@ module.exports = React.createClass({
                         />
                         <div className="mx_RoomView_auxPanel">
                             <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }
+                                            onForgetClick={ this.onForgetClick }
                                             onRejectClick={ this.onRejectButtonClicked }
                                             inviterName={ inviterName }
                                             canPreview={ false }
@@ -1573,6 +1583,7 @@ module.exports = React.createClass({
             }
             aux = (
                 <RoomPreviewBar onJoinClick={this.onJoinButtonClicked}
+                                onForgetClick={ this.onForgetClick }
                                 onRejectClick={this.onRejectThreepidInviteButtonClicked}
                                 spinner={this.state.joining}
                                 inviterName={inviterName}

src/components/views/rooms/RoomPreviewBar.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -79,6 +80,12 @@ module.exports = React.createClass({
         }
     },
 
+    _roomNameElement: function(fallback) {
+        fallback = fallback || 'a room';
+        const name = this.props.room ? this.props.room.name : (this.props.room_alias || "");
+        return name ? <b>{ name }</b> : fallback;
+    },
+
     render: function() {
         var joinBlock, previewBlock;
 
@@ -89,6 +96,16 @@ module.exports = React.createClass({
             </div>);
         }
 
+        const myMember = this.props.room ? this.props.room.currentState.members[
+            MatrixClientPeg.get().credentials.userId
+        ] : null;
+        const kicked = (
+            myMember &&
+            myMember.membership == 'leave' &&
+            myMember.events.member.getSender() != MatrixClientPeg.get().credentials.userId
+        );
+        const banned = myMember && myMember.membership == 'ban';
+
         if (this.props.inviterName) {
             var emailMatchBlock;
             if (this.props.invitedEmail) {
@@ -122,8 +139,31 @@ module.exports = React.createClass({
                 </div>
             );
 
-        }
-        else if (this.props.error) {
+        } else if (kicked || banned) {
+            const verb = kicked ? 'kicked' : 'banned';
+            const roomName = this._roomNameElement('this room');
+            const kicker = MatrixClientPeg.get().getUser(
+                myMember.events.member.getSender()
+            );
+            let reason;
+            if (myMember.events.member.getContent().reason) {
+                reason = <div>Reason: {myMember.events.member.getContent().reason}</div>
+            }
+            let rejoinBlock;
+            if (!banned) {
+                rejoinBlock = <a onClick={ this.props.onJoinClick }><b>Rejoin</b></a>;
+            }
+            joinBlock = (
+                <div>
+                    <div className="mx_RoomPreviewBar_join_text">
+                        You have been {verb} from {roomName} by {kicker.displayName}.<br />
+                        {reason}
+                        <a onClick={ this.props.onForgetClick }><b>Forget</b></a><br />
+                        {rejoinBlock}
+                    </div>
+                </div>
+            );
+        } else if (this.props.error) {
             var name = this.props.roomAlias || "This room";
             var error;
             if (this.props.error.errcode == 'M_NOT_FOUND') {
@@ -138,10 +178,8 @@ module.exports = React.createClass({
                     </div>
                 </div>
             );
-        }
-        else {
-            var name = this.props.room ? this.props.room.name : (this.props.room_alias || "");
-            name = name ? <b>{ name }</b> : "a room";
+        } else {
+            const name = this._roomNameElement();
             joinBlock = (
                 <div>
                     <div className="mx_RoomPreviewBar_join_text">