Skip to content
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

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

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

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

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

Choose a reason for hiding this comment

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

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

Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

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

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

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.

/>
{ 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