Merge pull request #6293 from parasharrajat/login-userna,e

Allow spaces and special chars in phone number username
Expensify · Nov 18, 2021 · e1a8662 · e1a8662
2 parents d2d1718 + ac23e2e
commit e1a8662
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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() {