diff --git a/src/CONST.js b/src/CONST.js index 40b8710f1c59..1ab5fb1b64b7 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -444,6 +444,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 36a4f1d273a5..baf95625326b 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -284,6 +284,7 @@ export default { addPayPalAccount: 'Add PayPal account', editPayPalAccount: 'Update PayPal account', growlMessageOnSave: 'Your PayPal username was successfully added', + formatError: 'Invalid PayPal.me username', }, addDebitCardPage: { addADebitCard: 'Add a Debit Card', diff --git a/src/languages/es.js b/src/languages/es.js index 95e9ac082b68..e547291efabe 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -284,6 +284,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 PayPal.me no válido', }, addDebitCardPage: { addADebitCard: 'Agregar una tarjeta de débito', diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js index fd74aeb2b04a..62bef31a9628 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 Boolean(paypalUsername) && CONST.REGEX.PAYPAL_ME_USERNAME.test(paypalUsername); +} + /** * Validate that "date" is between 18 and 150 years in the past * @@ -236,4 +245,5 @@ export { isValidURL, validateIdentity, isNumericWithSpecialChars, + isValidPaypalUsername, }; diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js index 58905d2d6e8d..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 */ @@ -37,6 +38,7 @@ class AddPayPalMePage extends React.Component { this.state = { payPalMeUsername: props.payPalMeUsername, + payPalMeUsernameError: false, }; this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this); this.paypalUsernameInputRef = null; @@ -58,6 +60,12 @@ class AddPayPalMePage extends React.Component { * Sets the payPalMeUsername for the current user */ setPayPalMeUsername() { + 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); @@ -90,8 +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') : ''} />