improve Login page error handling

Expensify · Oct 19, 2021 · 500ba78 · 500ba78
1 parent b986ef8
commit 500ba78
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js
@@ -212,6 +212,15 @@ function isValidUSPhone(phoneNumber) {
     return CONST.REGEX.PHONE_E164_PLUS.test(phoneNumber.replace(CONST.REGEX.NON_ALPHA_NUMERIC, '')) && CONST.REGEX.US_PHONE.test(phoneNumber);
 }
 
+/**
+ * Checks whether a value is a numeric string including `(`, `)`, `-` and optional leading `+`
+ * @param {String} input
+ * @returns {Boolean}
+ */
+function isNumericWithSpecialChars(input) {
+    return /^\+?\d*$/.test(input.replace(/[()-]/g, ''));
+}
+
 export {
     meetsAgeRequirements,
     isValidAddress,
@@ -226,4 +235,5 @@ export {
     isValidUSPhone,
     isValidURL,
     validateIdentity,
+    isNumericWithSpecialChars,
 };
diff --git a/src/libs/actions/Session.js b/src/libs/actions/Session.js
@@ -19,6 +19,7 @@ import Timers from '../Timers';
 import * as Pusher from '../Pusher/pusher';
 import NetworkConnection from '../NetworkConnection';
 import {getUserDetails} from './User';
+import {isNumericWithSpecialChars} from '../ValidationUtils';
 
 let credentials = {};
 Onyx.connect({
@@ -142,7 +143,7 @@ function fetchAccountDetails(login) {
                 }
             } else if (response.jsonCode === 402) {
                 Onyx.merge(ONYXKEYS.ACCOUNT, {
-                    error: CONST.REGEX.DIGITS_AND_PLUS.test(login)
+                    error: isNumericWithSpecialChars(login)
                         ? translateLocal('messages.errorMessageInvalidPhone')
                         : translateLocal('loginForm.error.invalidFormatEmailLogin'),
                 });

diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
@@ -15,7 +15,7 @@ import canFocusInputOnScreenFocus from '../../libs/canFocusInputOnScreenFocus';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import getEmailKeyboardType from '../../libs/getEmailKeyboardType';
 import ExpensiTextInput from '../../components/ExpensiTextInput';
-import CONST from '../../CONST';
+import {isNumericWithSpecialChars} from '../../libs/ValidationUtils';
 
 const propTypes = {
     /* Onyx Props */
@@ -80,7 +80,7 @@ class LoginForm extends React.Component {
         }
 
         if (!Str.isValidEmail(this.state.login) && !Str.isValidPhone(this.state.login)) {
-            if (CONST.REGEX.DIGITS_AND_PLUS.test(this.state.login)) {
+            if (isNumericWithSpecialChars(this.state.login)) {
                 this.setState({formError: 'messages.errorMessageInvalidPhone'});
             } else {
                 this.setState({formError: 'loginForm.error.invalidFormatEmailLogin'});