<%
add_gem_component_stylesheet("password-input")
label_text ||= t("components.password_input.label")
local_assigns[:margin_bottom] ||= 3
error_text ||= nil
error_text_prefix ||= t("components.password_input.error_text_prefix")
button_show_password_aria_label ||= t("components.password_input.button_aria_label")
button_hide_password_aria_label ||= t("components.password_input.button_aria_hide_label")
button_show_password_text ||= t("components.password_input.button")
button_hide_password_text ||= t("components.password_input.button_hide")
password_shown_announcement ||= t("components.password_input.password_shown_announcement")
password_hidden_announcement ||= t("components.password_input.password_hidden_announcement")
name ||= "password"
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
component_helper.add_data_attribute({
module: "govuk-password-input",
"i18n.show-password": button_show_password_text,
"i18n.hide-password": button_hide_password_text,
"i18n.show-password-aria-label": button_show_password_aria_label,
"i18n.hide-password-aria-label": button_hide_password_aria_label,
"i18n.password-shown-announcement": password_shown_announcement,
"i18n.password-hidden-announcement": password_hidden_announcement,
})
component_helper.add_class('govuk-form-group')
component_helper.add_class('govuk-form-group--error') if error_text
component_helper.add_class('govuk-password-input')
component_helper.add_class('gem-c-password-input')
uid = SecureRandom.hex(4)
label_for = uid + '-password-input'
input_id = uid + '-password-input'
aria_controls = uid + '-password-input'
input_classes = %w(govuk-input govuk-password-input__input govuk-js-password-input-input)
if error_text
name << '-input-with-error-message'
label_for << '-with-error-message'
input_id << '-with-error-message'
input_classes << 'govuk-input--error'
aria_controls << '-with-error-message'
paragraph_id = uid + '-password-input-with-error-message-error'
end
%>
<%= tag.div(**component_helper.all_attributes) do %>
<%= render "govuk_publishing_components/components/label", {
text: label_text,
html_for: label_for
} %>
<% if error_text %>
<%= error_text_prefix %>: <%= error_text %>
<% end %>
<%= tag.input(
name:,
type: "password",
class: input_classes,
id: input_id,
spellcheck: false,
autocomplete: "current-password",
autocapitalize: "none",
aria: {
describedby: paragraph_id
}) %>
<%= tag.button(
type: "button",
class: "govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle",
data: {
module: "govuk-button"
},
hidden: true,
aria: {
controls: aria_controls,
label: button_show_password_aria_label
}) do %>
<%= button_show_password_text %>
<% end %>
<% end %>