From 36455c24c8555495442bbc46ccac967627dba0ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Fri, 29 Nov 2019 12:33:35 +0100 Subject: [PATCH] auth: fix rendering error and progress messages Also removed some no longer used styles. --- .../components/LoginDialog.native.js | 127 +++++++++++------- .../authentication/components/styles.js | 41 +++--- .../base/color-scheme/defaultScheme.js | 1 + 3 files changed, 94 insertions(+), 75 deletions(-) diff --git a/react/features/authentication/components/LoginDialog.native.js b/react/features/authentication/components/LoginDialog.native.js index b8f96bfdc4..92d50e6702 100644 --- a/react/features/authentication/components/LoginDialog.native.js +++ b/react/features/authentication/components/LoginDialog.native.js @@ -5,6 +5,7 @@ import { Text, TextInput, View } from 'react-native'; import { connect as reduxConnect } from 'react-redux'; import type { Dispatch } from 'redux'; +import { ColorSchemeRegistry } from '../../base/color-scheme'; import { toJid } from '../../base/connection'; import { connect } from '../../base/connection/actions.native'; import { @@ -19,7 +20,9 @@ import { JitsiConnectionErrors } from '../../base/lib-jitsi-meet'; import type { StyleType } from '../../base/styles'; import { authenticateAndUpgradeRole, cancelLogin } from '../actions'; -import styles from './styles'; + +// Register styles. +import './styles'; /** * The type of the React {@link Component} props of {@link LoginDialog}. @@ -58,6 +61,11 @@ type Props = { */ _progress: number, + /** + * The color-schemed stylesheet of this feature. + */ + _styles: StyleType, + /** * Redux store dispatch method. */ @@ -144,12 +152,59 @@ class LoginDialog extends Component { const { _connecting: connecting, _dialogStyles, + _styles: styles, + t + } = this.props; + + return ( + + + + + { this._renderMessage() } + + + ); + } + + /** + * Renders an optional message, if applicable. + * + * @returns {ReactElement} + * @private + */ + _renderMessage() { + const { + _connecting: connecting, _error: error, _progress: progress, + _styles: styles, t } = this.props; let messageKey; + let messageIsError = false; const messageOptions = {}; if (progress && progress < 1) { @@ -170,54 +225,32 @@ class LoginDialog extends Component { this.props._configHosts) && credentials.password === this.state.password) { messageKey = 'dialog.incorrectPassword'; + messageIsError = true; } } else if (name) { messageKey = 'dialog.connectErrorWithMsg'; messageOptions.msg = `${name} ${error.message}`; + messageIsError = true; } + } else if (connecting) { + messageKey = 'connection.CONNECTING'; } - const showMessage = messageKey || connecting; - const message = messageKey - ? t(messageKey, messageOptions) - : connecting - ? t('connection.CONNECTING') - : ''; + if (messageKey) { + const message = t(messageKey, messageOptions); + const messageStyles = [ + styles.dialogText, + messageIsError ? styles.errorMessage : styles.progressMessage + ]; + + return ( + + { message } + + ); + } - return ( - - - - - { showMessage && ( - - { message } - - ) } - - - ); + return null; } _onUsernameChange: (string) => void; @@ -295,14 +328,7 @@ class LoginDialog extends Component { * * @param {Object} state - The Redux state. * @private - * @returns {{ - * _conference: JitsiConference, - * _configHosts: Object, - * _connecting: boolean, - * _dialogStyles: StyleType, - * _error: Object, - * _progress: number - * }} + * @returns {Props} */ function _mapStateToProps(state) { const { @@ -323,7 +349,8 @@ function _mapStateToProps(state) { _configHosts: configHosts, _connecting: Boolean(connecting) || Boolean(thenableWithCancel), _error: connectionError || authenticateAndUpgradeRoleError, - _progress: progress + _progress: progress, + _styles: ColorSchemeRegistry.get(state, 'LoginDialog') }; } diff --git a/react/features/authentication/components/styles.js b/react/features/authentication/components/styles.js index 37448030e5..205b345eca 100644 --- a/react/features/authentication/components/styles.js +++ b/react/features/authentication/components/styles.js @@ -1,50 +1,41 @@ -import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles'; - -/** - * The style common to {@code LoginDialog} and {@code WaitForOwnerDialog}. - */ -const dialog = { - marginBottom: BoxModel.margin, - marginTop: BoxModel.margin -}; - -/** - * The style common to {@code Text} rendered by {@code LoginDialog} and - * {@code WaitForOwnerDialog}. - */ -const text = { - color: ColorPalette.white -}; +import { ColorSchemeRegistry, schemeColor } from '../../base/color-scheme'; +import { BoxModel } from '../../base/styles'; /** * The styles of the authentication feature. */ -export default createStyleSheet({ +ColorSchemeRegistry.register('LoginDialog', { /** * The style of {@code Text} rendered by the {@code Dialog}s of the * feature authentication. */ dialogText: { - ...text, margin: BoxModel.margin, marginTop: BoxModel.margin * 2 }, + /** + * The style used when an error message is rendered. + */ + errorMessage: { + color: schemeColor('errorText') + }, + /** * The style of {@code LoginDialog}. */ loginDialog: { - ...dialog, flex: 0, - flexDirection: 'column' + flexDirection: 'column', + marginBottom: BoxModel.margin, + marginTop: BoxModel.margin }, /** - * The style of {@code WaitForOwnerDialog}. + * The style used then a progress message is rendered. */ - waitForOwnerDialog: { - ...dialog, - ...text + progressMessage: { + color: schemeColor('text') } }); diff --git a/react/features/base/color-scheme/defaultScheme.js b/react/features/base/color-scheme/defaultScheme.js index 0d7cdd0eda..d3a108efeb 100644 --- a/react/features/base/color-scheme/defaultScheme.js +++ b/react/features/base/color-scheme/defaultScheme.js @@ -10,6 +10,7 @@ export default { // Generic app theme colors that are used accross the entire app. // All scheme definitions below inherit these values. background: 'rgb(255, 255, 255)', + errorText: ColorPalette.red, icon: 'rgb(28, 32, 37)', text: 'rgb(28, 32, 37)' },