ref(password-required) Update component to use new Dialog (#12900)

Convert component to TS

react/features/base/dialog/middleware.web.ts

@@ -21,6 +21,7 @@ import StartRecordingDialog from '../../recording/components/Recording/web/Start
 import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
 // @ts-ignore
 import RemoteControlAuthorizationDialog from '../../remote-control/components/RemoteControlAuthorizationDialog';
+import PasswordRequiredPrompt from '../../room-lock/components/PasswordRequiredPrompt.web';
 import SalesforceLinkDialog from '../../salesforce/components/web/SalesforceLinkDialog';
 import ShareAudioDialog from '../../screen-share/components/web/ShareAudioDialog';
 import ShareScreenWarningDialog from '../../screen-share/components/web/ShareScreenWarningDialog';
@@ -50,7 +51,7 @@ const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNam
     SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
     GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
     VirtualBackgroundDialog, LoginDialog, WaitForOwnerDialog, DesktopPicker, RemoteControlAuthorizationDialog,
-    LogoutDialog, SalesforceLinkDialog, ParticipantVerificationDialog ];
+    LogoutDialog, SalesforceLinkDialog, ParticipantVerificationDialog, PasswordRequiredPrompt ];
 
 // This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
 const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component);

react/features/room-lock/components/PasswordRequiredPrompt.web.js → react/features/room-lock/components/PasswordRequiredPrompt.web.tsx

@@ -1,11 +1,12 @@
-// @flow
 import React, { Component } from 'react';
-import type { Dispatch } from 'redux';
-
-import { setPassword } from '../../base/conference';
-import { Dialog } from '../../base/dialog';
-import { translate } from '../../base/i18n';
-import { connect } from '../../base/redux';
+import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+import { IStore } from '../../app/types';
+import { setPassword } from '../../base/conference/actions';
+import { IJitsiConference } from '../../base/conference/reducer';
+import { translate } from '../../base/i18n/functions';
+import Dialog from '../../base/ui/components/web/Dialog';
 import Input from '../../base/ui/components/web/Input';
 import { _cancelPasswordRequiredPrompt } from '../actions';
 
@@ -13,23 +14,18 @@ import { _cancelPasswordRequiredPrompt } from '../actions';
  * The type of the React {@code Component} props of
  * {@link PasswordRequiredPrompt}.
  */
-type Props = {
+interface IProps extends WithTranslation {
 
     /**
      * The JitsiConference which requires a password.
      */
-    conference: Object,
+    conference: IJitsiConference;
 
     /**
      * The redux store's {@code dispatch} function.
      */
-    dispatch: Dispatch<any>,
-
-    /**
-     * The translate function.
-     */
-    t: Function
-};
+    dispatch: IStore['dispatch'];
+}
 
 /**
  * The type of the React {@code Component} state of
@@ -40,14 +36,14 @@ type State = {
     /**
      * The password entered by the local participant.
      */
-    password: string
-}
+    password?: string;
+};
 
 /**
  * Implements a React Component which prompts the user when a password is
  * required to join a conference.
  */
-class PasswordRequiredPrompt extends Component<Props, State> {
+class PasswordRequiredPrompt extends Component<IProps, State> {
     state = {
         password: ''
     };
@@ -58,7 +54,7 @@ class PasswordRequiredPrompt extends Component<Props, State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
@@ -76,12 +72,10 @@ class PasswordRequiredPrompt extends Component<Props, State> {
     render() {
         return (
             <Dialog
-                disableBlanketClickDismiss = { true }
-                isModal = { false }
+                disableBackdropClose = { true }
                 onCancel = { this._onCancel }
                 onSubmit = { this._onSubmit }
-                titleKey = 'dialog.passwordRequired'
-                width = 'small'>
+                titleKey = 'dialog.passwordRequired'>
                 { this._renderBody() }
             </Dialog>
         );
@@ -98,6 +92,7 @@ class PasswordRequiredPrompt extends Component<Props, State> {
             <div>
                 <Input
                     autoFocus = { true }
+                    className = 'dialog-bottom-margin'
                     label = { this.props.t('dialog.passwordLabel') }
                     name = 'lockKey'
                     onChange = { this._onPasswordChanged }
@@ -107,8 +102,6 @@ class PasswordRequiredPrompt extends Component<Props, State> {
         );
     }
 
-    _onPasswordChanged: ({ target: { value: * }}) => void;
-
     /**
      * Notifies this dialog that password has changed.
      *
@@ -122,8 +115,6 @@ class PasswordRequiredPrompt extends Component<Props, State> {
         });
     }
 
-    _onCancel: () => boolean;
-
     /**
      * Dispatches action to cancel and dismiss this dialog.
      *
@@ -138,8 +129,6 @@ class PasswordRequiredPrompt extends Component<Props, State> {
         return true;
     }
 
-    _onSubmit: () => boolean;
-
     /**
      * Dispatches action to submit value from this dialog.
      *