Wire up invite button on the member list.

skins/base/views/atoms/EditableText.js

@@ -44,7 +44,7 @@ module.exports = React.createClass({
 
     onFinish: function(ev) {
         if (ev.target.value) {
-            this.setValue(ev.target.value);
+            this.setValue(ev.target.value, ev.key === "Enter");
         } else {
             this.cancelEdit();
         }

skins/base/views/organisms/MemberList.js

@@ -23,6 +23,7 @@ var MemberListController = require("../../../../src/controllers/organisms/Member
 var ComponentBroker = require('../../../../src/ComponentBroker');
 
 var MemberTile = ComponentBroker.get("molecules/MemberTile");
+var EditableText = ComponentBroker.get("atoms/EditableText");
 
 
 module.exports = React.createClass({
@@ -39,6 +40,31 @@ module.exports = React.createClass({
         });
     },
 
+    onPopulateInvite: function(inputText, shouldSubmit) {
+        // reset back to placeholder
+        this.refs.invite.setValue("Invite", false, true);
+        if (!shouldSubmit) {
+            return; // enter key wasn't pressed
+        }
+        this.onInvite(inputText);
+    },
+
+    inviteTile: function() {
+        if (this.state.inviting) {
+            return (
+                <div></div>
+            );
+        }
+        return (
+            <div className="mx_MemberTile">
+                <div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>            
+                <div className="mx_MemberTile_name">
+                    <EditableText ref="invite" placeHolder="Invite" onValueChanged={this.onPopulateInvite}/>
+                </div>
+            </div>
+        );
+    },
+
     render: function() {
         return (
             <div className="mx_MemberList">
@@ -49,10 +75,7 @@ module.exports = React.createClass({
                     <h2>Members</h2>
                     <div className="mx_MemberList_wrapper">
                         {this.makeMemberTiles()}
-                        <div className="mx_MemberTile">
+                        {this.inviteTile()}
-                            <div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>            
-                            <div className="mx_MemberTile_name">Invite</div>
-                        </div>
                     </div>
                 </div>
             </div>

src/controllers/atoms/EditableText.js

@@ -55,11 +55,16 @@ module.exports = {
         return this.state.value;
     },
 
-    setValue: function(val) {
+    setValue: function(val, shouldSubmit, suppressListener) {
+        var self = this;
         this.setState({
             value: val,
             phase: this.Phases.Display,
-        }, this.onValueChanged);
+        }, function() {
+            if (!suppressListener) {
+                self.onValueChanged(shouldSubmit);
+            }
+        });
     },
 
     edit: function() {
@@ -74,7 +79,7 @@ module.exports = {
         });
     },
 
-    onValueChanged: function() {
+    onValueChanged: function(shouldSubmit) {
-        this.props.onValueChanged(this.state.value);
+        this.props.onValueChanged(this.state.value, shouldSubmit);
     },
 };

src/controllers/organisms/MemberList.js

@@ -61,6 +61,32 @@ module.exports = {
         });
     },
 
+    onInvite: function(inputText) {
+        var self = this;
+        // sanity check the input
+        inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
+        if (inputText[0] !== '@' || inputText.indexOf(":") === -1) {
+            console.error("Bad user ID to invite: %s", inputText);
+            return;
+        }
+        self.setState({
+            inviting: true
+        });
+        console.log("Invite %s to %s", inputText, this.props.roomId);
+        MatrixClientPeg.get().invite(this.props.roomId, inputText).done(
+        function(res) {
+            console.log("Invited");
+            self.setState({
+                inviting: false
+            });
+        }, function(err) {
+            console.error("Failed to invite: %s", JSON.stringify(err));
+            self.setState({
+                inviting: false
+            });
+        });
+    },
+
     roomMembers: function(limit) {
         if (!this.props.roomId) return {};
         var cli = MatrixClientPeg.get();