[HOLD for payment 2022-05-23] [$250] Validate password complexity in the front end

[marcaaron]

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. Sign in with a password that is too short

Expected Result:

1. Error message is shown and we do not call Authenticate command

Actual Result:

1. Authenticate command is called and error message is shown

Workaround:

Yes

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

Job Post https://www.upwork.com/jobs/~01b4cd92ce29d9f69c

View all open jobs on GitHub

IMPORTANT

Our password complexity check is in use here we're just not using it for sign in

App/src/CONST.js

Lines 376 to 377 in 84d058f

	// at least 8 characters, 1 capital letter, 1 lowercase number, 1 number
	PASSWORD_COMPLEXITY_REGEX_STRING: '^(?=.*[A-Z])(?=.*[0-9])(?=.*[a-z]).{8,}$',

[melvin-bot]

Triggered auto assignment to @muttmuure (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

@muttmuure Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@muttmuure Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[tgolen]

@thesahindia Care to put a quick proposal together for this?

[thesahindia]

@thesahindia Care to put a quick proposal together for this?

Yeah sure.

Proposal

We have a function for this already -

App/src/libs/ValidationUtils.js

Lines 276 to 277 in bd54857

	function isValidPassword(password) {
	return password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);

We can just use it inside validateAndSubmitForm

App/src/pages/signin/PasswordForm.js

Lines 93 to 100 in bd54857

	validateAndSubmitForm() {
	if (!this.state.password.trim() && this.props.account.requiresTwoFactorAuth && !this.state.twoFactorAuthCode.trim()) {
	this.setState({formError: 'passwordForm.pleaseFillOutAllFields'});
	return;
	}
	if (!this.state.password.trim()) {
	this.setState({formError: 'passwordForm.pleaseFillPassword'});

        if (!ValidationUtils.isValidPassword(this.state.password)) {
            this.setState({formError: 'passwordForm.error.incorrectLoginOrPassword'});
            return;
        }

Just a quick question, we wanna show the same error message right?

[tgolen]

Looks good to me! @kevinksullivan Can you spin up something in Upwork for this and hire @thesahindia?

Just a quick question, we wanna show the same error message right?

Yeah, I think passwordForm.error.incorrectLoginOrPassword is fine to use for now.