Stop double-submit of set password form

[tgolen]

Details

When pressing enter, the form was being submit twice. Once for the text input and one for the submit button. The multiple submits was causing validateAndSubmitForm() to be ran multiple times, and the second time it ran, it would have this.props.userSignUp.authToken from the first request. This caused changePasswordAndSignIn() to be triggered from an invalid state and put the UI into a position where it couldn't fetch all the reports. Since the reports couldn't fully load, it was stuck at a loading spinner.

Fixed Issues

$ #9058

Tests

For local tests, you'll need to be able to get the validate code for a new account.

1. Launch NewDot and make sure you're signed out
2. Sign in with a new email address to create a new account
3. From the CLI run ../script/sql.sh
4. Run the query SELECT FROM notifications ORDER BY created DESC LIMIT 0,1;
5. Look for the accountID and validateCode
6. Go back to NewDot and modify the URL to go to http://localhost:8080/setpassword/<accountID>/<validateCode> (use the values from the query)
7. Enter a valid password and press the ENTER key
8. Verify that you are taken into the app and everything loads
9. Repeat the entire process with another new user, this time, instead of pressing the ENTER key on step 7, click the submit button

• Verify that no errors appear in the JS console

QA Steps

1. Go to URL https://staging.new.expensify.com/
2. In the email field, enter a email address for a new account and press continue
3. Navigate to the email inbox of the account and open the validation email
4. Copy the link and change it to staging
5. Set a password that follows the password requirements
6. Submit the form by pressing the ENTER key
7. Verify the app loads everything properly
8. Repeat all the steps but for step 6, click the submit button on the form

• Verify that no errors appear in the JS console

Screenshots

This but only effects web because that is the only way to validate an account.

Web

2022-06-14_09-53-11.mp4

2022-06-14_09-37-19.mp4

Mobile Web

Desktop

iOS

Android

[marcaaron]

Heads up looks like this is a required prop and will be called here

App/src/pages/settings/NewPasswordForm.js

Line 23 in fb3b4ac

onSubmitEditing: PropTypes.func.isRequired,

App/src/pages/settings/NewPasswordForm.js

Line 79 in 639a559

onSubmitEditing={() => this.props.onSubmitEditing()}

https://reactnative.dev/docs/textinput#onsubmitediting (had to look this up wasn't quite sure what it was for)

[tgolen]

Ah, good to know. I'll put a no-op instead then.

[tgolen]

Updated

[OSBotify]

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

[aldo-expensify]

@tgolen I just noticed that this PR included changes on the package-lock.json, do we want to reverse?

[OSBotify]

🚀 Deployed to staging by @aldo-expensify in version: 1.1.78-0 🚀

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

[tgolen]

@aldo-expensify ah, phooey. That wasn't intended to get through. I'm sure it's fine (for the sake of production and for NPM packages), but I'm not sure what havok this will cause to other devs. Once we are all on M1s it will probably self-resolve. I think it's OK to lave as-is for now though.

[OSBotify]

🚀 Deployed to production by @sketchydroide in version: 1.1.78-8 🚀

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