feat(dialog) updated LoginDialog

This commit is contained in:
Calinteodor
2022-02-04 16:58:33 +02:00
committed by GitHub
parent 2e8a635373
commit f282dbb5dc
3 changed files with 50 additions and 53 deletions

View File

@@ -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 } />
{ this._renderMessage() }
</View>
</CustomSubmitDialog>
<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>
);
}
@@ -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 }>