From de621902fc3acc6075d48b57e8123753ac26422a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 18 Jan 2017 15:21:50 +0000
Subject: [PATCH] Better feedback in invite dialog

Show feedback if you enter a valid but unknown email address
or mxid

Fixes https://github.com/vector-im/riot-web/issues/2933
---
 src/Invite.js                                  |  7 +++++--
 .../views/dialogs/ChatInviteDialog.js          | 18 +++++++++++++++---
 .../views/elements/AddressSelector.js          |  4 +++-
 src/components/views/elements/AddressTile.js   |  4 +++-
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/Invite.js b/src/Invite.js
index 6422812734..6cb04b1b19 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -19,9 +19,12 @@ import MultiInviter from './utils/MultiInviter';
 
 const emailRegex = /^\S+@\S+\.\S+$/;
 
+// We allow localhost for mxids to avoid confusion
+const mxidRegex = /^@\S+:(?:\S+\.\S+|localhost)$/
+
 export function getAddressType(inputText) {
-    const isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
-    const isMatrixId = inputText[0] === '@' && inputText.indexOf(":") > 0;
+    const isEmailAddress = emailRegex.test(inputText);
+    const isMatrixId = mxidRegex.test(inputText);
 
     // sanity check the input for user IDs
     if (isEmailAddress) {
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index e9a041357f..f6d7c17898 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -154,14 +154,26 @@ module.exports = React.createClass({
     },
 
     onQueryChanged: function(ev) {
-        var query = ev.target.value;
-        var queryList = [];
+        const query = ev.target.value;
+        let queryList = [];
 
         // Only do search if there is something to search
-        if (query.length > 0) {
+        if (query.length > 0 && query != '@') {
+            // filter the known users list
             queryList = this._userList.filter((user) => {
                 return this._matches(query, user);
+            }).map((user) => {
+                return user.userId;
             });
+
+            // If the query isn't a user we know about, but is a
+            // valid address, add an entry for that
+            if (queryList.length == 0) {
+                const addrType = Invite.getAddressType(query);
+                if (addrType !== null) {
+                    queryList.push(query);
+                }
+            }
         }
 
         this.setState({
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 2c2d7e2d61..853b8db144 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -25,6 +25,8 @@ module.exports = React.createClass({
 
     propTypes: {
         onSelected: React.PropTypes.func.isRequired,
+
+        // List of strings: the addresses to display
         addressList: React.PropTypes.array.isRequired,
         truncateAt: React.PropTypes.number.isRequired,
         selected: React.PropTypes.number,
@@ -125,7 +127,7 @@ module.exports = React.createClass({
                 // 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; }} >
-                        <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
+                        <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
                     </div>
                 );
             }
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index 2799f10a41..b49a84cedd 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -71,6 +71,8 @@ module.exports = React.createClass({
             imgUrl = "img/avatar-error.svg";
         }
 
+        // Removing networks for now as they're not really supported
+        /*
         var network;
         if (this.props.networkUrl !== "") {
             network = (
@@ -79,6 +81,7 @@ module.exports = React.createClass({
                 </div>
             );
         }
+        */
 
         var info;
         var error = false;
@@ -145,7 +148,6 @@ module.exports = React.createClass({
 
         return (
             <div className={classes}>
-                { network }
                 <div className="mx_AddressTile_avatar">
                     <BaseAvatar width={25} height={25} name={name} title={name} url={imgUrl} />
                 </div>