Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paypal username field validation #5842

Merged
merged 7 commits into from
Oct 19, 2021
Merged

Paypal username field validation #5842

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5c9f6e9
Added paypal.me username validation
akshayasalvi Oct 13, 2021
cbdad42
Fixed typos and flags for paypal validation
akshayasalvi Oct 13, 2021
c4a4a0f
Corrected typo for paypal
akshayasalvi Oct 14, 2021
a1e8ce1
Moved validate func to ValidationUtils, removed error on text change
akshayasalvi Oct 14, 2021
9a0b0b3
Changed regex for Paypal username
akshayasalvi Oct 15, 2021
592ea97
Made the check boolean
akshayasalvi Oct 17, 2021
85444ab
Merge branch 'main' into paypal-field-validation
deetergp Oct 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/CONST.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/languages/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ export default {
addPayPalAccount: 'Add PayPal account',
editPayPalAccount: 'Update PayPal account',
growlMessageOnSave: 'Your PayPal username was successfully added',
formatError: 'Invalid PayPal.me username',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB: Sorry for being Nit-picky. but this does not sound friendly. You can ask this on Slack.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've asked, lets see if we get any response. Any suggestions from your side?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not really good with content but this is not really blocking this so if you don't get any feedback, then it's fine.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay got it. Thanks for the help.

},
addDebitCardPage: {
addADebitCard: 'Add a Debit Card',
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 PayPal.me no válido',
},
addDebitCardPage: {
addADebitCard: 'Agregar una tarjeta de débito',
Expand Down
10 changes: 10 additions & 0 deletions src/libs/ValidationUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A minor change as this condition does not always return boolean. when paypalUsername is ''.

If someone used this in JSX, It will crash the app. Better to convert paypalUsername in boolean.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well thinking more about it, should I change it to:
!paypalUsername || CONST.REGEX.PAYPAL_ME_USERNAME.test(paypalUsername)

Current behavior to remove the username is deleting the content.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well. I think @stitesExpensify can help here with it. Thanks for bringing this up.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I don't think we should add the !paypalUsername since I'm adding a way to delete it right now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the comment @stitesExpensify

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@parasharrajat I've updated the Regex instead by changing * to +. Let me know if that's fine.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup. that's fine.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is remaining.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done now.

}

/**
* Validate that "date" is between 18 and 150 years in the past
*
Expand Down Expand Up @@ -226,4 +235,5 @@ export {
isValidUSPhone,
isValidURL,
validateIdentity,
isValidPaypalUsername,
};
12 changes: 11 additions & 1 deletion src/pages/settings/Payments/AddPayPalMePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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') : ''}
/>
</View>
</View>
Expand Down