Merge pull request #626 from matrix-org/dbkr/sanitize_chatinvitedialog

Sanitize ChatInviteDialog

src/Invite.js

@@ -59,25 +59,3 @@ export function inviteMultipleToRoom(roomId, addrs) {
     return this.inviter.invite(addrs);
 }
 
-/**
- * Checks is the supplied address is valid
- *
- * @param {addr} The mx userId or email address to check
- * @returns true, false, or null for unsure
- */
-export function isValidAddress(addr) {
-    // Check if the addr is a valid type
-    var addrType = this.getAddressType(addr);
-    if (addrType === "mx") {
-        let user = MatrixClientPeg.get().getUser(addr);
-        if (user) {
-            return true;
-        } else {
-            return null;
-        }
-    } else if (addrType === "email") {
-        return true;
-    } else {
-        return false;
-    }
-}

src/components/views/dialogs/ChatInviteDialog.js

@@ -71,15 +71,12 @@ module.exports = React.createClass({
     },
 
     onButtonClick: function() {
-        var inviteList = this.state.inviteList.slice();
+        let inviteList = this.state.inviteList.slice();
         // Check the text input field to see if user has an unconverted address
         // If there is and it's valid add it to the local inviteList
-        var check = Invite.isValidAddress(this.refs.textinput.value);
-        if (check === true || check === null) {
-            inviteList.push(this.refs.textinput.value);
-        } else if (this.refs.textinput.value.length > 0) {
-            this.setState({ error: true });
-            return;
+        if (this.refs.textinput.value !== '') {
+            inviteList = this._addInputToList();
+            if (inviteList === null) return;
         }
 
         if (inviteList.length > 0) {
@@ -119,15 +116,15 @@ module.exports = React.createClass({
         } else if (e.keyCode === 38) { // up arrow
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.onKeyUp();
+            this.addressSelector.moveSelectionUp();
         } else if (e.keyCode === 40) { // down arrow
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.onKeyDown();
-        } else if (this.state.queryList.length > 0 && (e.keyCode === 188, e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
+            this.addressSelector.moveSelectionDown();
+        } else if (this.state.queryList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.onKeySelect();
+            this.addressSelector.chooseSelection();
         } else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace
             e.stopPropagation();
             e.preventDefault();
@@ -135,21 +132,16 @@ module.exports = React.createClass({
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            this.onButtonClick();
+            if (this.refs.textinput.value == '') {
+                // if there's nothing in the input box, submit the form
+                this.onButtonClick();
+            } else {
+                this._addInputToList();
+            }
         } else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
             e.stopPropagation();
             e.preventDefault();
-            var check = Invite.isValidAddress(this.refs.textinput.value);
-            if (check === true || check === null) {
-                var inviteList = this.state.inviteList.slice();
-                inviteList.push(this.refs.textinput.value.trim());
-                this.setState({
-                    inviteList: inviteList,
-                    queryList: [],
-                });
-            } else {
-                this.setState({ error: true });
-            }
+            this._addInputToList();
         }
     },
 
@@ -361,6 +353,22 @@ module.exports = React.createClass({
         return addrs;
     },
 
+    _addInputToList: function() {
+        const addrType = Invite.getAddressType(this.refs.textinput.value);
+        if (addrType !== null) {
+            const inviteList = this.state.inviteList.slice();
+            inviteList.push(this.refs.textinput.value.trim());
+            this.setState({
+                inviteList: inviteList,
+                queryList: [],
+            });
+            return inviteList;
+        } else {
+            this.setState({ error: true });
+            return null;
+        }
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var AddressSelector = sdk.getComponent("elements.AddressSelector");

src/components/views/elements/AddressSelector.js

@@ -55,7 +55,7 @@ module.exports = React.createClass({
         }
     },
 
-    onKeyUp: function() {
+    moveSelectionUp: function() {
         if (this.state.selected > 0) {
             this.setState({
                 selected: this.state.selected - 1,
@@ -64,7 +64,7 @@ module.exports = React.createClass({
         }
     },
 
-    onKeyDown: function() {
+    moveSelectionDown: function() {
         if (this.state.selected < this._maxSelected(this.props.addressList)) {
             this.setState({
                 selected: this.state.selected + 1,
@@ -73,25 +73,19 @@ module.exports = React.createClass({
         }
     },
 
-    onKeySelect: function() {
+    chooseSelection: function() {
         this.selectAddress(this.state.selected);
     },
 
     onClick: function(index) {
-        var self = this;
-        return function() {
-            self.selectAddress(index);
-        };
+        this.selectAddress(index);
     },
 
     onMouseEnter: function(index) {
-        var self = this;
-        return function() {
-            self.setState({
-                selected: index,
-                hover: true,
-            });
-        };
+        this.setState({
+            selected: index,
+            hover: true,
+        });
     },
 
     onMouseLeave: function() {
@@ -124,7 +118,7 @@ module.exports = React.createClass({
                 // Saving the addressListElement so we can use it to work out, in the componentDidUpdate
                 // method, how far to scroll when using the arrow keys
                 addressList.push(
-                    <div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
+                    <div className={classes} onClick={this.onClick.bind(this, i)} onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
                         <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
                     </div>
                 );