From c4677be87a26826120d559e5a592f5d23a0a70f8 Mon Sep 17 00:00:00 2001
From: Calinteodor <calinte2002@yahoo.co.uk>
Date: Wed, 26 May 2021 19:15:35 +0300
Subject: [PATCH] fix(authentication): removed cancel event from overlay effect
 (#9274)

* fix(authentication) resolved #9263 issue

* fix(authentication) hide dialog close icon

* fix(authentication) fixed lint error about missing prop
---
 .../authentication/components/web/LoginDialog.js  | 15 +++++++++++++--
 .../components/web/WaitForOwnerDialog.js          | 10 +++++++++-
 .../base/dialog/components/web/ModalHeader.js     | 10 +++++++---
 .../base/dialog/components/web/StatelessDialog.js | 13 ++++++++++++-
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/react/features/authentication/components/web/LoginDialog.js b/react/features/authentication/components/web/LoginDialog.js
index b515e9877..fe1c8919c 100644
--- a/react/features/authentication/components/web/LoginDialog.js
+++ b/react/features/authentication/components/web/LoginDialog.js
@@ -10,7 +10,10 @@ import { Dialog } from '../../../base/dialog';
 import { translate, translateToHTML } from '../../../base/i18n';
 import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
 import { connect as reduxConnect } from '../../../base/redux';
-import { authenticateAndUpgradeRole, cancelLogin } from '../../actions.web';
+import {
+    authenticateAndUpgradeRole,
+    cancelLogin
+} from '../../actions.web';
 
 /**
  * The type of the React {@code Component} props of {@link LoginDialog}.
@@ -121,8 +124,15 @@ class LoginDialog extends Component<Props, State> {
      */
     _onCancelLogin() {
         const { dispatch } = this.props;
+        const cancelButton = document.getElementById('modal-dialog-cancel-button');
 
-        dispatch(cancelLogin());
+        if (cancelButton) {
+            cancelButton.onclick = () => {
+                dispatch(cancelLogin());
+            };
+        }
+
+        return false;
     }
 
     _onLogin: () => void;
@@ -242,6 +252,7 @@ class LoginDialog extends Component<Props, State> {
 
         return (
             <Dialog
+                hideCloseIconButton = { true }
                 okDisabled = {
                     connecting
                     || loginStarted
diff --git a/react/features/authentication/components/web/WaitForOwnerDialog.js b/react/features/authentication/components/web/WaitForOwnerDialog.js
index 4666674a5..5294347c0 100644
--- a/react/features/authentication/components/web/WaitForOwnerDialog.js
+++ b/react/features/authentication/components/web/WaitForOwnerDialog.js
@@ -63,8 +63,15 @@ class WaitForOwnerDialog extends PureComponent<Props> {
      */
     _onCancelWaitForOwner() {
         const { dispatch } = this.props;
+        const cancelButton = document.getElementById('modal-dialog-cancel-button');
 
-        dispatch(cancelWaitForOwner());
+        if (cancelButton) {
+            cancelButton.onclick = () => {
+                dispatch(cancelWaitForOwner());
+            };
+        }
+
+        return false;
     }
 
     _onIAmHost: () => void;
@@ -94,6 +101,7 @@ class WaitForOwnerDialog extends PureComponent<Props> {
 
         return (
             <Dialog
+                hideCloseIconButton = { true }
                 okKey = { t('dialog.IamHost') }
                 onCancel = { this._onCancelWaitForOwner }
                 onSubmit = { this._onIAmHost }
diff --git a/react/features/base/dialog/components/web/ModalHeader.js b/react/features/base/dialog/components/web/ModalHeader.js
index 4c02f6f39..9c818f07d 100644
--- a/react/features/base/dialog/components/web/ModalHeader.js
+++ b/react/features/base/dialog/components/web/ModalHeader.js
@@ -30,6 +30,7 @@ type Props = {
     id: string,
     appearance?: 'danger' | 'warning',
     heading: string,
+    hideCloseIconButton: boolean,
     onClose: Function,
     showKeyline: boolean,
     isHeadingMultiline: boolean,
@@ -60,6 +61,7 @@ export default class ModalHeader extends React.Component<Props> {
             id,
             appearance,
             heading,
+            hideCloseIconButton,
             onClose,
             showKeyline,
             isHeadingMultiline,
@@ -81,9 +83,11 @@ export default class ModalHeader extends React.Component<Props> {
                         {heading}
                     </TitleText>
                 </Title>
-                <Icon
-                    onClick = { onClose }
-                    src = { IconClose } />
+                {
+                    !hideCloseIconButton && <Icon
+                        onClick = { onClose }
+                        src = { IconClose } />
+                }
             </Header>
         );
     }
diff --git a/react/features/base/dialog/components/web/StatelessDialog.js b/react/features/base/dialog/components/web/StatelessDialog.js
index 0c703bc72..efa2e5645 100644
--- a/react/features/base/dialog/components/web/StatelessDialog.js
+++ b/react/features/base/dialog/components/web/StatelessDialog.js
@@ -53,6 +53,11 @@ type Props = {
      */
     hideCancelButton: boolean,
 
+    /**
+     * If true, the close icon button will not be displayed.
+     */
+    hideCloseIconButton: boolean,
+
     /**
      * If true, no footer will be displayed.
      */
@@ -90,6 +95,10 @@ type Props = {
  * Web dialog that uses atlaskit modal-dialog to display dialogs.
  */
 class StatelessDialog extends Component<Props> {
+    static defaultProps = {
+        hideCloseIconButton: false
+    };
+
     /**
      * The functional component to be used for rendering the modal footer.
      */
@@ -125,6 +134,7 @@ class StatelessDialog extends Component<Props> {
         const {
             customHeader,
             children,
+            hideCloseIconButton,
             t /* The following fixes a flow error: */ = _.identity,
             titleString,
             titleKey,
@@ -138,7 +148,8 @@ class StatelessDialog extends Component<Props> {
                     Header: customHeader ? customHeader : props => (
                         <ModalHeader
                             { ...props }
-                            heading = { titleString || t(titleKey) } />
+                            heading = { titleString || t(titleKey) }
+                            hideCloseIconButton = { hideCloseIconButton } />
                     )
                 }}
                 footer = { this._renderFooter }