[HOLD for payment 2023-12-28] [$500] Login - Two error messages appear simultaneously

[izarutskaya]

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

---

Version Number: v1.4.8-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
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation: @

Action Performed:

1. Open the app
2. Enter a random incorrect phone number (I use 6786478646)
3. Tap Continue
4. Notice that an error message appears (The provided phone number belongs to a landline or VoIP, please use your email address instead)
5. Delete latest digit

Expected Result:

Only one error message displayed

Actual Result:

Two error messages appear simultaneously for a while

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6303062_1701861953627.Record_2023-12-05-23-29-42_4f9154176b47c00da84e32064abf1c48.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017dead7572ed3bc76
• Upwork Job ID: 1732367308152152064
• Last Price Increase: 2023-12-06
• Automatic offers:
• cubuspl42 | Reviewer | 28041559
• paultsimura | Contributor | 28041560

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017dead7572ed3bc76

[melvin-bot]

Triggered auto assignment to @johncschuster (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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @cubuspl42 (External)

[paultsimura]

Proposal

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

Both form validation and server errors are displayed briefly.

What is the root cause of that problem?

We store formErrorText and serverErrorText in separate variables. This was done on purpose in this PR: #14627, so we should keep the input errors separate from the server errors.

The issue is that we don't control showing either of the errors if another is present.

When the input changes, we call validation (which updates the state with the formError), and clear the server error. These changes are applied one after another, so there is a brief moment when the formError is set, but the server error is not removed yet.

App/src/pages/signin/LoginForm/BaseLoginForm.js

Lines 144 to 150 in d2cb714

	if (firstBlurred.current) {
	validate(text);
	}
	if (props.account.errors || props.account.message) {
	Session.clearAccountMessages();
	}

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

We should decide which error is the higher priority, and based on this display only one of them. IMO, it's the form validation, as it is executed on every input change, so it's more dynamic than the server error, which is updated only on the form submission.

So we should show the server error only if the form validation error is empty:

const hasServerError = !_.isEmpty(serverErrorText) && _.isEmpty(formErrorText);

App/src/pages/signin/LoginForm/BaseLoginForm.js

Lines 240 to 242 in d2cb714

	const formErrorText = useMemo(() => (formError ? translate(formError) : ''), [formError, translate]);
	const serverErrorText = useMemo(() => ErrorUtils.getLatestErrorMessage(props.account), [props.account]);
	const hasError = !_.isEmpty(serverErrorText);

Also, we should use hasServerError in other places where we plainly use !_.isEmpty(serverErrorText) on the BaseLoginForm.

Result:

Screen.Recording.2023-12-06.at.13.13.04.mov

What alternative solutions did you explore? (Optional)

If we decide that error separation is not relevant on the login form, we can revert the changes made in #14627 to keep only one error.

[ZhenjaHorbach]

Proposal

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

Login - Two error messages appear simultaneously

What is the root cause of that problem?

The main problem is that we use 2 fields for errors (one from server, second from validator) and there are cases when both of these values are valid

App/src/pages/signin/LoginForm/BaseLoginForm.js

Line 272 in bbe73ef

errorText={formErrorText}

App/src/pages/signin/LoginForm/BaseLoginForm.js

Line 295 in bbe73ef

message={serverErrorText}

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

I think the best way to fix this is
Transfer the logic of one error message to another
So that the error display uses only one component
Because we should always strive for a single source of truth

We can update constants like (formErrorText > serverErrorText):

App/src/pages/signin/LoginForm/BaseLoginForm.js

Lines 240 to 242 in bbe73ef

	const formErrorText = useMemo(() => (formError ? translate(formError) : ''), [formError, translate]);
	const serverErrorText = useMemo(() => ErrorUtils.getLatestErrorMessage(props.account), [props.account]);
	const hasError = !_.isEmpty(serverErrorText);

    const formErrorText = useMemo(() => (formError ? translate(formError) : ''), [formError, translate]);
    const serverErrorText = useMemo(() => ErrorUtils.getLatestErrorMessage(props.account), [props.account]);
    const errorText = formErrorText || serverErrorText;
    const hasError = !_.isEmpty(formErrorText) || !_.isEmpty(serverErrorText);

Then update line

errorText={errorText}

App/src/pages/signin/LoginForm/BaseLoginForm.js

Line 272 in bbe73ef

errorText={formErrorText}

And update FormAlertWithSubmitButton like (OR we can replace this component simply with Button because FormAlertWithSubmitButton is unnecessary. Also we can add FormHelpMessage inside LoginForm and don't use error message from Input) :

                    <View style={[styles.mt5]}>
                        <FormAlertWithSubmitButton
                            buttonText={translate('common.continue')}
                            isLoading={props.account.isLoading && props.account.loadingForm === CONST.FORMS.LOGIN_FORM}
                            onSubmit={validateAndSubmitForm}
                            containerStyles={[styles.mh0]}
                        />

App/src/pages/signin/LoginForm/BaseLoginForm.js

Lines 290 to 299 in bbe73ef

	<View style={[!_.isEmpty(serverErrorText) ? {} : styles.mt5]}>
	<FormAlertWithSubmitButton
	buttonText={translate('common.continue')}
	isLoading={props.account.isLoading && props.account.loadingForm === CONST.FORMS.LOGIN_FORM}
	onSubmit={validateAndSubmitForm}
	message={serverErrorText}
	isAlertVisible={!_.isEmpty(serverErrorText)}
	buttonStyles={[!_.isEmpty(serverErrorText) ? styles.mt3 : {}]}
	containerStyles={[styles.mh0]}
	/>

What alternative solutions did you explore? (Optional)

NA

[rojiphil]

Proposal

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

Two error messages appear simultaneously for a short time when we edit the phone/email input field after an unsuccessful signin attempt using invalid phone/email.

What is the root cause of that problem?

Upon failed sign-in attempt using invalid phone/email, the server error text gets displayed. Now, on editing the phone/email input field, we set the login variable and also perform validation here. However, this is done even before the session account messages are cleared here. As the input sanity check occurs first with an error, this gets rendered even before the session error messages are cleared and rendered. This is the root cause of the problem

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

We can change the order and bring Session.clearAccountMessages first to solve this problem like this:

            if (props.account.errors || props.account.message) {
                Session.clearAccountMessages();
            }

            setLogin(text);
            if (firstBlurred.current) {
                console.log("Validate OnTextInput");
                validate(text);
            }

We may also want to set the input and validate after account closure message here so that both the messages are not shown for a short while.

What alternative solutions did you explore? (Optional)