feat(dialog) updated LoginDialog

react/features/authentication/components/native/LoginDialog.js

@@ -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 {
+import { _abstractMapStateToProps } from '../../../base/dialog';
-    CustomSubmitDialog,
-    FIELD_UNDERLINE,
-    PLACEHOLDER_COLOR,
-    _abstractMapStateToProps,
-    inputDialog as inputDialogStyle
-} 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
+            <View>
-                okDisabled = { connecting }
+                <Dialog.Container
-                onCancel = { this._onCancel }
+                    visible = { true }>
-                onSubmit = { this._onLogin }>
+                    <Dialog.Title>
-                <View style = { styles.loginDialog }>
+                        { t('dialog.login') }
-                    <TextInput
+                    </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 = [
+            const messageStyles
-                styles.dialogText,
+                = messageIsError ? styles.errorMessage : styles.progressMessage;
-                messageIsError ? styles.errorMessage : styles.progressMessage
-            ];
 
             return (
                 <Text style = { messageStyles }>

react/features/base/dialog/components/native/InputDialog.js

@@ -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 } />
                     {

react/features/base/dialog/components/native/styles.js

@@ -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',