Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
+31 −2
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe82fdb
feat: show inline error for password limit & uncheck password protect…
sarthaknagoshe2002 Nov 15, 2024
5217c6f
Merge branch 'WordPress:trunk' into fix/issue-64157
sarthaknagoshe2002 Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions packages/editor/src/components/post-status/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ export default function PostStatus() {
);
const { editEntityRecord } = useDispatch( coreStore );
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
const [ error, setError ] = useState( '' );
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = useMemo(
() => ( {
Expand Down Expand Up @@ -163,6 +164,21 @@ export default function PostStatus() {
} );
};

const handlePassword = ( { password: newPassword = password } ) => {
if ( newPassword.length > 255 ) {
setError( __( 'Password cannot exceed 255 characters.' ) );
} else {
setError( '' );
updatePost( { password: newPassword } );
}
};

const handleFocusOut = () => {
if ( password.trim() === '' ) {
handleTogglePassword( false );
}
};

return (
<PostPanelRow label={ __( 'Status' ) } ref={ setPopoverAnchor }>
{ canEdit ? (
Expand All @@ -171,6 +187,7 @@ export default function PostStatus() {
contentClassName="editor-change-status__content"
popoverProps={ popoverProps }
focusOnMount
onToggle={ handleFocusOut }
renderToggle={ ( { onToggle, isOpen } ) => (
<Button
className="editor-post-status__toggle"
Expand Down Expand Up @@ -244,7 +261,7 @@ export default function PostStatus() {
'Password'
) }
onChange={ ( value ) =>
updatePost( {
handlePassword( {
password: value,
} )
}
Expand All @@ -256,8 +273,12 @@ export default function PostStatus() {
id={ passwordInputId }
__next40pxDefaultSize
__nextHasNoMarginBottom
maxLength={ 255 }
Copy link
Contributor

@ntsekouras ntsekouras Dec 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@sarthaknagoshe2002 sarthaknagoshe2002 Dec 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@sarthaknagoshe2002 sarthaknagoshe2002 Dec 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 😇

Copy link
Contributor Author

@sarthaknagoshe2002 sarthaknagoshe2002 Dec 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@ramonjd ramonjd Dec 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Screenshot 2024-12-18 at 11 52 37 am

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?

Copy link
Contributor Author

@sarthaknagoshe2002 sarthaknagoshe2002 Dec 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@sarthaknagoshe2002 sarthaknagoshe2002 Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

@jameskoster jameskoster Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worth a try, I think.

Copy link
Contributor

@peterwilsoncc peterwilsoncc Jan 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keeping the max length attribute may lead to the existing problem, copying in a password 300 characters long would be trimmed to 255 but the error message would inform the user "any furtther characters will be trimmed" or whatever the string turns out to be.

The MDN recommendation is to code up validation in an accessible manner:

Browsers often don't let the user type a longer value than expected into text fields. A better user experience than just using maxlength is to also provide character count feedback in an accessible manner and let the user edit their content down to size. An example of this is the character limit when posting on social media. JavaScript, including solutions using maxlength, can be used to provide this.
-- MDN: client side form validation

Copy link
Contributor Author

@sarthaknagoshe2002 sarthaknagoshe2002 Jan 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then lets skip the max length attribute & just display an error message that the password can't exceed 255 chars

/>
{ error && (
<p className="editor-change-status__error">
{ error }
</p>
) }
</div>
) }
</VStack>
Expand Down
8 changes: 8 additions & 0 deletions packages/editor/src/components/post-status/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,12 @@
margin-top: $grid-unit-05;
}

.editor-change-status__error {
background-color: var(--wp--preset--color--accent-6);
color: $alert-red;
padding: 10px;
border-radius: 4px;
margin-bottom: 0;
}

}
Loading