feat(prejoin): Add name from jwt to prejoin screen

react/features/base/jwt/functions.js

 /* @flow */
 
+import jwtDecode from 'jwt-decode';
+
 import { parseURLParams } from '../util';
 
 /**
 export function parseJWTFromURLParams(url: URL = window.location) {
     return parseURLParams(url, true, 'search').jwt;
 }
+
+/**
+ * Returns the user name after decoding the jwt.
+ *
+ * @param {Object} state - The app state.
+ * @returns {string}
+ */
+export function getJwtName(state: Object) {
+    const jwtData = jwtDecode(state['features/base/jwt'].jwt);
+
+    return jwtData?.context?.user?.name || '';
+}

react/features/base/settings/middleware.js

 // @flow
 import _ from 'lodash';
 
+import { PREJOIN_INITIALIZED } from '../../prejoin/actionTypes';
 import { APP_WILL_MOUNT } from '../app';
 import { setAudioOnly } from '../audio-only';
 import { SET_LOCATION_URL } from '../connection/actionTypes'; // minimize imports to avoid circular imports
+import { getJwtName } from '../jwt/functions';
 import { getLocalParticipant, participantUpdated } from '../participants';
 import { MiddlewareRegistry } from '../redux';
 import { parseURLParams } from '../util';
     case APP_WILL_MOUNT:
         _initializeCallIntegration(store);
         break;
+    case PREJOIN_INITIALIZED: {
+        _maybeUpdateDisplayName(store);
+        break;
+    }
     case SETTINGS_UPDATED:
         _maybeHandleCallIntegrationChange(action);
         _maybeSetAudioOnly(store, action);
     }
 }
 
+/**
+ * Updates the display name to the one in JWT if there is one.
+ *
+ * @param {Store} store - The redux store.
+ * @private
+ * @returns {void}
+ */
+function _maybeUpdateDisplayName({ dispatch, getState }) {
+    const state = getState();
+    const hasJwt = Boolean(state['features/base/jwt'].jwt);
+
+    if (hasJwt) {
+        const displayName = getJwtName(state);
+
+        dispatch(updateSettings({
+            displayName
+        }));
+    }
+}
+
 /**
  * Updates the local participant according to settings changes.
  *

react/features/prejoin/actionTypes.js

  */
 export const PREJOIN_START_CONFERENCE = 'PREJOIN_START_CONFERENCE';
 
+/**
+ * Action type to signal that prejoin page was initialized.
+ */
+export const PREJOIN_INITIALIZED = 'PREJOIN_INITIALIZED';
+
 /**
  * Action type to set the status of the device.
  */

react/features/prejoin/actions.js

 import { showErrorNotification } from '../notifications';
 
 import {
+    PREJOIN_INITIALIZED,
     PREJOIN_START_CONFERENCE,
     SET_DEVICE_STATUS,
     SET_DIALOUT_COUNTRY,
 export function initPrejoin(tracks: Object[], errors: Object) {
     return async function(dispatch: Function) {
         dispatch(setPrejoinDeviceErrors(errors));
-
+        dispatch(prejoinInitialized());
 
         tracks.forEach(track => dispatch(trackAdded(track)));
     };
     };
 }
 
+/**
+ * Action used to signal that the prejoin page has been initialized.
+ *
+ * @returns {Object}
+ */
+function prejoinInitialized() {
+    return {
+        type: PREJOIN_INITIALIZED
+    };
+}
+
 /**
  * Creates a new audio track based on a device id and replaces the current one.
  *