{% macro govukPasswordInput(params) %} {% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes -%} {% from "govuk_frontend_jinja/macros/i18n.html" import govukI18nAttributes -%} {% from "govuk_frontend_jinja/components/button/macro.html" import govukButton -%} {% from "govuk_frontend_jinja/components/input/macro.html" import govukInput -%} {% set attributesHtml -%} {{- ' data-module="govuk-password-input"' | safe }} {{- govukI18nAttributes({ 'key': 'show-password', 'message': params.showPasswordText }) -}} {{- govukI18nAttributes({ 'key': 'hide-password', 'message': params.hidePasswordText }) -}} {{- govukI18nAttributes({ 'key': 'show-password-aria-label', 'message': params.showPasswordAriaLabelText }) -}} {{- govukI18nAttributes({ 'key': 'hide-password-aria-label', 'message': params.hidePasswordAriaLabelText }) -}} {{- govukI18nAttributes({ 'key': 'password-shown-announcement', 'message': params.passwordShownAnnouncementText }) -}} {{- govukI18nAttributes({ 'key': 'password-hidden-announcement', 'message': params.passwordHiddenAnnouncementText }) -}} {%- endset -%} {#- Append form group attributes onto attributes set above #} {%- if params.formGroup -%} {%- for name, value in params.formGroup.attributes %} {% set attributesHtml = attributesHtml ~ " " ~ name | escape ~ '="' ~ value | escape ~ '"' %} {% endfor -%} {%- endif -%} {%- set buttonHtml %} {{ govukButton({ 'type': "button", 'classes': "govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" ~ (" " ~ params.button.classes if params.button and params.button.classes), 'text': params.showPasswordText | default("Show"), 'attributes': { "aria-controls": params.id, "aria-label": params.showPasswordAriaLabelText | default("Show password"), "hidden": { 'value': true, 'optional': true } } }) | trim }} {% if params.formGroup and params.formGroup.afterInput %} {{- params.formGroup.afterInput.html | safe | trim if params.formGroup and params.formGroup.afterInput.html else params.formGroup.afterInput.text }} {% endif -%} {% endset -%} {{ govukInput({ 'formGroup': { 'classes': "govuk-password-input" ~ (" " ~ params.formGroup.classes if params.formGroup and params.formGroup.classes), 'attributes': attributesHtml, 'beforeInput': params.formGroup.beforeInput if params.formGroup, 'afterInput': { 'html': buttonHtml } }, 'inputWrapper': { "classes": "govuk-password-input__wrapper" }, 'label': params.label, 'hint': params.hint, 'classes': "govuk-password-input__input govuk-js-password-input-input" ~ (" " ~ params.classes if params.classes), 'errorMessage': params.errorMessage, 'id': params.id, 'name': params.name, 'type': "password", 'spellcheck': false, 'autocapitalize': "none", 'autocomplete': params.autocomplete if params.autocomplete else "current-password", 'value': params.value, 'disabled': params.disabled, 'describedBy': params.describedBy, 'attributes': params.attributes }) | trim }} {% endmacro %}