[HOLD for payment 2021-12-06] Change Password - Error message not displayed in red for incorrect new password

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:

Launch the app and login
Navigate to settings by clicking on the user avatar over LHN
Click on change password
Enter correct old password
Enter password not meeting the requirement for new password

Expected Result:

Error message displayed in red

Actual Result:

No error message displayed and only message displayed in black about password requirement

Workaround:

None needed, visual issue.

Platform:

Where is this issue occurring?

Web
iOS
Android
Desktop App
Mobile Web

Version Number: 1.0.92-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on GitHub

@Jag96

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

I had worked on the confirm password error message on this page. I would propose a very small fix here,

We should retain the prompt and only change the color of the message when the password doesn't match the requirement. So basically remove this.state.isPasswordRequirementsVisible and change the block to the following:

{(
      <Text style={[styles.textLabelSupporting, styles.mt1, !this.isValidPassword() && styles.formError]}>
          {this.props.translate('passwordPage.newPasswordPrompt')}
      </Text>
  )}

Here is my suggestion. We need to start validating (i.e. 1 capital letter, 1 lowercase letter, 1 number) new password as soon as some character entered. So as soon as start entering character in new password field, it will show message in red color due to password not match with rule initially. Now user go on typing new password and as soon as it become valid, the message shows in normal color.

So based on my thinking I will suggest to add condition at line 150 (within PasswordPage.js file), So overall behaviour remain same and it will just show message in red color whenever new password input value is not valid.

Code Before Update:

App/src/pages/settings/PasswordPage.js

Lines 149 to 153 in c2f83f3

    
           {this.state.isPasswordRequirementsVisible && ( 
        
               <Text style={[styles.textLabelSupporting, styles.mt1]}> 
        
                   {this.props.translate('passwordPage.newPasswordPrompt')} 
        
               </Text> 
        
           )}

Code After Update ( condition added at line 150):

{this.state.isPasswordRequirementsVisible && (
    <Text style={[styles.textLabelSupporting, styles.mt1, (this.state.newPassword && !this.isValidPassword()) && styles.formError]}>
        {this.props.translate('passwordPage.newPasswordPrompt')}
    </Text>
)}

Below is the screen recording how its looks once the suggested solution implemented.

Screen.Recording.2021-09-03.at.7.23.58.PM.mov

I understand that External label not set with this issue. So at present consider this as my suggestion. I hope it will be helpful to someone who handle it internally. If this issue considered as external and my solution accepted then kindly invite me on Upwork once project posted. Here is my upwork profile: https://www.upwork.com/freelancers/~01c718889ed7821f82 Thanks.

@isagoico

@isagoico was there a slack thread for this one? I didn't see one but just double-checking so I can have all the context

@Jag96

@Jag96 This was raised as part of our internal QA that's why there's no slack thread linked in this one.

Issue reproducible during KI retests

@Jag96

@Jag96 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

@mananjadhav

I think for this one we should keep the same convention from #5093, where:

Initially, the passwordPage.newPasswordPrompt message shows with grey text, even when the user hasn't typed anything
When the user starts typing, the passwordPage.newPasswordPrompt message shows w/ formError styles
Once the requirements are met, the passwordPage.newPasswordPrompt message shows w/ grey text again, even when the user goes to the next field

So the message will always be shown if that makes sense. @mananjadhav @PrashantMangukiya can you post updated proposals to match that convention?

@puneetlath

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

@mananjadhav

@mananjadhav @Jag96 how's this going?

PR is on the finish line. Hopefully it should get merged today.

Issue not reproducible during KI retests. (First week)

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.16-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix: Change password hint color to red when invalid, else grey #5130

If no regressions arise, payment will be issued on 2021-12-06. 🎊

Issue not reproducible during KI retests. (Second week)

@mananjadhav

Paid along along with n6 hold bonus. Thanks @mananjadhav!

@puneetlath

@puneetlath I received $250 for PR and $250 for n6-hold. But I guess I am eligible for company-offsite hold bonus as well.

Also while this PR was done for a specific requirement, we also updated the form validation styles and @Jag96 mentioned here #5130 (comment) if I take it up, there'll be additional bonus, so that should be an additional $250. @Jag96 Can you please help here?

@puneetlath

@puneetlath @mananjadhav is right, we should also pay out another $250 for the company-offsite hold and then an additional $250 for the updated scope of work agreed upon in #5130 (comment). So a total of $500 additional.

@mananjadhav

Got it, no problem! @mananjadhav I've sent you an offer through Upwork for the additional $500.

@puneetlath

Thanks @puneetlath, applied.

Thanks @Jag96

Navigation Menu

Repository navigation

[HOLD for payment 2021-12-06] Change Password - Error message not displayed in red for incorrect new password #4995

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

44 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	{this.state.isPasswordRequirementsVisible && (
	<Text style={[styles.textLabelSupporting, styles.mt1]}>
	{this.props.translate('passwordPage.newPasswordPrompt')}
	</Text>
	)}

[HOLD for payment 2021-12-06] Change Password - Error message not displayed in red for incorrect new password #4995

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

MelvinBot commented on Sep 1, 2021

mananjadhav commented on Sep 2, 2021

PrashantMangukiya commented on Sep 3, 2021

Jag96 commented on Sep 3, 2021

isagoico commented on Sep 3, 2021

isagoico commented on Sep 5, 2021

MelvinBot commented on Sep 7, 2021

Jag96 commented on Sep 7, 2021

MelvinBot commented on Sep 7, 2021

44 remaining items

puneetlath commented on Nov 22, 2021

mananjadhav commented on Nov 22, 2021

mvtglobally commented on Nov 29, 2021

botify commented on Nov 29, 2021

mvtglobally commented on Dec 6, 2021

puneetlath commented on Dec 6, 2021

mananjadhav commented on Dec 7, 2021

Jag96 commented on Dec 7, 2021

puneetlath commented on Dec 7, 2021

mananjadhav commented on Dec 7, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions