feat(dialog) updated LoginDialog
This commit is contained in:
Calinteodor
GitHub
parent
2e8a635373
commit
f282dbb5dc
|
|
@ -1,20 +1,15 @@
|
|||
/* @flow */
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { Text, TextInput, View } from 'react-native';
|
||||
import { Platform, Text, View } from 'react-native';
|
||||
import Dialog from 'react-native-dialog';
|
||||
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 {
|
||||
CustomSubmitDialog,
|
||||
FIELD_UNDERLINE,
|
||||
PLACEHOLDER_COLOR,
|
||||
_abstractMapStateToProps,
|
||||
inputDialog as inputDialogStyle
|
||||
} from '../../../base/dialog';
|
||||
import { _abstractMapStateToProps } from '../../../base/dialog';
|
||||
import { translate } from '../../../base/i18n';
|
||||
import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
|
||||
import type { StyleType } from '../../../base/styles';
|
||||
|
|
@ -44,11 +39,6 @@ type Props = {
|
|||
*/
|
||||
_connecting: boolean,
|
||||
|
||||
/**
|
||||
* The color-schemed stylesheet of the base/dialog feature.
|
||||
*/
|
||||
_dialogStyles: StyleType,
|
||||
|
||||
/**
|
||||
* The error which occurred during login/authentication.
|
||||
*/
|
||||
|
|
@ -150,42 +140,62 @@ class LoginDialog extends Component<Props, State> {
|
|||
render() {
|
||||
const {
|
||||
_connecting: connecting,
|
||||
_dialogStyles,
|
||||
_styles: styles,
|
||||
t
|
||||
} = this.props;
|
||||
let rightKey;
|
||||
let leftKey;
|
||||
let rightOnPress;
|
||||
let leftOnPress;
|
||||
let rightDisabled;
|
||||
let leftDisabled;
|
||||
|
||||
if (Platform.OS === 'android') {
|
||||
rightKey = 'dialog.Ok';
|
||||
rightOnPress = () => this._onLogin();
|
||||
rightDisabled = connecting;
|
||||
leftKey = 'dialog.Cancel';
|
||||
leftOnPress = () => this._onCancel();
|
||||
} else {
|
||||
rightKey = 'dialog.Cancel';
|
||||
rightOnPress = () => this._onCancel();
|
||||
leftKey = 'dialog.Ok';
|
||||
leftOnPress = () => this._onLogin();
|
||||
leftDisabled = connecting;
|
||||
}
|
||||
|
||||
return (
|
||||
<CustomSubmitDialog
|
||||
okDisabled = { connecting }
|
||||
onCancel = { this._onCancel }
|
||||
onSubmit = { this._onLogin }>
|
||||
<View style = { styles.loginDialog }>
|
||||
<TextInput
|
||||
<View>
|
||||
<Dialog.Container
|
||||
visible = { true }>
|
||||
<Dialog.Title>
|
||||
{ t('dialog.login') }
|
||||
</Dialog.Title>
|
||||
<Dialog.Input
|
||||
autoCapitalize = { 'none' }
|
||||
autoCorrect = { false }
|
||||
onChangeText = { this._onUsernameChange }
|
||||
placeholder = { 'user@domain.com' }
|
||||
placeholderTextColor = { PLACEHOLDER_COLOR }
|
||||
spellCheck = { false }
|
||||
style = { _dialogStyles.field }
|
||||
underlineColorAndroid = { FIELD_UNDERLINE }
|
||||
value = { this.state.username } />
|
||||
<TextInput
|
||||
<Dialog.Input
|
||||
autoCapitalize = { 'none' }
|
||||
onChangeText = { this._onPasswordChange }
|
||||
placeholder = { t('dialog.userPassword') }
|
||||
placeholderTextColor = { PLACEHOLDER_COLOR }
|
||||
secureTextEntry = { true }
|
||||
style = { [
|
||||
_dialogStyles.field,
|
||||
inputDialogStyle.bottomField
|
||||
] }
|
||||
underlineColorAndroid = { FIELD_UNDERLINE }
|
||||
value = { this.state.password } />
|
||||
<Dialog.Description>
|
||||
{ this._renderMessage() }
|
||||
</Dialog.Description>
|
||||
<Dialog.Button
|
||||
disabled = { rightDisabled }
|
||||
label = { t(rightKey) }
|
||||
onPress = { rightOnPress } />
|
||||
<Dialog.Button
|
||||
disabled = { leftDisabled }
|
||||
label = { t(leftKey) }
|
||||
onPress = { leftOnPress } />
|
||||
</Dialog.Container>
|
||||
</View>
|
||||
</CustomSubmitDialog>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -239,10 +249,8 @@ class LoginDialog extends Component<Props, State> {
|
|||
|
||||
if (messageKey) {
|
||||
const message = t(messageKey, messageOptions);
|
||||
const messageStyles = [
|
||||
styles.dialogText,
|
||||
messageIsError ? styles.errorMessage : styles.progressMessage
|
||||
];
|
||||
const messageStyles
|
||||
= messageIsError ? styles.errorMessage : styles.progressMessage;
|
||||
|
||||
return (
|
||||
<Text style = { messageStyles }>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import AbstractDialog, {
|
|||
type State as AbstractState
|
||||
} from '../AbstractDialog';
|
||||
|
||||
import { FIELD_UNDERLINE, inputDialog as styles } from './styles';
|
||||
import { inputDialog as styles } from './styles';
|
||||
|
||||
type Props = AbstractProps & {
|
||||
|
||||
|
|
@ -99,13 +99,9 @@ class InputDialog<P: Props, S: State> extends AbstractDialog<P, S> {
|
|||
<Dialog.Container
|
||||
onBackdropPress = { this._onCancel }
|
||||
visible = { true }>
|
||||
{
|
||||
titleKey && (
|
||||
<Dialog.Title>
|
||||
{ t(titleKey) }
|
||||
</Dialog.Title>
|
||||
)
|
||||
}
|
||||
{
|
||||
descriptionKey && (
|
||||
<Dialog.Description>
|
||||
|
|
@ -116,7 +112,6 @@ class InputDialog<P: Props, S: State> extends AbstractDialog<P, S> {
|
|||
<Dialog.Input
|
||||
autoFocus = { true }
|
||||
onChangeText = { this._onChangeText }
|
||||
underlineColorAndroid = { FIELD_UNDERLINE }
|
||||
value = { this.state.fieldValue }
|
||||
{ ...this.props.textInputProps } />
|
||||
{
|
||||
|
|
|
|||
|
|
@ -20,8 +20,6 @@ export const MD_FONT_SIZE = 16;
|
|||
export const MD_ITEM_HEIGHT = 48;
|
||||
export const MD_ITEM_MARGIN_PADDING = 16;
|
||||
|
||||
export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
|
||||
|
||||
/**
|
||||
* The React {@code Component} styles of {@code BottomSheet}. These have
|
||||
* been implemented as per the Material Design guidelines:
|
||||
|
|
@ -158,10 +156,6 @@ const brandedDialogIconStyle = {
|
|||
};
|
||||
|
||||
export const inputDialog = {
|
||||
bottomField: {
|
||||
marginBottom: 0
|
||||
},
|
||||
|
||||
formMessage: {
|
||||
alignSelf: 'flex-start',
|
||||
fontStyle: 'italic',
|
||||
|
|
|
|||
Loading…
Reference in New Issue