{% 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 -%} {{- govukAttributes({ "data-module": "govuk-password-input" }) -}} {{- 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 'formGroup' in params %} {%- set formGroup = params.formGroup -%} {% else %} {%- set formGroup = {} -%} {% endif -%} {%- for name, value in (formGroup.attributes if formGroup.attributes else {}).items() %} {% set attributesHtml = '{} {}="{}"'.format(attributesHtml, name | escape, options.value | escape) %} {% endfor -%} {%- 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 else ""), "text": params.showPasswordText | default("Show"), "attributes": { "aria-controls": params.id, "aria-label": params.showPasswordAriaLabelText | default("Show password"), "hidden": { "value": true, "optional": true } } }) | trim }} {% if formGroup.afterInput %} {{- formGroup.afterInput.html | safe | trim if formGroup.afterInput.html else formGroup.afterInput.text }} {% endif -%} {% endset -%} {{ govukInput({ "formGroup": { "classes": "govuk-password-input" + (" " + formGroup.classes if formGroup.classes else ""), "attributes": attributesHtml, "beforeInput": formGroup.beforeInput, "afterInput": { "html": buttonHtml } }, "inputWrapper": { "classes": "govuk-password-input__wrapper" }, "label": params.label, "hint": params.hint, "errorMessage": params.errorMessage, "classes": "govuk-password-input__input govuk-js-password-input-input" + (" " + params.classes if params.classes else ""), "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 %}