Skip to content

Commit 57dac86

Browse files
stitesExpensifystitesExpensify
authored
Merge pull request #4174 from rdjuric/betterValidationMessagesLoginFlow
Fix validation messages hidden behind keyboard
2 parents b347b64 + 7974ea0 commit 57dac86

File tree

7 files changed

+65
-70
lines changed

7 files changed

+65
-70
lines changed

‎src/components/TextInputAutoWidth.js

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,13 @@ class TextInputAutoWidth extends React.Component {
4242
render() {
4343
const propsWithoutStyles = _.omit(this.props, ['inputStyle', 'textStyle']);
4444
return (
45-
<>
46-
<View>
47-
<TextInputFocusable
48-
style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
49-
ref={this.props.forwardedRef}
50-
/* eslint-disable-next-line react/jsx-props-no-spreading */
51-
{...propsWithoutStyles}
52-
/>
53-
</View>
45+
<View>
46+
<TextInputFocusable
47+
style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
48+
ref={this.props.forwardedRef}
49+
/* eslint-disable-next-line react/jsx-props-no-spreading */
50+
{...propsWithoutStyles}
51+
/>
5452
{/*
5553
Text input component doesn't support auto grow by default.
5654
We're using a hidden text input to achieve that.
@@ -63,7 +61,7 @@ class TextInputAutoWidth extends React.Component {
6361
>
6462
{this.props.value || this.props.placeholder}
6563
</Text>
66-
</>
64+
</View>
6765
);
6866
}
6967
}

‎src/pages/signin/LoginForm.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -88,15 +88,6 @@ class LoginForm extends React.Component {
8888
autoFocus={canFocusInputOnScreenFocus()}
8989
/>
9090
</View>
91-
<View style={[styles.mt5]}>
92-
<Button
93-
success
94-
text={this.props.translate('common.continue')}
95-
isLoading={this.props.account.loading}
96-
onPress={this.validateAndSubmitForm}
97-
/>
98-
</View>
99-
10091
{this.state.formError && (
10192
<Text style={[styles.formError]}>
10293
{this.state.formError}
@@ -113,6 +104,15 @@ class LoginForm extends React.Component {
113104
{this.props.account.success}
114105
</Text>
115106
)}
107+
<View style={[styles.mt5]}>
108+
<Button
109+
success
110+
text={this.props.translate('common.continue')}
111+
isLoading={this.props.account.loading}
112+
onPress={this.validateAndSubmitForm}
113+
/>
114+
</View>
115+
116116
</>
117117
);
118118
}

‎src/pages/signin/PasswordForm.js

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
} from 'react-native';
55
import PropTypes from 'prop-types';
66
import {withOnyx} from 'react-native-onyx';
7+
import _ from 'underscore';
78
import styles from '../../styles/styles';
89
import Button from '../../components/Button';
910
import Text from '../../components/Text';
@@ -110,6 +111,18 @@ class PasswordForm extends React.Component {
110111
/>
111112
</View>
112113
)}
114+
115+
{this.props.account && !_.isEmpty(this.props.account.error) && (
116+
<Text style={[styles.formError]}>
117+
{this.props.account.error}
118+
</Text>
119+
)}
120+
121+
{this.state.formError && (
122+
<Text style={[styles.formError]}>
123+
{this.state.formError}
124+
</Text>
125+
)}
113126
<View>
114127
<Button
115128
success
@@ -120,11 +133,6 @@ class PasswordForm extends React.Component {
120133
/>
121134
<ChangeExpensifyLoginLink />
122135
</View>
123-
{this.state.formError && (
124-
<Text style={[styles.formError]}>
125-
{this.state.formError}
126-
</Text>
127-
)}
128136
</>
129137
);
130138
}

‎src/pages/signin/ResendValidationForm.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@ class ResendValidationForm extends React.Component {
8080
{this.props.translate('resendValidationForm.weSentYouMagicSignInLink')}
8181
</Text>
8282
</View>
83+
{!_.isEmpty(this.state.formSuccess) && (
84+
<Text style={[styles.formSuccess]}>
85+
{this.state.formSuccess}
86+
</Text>
87+
)}
8388
<View style={[styles.mt4]}>
8489
<Button
8590
success
@@ -90,12 +95,6 @@ class ResendValidationForm extends React.Component {
9095
/>
9196
<ChangeExpensifyLoginLink />
9297
</View>
93-
94-
{!_.isEmpty(this.state.formSuccess) && (
95-
<Text style={[styles.formSuccess]}>
96-
{this.state.formSuccess}
97-
</Text>
98-
)}
9998
</>
10099
);
101100
}

‎src/pages/signin/SignInPage.js

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React, {Component} from 'react';
22
import {
3-
SafeAreaView, View,
3+
SafeAreaView,
44
} from 'react-native';
55
import PropTypes from 'prop-types';
66
import {withOnyx} from 'react-native-onyx';
7-
import _ from 'underscore';
8-
import Text from '../../components/Text';
97
import ONYXKEYS from '../../ONYXKEYS';
108
import styles from '../../styles/styles';
119
import updateUnread from '../../libs/UnreadIndicatorUpdater/updateUnread/index';
@@ -94,17 +92,6 @@ class SignInPage extends Component {
9492
{showPasswordForm && <PasswordForm />}
9593

9694
{showResendValidationLinkForm && <ResendValidationForm />}
97-
98-
{/* Because of the custom layout of the login form, session errors are displayed differently */}
99-
{!showLoginForm && (
100-
<View>
101-
{this.props.account && !_.isEmpty(this.props.account.error) && (
102-
<Text style={[styles.formError]}>
103-
{this.props.account.error}
104-
</Text>
105-
)}
106-
</View>
107-
)}
10895
</SignInPageLayout>
10996
</SafeAreaView>
11097
</>

‎src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {ScrollView, View} from 'react-native';
2+
import {ScrollView, View, KeyboardAvoidingView} from 'react-native';
33
import PropTypes from 'prop-types';
44
import styles from '../../../styles/styles';
55
import variables from '../../../styles/variables';
@@ -21,38 +21,40 @@ const propTypes = {
2121
const SignInPageLayoutNarrow = props => (
2222
<ScrollView
2323
keyboardShouldPersistTaps="handled"
24-
contentContainerStyle={[
24+
showsVerticalScrollIndicator={false}
25+
style={[
2526
styles.flexGrow1,
26-
styles.pb5,
2727
styles.mh5,
2828
styles.signInPageNarrowContentContainer,
2929
styles.alignSelfCenter,
3030
]}
3131
>
32-
<View style={[styles.flexGrow1]}>
33-
<View
34-
style={[
35-
styles.signInPageInnerNative,
36-
styles.flex1,
37-
styles.dFlex,
38-
styles.flexColumn,
39-
props.windowHeight > props.windowWidth ? styles.mt40Percentage : null,
40-
]}
41-
>
42-
<View style={[styles.signInPageLogoNative, styles.mb2]}>
43-
<ExpensifyCashLogo
44-
width={variables.componentSizeLarge}
45-
height={variables.componentSizeLarge}
46-
/>
32+
<KeyboardAvoidingView behavior="position">
33+
<View style={[styles.flexGrow1]}>
34+
<View
35+
style={[
36+
styles.signInPageInnerNative,
37+
styles.flex1,
38+
styles.dFlex,
39+
styles.flexColumn,
40+
props.windowHeight > props.windowWidth ? styles.mt40Percentage : null,
41+
]}
42+
>
43+
<View style={[styles.signInPageLogoNative, styles.mb2]}>
44+
<ExpensifyCashLogo
45+
width={variables.componentSizeLarge}
46+
height={variables.componentSizeLarge}
47+
/>
48+
</View>
49+
<Text style={[styles.mv5, styles.textLabel, styles.h3]}>
50+
{props.translate('welcomeText.phrase1')}
51+
</Text>
52+
{props.children}
4753
</View>
48-
<Text style={[styles.mv5, styles.textLabel, styles.h3]}>
49-
{props.translate('welcomeText.phrase1')}
50-
</Text>
51-
{props.children}
52-
</View>
53-
<View style={[styles.mt3]}>
54-
<TermsAndLicenses />
5554
</View>
55+
</KeyboardAvoidingView>
56+
<View style={[styles.mt3, styles.mb5, styles.alignSelfCenter]}>
57+
<TermsAndLicenses />
5658
</View>
5759
</ScrollView>
5860
);

‎src/styles/styles.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1647,10 +1647,11 @@ const styles = {
16471647
},
16481648

16491649
hiddenElementOutsideOfWindow: {
1650-
position: 'absolute',
1650+
position: 'fixed',
16511651
top: 0,
16521652
left: 0,
16531653
opacity: 0,
1654+
transform: 'translateX(-100%)',
16541655
},
16551656

16561657
growlNotificationWrapper: {

0 commit comments

Comments
 (0)