Validation Message in Change Password Form

[mananjadhav]

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. Go to Settings Page
2. Click Change Password
3. Try to enter different "New Password" and "Confirm New Password"

Expected Result:

It should ideally show a validation message of the password mismatch

Actual Result:

No error message is displayed with the button disabled.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

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

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @zanyrenney (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[parasharrajat]

I think this was already there. Wasn't it?

[mananjadhav]

Proposal

I would want to add two aspects to this:

1. Show a validation message between when the New Password and Confirm Password don't match
2. Add a visibility toggle to the Password Fields. This will make it simple for the user to see the issue.

Approach:

More or less the implementation looks like the following:

In the PasswordPage,

this.state = {
            currentPassword: '',
            newPassword: '',
            confirmNewPassword: '',
            isPasswordRequirementsVisible: false,
            passwordValidationError: '',
            securedTextEntry: {
                currentPassword: true,
                newPassword: true,
                confirmNewPassword: true
            }
        };

Add onBlur={() => matchNewPasswords()}

matchNewPasswords() {
    if(this.state.newPassword !== this.state.confirmNewPassword) {
         this.setState({ passwordValidationError: translate('passwordMismatchError')});
    } 
}
toggleSecureEntry(fieldKey) {
        this.setState(prevState => {
          return {
            securedTextEntry: {
                ...prevState.securedTextEntry,
                [fieldKey]: !prevState.securedTextEntry[fieldKey],
            }
          };
        });
    }


{this.state.passwordValidationError && (
                                <Text style={[styles.formHint, styles.mt1, error]}>
                                    {this.state.passwordValidationError}
                                </Text>
                            )}

Update the text input to have a toggle icon on the right. We can even move this as a new PasswordField with this visibility prop.

<View style={styles.iconInputSection}> // Some alignment effort is required to get the icon inside the input field.
                                <TextInput
                                    ref={el => this.currentPasswordInputRef = el}
                                    secureTextEntry={this.state.securedTextEntry.currentPassword}
                                    autoCompleteType="password"
                                    textContentType="password"
                                    style={[styles.textInput, styles.inputWithIcon]}
                                    value={this.state.currentPassword}
                                    onChangeText={currentPassword => this.setState({currentPassword})}
                                    returnKeyType="done"
                                />
                                <Pressable style={styles.iconInput} onPress={() => this.toggleSecureEntry('currentPassword')}>
                                    <Icon src={this.state.securedTextEntry.currentPassword ? Eye : EyeSlash }  />
                                </Pressable>
                            </View>

[mananjadhav]

@parasharrajat Couldn't find that on the Change Password page.

[MelvinBot]

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

[MelvinBot]

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

[dylanexpensify]

On it!

[dylanexpensify]

Upwork Job Posting - here.

[MelvinBot]

Triggered auto assignment to @AndrewGable (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[AndrewGable]

@dylanexpensify can you hire @mananjadhav? The proposal looks good, thanks!

[mananjadhav]

@AndrewGable Thanks. Am I supposed to add the validation message only or also the visibility toggle? The latter will have to be added to other password fields too.

[AndrewGable]

I would say let's focus on validation message only. We do not have the visibility functionality on Expensify.com, so I think it's fine to not implement it for now.

[mananjadhav]

Noted. Thanks.

[dylanexpensify]

Working on this now @AndrewGable!

[dylanexpensify]

@AndrewGable @mananjadhav I have sent the offer.

[mananjadhav]

@dylanexpensify Received the invite for 250$. Shouldn't it be 500$ as I've posted the issue. Thanks.

[dylanexpensify]

Hi @mananjadhav! Ah yes, sorry for the oversight. Will update the offer to reflect the correct amount.

[dylanexpensify]

@mananjadhav I've gone ahead and sent over the new offer!

[dylanexpensify]

Confirming @mananjadhav has been hired for this.

[mallenexpensify]

@mananjadhav The $250 bonus for reporting this issue (if you fix it) is added at the end once final payment is made. If @dylanexpensify added it before, that's fine for this job.

[mananjadhav]

@mallenexpensify Thanks for clarifying. Noted.

[MelvinBot]

@AndrewGable, @dylanexpensify Huh... This is 4 days overdue. Who can take care of this?

[MelvinBot]

@AndrewGable, @dylanexpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[mallenexpensify]

@dylanexpensify update plz

[dylanexpensify]

On this today, sorry competing priorities kept me distracted.

[dylanexpensify]

Contributor: Paid
Contract: Completed
Upwork Post: Closed