feat(config): Add config option for making display name read only

config.js

     // When 'true', it shows an intermediate page before joining, where the user can configure their devices.
     // prejoinPageEnabled: false,
 
+    // When 'true', the user cannot edit the display name.
+    // (Mainly useful when used in conjuction with the JWT so the JWT name becomes read only.)
+    // readOnlyName: false,
+
     // If etherpad integration is enabled, setting this to true will
     // automatically open the etherpad when a participant joins.  This
     // does not affect the mobile app since opening an etherpad

react/features/base/config/configWhitelist.js

     'requireDisplayName',
     'remoteVideoMenu',
     'roomPasswordNumberOfDigits',
+    'readOnlyName',
     'replaceParticipant',
     'resolution',
     'startAudioMuted',

react/features/base/config/functions.any.js

     return configJSON;
 }
 
+/**
+ * Selector for determining if the display name is read only.
+ *
+ * @param {Object} state - The state of the app.
+ * @returns {boolean}
+ */
+export function isNameReadOnly(state: Object): boolean {
+    return state['features/base/config'].disableProfile
+        || state['features/base/config'].readOnlyName;
+}
+
+
 /**
  * Restores a Jitsi Meet config.js from {@code localStorage} if it was
  * previously downloaded from a specific {@code baseURL} and stored with

react/features/base/premeeting/components/web/InputField.js

      */
     placeHolder: string,
 
+    /**
+     * Whether the input is read only or not.
+     */
+    readOnly?: boolean,
+
     /**
      * The field type (e.g. text, password...etc).
      */
                 onFocus = { this._onFocus }
                 onKeyDown = { this._onKeyDown }
                 placeholder = { this.props.placeHolder }
+                readOnly = { this.props.readOnly }
                 type = { this.props.type }
                 value = { this.state.value } />
         );

react/features/filmstrip/components/web/Thumbnail.js

 import { createScreenSharingIssueEvent, sendAnalytics } from '../../../analytics';
 import { AudioLevelIndicator } from '../../../audio-level-indicator';
 import { Avatar } from '../../../base/avatar';
+import { isNameReadOnly } from '../../../base/config';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { MEDIA_TYPE, VideoTrack } from '../../../base/media';
  */
 export type Props = {|
 
+    /**
+     * If the display name is editable or not.
+     */
+    _allowEditing: boolean,
+
     /**
      * The audio track related to the participant.
      */
      */
     _disableLocalVideoFlip: boolean,
 
-    /**
-     * Indicates whether the profile functionality is disabled.
-     */
-    _disableProfile: boolean,
-
     /**
      * The display mode of the thumbnail.
      */
      */
     _renderLocalParticipant() {
         const {
+            _allowEditing,
             _defaultLocalDisplayName,
             _disableLocalVideoFlip,
             _isMobile,
             _isMobilePortrait,
             _isScreenSharing,
             _localFlipX,
-            _disableProfile,
             _participant,
             _videoTrack
         } = this.props;
                     className = 'displayNameContainer'
                     onClick = { onClick }>
                     <DisplayName
-                        allowEditing = { !_disableProfile }
+                        allowEditing = { _allowEditing }
                         displayNameSuffix = { _defaultLocalDisplayName }
                         elementID = 'localDisplayName'
                         participantID = { id } />
     const {
         startSilent,
         disableLocalVideoFlip,
-        disableProfile,
         iAmRecorder,
         iAmSipGateway
     } = state['features/base/config'];
     }
 
     return {
+        _allowEditing: !isNameReadOnly(state),
         _audioTrack,
         _connectionIndicatorAutoHideEnabled:
         Boolean(state['features/base/config'].connectionIndicators?.autoHide ?? true),
         _currentLayout,
         _defaultLocalDisplayName: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
         _disableLocalVideoFlip: Boolean(disableLocalVideoFlip),
-        _disableProfile: disableProfile,
         _isHidden: isLocal && iAmRecorder && !iAmSipGateway,
         _isAudioOnly: Boolean(state['features/base/audio-only'].enabled),
         _isCurrentlyOnLargeVideo: state['features/large-video']?.participantId === id,

react/features/prejoin/components/Prejoin.js

 import React, { Component } from 'react';
 
 import { getRoomName } from '../../base/conference';
+import { isNameReadOnly } from '../../base/config';
 import { translate } from '../../base/i18n';
 import { Icon, IconArrowDown, IconArrowUp, IconPhone, IconVolumeOff } from '../../base/icons';
 import { isVideoMutedByUser } from '../../base/media';
      */
     updateSettings: Function,
 
+    /**
+     * Whether the name input should be read only or not.
+     */
+    readOnlyName: boolean,
+
     /**
      * The name of the meeting that is about to be joined.
      */
             joinConference,
             joinConferenceWithoutAudio,
             name,
+            readOnlyName,
             showCameraPreview,
             showDialog,
             t,
                         onChange = { _setName }
                         onSubmit = { joinConference }
                         placeHolder = { t('dialog.enterDisplayName') }
+                        readOnly = { readOnlyName }
                         value = { name } />
 
                     {showError && <div
         showDialog: isJoinByPhoneDialogVisible(state),
         showErrorOnJoin,
         hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),
+        readOnlyName: isNameReadOnly(state),
         showCameraPreview: !isVideoMutedByUser(state),
         videoTrack: getLocalJitsiVideoTrack(state)
     };

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

      */
     email: string,
 
+    /**
+     * If the display name is read only.
+     */
+    readOnlyName: boolean,
+
     /**
      * Invoked to obtain translated strings.
      */
             authEnabled,
             displayName,
             email,
+            readOnlyName,
             t
         } = this.props;
 
                             autoComplete = 'name'
                             compact = { true }
                             id = 'setDisplayName'
+                            isReadOnly = { readOnlyName }
                             label = { t('profile.setDisplayNameLabel') }
                             onChange = { this._onDisplayNameChange }
                             placeholder = { t('settings.name') }

react/features/settings/functions.js

 // @flow
 
+import { isNameReadOnly } from '../base/config';
 import { SERVER_URL_CHANGE_ENABLED, getFeatureFlag } from '../base/flags';
 import { i18next, DEFAULT_LANGUAGE, LANGUAGES } from '../base/i18n';
 import { createLocalTrack } from '../base/lib-jitsi-meet/functions';
         authEnabled: Boolean(conference && authEnabled),
         authLogin,
         displayName: localParticipant.name,
-        email: localParticipant.email
+        email: localParticipant.email,
+        readOnlyName: isNameReadOnly(state)
     };
 }