Validation Message in Change Password Form

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:

Go to Settings Page
Click Change Password
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

@zanyrenney

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

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

Proposal

I would want to add two aspects to this:

Show a validation message between when the New Password and Confirm Password don't match
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>

@parasharrajat

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

@nkuoch

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

@mananjadhav

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

@mananjadhav

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

@mananjadhav

Confirming @mananjadhav has been hired for this.

@mananjadhav

@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.

@mallenexpensify

@mallenexpensify Thanks for clarifying. Noted.

@AndrewGable

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

@AndrewGable

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

@dylanexpensify

@dylanexpensify update plz

On this today, sorry competing priorities kept me distracted.

Contributor: Paid
Contract: Completed
Upwork Post: Closed

Navigation Menu

Repository navigation

Validation Message in Change Password Form #4367

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Approach:

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Validation Message in Change Password Form #4367

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

MelvinBot commented on Aug 2, 2021

parasharrajat commented on Aug 2, 2021

mananjadhav commented on Aug 2, 2021

Approach:

mananjadhav commented on Aug 2, 2021

MelvinBot commented on Aug 3, 2021

15 remaining items

dylanexpensify commented on Aug 4, 2021

dylanexpensify commented on Aug 4, 2021

dylanexpensify commented on Aug 4, 2021

mallenexpensify commented on Aug 4, 2021

mananjadhav commented on Aug 4, 2021

MelvinBot commented on Aug 9, 2021

MelvinBot commented on Aug 11, 2021

mallenexpensify commented on Aug 11, 2021

dylanexpensify commented on Aug 12, 2021

dylanexpensify commented on Aug 12, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions