Bug: Password field has an inaccurate error message

[thetanmancan]

Description

On the Registration page, which is also known as the Create a New Account page, if the user enters any of the following special characters, it triggers an error message:

` ~ ^ ( ) _ - + = [ ] { } \ | : ; ” ’ < > , . /

However, the error message that appears says "Your password must have at least 12 characters, at least one number, one capitalization, and one special character (e.g., !@#$%&*?)". The error message does not explain to the user what the error is that is occurring.

The error that is occurring in this scenario is that the user entered a special character that is not allowed in the Password field. The error message should be changed to reflect that.

Steps to Reproduce

1. Navigate to the TDM Login page.
2. Click the "Create an account" link.
3. In the Password field, enter "Thisis12345!^".
4. Click outside of the field.
5. Notice the error message that appears below.

Expected Result

The error message should explain that the user has entered a character that is not allowed.

Actual Result

The error message tells the user, "Your password must have at least 12 characters, at least one number, one capitalization, and one special character (e.g., !@#$%&*?)". These requirements were all met in Step 4, yet the user is still receiving an error message.

Password error message

Device Configuration

• Device: Desktop
• OS version: Windows 11
• Browser: Firefox
• Browser version: 134.0.2

Action Items

• Fix bug.
• Review with the product, development, design, and research teams. Update if needed based on feedback.
• Once finalized, add before and after images to the staging deck.
• Get Stakeholder sign-off via the stakeholder meeting slide deck.

[ExperimentsInHonesty]

I think it's possible the solution would be to let them see their password (like have an eyeball they can click). I realize it's more convenient if you tell them the exact error, but that's probably more coding.

Let's ask @entrotech to weigh in on this

[ExperimentsInHonesty]

@thetanmancan are you saying that all special characters are disallowed so the message should not be asking for them to use special characters?

[thetanmancan]

@ExperimentsInHonesty: Some special characters are required, but others cause an error. The problem is that the same error message appears regardless of which problem the user is encountering: not entering one of the right special characters or entering one of the wrong special characters.

Whoops. Just realized I wrote the Steps to Reproduce incorrectly; I left out the step where the user enters an invalid character. My mistake.

[ExperimentsInHonesty]

@thetanmancan in the example you gave
Thisis12345!^

The Caret ^ is not allowed. So if you think the error message should say something else, let us know.

For instance, the error message could be changed to
Your password must have at least 12 characters, at least one number, one capitalization, and one special character - allowed special characters are !@#$%&*?

[thetanmancan]

@ExperimentsInHonesty

There are three possible solutions to this.

Solution 1

The first is having one catch-all error message no matter what the problem is, similar to what you suggested above: " Your password must have at least 12 characters, at least one number, one capitalized letter, and one special character - allowed special characters are !@#$%&*? ".

This is certainly the easier option from a development standpoint, but not ideal from a user standpoint. It leaves the onus on the user to figure out which of the password requirements weren't met, which is especially difficult in our system because we censor out the password's characters so that the user can't see them.

Solution 2

The second solution is to have a separate error messages for when:

1. Desired data isn't present.
2. Undesired data is present.

The error message for desired data would trigger a message similar to what we have now: "Your password must have at least 12 characters, at least one number, one capitalized letter, and one of the following special characters: !@#$%&*? ".

The error message for undesired data would trigger a message that would alert users when they've entered an illegal special character. For example, "Your password must not have any of these special characters: `~^()_-+=[]{}|:;”’<>,./ ".

While this solution has an error message for desired data that does not specify which requirements aren't being met, at least the error message for undesired data would be specific about which data the user is not allowed to enter.

Solution 3

The third solution is to have a separate error message for each requirement that hasn't been met.

1. At least 12 characters.
2. At least one number.
3. At least one capitalized letter.
4. At least one of the following special characters: !@#$%&*?
5. None of the following special characters: `~^()_-+=[]{}|:;”’<>,./

From a development standpoint, this is the trickiest to implement, but would give the user the most specific feedback about which requirements they are or are not meeting.

Which Solution?

Considering the limited time and resources we have, the question is which of the above solutions the production and development teams desire. If we want new language for any of the error messages, I'm happy for design to come up with something.