auth: fix rendering error and progress messages
Also removed some no longer used styles.
This commit is contained in:
Saúl Ibarra Corretgé
Saúl Ibarra Corretgé
parent
a622a4c713
commit
36455c24c8
|
|
@ -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,46 +152,10 @@ class LoginDialog extends Component<Props, State> {
|
|||
const {
|
||||
_connecting: connecting,
|
||||
_dialogStyles,
|
||||
_error: error,
|
||||
_progress: progress,
|
||||
_styles: styles,
|
||||
t
|
||||
} = this.props;
|
||||
|
||||
let messageKey;
|
||||
const messageOptions = {};
|
||||
|
||||
if (progress && progress < 1) {
|
||||
messageKey = 'connection.FETCH_SESSION_ID';
|
||||
} else if (error) {
|
||||
const { name } = error;
|
||||
|
||||
if (name === JitsiConnectionErrors.PASSWORD_REQUIRED) {
|
||||
// Show a message that the credentials are incorrect only if the
|
||||
// credentials which have caused the connection to fail are the
|
||||
// ones which the user sees.
|
||||
const { credentials } = error;
|
||||
|
||||
if (credentials
|
||||
&& credentials.jid
|
||||
=== toJid(
|
||||
this.state.username,
|
||||
this.props._configHosts)
|
||||
&& credentials.password === this.state.password) {
|
||||
messageKey = 'dialog.incorrectPassword';
|
||||
}
|
||||
} else if (name) {
|
||||
messageKey = 'dialog.connectErrorWithMsg';
|
||||
messageOptions.msg = `${name} ${error.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
const showMessage = messageKey || connecting;
|
||||
const message = messageKey
|
||||
? t(messageKey, messageOptions)
|
||||
: connecting
|
||||
? t('connection.CONNECTING')
|
||||
: '';
|
||||
|
||||
return (
|
||||
<CustomSubmitDialog
|
||||
okDisabled = { connecting }
|
||||
|
|
@ -210,16 +182,77 @@ class LoginDialog extends Component<Props, State> {
|
|||
] }
|
||||
underlineColorAndroid = { FIELD_UNDERLINE }
|
||||
value = { this.state.password } />
|
||||
{ showMessage && (
|
||||
<Text style = { styles.dialogText }>
|
||||
{ message }
|
||||
</Text>
|
||||
) }
|
||||
{ this._renderMessage() }
|
||||
</View>
|
||||
</CustomSubmitDialog>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
messageKey = 'connection.FETCH_SESSION_ID';
|
||||
} else if (error) {
|
||||
const { name } = error;
|
||||
|
||||
if (name === JitsiConnectionErrors.PASSWORD_REQUIRED) {
|
||||
// Show a message that the credentials are incorrect only if the
|
||||
// credentials which have caused the connection to fail are the
|
||||
// ones which the user sees.
|
||||
const { credentials } = error;
|
||||
|
||||
if (credentials
|
||||
&& credentials.jid
|
||||
=== toJid(
|
||||
this.state.username,
|
||||
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';
|
||||
}
|
||||
|
||||
if (messageKey) {
|
||||
const message = t(messageKey, messageOptions);
|
||||
const messageStyles = [
|
||||
styles.dialogText,
|
||||
messageIsError ? styles.errorMessage : styles.progressMessage
|
||||
];
|
||||
|
||||
return (
|
||||
<Text style = { messageStyles }>
|
||||
{ message }
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
_onUsernameChange: (string) => void;
|
||||
|
||||
/**
|
||||
|
|
@ -295,14 +328,7 @@ class LoginDialog extends Component<Props, State> {
|
|||
*
|
||||
* @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')
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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)'
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue