diff --git a/src/CONST.js b/src/CONST.js index 95cce45b2f40..b62c38fb0057 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -438,6 +438,7 @@ const CONST = { PHONE_MAX_LENGTH: 15, PHONE_MIN_LENGTH: 5, REGEX: { + SPECIAL_CHARS_WITHOUT_NEWLINE: /((?!\n)[()-\s\t])/g, US_PHONE: /^\+1\d{10}$/, DIGITS_AND_PLUS: /^\+?[0-9]*$/, PHONE_E164_PLUS: /^\+?[1-9]\d{1,14}$/, diff --git a/src/libs/LoginUtil.js b/src/libs/LoginUtil.js new file mode 100644 index 000000000000..e8346b2bfc54 --- /dev/null +++ b/src/libs/LoginUtil.js @@ -0,0 +1,14 @@ +import CONST from '../CONST'; + +/** + * Remove the special chars from the phone number + * @param {String} phone + * @return {String} + */ +function getPhoneNumberWithoutSpecialChars(phone) { + return phone.replace(CONST.REGEX.SPECIAL_CHARS_WITHOUT_NEWLINE, ''); +} + +export default { + getPhoneNumberWithoutSpecialChars, +}; diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js index 6a6f0516b9c1..e90d7b2658d6 100644 --- a/src/libs/ValidationUtils.js +++ b/src/libs/ValidationUtils.js @@ -2,6 +2,7 @@ import moment from 'moment'; import _ from 'underscore'; import CONST from '../CONST'; import {getMonthFromExpirationDateString, getYearFromExpirationDateString} from './CardUtils'; +import LoginUtil from './LoginUtil'; /** * Implements the Luhn Algorithm, a checksum formula used to validate credit card @@ -253,7 +254,7 @@ function isValidUSPhone(phoneNumber) { * @returns {Boolean} */ function isNumericWithSpecialChars(input) { - return /^\+?\d*$/.test(input.replace(/[()-]/g, '')); + return /^\+?\d*$/.test(LoginUtil.getPhoneNumberWithoutSpecialChars(input)); } /** diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js index 3926adc72933..922d9b30ced7 100644 --- a/src/pages/RequestCallPage.js +++ b/src/pages/RequestCallPage.js @@ -24,6 +24,7 @@ import Text from '../components/Text'; import KeyboardAvoidingView from '../components/KeyboardAvoidingView'; import RequestCallIcon from '../../assets/images/request-call.svg'; import {getFirstAndLastNameErrors} from '../libs/actions/PersonalDetails'; +import LoginUtil from '../libs/LoginUtil'; const propTypes = { ...withLocalizePropTypes, @@ -112,7 +113,7 @@ class RequestCallPage extends Component { policyID: personalPolicy.id, firstName: this.state.firstName, lastName: this.state.lastName, - phoneNumber: this.state.phoneNumber, + phoneNumber: LoginUtil.getPhoneNumberWithoutSpecialChars(this.state.phoneNumber), email: this.props.session.email, }); } @@ -134,7 +135,8 @@ class RequestCallPage extends Component { * @returns {String} */ getPhoneNumberError() { - if (_.isEmpty(this.state.phoneNumber.trim()) || !Str.isValidPhone(this.state.phoneNumber)) { + const phoneNumber = LoginUtil.getPhoneNumberWithoutSpecialChars(this.state.phoneNumber); + if (_.isEmpty(this.state.phoneNumber.trim()) || !Str.isValidPhone(phoneNumber)) { return this.props.translate('messages.errorMessageInvalidPhone'); } return ''; diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index 6da966cf1770..602be57d2a64 100755 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -16,6 +16,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import getEmailKeyboardType from '../../libs/getEmailKeyboardType'; import ExpensiTextInput from '../../components/ExpensiTextInput'; import {isNumericWithSpecialChars} from '../../libs/ValidationUtils'; +import LoginUtil from '../../libs/LoginUtil'; const propTypes = { /* Onyx Props */ @@ -79,7 +80,10 @@ class LoginForm extends React.Component { return; } - if (!Str.isValidEmail(this.state.login) && !Str.isValidPhone(this.state.login)) { + const phoneLogin = LoginUtil.getPhoneNumberWithoutSpecialChars(this.state.login); + const isValidPhoneLogin = Str.isValidPhone(phoneLogin); + + if (!Str.isValidEmail(this.state.login) && !isValidPhoneLogin) { if (isNumericWithSpecialChars(this.state.login)) { this.setState({formError: 'messages.errorMessageInvalidPhone'}); } else { @@ -93,7 +97,7 @@ class LoginForm extends React.Component { }); // Check if this login has an account associated with it or not - fetchAccountDetails(this.state.login); + fetchAccountDetails(isValidPhoneLogin ? phoneLogin : this.state.login); } render() {