[User Settings] Allow users to add secondary logins

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

---

With the new Settings > Profile page having been added, we need to add some new functionality: Allowing users to add new secondary logins.

Deliverables

• Logins (Email and Phone Number):
  • Get the loginList from the user onyx key and determine if the user has any secondary logins that we should display
    • If the primary login is an email address, we want to display a phone login if one exists
    • If the primary login is a phone number, we want to display an email address if one exists
  • If no secondary login exists, ensure there is an Add button next to the requisite field.
    • When this button is clicked we should display a text field for the user to enter their password.
    • Once the password has been entered we should call User.addSecondaryLogin
  • If a secondary login exists but is not validated, show a Resend button next to the text field. Clicking on this button should call User.resendValidateCode
  • If a secondary login exists and is validated, ensure the field is locked.
    • If the user has multiple validated secondary logins, choose the first one from the list.
  • The phone number field should have a note beneath it, which changes depending on the status of the phone login
    • Non-Existant: Add your phone number to settle up via Venmo.
    • Unvalidated: The number has not yet been validated. Click the button to resend the validation link via text.
    • Validated: Use your phone number to settle up via Venmo.

Mobile

No Phone Number	Add Phone Number	Password Prompt	Unvalidated Phone Number	Validated Phone Number

Web: should follow the same flow as mobile and looks the same except the view is within a right-hand-modal eg. Unvalidated Phone on Web:

Mobile flow with Email as Secondary Login:

No Email	Add Email	Password Prompt	Unvalidated Email	Validated Email

Platform:

Where is this issue occurring?

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

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/154988

[shawnborton]

I actually quite like what you explored above Michelle! We’ve been using a pattern more and more where we use a row that has + Action Text for adding things, and saving buttons for when the state of something gets changed. For example, in the Wallet flow for adding a payment method (I put this below on the left) we use this pattern and I think it works well.

So here is what that might look like:

Also sorry for the late feedback on this, but I wonder if we should make the read-only field look more like plain text, like we do in the profile view for instance:

[NikkiWines]

@Maftalion, I know we were discussing some weirdness with getting the user.loginList when building this on the iOS sim. I’ve figured out this issue and it looks like we need to be passing 'account, loginList, nameValuePairs' not ['account', 'loginList', 'nameValuePairs'] here.

If you do that you should get all the requisite info in the response! 🎉