feat: add moderated service link to welcome page

config.js

@@ -518,6 +518,11 @@ var config = {
     */
     // brandingDataUrl: '',
 
+    // The URL of the moderated rooms microservice, if available. If it
+    // is present, a link to the service will be rendered on the welcome page,
+    // otherwise the app doesn't render it.
+    // moderatedRoomServiceUrl: 'https://moderated.jitsi-meet.example.com',
+
     // List of undocumented settings used in jitsi-meet
     /**
      _immediateReloadThreshold

css/_welcome_page.scss

@@ -111,6 +111,22 @@ body.welcome-page {
 
         }
 
+        #moderated-meetings {
+            max-width: calc(100% - 40px);
+            padding: 16px 0 39px 0;
+            width: $welcomePageEnterRoomWidth;
+
+            p {
+                color: $welcomePageDescriptionColor;
+                text-align: left;
+
+                a {
+                    color: inherit;
+                    font-weight: 600;
+                }
+            }
+        }
+
         .tab-container {
             font-size: 16px;
             position: relative;

lang/main.json

@@ -839,16 +839,17 @@
         "connectCalendarText": "Connect your calendar to view all your meetings in {{app}}. Plus, add {{provider}} meetings to your calendar and start them with one click.",
         "enterRoomTitle": "Start a new meeting",
         "getHelp": "Get help",
-        "roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",
         "go": "GO",
         "goSmall": "GO",
-        "join": "CREATE / JOIN",
         "info": "Info",
+        "join": "CREATE / JOIN",
+        "moderatedMessage": "Or <a href=\"{{url}}\" rel=\"noopener noreferrer\" target=\"_blank\">book a meeting URL</a> in advance where you are the only moderator.",
         "privacy": "Privacy",
         "recentList": "Recent",
         "recentListDelete": "Delete",
         "recentListEmpty": "Your recent list is currently empty. Chat with your team and you will find all your recent meetings here.",
         "reducedUIText": "Welcome to {{app}}!",
+        "roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",
         "roomname": "Enter room name",
         "roomnameHint": "Enter the name or URL of the room you want to join. You may make a name up, just let the people you are meeting know it so that they enter the same name.",
         "sendFeedback": "Send feedback",

react/features/welcome/components/AbstractWelcomePage.js

@@ -25,6 +25,11 @@ type Props = {
      */
     _enableInsecureRoomNameWarning: boolean,
 
+    /**
+     * URL for the moderated rooms microservice, if available.
+     */
+    _moderatedRoomServiceUrl: ?string,
+
     /**
      * Whether the recent list is enabled
      */
@@ -269,16 +274,13 @@ export class AbstractWelcomePage extends Component<Props, *> {
  *
  * @param {Object} state - The redux state.
  * @protected
- * @returns {{
- *     _calendarEnabled: boolean,
- *     _room: string,
- *     _settings: Object
- * }}
+ * @returns {Props}
  */
 export function _mapStateToProps(state: Object) {
     return {
         _calendarEnabled: isCalendarEnabled(state),
         _enableInsecureRoomNameWarning: state['features/base/config'].enableInsecureRoomNameWarning || false,
+        _moderatedRoomServiceUrl: state['features/base/config'].moderatedRoomServiceUrl,
         _recentListEnabled: isRecentListEnabled(),
         _room: state['features/base/conference'].room,
         _settings: state['features/base/settings']

react/features/welcome/components/WelcomePage.web.js

@@ -3,7 +3,7 @@
 import React from 'react';
 
 import { isMobileBrowser } from '../../base/environment/utils';
-import { translate } from '../../base/i18n';
+import { translate, translateToHTML } from '../../base/i18n';
 import { Icon, IconWarning } from '../../base/icons';
 import { Watermarks } from '../../base/react';
 import { connect } from '../../base/redux';
@@ -158,7 +158,7 @@ class WelcomePage extends AbstractWelcomePage {
      * @returns {ReactElement|null}
      */
     render() {
-        const { t } = this.props;
+        const { _moderatedRoomServiceUrl, t } = this.props;
         const { APP_NAME } = interfaceConfig;
         const showAdditionalContent = this._shouldShowAdditionalContent();
         const showAdditionalToolbarContent = this._shouldShowAdditionalToolbarContent();
@@ -224,6 +224,16 @@ class WelcomePage extends AbstractWelcomePage {
                             }
                         </div>
                     </div>
+                    { _moderatedRoomServiceUrl && (
+                        <div id = 'moderated-meetings'>
+                            <p>
+                                {
+                                    translateToHTML(
+                                        t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
+                                }
+                            </p>
+                        </div>
+                    ) }
                     { this._renderTabs() }
                 </div>
                 { showAdditionalContent