[RN] Make feature dialogs branded: authentication

lang/main.json

         "alreadySharedVideoMsg": "Another member is already sharing a video. This conference allows only one shared video at a time.",
         "alreadySharedVideoTitle": "Only one shared video is allowed at a time",
         "WaitingForHost": "Waiting for the host ...",
-        "WaitForHostMsg": "The conference <b>__room__ </b> has not yet started. If you are the host then please authenticate. Otherwise, please wait for the host to arrive.",
+        "WaitForHostMsg": "The conference <b>__room__</b> has not yet started. If you are the host then please authenticate. Otherwise, please wait for the host to arrive.",
+        "WaitForHostMsgWOk": "The conference <b>__room__</b> has not yet started. If you are the host then please press Ok to authenticate. Otherwise, please wait for the host to arrive.",
         "IamHost": "I am the host",
         "Cancel": "Cancel",
         "Submit": "Submit",

react/features/authentication/components/LoginDialog.native.js

 import { connect as reduxConnect } from 'react-redux';
 
 import { connect, toJid } from '../../base/connection';
-import { Dialog } from '../../base/dialog';
+import {
+    CustomSubmitDialog,
+    FIELD_UNDERLINE,
+    PLACEHOLDER_COLOR,
+    inputDialog as inputDialogStyle
+} from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import { JitsiConnectionErrors } from '../../base/lib-jitsi-meet';
 
             }
         }
 
+        const showMessage = messageKey || connecting;
+        const message = messageKey
+            ? t(messageKey, messageOptions)
+            : connecting
+                ? t('connection.CONNECTING')
+                : '';
+
         return (
-            <Dialog
+            <CustomSubmitDialog
                 okDisabled = { connecting }
                 onCancel = { this._onCancel }
-                onSubmit = { this._onLogin }
-                titleKey = 'dialog.passwordRequired'>
+                onSubmit = { this._onLogin }>
                 <View style = { styles.loginDialog }>
                     <TextInput
                         autoCapitalize = { 'none' }
                         autoCorrect = { false }
                         onChangeText = { this._onUsernameChange }
                         placeholder = { 'user@domain.com' }
-                        style = { styles.dialogTextInput }
+                        placeholderTextColor = { PLACEHOLDER_COLOR }
+                        style = { inputDialogStyle.field }
+                        underlineColorAndroid = { FIELD_UNDERLINE }
                         value = { this.state.username } />
                     <TextInput
                         onChangeText = { this._onPasswordChange }
                         placeholder = { t('dialog.userPassword') }
+                        placeholderTextColor = { PLACEHOLDER_COLOR }
                         secureTextEntry = { true }
-                        style = { styles.dialogTextInput }
+                        style = { [
+                            inputDialogStyle.field,
+                            inputDialogStyle.bottomField
+                        ] }
+                        underlineColorAndroid = { FIELD_UNDERLINE }
                         value = { this.state.password } />
-                    <Text style = { styles.dialogText }>
-                        {
-                            messageKey
-                                ? t(messageKey, messageOptions)
-                                : connecting
-                                    ? t('connection.CONNECTING')
-                                    : ''
-                        }
-                    </Text>
+                    { showMessage && (
+                        <Text style = { styles.dialogText }>
+                            { message }
+                        </Text>
+                    ) }
                 </View>
-            </Dialog>
+            </CustomSubmitDialog>
         );
     }
 

react/features/authentication/components/WaitForOwnerDialog.native.js

 // @flow
 
 import React, { Component } from 'react';
-import { Text } from 'react-native';
 import { connect } from 'react-redux';
 
-import { Dialog } from '../../base/dialog';
+import { ConfirmDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 
 import { cancelWaitForOwner, _openLoginDialog } from '../actions';
-import styles from './styles';
 
 /**
  * The type of the React {@code Component} props of {@link WaitForOwnerDialog}.
      */
     render() {
         const {
-            _room: room,
-            t
+            _room: room
         } = this.props;
 
         return (
-            <Dialog
-                okTitleKey = { 'dialog.IamHost' }
-                onCancel = { this._onCancel }
-                onSubmit = { this._onLogin }
-                titleKey = 'dialog.WaitingForHost'>
-                <Text style = { styles.waitForOwnerDialog }>
+            <ConfirmDialog
+                contentKey = {
                     {
-                        this._renderHTML(t('dialog.WaitForHostMsg', { room }))
+                        key: 'dialog.WaitForHostMsgWOk',
+                        params: { room }
                     }
-                </Text>
-            </Dialog>
+                }
+                onCancel = { this._onCancel }
+                onSubmit = { this._onLogin } />
         );
     }
 
     _onLogin() {
         this.props.dispatch(_openLoginDialog());
     }
-
-    /**
-     * Renders a specific {@code string} which may contain HTML.
-     *
-     * @param {string|undefined} html - The {@code string} which may
-     * contain HTML to render.
-     * @returns {ReactElement[]|string}
-     */
-    _renderHTML(html: ?string) {
-        if (typeof html === 'string') {
-            // At the time of this writing, the specified HTML contains a couple
-            // of spaces one after the other. They do not cause a visible
-            // problem on Web, because the specified HTML is rendered as, well,
-            // HTML. However, we're not rendering HTML here.
-
-            // eslint-disable-next-line no-param-reassign
-            html = html.replace(/\s{2,}/gi, ' ');
-
-            // Render text in <b>text</b> in bold.
-            const opening = /<\s*b\s*>/gi;
-            const closing = /<\s*\/\s*b\s*>/gi;
-            let o;
-            let c;
-            let prevClosingLastIndex = 0;
-            const r = [];
-
-            // eslint-disable-next-line no-cond-assign
-            while (o = opening.exec(html)) {
-                closing.lastIndex = opening.lastIndex;
-
-                // eslint-disable-next-line no-cond-assign
-                if (c = closing.exec(html)) {
-                    r.push(html.substring(prevClosingLastIndex, o.index));
-                    r.push(
-                        <Text style = { styles.boldDialogText }>
-                            { html.substring(opening.lastIndex, c.index) }
-                        </Text>);
-                    opening.lastIndex
-                        = prevClosingLastIndex
-                        = closing.lastIndex;
-                } else {
-                    break;
-                }
-            }
-            if (prevClosingLastIndex < html.length) {
-                r.push(html.substring(prevClosingLastIndex));
-            }
-
-            return r;
-        }
-
-        return html;
-    }
 }
 
 /**

react/features/authentication/components/styles.js

-import { BoxModel, createStyleSheet } from '../../base/styles';
+import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
 
 /**
  * The style common to {@code LoginDialog} and {@code WaitForOwnerDialog}.
  * {@code WaitForOwnerDialog}.
  */
 const text = {
+    color: ColorPalette.white
 };
 
 /**
  * The styles of the authentication feature.
  */
 export default createStyleSheet({
-    /**
-     * The style of bold {@code Text} rendered by the {@code Dialog}s of the
-     * feature authentication.
-     */
-    boldDialogText: {
-        ...text,
-        fontWeight: 'bold'
-    },
 
     /**
      * The style of {@code Text} rendered by the {@code Dialog}s of the
      * feature authentication.
      */
     dialogText: {
-        ...text
-    },
-
-    /**
-     * The style of {@code TextInput} rendered by the {@code Dialog}s of the
-     * feature authentication.
-     */
-    dialogTextInput: {
-        // XXX Matches react-native-prompt's dialogInput because base/dialog's
-        // Dialog is implemented using react-native-prompt.
-        fontSize: 18,
-        height: 50
+        ...text,
+        margin: BoxModel.margin,
+        marginTop: BoxModel.margin * 2
     },
 
     /**