feat: Drops connection on prejoin screen. (#13538)

* feat: Drops connection on prejoin screen.

Refactors connection logic to reuse already existing logic from mobile. Connection is now established just before joining the room.
Fixes some authentication logic with Login and Logout button in Profile tab.

* squash: Drops createInitialLocalTracksAndConnect as it no longer connects.

* squash: Shows an error on mobile and redirects to default.

* squash: Fixes review comments.

* squash: Fixes joining with prejoin disabled.

* squash: Fixes adding initial local tracks.

* squash: Fixes comments.

* squash: Drop no longer used method.

* squash: Fixes old web code imported into mobile builds.

* squash: Drop unused prop.

* squash: Drops recoverable flag on REDIRECT.

* squash: Drops unused variable and fix connection access.

* squash: Xmpp connect returns promise again.

* squash: Execute xmpp connect and creating local tracks in parallel.

* squash: Moves notification about problem jwt.

* squash: Moves startConference to conference.js for the no prejoin case.

And move the startConference in prejoin feature for the prejoin case.

* squash: Fix passing filtered tracks when starting conference with no prejoin.

* squash: Fix clearing listeners on connection established.

Keeps mobile behaviour after merging web and mobile.

* squash: Drops unused code.

conference.js

 import Logger from '@jitsi/logger';
 import EventEmitter from 'events';
 
-import { openConnection } from './connection';
 import { ENDPOINT_TEXT_MESSAGE_NAME } from './modules/API/constants';
 import { AUDIO_ONLY_SCREEN_SHARE_NO_TRACK } from './modules/UI/UIErrors';
-import AuthHandler from './modules/UI/authentication/AuthHandler';
-import UIUtil from './modules/UI/util/UIUtil';
-import VideoLayout from './modules/UI/videolayout/VideoLayout';
 import mediaDeviceHelper from './modules/devices/mediaDeviceHelper';
 import Recorder from './modules/recorder/Recorder';
 import { createTaskQueue } from './modules/util/helpers';
     conferenceSubjectChanged,
     conferenceTimestampChanged,
     conferenceUniqueIdSet,
-    conferenceWillJoin,
+    conferenceWillInit,
     conferenceWillLeave,
     dataChannelClosed,
     dataChannelOpened,
     commonUserJoinedHandling,
     commonUserLeftHandling,
     getConferenceOptions,
-    getVisitorOptions,
-    restoreConferenceOptions,
     sendLocalParticipant
 } from './react/features/base/conference/functions';
-import { overwriteConfig } from './react/features/base/config/actions';
 import { getReplaceParticipant } from './react/features/base/config/functions';
+import { connect } from './react/features/base/connection/actions.web';
 import {
     checkAndNotifyForNewDevice,
     getAvailableDevices,
 import {
     JitsiConferenceErrors,
     JitsiConferenceEvents,
-    JitsiConnectionErrors,
-    JitsiConnectionEvents,
     JitsiE2ePingEvents,
     JitsiMediaDevicesEvents,
     JitsiTrackErrors,
     JitsiTrackEvents,
     browser
 } from './react/features/base/lib-jitsi-meet';
-import { isFatalJitsiConnectionError } from './react/features/base/lib-jitsi-meet/functions';
 import {
     gumPending,
     setAudioAvailable,
 import { initKeyboardShortcuts } from './react/features/keyboard-shortcuts/actions';
 import { maybeSetLobbyChatMessageListener } from './react/features/lobby/actions.any';
 import { setNoiseSuppressionEnabled } from './react/features/noise-suppression/actions';
-import { hideNotification, showNotification, showWarningNotification } from './react/features/notifications/actions';
+import {
+    hideNotification,
+    showErrorNotification,
+    showNotification,
+    showWarningNotification
+} from './react/features/notifications/actions';
 import {
     DATA_CHANNEL_CLOSED_NOTIFICATION_ID,
     NOTIFICATION_TIMEOUT_TYPE
 import { isModerationNotificationDisplayed } from './react/features/notifications/functions';
 import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay/actions';
 import { suspendDetected } from './react/features/power-monitor/actions';
-import { initPrejoin, makePrecallTest, setJoiningInProgress } from './react/features/prejoin/actions';
+import { initPrejoin, makePrecallTest } from './react/features/prejoin/actions';
 import { isPrejoinPageVisible } from './react/features/prejoin/functions';
 import { disableReceiver, stopReceiver } from './react/features/remote-control/actions';
 import { setScreenAudioShareState } from './react/features/screen-share/actions.web';
 import { endpointMessageReceived } from './react/features/subtitles/actions.any';
 import { handleToggleVideoMuted } from './react/features/toolbox/actions.any';
 import { muteLocal } from './react/features/video-menu/actions.any';
-import { setIAmVisitor } from './react/features/visitors/actions';
 import { iAmVisitor } from './react/features/visitors/functions';
 import UIEvents from './service/UI/UIEvents';
 
 const eventEmitter = new EventEmitter();
 
 let room;
-let connection;
-
-/**
- * The promise is used when the prejoin screen is shown.
- * While the user configures the devices the connection can be made.
- *
- * @type {Promise<Object>}
- * @private
- */
-let _connectionPromise;
-
-/**
- * We are storing the resolve function of a Promise that waits for the _connectionPromise to be created. This is needed
- * when the prejoin button was pressed before the conference object was initialized and the _connectionPromise has not
- * been initialized when we tried to execute prejoinStart. In this case in prejoinStart we create a new Promise, assign
- * the resolve function to this variable and wait for the promise to resolve before we continue. The
- * _onConnectionPromiseCreated will be called once the _connectionPromise is created.
- */
-let _onConnectionPromiseCreated;
 
 /*
  * Logic to open a desktop picker put on the window global for
     ETHERPAD: 'etherpad'
 };
 
-/**
- * Open Connection. When authentication failed it shows auth dialog.
- * @param roomName the room name to use
- * @returns Promise<JitsiConnection>
- */
-function connect(roomName) {
-    return openConnection({
-        retry: true,
-        roomName
-    })
-    .catch(err => {
-        if (err === JitsiConnectionErrors.PASSWORD_REQUIRED) {
-            APP.UI.notifyTokenAuthFailed();
-        } else {
-            APP.UI.notifyConnectionFailed(err);
-        }
-        throw err;
-    });
-}
-
 /**
  * Share data to other users.
  * @param command the command
             break;
         }
 
-        // not enough rights to create conference
-        case JitsiConferenceErrors.AUTHENTICATION_REQUIRED: {
-
-            const replaceParticipant = getReplaceParticipant(APP.store.getState());
-
-            // Schedule reconnect to check if someone else created the room.
-            this.reconnectTimeout = setTimeout(() => {
-                APP.store.dispatch(conferenceWillJoin(room));
-                room.join(null, replaceParticipant);
-            }, 5000);
-
-            const { password }
-                = APP.store.getState()['features/base/conference'];
-
-            AuthHandler.requireAuth(room, password);
-
-            break;
-        }
-
         case JitsiConferenceErrors.RESERVATION_ERROR: {
             const [ code, msg ] = params;
 
-            APP.UI.notifyReservationError(code, msg);
-            break;
-        }
-
-        case JitsiConferenceErrors.REDIRECTED: {
-            const newConfig = getVisitorOptions(APP.store.getState(), params);
-
-            if (!newConfig) {
-                logger.warn('Not redirected missing params');
-                break;
-            }
-
-            const [ vnode ] = params;
-
-            APP.store.dispatch(overwriteConfig(newConfig))
-                .then(() => this._conference.leaveRoom())
-                .then(() => APP.store.dispatch(setIAmVisitor(Boolean(vnode))))
-
-                // we do not clear local tracks on error, so we need to manually clear them
-                .then(() => APP.store.dispatch(destroyLocalTracks()))
-                .then(() => {
-                    // Reset VideoLayout. It's destroyed in features/video-layout/middleware.web.js so re-initialize it.
-                    VideoLayout.initLargeVideo();
-                    VideoLayout.resizeVideoArea();
-
-                    connect(this._conference.roomName).then(con => {
-                        this._conference.startConference(con, []);
-                    });
-                });
-
+            APP.store.dispatch(showErrorNotification({
+                descriptionArguments: {
+                    code,
+                    msg
+                },
+                descriptionKey: 'dialog.reservationErrorMsg',
+                titleKey: 'dialog.reservationError'
+            }, NOTIFICATION_TIMEOUT_TYPE.LONG));
             break;
         }
 
         case JitsiConferenceErrors.GRACEFUL_SHUTDOWN:
-            APP.UI.notifyGracefulShutdown();
+            APP.store.dispatch(showErrorNotification({
+                descriptionKey: 'dialog.gracefulShutdown',
+                titleKey: 'dialog.serviceUnavailable'
+            }, NOTIFICATION_TIMEOUT_TYPE.LONG));
             break;
 
         // FIXME FOCUS_DISCONNECTED is a confusing event name.
             // FIXME the conference should be stopped by the library and not by
             // the app. Both the errors above are unrecoverable from the library
             // perspective.
-            room.leave(CONFERENCE_LEAVE_REASONS.UNRECOVERABLE_ERROR).then(() => connection.disconnect());
+            room.leave(CONFERENCE_LEAVE_REASONS.UNRECOVERABLE_ERROR).then(() => APP.connection.disconnect());
             break;
 
-        case JitsiConferenceErrors.CONFERENCE_MAX_USERS: {
-            APP.UI.notifyMaxUsersLimitReached();
-
-            // in case of max users(it can be from a visitor node), let's restore
-            // oldConfig if any as we will be back to the main prosody
-            const newConfig = restoreConferenceOptions(APP.store.getState());
-
-            if (newConfig) {
-                APP.store.dispatch(overwriteConfig(newConfig))
-                    .then(() => this._conference.leaveRoom())
-                    .then(() => {
-                        _connectionPromise = connect(this._conference.roomName);
-
-                        return _connectionPromise;
-                    })
-                    .then(con => {
-                        APP.connection = connection = con;
-                    });
-            }
-
-            break;
-        }
         case JitsiConferenceErrors.INCOMPATIBLE_SERVER_VERSIONS:
             APP.store.dispatch(reloadWithStoredParams());
             break;
         return Promise.resolve();
     };
 
-    if (!connection) {
+    if (!APP.connection) {
         return onDisconnected();
     }
 
-    return connection.disconnect().then(onDisconnected, onDisconnected);
+    return APP.connection.disconnect().then(onDisconnected, onDisconnected);
 }
 
 /**
     APP.store.dispatch(gumPending(nonPendingTracks, IGUMPendingState.NONE));
 }
 
-/**
- * Handles CONNECTION_FAILED events from lib-jitsi-meet.
- *
- * @param {JitsiConnectionError} error - The reported error.
- * @returns {void}
- * @private
- */
-function _connectionFailedHandler(error) {
-    if (isFatalJitsiConnectionError(error)) {
-        APP.connection.removeEventListener(
-            JitsiConnectionEvents.CONNECTION_FAILED,
-            _connectionFailedHandler);
-        if (room) {
-            APP.store.dispatch(conferenceWillLeave(room));
-            room.leave(CONFERENCE_LEAVE_REASONS.UNRECOVERABLE_ERROR);
-        }
-    }
-}
-
 export default {
     /**
      * Flag used to delay modification of the muted status of local media tracks
     /**
      * Returns an object containing a promise which resolves with the created tracks &
      * the errors resulting from that process.
-     *
+     * @param {object} options
+     * @param {boolean} options.startAudioOnly=false - if <tt>true</tt> then
+     * only audio track will be created and the audio only mode will be turned
+     * on.
+     * @param {boolean} options.startScreenSharing=false - if <tt>true</tt>
+     * should start with screensharing instead of camera video.
+     * @param {boolean} options.startWithAudioMuted - will start the conference
+     * without any audio tracks.
+     * @param {boolean} options.startWithVideoMuted - will start the conference
+     * without any video tracks.
      * @returns {Promise<JitsiLocalTrack[]>, Object}
      */
     createInitialLocalTracks(options = {}) {
         }
     },
 
-    /**
-     * Creates local media tracks and connects to a room. Will show error
-     * dialogs in case accessing the local microphone and/or camera failed. Will
-     * show guidance overlay for users on how to give access to camera and/or
-     * microphone.
-     * @param {string} roomName
-     * @param {object} options
-     * @param {boolean} options.startAudioOnly=false - if <tt>true</tt> then
-     * only audio track will be created and the audio only mode will be turned
-     * on.
-     * @param {boolean} options.startScreenSharing=false - if <tt>true</tt>
-     * should start with screensharing instead of camera video.
-     * @param {boolean} options.startWithAudioMuted - will start the conference
-     * without any audio tracks.
-     * @param {boolean} options.startWithVideoMuted - will start the conference
-     * without any video tracks.
-     * @returns {Promise.<JitsiLocalTrack[], JitsiConnection>}
-     */
-    createInitialLocalTracksAndConnect(roomName, options = {}) {
-        const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(options);
-
-        return Promise.all([ tryCreateLocalTracks, connect(roomName) ])
-            .then(([ tracks, con ]) => {
-
-                this._displayErrorsForCreateInitialLocalTracks(errors);
-
-                return [ tracks, con ];
-            });
-    },
-
-    startConference(con, tracks) {
+    startConference(tracks) {
         tracks.forEach(track => {
             if ((track.isAudioTrack() && this.isLocalAudioMuted())
                 || (track.isVideoTrack() && this.isLocalVideoMuted())) {
             }
         });
 
-        con.addEventListener(JitsiConnectionEvents.CONNECTION_FAILED, _connectionFailedHandler);
-        APP.connection = connection = con;
-
         this._createRoom(tracks);
 
         // if user didn't give access to mic or camera or doesn't have
         };
 
         if (isPrejoinPageVisible(state)) {
-            _connectionPromise = connect(roomName).then(c => {
-                // We want to initialize it early, in case of errors to be able to gather logs.
-                APP.connection = c;
-
-                return c;
-            });
-
-            if (_onConnectionPromiseCreated) {
-                _onConnectionPromiseCreated();
-            }
-
             APP.store.dispatch(makePrecallTest(this._getConferenceOptions()));
 
             const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(initialOptions);
             return this._setLocalAudioVideoStreams(tracks);
         }
 
-        const [ tracks, con ] = await this.createInitialLocalTracksAndConnect(roomName, initialOptions);
+        const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(initialOptions);
 
-        this._initDeviceList(true);
+        return Promise.all([
+            tryCreateLocalTracks.then(tr => {
+                this._displayErrorsForCreateInitialLocalTracks(errors);
 
-        const filteredTracks = handleInitialTracks(initialOptions, tracks);
+                return tr;
+            }).then(tr => {
+                this._initDeviceList(true);
 
-        setGUMPendingStateOnFailedTracks(filteredTracks);
+                const filteredTracks = handleInitialTracks(initialOptions, tr);
 
-        return this.startConference(con, filteredTracks);
-    },
+                setGUMPendingStateOnFailedTracks(filteredTracks);
 
-    /**
-     * Joins conference after the tracks have been configured in the prejoin screen.
-     *
-     * @param {Object[]} tracks - An array with the configured tracks
-     * @returns {void}
-     */
-    async prejoinStart(tracks) {
-        if (!_connectionPromise) {
-            // The conference object isn't initialized yet. Wait for the promise to initialise.
-            await new Promise(resolve => {
-                _onConnectionPromiseCreated = resolve;
-            });
-            _onConnectionPromiseCreated = undefined;
-        }
-
-        let con;
-
-        try {
-            con = await _connectionPromise;
-            this.startConference(con, tracks);
-        } catch (error) {
-            logger.error(`An error occurred while trying to join a meeting from the prejoin screen: ${error}`);
-            APP.store.dispatch(setJoiningInProgress(false));
-        }
+                return filteredTracks;
+            }),
+            APP.store.dispatch(connect())
+        ]).then(([ tracks, _ ]) => {
+            this.startConference(tracks).catch(logger.error);
+        });
     },
 
     /**
      * Used by the Breakout Rooms feature to join a breakout room or go back to the main room.
      */
     async joinRoom(roomName, options) {
-        // Reset VideoLayout. It's destroyed in features/video-layout/middleware.web.js so re-initialize it.
-        VideoLayout.initLargeVideo();
-        VideoLayout.resizeVideoArea();
+        APP.store.dispatch(conferenceWillInit());
 
         // Restore initial state.
         this._localTracksInitialized = false;
     },
 
     _createRoom(localTracks) {
-        room = connection.initJitsiConference(APP.conference.roomName, this._getConferenceOptions());
+        room = APP.connection.initJitsiConference(APP.conference.roomName, this._getConferenceOptions());
 
         // Filter out the tracks that are muted (except on Safari).
         const tracks = browser.isWebKitBased() ? localTracks : localTracks.filter(track => !track.isMuted());
             titleKey = 'notify.screenShareNoAudioTitle';
         }
 
-        APP.UI.messageHandler.showError({
+        APP.store.dispatch(showErrorNotification({
             descriptionKey,
             titleKey
-        });
+        }, NOTIFICATION_TIMEOUT_TYPE.LONG));
     },
 
     /**
             this.hangup(true);
         });
 
-        // logout
-        APP.UI.addListener(UIEvents.LOGOUT, () => {
-            AuthHandler.logout(room).then(url => {
-                if (url) {
-                    UIUtil.redirect(url);
-                } else {
-                    this.hangup(true);
-                }
-            });
-        });
-
-        APP.UI.addListener(UIEvents.AUTH_CLICKED, () => {
-            AuthHandler.authenticate(room);
-        });
-
         APP.UI.addListener(
             UIEvents.VIDEO_DEVICE_CHANGED,
             cameraDeviceId => {

connection.js

-/* global APP, JitsiMeetJS, config */
-
-import { jitsiLocalStorage } from '@jitsi/js-utils';
-import Logger from '@jitsi/logger';
-
-import { redirectToTokenAuthService } from './modules/UI/authentication/AuthHandler';
-import { LoginDialog } from './react/features/authentication/components';
-import { isTokenAuthEnabled } from './react/features/authentication/functions';
-import {
-    connectionEstablished,
-    connectionFailed,
-    constructOptions
-} from './react/features/base/connection/actions.web';
-import { openDialog } from './react/features/base/dialog/actions';
-import { setJWT } from './react/features/base/jwt/actions';
-import {
-    JitsiConnectionErrors,
-    JitsiConnectionEvents
-} from './react/features/base/lib-jitsi-meet';
-import { isFatalJitsiConnectionError } from './react/features/base/lib-jitsi-meet/functions';
-import { getCustomerDetails } from './react/features/jaas/actions.any';
-import { getJaasJWT, isVpaasMeeting } from './react/features/jaas/functions';
-import {
-    setPrejoinDisplayNameRequired
-} from './react/features/prejoin/actions';
-const logger = Logger.getLogger(__filename);
-
-/**
- * The feature announced so we can distinguish jibri participants.
- *
- * @type {string}
- */
-export const DISCO_JIBRI_FEATURE = 'http://jitsi.org/protocol/jibri';
-
-/**
- * Try to open connection using provided credentials.
- * @param {string} [id]
- * @param {string} [password]
- * @returns {Promise<JitsiConnection>} connection if
- * everything is ok, else error.
- */
-export async function connect(id, password) {
-    const state = APP.store.getState();
-    let { jwt } = state['features/base/jwt'];
-    const { iAmRecorder, iAmSipGateway } = state['features/base/config'];
-
-    if (!iAmRecorder && !iAmSipGateway && isVpaasMeeting(state)) {
-        await APP.store.dispatch(getCustomerDetails());
-
-        if (!jwt) {
-            jwt = await getJaasJWT(state);
-            APP.store.dispatch(setJWT(jwt));
-        }
-    }
-
-    const connection = new JitsiMeetJS.JitsiConnection(null, jwt, constructOptions(state));
-
-    if (config.iAmRecorder) {
-        connection.addFeature(DISCO_JIBRI_FEATURE);
-    }
-
-    return new Promise((resolve, reject) => {
-        connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_ESTABLISHED,
-            handleConnectionEstablished);
-        connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_FAILED,
-            handleConnectionFailed);
-        connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_FAILED,
-            connectionFailedHandler);
-        connection.addEventListener(
-            JitsiConnectionEvents.DISPLAY_NAME_REQUIRED,
-            displayNameRequiredHandler
-        );
-
-        /* eslint-disable max-params */
-        /**
-         *
-         */
-        function connectionFailedHandler(error, message, credentials, details) {
-        /* eslint-enable max-params */
-            APP.store.dispatch(
-                connectionFailed(
-                    connection, {
-                        credentials,
-                        details,
-                        message,
-                        name: error
-                    }));
-
-            if (isFatalJitsiConnectionError(error)) {
-                connection.removeEventListener(
-                    JitsiConnectionEvents.CONNECTION_FAILED,
-                    connectionFailedHandler);
-            }
-        }
-
-        /**
-         *
-         */
-        function unsubscribe() {
-            connection.removeEventListener(
-                JitsiConnectionEvents.CONNECTION_ESTABLISHED,
-                handleConnectionEstablished);
-            connection.removeEventListener(
-                JitsiConnectionEvents.CONNECTION_FAILED,
-                handleConnectionFailed);
-        }
-
-        /**
-         *
-         */
-        function handleConnectionEstablished() {
-            APP.store.dispatch(connectionEstablished(connection, Date.now()));
-            unsubscribe();
-            resolve(connection);
-        }
-
-        /**
-         *
-         */
-        function handleConnectionFailed(err) {
-            unsubscribe();
-            logger.error('CONNECTION FAILED:', err);
-            reject(err);
-        }
-
-        /**
-         * Marks the display name for the prejoin screen as required.
-         * This can happen if a user tries to join a room with lobby enabled.
-         */
-        function displayNameRequiredHandler() {
-            APP.store.dispatch(setPrejoinDisplayNameRequired());
-        }
-
-        connection.connect({
-            id,
-            password
-        });
-    });
-}
-
-/**
- * Open JitsiConnection using provided credentials.
- * If retry option is true it will show auth dialog on PASSWORD_REQUIRED error.
- *
- * @param {object} options
- * @param {string} [options.id]
- * @param {string} [options.password]
- * @param {string} [options.roomName]
- * @param {boolean} [retry] if we should show auth dialog
- * on PASSWORD_REQUIRED error.
- *
- * @returns {Promise<JitsiConnection>}
- */
-export function openConnection({ id, password, retry, roomName }) {
-    const usernameOverride
-        = jitsiLocalStorage.getItem('xmpp_username_override');
-    const passwordOverride
-        = jitsiLocalStorage.getItem('xmpp_password_override');
-
-    if (usernameOverride && usernameOverride.length > 0) {
-        id = usernameOverride; // eslint-disable-line no-param-reassign
-    }
-    if (passwordOverride && passwordOverride.length > 0) {
-        password = passwordOverride; // eslint-disable-line no-param-reassign
-    }
-
-    return connect(id, password).catch(err => {
-        if (retry) {
-            const { jwt } = APP.store.getState()['features/base/jwt'];
-
-            if (err === JitsiConnectionErrors.PASSWORD_REQUIRED && !jwt) {
-                return requestAuth(roomName);
-            }
-        }
-
-        throw err;
-    });
-}
-
-/**
- * Show Authentication Dialog and try to connect with new credentials.
- * If failed to connect because of PASSWORD_REQUIRED error
- * then ask for password again.
- * @param {string} [roomName] name of the conference room
- *
- * @returns {Promise<JitsiConnection>}
- */
-function requestAuth(roomName) {
-    const config = APP.store.getState()['features/base/config'];
-
-    if (isTokenAuthEnabled(config)) {
-        // This Promise never resolves as user gets redirected to another URL
-        return new Promise(() => redirectToTokenAuthService(roomName));
-    }
-
-    return new Promise(resolve => {
-        const onSuccess = connection => {
-            resolve(connection);
-        };
-
-        APP.store.dispatch(
-            openDialog(LoginDialog, { onSuccess,
-                roomName })
-        );
-    });
-}

lang/main.json

         "permissionCameraRequiredError": "Camera permission is required to participate in conferences with video. Please grant it in Settings",
         "permissionErrorTitle": "Permission required",
         "permissionMicRequiredError": "Microphone permission is required to participate in conferences with audio. Please grant it in Settings",
-        "popupError": "Your browser is blocking pop-up windows from this site. Please enable pop-ups in your browser's security settings and try again.",
-        "popupErrorTitle": "Pop-up blocked",
         "readMore": "more",
         "recentlyUsedObjects": "Your recently used objects",
         "recording": "Recording",
         "token": "token",
         "tokenAuthFailed": "Sorry, you're not allowed to join this call.",
         "tokenAuthFailedTitle": "Authentication failed",
+        "tokenAuthUnsupported": "Token URL is not supported.",
         "transcribing": "Transcribing",
         "unlockRoom": "Remove meeting $t(lockRoomPassword)",
         "user": "User",

modules/UI/UI.js

 import Logger from '@jitsi/logger';
 import EventEmitter from 'events';
 
+import {
+    conferenceWillInit
+} from '../../react/features/base/conference/actions';
 import { isMobileBrowser } from '../../react/features/base/environment/utils';
 import { setColorAlpha } from '../../react/features/base/util/helpers';
 import { setDocumentUrl } from '../../react/features/etherpad/actions';
 import UIEvents from '../../service/UI/UIEvents';
 
 import EtherpadManager from './etherpad/Etherpad';
-import messageHandler from './util/MessageHandler';
 import UIUtil from './util/UIUtil';
 import VideoLayout from './videolayout/VideoLayout';
 
 const logger = Logger.getLogger(__filename);
 
-UI.messageHandler = messageHandler;
-
 const eventEmitter = new EventEmitter();
 
 UI.eventEmitter = eventEmitter;
     return UIUtil.isFullScreen();
 };
 
-/**
- * Notify user that server has shut down.
- */
-UI.notifyGracefulShutdown = function() {
-    messageHandler.showError({
-        descriptionKey: 'dialog.gracefulShutdown',
-        titleKey: 'dialog.serviceUnavailable'
-    });
-};
-
-/**
- * Notify user that reservation error happened.
- */
-UI.notifyReservationError = function(code, msg) {
-    messageHandler.showError({
-        descriptionArguments: {
-            code,
-            msg
-        },
-        descriptionKey: 'dialog.reservationErrorMsg',
-        titleKey: 'dialog.reservationError'
-    });
-};
-
 /**
  * Initialize conference UI.
  */
 
 /**
  * Starts the UI module and initializes all related components.
- *
- * @returns {boolean} true if the UI is ready and the conference should be
- * established, false - otherwise (for example in the case of welcome page)
  */
 UI.start = function() {
-    VideoLayout.initLargeVideo();
-
-    // Do not animate the video area on UI start (second argument passed into
-    // resizeVideoArea) because the animation is not visible anyway. Plus with
-    // the current dom layout, the quality label is part of the video layout and
-    // will be seen animating in.
-    VideoLayout.resizeVideoArea();
+    APP.store.dispatch(conferenceWillInit());
 
     if (isMobileBrowser()) {
         document.body.classList.add('mobile-browser');
 // Used by torture.
 UI.dockToolbar = dock => APP.store.dispatch(dockToolbox(dock));
 
-/**
- * Notify user that connection failed.
- * @param {string} stropheErrorMsg raw Strophe error message
- */
-UI.notifyConnectionFailed = function(stropheErrorMsg) {
-    let descriptionKey;
-    let descriptionArguments;
-
-    if (stropheErrorMsg) {
-        descriptionKey = 'dialog.connectErrorWithMsg';
-        descriptionArguments = { msg: stropheErrorMsg };
-    } else {
-        descriptionKey = 'dialog.connectError';
-    }
-
-    messageHandler.showError({
-        descriptionArguments,
-        descriptionKey,
-        titleKey: 'connection.CONNFAIL'
-    });
-};
-
-
-/**
- * Notify user that maximum users limit has been reached.
- */
-UI.notifyMaxUsersLimitReached = function() {
-    messageHandler.showError({
-        hideErrorSupportLink: true,
-        descriptionKey: 'dialog.maxUsersLimitReached',
-        titleKey: 'dialog.maxUsersLimitReachedTitle'
-    });
-};
-
 UI.handleLastNEndpoints = function(leavingIds, enteringIds) {
     VideoLayout.onLastNEndpointsChanged(leavingIds, enteringIds);
 };
  */
 UI.setAudioLevel = (id, lvl) => VideoLayout.setAudioLevel(id, lvl);
 
-UI.notifyTokenAuthFailed = function() {
-    messageHandler.showError({
-        descriptionKey: 'dialog.tokenAuthFailed',
-        titleKey: 'dialog.tokenAuthFailedTitle'
-    });
-};
-
 /**
  * Update list of available physical devices.
  */

modules/UI/authentication/AuthHandler.js

-/* global APP */
-import Logger from '@jitsi/logger';
-
-import { openConnection } from '../../../connection';
-import {
-    openAuthDialog,
-    openLoginDialog } from '../../../react/features/authentication/actions.web';
-import {
-    LoginDialog,
-    WaitForOwnerDialog
-} from '../../../react/features/authentication/components';
-import {
-    getTokenAuthUrl,
-    isTokenAuthEnabled
-} from '../../../react/features/authentication/functions';
-import { getReplaceParticipant } from '../../../react/features/base/config/functions';
-import { isDialogOpen } from '../../../react/features/base/dialog/functions';
-import { setJWT } from '../../../react/features/base/jwt/actions';
-import UIUtil from '../util/UIUtil';
-
-import ExternalLoginDialog from './LoginDialog';
-
-
-let externalAuthWindow;
-
-const logger = Logger.getLogger(__filename);
-
-
-/**
- * Authenticate using external service or just focus
- * external auth window if there is one already.
- *
- * @param {JitsiConference} room
- * @param {string} [lockPassword] password to use if the conference is locked
- */
-function doExternalAuth(room, lockPassword) {
-    const config = APP.store.getState()['features/base/config'];
-
-    if (externalAuthWindow) {
-        externalAuthWindow.focus();
-
-        return;
-    }
-
-    if (room.isJoined()) {
-        let getUrl;
-
-        if (isTokenAuthEnabled(config)) {
-            getUrl = Promise.resolve(getTokenAuthUrl(config)(room.getName(), true));
-            initJWTTokenListener(room);
-        } else {
-            getUrl = room.getExternalAuthUrl(true);
-        }
-        getUrl.then(url => {
-            externalAuthWindow = ExternalLoginDialog.showExternalAuthDialog(
-                url,
-                () => {
-                    externalAuthWindow = null;
-                    if (!isTokenAuthEnabled(config)) {
-                        room.join(lockPassword);
-                    }
-                }
-            );
-        });
-    } else if (isTokenAuthEnabled(config)) {
-        redirectToTokenAuthService(room.getName());
-    } else {
-        room.getExternalAuthUrl().then(UIUtil.redirect);
-    }
-}
-
-/**
- * Redirect the user to the token authentication service for the login to be
- * performed. Once complete it is expected that the service will bring the user
- * back with "?jwt={the JWT token}" query parameter added.
- * @param {string} [roomName] the name of the conference room.
- */
-export function redirectToTokenAuthService(roomName) {
-    const config = APP.store.getState()['features/base/config'];
-
-    // FIXME: This method will not preserve the other URL params that were
-    // originally passed.
-    UIUtil.redirect(getTokenAuthUrl(config)(roomName, false));
-}
-
-/**
- * Initializes 'message' listener that will wait for a JWT token to be received
- * from the token authentication service opened in a popup window.
- * @param room the name of the conference room.
- */
-function initJWTTokenListener(room) {
-    /**
-     *
-     */
-    function listener({ data, source }) {
-        if (externalAuthWindow !== source) {
-            logger.warn('Ignored message not coming '
-                + 'from external authnetication window');
-
-            return;
-        }
-
-        let jwt;
-
-        if (data && (jwt = data.jwtToken)) {
-            logger.info('Received JSON Web Token (JWT):', jwt);
-
-            APP.store.dispatch(setJWT(jwt));
-
-            const roomName = room.getName();
-
-            openConnection({
-                retry: false,
-                roomName
-            }).then(connection => {
-                // Start new connection
-                const newRoom = connection.initJitsiConference(
-                    roomName, APP.conference._getConferenceOptions());
-
-                // Authenticate from the new connection to get
-                // the session-ID from the focus, which will then be used
-                // to upgrade current connection's user role
-
-                newRoom.room.moderator.authenticate()
-                .then(() => {
-                    connection.disconnect();
-
-                    // At this point we'll have session-ID stored in
-                    // the settings. It will be used in the call below
-                    // to upgrade user's role
-                    room.room.moderator.authenticate()
-                        .then(() => {
-                            logger.info('User role upgrade done !');
-                            // eslint-disable-line no-use-before-define
-                            unregister();
-                        })
-                        .catch((err, errCode) => {
-                            logger.error('Authentication failed: ',
-                                err, errCode);
-                            unregister();
-                        });
-                })
-                .catch((error, code) => {
-                    unregister();
-                    connection.disconnect();
-                    logger.error(
-                        'Authentication failed on the new connection',
-                        error, code);
-                });
-            }, err => {
-                unregister();
-                logger.error('Failed to open new connection', err);
-            });
-        }
-    }
-
-    /**
-     *
-     */
-    function unregister() {
-        window.removeEventListener('message', listener);
-    }
-
-    if (window.addEventListener) {
-        window.addEventListener('message', listener, false);
-    }
-}
-
-/**
- * Authenticate for the conference.
- * Uses external service for auth if conference supports that.
- * @param {JitsiConference} room
- * @param {string} [lockPassword] password to use if the conference is locked
- */
-function authenticate(room, lockPassword) {
-    const config = APP.store.getState()['features/base/config'];
-
-    if (isTokenAuthEnabled(config) || room.isExternalAuthEnabled()) {
-        doExternalAuth(room, lockPassword);
-    } else {
-        APP.store.dispatch(openLoginDialog());
-    }
-}
-
-/**
- * Notify user that authentication is required to create the conference.
- * @param {JitsiConference} room
- * @param {string} [lockPassword] password to use if the conference is locked
- */
-function requireAuth(room, lockPassword) {
-    if (isDialogOpen(APP.store, WaitForOwnerDialog) || isDialogOpen(APP.store, LoginDialog)) {
-        return;
-    }
-
-    APP.store.dispatch(
-        openAuthDialog(
-        room.getName(), authenticate.bind(null, room, lockPassword))
-    );
-}
-
-/**
- * De-authenticate local user.
- *
- * @param {JitsiConference} room
- * @param {string} [lockPassword] password to use if the conference is locked
- * @returns {Promise}
- */
-function logout(room) {
-    return new Promise(resolve => {
-        room.room.moderator.logout(resolve);
-    }).then(url => {
-        // de-authenticate conference on the fly
-        if (room.isJoined()) {
-            const replaceParticipant = getReplaceParticipant(APP.store.getState());
-
-            room.join(null, replaceParticipant);
-        }
-
-        return url;
-    });
-}
-
-export default {
-    authenticate,
-    logout,
-    requireAuth
-};

modules/UI/authentication/LoginDialog.js

-/* global APP */
-
-export default {
-
-    /**
-     * Show notification that external auth is required (using provided url).
-     * @param {string} url - URL to use for external auth.
-     * @param {function} callback - callback to invoke when auth popup is closed.
-     * @returns auth dialog
-     */
-    showExternalAuthDialog(url, callback) {
-        const dialog = APP.UI.messageHandler.openCenteredPopup(
-            url, 910, 660,
-
-            // On closed
-            callback
-        );
-
-        if (!dialog) {
-            APP.UI.messageHandler.showWarning({
-                descriptionKey: 'dialog.popupError',
-                titleKey: 'dialog.popupErrorTitle'
-            });
-        }
-
-        return dialog;
-    }
-};

modules/UI/util/MessageHandler.js

-/* global APP */
-
-import { showErrorNotification, showWarningNotification } from '../../../react/features/notifications/actions';
-import { NOTIFICATION_TIMEOUT_TYPE } from '../../../react/features/notifications/constants';
-
-const messageHandler = {
-    /**
-     * Opens new popup window for given <tt>url</tt> centered over current
-     * window.
-     *
-     * @param url the URL to be displayed in the popup window
-     * @param w the width of the popup window
-     * @param h the height of the popup window
-     * @param onPopupClosed optional callback function called when popup window
-     *        has been closed.
-     *
-     * @returns {object} popup window object if opened successfully or undefined
-     *          in case we failed to open it(popup blocked)
-     */
-    // eslint-disable-next-line max-params
-    openCenteredPopup(url, w, h, onPopupClosed) {
-        const l = window.screenX + (window.innerWidth / 2) - (w / 2);
-        const t = window.screenY + (window.innerHeight / 2) - (h / 2);
-        const popup = window.open(
-            url, '_blank',
-            String(`top=${t}, left=${l}, width=${w}, height=${h}`));
-
-        if (popup && onPopupClosed) {
-            const pollTimer = window.setInterval(() => {
-                if (popup.closed !== false) {
-                    window.clearInterval(pollTimer);
-                    onPopupClosed();
-                }
-            }, 200);
-        }
-
-        return popup;
-    },
-
-    /**
-     * Shows an error dialog to the user.
-     *
-     * @param {object} props - The properties to pass to the
-     * showErrorNotification action.
-     */
-    showError(props) {
-        APP.store.dispatch(showErrorNotification(props, NOTIFICATION_TIMEOUT_TYPE.LONG));
-    },
-
-    /**
-     * Shows a warning dialog to the user.
-     *
-     * @param {object} props - The properties to pass to the
-     * showWarningNotification action.
-     */
-    showWarning(props) {
-        APP.store.dispatch(showWarningNotification(props, NOTIFICATION_TIMEOUT_TYPE.LONG));
-    }
-};
-
-export default messageHandler;

modules/UI/util/UIUtil.js

         return result;
     },
 
-    /**
-     * Redirects to a given URL.
-     *
-     * @param {string} url - The redirect URL.
-     * NOTE: Currently used to redirect to 3rd party location for
-     * authentication. In most cases redirectWithStoredParams action must be
-     * used instead of this method in order to preserve current URL params.
-     */
-    redirect(url) {
-        window.location.href = url;
-    },
-
     /**
      * Indicates if we're currently in full screen mode.
      *

react/features/app/middlewares.any.ts

 import '../analytics/middleware';
+import '../authentication/middleware';
 import '../av-moderation/middleware';
 import '../base/conference/middleware';
 import '../base/config/middleware';

react/features/app/middlewares.native.ts

-import '../authentication/middleware';
 import '../dynamic-branding/middleware';
 import '../gifs/middleware';
 import '../mobile/audio-mode/middleware';

react/features/app/middlewares.web.ts

-import '../authentication/middleware';
+import '../base/connection/middleware';
 import '../base/i18n/middleware';
 import '../base/devices/middleware';
 import '../base/media/middleware';

react/features/authentication/actionTypes.ts

  */
 export const CANCEL_LOGIN = 'CANCEL_LOGIN';
 
+/**
+ * The type of (redux) action which signals to login.
+ *
+ * {
+ *     type: LOGOUT
+ * }
+ */
+export const LOGIN = 'LOGIN';
+
+/**
+ * The type of (redux) action which signals to logout.
+ *
+ * {
+ *     type: LOGOUT
+ * }
+ */
+export const LOGOUT = 'LOGOUT';
+
 /**
  * The type of (redux) action which signals that the cyclic operation of waiting
  * for conference owner has been aborted.

react/features/authentication/actions.any.ts

 import { IStore } from '../app/types';
 import { checkIfCanJoin } from '../base/conference/actions';
 import { IJitsiConference } from '../base/conference/reducer';
-import { openDialog } from '../base/dialog/actions';
+import { hideDialog, openDialog } from '../base/dialog/actions';
 
 import {
     STOP_WAIT_FOR_OWNER,
     };
 }
 
+/**
+ * Hides an authentication dialog where the local participant
+ * should authenticate.
+ *
+ * @returns {Function}.
+ */
+export function hideLoginDialog() {
+    return hideDialog(LoginDialog);
+}
+
 /**
  * Opens {@link WaitForOnwerDialog}.
  *

react/features/authentication/actions.native.ts

-import { appNavigate } from '../app/actions';
+import { appNavigate } from '../app/actions.native';
 import { IStore } from '../app/types';
 import { conferenceLeft } from '../base/conference/actions';
 import { connectionFailed } from '../base/connection/actions.native';
     };
 }
 
-
+/** .
+ * Redirect to the default location (e.g. Welcome page).
+ *
+ * @returns {Function}
+ */
+export function redirectToDefaultLocation() {
+    return (dispatch: IStore['dispatch']) => dispatch(appNavigate(undefined));
+}

react/features/authentication/actions.web.ts

 import { maybeRedirectToWelcomePage } from '../app/actions.web';
 import { IStore } from '../app/types';
-import { hideDialog, openDialog } from '../base/dialog/actions';
 
 import {
-    CANCEL_LOGIN
+    CANCEL_LOGIN,
+    LOGIN,
+    LOGOUT
 } from './actionTypes';
-import LoginDialog from './components/web/LoginDialog';
-import WaitForOwnerDialog from './components/web/WaitForOwnerDialog';
 
 export * from './actions.any';
 
     };
 }
 
-/**
- * Hides a authentication dialog where the local participant
- * should authenticate.
+/** .
+ * Redirect to the default location (e.g. Welcome page).
  *
- * @returns {Function}.
+ * @returns {Function}
  */
-export function hideLoginDialog() {
-    return hideDialog(LoginDialog);
+export function redirectToDefaultLocation() {
+    return (dispatch: IStore['dispatch']) => dispatch(maybeRedirectToWelcomePage());
 }
 
 /**
- * Shows a notification dialog that authentication is required to create the.
- * Conference.
- * This is used for external auth.
+ * Login.
  *
- * @param {string} room - The room name.
- * @param {Function} onAuthNow - The function to be invoked when external authentication.
- *
- * @returns {Function}.
+ * @returns {{
+ *     type: LOGIN
+ * }}
  */
-export function openAuthDialog(room: String, onAuthNow?: Function) {
-    return openDialog(WaitForOwnerDialog, {
-        room,
-        onAuthNow
-    });
+export function login() {
+    return {
+        type: LOGIN
+    };
 }
 
-
+/**
+ * Logout.
+ *
+ * @returns {{
+ *     type: LOGOUT
+ * }}
+ */
+export function logout() {
+    return {
+        type: LOGOUT
+    };
+}

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

 import { WithTranslation } from 'react-i18next';
 import { connect as reduxConnect } from 'react-redux';
 
-// @ts-expect-error
-import { connect } from '../../../../../connection';
 import { IReduxState, IStore } from '../../../app/types';
 import { IJitsiConference } from '../../../base/conference/reducer';
 import { IConfig } from '../../../base/config/configType';
+import { connect } from '../../../base/connection/actions.web';
 import { toJid } from '../../../base/connection/functions';
 import { translate, translateToHTML } from '../../../base/i18n/functions';
 import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
      */
     dispatch: IStore['dispatch'];
 
-    /**
-     * Invoked when username and password are submitted.
-     */
-    onSuccess: Function;
-
     /**
      * Conference room name.
      */
  */
 interface IState {
 
-    /**
-     * Authentication process starts before joining the conference room.
-     */
-    loginStarted: boolean;
-
     /**
      * The user entered password for the conference.
      */
 
         this.state = {
             username: '',
-            password: '',
-            loginStarted: false
+            password: ''
         };
 
         this._onCancelLogin = this._onCancelLogin.bind(this);
         const {
             _conference: conference,
             _configHosts: configHosts,
-            roomName,
-            onSuccess,
             dispatch
         } = this.props;
         const { password, username } = this.state;
         if (conference) {
             dispatch(authenticateAndUpgradeRole(jid, password, conference));
         } else {
-            this.setState({
-                loginStarted: true
-            });
-
-            connect(jid, password, roomName)
-                .then((connection: any) => {
-                    onSuccess?.(connection);
-                })
-                .catch(() => {
-                    this.setState({
-                        loginStarted: false
-                    });
-                });
+            dispatch(connect(jid, password));
         }
     }
 
             _connecting: connecting,
             t
         } = this.props;
-        const { password, loginStarted, username } = this.state;
+        const { password, username } = this.state;
 
         return (
             <Dialog
                 hideCloseButton = { true }
                 ok = {{
                     disabled: connecting
-                        || loginStarted
                         || !password
                         || !username,
                     translationKey: 'dialog.login'
     return {
         _conference: authRequired || conference,
         _configHosts: configHosts,
-        _connecting: connecting || thenableWithCancel,
+        _connecting: Boolean(connecting) || Boolean(thenableWithCancel),
         _error: connectionError || authenticateAndUpgradeRoleError,
         _progress: progress
     };

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

 import { IStore } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import Dialog from '../../../base/ui/components/web/Dialog';
-import { cancelWaitForOwner } from '../../actions.web';
+import { cancelWaitForOwner, login } from '../../actions.web';
 
 /**
  * The type of the React {@code Component} props of {@link WaitForOwnerDialog}.
      * Redux store dispatch method.
      */
     dispatch: IStore['dispatch'];
-
-    /**
-     * Function to be invoked after click.
-     */
-    onAuthNow?: Function;
 }
 
 /**
      * @returns {void}
      */
     _onIAmHost() {
-        const { onAuthNow } = this.props;
-
-        onAuthNow?.();
+        this.props.dispatch(login());
     }
 
     /**

react/features/authentication/middleware.native.ts → react/features/authentication/middleware.ts

-import { appNavigate } from '../app/actions.native';
 import { IStore } from '../app/types';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_LEFT
 } from '../base/conference/actionTypes';
 import { CONNECTION_ESTABLISHED, CONNECTION_FAILED } from '../base/connection/actionTypes';
+import { hangup } from '../base/connection/actions';
 import { hideDialog } from '../base/dialog/actions';
 import { isDialogOpen } from '../base/dialog/functions';
 import {
     JitsiConnectionErrors
 } from '../base/lib-jitsi-meet';
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { getBackendSafeRoomName } from '../base/util/uri';
+import { showErrorNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+import { openLogoutDialog } from '../settings/actions';
 
 import {
     CANCEL_LOGIN,
+    LOGIN,
+    LOGOUT,
     STOP_WAIT_FOR_OWNER,
     UPGRADE_ROLE_FINISHED,
     WAIT_FOR_OWNER
 } from './actionTypes';
 import {
+    hideLoginDialog,
     openLoginDialog,
     openWaitForOwnerDialog,
+    redirectToDefaultLocation,
     stopWaitForOwner,
-    waitForOwner } from './actions.native';
+    waitForOwner } from './actions';
 import { LoginDialog, WaitForOwnerDialog } from './components';
+import { getTokenAuthUrl, isTokenAuthEnabled } from './functions';
 
 /**
  * Middleware that captures connection or conference failed errors and controls
     switch (action.type) {
     case CANCEL_LOGIN: {
         const { dispatch, getState } = store;
-        const { thenableWithCancel } = getState()['features/authentication'];
+        const state = getState();
+        const { thenableWithCancel } = state['features/authentication'];
 
         thenableWithCancel?.cancel();
 
                 return result;
             }
 
-            // Go back to the app's entry point.
-            _hideLoginDialog(store);
+            dispatch(hideLoginDialog());
 
-            const state = getState();
             const { authRequired, conference } = state['features/base/conference'];
             const { passwordRequired } = state['features/base/connection'];
 
             // NOTE: Despite it's confusing name, `passwordRequired` implies an XMPP
             // connection auth error.
             if ((passwordRequired || authRequired) && !conference) {
-                dispatch(appNavigate(undefined));
+                dispatch(redirectToDefaultLocation());
             }
         }
         break;
         if (_isWaitingForOwner(store)) {
             store.dispatch(stopWaitForOwner());
         }
-        _hideLoginDialog(store);
+        store.dispatch(hideLoginDialog());
         break;
 
     case CONFERENCE_LEFT:
         break;
 
     case CONNECTION_ESTABLISHED:
-        _hideLoginDialog(store);
+        store.dispatch(hideLoginDialog());
         break;
 
     case CONNECTION_FAILED: {
         const { error } = action;
+        const state = store.getState();
+        const { jwt } = state['features/base/jwt'];
 
         if (error
                 && error.name === JitsiConnectionErrors.PASSWORD_REQUIRED
-                && typeof error.recoverable === 'undefined') {
+                && typeof error.recoverable === 'undefined'
+                && !jwt) {
             error.recoverable = true;
-            store.dispatch(openLoginDialog());
+
+            _handleLogin(store);
+        }
+
+        break;
+    }
+
+    case LOGIN: {
+        _handleLogin(store);
+
+        break;
+    }
+
+    case LOGOUT: {
+        const { conference } = store.getState()['features/base/conference'];
+
+        if (!conference) {
+            break;
         }
+
+        store.dispatch(openLogoutDialog(() =>
+            conference.room.moderator.logout(() => store.dispatch(hangup(true)))
+        ));
+
         break;
     }
 
         const { error, progress } = action;
 
         if (!error && progress === 1) {
-            _hideLoginDialog(store);
+            store.dispatch(hideLoginDialog());
         }
         break;
     }
 
         action.waitForOwnerTimeoutID = setTimeout(handler, timeoutMs);
 
-        // The WAIT_FOR_OWNER action is cyclic and we don't want to hide the
+        // The WAIT_FOR_OWNER action is cyclic, and we don't want to hide the
         // login dialog every few seconds.
         isDialogOpen(store, LoginDialog)
             || store.dispatch(openWaitForOwnerDialog());
  * @param {Object} store - The redux store.
  * @returns {void}
  */
-function _clearExistingWaitForOwnerTimeout(
-        { getState }: IStore) {
+function _clearExistingWaitForOwnerTimeout({ getState }: IStore) {
     const { waitForOwnerTimeoutID } = getState()['features/authentication'];
 
     waitForOwnerTimeoutID && clearTimeout(waitForOwnerTimeoutID);
 }
 
-/**
- * Hides {@link LoginDialog} if it's currently displayed.
- *
- * @param {Object} store - The redux store.
- * @returns {void}
- */
-function _hideLoginDialog({ dispatch }: IStore) {
-    dispatch(hideDialog(LoginDialog));
-}
 
 /**
  * Checks if the cyclic "wait for conference owner" task is currently scheduled.
 function _isWaitingForOwner({ getState }: IStore) {
     return Boolean(getState()['features/authentication'].waitForOwnerTimeoutID);
 }
+
+/**
+ * Handles login challenge. Opens login dialog or redirects to token auth URL.
+ *
+ * @param {Store} store - The redux store in which the specified {@code action}
+ * is being dispatched.
+ * @returns {void}
+ */
+function _handleLogin({ dispatch, getState }: IStore) {
+    const state = getState();
+    const config = state['features/base/config'];
+    const room = getBackendSafeRoomName(state['features/base/conference'].room);
+
+    if (isTokenAuthEnabled(config)) {
+        if (typeof APP === 'undefined') {
+            dispatch(showErrorNotification({
+                descriptionKey: 'dialog.tokenAuthUnsupported',
+                titleKey: 'dialog.tokenAuthFailedTitle'
+            }, NOTIFICATION_TIMEOUT_TYPE.LONG));
+
+            dispatch(redirectToDefaultLocation());
+
+            return;
+        }
+
+        // FIXME: This method will not preserve the other URL params that were originally passed.
+        // redirectToTokenAuthService
+        window.location.href = getTokenAuthUrl(config)(room, false);
+    } else {
+        dispatch(openLoginDialog());
+    }
+}

react/features/authentication/middleware.web.ts

-import { maybeRedirectToWelcomePage } from '../app/actions.web';
-import { IStore } from '../app/types';
-import {
-    CONFERENCE_FAILED,
-    CONFERENCE_JOINED,
-    CONFERENCE_LEFT
-} from '../base/conference/actionTypes';
-import { CONNECTION_ESTABLISHED } from '../base/connection/actionTypes';
-import { hideDialog } from '../base/dialog/actions';
-import { isDialogOpen } from '../base/dialog/functions';
-import {
-    JitsiConferenceErrors
-} from '../base/lib-jitsi-meet';
-import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
-
-import {
-    CANCEL_LOGIN,
-    STOP_WAIT_FOR_OWNER,
-    UPGRADE_ROLE_FINISHED,
-    WAIT_FOR_OWNER
-} from './actionTypes';
-import {
-    hideLoginDialog,
-    openWaitForOwnerDialog,
-    stopWaitForOwner
-} from './actions.web';
-import LoginDialog from './components/web/LoginDialog';
-import WaitForOwnerDialog from './components/web/WaitForOwnerDialog';
-
-/**
- * Middleware that captures connection or conference failed errors and controls
- * {@link WaitForOwnerDialog} and {@link LoginDialog}.
- *
- * FIXME Some of the complexity was introduced by the lack of dialog stacking.
- *
- * @param {Store} store - Redux store.
- * @returns {Function}
- */
-MiddlewareRegistry.register(store => next => action => {
-    switch (action.type) {
-
-    case CANCEL_LOGIN: {
-        const { dispatch, getState } = store;
-
-        if (!isDialogOpen(store, WaitForOwnerDialog)) {
-            if (_isWaitingForOwner(store)) {
-                dispatch(openWaitForOwnerDialog());
-
-                return next(action);
-            }
-
-            dispatch(hideLoginDialog());
-
-            const { authRequired, conference } = getState()['features/base/conference'];
-            const { passwordRequired } = getState()['features/base/connection'];
-
-            // Only end the meeting if we are not already inside and trying to upgrade.
-            if ((authRequired && !conference) || passwordRequired) {
-                dispatch(maybeRedirectToWelcomePage());
-            }
-        }
-        break;
-    }
-
-    case CONFERENCE_FAILED: {
-        const { error } = action;
-        let recoverable;
-
-        if (error.name === JitsiConferenceErrors.AUTHENTICATION_REQUIRED) {
-            if (typeof error.recoverable === 'undefined') {
-                error.recoverable = true;
-            }
-            recoverable = error.recoverable;
-        }
-        if (recoverable) {
-            // we haven't migrated all the code from AuthHandler, and we need for now conference.js to trigger
-            // the dialog to pass all required parameters to WaitForOwnerDialog
-            // keep it commented, so we do not trigger sending iqs to jicofo twice
-            // and showing the broken dialog with no handler
-            // store.dispatch(waitForOwner());
-        } else {
-            store.dispatch(stopWaitForOwner());
-        }
-        break;
-    }
-
-    case CONFERENCE_JOINED:
-        store.dispatch(stopWaitForOwner());
-        store.dispatch(hideLoginDialog());
-        break;
-
-    case CONFERENCE_LEFT:
-        store.dispatch(stopWaitForOwner());
-        break;
-
-    case CONNECTION_ESTABLISHED:
-        store.dispatch(hideLoginDialog());
-        break;
-
-    case STOP_WAIT_FOR_OWNER:
-        _clearExistingWaitForOwnerTimeout(store);
-        store.dispatch(hideDialog(WaitForOwnerDialog));
-        break;
-
-    case UPGRADE_ROLE_FINISHED: {
-        const { error, progress } = action;
-
-        if (!error && progress === 1) {
-            store.dispatch(hideLoginDialog());
-        }
-        break;
-    }
-
-    case WAIT_FOR_OWNER: {
-        _clearExistingWaitForOwnerTimeout(store);
-
-        const { handler, timeoutMs }: { handler: () => void; timeoutMs: number; } = action;
-
-        action.waitForOwnerTimeoutID = setTimeout(handler, timeoutMs);
-
-        isDialogOpen(store, LoginDialog)
-            || store.dispatch(openWaitForOwnerDialog());
-        break;
-    }
-    }
-
-    return next(action);
-});
-
-/**
- * Will clear the wait for conference owner timeout handler if any is currently
- * set.
- *
- * @param {Object} store - The redux store.
- * @returns {void}
- */
-function _clearExistingWaitForOwnerTimeout(
-        { getState }: IStore) {
-    const { waitForOwnerTimeoutID } = getState()['features/authentication'];
-
-    waitForOwnerTimeoutID && clearTimeout(waitForOwnerTimeoutID);
-}
-
-/**
- * Checks if the cyclic "wait for conference owner" task is currently scheduled.
- *
- * @param {Object} store - The redux store.
- * @returns {void}
- */
-function _isWaitingForOwner({ getState }: IStore) {
-    return getState()['features/authentication'].waitForOwnerTimeoutID;
-}

react/features/base/conference/actionTypes.ts

  */
 export const E2E_RTT_CHANGED = 'E2E_RTT_CHANGED'
 
+/**
+ * The type of (redux) action which signals that a conference will be initialized.
+ *
+ * {
+ *     type: CONFERENCE_WILL_INIT
+ * }
+ */
+export const CONFERENCE_WILL_INIT = 'CONFERENCE_WILL_INIT';
+
 /**
  * The type of (redux) action which signals that a specific conference will be
  * joined.

react/features/base/conference/actions.ts

 import { createStartMutedConfigurationEvent } from '../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../analytics/functions';
-import { appNavigate } from '../../app/actions';
 import { IReduxState, IStore } from '../../app/types';
 import { endpointMessageReceived } from '../../subtitles/actions.any';
 import { iAmVisitor } from '../../visitors/functions';
 import { getReplaceParticipant } from '../config/functions';
-import { disconnect } from '../connection/actions';
+import { hangup } from '../connection/actions';
 import { JITSI_CONNECTION_CONFERENCE_KEY } from '../connection/constants';
 import { JitsiConferenceEvents, JitsiE2ePingEvents } from '../lib-jitsi-meet';
 import { setAudioMuted, setAudioUnmutePermissions, setVideoMuted, setVideoUnmutePermissions } from '../media/actions';
     CONFERENCE_SUBJECT_CHANGED,
     CONFERENCE_TIMESTAMP_CHANGED,
     CONFERENCE_UNIQUE_ID_SET,
+    CONFERENCE_WILL_INIT,
     CONFERENCE_WILL_JOIN,
     CONFERENCE_WILL_LEAVE,
     DATA_CHANNEL_CLOSED,
     };
 }
 
+/**
+ * Signals the intention of the application to have a conference initialized.
+ *
+ * @returns {{
+ *     type: CONFERENCE_WILL_INIT
+ * }}
+ */
+export function conferenceWillInit() {
+    return {
+        type: CONFERENCE_WILL_INIT
+    };
+}
+
 /**
  * Signals the intention of the application to have the local participant
  * join the specified conference.
  * @returns {Function}
  */
 export function leaveConference() {
-    return async (dispatch: IStore['dispatch']) => {
-
-        // FIXME: these should be unified.
-        if (navigator.product === 'ReactNative') {
-            dispatch(appNavigate(undefined));
-        } else {
-            dispatch(disconnect(true));
-        }
-    };
+    return async (dispatch: IStore['dispatch']) => dispatch(hangup(true));
 }
 
-
 /**
  * Signals that the lock state of a specific JitsiConference changed.
  *

react/features/base/conference/middleware.any.ts

 } from './actionTypes';
 import {
     conferenceFailed,
+    conferenceWillInit,
     conferenceWillLeave,
     createConference,
     leaveConference,
 function _conferenceFailed({ dispatch, getState }: IStore, next: Function, action: AnyAction) {
     const { conference, error } = action;
 
-    if (error.name === JitsiConferenceErrors.REDIRECTED) {
-        if (typeof error.recoverable === 'undefined') {
-            error.recoverable = true;
-        }
-    }
-
     const result = next(action);
     const { enableForcedReload } = getState()['features/base/config'];
 
         break;
     }
     case JitsiConferenceErrors.CONFERENCE_MAX_USERS: {
-        if (typeof APP === 'undefined') {
-            // in case of max users(it can be from a visitor node), let's restore
-            // oldConfig if any as we will be back to the main prosody
-            const newConfig = restoreConferenceOptions(getState);
-
-            if (newConfig) {
-                dispatch(overwriteConfig(newConfig)) // @ts-ignore
-                    .then(dispatch(conferenceWillLeave(conference)))
-                    .then(conference.leave())
-                    .then(dispatch(disconnect()))
-                    .then(dispatch(connect()));
-            }
+        dispatch(showErrorNotification({
+            hideErrorSupportLink: true,
+            descriptionKey: 'dialog.maxUsersLimitReached',
+            titleKey: 'dialog.maxUsersLimitReachedTitle'
+        }, NOTIFICATION_TIMEOUT_TYPE.LONG));
+
+        // In case of max users(it can be from a visitor node), let's restore
+        // oldConfig if any as we will be back to the main prosody.
+        const newConfig = restoreConferenceOptions(getState);
+
+        if (newConfig) {
+            dispatch(overwriteConfig(newConfig)) // @ts-ignore
+                .then(dispatch(conferenceWillLeave(conference)))
+                .then(conference.leave())
+                .then(dispatch(disconnect()))
+                .then(dispatch(connect()));
         }
 
         break;
     case JitsiConferenceErrors.OFFER_ANSWER_FAILED:
         sendAnalytics(createOfferAnswerFailedEvent());
         break;
+
     case JitsiConferenceErrors.REDIRECTED: {
-        // once conference.js is gone this can be removed and both
-        // redirect logics to be merged
-        if (typeof APP === 'undefined') {
-            const newConfig = getVisitorOptions(getState, error.params);
-
-            if (!newConfig) {
-                logger.warn('Not redirected missing params');
-                break;
-            }
+        const newConfig = getVisitorOptions(getState, error.params);
 
-            const [ vnode ] = error.params;
+        if (!newConfig) {
+            logger.warn('Not redirected missing params');
+            break;
+        }
 
-            dispatch(overwriteConfig(newConfig)) // @ts-ignore
-                .then(dispatch(conferenceWillLeave(conference)))
-                .then(conference.leave())
-                .then(dispatch(disconnect()))
-                .then(dispatch(setIAmVisitor(Boolean(vnode))))
+        const [ vnode ] = error.params;
 
-                // we do not clear local tracks on error, so we need to manually clear them
-                .then(dispatch(destroyLocalTracks()))
-                .then(dispatch(connect()));
-        }
+        dispatch(overwriteConfig(newConfig)) // @ts-ignore
+            .then(dispatch(conferenceWillLeave(conference)))
+            .then(dispatch(disconnect()))
+            .then(dispatch(setIAmVisitor(Boolean(vnode))))
+
+            // we do not clear local tracks on error, so we need to manually clear them
+            .then(dispatch(destroyLocalTracks()))
+            .then(() => {
+                dispatch(conferenceWillInit());
+            })
+            .then(dispatch(connect()));
         break;
     }
     }
 
-    if (typeof APP === 'undefined') {
-        !error.recoverable
-        && conference
-        && conference.leave(CONFERENCE_LEAVE_REASONS.UNRECOVERABLE_ERROR).catch((reason: Error) => {
-            // Even though we don't care too much about the failure, it may be
-            // good to know that it happen, so log it (on the info level).
-            logger.info('JitsiConference.leave() rejected with:', reason);
-        });
-    } else {
-        // FIXME: Workaround for the web version. Currently, the creation of the
-        // conference is handled by /conference.js and appropriate failure handlers
-        // are set there.
+    !error.recoverable
+    && conference
+    && conference.leave(CONFERENCE_LEAVE_REASONS.UNRECOVERABLE_ERROR).catch((reason: Error) => {
+        // Even though we don't care too much about the failure, it may be
+        // good to know that it happen, so log it (on the info level).
+        logger.info('JitsiConference.leave() rejected with:', reason);
+    });
+
+    // FIXME: Workaround for the web version. Currently, the creation of the
+    // conference is handled by /conference.js and appropriate failure handlers
+    // are set there.
+    if (typeof APP !== 'undefined') {
         _removeUnloadHandler(getState);
     }
 
  * @private
  * @returns {Object} The value returned by {@code next(action)}.
  */
-function _connectionEstablished({ dispatch }: IStore, next: Function, action: AnyAction) {
+async function _connectionEstablished({ dispatch }: IStore, next: Function, action: AnyAction) {
     const result = next(action);
 
     // FIXME: Workaround for the web version. Currently, the creation of the
     // conference is handled by /conference.js.
-    typeof APP === 'undefined' && dispatch(createConference());
+    if (typeof APP === 'undefined') {
+        dispatch(createConference());
+
+        return result;
+    }
 
     return result;
 }
 function _connectionFailed({ dispatch, getState }: IStore, next: Function, action: AnyAction) {
     _logJwtErrors(action.error.message, getState());
 
+    dispatch(showErrorNotification({
+        descriptionKey: 'dialog.tokenAuthFailed',
+        titleKey: 'dialog.tokenAuthFailedTitle'
+    }, NOTIFICATION_TIMEOUT_TYPE.LONG));
+
     const result = next(action);
 
     _removeUnloadHandler(getState);
 
-    // FIXME: Workaround for the web version. Currently, the creation of the
-    // conference is handled by /conference.js and appropriate failure handlers
-    // are set there.
-    if (typeof APP === 'undefined') {
-        const { connection } = action;
-        const { error } = action;
-
-        forEachConference(getState, conference => {
-            // It feels that it would make things easier if JitsiConference
-            // in lib-jitsi-meet would monitor it's connection and emit
-            // CONFERENCE_FAILED when it's dropped. It has more knowledge on
-            // whether it can recover or not. But because the reload screen
-            // and the retry logic is implemented in the app maybe it can be
-            // left this way for now.
-            if (conference.getConnection() === connection) {
-                // XXX Note that on mobile the error type passed to
-                // connectionFailed is always an object with .name property.
-                // This fact needs to be checked prior to enabling this logic on
-                // web.
-                const conferenceAction
-                    = conferenceFailed(conference, error.name);
-
-                // Copy the recoverable flag if set on the CONNECTION_FAILED
-                // action to not emit recoverable action caused by
-                // a non-recoverable one.
-                if (typeof error.recoverable !== 'undefined') {
-                    conferenceAction.error.recoverable = error.recoverable;
-                }
-
-                dispatch(conferenceAction);
+    const { connection } = action;
+    const { error } = action;
+
+    forEachConference(getState, conference => {
+        // TODO: revisit this
+        // It feels that it would make things easier if JitsiConference
+        // in lib-jitsi-meet would monitor it's connection and emit
+        // CONFERENCE_FAILED when it's dropped. It has more knowledge on
+        // whether it can recover or not. But because the reload screen
+        // and the retry logic is implemented in the app maybe it can be
+        // left this way for now.
+        if (conference.getConnection() === connection) {
+            // XXX Note that on mobile the error type passed to
+            // connectionFailed is always an object with .name property.
+            // This fact needs to be checked prior to enabling this logic on
+            // web.
+            const conferenceAction = conferenceFailed(conference, error.name);
+
+            // Copy the recoverable flag if set on the CONNECTION_FAILED
+            // action to not emit recoverable action caused by
+            // a non-recoverable one.
+            if (typeof error.recoverable !== 'undefined') {
+                conferenceAction.error.recoverable = error.recoverable;
             }
 
-            return true;
-        });
-    }
+            dispatch(conferenceAction);
+        }
+
+        return true;
+    });
 
     return result;
 }

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

     CONFERENCE_FAILED,
     CONFERENCE_JOINED,
     CONFERENCE_JOIN_IN_PROGRESS,
-    CONFERENCE_LEFT, KICKED_OUT
+    CONFERENCE_LEFT,
+    KICKED_OUT
 } from './actionTypes';
 import logger from './logger';
 import './middleware.any';

react/features/base/conference/reducer.ts

 
 export interface IJitsiConferenceRoom {
     locked: boolean;
+    moderator: {
+        logout: Function;
+    };
     myroomjid: string;
     roomjid: string;
 }

react/features/base/connection/actions.any.ts

 import _ from 'lodash';
 
-import { IReduxState } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
+import { setPrejoinDisplayNameRequired } from '../../prejoin/actions.any';
+import { conferenceLeft, conferenceWillLeave } from '../conference/actions';
+import { getCurrentConference } from '../conference/functions';
+import JitsiMeetJS, { JitsiConnectionEvents } from '../lib-jitsi-meet';
 import {
     appendURLParam,
     getBackendSafeRoomName
     CONNECTION_DISCONNECTED,
     CONNECTION_ESTABLISHED,
     CONNECTION_FAILED,
+    CONNECTION_WILL_CONNECT,
     SET_LOCATION_URL
 } from './actionTypes';
+import { JITSI_CONNECTION_URL_KEY } from './constants';
 import logger from './logger';
 
 /**
         locationURL
     };
 }
+
+/**
+ * Opens new connection.
+ *
+ * @param {string} [id] - The XMPP user's ID (e.g. {@code user@server.com}).
+ * @param {string} [password] - The XMPP user's password.
+ * @returns {Function}
+ */
+export function _connectInternal(id?: string, password?: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const options = constructOptions(state);
+        const { locationURL } = state['features/base/connection'];
+        const { jwt } = state['features/base/jwt'];
+
+        const connection = new JitsiMeetJS.JitsiConnection(options.appId, jwt, options);
+
+        connection[JITSI_CONNECTION_URL_KEY] = locationURL;
+
+        dispatch(_connectionWillConnect(connection));
+
+        return new Promise((resolve, reject) => {
+            connection.addEventListener(
+                JitsiConnectionEvents.CONNECTION_DISCONNECTED,
+                _onConnectionDisconnected);
+            connection.addEventListener(
+                JitsiConnectionEvents.CONNECTION_ESTABLISHED,
+                _onConnectionEstablished);
+            connection.addEventListener(
+                JitsiConnectionEvents.CONNECTION_FAILED,
+                _onConnectionFailed);
+
+            /**
+             * Marks the display name for the prejoin screen as required.
+             * This can happen if a user tries to join a room with lobby enabled.
+             */
+            connection.addEventListener(
+                JitsiConnectionEvents.DISPLAY_NAME_REQUIRED,
+                () => dispatch(setPrejoinDisplayNameRequired())
+            );
+
+            /**
+             * Unsubscribe the connection instance from
+             * {@code CONNECTION_DISCONNECTED} and {@code CONNECTION_FAILED} events.
+             *
+             * @returns {void}
+             */
+            function unsubscribe() {
+                connection.removeEventListener(
+                    JitsiConnectionEvents.CONNECTION_DISCONNECTED, _onConnectionDisconnected);
+                connection.removeEventListener(JitsiConnectionEvents.CONNECTION_FAILED, _onConnectionFailed);
+            }
+
+            /**
+             * Dispatches {@code CONNECTION_DISCONNECTED} action when connection is
+             * disconnected.
+             *
+             * @private
+             * @returns {void}
+             */
+            function _onConnectionDisconnected() {
+                unsubscribe();
+                dispatch(connectionDisconnected(connection));
+                resolve(connection);
+            }
+
+            /**
+             * Rejects external promise when connection fails.
+             *
+             * @param {JitsiConnectionErrors} err - Connection error.
+             * @param {string} [message] - Error message supplied by lib-jitsi-meet.
+             * @param {Object} [credentials] - The invalid credentials that were
+             * used to authenticate and the authentication failed.
+             * @param {string} [credentials.jid] - The XMPP user's ID.
+             * @param {string} [credentials.password] - The XMPP user's password.
+             * @param {Object} details - Additional information about the error.
+             * @private
+             * @returns {void}
+             */
+            function _onConnectionFailed( // eslint-disable-line max-params
+                    err: string,
+                    message: string,
+                    credentials: any,
+                    details: Object) {
+                unsubscribe();
+
+                dispatch(connectionFailed(connection, {
+                    credentials,
+                    details,
+                    name: err,
+                    message
+                }));
+
+                reject(err);
+            }
+
+            /**
+             * Resolves external promise when connection is established.
+             *
+             * @private
+             * @returns {void}
+             */
+            function _onConnectionEstablished() {
+                connection.removeEventListener(JitsiConnectionEvents.CONNECTION_ESTABLISHED, _onConnectionEstablished);
+                dispatch(connectionEstablished(connection, Date.now()));
+                resolve(connection);
+            }
+
+            connection.connect({
+                id,
+                password
+            });
+        });
+    };
+}
+
+/**
+ * Create an action for when a connection will connect.
+ *
+ * @param {JitsiConnection} connection - The {@code JitsiConnection} which will
+ * connect.
+ * @private
+ * @returns {{
+ *     type: CONNECTION_WILL_CONNECT,
+ *     connection: JitsiConnection
+ * }}
+ */
+function _connectionWillConnect(connection: Object) {
+    return {
+        type: CONNECTION_WILL_CONNECT,
+        connection
+    };
+}
+
+/**
+ * Closes connection.
+ *
+ * @returns {Function}
+ */
+export function disconnect() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']): Promise<void> => {
+        const state = getState();
+
+        // The conference we have already joined or are joining.
+        const conference_ = getCurrentConference(state);
+
+        // Promise which completes when the conference has been left and the
+        // connection has been disconnected.
+        let promise;
+
+        // Leave the conference.
+        if (conference_) {
+            // In a fashion similar to JitsiConference's CONFERENCE_LEFT event
+            // (and the respective Redux action) which is fired after the
+            // conference has been left, notify the application about the
+            // intention to leave the conference.
+            dispatch(conferenceWillLeave(conference_));
+
+            promise
+                = conference_.leave()
+                .catch((error: Error) => {
+                    logger.warn(
+                        'JitsiConference.leave() rejected with:',
+                        error);
+
+                    // The library lib-jitsi-meet failed to make the
+                    // JitsiConference leave. Which may be because
+                    // JitsiConference thinks it has already left.
+                    // Regardless of the failure reason, continue in
+                    // jitsi-meet as if the leave has succeeded.
+                    dispatch(conferenceLeft(conference_));
+                });
+        } else {
+            promise = Promise.resolve();
+        }
+
+        // Disconnect the connection.
+        const { connecting, connection } = state['features/base/connection'];
+
+        // The connection we have already connected or are connecting.
+        const connection_ = connection || connecting;
+
+        if (connection_) {
+            promise = promise.then(() => connection_.disconnect());
+        } else {
+            logger.info('No connection found while disconnecting.');
+        }
+
+        return promise;
+    };
+}

react/features/base/connection/actions.native.ts

+import { appNavigate } from '../../app/actions.native';
 import { IStore } from '../../app/types';
-import { conferenceLeft, conferenceWillLeave } from '../conference/actions';
-import { getCurrentConference } from '../conference/functions';
-import JitsiMeetJS, { JitsiConnectionEvents } from '../lib-jitsi-meet';
 
-import {
-    CONNECTION_WILL_CONNECT
-} from './actionTypes';
-import {
-    connectionDisconnected,
-    connectionEstablished,
-    connectionFailed,
-    constructOptions
-} from './actions.any';
-import { JITSI_CONNECTION_URL_KEY } from './constants';
-import logger from './logger';
+import { _connectInternal } from './actions.any';
 
 export * from './actions.any';
 
  * @returns {Function}
  */
 export function connect(id?: string, password?: string) {
-    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
-        const state = getState();
-        const options = constructOptions(state);
-        const { locationURL } = state['features/base/connection'];
-        const { jwt } = state['features/base/jwt'];
-        const connection = new JitsiMeetJS.JitsiConnection(options.appId, jwt, options);
-
-        connection[JITSI_CONNECTION_URL_KEY] = locationURL;
-
-        dispatch(_connectionWillConnect(connection));
-
-        connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_DISCONNECTED,
-            _onConnectionDisconnected);
-        connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_ESTABLISHED,
-            _onConnectionEstablished);
-        connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_FAILED,
-            _onConnectionFailed);
-
-        connection.connect({
-            id,
-            password
-        });
-
-        /**
-         * Dispatches {@code CONNECTION_DISCONNECTED} action when connection is
-         * disconnected.
-         *
-         * @private
-         * @returns {void}
-         */
-        function _onConnectionDisconnected() {
-            unsubscribe();
-            dispatch(connectionDisconnected(connection));
-        }
-
-        /**
-         * Resolves external promise when connection is established.
-         *
-         * @private
-         * @returns {void}
-         */
-        function _onConnectionEstablished() {
-            connection.removeEventListener(
-                JitsiConnectionEvents.CONNECTION_ESTABLISHED,
-                _onConnectionEstablished);
-            dispatch(connectionEstablished(connection, Date.now()));
-        }
-
-        /**
-         * Rejects external promise when connection fails.
-         *
-         * @param {JitsiConnectionErrors} err - Connection error.
-         * @param {string} [msg] - Error message supplied by lib-jitsi-meet.
-         * @param {Object} [credentials] - The invalid credentials that were
-         * used to authenticate and the authentication failed.
-         * @param {string} [credentials.jid] - The XMPP user's ID.
-         * @param {string} [credentials.password] - The XMPP user's password.
-         * @param {Object} details - Additional information about the error.
-         * @private
-         * @returns {void}
-         */
-        function _onConnectionFailed( // eslint-disable-line max-params
-                err: string,
-                msg: string,
-                credentials: any,
-                details: Object) {
-            unsubscribe();
-            dispatch(
-                connectionFailed(
-                    connection, {
-                        credentials,
-                        details,
-                        name: err,
-                        message: msg
-                    }
-                ));
-        }
-
-        /**
-         * Unsubscribe the connection instance from
-         * {@code CONNECTION_DISCONNECTED} and {@code CONNECTION_FAILED} events.
-         *
-         * @returns {void}
-         */
-        function unsubscribe() {
-            connection.removeEventListener(
-                JitsiConnectionEvents.CONNECTION_DISCONNECTED,
-                _onConnectionDisconnected);
-            connection.removeEventListener(
-                JitsiConnectionEvents.CONNECTION_FAILED,
-                _onConnectionFailed);
-        }
-    };
-}
-
-/**
- * Create an action for when a connection will connect.
- *
- * @param {JitsiConnection} connection - The {@code JitsiConnection} which will
- * connect.
- * @private
- * @returns {{
- *     type: CONNECTION_WILL_CONNECT,
- *     connection: JitsiConnection
- * }}
- */
-function _connectionWillConnect(connection: Object) {
-    return {
-        type: CONNECTION_WILL_CONNECT,
-        connection
-    };
+    return (dispatch: IStore['dispatch']) => dispatch(_connectInternal(id, password));
 }
 
 /**
- * Closes connection.
+ * Hangup.
  *
- * @param {boolean} _ - Used in web.
+ * @param {boolean} [_requestFeedback] - Whether to attempt showing a
+ * request for call feedback.
  * @returns {Function}
  */
-export function disconnect(_?: boolean) {
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-    return (dispatch: IStore['dispatch'], getState: IStore['getState']): Promise<void> => {
-        const state = getState();
-
-        // The conference we have already joined or are joining.
-        const conference_ = getCurrentConference(state);
-
-        // Promise which completes when the conference has been left and the
-        // connection has been disconnected.
-        let promise;
-
-        // Leave the conference.
-        if (conference_) {
-            // In a fashion similar to JitsiConference's CONFERENCE_LEFT event
-            // (and the respective Redux action) which is fired after the
-            // conference has been left, notify the application about the
-            // intention to leave the conference.
-            dispatch(conferenceWillLeave(conference_));
-
-            promise
-                = conference_.leave()
-                    .catch((error: Error) => {
-                        logger.warn(
-                            'JitsiConference.leave() rejected with:',
-                            error);
-
-                        // The library lib-jitsi-meet failed to make the
-                        // JitsiConference leave. Which may be because
-                        // JitsiConference thinks it has already left.
-                        // Regardless of the failure reason, continue in
-                        // jitsi-meet as if the leave has succeeded.
-                        dispatch(conferenceLeft(conference_));
-                    });
-        } else {
-            promise = Promise.resolve();
-        }
-
-        // Disconnect the connection.
-        const { connecting, connection } = state['features/base/connection'];
-
-        // The connection we have already connected or are connecting.
-        const connection_ = connection || connecting;
-
-        if (connection_) {
-            promise = promise.then(() => connection_.disconnect());
-        } else {
-            logger.info('No connection found while disconnecting.');
-        }
-
-        return promise;
-    };
+export function hangup(_requestFeedback = false) {
+    return (dispatch: IStore['dispatch']) => dispatch(appNavigate(undefined));
 }

react/features/base/connection/actions.web.ts

+// @ts-expect-error
+import { jitsiLocalStorage } from '@jitsi/js-utils';
+
 import { IStore } from '../../app/types';
+import { getCustomerDetails } from '../../jaas/actions.any';
+import { getJaasJWT, isVpaasMeeting } from '../../jaas/functions';
 import { showWarningNotification } from '../../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
 import { stopLocalVideoRecording } from '../../recording/actions.any';
 import LocalRecordingManager from '../../recording/components/Recording/LocalRecordingManager.web';
-import { configureInitialDevices } from '../devices/actions';
-import { getBackendSafeRoomName } from '../util/uri';
+import { setJWT } from '../jwt/actions';
 
-export {
-    connectionDisconnected,
-    connectionEstablished,
-    connectionFailed,
-    setLocationURL
-} from './actions.any';
-import logger from './logger';
+import { _connectInternal } from './actions.any';
 
 export * from './actions.any';
 
 /**
  * Opens new connection.
  *
- * @returns {Promise<JitsiConnection>}
+ * @param {string} [id] - The XMPP user's ID (e.g. {@code user@server.com}).
+ * @param {string} [password] - The XMPP user's password.
+ * @returns {Function}
  */
-export function connect() {
+export function connect(id?: string, password?: string) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
-        const room = getBackendSafeRoomName(getState()['features/base/conference'].room);
+        const state = getState();
+        const { jwt } = state['features/base/jwt'];
+        const { iAmRecorder, iAmSipGateway } = state['features/base/config'];
+
+        if (!iAmRecorder && !iAmSipGateway && isVpaasMeeting(state)) {
+            return dispatch(getCustomerDetails())
+                .then(() => {
+                    if (!jwt) {
+                        return getJaasJWT(state);
+                    }
+                })
+                .then(j => j && dispatch(setJWT(j)))
+                .then(() => _connectInternal(id, password));
+        }
+
+        // used by jibri
+        const usernameOverride = jitsiLocalStorage.getItem('xmpp_username_override');
+        const passwordOverride = jitsiLocalStorage.getItem('xmpp_password_override');
+
+        if (usernameOverride && usernameOverride.length > 0) {
+            id = usernameOverride; // eslint-disable-line no-param-reassign
+        }
+        if (passwordOverride && passwordOverride.length > 0) {
+            password = passwordOverride; // eslint-disable-line no-param-reassign
+        }
 
-        // XXX For web based version we use conference initialization logic
-        // from the old app (at the moment of writing).
-        return dispatch(configureInitialDevices()).then(
-            () => APP.conference.init({
-                roomName: room
-            }).catch((error: Error) => {
-                APP.API.notifyConferenceLeft(APP.conference.roomName);
-                logger.error(error);
-            }));
+        return dispatch(_connectInternal(id, password));
     };
 }
 
 /**
  * Closes connection.
  *
- * @param {boolean} [requestFeedback] - Whether or not to attempt showing a
+ * @param {boolean} [requestFeedback] - Whether to attempt showing a
  * request for call feedback.
  * @returns {Function}
  */
-export function disconnect(requestFeedback = false) {
-    // XXX For web based version we use conference hanging up logic from the old
-    // app.
+export function hangup(requestFeedback = false) {
+    // XXX For web based version we use conference hanging up logic from the old app.
     return async (dispatch: IStore['dispatch']) => {
         if (LocalRecordingManager.isRecordingLocally()) {
             dispatch(stopLocalVideoRecording());

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

+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
+
+import { CONNECTION_WILL_CONNECT } from './actionTypes';
+
+/**
+ * The feature announced so we can distinguish jibri participants.
+ *
+ * @type {string}
+ */
+export const DISCO_JIBRI_FEATURE = 'http://jitsi.org/protocol/jibri';
+
+MiddlewareRegistry.register(({ getState }) => next => action => {
+    switch (action.type) {
+    case CONNECTION_WILL_CONNECT: {
+        const { connection } = action;
+        const { iAmRecorder } = getState()['features/base/config'];
+
+        if (iAmRecorder) {
+            connection.addFeature(DISCO_JIBRI_FEATURE);
+        }
+
+        // @ts-ignore
+        APP.connection = connection;
+
+        break;
+    }
+    }
+
+    return next(action);
+});

react/features/base/tracks/actions.any.ts

         const promises = [];
 
         // The following executes on React Native only at the time of this
-        // writing. The effort to port Web's createInitialLocalTracksAndConnect
+        // writing. The effort to port Web's createInitialLocalTracks
         // is significant and that's where the function createLocalTracksF got
         // born. I started with the idea a porting so that we could inherit the
         // ability to getUserMedia for audio only or video only if getUserMedia

react/features/conference/actions.web.ts

 import { IStore } from '../app/types';
+import { configureInitialDevices } from '../base/devices/actions.web';
 import { getParticipantDisplayName } from '../base/participants/functions';
+import { getBackendSafeRoomName } from '../base/util/uri';
 import { showNotification } from '../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE, NOTIFICATION_TYPE } from '../notifications/constants';
 
 import { DISMISS_CALENDAR_NOTIFICATION } from './actionTypes';
+import logger from './logger';
 
 /**
  * Notify that we've been kicked out of the conference.
         type: DISMISS_CALENDAR_NOTIFICATION
     };
 }
+
+/**
+ * Init.
+ *
+ * @returns {Promise<JitsiConnection>}
+ */
+export function init() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const room = getBackendSafeRoomName(getState()['features/base/conference'].room);
+
+        // XXX For web based version we use conference initialization logic
+        // from the old app (at the moment of writing).
+        return dispatch(configureInitialDevices()).then(
+            () => APP.conference.init({
+                roomName: room
+            }).catch((error: Error) => {
+                APP.API.notifyConferenceLeft(APP.conference.roomName);
+                logger.error(error);
+            }));
+    };
+}

react/features/conference/components/web/Conference.tsx

 import VideoLayout from '../../../../../modules/UI/videolayout/VideoLayout';
 import { IReduxState, IStore } from '../../../app/types';
 import { getConferenceNameForTitle } from '../../../base/conference/functions';
-import { connect, disconnect } from '../../../base/connection/actions.web';
+import { hangup } from '../../../base/connection/actions.web';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import { setColorAlpha } from '../../../base/util/helpers';
 import Toolbox from '../../../toolbox/components/web/Toolbox';
 import { LAYOUT_CLASSNAMES } from '../../../video-layout/constants';
 import { getCurrentLayout } from '../../../video-layout/functions.any';
+import { init } from '../../actions.web';
 import { maybeShowSuboptimalExperienceNotification } from '../../functions.web';
 import {
     AbstractConference,
         FULL_SCREEN_EVENTS.forEach(name =>
             document.removeEventListener(name, this._onFullScreenChange));
 
-        APP.conference.isJoined() && this.props.dispatch(disconnect());
+        APP.conference.isJoined() && this.props.dispatch(hangup());
     }
 
     /**
 
         const { dispatch, t } = this.props;
 
-        dispatch(connect());
+        dispatch(init());
 
         maybeShowSuboptimalExperienceNotification(dispatch, t);
     }

react/features/prejoin/actions.any.ts

+import {
+    SET_PREJOIN_DISPLAY_NAME_REQUIRED
+} from './actionTypes';
+
+/**
+ * Action used to set the stance of the display name.
+ *
+ * @returns {Object}
+ */
+export function setPrejoinDisplayNameRequired() {
+    return {
+        type: SET_PREJOIN_DISPLAY_NAME_REQUIRED
+    };
+}

react/features/prejoin/actions.web.ts

 import { IStore } from '../app/types';
 import { updateConfig } from '../base/config/actions';
 import { getDialOutStatusUrl, getDialOutUrl } from '../base/config/functions';
+import { connect } from '../base/connection/actions';
 import { browser } from '../base/lib-jitsi-meet';
 import { createLocalTrack } from '../base/lib-jitsi-meet/functions';
 import { MEDIA_TYPE } from '../base/media/constants';
     SET_JOIN_BY_PHONE_DIALOG_VISIBLITY,
     SET_PRECALL_TEST_RESULTS,
     SET_PREJOIN_DEVICE_ERRORS,
-    SET_PREJOIN_DISPLAY_NAME_REQUIRED,
     SET_PREJOIN_PAGE_VISIBILITY,
     SET_SKIP_PREJOIN_RELOAD
 } from './actionTypes';
  */
 const STATUS_REQ_CAP = 45;
 
+export * from './actions.any';
+
 /**
  * Polls for status change after dial out.
  * Changes dialog message based on response, closes the dialog if there is an error,
             dispatch(setJoiningInProgress(true));
         }
 
-        const state = getState();
-        let localTracks = getLocalTracks(state['features/base/tracks']);
-
         options && dispatch(updateConfig(options));
 
-        // Do not signal audio/video tracks if the user joins muted.
-        for (const track of localTracks) {
-            // Always add the audio track on Safari because of a known issue where audio playout doesn't happen
-            // if the user joins audio and video muted.
-            if (track.muted
-                && !(browser.isWebKitBased() && track.jitsiTrack && track.jitsiTrack.getType() === MEDIA_TYPE.AUDIO)) {
-                try {
-                    await dispatch(replaceLocalTrack(track.jitsiTrack, null));
-                } catch (error) {
-                    logger.error(`Failed to replace local track (${track.jitsiTrack}) with null: ${error}`);
+        dispatch(connect()).then(async () => {
+            // TODO keep this here till we move tracks and conference management from
+            // conference.js to react.
+            const state = getState();
+            let localTracks = getLocalTracks(state['features/base/tracks']);
+
+            // Do not signal audio/video tracks if the user joins muted.
+            for (const track of localTracks) {
+                // Always add the audio track on Safari because of a known issue where audio playout doesn't happen
+                // if the user joins audio and video muted.
+                if (track.muted && !(browser.isWebKitBased() && track.jitsiTrack
+                        && track.jitsiTrack.getType() === MEDIA_TYPE.AUDIO)) {
+                    try {
+                        await dispatch(replaceLocalTrack(track.jitsiTrack, null));
+                    } catch (error) {
+                        logger.error(`Failed to replace local track (${track.jitsiTrack}) with null: ${error}`);
+                    }
                 }
             }
-        }
 
-        // Re-fetch the local tracks after muted tracks have been removed above.
-        // This is needed, because the tracks are effectively disposed by the replaceLocalTrack and should not be used
-        // anymore.
-        localTracks = getLocalTracks(getState()['features/base/tracks']);
+            // Re-fetch the local tracks after muted tracks have been removed above.
+            // This is needed, because the tracks are effectively disposed by the replaceLocalTrack and should not be
+            // used anymore.
+            localTracks = getLocalTracks(getState()['features/base/tracks']);
 
-        const jitsiTracks = localTracks.map((t: any) => t.jitsiTrack);
+            const jitsiTracks = localTracks.map((t: any) => t.jitsiTrack);
 
-        APP.conference.prejoinStart(jitsiTracks);
+            APP.conference.startConference(jitsiTracks).catch(logger.error);
+        });
     };
 }
 
     };
 }
 
-/**
- * Action used to set the stance of the display name.
- *
- * @returns {Object}
- */
-export function setPrejoinDisplayNameRequired() {
-    return {
-        type: SET_PREJOIN_DISPLAY_NAME_REQUIRED
-    };
-}
-
 /**
  * Action used to set the dial out number.
  *

react/features/room-lock/middleware.ts

 import { hideDialog } from '../base/dialog/actions';
 import { JitsiConferenceErrors } from '../base/lib-jitsi-meet';
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
-import { showNotification } from '../notifications/actions';
+import { showErrorNotification, showNotification } from '../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 
 import { _openPasswordRequiredPrompt } from './actions';
             descriptionKey = 'dialog.lockMessage';
             titleKey = 'dialog.lockTitle';
         }
-        APP.UI.messageHandler.showError({
+        APP.store.dispatch(showErrorNotification({
             descriptionKey,
             titleKey
-        });
+        }, NOTIFICATION_TIMEOUT_TYPE.LONG));
     }
 
     return next(action);

react/features/settings/actions.native.ts

+/**
+ * Opens {@code LogoutDialog}.
+ *
+ * @param {Function} _onLogout - The event in {@code LogoutDialog} that should be
+ *  enabled on click.
+ * @returns {Function}
+ */
+export function openLogoutDialog(_onLogout: Function): any {
+    // this is available only for web at the moment
+}

react/features/settings/components/web/ProfileTab.tsx

 import { withStyles } from '@mui/styles';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
-// @ts-expect-error
-import UIEvents from '../../../../../service/UI/UIEvents';
 import { createProfilePanelButtonEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
+import { IStore } from '../../../app/types';
+import { login, logout } from '../../../authentication/actions.web';
 import Avatar from '../../../base/avatar/components/Avatar';
 import AbstractDialogTab, {
     IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import Input from '../../../base/ui/components/web/Input';
-import { openLogoutDialog } from '../../actions';
 
 /**
  * The type of the React {@code Component} props of {@link ProfileTab}.
 export interface IProps extends AbstractDialogTabProps, WithTranslation {
 
     /**
-     * Whether or not server-side authentication is available.
+     * Whether server-side authentication is available.
      */
     authEnabled: boolean;
 
      */
     classes: any;
 
+    /**
+     * Invoked to change the configured calendar integration.
+     */
+    dispatch: IStore['dispatch'];
+
     /**
      * The display name to display for the local participant.
      */
         if (this.props.authLogin) {
             sendAnalytics(createProfilePanelButtonEvent('logout.button'));
 
-            APP.store.dispatch(openLogoutDialog(
-                () => APP.UI.emitEvent(UIEvents.LOGOUT)
-            ));
+            this.props.dispatch(logout());
         } else {
             sendAnalytics(createProfilePanelButtonEvent('login.button'));
 
-            APP.UI.emitEvent(UIEvents.AUTH_CLICKED);
+            this.props.dispatch(login());
         }
     }
 
     }
 }
 
-export default withStyles(styles)(translate(ProfileTab));
+export default withStyles(styles)(translate(connect()(ProfileTab)));

react/features/video-layout/middleware.web.ts

 // @ts-expect-error
 import VideoLayout from '../../../modules/UI/videolayout/VideoLayout.js';
-import { CONFERENCE_WILL_LEAVE } from '../base/conference/actionTypes';
+import { CONFERENCE_WILL_INIT, CONFERENCE_WILL_LEAVE } from '../base/conference/actionTypes';
 import { MEDIA_TYPE } from '../base/media/constants';
 import { PARTICIPANT_JOINED } from '../base/participants/actionTypes';
 import { getLocalParticipant } from '../base/participants/functions';
     const result = next(action);
 
     switch (action.type) {
+    case CONFERENCE_WILL_INIT:
+        // Reset VideoLayout. It's destroyed on CONFERENCE_WILL_LEAVE so re-initialize it.
+        VideoLayout.initLargeVideo();
+        VideoLayout.resizeVideoArea();
+        break;
     case CONFERENCE_WILL_LEAVE:
         VideoLayout.reset();
         break;

service/UI/UIEvents.js

      */
     TOGGLE_FULLSCREEN: 'UI.toogle_fullscreen',
     FULLSCREEN_TOGGLED: 'UI.fullscreen_toggled',
-    AUTH_CLICKED: 'UI.auth_clicked',
 
     /**
      * Notifies that the audio only mode was toggled.
     TOGGLE_FILMSTRIP: 'UI.toggle_filmstrip',
 
     HANGUP: 'UI.hangup',
-    LOGOUT: 'UI.logout',
     VIDEO_DEVICE_CHANGED: 'UI.video_device_changed',
     AUDIO_DEVICE_CHANGED: 'UI.audio_device_changed',