From 9b19b47f9ccf89f66a29346af7b1d0544a58edc3 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 23 Aug 2022 11:49:23 +0800 Subject: [PATCH 01/22] refactor resendValidationLink and ResendValidationForm to use new API --- src/libs/actions/Session/index.js | 29 +++++++++++++++++++----- src/pages/signin/ResendValidationForm.js | 29 ++++++++---------------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js index 23373dcf93fb..f2669aaec471 100644 --- a/src/libs/actions/Session/index.js +++ b/src/libs/actions/Session/index.js @@ -85,16 +85,33 @@ function signOutAndRedirectToSignIn() { } /** - * Resend the validation link to the user that is validating their account + * Request a validation link to be sent to the email of the user that is validating their account * * @param {String} [login] */ function resendValidationLink(login = credentials.login) { - Onyx.merge(ONYXKEYS.ACCOUNT, {isLoading: true}); - DeprecatedAPI.ResendValidateCode({email: login}) - .finally(() => { - Onyx.merge(ONYXKEYS.ACCOUNT, {isLoading: false}); - }); + const optimisticData = [{ + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.ACCOUNT, + value: {isLoading: true}, + }]; + const successData = [{ + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.ACCOUNT, + value: { + isLoading: false, + message: Localize.translateLocal('resendValidationForm.linkHasBeenResent'), + }, + }]; + const failureData = [{ + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.ACCOUNT, + value: { + isLoading: false, + }, + }]; + + API.read('RequestAccountValidationLink', {email: login}, {optimisticData, successData, failureData}); } /** diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index e643e94eed73..851316afd0f3 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -50,7 +50,7 @@ class ResendValidationForm extends React.Component { constructor(props) { super(props); - this.validateAndSubmitForm = this.validateAndSubmitForm.bind(this); + this.onSubmit = this.onSubmit.bind(this); this.state = { formSuccess: '', @@ -65,23 +65,12 @@ class ResendValidationForm extends React.Component { clearTimeout(this.successMessageTimer); } - /** - * Check that all the form fields are valid, then trigger the submit callback - */ - validateAndSubmitForm() { - this.setState({ - formSuccess: this.props.translate('resendValidationForm.linkHasBeenResent'), - }); - - if (!this.props.account.validated) { - Session.resendValidationLink(); - } else { + onSubmit() { + if (this.props.account.validated) { Session.resetPassword(); + return; } - - this.successMessageTimer = setTimeout(() => { - this.setState({formSuccess: ''}); - }, 5000); + Session.resendValidationLink(); } render() { @@ -107,9 +96,9 @@ class ResendValidationForm extends React.Component { {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {login, loginType})} - {!_.isEmpty(this.state.formSuccess) && ( - - {this.state.formSuccess} + {this.props.account && !_.isEmpty(this.props.account.error) && ( + + {this.props.account.error} )} @@ -123,7 +112,7 @@ class ResendValidationForm extends React.Component { success text={this.props.translate('resendValidationForm.resendLink')} isLoading={this.props.account.loading} - onPress={this.validateAndSubmitForm} + onPress={this.onSubmit} isDisabled={this.props.network.isOffline} /> From 0ef21bf425e451b8ce13657561fb3f0410a5f9ab Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 23 Aug 2022 11:50:51 +0800 Subject: [PATCH 02/22] revert comment change --- src/libs/actions/Session/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js index f2669aaec471..3b3659a8e41e 100644 --- a/src/libs/actions/Session/index.js +++ b/src/libs/actions/Session/index.js @@ -85,7 +85,7 @@ function signOutAndRedirectToSignIn() { } /** - * Request a validation link to be sent to the email of the user that is validating their account + * Resend the validation link to the user that is validating their account * * @param {String} [login] */ From 7c8c66f540b06a6b234a793c88f834b8d10e91db Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 23 Aug 2022 12:17:30 +0800 Subject: [PATCH 03/22] style --- src/pages/signin/ResendValidationForm.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index 851316afd0f3..74af24649494 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -51,10 +51,6 @@ class ResendValidationForm extends React.Component { super(props); this.onSubmit = this.onSubmit.bind(this); - - this.state = { - formSuccess: '', - }; } componentWillUnmount() { @@ -77,6 +73,13 @@ class ResendValidationForm extends React.Component { const isSMSLogin = Str.isSMSLogin(this.props.credentials.login); const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login; const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase(); + const error = _.chain(this.props.account.errors || []) + .keys() + .sortBy() + .reverse() + .map(key => this.props.account.errors[key]) + .first() + .value(); return ( <> @@ -96,9 +99,9 @@ class ResendValidationForm extends React.Component { {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {login, loginType})} - {this.props.account && !_.isEmpty(this.props.account.error) && ( + {error && ( - {this.props.account.error} + {error} )} From 392360bb9c8cade1203c4de30242057b269d25b8 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 23 Aug 2022 12:38:25 +0800 Subject: [PATCH 04/22] fix error handling --- src/libs/actions/Session/index.js | 1 + src/pages/signin/ResendValidationForm.js | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js index 3b3659a8e41e..ac510986d020 100644 --- a/src/libs/actions/Session/index.js +++ b/src/libs/actions/Session/index.js @@ -108,6 +108,7 @@ function resendValidationLink(login = credentials.login) { key: ONYXKEYS.ACCOUNT, value: { isLoading: false, + message: '', }, }]; diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index 74af24649494..214c4962292c 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -99,11 +99,16 @@ class ResendValidationForm extends React.Component { {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {login, loginType})} - {error && ( + {!this.props.account.message && error && ( {error} )} + {this.props.account.message && ( + + {this.props.account.message} + + )} redirectToSignIn()}> From 47db859a55d58acf80521c8e54bf4d4ab6cd6d25 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 23 Aug 2022 12:53:28 +0800 Subject: [PATCH 05/22] fix error handling --- src/libs/ErrorUtils.js | 17 +++++++++++++++++ src/pages/signin/LoginForm.js | 9 ++------- src/pages/signin/ResendValidationForm.js | 19 +++++++------------ 3 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/libs/ErrorUtils.js b/src/libs/ErrorUtils.js index 115468ff1ea6..2f420f580ace 100644 --- a/src/libs/ErrorUtils.js +++ b/src/libs/ErrorUtils.js @@ -1,3 +1,4 @@ +import _ from 'underscore'; import CONST from '../CONST'; /** @@ -35,7 +36,23 @@ function getAuthenticateErrorMessage(response) { } } +/** + * @param {Object} onyxData + * @param {Array} onyxData.errors + * @returns {String} + */ +function getLatestErrorMessage(onyxData) { + return _.chain(onyxData.errors || []) + .keys() + .sortBy() + .reverse() + .map(key => onyxData.errors[key]) + .first() + .value(); +} + export { // eslint-disable-next-line import/prefer-default-export getAuthenticateErrorMessage, + getLatestErrorMessage, }; diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index f80488fb3f4a..2490103b97e3 100755 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -21,6 +21,7 @@ import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButto import OfflineIndicator from '../../components/OfflineIndicator'; import {withNetwork} from '../../components/OnyxProvider'; import networkPropTypes from '../../components/networkPropTypes'; +import * as ErrorUtils from '../../libs/ErrorUtils'; const propTypes = { /** Should we dismiss the keyboard when transitioning away from the page? */ @@ -151,13 +152,7 @@ class LoginForm extends React.Component { render() { const formErrorTranslated = this.state.formError && this.props.translate(this.state.formError); - const error = formErrorTranslated || _.chain(this.props.account.errors || []) - .keys() - .sortBy() - .reverse() - .map(key => this.props.account.errors[key]) - .first() - .value(); + const error = formErrorTranslated || ErrorUtils.getLatestErrorMessage(this.props.account); return ( <> diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index 214c4962292c..4fd12250be8f 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -17,6 +17,7 @@ import * as ReportUtils from '../../libs/ReportUtils'; import OfflineIndicator from '../../components/OfflineIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import {withNetwork} from '../../components/OnyxProvider'; +import * as ErrorUtils from '../../libs/ErrorUtils'; const propTypes = { /* Onyx Props */ @@ -73,13 +74,7 @@ class ResendValidationForm extends React.Component { const isSMSLogin = Str.isSMSLogin(this.props.credentials.login); const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login; const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase(); - const error = _.chain(this.props.account.errors || []) - .keys() - .sortBy() - .reverse() - .map(key => this.props.account.errors[key]) - .first() - .value(); + const error = ErrorUtils.getLatestErrorMessage(this.props.account); return ( <> @@ -99,16 +94,16 @@ class ResendValidationForm extends React.Component { {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {login, loginType})} - {!this.props.account.message && error && ( - - {error} - - )} {this.props.account.message && ( {this.props.account.message} )} + {!this.props.account.message && error && ( + + {error} + + )} redirectToSignIn()}> From 09bb3a29afcbb02298d41ca223dfd2417e6c1d92 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 23 Aug 2022 13:07:02 +0800 Subject: [PATCH 06/22] remove unused imports --- src/pages/signin/ResendValidationForm.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index 4fd12250be8f..d85f405c1d6f 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -2,7 +2,6 @@ import React from 'react'; import {TouchableOpacity, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import _ from 'underscore'; import Str from 'expensify-common/lib/str'; import styles from '../../styles/styles'; import Button from '../../components/Button'; From 3238229d21b0a3a81c305c37de65c83a313206d5 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 24 Aug 2022 07:46:13 +0800 Subject: [PATCH 07/22] make Session action calls inline --- src/pages/signin/ResendValidationForm.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index d85f405c1d6f..d33da89744f1 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -47,12 +47,6 @@ const defaultProps = { }; class ResendValidationForm extends React.Component { - constructor(props) { - super(props); - - this.onSubmit = this.onSubmit.bind(this); - } - componentWillUnmount() { if (!this.successMessageTimer) { return; @@ -61,14 +55,6 @@ class ResendValidationForm extends React.Component { clearTimeout(this.successMessageTimer); } - onSubmit() { - if (this.props.account.validated) { - Session.resetPassword(); - return; - } - Session.resendValidationLink(); - } - render() { const isSMSLogin = Str.isSMSLogin(this.props.credentials.login); const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login; @@ -114,7 +100,7 @@ class ResendValidationForm extends React.Component { success text={this.props.translate('resendValidationForm.resendLink')} isLoading={this.props.account.loading} - onPress={this.onSubmit} + onPress={this.props.account.validated ? Session.resetPassword : Session.resendValidationLink} isDisabled={this.props.network.isOffline} /> From edb8d9c9f4b20ce36f032e641342469210eb4f23 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 24 Aug 2022 15:33:17 +0800 Subject: [PATCH 08/22] update look of error message to match login screen --- src/components/FormAlertError.js | 65 ++++++++++++++++++++++++ src/components/FormAlertWrapper.js | 29 +---------- src/pages/signin/ResendValidationForm.js | 7 ++- 3 files changed, 70 insertions(+), 31 deletions(-) create mode 100644 src/components/FormAlertError.js diff --git a/src/components/FormAlertError.js b/src/components/FormAlertError.js new file mode 100644 index 000000000000..49ae411c3fa4 --- /dev/null +++ b/src/components/FormAlertError.js @@ -0,0 +1,65 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import {View} from 'react-native'; +import styles from '../styles/styles'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import colors from '../styles/colors'; +import RenderHTML from './RenderHTML'; +import Text from './Text'; +import TextLink from './TextLink'; +import compose from '../libs/compose'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import {withNetwork} from './OnyxProvider'; + +const propTypes = { + /** Whether message is in html format */ + isMessageHtml: PropTypes.bool, + + /** Error message to display above button */ + message: PropTypes.string, + + ...withLocalizePropTypes, +}; + +const defaultProps = { + isMessageHtml: false, + message: '', +}; + +const FormAlertError = props => ( + + + + {!_.isEmpty(props.message) && props.isMessageHtml && ${props.message}`} />} + + {!_.isEmpty(props.message) && !props.isMessageHtml && {props.message}} + + {_.isEmpty(props.message) && ( + <> + + {`${props.translate('common.please')} `} + + + {props.translate('common.fixTheErrors')} + + + {` ${props.translate('common.inTheFormBeforeContinuing')}.`} + + + )} + + +); + +FormAlertError.propTypes = propTypes; +FormAlertError.defaultProps = defaultProps; + +export default compose( + withLocalize, + withNetwork(), +)(FormAlertError); diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index 4b2c4e484483..c8c771e3a010 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -13,6 +13,7 @@ import compose from '../libs/compose'; import networkPropTypes from './networkPropTypes'; import styles from '../styles/styles'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import FormAlertError from './FormAlertError'; const propTypes = { /** Wrapped child components */ @@ -54,33 +55,7 @@ const defaultProps = { // and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior. const FormAlertWrapper = props => ( - {props.isAlertVisible && ( - - - - {!_.isEmpty(props.message) && props.isMessageHtml && ${props.message}`} />} - - {!_.isEmpty(props.message) && !props.isMessageHtml && {props.message}} - - {_.isEmpty(props.message) && ( - <> - - {`${props.translate('common.please')} `} - - - {props.translate('common.fixTheErrors')} - - - {` ${props.translate('common.inTheFormBeforeContinuing')}.`} - - - )} - - - )} + {props.isAlertVisible && } {props.children(props.network.isOffline)} ); diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index d33da89744f1..ac1917cf8c82 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -17,6 +17,7 @@ import OfflineIndicator from '../../components/OfflineIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import {withNetwork} from '../../components/OnyxProvider'; import * as ErrorUtils from '../../libs/ErrorUtils'; +import FormAlertError from '../../components/FormAlertError'; const propTypes = { /* Onyx Props */ @@ -85,9 +86,7 @@ class ResendValidationForm extends React.Component { )} {!this.props.account.message && error && ( - - {error} - + )} redirectToSignIn()}> @@ -100,7 +99,7 @@ class ResendValidationForm extends React.Component { success text={this.props.translate('resendValidationForm.resendLink')} isLoading={this.props.account.loading} - onPress={this.props.account.validated ? Session.resetPassword : Session.resendValidationLink} + onPress={() => (this.props.account.validated ? Session.resetPassword() : Session.resendValidationLink())} isDisabled={this.props.network.isOffline} /> From 9eb610f0bcdc56d8eec9775d82e9578e940dd555 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 24 Aug 2022 15:33:38 +0800 Subject: [PATCH 09/22] fix function doc type --- src/libs/ErrorUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ErrorUtils.js b/src/libs/ErrorUtils.js index 2f420f580ace..bcc6c59cae2b 100644 --- a/src/libs/ErrorUtils.js +++ b/src/libs/ErrorUtils.js @@ -38,7 +38,7 @@ function getAuthenticateErrorMessage(response) { /** * @param {Object} onyxData - * @param {Array} onyxData.errors + * @param {Object} onyxData.errors * @returns {String} */ function getLatestErrorMessage(onyxData) { From 5df3a916426077aa104b8ad0657da76043f3f988 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 24 Aug 2022 15:33:50 +0800 Subject: [PATCH 10/22] use API.write instead of read --- src/libs/actions/Session/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js index ac510986d020..e739ea26f1bd 100644 --- a/src/libs/actions/Session/index.js +++ b/src/libs/actions/Session/index.js @@ -112,7 +112,7 @@ function resendValidationLink(login = credentials.login) { }, }]; - API.read('RequestAccountValidationLink', {email: login}, {optimisticData, successData, failureData}); + API.write('RequestAccountValidationLink', {email: login}, {optimisticData, successData, failureData}); } /** From bd28e3aa235d73515b0872281e23380f27cbd67d Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 24 Aug 2022 15:39:31 +0800 Subject: [PATCH 11/22] remove unused imports --- src/components/FormAlertWrapper.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index c8c771e3a010..a46ecda4f773 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -1,17 +1,9 @@ -import _ from 'underscore'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import React from 'react'; import {withNetwork} from './OnyxProvider'; -import Icon from './Icon'; -import * as Expensicons from './Icon/Expensicons'; -import RenderHTML from './RenderHTML'; -import TextLink from './TextLink'; -import Text from './Text'; -import colors from '../styles/colors'; import compose from '../libs/compose'; import networkPropTypes from './networkPropTypes'; -import styles from '../styles/styles'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import FormAlertError from './FormAlertError'; From c8d1d25546e8ac2c206c5d7f7a107e02c24151ff Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 07:44:42 +0800 Subject: [PATCH 12/22] Revert "update look of error message to match login screen" This reverts commit edb8d9c9f4b20ce36f032e641342469210eb4f23. --- src/components/FormAlertError.js | 65 ------------------------ src/components/FormAlertWrapper.js | 29 ++++++++++- src/pages/signin/ResendValidationForm.js | 7 +-- 3 files changed, 31 insertions(+), 70 deletions(-) delete mode 100644 src/components/FormAlertError.js diff --git a/src/components/FormAlertError.js b/src/components/FormAlertError.js deleted file mode 100644 index 49ae411c3fa4..000000000000 --- a/src/components/FormAlertError.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import _ from 'underscore'; -import {View} from 'react-native'; -import styles from '../styles/styles'; -import Icon from './Icon'; -import * as Expensicons from './Icon/Expensicons'; -import colors from '../styles/colors'; -import RenderHTML from './RenderHTML'; -import Text from './Text'; -import TextLink from './TextLink'; -import compose from '../libs/compose'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import {withNetwork} from './OnyxProvider'; - -const propTypes = { - /** Whether message is in html format */ - isMessageHtml: PropTypes.bool, - - /** Error message to display above button */ - message: PropTypes.string, - - ...withLocalizePropTypes, -}; - -const defaultProps = { - isMessageHtml: false, - message: '', -}; - -const FormAlertError = props => ( - - - - {!_.isEmpty(props.message) && props.isMessageHtml && ${props.message}`} />} - - {!_.isEmpty(props.message) && !props.isMessageHtml && {props.message}} - - {_.isEmpty(props.message) && ( - <> - - {`${props.translate('common.please')} `} - - - {props.translate('common.fixTheErrors')} - - - {` ${props.translate('common.inTheFormBeforeContinuing')}.`} - - - )} - - -); - -FormAlertError.propTypes = propTypes; -FormAlertError.defaultProps = defaultProps; - -export default compose( - withLocalize, - withNetwork(), -)(FormAlertError); diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index a46ecda4f773..1042c901d93e 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -5,7 +5,6 @@ import {withNetwork} from './OnyxProvider'; import compose from '../libs/compose'; import networkPropTypes from './networkPropTypes'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import FormAlertError from './FormAlertError'; const propTypes = { /** Wrapped child components */ @@ -47,7 +46,33 @@ const defaultProps = { // and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior. const FormAlertWrapper = props => ( - {props.isAlertVisible && } + {props.isAlertVisible && ( + + + + {!_.isEmpty(props.message) && props.isMessageHtml && ${props.message}`} />} + + {!_.isEmpty(props.message) && !props.isMessageHtml && {props.message}} + + {_.isEmpty(props.message) && ( + <> + + {`${props.translate('common.please')} `} + + + {props.translate('common.fixTheErrors')} + + + {` ${props.translate('common.inTheFormBeforeContinuing')}.`} + + + )} + + + )} {props.children(props.network.isOffline)} ); diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index ac1917cf8c82..d33da89744f1 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -17,7 +17,6 @@ import OfflineIndicator from '../../components/OfflineIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import {withNetwork} from '../../components/OnyxProvider'; import * as ErrorUtils from '../../libs/ErrorUtils'; -import FormAlertError from '../../components/FormAlertError'; const propTypes = { /* Onyx Props */ @@ -86,7 +85,9 @@ class ResendValidationForm extends React.Component { )} {!this.props.account.message && error && ( - + + {error} + )} redirectToSignIn()}> @@ -99,7 +100,7 @@ class ResendValidationForm extends React.Component { success text={this.props.translate('resendValidationForm.resendLink')} isLoading={this.props.account.loading} - onPress={() => (this.props.account.validated ? Session.resetPassword() : Session.resendValidationLink())} + onPress={this.props.account.validated ? Session.resetPassword : Session.resendValidationLink} isDisabled={this.props.network.isOffline} /> From 362a01519817835e805294c8c941c0d3e7411fc8 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 07:46:11 +0800 Subject: [PATCH 13/22] revert UI changes --- src/components/FormAlertWrapper.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index 1042c901d93e..4b2c4e484483 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -1,9 +1,17 @@ +import _ from 'underscore'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import React from 'react'; import {withNetwork} from './OnyxProvider'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import RenderHTML from './RenderHTML'; +import TextLink from './TextLink'; +import Text from './Text'; +import colors from '../styles/colors'; import compose from '../libs/compose'; import networkPropTypes from './networkPropTypes'; +import styles from '../styles/styles'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; const propTypes = { From d20eeb89bcff6f2e53ad6ec4ebc644290ac900be Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 07:47:12 +0800 Subject: [PATCH 14/22] fix onPress --- src/pages/signin/ResendValidationForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index d33da89744f1..f1b8982ca426 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -100,7 +100,7 @@ class ResendValidationForm extends React.Component { success text={this.props.translate('resendValidationForm.resendLink')} isLoading={this.props.account.loading} - onPress={this.props.account.validated ? Session.resetPassword : Session.resendValidationLink} + onPress={() => (this.props.account.validated ? Session.resetPassword() : Session.resendValidationLink())} isDisabled={this.props.network.isOffline} /> From 9f468d9a4931d5394ac8a027f7033b403eaeaf08 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 08:14:44 +0800 Subject: [PATCH 15/22] update success and error message styles --- src/pages/signin/ResendValidationForm.js | 31 ++++++++++++++++++------ 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index f1b8982ca426..0d1eb7069926 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -17,6 +17,10 @@ import OfflineIndicator from '../../components/OfflineIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import {withNetwork} from '../../components/OnyxProvider'; import * as ErrorUtils from '../../libs/ErrorUtils'; +import Icon from '../../components/Icon'; +import * as Expensicons from '../../components/Icon/Expensicons'; +import colors from '../../styles/colors'; +import variables from '../../styles/variables'; const propTypes = { /* Onyx Props */ @@ -60,6 +64,7 @@ class ResendValidationForm extends React.Component { const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login; const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase(); const error = ErrorUtils.getLatestErrorMessage(this.props.account); + const successMessage = this.props.account.message; return ( <> @@ -79,15 +84,25 @@ class ResendValidationForm extends React.Component { {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {login, loginType})} - {this.props.account.message && ( - - {this.props.account.message} - + {successMessage && ( + + + + + + {successMessage} + + )} - {!this.props.account.message && error && ( - - {error} - + {!successMessage && error && ( + + + + + + {error} + + )} redirectToSignIn()}> From 26e524ecf4f73f8d65324d23104bae822ebb08af Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 07:46:11 +0800 Subject: [PATCH 16/22] revert UI changes Signed-off-by: Jasper Huang --- src/components/FormAlertWrapper.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index 1042c901d93e..4b2c4e484483 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -1,9 +1,17 @@ +import _ from 'underscore'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import React from 'react'; import {withNetwork} from './OnyxProvider'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import RenderHTML from './RenderHTML'; +import TextLink from './TextLink'; +import Text from './Text'; +import colors from '../styles/colors'; import compose from '../libs/compose'; import networkPropTypes from './networkPropTypes'; +import styles from '../styles/styles'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; const propTypes = { From 7ea1fc9a3ec03b52bbaac7a2c11ba8334c0c8a3b Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 07:47:12 +0800 Subject: [PATCH 17/22] fix onPress Signed-off-by: Jasper Huang --- src/pages/signin/ResendValidationForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index d33da89744f1..f1b8982ca426 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -100,7 +100,7 @@ class ResendValidationForm extends React.Component { success text={this.props.translate('resendValidationForm.resendLink')} isLoading={this.props.account.loading} - onPress={this.props.account.validated ? Session.resetPassword : Session.resendValidationLink} + onPress={() => (this.props.account.validated ? Session.resetPassword() : Session.resendValidationLink())} isDisabled={this.props.network.isOffline} /> From 263e4f73729a4cd392450a9348f47c61f9e9ea3d Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 08:14:44 +0800 Subject: [PATCH 18/22] update success and error message styles Signed-off-by: Jasper Huang --- src/pages/signin/ResendValidationForm.js | 31 ++++++++++++++++++------ 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index f1b8982ca426..0d1eb7069926 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -17,6 +17,10 @@ import OfflineIndicator from '../../components/OfflineIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import {withNetwork} from '../../components/OnyxProvider'; import * as ErrorUtils from '../../libs/ErrorUtils'; +import Icon from '../../components/Icon'; +import * as Expensicons from '../../components/Icon/Expensicons'; +import colors from '../../styles/colors'; +import variables from '../../styles/variables'; const propTypes = { /* Onyx Props */ @@ -60,6 +64,7 @@ class ResendValidationForm extends React.Component { const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login; const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase(); const error = ErrorUtils.getLatestErrorMessage(this.props.account); + const successMessage = this.props.account.message; return ( <> @@ -79,15 +84,25 @@ class ResendValidationForm extends React.Component { {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {login, loginType})} - {this.props.account.message && ( - - {this.props.account.message} - + {successMessage && ( + + + + + + {successMessage} + + )} - {!this.props.account.message && error && ( - - {error} - + {!successMessage && error && ( + + + + + + {error} + + )} redirectToSignIn()}> From c168a4d6407e6c9ab78c830165f33ccaf136c120 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 07:44:42 +0800 Subject: [PATCH 19/22] Revert "update look of error message to match login screen" This reverts commit edb8d9c9f4b20ce36f032e641342469210eb4f23. Signed-off-by: Jasper Huang --- src/components/FormAlertError.js | 65 ------------------------ src/components/FormAlertWrapper.js | 29 ++++++++++- src/pages/signin/ResendValidationForm.js | 7 +-- 3 files changed, 31 insertions(+), 70 deletions(-) delete mode 100644 src/components/FormAlertError.js diff --git a/src/components/FormAlertError.js b/src/components/FormAlertError.js deleted file mode 100644 index 49ae411c3fa4..000000000000 --- a/src/components/FormAlertError.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import _ from 'underscore'; -import {View} from 'react-native'; -import styles from '../styles/styles'; -import Icon from './Icon'; -import * as Expensicons from './Icon/Expensicons'; -import colors from '../styles/colors'; -import RenderHTML from './RenderHTML'; -import Text from './Text'; -import TextLink from './TextLink'; -import compose from '../libs/compose'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import {withNetwork} from './OnyxProvider'; - -const propTypes = { - /** Whether message is in html format */ - isMessageHtml: PropTypes.bool, - - /** Error message to display above button */ - message: PropTypes.string, - - ...withLocalizePropTypes, -}; - -const defaultProps = { - isMessageHtml: false, - message: '', -}; - -const FormAlertError = props => ( - - - - {!_.isEmpty(props.message) && props.isMessageHtml && ${props.message}`} />} - - {!_.isEmpty(props.message) && !props.isMessageHtml && {props.message}} - - {_.isEmpty(props.message) && ( - <> - - {`${props.translate('common.please')} `} - - - {props.translate('common.fixTheErrors')} - - - {` ${props.translate('common.inTheFormBeforeContinuing')}.`} - - - )} - - -); - -FormAlertError.propTypes = propTypes; -FormAlertError.defaultProps = defaultProps; - -export default compose( - withLocalize, - withNetwork(), -)(FormAlertError); diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index a46ecda4f773..1042c901d93e 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -5,7 +5,6 @@ import {withNetwork} from './OnyxProvider'; import compose from '../libs/compose'; import networkPropTypes from './networkPropTypes'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import FormAlertError from './FormAlertError'; const propTypes = { /** Wrapped child components */ @@ -47,7 +46,33 @@ const defaultProps = { // and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior. const FormAlertWrapper = props => ( - {props.isAlertVisible && } + {props.isAlertVisible && ( + + + + {!_.isEmpty(props.message) && props.isMessageHtml && ${props.message}`} />} + + {!_.isEmpty(props.message) && !props.isMessageHtml && {props.message}} + + {_.isEmpty(props.message) && ( + <> + + {`${props.translate('common.please')} `} + + + {props.translate('common.fixTheErrors')} + + + {` ${props.translate('common.inTheFormBeforeContinuing')}.`} + + + )} + + + )} {props.children(props.network.isOffline)} ); diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index ac1917cf8c82..d33da89744f1 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -17,7 +17,6 @@ import OfflineIndicator from '../../components/OfflineIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import {withNetwork} from '../../components/OnyxProvider'; import * as ErrorUtils from '../../libs/ErrorUtils'; -import FormAlertError from '../../components/FormAlertError'; const propTypes = { /* Onyx Props */ @@ -86,7 +85,9 @@ class ResendValidationForm extends React.Component { )} {!this.props.account.message && error && ( - + + {error} + )} redirectToSignIn()}> @@ -99,7 +100,7 @@ class ResendValidationForm extends React.Component { success text={this.props.translate('resendValidationForm.resendLink')} isLoading={this.props.account.loading} - onPress={() => (this.props.account.validated ? Session.resetPassword() : Session.resendValidationLink())} + onPress={this.props.account.validated ? Session.resetPassword : Session.resendValidationLink} isDisabled={this.props.network.isOffline} /> From ed1f71ca3adb2944809272ff6cf3c9d3eaae5ccc Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 07:46:11 +0800 Subject: [PATCH 20/22] revert UI changes Signed-off-by: Jasper Huang Signed-off-by: Jasper Huang --- src/components/FormAlertWrapper.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js index 1042c901d93e..4b2c4e484483 100644 --- a/src/components/FormAlertWrapper.js +++ b/src/components/FormAlertWrapper.js @@ -1,9 +1,17 @@ +import _ from 'underscore'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import React from 'react'; import {withNetwork} from './OnyxProvider'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import RenderHTML from './RenderHTML'; +import TextLink from './TextLink'; +import Text from './Text'; +import colors from '../styles/colors'; import compose from '../libs/compose'; import networkPropTypes from './networkPropTypes'; +import styles from '../styles/styles'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; const propTypes = { From 14782c1ff77044d1b002307db9fba984701df96e Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 07:47:12 +0800 Subject: [PATCH 21/22] fix onPress Signed-off-by: Jasper Huang Signed-off-by: Jasper Huang --- src/pages/signin/ResendValidationForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index d33da89744f1..f1b8982ca426 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -100,7 +100,7 @@ class ResendValidationForm extends React.Component { success text={this.props.translate('resendValidationForm.resendLink')} isLoading={this.props.account.loading} - onPress={this.props.account.validated ? Session.resetPassword : Session.resendValidationLink} + onPress={() => (this.props.account.validated ? Session.resetPassword() : Session.resendValidationLink())} isDisabled={this.props.network.isOffline} /> From 435f2baca297fa39f8ef9caea93741db332396fb Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 25 Aug 2022 08:14:44 +0800 Subject: [PATCH 22/22] update success and error message styles Signed-off-by: Jasper Huang Signed-off-by: Jasper Huang --- src/pages/signin/ResendValidationForm.js | 31 ++++++++++++++++++------ 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index f1b8982ca426..0d1eb7069926 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -17,6 +17,10 @@ import OfflineIndicator from '../../components/OfflineIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import {withNetwork} from '../../components/OnyxProvider'; import * as ErrorUtils from '../../libs/ErrorUtils'; +import Icon from '../../components/Icon'; +import * as Expensicons from '../../components/Icon/Expensicons'; +import colors from '../../styles/colors'; +import variables from '../../styles/variables'; const propTypes = { /* Onyx Props */ @@ -60,6 +64,7 @@ class ResendValidationForm extends React.Component { const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login; const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase(); const error = ErrorUtils.getLatestErrorMessage(this.props.account); + const successMessage = this.props.account.message; return ( <> @@ -79,15 +84,25 @@ class ResendValidationForm extends React.Component { {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {login, loginType})} - {this.props.account.message && ( - - {this.props.account.message} - + {successMessage && ( + + + + + + {successMessage} + + )} - {!this.props.account.message && error && ( - - {error} - + {!successMessage && error && ( + + + + + + {error} + + )} redirectToSignIn()}>