From f940d2c1007e346ca3455c456aa2b83687884844 Mon Sep 17 00:00:00 2001
From: Will Hunt <half-shot@molrams.com>
Date: Sat, 10 Jun 2017 16:30:46 +0100
Subject: [PATCH 1/2] Add reason for ban in room settings

---
 src/components/views/rooms/RoomSettings.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index b8aafca1a3..1d3126764c 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -40,6 +40,7 @@ function parseIntWithDefault(val, def) {
 const BannedUser = React.createClass({
     propTypes: {
         member: React.PropTypes.object.isRequired, // js-sdk RoomMember
+        reason: React.PropTypes.string,
     },
 
     _onUnbanClick: function() {
@@ -73,10 +74,11 @@ const BannedUser = React.createClass({
                 >
                     { _t('Unban') }
                 </AccessibleButton>
-                {this.props.member.userId}
+                <strong>{this.props.member.name}</strong>
+                {this.props.reason ? " " +_t('Reason') + ": " + this.props.reason : ""}
             </li>
         );
-    }
+    },
 });
 
 module.exports = React.createClass({
@@ -662,16 +664,17 @@ module.exports = React.createClass({
             userLevelsSection = <div>{ _t('No users have specific privileges in this room') }.</div>;
         }
 
-        var banned = this.props.room.getMembersWithMembership("ban");
-        var bannedUsersSection;
+        const banned = this.props.room.getMembersWithMembership("ban");
+        let bannedUsersSection;
         if (banned.length) {
             bannedUsersSection =
                 <div>
                     <h3>{ _t('Banned users') }</h3>
                     <ul className="mx_RoomSettings_banned">
                         {banned.map(function(member) {
+                            const banEvent = member.events.member.getContent();
                             return (
-                                <BannedUser key={member.userId} member={member} />
+                                <BannedUser key={member.userId} member={member} reason={banEvent.reason} />
                             );
                         })}
                     </ul>

From 3ddbf83c62526c8e48dc36a90212cad7099419ab Mon Sep 17 00:00:00 2001
From: Will Hunt <half-shot@molrams.com>
Date: Sun, 11 Jun 2017 07:13:50 +0100
Subject: [PATCH 2/2] Add userid back

---
 src/components/views/rooms/RoomSettings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index 1d3126764c..9a3236cdb9 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -74,7 +74,7 @@ const BannedUser = React.createClass({
                 >
                     { _t('Unban') }
                 </AccessibleButton>
-                <strong>{this.props.member.name}</strong>
+                <strong>{this.props.member.name}</strong> {this.props.member.userId}
                 {this.props.reason ? " " +_t('Reason') + ": " + this.props.reason : ""}
             </li>
         );