fix(prejoin) don't hide during auth

Fix the focus issue by disabling autofocus in case an auth (login, ait
for owner or password) dialog is shown.

Fixes: https://github.com/jitsi/docker-jitsi-meet/issues/1336

connection.js

@@ -21,8 +21,7 @@ import { isFatalJitsiConnectionError } from './react/features/base/lib-jitsi-mee
 import { getCustomerDetails } from './react/features/jaas/actions.any';
 import { isVpaasMeeting, getJaasJWT } from './react/features/jaas/functions';
 import {
-    setPrejoinDisplayNameRequired,
+    setPrejoinDisplayNameRequired
-    setPrejoinPageVisibility
 } from './react/features/prejoin/actions';
 const logger = Logger.getLogger(__filename);
 
@@ -247,7 +246,6 @@ function requestAuth(roomName) {
             resolve(connection);
         };
 
-        APP.store.dispatch(setPrejoinPageVisibility(false));
         APP.store.dispatch(
             openDialog(LoginDialog, { onSuccess,
                 roomName })

modules/UI/authentication/AuthHandler.js

@@ -17,7 +17,6 @@ import {
 import { getReplaceParticipant } from '../../../react/features/base/config/functions';
 import { isDialogOpen } from '../../../react/features/base/dialog';
 import { setJWT } from '../../../react/features/base/jwt';
-import { setPrejoinPageVisibility } from '../../../react/features/prejoin';
 import UIUtil from '../util/UIUtil';
 
 import ExternalLoginDialog from './LoginDialog';
@@ -181,7 +180,6 @@ function authenticate(room: Object, lockPassword: string) {
     if (isTokenAuthEnabled(config) || room.isExternalAuthEnabled()) {
         doExternalAuth(room, lockPassword);
     } else {
-        APP.store.dispatch(setPrejoinPageVisibility(false));
         APP.store.dispatch(openLoginDialog());
     }
 }

react/features/authentication/middleware.native.js

@@ -15,7 +15,6 @@ import {
     JitsiConnectionErrors
 } from '../base/lib-jitsi-meet';
 import { MiddlewareRegistry } from '../base/redux';
-import { setPrejoinPageVisibility } from '../prejoin';
 
 import {
     CANCEL_LOGIN,
@@ -121,7 +120,6 @@ MiddlewareRegistry.register(store => next => action => {
                 && error.name === JitsiConnectionErrors.PASSWORD_REQUIRED
                 && typeof error.recoverable === 'undefined') {
             error.recoverable = true;
-            store.dispatch(setPrejoinPageVisibility(false));
             store.dispatch(openLoginDialog());
         }
         break;

react/features/base/conference/middleware.web.js

@@ -46,10 +46,7 @@ MiddlewareRegistry.register(store => next => action => {
     case CONFERENCE_FAILED: {
         const errorName = action.error?.name;
 
-        if (errorName === JitsiConferenceErrors.MEMBERS_ONLY_ERROR
+        if (enableForcedReload && errorName === JitsiConferenceErrors.CONFERENCE_RESTARTED) {
-            || errorName === JitsiConferenceErrors.PASSWORD_REQUIRED) {
-            dispatch(setPrejoinPageVisibility(false));
-        } else if (enableForcedReload && errorName === JitsiConferenceErrors.CONFERENCE_RESTARTED) {
             dispatch(setSkipPrejoinOnReload(true));
         }
 

react/features/prejoin/components/Prejoin.js

@@ -3,9 +3,11 @@
 import InlineDialog from '@atlaskit/inline-dialog';
 import React, { Component } from 'react';
 
+import { LoginDialog, WaitForOwnerDialog } from '../../authentication/components';
 import { Avatar } from '../../base/avatar';
 import { getRoomName } from '../../base/conference';
 import { isNameReadOnly } from '../../base/config';
+import { isDialogOpen } from '../../base/dialog/functions';
 import { translate } from '../../base/i18n';
 import { IconArrowDown, IconArrowUp, IconPhone, IconVolumeOff } from '../../base/icons';
 import { isVideoMutedByUser } from '../../base/media';
@@ -14,6 +16,7 @@ import { ActionButton, InputField, PreMeetingScreen } from '../../base/premeetin
 import { connect } from '../../base/redux';
 import { getDisplayName, updateSettings } from '../../base/settings';
 import { getLocalJitsiVideoTrack } from '../../base/tracks';
+import { PasswordRequiredPrompt } from '../../room-lock/components';
 import {
     joinConference as joinConferenceAction,
     joinConferenceWithoutAudio as joinConferenceWithoutAudioAction,
@@ -47,6 +50,11 @@ type Props = {
      */
     hasJoinByPhoneButton: boolean,
 
+    /**
+     * Whether authentication is taking place or not.
+     */
+    isAuthInProgress: boolean,
+
     /**
      * Joins the current meeting.
      */
@@ -342,6 +350,7 @@ class Prejoin extends Component<Props, State> {
         const {
             deviceStatusVisible,
             hasJoinByPhoneButton,
+            isAuthInProgress,
             joinConference,
             joinConferenceWithoutAudio,
             name,
@@ -378,7 +387,7 @@ class Prejoin extends Component<Props, State> {
                     data-testid = 'prejoin.screen'>
                     {this.showDisplayNameField ? (<InputField
                         autoComplete = { 'name' }
-                        autoFocus = { true }
+                        autoFocus = { !isAuthInProgress }
                         className = { showError ? 'error' : '' }
                         hasError = { showError }
                         onChange = { _setName }
@@ -450,11 +459,14 @@ function mapStateToProps(state): Object {
     const name = getDisplayName(state);
     const showErrorOnJoin = isDisplayNameRequired(state) && !name;
     const { id: participantId } = getLocalParticipant(state);
+    const isAuthInProgress = isDialogOpen(state, WaitForOwnerDialog)
+        || isDialogOpen(state, LoginDialog) || isDialogOpen(state, PasswordRequiredPrompt);
 
     return {
         canEditDisplayName: isPrejoinDisplayNameVisible(state),
         deviceStatusVisible: isDeviceStatusVisible(state),
         hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),
+        isAuthInProgress,
         name,
         participantId,
         prejoinConfig: state['features/base/config'].prejoinConfig,