[HOLD for payment 2023-08-16] [$1000] Incorrect Error Handling for Invalid Phone Number during Sign-In

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Access staging Expensify.
2. Enter an invalid phone number.
3. Note that the error handling message states "The email entered is invalid. Please fix the format and try again," without addressing the invalid phone number.

Expected Result:

The error handling message should indicate that the entered email or phone number is invalid, with a prompt to fix the format and proceed. with addressing the invalid phone number

Actual Result:

The error handling for invalid phone numbers does not inform the user about the invalid input. Only the error handling for invalid emails is displayed, instructing the user to enter a valid email and proceed, without addressing the issue of an invalid phone number during the sign-in process.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.47-1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

screen-capture.-.2023-07-27T015922.220.mp4

Expensify/Expensify Issue URL:
Issue reported by: @tewodrosGirmaA
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690452210915339

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017aee1e591c3b4eb3
• Upwork Job ID: 1686019986563760128
• Last Price Increase: 2023-07-31
• Automatic offers:
• mollfpr | Reviewer | 25933963
• akinwale | Contributor | 25933965
• tewodrosGirmaA | Reporter | 25933967

[melvin-bot]

Triggered auto assignment to @flaviadefaria (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[akinwale]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The wrong error message (e-mail related) is displayed when trying to validate an invalidate phone number for the login screen.

What is the root cause of that problem?

The ValidationUtils.isNumericWithSpecialChars method only checks for a single '+' character at the beginning of a phone number, and when that check passes, it proceeds to try to validate as an email.

What changes do you think we should make in order to solve the problem?

There are three different approaches to fix this

Solution 1
In the LoginForm component, show the phone number validation error if the following two conditions for parsedPhoneNumber are met.

1. parsedPhoneNumber.number.input only contains numbers and plus signs
2. parsedPhoneNumber.valid or parsedPhoneNumber.possible is false, or if necessary, check if both are false.

App/src/pages/signin/LoginForm.js

Line 129 in 1e84793

const parsedPhoneNumber = parsePhoneNumber(phoneLogin);

Here's what the parsedPhoneNumber object looks like in this scenario:

{"number": {"input":"+251937112339+251937112339"},"regionCode":"ET","valid":false,"possible":false,"possibility":"unknown"}

Solution 2
Update the regex in the ValidationUtils.isNumericWithSpecialChars method to correctly validate the number if one or more '+' signs exist.

App/src/libs/ValidationUtils.js

Line 316 in bdd8e51

return /^\+?\d*$/.test(LoginUtils.getPhoneNumberWithoutSpecialChars(input));

return /^\+?[\d\+]*$/.test(LoginUtils.getPhoneNumberWithoutSpecialChars(input));

The following regex pattern can also be used: /^\+?[\d\+]+$/.

Solution 3
Taking #23803 (comment) and #23803 (comment) into consideration, we can use a startsWith check for a preceding + (since every input that starts with + will be considered a phone number) and perform the necessary phone number validation on the value.

Something like the following:

if (loginTrim.startsWith('+') && !ValidationUtils.isNumericWithSpecialChars(loginTrim)) {
    // show phone number error
}

This can be used in addition to the regex pattern in Solution 2 to validate other number inputs where the user does not input the '+' sign at the beginning.

What alternative solutions did you explore? (Optional)

None.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Incorrect Error Handling for Invalid Phone Number during Sign-In

What is the root cause of that problem?

This issue is related to below code.

App/src/pages/signin/LoginForm.js

Lines 131 to 138 in ec1ccf8

	if (!Str.isValidEmail(loginTrim) && !parsedPhoneNumber.possible) {
	if (ValidationUtils.isNumericWithSpecialChars(loginTrim)) {
	setFormError('common.error.phoneNumber');
	} else {
	setFormError('loginForm.error.invalidFormatEmailLogin');
	}
	return;
	}

ValidationUtils.isNumericWithSpecialChars(input) is checking whether the input string, after removing special characters, consists only of digits and optionally starts with a (+) sign.

What changes do you think we should make in order to solve the problem?

• Based on the Expected Result we can modify the below code logic.
  

  App/src/pages/signin/LoginForm.js

  Lines 131 to 138 in ec1ccf8

  	if (!Str.isValidEmail(loginTrim) && !parsedPhoneNumber.possible) {
  	if (ValidationUtils.isNumericWithSpecialChars(loginTrim)) {
  	setFormError('common.error.phoneNumber');
  	} else {
  	setFormError('loginForm.error.invalidFormatEmailLogin');
  	}
  	return;
  	}

-And another approach is we can modify the regex in the below code.

App/src/libs/ValidationUtils.js

Lines 315 to 317 in ec1ccf8

	function isNumericWithSpecialChars(input) {
	return /^\+?\d*$/.test(LoginUtils.getPhoneNumberWithoutSpecialChars(input));
	}

What alternative solutions did you explore? (Optional)

None

[spcheema]

In my opinion it should not be considered a phone number.

Unless there is a valid scenario of having two +. Let's consider it email then.

[flaviadefaria]

Adding the external label. Overall the logic should be that if an input starts with a “+” then it should default to the phone message error.