From 075c60dc2e616ce76c4509aabdce5873f5313e79 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Fri, 2 Apr 2021 11:10:46 +0800 Subject: [PATCH 01/20] Rename the SetPasswordPage => SetPasswordForm, change its styles to match that of the sign in page. --- .../Navigation/AppNavigator/PublicScreens.js | 4 +- src/pages/SetPasswordForm.js | 131 +++++++++++++++++ src/pages/SetPasswordPage.js | 135 ------------------ 3 files changed, 133 insertions(+), 137 deletions(-) create mode 100644 src/pages/SetPasswordForm.js delete mode 100644 src/pages/SetPasswordPage.js diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js index 141695a74ff5..8a4965a79a57 100644 --- a/src/libs/Navigation/AppNavigator/PublicScreens.js +++ b/src/libs/Navigation/AppNavigator/PublicScreens.js @@ -1,7 +1,7 @@ import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; import SignInPage from '../../../pages/signin/SignInPage'; -import SetPasswordPage from '../../../pages/SetPasswordPage'; +import SetPasswordForm from '../../../pages/SetPasswordForm'; const RootStack = createStackNavigator(); const defaultScreenOptions = { @@ -22,7 +22,7 @@ export default () => ( ); diff --git a/src/pages/SetPasswordForm.js b/src/pages/SetPasswordForm.js new file mode 100644 index 000000000000..66f29ebadfe6 --- /dev/null +++ b/src/pages/SetPasswordForm.js @@ -0,0 +1,131 @@ +import React, {Component} from 'react'; +import { + Text, + TextInput, + View, +} from 'react-native'; +import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; +import lodashGet from 'lodash/get'; +import styles from '../styles/styles'; +import {setPassword} from '../libs/actions/Session'; +import ONYXKEYS from '../ONYXKEYS'; +import ButtonWithLoader from '../components/ButtonWithLoader'; +import themeColors from '../styles/themes/default'; +import SignInPageLayout from './signin/SignInPageLayout'; + +const propTypes = { + /* Onyx Props */ + + // The details about the account that the user is signing in with + account: PropTypes.shape({ + // An error message to display to the user + error: PropTypes.string, + + // Whether or not a sign on form is loading (being submitted) + loading: PropTypes.bool, + }), + + // The credentials of the logged in person + credentials: PropTypes.shape({ + // The email the user logged in with + login: PropTypes.string, + + // The password used to log in the user + password: PropTypes.string, + }), + + route: PropTypes.shape({ + params: PropTypes.shape({ + validateCode: PropTypes.string, + }), + }), +}; + +const defaultProps = { + account: {}, + credentials: {}, + route: { + params: {}, + }, +}; + +class SetPasswordForm extends Component { + constructor(props) { + super(props); + + this.submitForm = this.submitForm.bind(this); + + this.state = { + password: '', + formError: null, + }; + } + + /** + * Validate the form and then submit it + */ + submitForm() { + if (!this.state.password.trim()) { + this.setState({ + formError: 'Password cannot be blank', + }); + return; + } + + this.setState({ + formError: null, + }); + setPassword(this.state.password, lodashGet(this.props.route, 'params.validateCode', '')); + } + + render() { + return ( + + + Enter a password: + this.setState({login: text})} + onSubmitEditing={this.validateAndSubmitForm} + autoCapitalize="none" + placeholder="Phone or Email" + placeholderTextColor={themeColors.placeholderText} + autofocus + /> + + + + + + {this.state.formError && ( + + {this.state.formError} + + )} + + {!_.isEmpty(this.props.account.error) && ( + + {this.props.account.error} + + )} + + ); + } +} + +SetPasswordForm.propTypes = propTypes; +SetPasswordForm.defaultProps = defaultProps; + +export default withOnyx({ + credentials: {key: ONYXKEYS.CREDENTIALS}, + account: {key: ONYXKEYS.ACCOUNT}, +})(SetPasswordForm); diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js deleted file mode 100644 index 79679dca6141..000000000000 --- a/src/pages/SetPasswordPage.js +++ /dev/null @@ -1,135 +0,0 @@ -import React, {Component} from 'react'; -import { - SafeAreaView, - Text, - TextInput, - View, -} from 'react-native'; -import PropTypes from 'prop-types'; -import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; -import lodashGet from 'lodash/get'; -import styles from '../styles/styles'; -import ExpensifyCashLogo from '../../assets/images/expensify-cash.svg'; -import {setPassword} from '../libs/actions/Session'; -import ONYXKEYS from '../ONYXKEYS'; -import variables from '../styles/variables'; -import ButtonWithLoader from '../components/ButtonWithLoader'; - -const propTypes = { - /* Onyx Props */ - - // The details about the account that the user is signing in with - account: PropTypes.shape({ - // An error message to display to the user - error: PropTypes.string, - - // Whether or not a sign on form is loading (being submitted) - loading: PropTypes.bool, - }), - - // The credentials of the logged in person - credentials: PropTypes.shape({ - // The email the user logged in with - login: PropTypes.string, - - // The password used to log in the user - password: PropTypes.string, - }), - - route: PropTypes.shape({ - params: PropTypes.shape({ - validateCode: PropTypes.string, - }), - }), -}; - -const defaultProps = { - account: {}, - credentials: {}, - route: { - params: {}, - }, -}; - -class SetPasswordPage extends Component { - constructor(props) { - super(props); - - this.submitForm = this.submitForm.bind(this); - - this.state = { - password: '', - formError: null, - }; - } - - /** - * Validate the form and then submit it - */ - submitForm() { - if (!this.state.password.trim()) { - this.setState({ - formError: 'Password cannot be blank', - }); - return; - } - - this.setState({ - formError: null, - }); - setPassword(this.state.password, lodashGet(this.props.route, 'params.validateCode', '')); - } - - render() { - return ( - <> - - - - - - - Enter a password - this.setState({password: text})} - onSubmitEditing={this.submitForm} - /> - - - {this.state.formError && ( - - {this.state.formError} - - )} - {!_.isEmpty(this.props.account.error) && ( - - {this.props.account.error} - - )} - - - - ); - } -} - -SetPasswordPage.propTypes = propTypes; -SetPasswordPage.defaultProps = defaultProps; - -export default withOnyx({ - credentials: {key: ONYXKEYS.CREDENTIALS}, - account: {key: ONYXKEYS.ACCOUNT}, -})(SetPasswordPage); From eb68583172311180868fdd1f1e6431ec88e5ebba Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Fri, 2 Apr 2021 11:17:51 +0800 Subject: [PATCH 02/20] Fix missing handler --- src/pages/SetPasswordForm.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/SetPasswordForm.js b/src/pages/SetPasswordForm.js index 66f29ebadfe6..a2831a4334e1 100644 --- a/src/pages/SetPasswordForm.js +++ b/src/pages/SetPasswordForm.js @@ -55,7 +55,7 @@ class SetPasswordForm extends Component { constructor(props) { super(props); - this.submitForm = this.submitForm.bind(this); + this.validateAndSubmitForm = this.validateAndSubmitForm.bind(this); this.state = { password: '', @@ -66,7 +66,7 @@ class SetPasswordForm extends Component { /** * Validate the form and then submit it */ - submitForm() { + validateAndSubmitForm() { if (!this.state.password.trim()) { this.setState({ formError: 'Password cannot be blank', From 07a0cd43c24dbcc126169f9c1c37181b72933c7b Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Fri, 2 Apr 2021 11:20:42 +0800 Subject: [PATCH 03/20] Change SignInPageLayout to use SafeAreaView --- .../SignInPageLayout/SignInPageLayoutNarrow.js | 13 ++++++++----- .../signin/SignInPageLayout/SignInPageLayoutWide.js | 9 ++++++--- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index bccd8926e8ad..a31db2c08dd8 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -1,7 +1,10 @@ import React from 'react'; import { Image, - ScrollView, Text, View, + ScrollView, + Text, + View, + SafeAreaView, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -30,8 +33,8 @@ const defaultProps = { }; const SignInPageLayoutNarrow = props => ( - - + + @@ -61,8 +64,8 @@ const SignInPageLayoutNarrow = props => ( - - + + ); SignInPageLayoutNarrow.propTypes = propTypes; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index 31e2e4c74c26..375813a7c8c7 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -1,6 +1,9 @@ import React from 'react'; import { - Image, Text, View, + Image, + Text, + View, + SafeAreaView, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -24,7 +27,7 @@ const defaultProps = { }; const SignInPageLayoutWide = props => ( - + @@ -57,7 +60,7 @@ const SignInPageLayoutWide = props => ( - + ); SignInPageLayoutWide.propTypes = propTypes; From bd56c3084ebb6700bf2f0d962a6023b8547d51ca Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Fri, 2 Apr 2021 11:25:13 +0800 Subject: [PATCH 04/20] Change SignInPageLayout to use SafeAreaView --- src/pages/signin/SignInPage.js | 44 ++++++++------- .../SignInPageLayoutNarrow.js | 54 +++++++++---------- .../SignInPageLayout/SignInPageLayoutWide.js | 5 +- src/pages/signin/SignInPageLayout/index.js | 15 ++++-- 4 files changed, 59 insertions(+), 59 deletions(-) diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index a3d74274898c..5a032a34e549 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -78,29 +78,27 @@ class SignInPage extends Component { return ( <> - - - {showLoginForm && } - - {showPasswordForm && } - - {showResendValidationLinkForm && } - - {/* Because of the custom layout of the login form, session errors are displayed differently */} - {!showLoginForm && ( - - {this.props.account && !_.isEmpty(this.props.account.error) && ( - - {this.props.account.error} - - )} - - )} - - + + {showLoginForm && } + + {showPasswordForm && } + + {showResendValidationLinkForm && } + + {/* Because of the custom layout of the login form, session errors are displayed differently */} + {!showLoginForm && ( + + {this.props.account && !_.isEmpty(this.props.account.error) && ( + + {this.props.account.error} + + )} + + )} + ); } diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index a31db2c08dd8..6a46efc7bc8b 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -33,39 +33,37 @@ const defaultProps = { }; const SignInPageLayoutNarrow = props => ( - - - - - - + + + + + - - - Expensify.cash - - + + + Expensify.cash + + - - {props.children} + + {props.children} - {props.showWelcomeScreenshot - && ( - - - - )} + {props.showWelcomeScreenshot + && ( + + + + )} - {props.showWelcomeText && } - - + {props.showWelcomeText && } - - + + + ); SignInPageLayoutNarrow.propTypes = propTypes; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index 375813a7c8c7..887d9214eff6 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -3,7 +3,6 @@ import { Image, Text, View, - SafeAreaView, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -27,7 +26,7 @@ const defaultProps = { }; const SignInPageLayoutWide = props => ( - + @@ -60,7 +59,7 @@ const SignInPageLayoutWide = props => ( - + ); SignInPageLayoutWide.propTypes = propTypes; diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index 8c5018b21334..e3eefac5dd37 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -1,4 +1,6 @@ import React from 'react'; +import {SafeAreaView} from 'react-native'; +import styles from '../../../styles/styles'; import SignInPageLayoutNarrow from './SignInPageLayoutNarrow'; import SignInPageLayoutWide from './SignInPageLayoutWide'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; @@ -8,11 +10,14 @@ const propTypes = { }; const SignInPageLayout = props => ( - !props.isSmallScreenWidth - // eslint-disable-next-line react/jsx-props-no-spreading - ? {props.children} - // eslint-disable-next-line react/jsx-props-no-spreading - : {props.children} + + {!props.isSmallScreenWidth + // eslint-disable-next-line react/jsx-props-no-spreading + ? {props.children} + // eslint-disable-next-line react/jsx-props-no-spreading + : {props.children} + } + ); SignInPageLayout.propTypes = propTypes; From fbc5a25a970b786beb728d74fa9853d2f184ba8f Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Fri, 2 Apr 2021 11:27:14 +0800 Subject: [PATCH 05/20] Fix style, remove unused --- src/pages/signin/SignInPage.js | 3 ++- src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js | 1 - src/pages/signin/SignInPageLayout/index.js | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index 5a032a34e549..8b961867864c 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import { - SafeAreaView, Text, View, + Text, + View, } from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 6a46efc7bc8b..6a5eb175928d 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -4,7 +4,6 @@ import { ScrollView, Text, View, - SafeAreaView, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index e3eefac5dd37..16e278d592b5 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -15,8 +15,7 @@ const SignInPageLayout = props => ( // eslint-disable-next-line react/jsx-props-no-spreading ? {props.children} // eslint-disable-next-line react/jsx-props-no-spreading - : {props.children} - } + : {props.children}} ); From 4ee23f75f9c303629bb53765662f60b92fc65310 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 5 Apr 2021 10:29:17 +0800 Subject: [PATCH 06/20] Fix JSX --- .../signin/SignInPageLayout/SignInPageLayoutNarrow.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 8c0fa47fd0a9..9e0880edf54f 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -20,13 +20,13 @@ const propTypes = { children: PropTypes.node.isRequired, // Whether we should show the welcome elements - showWelcomeText: PropTypes.Boolean, - showWelcomeScreenshot: PropTypes.Boolean, + shouldShowWelcomeText: PropTypes.Boolean, + shouldShowWelcomeScreenshot: PropTypes.Boolean, }; const defaultProps = { - showWelcomeText: true, - showWelcomeScreenshot: true, + shouldShowWelcomeText: true, + shouldShowWelcomeScreenshot: true, }; const SignInPageLayoutNarrow = props => ( From a9a8dfb5ffdb1537fa835264e7243d72af496583 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 20 Apr 2021 12:04:57 +0800 Subject: [PATCH 07/20] autoFocus conditionally --- src/pages/SetPasswordForm.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/SetPasswordForm.js b/src/pages/SetPasswordForm.js index a2831a4334e1..9ba163043d95 100644 --- a/src/pages/SetPasswordForm.js +++ b/src/pages/SetPasswordForm.js @@ -14,6 +14,7 @@ import ONYXKEYS from '../ONYXKEYS'; import ButtonWithLoader from '../components/ButtonWithLoader'; import themeColors from '../styles/themes/default'; import SignInPageLayout from './signin/SignInPageLayout'; +import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus'; const propTypes = { /* Onyx Props */ @@ -95,7 +96,7 @@ class SetPasswordForm extends Component { autoCapitalize="none" placeholder="Phone or Email" placeholderTextColor={themeColors.placeholderText} - autofocus + autoFocus={canFocusInputOnScreenFocus()} /> From 775084c1803b639ce3c4313f1259d8557de51eb5 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 20 Apr 2021 12:19:04 +0800 Subject: [PATCH 08/20] Fix form values --- src/pages/SetPasswordForm.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pages/SetPasswordForm.js b/src/pages/SetPasswordForm.js index 9ba163043d95..ca6692953e43 100644 --- a/src/pages/SetPasswordForm.js +++ b/src/pages/SetPasswordForm.js @@ -78,7 +78,11 @@ class SetPasswordForm extends Component { this.setState({ formError: null, }); - setPassword(this.state.password, lodashGet(this.props.route, 'params.validateCode', '')); + setPassword( + this.state.password, + lodashGet(this.props.route, 'params.validateCode', ''), + lodashGet(this.props.route, 'params.accountID', ''), + ); } render() { @@ -88,13 +92,13 @@ class SetPasswordForm extends Component { Enter a password: this.setState({login: text})} + value={this.state.password} + secureTextEntry + autoCompleteType="password" + textContentType="password" + onChangeText={text => this.setState({password: text})} onSubmitEditing={this.validateAndSubmitForm} autoCapitalize="none" - placeholder="Phone or Email" placeholderTextColor={themeColors.placeholderText} autoFocus={canFocusInputOnScreenFocus()} /> From 8d4bff62fe0c6a70f64193d5c016d3f499f00ef6 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 21 Apr 2021 09:50:43 +0800 Subject: [PATCH 09/20] Add accountID to route --- src/pages/SetPasswordForm.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/SetPasswordForm.js b/src/pages/SetPasswordForm.js index ca6692953e43..ad947086dce1 100644 --- a/src/pages/SetPasswordForm.js +++ b/src/pages/SetPasswordForm.js @@ -39,6 +39,7 @@ const propTypes = { route: PropTypes.shape({ params: PropTypes.shape({ + accountID: PropTypes.string, validateCode: PropTypes.string, }), }), From 1595ee4182e78349b927fa3ab3cac982cfdc6df7 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 21 Apr 2021 14:07:35 +0800 Subject: [PATCH 10/20] Wrap narrow/wide SignInPageLayout with SafeAreaView --- .../SignInPageLayoutNarrow.js | 58 ++++++++++--------- .../SignInPageLayout/SignInPageLayoutWide.js | 5 +- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index efa77c614277..193bb0ea7078 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -1,7 +1,7 @@ import React from 'react'; import { Image, - ScrollView, Text, View, + ScrollView, Text, View, SafeAreaView } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -30,39 +30,41 @@ const defaultProps = { }; const SignInPageLayoutNarrow = props => ( - - - - - - + + + + + + + - - - Expensify.cash - - + + + Expensify.cash + + - - {props.children} + + {props.children} - {props.shouldShowWelcomeScreenshot - && ( - - - - )} + {props.shouldShowWelcomeScreenshot + && ( + + + + )} - {props.shouldShowWelcomeText && } + {props.shouldShowWelcomeText && } + + - - - + + ); SignInPageLayoutNarrow.propTypes = propTypes; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index 127d64faba10..05f655395e65 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -3,6 +3,7 @@ import { Image, Text, View, + SafeAreaView, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -26,7 +27,7 @@ const defaultProps = { }; const SignInPageLayoutWide = props => ( - + @@ -59,7 +60,7 @@ const SignInPageLayoutWide = props => ( - + ); SignInPageLayoutWide.propTypes = propTypes; From dfe45d99e7ea62395ae2594e42e9254eb43d4885 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 21 Apr 2021 14:16:32 +0800 Subject: [PATCH 11/20] Change SafeAreaView placement --- src/pages/SetPasswordForm.js | 75 ++++++++++--------- .../SignInPageLayoutNarrow.js | 58 +++++++------- .../SignInPageLayout/SignInPageLayoutWide.js | 5 +- 3 files changed, 69 insertions(+), 69 deletions(-) diff --git a/src/pages/SetPasswordForm.js b/src/pages/SetPasswordForm.js index ad947086dce1..70a41e044ea1 100644 --- a/src/pages/SetPasswordForm.js +++ b/src/pages/SetPasswordForm.js @@ -3,6 +3,7 @@ import { Text, TextInput, View, + SafeAreaView, } from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; @@ -88,42 +89,44 @@ class SetPasswordForm extends Component { render() { return ( - - - Enter a password: - this.setState({password: text})} - onSubmitEditing={this.validateAndSubmitForm} - autoCapitalize="none" - placeholderTextColor={themeColors.placeholderText} - autoFocus={canFocusInputOnScreenFocus()} - /> - - - - - - {this.state.formError && ( - - {this.state.formError} - - )} - - {!_.isEmpty(this.props.account.error) && ( - - {this.props.account.error} - - )} - + + + + Enter a password: + this.setState({password: text})} + onSubmitEditing={this.validateAndSubmitForm} + autoCapitalize="none" + placeholderTextColor={themeColors.placeholderText} + autoFocus={canFocusInputOnScreenFocus()} + /> + + + + + + {this.state.formError && ( + + {this.state.formError} + + )} + + {!_.isEmpty(this.props.account.error) && ( + + {this.props.account.error} + + )} + + ); } } diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 193bb0ea7078..efa77c614277 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -1,7 +1,7 @@ import React from 'react'; import { Image, - ScrollView, Text, View, SafeAreaView + ScrollView, Text, View, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -30,41 +30,39 @@ const defaultProps = { }; const SignInPageLayoutNarrow = props => ( - - - - - - - + + + + + + - - - Expensify.cash - - + + + Expensify.cash + + - - {props.children} + + {props.children} - {props.shouldShowWelcomeScreenshot - && ( - - - - )} + {props.shouldShowWelcomeScreenshot + && ( + + + + )} - {props.shouldShowWelcomeText && } - - + {props.shouldShowWelcomeText && } + - - + + ); SignInPageLayoutNarrow.propTypes = propTypes; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index 05f655395e65..127d64faba10 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -3,7 +3,6 @@ import { Image, Text, View, - SafeAreaView, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -27,7 +26,7 @@ const defaultProps = { }; const SignInPageLayoutWide = props => ( - + @@ -60,7 +59,7 @@ const SignInPageLayoutWide = props => ( - + ); SignInPageLayoutWide.propTypes = propTypes; From d2ba95f98cfc99689b4f829722f3c8e83d05668a Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 22 Apr 2021 12:31:21 +0800 Subject: [PATCH 12/20] Revert unneeded change --- src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index 127d64faba10..248a8d657857 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -1,8 +1,6 @@ import React from 'react'; import { - Image, - Text, - View, + Image, Text, View, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; From 893b7eff3ec4c8aeb08c95806972f049d8047fd4 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 22 Apr 2021 12:31:41 +0800 Subject: [PATCH 13/20] Remove unused --- src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index efa77c614277..843c4d7b89d2 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -9,13 +9,10 @@ import variables from '../../../styles/variables'; import ExpensifyCashLogo from '../../../../assets/images/expensify-cash.svg'; import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png'; import TermsAndLicenses from '../TermsAndLicenses'; -import {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import WelcomeText from '../../../components/WelcomeText'; const propTypes = { - ...windowDimensionsPropTypes, - // The children to show inside the layout children: PropTypes.node.isRequired, From 8396bbe363439153bc1c8e47593c55a03f142480 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 22 Apr 2021 12:32:30 +0800 Subject: [PATCH 14/20] Revert renaming of file --- src/libs/Navigation/AppNavigator/PublicScreens.js | 4 ++-- src/pages/{SetPasswordForm.js => SetPasswordPage.js} | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) rename src/pages/{SetPasswordForm.js => SetPasswordPage.js} (96%) diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js index 50074ea8db8e..4048bc29e766 100644 --- a/src/libs/Navigation/AppNavigator/PublicScreens.js +++ b/src/libs/Navigation/AppNavigator/PublicScreens.js @@ -1,7 +1,7 @@ import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; import SignInPage from '../../../pages/signin/SignInPage'; -import SetPasswordForm from '../../../pages/SetPasswordForm'; +import SetPasswordPage from '../../../pages/SetPasswordPage'; import ValidateLoginPage from '../../../pages/ValidateLoginPage'; import SCREENS from '../../../SCREENS'; @@ -29,7 +29,7 @@ export default () => ( ); diff --git a/src/pages/SetPasswordForm.js b/src/pages/SetPasswordPage.js similarity index 96% rename from src/pages/SetPasswordForm.js rename to src/pages/SetPasswordPage.js index 70a41e044ea1..1c7619f71512 100644 --- a/src/pages/SetPasswordForm.js +++ b/src/pages/SetPasswordPage.js @@ -54,7 +54,7 @@ const defaultProps = { }, }; -class SetPasswordForm extends Component { +class SetPasswordPage extends Component { constructor(props) { super(props); @@ -131,10 +131,10 @@ class SetPasswordForm extends Component { } } -SetPasswordForm.propTypes = propTypes; -SetPasswordForm.defaultProps = defaultProps; +SetPasswordPage.propTypes = propTypes; +SetPasswordPage.defaultProps = defaultProps; export default withOnyx({ credentials: {key: ONYXKEYS.CREDENTIALS}, account: {key: ONYXKEYS.ACCOUNT}, -})(SetPasswordForm); +})(SetPasswordPage); From 58476ddf2067458eb0dcba78524758833f4c99a0 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 26 Apr 2021 12:33:32 +0800 Subject: [PATCH 15/20] Revert proptypes change. --- src/pages/SetPasswordPage.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js index 1c7619f71512..dd83b8102188 100644 --- a/src/pages/SetPasswordPage.js +++ b/src/pages/SetPasswordPage.js @@ -16,6 +16,7 @@ import ButtonWithLoader from '../components/ButtonWithLoader'; import themeColors from '../styles/themes/default'; import SignInPageLayout from './signin/SignInPageLayout'; import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus'; +import validateLinkPropTypes from './validateLinkPropTypes'; const propTypes = { /* Onyx Props */ @@ -38,12 +39,8 @@ const propTypes = { password: PropTypes.string, }), - route: PropTypes.shape({ - params: PropTypes.shape({ - accountID: PropTypes.string, - validateCode: PropTypes.string, - }), - }), + // The accountID and validateCode are passed via the URL + route: validateLinkPropTypes, }; const defaultProps = { From 6e7208764438dd7ad1f406b41fd2b27a07ce1205 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 26 Apr 2021 12:34:20 +0800 Subject: [PATCH 16/20] Remove windowDimensions from SignInPage.js --- src/pages/signin/SignInPage.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index 039c292b547b..c6e280302838 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -12,7 +12,6 @@ import SignInPageLayout from './SignInPageLayout'; import LoginForm from './LoginForm'; import PasswordForm from './PasswordForm'; import ResendValidationForm from './ResendValidationForm'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; import compose from '../../libs/compose'; const propTypes = { @@ -45,8 +44,6 @@ const propTypes = { // Error to display when there is a session error returned authToken: PropTypes.string, }), - - ...windowDimensionsPropTypes, }; const defaultProps = { @@ -124,5 +121,4 @@ export default compose( credentials: {key: ONYXKEYS.CREDENTIALS}, session: {key: ONYXKEYS.SESSION}, }), - withWindowDimensions, )(SignInPage); From f7c0dc7091dba1f569fa91fd1543def1a5ef830f Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 27 Apr 2021 10:45:32 +0800 Subject: [PATCH 17/20] Revert new line --- src/pages/SetPasswordPage.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js index dd83b8102188..403977ef2c7b 100644 --- a/src/pages/SetPasswordPage.js +++ b/src/pages/SetPasswordPage.js @@ -2,8 +2,7 @@ import React, {Component} from 'react'; import { Text, TextInput, - View, - SafeAreaView, + View, SafeAreaView, } from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; From b3adcef97a4badf99c8a95e5290d090171d2b18c Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 27 Apr 2021 10:46:00 +0800 Subject: [PATCH 18/20] Remove unnecessary compose --- src/pages/signin/SignInPage.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index c6e280302838..be8c9abc6bb5 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -12,7 +12,6 @@ import SignInPageLayout from './SignInPageLayout'; import LoginForm from './LoginForm'; import PasswordForm from './PasswordForm'; import ResendValidationForm from './ResendValidationForm'; -import compose from '../../libs/compose'; const propTypes = { /* Onyx Props */ @@ -115,10 +114,8 @@ class SignInPage extends Component { SignInPage.propTypes = propTypes; SignInPage.defaultProps = defaultProps; -export default compose( - withOnyx({ - account: {key: ONYXKEYS.ACCOUNT}, - credentials: {key: ONYXKEYS.CREDENTIALS}, - session: {key: ONYXKEYS.SESSION}, - }), -)(SignInPage); +export default withOnyx({ + account: {key: ONYXKEYS.ACCOUNT}, + credentials: {key: ONYXKEYS.CREDENTIALS}, + session: {key: ONYXKEYS.SESSION}, +})(SignInPage); From 245cb91788bda665a7331a760ed7293a19f829fe Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 27 Apr 2021 10:47:39 +0800 Subject: [PATCH 19/20] Move import back --- src/pages/SetPasswordPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js index 403977ef2c7b..b9e2951273bd 100644 --- a/src/pages/SetPasswordPage.js +++ b/src/pages/SetPasswordPage.js @@ -8,6 +8,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import lodashGet from 'lodash/get'; +import validateLinkPropTypes from './validateLinkPropTypes'; import styles from '../styles/styles'; import {setPassword} from '../libs/actions/Session'; import ONYXKEYS from '../ONYXKEYS'; @@ -15,7 +16,6 @@ import ButtonWithLoader from '../components/ButtonWithLoader'; import themeColors from '../styles/themes/default'; import SignInPageLayout from './signin/SignInPageLayout'; import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus'; -import validateLinkPropTypes from './validateLinkPropTypes'; const propTypes = { /* Onyx Props */ From d0a6d1d1534a7f9f961cc3d1134ff6d6ed5f8625 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 27 Apr 2021 10:48:22 +0800 Subject: [PATCH 20/20] Move import back --- src/pages/SetPasswordPage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js index b9e2951273bd..8309ad5bd728 100644 --- a/src/pages/SetPasswordPage.js +++ b/src/pages/SetPasswordPage.js @@ -1,8 +1,9 @@ import React, {Component} from 'react'; import { + SafeAreaView, Text, TextInput, - View, SafeAreaView, + View, } from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx';