From 22c8df9f2309842708ea9b567d73f73017a9feb5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 18 Mar 2020 21:08:37 +0000
Subject: [PATCH 1/5] Update DM invite copy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/InviteDialog.js | 9 +++++----
 src/i18n/strings/en_EN.json                  | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js
index d27a66165e..84ce69e174 100644
--- a/src/components/views/dialogs/InviteDialog.js
+++ b/src/components/views/dialogs/InviteDialog.js
@@ -1060,10 +1060,11 @@ export default class InviteDialog extends React.PureComponent {
 
             title = _t("Direct Messages");
             helpText = _t(
-                "If you can't find someone, ask them for their username, share your " +
-                "username (%(userId)s) or <a>profile link</a>.",
-                {userId},
-                {a: (sub) => <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{sub}</a>},
+                "Start a conversation with someone using their name, username (like <userId/>) or email address.",
+                {},
+                {userId: () => {
+                    return <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>;
+                }},
             );
             buttonText = _t("Go");
             goButtonFn = this._startDm;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f8c8ad0200..2f800f8d21 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1584,7 +1584,7 @@
     "Recent Conversations": "Recent Conversations",
     "Suggestions": "Suggestions",
     "Recently Direct Messaged": "Recently Direct Messaged",
-    "If you can't find someone, ask them for their username, share your username (%(userId)s) or <a>profile link</a>.": "If you can't find someone, ask them for their username, share your username (%(userId)s) or <a>profile link</a>.",
+    "Start a conversation with someone using their name, username (like <userId/>) or email address.": "Start a conversation with someone using their name, username (like <userId/>) or email address.",
     "Go": "Go",
     "If you can't find someone, ask them for their username (e.g. @user:server.com) or <a>share this room</a>.": "If you can't find someone, ask them for their username (e.g. @user:server.com) or <a>share this room</a>.",
     "You added a new session '%(displayName)s', which is requesting encryption keys.": "You added a new session '%(displayName)s', which is requesting encryption keys.",

From dd9ead0166181da4c7dd5471a84d7feb42dbb7e6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 18 Mar 2020 21:09:52 +0000
Subject: [PATCH 2/5] Invite dialog: backspace on empty field remove right-most
 target

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/InviteDialog.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js
index 84ce69e174..8cf3967ac5 100644
--- a/src/components/views/dialogs/InviteDialog.js
+++ b/src/components/views/dialogs/InviteDialog.js
@@ -35,6 +35,7 @@ import createRoom, {canEncryptToAllUsers} from "../../../createRoom";
 import {inviteMultipleToRoom} from "../../../RoomInvite";
 import SettingsStore from '../../../settings/SettingsStore';
 import RoomListStore, {TAG_DM} from "../../../stores/RoomListStore";
+import {Key} from "../../../Keyboard";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -647,6 +648,14 @@ export default class InviteDialog extends React.PureComponent {
         this.props.onFinished();
     };
 
+    _onKeyDown = (e) => {
+        // when the field is empty and the user hits backspace remove the right-most target
+        if (!e.target.value && this.state.targets.length > 0 && e.key === Key.BACKSPACE && !e.ctrlKey && !e.shiftKey) {
+            e.preventDefault();
+            this._removeMember(this.state.targets[this.state.targets.length - 1]);
+        }
+    };
+
     _updateFilter = (e) => {
         const term = e.target.value;
         this.setState({filterText: term});
@@ -988,8 +997,8 @@ export default class InviteDialog extends React.PureComponent {
         ));
         const input = (
             <textarea
-                key={"input"}
                 rows={1}
+                onKeyDown={this._onKeyDown}
                 onChange={this._updateFilter}
                 value={this.state.filterText}
                 ref={this._editorRef}

From 963c0a7b3f0451c19110c8a1b25d23271a06700c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 18 Mar 2020 21:16:41 +0000
Subject: [PATCH 3/5] Hide remove target buttons when busy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/InviteDialog.js | 27 +++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js
index 8cf3967ac5..ad5db69947 100644
--- a/src/components/views/dialogs/InviteDialog.js
+++ b/src/components/views/dialogs/InviteDialog.js
@@ -126,7 +126,7 @@ class ThreepidMember extends Member {
 class DMUserTile extends React.PureComponent {
     static propTypes = {
         member: PropTypes.object.isRequired, // Should be a Member (see interface above)
-        onRemove: PropTypes.func.isRequired, // takes 1 argument, the member being removed
+        onRemove: PropTypes.func, // takes 1 argument, the member being removed
     };
 
     _onRemove = (e) => {
@@ -157,18 +157,25 @@ class DMUserTile extends React.PureComponent {
                 width={avatarSize}
                 height={avatarSize} />;
 
-        return (
-            <span className='mx_InviteDialog_userTile'>
-                <span className='mx_InviteDialog_userTile_pill'>
-                    {avatar}
-                    <span className='mx_InviteDialog_userTile_name'>{this.props.member.name}</span>
-                </span>
+        let closeButton;
+        if (this.props.onRemove) {
+            closeButton = (
                 <AccessibleButton
                     className='mx_InviteDialog_userTile_remove'
                     onClick={this._onRemove}
                 >
                     <img src={require("../../../../res/img/icon-pill-remove.svg")} alt={_t('Remove')} width={8} height={8} />
                 </AccessibleButton>
+            );
+        }
+
+        return (
+            <span className='mx_InviteDialog_userTile'>
+                <span className='mx_InviteDialog_userTile_pill'>
+                    {avatar}
+                    <span className='mx_InviteDialog_userTile_name'>{this.props.member.name}</span>
+                </span>
+                { closeButton }
             </span>
         );
     }
@@ -650,7 +657,9 @@ export default class InviteDialog extends React.PureComponent {
 
     _onKeyDown = (e) => {
         // when the field is empty and the user hits backspace remove the right-most target
-        if (!e.target.value && this.state.targets.length > 0 && e.key === Key.BACKSPACE && !e.ctrlKey && !e.shiftKey) {
+        if (!e.target.value && !this.state.busy && this.state.targets.length > 0 && e.key === Key.BACKSPACE &&
+            !e.ctrlKey && !e.shiftKey && !e.metaKey
+        ) {
             e.preventDefault();
             this._removeMember(this.state.targets[this.state.targets.length - 1]);
         }
@@ -993,7 +1002,7 @@ export default class InviteDialog extends React.PureComponent {
 
     _renderEditor() {
         const targets = this.state.targets.map(t => (
-            <DMUserTile member={t} onRemove={this._removeMember} key={t.userId} />
+            <DMUserTile member={t} onRemove={!this.state.busy && this._removeMember} key={t.userId} />
         ));
         const input = (
             <textarea

From 1dc30beb95aa6990c48d7bad7658d8ebda62c3ea Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 19 Mar 2020 09:58:04 +0000
Subject: [PATCH 4/5] disable textarea when busy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/InviteDialog.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js
index ad5db69947..88f7c8d404 100644
--- a/src/components/views/dialogs/InviteDialog.js
+++ b/src/components/views/dialogs/InviteDialog.js
@@ -1013,6 +1013,7 @@ export default class InviteDialog extends React.PureComponent {
                 ref={this._editorRef}
                 onPaste={this._onPaste}
                 autoFocus={true}
+                disabled={this.state.busy}
             />
         );
         return (

From fa6a937896b0994c3f6b8370c6f1cee8e039d8ce Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 19 Mar 2020 09:58:49 +0000
Subject: [PATCH 5/5] don't block onFinished as there are other ways to close
 modal

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/InviteDialog.js | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js
index 88f7c8d404..f0d5443cac 100644
--- a/src/components/views/dialogs/InviteDialog.js
+++ b/src/components/views/dialogs/InviteDialog.js
@@ -648,13 +648,6 @@ export default class InviteDialog extends React.PureComponent {
         });
     };
 
-    _cancel = () => {
-        // We do not want the user to close the dialog while an action is in progress
-        if (this.state.busy) return;
-
-        this.props.onFinished();
-    };
-
     _onKeyDown = (e) => {
         // when the field is empty and the user hits backspace remove the right-most target
         if (!e.target.value && !this.state.busy && this.state.targets.length > 0 && e.key === Key.BACKSPACE &&
@@ -907,7 +900,7 @@ export default class InviteDialog extends React.PureComponent {
     _onManageSettingsClick = (e) => {
         e.preventDefault();
         dis.dispatch({ action: 'view_user_settings' });
-        this._cancel();
+        this.props.onFinished();
     };
 
     _renderSection(kind: "recents"|"suggestions") {
@@ -1107,7 +1100,7 @@ export default class InviteDialog extends React.PureComponent {
             <BaseDialog
                 className='mx_InviteDialog'
                 hasCancel={true}
-                onFinished={this._cancel}
+                onFinished={this.props.onFinished}
                 title={title}
             >
                 <div className='mx_InviteDialog_content'>