Skip to content

Add password field #71545

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

Jump to bottom
Merged
merged 2 commits into from
Sep 8, 2025
Merged

Add password field #71545

merged 2 commits into from
Sep 8, 2025

Conversation

@heavyweight
Copy link
Contributor

@heavyweight heavyweight commented Sep 8, 2025

What?

Adds a new password field type to the DataViews package with show/hide toggle functionality.

Why?

DataViews currently lacks a dedicated password field type for handling sensitive data. This field type is essential for forms that need to collect and display passwords.

How?

  • Field Type Definition (packages/dataviews/src/field-types/password.tsx):

    • Implements FieldTypeDefinition with proper validation
    • Secure render function that displays masked characters (•) based on password length
    • Support for elements (dropdown options) with label display
    • Filtering and sorting capabilities
    • Custom validation for element-based fields

  • Form Control (packages/dataviews/src/dataform-controls/password.tsx):

    • Text input with show/hide toggle functionality
    • Uses seen/unseen icons for intuitive user experience
    • Proper validation and error handling
    • Maintains security by never exposing actual password values

  • Story Integration (packages/dataviews/src/field-types/stories/index.story.tsx):

    • Added password fields to the field types story
    • Created dedicated Password story component
    • Updated control types and argTypes to include password

Testing Instructions

  1. Open Storybook: npm run storybook:dev
  2. Navigate to "DataViews/FieldTypes" stories
  3. Select the "Password" story from the sidebar
  4. Test the password field

Screenshots or screencast

@github-actions
Copy link

github-actions bot commented Sep 8, 2025 •
edited
Loading

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: heavyweight <kpapazov@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>

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

@oandregal
Copy link
Member

oandregal commented Sep 8, 2025

Thanks for working on this @heavyweight. Could you also update the validation story here to include the password type?

oandregal
oandregal reviewed Sep 8, 2025
View reviewed changes
packages/dataviews/src/dataform-controls/password.tsx Outdated
}, [] );

return (
<ValidatedInputControl
Copy link
Member

@oandregal oandregal Sep 8, 2025

Choose a reason for hiding this comment

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

Can this use the utility/validated-text.tsx component instead? I understand it just needs to accept a suffix. It'd be great if the utility was renamed to utils/validated-input.tsx as well (we forgot to that recently).

oandregal
oandregal reviewed Sep 8, 2025
View reviewed changes
packages/dataviews/src/field-types/password.tsx Outdated
render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
return field.elements
? renderFromElements( { item, field } )
: '•'.repeat( field.getValue( { item } ).length );
Copy link
Member

@oandregal oandregal Sep 8, 2025

Choose a reason for hiding this comment

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

Perhaps we can render a fixed number of dots instead of giving away the pass length?

oandregal
oandregal reviewed Sep 8, 2025
View reviewed changes
packages/dataviews/src/field-types/password.tsx Outdated
? renderFromElements( { item, field } )
: '•'.repeat( field.getValue( { item } ).length );
},
enableSorting: true,
Copy link
Member

@oandregal oandregal Sep 8, 2025

Choose a reason for hiding this comment

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

Perhaps we should disable sorting by default, even though the field consumer can enable it.

oandregal
oandregal reviewed Sep 8, 2025
View reviewed changes
packages/dataviews/src/field-types/password.tsx Outdated
},
enableSorting: true,
filterBy: {
defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
Copy link
Member

@oandregal oandregal Sep 8, 2025

Choose a reason for hiding this comment

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

Same here, perhaps we shouldn't offer any filtering for password by default.

@oandregal oandregal added [Type] Enhancement A suggestion for improvement. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Sep 8, 2025
@oandregal oandregal merged commit d97807b into WordPress:trunk Sep 8, 2025
74 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.7 milestone Sep 8, 2025
@oandregal oandregal mentioned this pull request Sep 9, 2025
Closed
44 tasks
adamsilverstein pushed a commit to adamsilverstein/gutenberg that referenced this pull request Sep 11, 2025
@heavyweight @oandregal @adamsilverstein
Add password field type (WordPress#71545)
0cf6d1f 
Co-authored-by: heavyweight <kpapazov@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
@maxschmeling maxschmeling mentioned this pull request Oct 7, 2025
Closed
@mirka
Copy link
Member

mirka commented Oct 13, 2025 •
edited
Loading

👋 This show/hide button placement and variant doesn't match the standard password field patterns demonstrated in the InputControl and ValidatedInputControl documentation. @heavyweight are you available to fix? Here's the reference implementation.

Now Expected
Wrong password field correct password field

@heavyweight
Copy link
Contributor Author

heavyweight commented Oct 15, 2025

👋 This show/hide button placement and variant doesn't match the standard password field patterns demonstrated in the InputControl and ValidatedInputControl documentation. @heavyweight are you available to fix? Here's the reference implementation.

Now Expected
Wrong password field correct password field

I will take a look at this 👍

@heavyweight heavyweight mentioned this pull request Oct 21, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@oandregal oandregal oandregal approved these changes

Assignees

@heavyweight heavyweight

Labels

[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 21.7

Development

Successfully merging this pull request may close these issues.

3 participants

@heavyweight @oandregal @mirka