ref(ui-components) Use new Dialog (#12363)

Convert some files to TS
Improve Dialog component

react/features/authentication/components/web/LoginDialog.tsx

@@ -7,11 +7,10 @@ import { connect } from '../../../../../connection';
 import { IState, IStore } from '../../../app/types';
 import { IConfig } from '../../../base/config/configType';
 import { toJid } from '../../../base/connection/functions';
-// @ts-ignore
-import { Dialog } from '../../../base/dialog';
 import { translate, translateToHTML } from '../../../base/i18n/functions';
 import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
 import { connect as reduxConnect } from '../../../base/redux/functions';
+import Dialog from '../../../base/ui/components/web/Dialog';
 import Input from '../../../base/ui/components/web/Input';
 import {
     authenticateAndUpgradeRole,
@@ -255,19 +254,18 @@ class LoginDialog extends Component<Props, State> {
 
         return (
             <Dialog
-                disableBlanketClickDismiss = { true }
-                hideCloseIconButton = { true }
-                okDisabled = {
-                    connecting
-                    || loginStarted
-                    || !password
-                    || !username
-                }
-                okKey = { t('dialog.login') }
+                disableBackdropClose = { true }
+                hideCloseButton = { true }
+                ok = {{
+                    disabled: connecting
+                        || loginStarted
+                        || !password
+                        || !username,
+                    translationKey: 'dialog.login'
+                }}
                 onCancel = { this._onCancelLogin }
                 onSubmit = { this._onLogin }
-                titleKey = { t('dialog.authenticationRequired') }
-                width = { 'small' }>
+                titleKey = { t('dialog.authenticationRequired') }>
                 <Input
                     autoFocus = { true }
                     label = { t('dialog.user') }
@@ -278,6 +276,7 @@ class LoginDialog extends Component<Props, State> {
                     value = { username } />
                 <br />
                 <Input
+                    className = 'dialog-bottom-margin'
                     label = { t('dialog.userPassword') }
                     name = 'password'
                     onChange = { this._onPasswordChange }

react/features/authentication/components/web/WaitForOwnerDialog.tsx

@@ -1,32 +1,28 @@
-// @flow
-
 import React, { PureComponent } from 'react';
-import type { Dispatch } from 'redux';
+import { WithTranslation } from 'react-i18next';
 
-import { Dialog } from '../../../base/dialog';
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
+import { IStore } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions';
+import { connect } from '../../../base/redux/functions';
+import Dialog from '../../../base/ui/components/web/Dialog';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { cancelWaitForOwner } from '../../actions.web';
 
 /**
  * The type of the React {@code Component} props of {@link WaitForOwnerDialog}.
  */
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * Redux store dispatch method.
      */
-    dispatch: Dispatch<any>,
+    dispatch: IStore['dispatch'];
 
     /**
      * Function to be invoked after click.
      */
-    onAuthNow: ?Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
+    onAuthNow?: Function;
 }
 
 /**
@@ -48,8 +44,6 @@ class WaitForOwnerDialog extends PureComponent<Props> {
         this._onIAmHost = this._onIAmHost.bind(this);
     }
 
-    _onCancelWaitForOwner: () => void;
-
     /**
      * Called when the cancel button is clicked.
      *
@@ -62,8 +56,6 @@ class WaitForOwnerDialog extends PureComponent<Props> {
         dispatch(cancelWaitForOwner());
     }
 
-    _onIAmHost: () => void;
-
     /**
      * Called when the OK button is clicked.
      *
@@ -73,7 +65,7 @@ class WaitForOwnerDialog extends PureComponent<Props> {
     _onIAmHost() {
         const { onAuthNow } = this.props;
 
-        onAuthNow && onAuthNow();
+        onAuthNow?.();
     }
 
     /**
@@ -88,13 +80,12 @@ class WaitForOwnerDialog extends PureComponent<Props> {
 
         return (
             <Dialog
-                disableBlanketClickDismiss = { true }
-                hideCloseIconButton = { true }
-                okKey = { t('dialog.IamHost') }
+                disableBackdropClose = { true }
+                hideCloseButton = { true }
+                ok = {{ translationKey: 'dialog.IamHost' }}
                 onCancel = { this._onCancelWaitForOwner }
                 onSubmit = { this._onIAmHost }
-                titleKey = { t('dialog.WaitingForHostTitle') }
-                width = { 'small' }>
+                titleKey = { t('dialog.WaitingForHostTitle') }>
                 <span>
                     { t('dialog.WaitForHostMsg') }
                 </span>