Add Inline Error for Protected Post Password Field and Uncheck "Password Protected" for Empty Field

[sarthaknagoshe2002]

Fixes: #64157

What?

This PR addresses two issues related to the post password field:

1. Adds an inline error to warn users when a password exceeds the 255-character limit, preventing server errors.
2. Automatically unchecks the "Password Protected" checkbox when the password field is cleared, ensuring the UI accurately reflects the state of password protection.

Why?

1. The inline error prevents users from submitting passwords that are too long and helps avoid server errors. It also improves the user experience by providing clear feedback when the password is truncated.
2. Unchecking the Password Protected checkbox when the password field is cleared ensures that the UI is in sync with the actual post protection state, reducing confusion for users.

How?

1. For the inline error, the code checks the length of the entered password. If the length exceeds 255 characters, an inline error message is displayed.
2. To fix the Password Protected checkbox, the state is updated to automatically uncheck the box when the password field is cleared. This is done by updating the showPassword state when the password field is empty & the Dropdown is out of Focus, ensuring the checkbox reflects the correct state.

Testing Instructions

1. Test Inline Error for Password Length:

   • Go to the post editor and enter a password longer than 255 characters in the Password field.
   • An inline error should appear, notifying the user that the password exceeds the character limit and will be truncated.

2. Test Password Protected Checkbox Behavior:

   • Create or edit a password-protected post.
   • Check the Password Protected checkbox and enter a password.
   • Save the post, then clear the password field.
   • Ensure that the "Password Protected" checkbox is automatically unchecked when the password field is cleared.
   • Save the post again and confirm that the password protection is disabled.

Screenshots or screencast

Password.protection.bug.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sarthaknagoshe2002 <[email protected]>
Co-authored-by: ramonjd <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @sarthaknagoshe2002! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ramonjd]

Thanks a lot @sarthaknagoshe2002! I tested:

• setting and remove a password still works on the frontend.
• the password control is toggled off if the field is empty and the panel closes
• strings > 255 trigger the error

Here's a string of 256 chars to test:

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&()_+-=[]{}|;:,.<>?~abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{}|;:,.<>?~abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&()12345678

I think it handles the edge cases well too, e.g.,

• if you try paste the 256 char string in, it won't allow it in the field
• if you paste a 255 char string and then try to add a few chars, it will preserve the first 256

I'll just add a couple of reviewers for sanity checks.

[ntsekouras]

Should we keep this check and instead of an error show a warning that the pasted code has been trimmed?

Additionally we could also add this limitation to a help text.. 🤔

[sarthaknagoshe2002]

If we keep that line, this condition won’t be triggered:

if ( newPassword.length > 255 ) {
    setError( __( 'Password cannot exceed 255 characters.' ) );

This means we won’t be able to check if the character limit is exceeded. To handle that, we would need to listen for keydown and paste events in order to show an error or warning when the limit is breached.

[sarthaknagoshe2002]

I mean listening events won't be that straight-forward as this approach.
If your experience says that we should change the approach then lets do it 🚀.
Let me know accordingly 😇

[sarthaknagoshe2002]

show a warning that the pasted code has been trimmed?

Just to make things clear, the error should be converted to warning & the message should say the following right?
Password cannot exceed 255 characters \n The pasted password may have been trimmed

[ramonjd]

Yeah, I see the dilemma. It would be nice to keep the HTML attribute for compatibility. HTML validation attributes also work well with assistive technologies, improving accessibility.

There's another, low-tech option that might be better UX: just tell folks that the maximum is 255 before they enter, and reinstate the maxLenth attr.

Given that it's an edge case anyway, I don't think we need to overthink it.

Then we could just remove the error message and associated handlers.

What do folks think?

[sarthaknagoshe2002]

Okay, so we'll tell them the limit's 255, and anything extra gets cut off.

[jameskoster]

It seems a shame to clutter the UI with help text, given this is likely an extreme edge case. That said the input controls have no style support for error handling, so I'd be wary of creating an ad hoc solution for that here.

I'm likely missing a nuance (apologies) but could it make sense to use browser native UI for this? Here's an example.

[sarthaknagoshe2002]

I'm likely missing a nuance (apologies) but could it make sense to use browser native UI for this? Here's an example.

This seems like a good option, provided it doesn’t impact the validation process.

Another workaround could be displaying a warning at 255 characters, indicating that any additional characters will be trimmed off. This way we can keep the warning & the maxLenth attr too.

[sarthaknagoshe2002]

This seems like a good option, provided it doesn’t impact the validation process.

Another workaround could be displaying a warning at 255 characters, indicating that any additional characters will be trimmed off. This way we can keep the warning & the maxLenth attr too.

@ramonjd @ntsekouras @jameskoster awaiting your feedbacks on this suggestion.

[jameskoster]

Worth a try, I think.