From 9645de33bcd5080dc853fd8b0017a744e0410fe5 Mon Sep 17 00:00:00 2001 From: Bettenbuk Zoltan Date: Thu, 18 Oct 2018 10:30:25 +0200 Subject: [PATCH] [RN] Make feature dialogs branded: authentication --- lang/main.json | 3 +- .../components/LoginDialog.native.js | 46 +++++++---- .../components/WaitForOwnerDialog.native.js | 76 +++---------------- .../authentication/components/styles.js | 26 ++----- 4 files changed, 46 insertions(+), 105 deletions(-) diff --git a/lang/main.json b/lang/main.json index 919d7a280..194551d42 100644 --- a/lang/main.json +++ b/lang/main.json @@ -319,7 +319,8 @@ "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 __room__ has not yet started. If you are the host then please authenticate. Otherwise, please wait for the host to arrive.", + "WaitForHostMsg": "The conference __room__ has not yet started. If you are the host then please authenticate. Otherwise, please wait for the host to arrive.", + "WaitForHostMsgWOk": "The conference __room__ 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", diff --git a/react/features/authentication/components/LoginDialog.native.js b/react/features/authentication/components/LoginDialog.native.js index 1520e070c..58e9abe90 100644 --- a/react/features/authentication/components/LoginDialog.native.js +++ b/react/features/authentication/components/LoginDialog.native.js @@ -5,7 +5,12 @@ import { Text, TextInput, View } from 'react-native'; 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'; @@ -162,37 +167,46 @@ class LoginDialog extends Component { } } + const showMessage = messageKey || connecting; + const message = messageKey + ? t(messageKey, messageOptions) + : connecting + ? t('connection.CONNECTING') + : ''; + return ( - + onSubmit = { this._onLogin }> - - { - messageKey - ? t(messageKey, messageOptions) - : connecting - ? t('connection.CONNECTING') - : '' - } - + { showMessage && ( + + { message } + + ) } - + ); } diff --git a/react/features/authentication/components/WaitForOwnerDialog.native.js b/react/features/authentication/components/WaitForOwnerDialog.native.js index 5947e13e1..fc0e70499 100644 --- a/react/features/authentication/components/WaitForOwnerDialog.native.js +++ b/react/features/authentication/components/WaitForOwnerDialog.native.js @@ -1,14 +1,12 @@ // @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}. @@ -60,22 +58,19 @@ class WaitForOwnerDialog extends Component { */ render() { const { - _room: room, - t + _room: room } = this.props; return ( - - + - + } + onCancel = { this._onCancel } + onSubmit = { this._onLogin } /> ); } @@ -102,59 +97,6 @@ class WaitForOwnerDialog extends Component { _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 text 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( - - { html.substring(opening.lastIndex, c.index) } - ); - opening.lastIndex - = prevClosingLastIndex - = closing.lastIndex; - } else { - break; - } - } - if (prevClosingLastIndex < html.length) { - r.push(html.substring(prevClosingLastIndex)); - } - - return r; - } - - return html; - } } /** diff --git a/react/features/authentication/components/styles.js b/react/features/authentication/components/styles.js index b705fa910..37448030e 100644 --- a/react/features/authentication/components/styles.js +++ b/react/features/authentication/components/styles.js @@ -1,4 +1,4 @@ -import { BoxModel, createStyleSheet } from '../../base/styles'; +import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles'; /** * The style common to {@code LoginDialog} and {@code WaitForOwnerDialog}. @@ -13,38 +13,22 @@ const dialog = { * {@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 }, /**