Show/hide password button should be optional
Closed this issue · 5 comments
The button to show/hide password text appears to be dependent on Javascript, but based on https://govuk-form-builder.netlify.app/form-elements/password-input/ there does not seem to be an option to not show this button in environments where Javascript might not be enabled. This results in a "Show" button which does nothing. An optional parameter something like show_hide_password(Boolean) would fix this.
Hi Paul, this is an interesting question. I'm not really sure what the best approach is here.
I'm not against adding an option that hides the button, but #govuk_password_field adds a wrapper and data module too, which are pointless without JavaScript.
My initial reaction was to suggest specifying the type on a regular text input like this:
f.govuk_text_field :password_1, label: { text: "Password" }, type: "password"However, that means the other default attributes (spellcheck: false, autocomplete: "current-password", autocapitalize: "none") would be omitted and need to be manually specified.
I wonder if creating a second helper, #govuk_basic_password_field (naming is hard!), that adds the type and attributes but doesn't include the wrapper and button would make sense.
Turns out it was only displayed because I missed the hidden on the original implementation. New release will be out shortly.
@peteryates thanks for the quick action on this. How do I use the hidden attribute? Setting hidden: true on the password field quite reasonably hides the entire password field. How do I hide just the "Show" button?
@peteryates Hi Peter, I've picked up some work to remove this button in our DEFRA apps. Unfortunately it isn't removing the button with or without javascript enabled. Seems to be getting overridden by the display: inline-block of govuk-button
Sorry @PaulDoyle-DEFRA I totally missed your comment above! There's no way to explicitly hide the button at the moment, it should start hidden and be revealed by JavaScript.
I'm pretty sure this is working fine as there's only this one report of a problem, and it works in the guide (see the video clip I posted on the linked issue).
If you can post a link to a review app I'll take a closer look - my suspicion that there's a bit of CSS from your app having an unintended affect on it.