fix(config): Add separate entries for the e2ee labels

config.js

@@ -868,7 +868,7 @@ var config = {
      disableRemoteControl
      displayJids
      externalConnectUrl
-     e2eeLabel
+     e2eeLabels
      firefox_fake_device
      googleApiApplicationClientID
      iAmRecorder

lang/main.json

@@ -210,11 +210,8 @@
         "displayNameRequired": "Hi! What’s your name?",
         "done": "Done",
         "e2eeDescription": "End-to-End Encryption is currently EXPERIMENTAL. Please keep in mind that turning on end-to-end encryption will effectively disable server-side provided services such as: phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.",
-        "e2eeDescriptionCustom": "{{label}} is currently EXPERIMENTAL. Please keep in mind that turning on {{label}} will effectively disable server-side provided services such as: phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.",
         "e2eeLabel": "Enable End-to-End Encryption",
-        "e2eeLabelCustom": "Enable {{label}}",
         "e2eeWarning": "WARNING: Not all participants in this meeting seem to have support for End-to-End encryption. If you enable it they won't be able to see nor hear you.",
-      "e2eeWarningCustom": "WARNING: Not all participants in this meeting seem to have support for {{label}}. If you enable it they won't be able to see nor hear you.",
         "enterDisplayName": "Enter your name here",
         "embedMeeting": "Embed meeting",
         "error": "Error",

react/features/base/config/configWhitelist.js

@@ -110,7 +110,7 @@ export default [
     'doNotStoreRoom',
     'doNotFlipLocalVideo',
     'dropbox',
-    'e2eeLabel',
+    'e2eeLabels',
     'e2eping',
     'enableDisplayNameInStats',
     'enableEmailInStats',

react/features/e2ee/components/AbstractE2EELabel.js

@@ -3,6 +3,11 @@
 
 export type Props = {
 
+    /**
+     * Custom e2ee labels.
+     */
+    _e2eeLabels?: Object;
+
     /**
      * True if the label needs to be rendered, false otherwise.
      */
@@ -23,6 +28,7 @@ export type Props = {
  */
 export function _mapStateToProps(state: Object) {
     return {
+        _e2eeLabels: state['features/base/config'].e2eeLabels,
         _showLabel: state['features/e2ee'].everyoneEnabledE2EE
     };
 }

react/features/e2ee/components/E2EELabel.js

@@ -28,10 +28,12 @@ class E2EELabel extends Component<Props> {
         if (!this.props._showLabel) {
             return null;
         }
+        const { _e2eeLabels, t } = this.props;
+        const content = _e2eeLabels?.labelToolTip || t('e2ee.labelToolTip');
 
         return (
             <Tooltip
-                content = { this.props.t('e2ee.labelToolTip') }
+                content = { content }
                 position = { 'bottom' }>
                 <Label
                     className = 'label--green'

react/features/e2ee/components/E2EESection.js

@@ -13,9 +13,9 @@ import { doesEveryoneSupportE2EE } from '../functions';
 type Props = {
 
     /**
-     * Custom e2ee label.
+     * Custom e2ee labels.
      */
-    _e2eeLabel: string,
+    _e2eeLabels: Object,
 
     /**
      * Whether E2EE is currently enabled or not.
@@ -92,21 +92,11 @@ class E2EESection extends Component<Props, State> {
      * @returns {ReactElement}
      */
     render() {
-        const { _e2eeLabel, _everyoneSupportE2EE, t } = this.props;
+        const { _e2eeLabels, _everyoneSupportE2EE, t } = this.props;
         const { enabled } = this.state;
-        let description;
+        const description = _e2eeLabels?.description || t('dialog.e2eeDescription');
-        let label;
+        const label = _e2eeLabels?.label || t('dialog.e2eeLabel');
-        let warning;
+        const warning = _e2eeLabels?.warning || t('dialog.e2eeWarning');
-
-        if (_e2eeLabel) {
-            description = t('dialog.e2eeDescriptionCustom', { label: _e2eeLabel });
-            label = t('dialog.e2eeLabelCustom', { label: _e2eeLabel });
-            warning = t('dialog.e2eeWarningCustom', { label: _e2eeLabel });
-        } else {
-            description = t('dialog.e2eeDescription');
-            label = t('dialog.e2eeLabel');
-            warning = t('dialog.e2eeWarning');
-        }
 
         return (
             <div id = 'e2ee-section'>
@@ -160,10 +150,10 @@ class E2EESection extends Component<Props, State> {
  */
 function mapStateToProps(state) {
     const { enabled } = state['features/e2ee'];
-    const { e2eeLabel } = state['features/base/config'];
+    const { e2eeLabels } = state['features/base/config'];
 
     return {
-        _e2eeLabel: e2eeLabel,
+        _e2eeLabels: e2eeLabels,
         _enabled: enabled,
         _everyoneSupportE2EE: doesEveryoneSupportE2EE(state)
     };