Support reasons for kick / ban

Don't ban me for fun, girl
Let me be the one, girl
Ban me for a reason
Let the reason be love.

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -31,22 +31,40 @@ export default React.createClass({
     propTypes: {
         member: React.PropTypes.object.isRequired, // matrix-js-sdk member object
         action: React.PropTypes.string.isRequired, // eg. 'Ban'
+
+        // Whether to display a text field for a reason
+        // If true, the second argument to onFinished will
+        // be the string entered.
+        askReason: React.PropTypes.bool,
         danger: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired,
     },
 
     defaultProps: {
         danger: false,
+        askReason: false,
+    },
+
+    componentWillMount: function() {
+        this._reasonField = null;
     },
 
     onOk: function() {
-        this.props.onFinished(true);
+        let reason;
+        if (this._reasonField) {
+            reason = this._reasonField.value;
+        }
+        this.props.onFinished(true, reason);
     },
 
     onCancel: function() {
         this.props.onFinished(false);
     },
 
+    _collectReasonField: function(e) {
+        this._reasonField = e;
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
@@ -56,8 +74,24 @@ export default React.createClass({
             'mx_Dialog_primary': true,
             'danger': this.props.danger,
         });
+
+        let reasonBox;
+        if (this.props.askReason) {
+            reasonBox = (
+                <div>
+                    <form onSubmit={this.onOk}>
+                        <input className="mx_ConfirmUserActionDialog_reasonField"
+                            ref={this._collectReasonField}
+                            placeholder="Reason"
+                            autoFocus={true}
+                        />
+                    </form>
+                </div>
+            );
+        }
+
         return (
-            <BaseDialog className="mx_UserActionConfirmDialog" onFinished={this.props.onFinished}
+            <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
                 onEnterPressed={ this.onOk }
                 title={title}
             >
@@ -68,8 +102,11 @@ export default React.createClass({
                     <div className="mx_ConfirmUserActionDialog_name">{this.props.member.name}</div>
                     <div className="mx_ConfirmUserActionDialog_userId">{this.props.member.userId}</div>
                 </div>
+                {reasonBox}
                 <div className="mx_Dialog_buttons">
-                    <button className={confirmButtonClass} onClick={this.onOk} autoFocus={true}>
+                    <button className={confirmButtonClass}
+                        onClick={this.onOk} autoFocus={!this.props.askReason}
+                    >
                         {this.props.action}
                     </button>
 

src/components/views/rooms/MemberInfo.js

@@ -222,13 +222,15 @@ module.exports = WithMatrixClient(React.createClass({
         Modal.createDialog(ConfirmUserActionDialog, {
             member: this.props.member,
             action: 'Kick',
+            askReason: true,
             danger: true,
-            onFinished: (proceed) => {
+            onFinished: (proceed, reason) => {
                 if (!proceed) return;
 
                 this.setState({ updating: this.state.updating + 1 });
                 this.props.matrixClient.kick(
                     this.props.member.roomId, this.props.member.userId,
+                    reason || undefined
                 ).then(function() {
                         // NO-OP; rely on the m.room.member event coming down else we could
                         // get out of sync if we force setState here!
@@ -252,8 +254,9 @@ module.exports = WithMatrixClient(React.createClass({
         Modal.createDialog(ConfirmUserActionDialog, {
             member: this.props.member,
             action: this.props.member.membership == 'ban' ? 'Unban' : 'Ban',
+            askReason: this.props.member.membership != 'ban',
             danger: this.props.member.membership != 'ban',
-            onFinished: (proceed) => {
+            onFinished: (proceed, reason) => {
                 if (!proceed) return;
 
                 this.setState({ updating: this.state.updating + 1 });
@@ -265,6 +268,7 @@ module.exports = WithMatrixClient(React.createClass({
                 } else {
                     promise = this.props.matrixClient.ban(
                         this.props.member.roomId, this.props.member.userId,
+                        reason || undefined
                     );
                 }
                 promise.then(