[$500] When user didnt validate account, password cant be set in NewDot

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Create account in Old dot
2. Click on Free plan inbox card
3. Navigate to Settings > Security > change password
4. try to set password

Expected Result:

User should be able to change or set password or option message to validate emails should be displayed

Actual Result:

I am on an unvalidated account (no password set) but when I go to try to change my password, I get this error: New password must be different than your old password

Workaround:

unknown

Platform:

Where is this issue occurring?

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

Version Number: 1.2.7-0 Reproducible in staging?: Y Reproducible in production?: Y 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: @shawnborton Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1663891860480599

View all open jobs on GitHub

[melvin-bot[bot]]

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

[Puneet-here]

The user can't change/set a password for unvalidated account the api we have in the code base needs current password or validateCode to set a password so I think when user clicks on change password we should show a screen, asking the user to check their email and visit the magic link to set password because we already have sent them the magic link.

We can use account.validated to show that screen. This key won't be available if the account is unvalidated.

[shawnborton]

Yeah I agree with that approach @Puneet-here.

[melvin-bot[bot]]

@luacmartins Whoops! This issue is 2 days overdue. Let's get this updated quick!

[luacmartins]

I agree with the approach. @shawnborton do we have any mocks for the screen we should display in this case?

[shawnborton]

I think something simple like this would work?

[luacmartins]

That works! Thanks @shawnborton! I'll make this an external issue.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[melvin-bot[bot]]

Current assignee @luacmartins is eligible for the External assigner, not assigning anyone new.

[luacmartins]

lol there's something weird going on with the auto-assigner. I don't think it should have assigned @puneetlath, because of this comment

[puneetlath]

Ah, I think it's because I'm on both the CM and CME teams. So it's assigning me to create the Upwork job.

External Upwork job: https://www.upwork.com/jobs/~01fde17c934fb9885d Internal Upwork job: https://www.upwork.com/ab/applicants/1577428358718816256/job-details

[luacmartins]

AH good point @puneetlath!

[puneetlath]

Still waiting for proposals.

[shawnborton]

Not overdue

[puneetlath]

Updated to $500.

[tienifr]

Proposal

Problem

This issue is from PasswordPage.js When render the content of password page now we just check props.account.success is not empty to render PasswordConfirmationScreen when user successfully change password or form to edit password when user open this page

App/PasswordPage.js at dfb5bca05a5b12e62ec86520819fd5a4ac66e405 · Expensify/App

So with user who is not validated login (login from Expensiy.com, where password had not required to set ) account.success in normal will be empty and we render the form to edit password

=> It seem not logically unreasonable when user did not set password can change the password

Solution

We have a field to check whether user set their password or not is props.user.validated

I will follow design in ticket to add the text remind user to validated account and the button to resend the validation link to their email (use new component ResendValidationPage) by add logic in render of password page when user account is not validate. This mean when props.user.validated is false I will render the text and button to resend link and when user set their password to validate account parallel with props.user.validated is set to true and the form to reset password will be render

Code change : tienifr/App: Pull Request 8

Change demo : https://user-images.githubusercontent.com/113963320/195102460-1e0aab12-5de6-4499-8062-f7bcc933df8a.mp4

[Puneet-here]

I think we wanna use push to page here, pressing the resend validation link button should show resend validation form that we already use at our app, this way we can also reuse the same component.

[shawnborton]

Agree with that

[rushatgabhane]

we wanna use push to page here, pressing the resend validation link button should show resend validation form that we already use at our app, this way we can also reuse the same component

cc @tienifr feel free to submit an updated proposal

[tienifr]

Thanks for the reiview @Puneet-here @shawnborton @rushatgabhane. I have some update to code change in proposal please check

Updated Proposal

Solution

We have a field to check whether user set their password or not using props.user.validated

I will follow design in ticket to add the text remind user to validated account and the button to resend the validation link to their email by add logic in render of password page when user account is not validate. This mean when props.user.validated is false I will render the text and button to resend link and when user set their password to validate account parallel with props.user.validated is set to true and the form to reset password will be render

When we click the resend link button we will move to form resend validation links

Code change : tienifr/App: Pull Request 8

Change demo : video demo password page 3.webm

[shawnborton]

Thanks for sharing. Generally looks good but it looks like you are not using the correct amount of padding around the content:

Check other containers to see the correct padding, it should be more like 20px on left/right/bottom.

[tienifr]

@shawnborton Thanks for your review. I have fixed the padding and code to match your provided design, but I can not find the icon like you, now I see the Mail icon which seem best match with it. Can you show me where I can see the icon in design, or we can use Mail icon in this situation ?

Code change: tienifr/App: Pull Request 8

Video demo: video demo match design.webm

[shawnborton]

Nice, thanks for putting that together. I think the mail icon you used works just fine, so no worries there.

For this screen here:

I don't think we need the "Back" text since we have the back arrow in the top left of the modal. And then the green "Resend" button should match the full width style from the previous screen.

Either way, I think we can probably move forward with awarding the job? cc @puneetlath

[puneetlath]

Sounds good to me. @luacmartins you're the CME on this one, so your call!

[luacmartins]

I agree. @tienifr proposal looks good, but we should account for this style change.

[melvin-bot[bot]]

📣 @tienifr You have been assigned to this job by @luacmartins! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[tienifr]

@shawnborton thanks for your comment. I have some update to design change

1. To hide the back button in ResendValidationForm I have added to it the props shouldHideBackButton and we will render back button if this props is false
2. In order to make a green resend link button match the full width style from the previous screen, I add styles.flex1 for this button and set medium props of it to false

Please help me check again to confirm this implementation is approved

Code change: tienifr/App: Pull Request 8

Video demo: video demo for change.webm

[shawnborton]

Awesome, thanks for the update!

After reviewing this again, I actually think we can just remove the "Resend link" button from this final screen, as you can simply just go back one step to access the Resend Button from the screen before. Thoughts? Otherwise it feels strange that you might end up in a infinite loop of these buttons.

[tienifr]

@luacmartins I applied to the job, thanks. The PR will be ready by Oct 17