From 99133437d640a66ca1a8bdf71df91e3be060fdb5 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 17 Feb 2020 17:25:02 +1100
Subject: [PATCH 1/2] close all dialogs on ESC or click outside

---
 js/views/session_confirm_view.js       | 17 ++++++++++++++++-
 ts/components/session/SessionModal.tsx | 21 ++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/js/views/session_confirm_view.js b/js/views/session_confirm_view.js
index ce03a8ed2..f5be20610 100644
--- a/js/views/session_confirm_view.js
+++ b/js/views/session_confirm_view.js
@@ -24,6 +24,17 @@
       };
     },
 
+    registerEvents() {
+      this.unregisterEvents();
+      document.addEventListener('mousedown', this.props.onClickClose, false);
+      document.addEventListener('keyup', this.props.onClickClose, false);
+    },
+
+    unregisterEvents() {
+      document.removeEventListener('mousedown', this.props.onClickClose, false);
+      document.removeEventListener('keyup', this.props.onClickClose, false);
+    },
+
     render() {
       this.$('.session-confirm-wrapper').remove();
 
@@ -32,25 +43,29 @@
         Component: window.Signal.Components.SessionConfirm,
         props: this.props,
       });
+      this.registerEvents();
 
       this.$el.prepend(this.confirmView.el);
     },
 
     ok() {
       this.$('.session-confirm-wrapper').remove();
+      this.unregisterEvents();
       if (this.props.resolve) {
         this.props.resolve();
       }
     },
     cancel() {
       this.$('.session-confirm-wrapper').remove();
+      this.unregisterEvents();
       if (this.props.reject) {
         this.props.reject();
       }
     },
     onKeyup(event) {
       if (event.key === 'Escape' || event.key === 'Esc') {
-        this.cancel();
+        this.unregisterEvents();
+        this.props.onClickClose();
       }
     },
   });
diff --git a/ts/components/session/SessionModal.tsx b/ts/components/session/SessionModal.tsx
index 1d4c45808..d4345fb76 100644
--- a/ts/components/session/SessionModal.tsx
+++ b/ts/components/session/SessionModal.tsx
@@ -36,6 +36,8 @@ export class SessionModal extends React.PureComponent<Props, State> {
     headerReverse: false,
   };
 
+  private node: HTMLDivElement | null;
+
   constructor(props: any) {
     super(props);
     this.state = {
@@ -44,10 +46,27 @@ export class SessionModal extends React.PureComponent<Props, State> {
 
     this.close = this.close.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
+    this.node = null;
 
     window.addEventListener('keyup', this.onKeyUp);
   }
 
+  public componentWillMount() {
+    document.addEventListener('mousedown', this.handleClick, false);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClick, false);
+  }
+
+  public handleClick = (e: any) => {
+    if (this.node && this.node.contains(e.target)) {
+      return;
+    }
+
+    this.close();
+  };
+
   public render() {
     const {
       title,
@@ -59,7 +78,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
     const { isVisible } = this.state;
 
     return isVisible ? (
-      <div className={'session-modal'}>
+      <div ref={node => (this.node = node)} className={'session-modal'}>
         {showHeader ? (
           <>
             <div

From 1f411df0ce93a1c5913fe6479fd8b152fed77e40 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 17 Feb 2020 17:25:54 +1100
Subject: [PATCH 2/2] lint

---
 js/views/invite_friends_dialog_view.js        |  5 +++-
 .../session/LeftPaneChannelSection.tsx        | 24 ++++++++++++-------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/js/views/invite_friends_dialog_view.js b/js/views/invite_friends_dialog_view.js
index 1cc7c0ec0..ddf8d5745 100644
--- a/js/views/invite_friends_dialog_view.js
+++ b/js/views/invite_friends_dialog_view.js
@@ -74,7 +74,10 @@
             newMembers.length + existingMembers.length >
             window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
           ) {
-            const msg = window.i18n('maxGroupMembersError', window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT);
+            const msg = window.i18n(
+              'maxGroupMembersError',
+              window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
+            );
 
             window.pushToast({
               title: msg,
diff --git a/ts/components/session/LeftPaneChannelSection.tsx b/ts/components/session/LeftPaneChannelSection.tsx
index 569d9bec1..fd543ebef 100644
--- a/ts/components/session/LeftPaneChannelSection.tsx
+++ b/ts/components/session/LeftPaneChannelSection.tsx
@@ -399,13 +399,18 @@ export class LeftPaneChannelSection extends React.Component<Props, State> {
     groupMembers: Array<ContactType>
   ) {
     // Validate groupName and groupMembers length
-    if (groupName.length === 0 ||
-      groupName.length > window.CONSTANTS.MAX_GROUP_NAME_LENGTH) {
-        window.pushToast({
-          title: window.i18n('invalidGroupName', window.CONSTANTS.MAX_GROUP_NAME_LENGTH),
-          type: 'error',
-          id: 'invalidGroupName',
-        });
+    if (
+      groupName.length === 0 ||
+      groupName.length > window.CONSTANTS.MAX_GROUP_NAME_LENGTH
+    ) {
+      window.pushToast({
+        title: window.i18n(
+          'invalidGroupName',
+          window.CONSTANTS.MAX_GROUP_NAME_LENGTH
+        ),
+        type: 'error',
+        id: 'invalidGroupName',
+      });
 
       return;
     }
@@ -416,7 +421,10 @@ export class LeftPaneChannelSection extends React.Component<Props, State> {
       groupMembers.length >= window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
     ) {
       window.pushToast({
-        title: window.i18n('invalidGroupSize', window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT),
+        title: window.i18n(
+          'invalidGroupSize',
+          window.CONSTANTS.SMALL_GROUP_SIZE_LIMIT
+        ),
         type: 'error',
         id: 'invalidGroupSize',
       });