[HOLD for payment 2021-09-10] Sign in - Error message is not specific if password is not entered

[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. Lunch the app
2. Put user name or email
3. On Password page click on Sign in

Expected Result:

Expected message - Error message should be specific as "Please fill out password field"

Actual Result:

Message is displayed as Please fill out all the fields

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web ✔️
• iOS ✔️
• Android ✔️
• Desktop App ✔️
• Mobile Web ✔️

Version Number:
1.0.88-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @Dal-Papa (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[thesahindia]

Proposal

Adding specific error message inside this function can fix the issue.

Only three conditions are required.

1. When both the fields are empty and this.props.account.requiresTwoFactorAuth is true (Please fill out all the fields)
2. When only the password field is empty (Please fill the password)
3. When only the twoFactorAuthCode is empty and is required. (Please fill the two factor code)

Here's the code which should work here:

    /**
     * Check that all the form fields are valid, then trigger the submit callback
     */
    validateAndSubmitForm() {
        if (!this.state.password.trim()
            && (this.props.account.requiresTwoFactorAuth && !this.state.twoFactorAuthCode.trim())
        ) {
            this.setState({formError: this.props.translate('passwordForm.pleaseFillOutAllFields')});
            return;
        }
        if (!this.state.password.trim()) {
            this.setState({formError: this.props.translate('passwordForm.pleaseFillPassword')});
            return;
        }
        if (this.props.account.requiresTwoFactorAuth && !this.state.twoFactorAuthCode.trim()) {
            this.setState({formError: this.props.translate('passwordForm.pleaseFillTwoFactorAuth')});
            return;
        }
        this.setState({
            formError: null,
        });

        signIn(this.state.password, this.state.twoFactorAuthCode);
    }

[Dal-Papa]

The proposal looks coherent. Will tag a CM.

[MelvinBot]

Triggered auto assignment to @puneetlath (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[isagoico]

Issue reproducible during KI retests

[MelvinBot]

Triggered auto assignment to @jamesdeanexpensify (Waiting for copy), see https://stackoverflow.com/c/expensify/questions/7025/ for more details.

[puneetlath]

@jamesdeanexpensify added the waiting for copy label as we need some copy for the specific error messages described here. We'll need them in Spanish as well.

@thesahindia your proposal seems good to me. You'll also need to add the new copy that @jamesdeanexpensify provides here and here.

Here's the Upwork job: https://www.upwork.com/jobs/~0148e14c6f52be895f. Go ahead and apply there and I can assign you the job.

[puneetlath]

Actually it looks like the spanish translations for existing messages are being handled here, right @Jag96? In which case we just need spanish versions of the new messages.

[thesahindia]

Thanks @puneetlath
I've applied to the job. Will wait for the translations.

[puneetlath]

Great! Feel free to start on the PR with some placeholder copy until the final copy is provided by @jamesdeanexpensify.

[jamesdeanexpensify]

Got it, so if I'm understanding correctly, we need three pieces of copy:

1. When both fields are empty, we can say: Please fill out all fields.
2. When the password field is empty, we can say: Please enter your password.
3. When the two-factor auth field is empty, we can say: Please enter your two factor code.

[thesahindia]

1. When both fields are empty, we can say: Please fill out all fields.

2. When the password field is empty, we can say: Please enter your password.

3. When the two-factor auth field is empty, we can say: Please enter your two factor code.

Seems good to me!

[puneetlath]

@jamesdeanexpensify it looks like we don't use a dash in two-factor here. We should probably be consistent yeah?

I posted in the #espanol channel about getting the spanish versions.

[jamesdeanexpensify]

Ah, I didn't see that screenshot before. I actually think we should update it to the hyphenated version because that's how it's spelled almost everywhere online. Is that possible?

[Jag96]

Actually it looks like the spanish translations for existing messages are being handled here, right @Jag96? In which case we just need spanish versions of the new messages.

Yes, #4880 is to ensure that the error message translations happen when switching languages on the sign in form, so now anytime we set formError we'll set the translation key (this.setState({formError: 'passwordForm.pleaseFillOutAllFields'});) rather than setting the translated text (this.setState({formError: this.props.translate('passwordForm.pleaseFillOutAllFields')});)

[puneetlath]

@jamesdeanexpensify it is possible, but everywhere in our product (.com and .cash) we use the non-hyphenated version. So if we want to change that, let's do it in a separate issue.

[jamesdeanexpensify]

Yep, I can take that to a new issue soon. Thanks!

[puneetlath]

Ok @jamesdeanexpensify @thesahindia I edited both your comments to remove the dash.

[thesahindia]

We still need spanish translations for these two messages:

1. Please enter your password. (might be "Por favor introduce tu contraseña." taken out from here)
2. Please enter your two factor code.

[saracouto]

Hey @thesahindia, for those two sentences:

1. Por favor, introduce tu contraseña.
2. Por favor, introduce tu código 2 Factores.

[puneetlath]

@saracouto should Factores be lower case like the rest of the words?

[saracouto]

lower case works I think!

[botify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[puneetlath]

PR merged. Will be paid 7 days after production deploy if no regressions. Thanks @thesahindia!

[botify]

🚀 Deployed to staging by @puneetlath in version: 1.0.92-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

[botify]

🚀 Deployed to production by @roryabraham in version: 1.0.93-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[puneetlath]

Paid!