From 5c9f6e9941b1b74eb6a92c23cd466bed6cb58910 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Wed, 13 Oct 2021 23:59:16 +0530 Subject: [PATCH 1/6] Added paypal.me username validation --- src/CONST.js | 1 + src/languages/en.js | 1 + src/languages/es.js | 1 + .../settings/Payments/AddPayPalMePage.js | 25 +++++++++++++++++++ 4 files changed, 28 insertions(+) diff --git a/src/CONST.js b/src/CONST.js index 5b12ef437efd..0de47e391f8b 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -441,6 +441,7 @@ const CONST = { CARD_NUMBER: /^[0-9]{15,16}$/, CARD_SECURITY_CODE: /^[0-9]{3,4}$/, CARD_EXPIRATION_DATE: /(0[1-9]|10|11|12)\/20[0-9]{2}$/, + PAYPAL_ME_USERNAME: /^[a-zA-Z0-9 ]*$/, // Adapted from: https://gist.github.com/dperini/729294 // eslint-disable-next-line max-len diff --git a/src/languages/en.js b/src/languages/en.js index b326922b9b75..bb44333f9dac 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -282,6 +282,7 @@ export default { addPayPalAccount: 'Add PayPal account', editPayPalAccount: 'Update PayPal account', growlMessageOnSave: 'Your PayPal username was successfully added', + formatError: 'Invalid PayPa.me username', }, addDebitCardPage: { addADebitCard: 'Add a Debit Card', diff --git a/src/languages/es.js b/src/languages/es.js index 178fe33cfe57..dfd34c1ff4d7 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -282,6 +282,7 @@ export default { addPayPalAccount: 'Agregar cuenta de PayPal', growlMessageOnSave: 'Su nombre de usuario de PayPal se agregó correctamente', editPayPalAccount: 'Actualizar cuenta de PayPal', + formatError: 'Usuario PayPa.me no válido', }, addDebitCardPage: { addADebitCard: 'Agregar una tarjeta de débito', diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js index 58905d2d6e8d..888e539e5c1b 100644 --- a/src/pages/settings/Payments/AddPayPalMePage.js +++ b/src/pages/settings/Payments/AddPayPalMePage.js @@ -37,8 +37,10 @@ class AddPayPalMePage extends React.Component { this.state = { payPalMeUsername: props.payPalMeUsername, + payPalMeUsernameError: false, }; this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this); + this.validatePaypalMeUsername = this.validatePaypalMeUsername.bind(this); this.paypalUsernameInputRef = null; } @@ -58,11 +60,31 @@ class AddPayPalMePage extends React.Component { * Sets the payPalMeUsername for the current user */ setPayPalMeUsername() { + const isValid = this.validatePaypalMeUsername(); + if (!isValid) { + return; + } NameValuePair.set(CONST.NVP.PAYPAL_ME_ADDRESS, this.state.payPalMeUsername, ONYXKEYS.NVP_PAYPAL_ME_ADDRESS); Growl.show(this.props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000); Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); } + /** + * Validate the paypal username with regex + * + * @returns {Boolean} + */ + validatePaypalMeUsername() { + const regex = CONST.REGEX.PAYPAL_ME_USERNAME; + if (this.state.payPalMeUsername && regex.test(this.state.payPalMeUsername)) { + this.setState({payPalMeUsernameError: true}); + return true; + } + this.setState({payPalMeUsernameError: false}); + return false; + } + + render() { return ( { @@ -92,6 +114,9 @@ class AddPayPalMePage extends React.Component { placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')} onChangeText={text => this.setState({payPalMeUsername: text})} returnKeyType="done" + hasError={this.state.payPalMeUsernameError} + errorText={this.props.translate('addPayPalMePage.formatError')} + /> From cbdad4287daadea72fadeb6e18963a84d143db34 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Thu, 14 Oct 2021 00:08:49 +0530 Subject: [PATCH 2/6] Fixed typos and flags for paypal validation --- src/CONST.js | 2 +- src/pages/settings/Payments/AddPayPalMePage.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 0de47e391f8b..260231add1de 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -441,7 +441,7 @@ const CONST = { CARD_NUMBER: /^[0-9]{15,16}$/, CARD_SECURITY_CODE: /^[0-9]{3,4}$/, CARD_EXPIRATION_DATE: /(0[1-9]|10|11|12)\/20[0-9]{2}$/, - PAYPAL_ME_USERNAME: /^[a-zA-Z0-9 ]*$/, + PAYPAL_ME_USERNAME: /^[a-zA-Z0-9]*$/, // Adapted from: https://gist.github.com/dperini/729294 // eslint-disable-next-line max-len diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js index 888e539e5c1b..85c8f9710eca 100644 --- a/src/pages/settings/Payments/AddPayPalMePage.js +++ b/src/pages/settings/Payments/AddPayPalMePage.js @@ -76,12 +76,12 @@ class AddPayPalMePage extends React.Component { */ validatePaypalMeUsername() { const regex = CONST.REGEX.PAYPAL_ME_USERNAME; - if (this.state.payPalMeUsername && regex.test(this.state.payPalMeUsername)) { + if (this.state.payPalMeUsername && !regex.test(this.state.payPalMeUsername)) { this.setState({payPalMeUsernameError: true}); - return true; + return false; } this.setState({payPalMeUsernameError: false}); - return false; + return true; } @@ -115,7 +115,7 @@ class AddPayPalMePage extends React.Component { onChangeText={text => this.setState({payPalMeUsername: text})} returnKeyType="done" hasError={this.state.payPalMeUsernameError} - errorText={this.props.translate('addPayPalMePage.formatError')} + errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''} /> From c4a4a0f91122ba61bb6aa19ce0079fa07d199c8e Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Fri, 15 Oct 2021 00:35:45 +0530 Subject: [PATCH 3/6] Corrected typo for paypal --- src/languages/en.js | 2 +- src/languages/es.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index bb44333f9dac..79d05c6e6eff 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -282,7 +282,7 @@ export default { addPayPalAccount: 'Add PayPal account', editPayPalAccount: 'Update PayPal account', growlMessageOnSave: 'Your PayPal username was successfully added', - formatError: 'Invalid PayPa.me username', + formatError: 'Invalid PayPal.me username', }, addDebitCardPage: { addADebitCard: 'Add a Debit Card', diff --git a/src/languages/es.js b/src/languages/es.js index dfd34c1ff4d7..c0c6d4efcda0 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -282,7 +282,7 @@ export default { addPayPalAccount: 'Agregar cuenta de PayPal', growlMessageOnSave: 'Su nombre de usuario de PayPal se agregó correctamente', editPayPalAccount: 'Actualizar cuenta de PayPal', - formatError: 'Usuario PayPa.me no válido', + formatError: 'Usuario PayPal.me no válido', }, addDebitCardPage: { addADebitCard: 'Agregar una tarjeta de débito', From a1e8ce18531562ec9099614d89b0cae2f325233f Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Fri, 15 Oct 2021 01:07:52 +0530 Subject: [PATCH 4/6] Moved validate func to ValidationUtils, removed error on text change --- src/libs/ValidationUtils.js | 10 ++++++++ .../settings/Payments/AddPayPalMePage.js | 25 ++++--------------- 2 files changed, 15 insertions(+), 20 deletions(-) diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js index 4b1223e25b78..10999fecbea7 100644 --- a/src/libs/ValidationUtils.js +++ b/src/libs/ValidationUtils.js @@ -135,6 +135,15 @@ function isValidSSNLastFour(ssnLast4) { return CONST.REGEX.SSN_LAST_FOUR.test(ssnLast4); } +/** + * + * @param {String} paypalUsername + * @returns {Boolean} + */ +function isValidPaypalUsername(paypalUsername) { + return paypalUsername && CONST.REGEX.PAYPAL_ME_USERNAME.test(paypalUsername); +} + /** * Validate that "date" is between 18 and 150 years in the past * @@ -226,4 +235,5 @@ export { isValidUSPhone, isValidURL, validateIdentity, + isValidPaypalUsername, }; diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js index 85c8f9710eca..69d798a001c5 100644 --- a/src/pages/settings/Payments/AddPayPalMePage.js +++ b/src/pages/settings/Payments/AddPayPalMePage.js @@ -19,6 +19,7 @@ import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; import FixedFooter from '../../../components/FixedFooter'; import Growl from '../../../libs/Growl'; import ExpensiTextInput from '../../../components/ExpensiTextInput'; +import {isValidPaypalUsername} from '../../../libs/ValidationUtils'; const propTypes = { /** Username for PayPal.Me */ @@ -40,7 +41,6 @@ class AddPayPalMePage extends React.Component { payPalMeUsernameError: false, }; this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this); - this.validatePaypalMeUsername = this.validatePaypalMeUsername.bind(this); this.paypalUsernameInputRef = null; } @@ -60,31 +60,17 @@ class AddPayPalMePage extends React.Component { * Sets the payPalMeUsername for the current user */ setPayPalMeUsername() { - const isValid = this.validatePaypalMeUsername(); + const isValid = isValidPaypalUsername(this.state.payPalMeUsername); if (!isValid) { + this.setState({payPalMeUsernameError: true}); return; } + this.setState({payPalMeUsernameError: false}); NameValuePair.set(CONST.NVP.PAYPAL_ME_ADDRESS, this.state.payPalMeUsername, ONYXKEYS.NVP_PAYPAL_ME_ADDRESS); Growl.show(this.props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000); Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); } - /** - * Validate the paypal username with regex - * - * @returns {Boolean} - */ - validatePaypalMeUsername() { - const regex = CONST.REGEX.PAYPAL_ME_USERNAME; - if (this.state.payPalMeUsername && !regex.test(this.state.payPalMeUsername)) { - this.setState({payPalMeUsernameError: true}); - return false; - } - this.setState({payPalMeUsernameError: false}); - return true; - } - - render() { return ( { @@ -112,11 +98,10 @@ class AddPayPalMePage extends React.Component { autoCorrect={false} value={this.state.payPalMeUsername} placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')} - onChangeText={text => this.setState({payPalMeUsername: text})} + onChangeText={text => this.setState({payPalMeUsername: text, payPalMeUsernameError: false})} returnKeyType="done" hasError={this.state.payPalMeUsernameError} errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''} - /> From 9a0b0b341062e45ba1f2cd2c0b7b879723ed6fb2 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Sat, 16 Oct 2021 01:24:31 +0530 Subject: [PATCH 5/6] Changed regex for Paypal username --- src/CONST.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CONST.js b/src/CONST.js index 260231add1de..f9b21e7aaa33 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -441,7 +441,7 @@ const CONST = { CARD_NUMBER: /^[0-9]{15,16}$/, CARD_SECURITY_CODE: /^[0-9]{3,4}$/, CARD_EXPIRATION_DATE: /(0[1-9]|10|11|12)\/20[0-9]{2}$/, - PAYPAL_ME_USERNAME: /^[a-zA-Z0-9]*$/, + PAYPAL_ME_USERNAME: /^[a-zA-Z0-9]+$/, // Adapted from: https://gist.github.com/dperini/729294 // eslint-disable-next-line max-len From 592ea97a53a8e01c96afed302f9377eaf2849ec8 Mon Sep 17 00:00:00 2001 From: Akshaya Salvi Date: Sun, 17 Oct 2021 19:32:34 +0530 Subject: [PATCH 6/6] Made the check boolean --- src/libs/ValidationUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js index 10999fecbea7..3d7a00e10fde 100644 --- a/src/libs/ValidationUtils.js +++ b/src/libs/ValidationUtils.js @@ -141,7 +141,7 @@ function isValidSSNLastFour(ssnLast4) { * @returns {Boolean} */ function isValidPaypalUsername(paypalUsername) { - return paypalUsername && CONST.REGEX.PAYPAL_ME_USERNAME.test(paypalUsername); + return Boolean(paypalUsername) && CONST.REGEX.PAYPAL_ME_USERNAME.test(paypalUsername); } /**