[User Settings] Add new Change Password view

[trjExpensify]

If you haven’t already, check out our contributing guidelines for onboarding!

---

Having added four new menu items to the Settings page, we now need to begin linking those menu items to actual pages. This issue pertains to the Change Password page.

The Change Password view will be displayed when the "Change Password" menu item is clicked. It will display a header with a left-facing arrow on the left-hand side, a title, and an X button to close the view on the right-hand side. The view will contain a prompt, three text boxes with a titles, and a button with the text Save.

Deliverables

• Clicking on the Change Password menu item on the Settings page will route the user to settings/passwords via the SETTINGS_PASSWORD route in ROUTES.js and display the new view
• The Two Factor Code field should only display if the account.requiresTwoFactorAuth is true
  • The two factor code text box should contain a placeholder saying Required when 2FA is enabled
• If an incorrect current password or 2FA code is provided we should display the following error Incorrect password. Please try again.
  • This is similar to what we do on the login screen
  • 
  • If account.requiresTwoFactorAuth is true, ensure the error message says Incorrect password or two factor code. Please try again.
  • Pressing Save should call User.changePassword
  • Pressing X will close the right-hand modal and route the user back to the last viewed report
  • Pressing < should display the main settings view.

Mobile	Web/Desktop

Upwork Link: https://www.upwork.com/jobs/~01fd29c39b73d1e4fa

[npsedhain]

Hi, I would love to contribute to this issue!

My proposal:

Since the basic block is already laid out for us. We can simply get to the PasswordPage.js and start adding the pre-exisiting components like <TextInput>.

We can get the value requiresTwoFactorAuth from onyx within our global state under the key ONYXKEYS.ACCOUNT. Then we can use this prop we add a check for the particular text field of 2FA code and add a placeholder for the same as stated.

We can then add a handler function on save and use the previous account information with also has an error
key to find if it has any error and print it accordingly. We will add a secondary check for the requiresTwoFactorAuth prop which will control the text for the error message.

We can then leverage the function changePassword inside the libs/action/User file as you have mentioned.

We can finally navigate to the respective routes depending upon the function handlers for each icons mentioned above.

Looking forward to working with you. I have also sent a proposal in Upwork under my name Anup Sedhain.

[Maftalion]

Proposal

• In the PasswordPage I'd set up a form following the screenshot in the issue description.
• I'd use the requiresTwoFactorAuth value to conditionally render/require the 2FA field
• Once Save is pressed I'd call changePassword and modify the function to return the promise so I can chain off to determine whether it was successful or not.
• If not successful, I'd display the correct error message depending on whether 2FA is required or not

Questions

• should the button be disabled until all fields are populated?
• is there any sort of validation for the password? (special character, > 6 characters, etc)
• is there a specific error code/message that would display that message or any error should display it?
• after successfully saving, what should it do? clear the form? navigate back to main settings page?

[NikkiWines]

should the button be disabled until all fields are populated?

Good question, I'd say yes so that we minimize malformed/ half-empty user input.

is there any sort of validation for the password? (special character, > 6 characters, etc)

Yes, the general rule we have for password validation is Password must be different than your old one, have at least 8 characters, 1 capital letter, 1 lowercase letter and 1 number. We should also check that the values for New Password and Confirm New Password are the same.

is there a specific error code/message that would display that message or any error should display it?

There are a few errors you can get back from the API, each with user-friendly response messages that you could display. The main error codes to look out for are 401 if the old password is wrong and 402 if the password doesn't meet the validation conditions mentioned above.

after successfully saving, what should it do? clear the form? navigate back to main settings page?

We were originally considering a snackbar/growl for success/failure but considered it out of scope for this issue - there doesn't need to be any sort of indicator for success at this time. Since there's no saved information that would be displayed on this page, I think we could navigate back to the main settings page after saving. cc: @michelle-thompson, I'd be curious to get your thoughts on this flow.

Edit: Note that @shawnborton has suggested we separate out adding feedback for these sorts of actions into a separate P/S here let's just think about whether we want to navigate back to the main settings page or stay on the change password page here.

[michelle-thompson]

I think that sounds all good. Though I do wonder if we should have a way for users to see what the password requirements are? Perhaps adding a tooltip or something?

[NikkiWines]

@michelle-thompson I do like the idea of showing password requirements. We don't have any sort of existing tooltip functionality, so I'm not sure I want to hold the PR going out on that being built. Maybe we could add a small note under the New Password field outlining the requirements?

cc: @Maftalion @francoisl just so you don't miss this, since I already approved the PR

[shawnborton]

I like the idea of just using small, muted text directly under the text input for the hint. Especially since tooltips don't really work well on mobile.

[NikkiWines]

Cool, @Maftalion for reference the copy we use on e.com is 8 or more characters, 1 lower case, 1 upper case, 1 number

[Maftalion]

Sounds good

I like the idea of just using small, muted text directly under the text input for the hint. Especially since tooltips don't really work well on mobile.

Would this go under the "new password" input or below the whole form? (under confirm pw) @shawnborton

[shawnborton]

Actually what if we just made the password hint look like normal paragraph text, and have it be the first part of this page? Something like this:

cc @michelle-thompson - curious for your thoughts.

[michelle-thompson]

What if the requirements show up under the New Password field when it's highlighted? Personally, I like the bulleted list because it makes for easier perusal than a paragraph.