diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3cdcd6c35d..305a57803f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
useful summary for people upgrading their application, not a replication
of the commit log.
+## Unreleased
+
+* Add the password input component ([PR #4176](https://github.com/alphagov/govuk_publishing_components/pull/4176))
+
## 43.0.2
* LUX version 4.0.26 ([PR #4192](https://github.com/alphagov/govuk_publishing_components/pull/4192))
diff --git a/app/assets/javascripts/component_guide/application.js b/app/assets/javascripts/component_guide/application.js
index dd6716cbaa..9073b429ac 100644
--- a/app/assets/javascripts/component_guide/application.js
+++ b/app/assets/javascripts/component_guide/application.js
@@ -3,4 +3,5 @@
//= require ../govuk_publishing_components/dependencies
//= require ../govuk_publishing_components/components/accordion
//= require ../govuk_publishing_components/components/intervention
+//= require ../govuk_publishing_components/components/password-input
//= require ../govuk_publishing_components/components/tabs
diff --git a/app/assets/javascripts/govuk_publishing_components/components/password-input.js b/app/assets/javascripts/govuk_publishing_components/components/password-input.js
new file mode 100644
index 0000000000..958ba7102c
--- /dev/null
+++ b/app/assets/javascripts/govuk_publishing_components/components/password-input.js
@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/password-input/password-input.bundle.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.GovukPasswordInput = window.GOVUKFrontend.PasswordInput
diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
index 1097adff09..33b51fda5e 100644
--- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
@@ -59,6 +59,7 @@
@import "components/option-select";
@import "components/organisation-logo";
@import "components/panel";
+@import "components/password-input";
@import "components/phase-banner";
@import "components/previous-and-next-navigation";
@import "components/print-link";
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_password-input.scss b/app/assets/stylesheets/govuk_publishing_components/components/_password-input.scss
new file mode 100644
index 0000000000..10c27389ff
--- /dev/null
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_password-input.scss
@@ -0,0 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "govuk/components/password-input/password-input";
diff --git a/app/views/govuk_publishing_components/components/_password_input.html.erb b/app/views/govuk_publishing_components/components/_password_input.html.erb
new file mode 100644
index 0000000000..4eed60acbb
--- /dev/null
+++ b/app/views/govuk_publishing_components/components/_password_input.html.erb
@@ -0,0 +1,78 @@
+<%
+ add_gem_component_stylesheet("password-input")
+
+ label_text ||= t("components.password_input.label")
+
+ error_text ||= nil
+ error_text_prefix ||= t("components.password_input.error_text_prefix")
+
+ shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+ component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+ component_helper.add_data_attribute({ module: "govuk-password-input" })
+ 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')
+ component_helper.add_class(shared_helper.get_margin_bottom)
+
+ uid = SecureRandom.hex(4)
+
+ label_for = uid + '-password-input'
+
+ input_name = 'password'
+ 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
+ label_for << '-with-error-message'
+ input_id << '-with-error-message'
+ input_name << '-input-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: 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: t("components.password_input.button_aria_label")
+ }) do %>
+ <%= t("components.password_input.button") %>
+ <% end %>
+
+<% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/password_input.yml b/app/views/govuk_publishing_components/components/docs/password_input.yml
new file mode 100644
index 0000000000..9103fbb5b2
--- /dev/null
+++ b/app/views/govuk_publishing_components/components/docs/password_input.yml
@@ -0,0 +1,45 @@
+name: Password input
+description: The password input component helps users to create and enter passwords.
+govuk_frontend_components:
+ - password-input
+
+accessibility_criteria: |
+ The password input component must:
+
+ * accept focus
+ * be focusable with a keyboard
+ * be usable with a keyboard
+ * be usable with touch
+ * indicate when they have focus
+ * be recognisable as form input elements
+ * have correctly associated labels
+ * have the appropriate type of 'password'
+ * have an appropriate validation message if there was an error
+ * allow users to interact with any 'show password' button
+ * allow users to use `autocomplete` to securely create and enter passwords
+ * allow users to copy and paste into the password input
+
+ When CSS and / or JavaScript is unavailable, the component must:
+
+ * fallback to a regular input element, with the show/hide button hidden
+
+uses_component_wrapper_helper: true
+
+examples:
+ default:
+ data:
+ with_error:
+ description: If there is a validation error, passing error text will style the password input component with error styles, and semantically state that there was a validation error.
+ data:
+ error_text: Enter a password
+ with_custom_label_and_error_text:
+ description: For translations or other purposes, the text presented to the user in this component can be changed. Note that the error text prefix is hidden visually and used by assistive tools when there is an error. By default, the prefix is "Error".
+ data:
+ label_text: Secret number
+ error_text_prefix: Incompatible
+ error_text: 6 is scared of 7, so they can't be next to each other.
+ with_margin_bottom:
+ description: |
+ The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of `30px`.
+ data:
+ margin_bottom: 5
diff --git a/config/locales/ar.yml b/config/locales/ar.yml
index 7d0c77a869..b504e39b15 100644
--- a/config/locales/ar.yml
+++ b/config/locales/ar.yml
@@ -148,6 +148,11 @@ ar:
selected:
organisation_schema:
all_content_search_description: العثور عن كل المحتوى من %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: ترقيم الصفحات
diff --git a/config/locales/az.yml b/config/locales/az.yml
index 0621ae5162..176785d463 100644
--- a/config/locales/az.yml
+++ b/config/locales/az.yml
@@ -145,6 +145,11 @@ az:
selected:
organisation_schema:
all_content_search_description: "%{organisation}-dan bütün məzmunu tap"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Səhifələrə bölmə
diff --git a/config/locales/be.yml b/config/locales/be.yml
index bd09759aac..4b910b7198 100644
--- a/config/locales/be.yml
+++ b/config/locales/be.yml
@@ -151,6 +151,11 @@ be:
selected:
organisation_schema:
all_content_search_description: Шукаць увесь змест з %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Месцаванне старонак
diff --git a/config/locales/bg.yml b/config/locales/bg.yml
index 7dde3c5a76..0a59b078c2 100644
--- a/config/locales/bg.yml
+++ b/config/locales/bg.yml
@@ -149,6 +149,11 @@ bg:
selected:
organisation_schema:
all_content_search_description: Намиране на цялото съдържание от %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Страниране
diff --git a/config/locales/bn.yml b/config/locales/bn.yml
index e8686129f9..5d728ffdb4 100644
--- a/config/locales/bn.yml
+++ b/config/locales/bn.yml
@@ -146,6 +146,11 @@ bn:
selected:
organisation_schema:
all_content_search_description: "%{organisation}-এর সকল বিষয়বস্তু খুঁজে বের করুন"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: পেজিনেশন
diff --git a/config/locales/cs.yml b/config/locales/cs.yml
index 46ea4c66f2..7eda246cf3 100644
--- a/config/locales/cs.yml
+++ b/config/locales/cs.yml
@@ -150,6 +150,11 @@ cs:
selected:
organisation_schema:
all_content_search_description: Najít veškerý obsah z %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Stránkování
diff --git a/config/locales/cy.yml b/config/locales/cy.yml
index cded7266b2..61cd1ea145 100644
--- a/config/locales/cy.yml
+++ b/config/locales/cy.yml
@@ -149,6 +149,11 @@ cy:
selected:
organisation_schema:
all_content_search_description: Dod o hyd i'r holl gynnwys gan %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Tudalennu
diff --git a/config/locales/da.yml b/config/locales/da.yml
index 1cbd2deee2..7029a08c60 100644
--- a/config/locales/da.yml
+++ b/config/locales/da.yml
@@ -146,6 +146,11 @@ da:
selected:
organisation_schema:
all_content_search_description: Find alt indhold fra %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginering
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 780d22c5d7..f5fa9eef95 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -149,6 +149,11 @@ de:
selected:
organisation_schema:
all_content_search_description: Alle Inhalte von %{organisation} finden
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Seitenzahlen
diff --git a/config/locales/dr.yml b/config/locales/dr.yml
index 329c8485c8..174144bb4e 100644
--- a/config/locales/dr.yml
+++ b/config/locales/dr.yml
@@ -147,6 +147,11 @@ dr:
selected:
organisation_schema:
all_content_search_description: تمام محتویات را از اینجا بدست بیاورید %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: صفحه گذاری
diff --git a/config/locales/el.yml b/config/locales/el.yml
index 7fc529c16f..97ce26290a 100644
--- a/config/locales/el.yml
+++ b/config/locales/el.yml
@@ -145,6 +145,11 @@ el:
selected:
organisation_schema:
all_content_search_description: Εύρεση όλου του περιεχομένου από τον οργανισμό %{Organization}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Σελιδοποίηση
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 63ddecffb4..3e7f9926c0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -252,6 +252,11 @@ en:
selected: selected
organisation_schema:
all_content_search_description: Find all content from %{organisation}
+ password_input:
+ label: "Password"
+ button: "Show"
+ button_aria_label: "Show password"
+ error_text_prefix: "Error"
previous_and_next_navigation:
next: Next
pagination: Pagination
diff --git a/config/locales/es-419.yml b/config/locales/es-419.yml
index e1be6c121b..c230f6bbf4 100644
--- a/config/locales/es-419.yml
+++ b/config/locales/es-419.yml
@@ -145,6 +145,11 @@ es-419:
selected:
organisation_schema:
all_content_search_description: Buscar todo el contenido de %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginación
diff --git a/config/locales/es.yml b/config/locales/es.yml
index f480eacd8e..f612d64f3b 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -145,6 +145,11 @@ es:
selected:
organisation_schema:
all_content_search_description: Buscar todo el contenido de %{organization}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginación
diff --git a/config/locales/et.yml b/config/locales/et.yml
index fc8618152f..1c49539b8c 100644
--- a/config/locales/et.yml
+++ b/config/locales/et.yml
@@ -148,6 +148,11 @@ et:
selected:
organisation_schema:
all_content_search_description: Leidke kogu ettevõtte %{organization} sisu
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Lehekülgede jaotus
diff --git a/config/locales/fa.yml b/config/locales/fa.yml
index ed433abbaa..4293034467 100644
--- a/config/locales/fa.yml
+++ b/config/locales/fa.yml
@@ -144,6 +144,11 @@ fa:
selected:
organisation_schema:
all_content_search_description: یافتن تمام محتوا از %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: صفحهبندی
diff --git a/config/locales/fi.yml b/config/locales/fi.yml
index ee97662bb9..6a4e6efb09 100644
--- a/config/locales/fi.yml
+++ b/config/locales/fi.yml
@@ -147,6 +147,11 @@ fi:
selected:
organisation_schema:
all_content_search_description: Etsi kaikki sisältö alkaen %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Sivunumerointi
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 4233848cf3..1e69b8c5b1 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -145,6 +145,11 @@ fr:
selected:
organisation_schema:
all_content_search_description: Rechercher tout le contenu de %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Pagination
diff --git a/config/locales/gd.yml b/config/locales/gd.yml
index 3f7539e1ac..7d6f4d4144 100644
--- a/config/locales/gd.yml
+++ b/config/locales/gd.yml
@@ -147,6 +147,11 @@ gd:
selected:
organisation_schema:
all_content_search_description: Faigh gach rud ó %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Leathanach
diff --git a/config/locales/gu.yml b/config/locales/gu.yml
index 6ad98793d3..acd910b7db 100644
--- a/config/locales/gu.yml
+++ b/config/locales/gu.yml
@@ -145,6 +145,11 @@ gu:
selected:
organisation_schema:
all_content_search_description: "%{organisation} થી તમામ સામગ્રી શોધો"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: પૃષ્ઠ ક્રમાંકન
diff --git a/config/locales/he.yml b/config/locales/he.yml
index 5bbc94c79a..01fc9a9453 100644
--- a/config/locales/he.yml
+++ b/config/locales/he.yml
@@ -145,6 +145,11 @@ he:
selected:
organisation_schema:
all_content_search_description: מצא את כל התוכן של %{organization}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: חלוקה לעמודים
diff --git a/config/locales/hi.yml b/config/locales/hi.yml
index 67938a89a5..3061980e06 100644
--- a/config/locales/hi.yml
+++ b/config/locales/hi.yml
@@ -145,6 +145,11 @@ hi:
selected:
organisation_schema:
all_content_search_description: "%{organization} से सभी सामग्री खोजें"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: पृष्ठांकन
diff --git a/config/locales/hr.yml b/config/locales/hr.yml
index dcb95e9961..7b5172e18b 100644
--- a/config/locales/hr.yml
+++ b/config/locales/hr.yml
@@ -146,6 +146,11 @@ hr:
selected:
organisation_schema:
all_content_search_description: Pronađi sav sadržaj %{organization}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginacija
diff --git a/config/locales/hu.yml b/config/locales/hu.yml
index 652d8db8c4..8d021a24f6 100644
--- a/config/locales/hu.yml
+++ b/config/locales/hu.yml
@@ -148,6 +148,11 @@ hu:
selected:
organisation_schema:
all_content_search_description: Keresse meg a(z) %{organisation} szervezet minden tartalmát
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Lapszámozás
diff --git a/config/locales/hy.yml b/config/locales/hy.yml
index 73b34e5b0d..03b2b03fbe 100644
--- a/config/locales/hy.yml
+++ b/config/locales/hy.yml
@@ -149,6 +149,11 @@ hy:
selected:
organisation_schema:
all_content_search_description: Գտնել %{organisation} ողջ բովանդակությունը
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Էջադրում
diff --git a/config/locales/id.yml b/config/locales/id.yml
index b704deed2c..1d601d55aa 100644
--- a/config/locales/id.yml
+++ b/config/locales/id.yml
@@ -145,6 +145,11 @@ id:
selected:
organisation_schema:
all_content_search_description: Temukan semua konten dari %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginasi
diff --git a/config/locales/is.yml b/config/locales/is.yml
index b41c581e31..260ed96b9b 100644
--- a/config/locales/is.yml
+++ b/config/locales/is.yml
@@ -145,6 +145,11 @@ is:
selected:
organisation_schema:
all_content_search_description: Finna allt efni frá %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Síðuuppsetning
diff --git a/config/locales/it.yml b/config/locales/it.yml
index ac2ba4b6ec..26b814ef34 100644
--- a/config/locales/it.yml
+++ b/config/locales/it.yml
@@ -145,6 +145,11 @@ it:
selected:
organisation_schema:
all_content_search_description: Trova tutto il contenuto da %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Impaginazione
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index 2674238fdd..12f1a490ee 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -141,6 +141,11 @@ ja:
selected:
organisation_schema:
all_content_search_description: "％{organisation} からすべてのコンテンツを検索"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: ページ付け
diff --git a/config/locales/ka.yml b/config/locales/ka.yml
index 99bb8059dd..c1ae183630 100644
--- a/config/locales/ka.yml
+++ b/config/locales/ka.yml
@@ -148,6 +148,11 @@ ka:
selected:
organisation_schema:
all_content_search_description: ყველა მასალის ნახვა %{organisation}-დან
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: პაგინაცია
diff --git a/config/locales/kk.yml b/config/locales/kk.yml
index a912b29d61..662863f143 100644
--- a/config/locales/kk.yml
+++ b/config/locales/kk.yml
@@ -145,6 +145,11 @@ kk:
selected:
organisation_schema:
all_content_search_description: "%{organisation} ішіндегі барлық мазмұнды табу"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Беттеу
diff --git a/config/locales/ko.yml b/config/locales/ko.yml
index d5ff570854..4425c70067 100644
--- a/config/locales/ko.yml
+++ b/config/locales/ko.yml
@@ -140,6 +140,11 @@ ko:
selected:
organisation_schema:
all_content_search_description:
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination:
diff --git a/config/locales/lt.yml b/config/locales/lt.yml
index 3b38fa9eaa..db77e23452 100644
--- a/config/locales/lt.yml
+++ b/config/locales/lt.yml
@@ -150,6 +150,11 @@ lt:
selected:
organisation_schema:
all_content_search_description: Rasti visą turinį iš %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Suskirstymas puslapiais
diff --git a/config/locales/lv.yml b/config/locales/lv.yml
index 11f694325d..6aaf771367 100644
--- a/config/locales/lv.yml
+++ b/config/locales/lv.yml
@@ -149,6 +149,11 @@ lv:
selected:
organisation_schema:
all_content_search_description: Meklēt visu saturu no %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Numerācija
diff --git a/config/locales/ms.yml b/config/locales/ms.yml
index 705973996b..19cdb69d99 100644
--- a/config/locales/ms.yml
+++ b/config/locales/ms.yml
@@ -144,6 +144,11 @@ ms:
selected:
organisation_schema:
all_content_search_description: Cari semua kandungan dari %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Penomboran
diff --git a/config/locales/mt.yml b/config/locales/mt.yml
index 17f3c427ea..49ad19642d 100644
--- a/config/locales/mt.yml
+++ b/config/locales/mt.yml
@@ -147,6 +147,11 @@ mt:
selected:
organisation_schema:
all_content_search_description: Sib il-kontenut kollu mingħand %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paġinazzjoni
diff --git a/config/locales/nl.yml b/config/locales/nl.yml
index 6d258aa5f9..c4de3fa7db 100644
--- a/config/locales/nl.yml
+++ b/config/locales/nl.yml
@@ -145,6 +145,11 @@ nl:
selected:
organisation_schema:
all_content_search_description: Zoek alle inhoud van %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginering
diff --git a/config/locales/no.yml b/config/locales/no.yml
index 235192fd06..58aa39e24f 100644
--- a/config/locales/no.yml
+++ b/config/locales/no.yml
@@ -145,6 +145,11 @@
selected:
organisation_schema:
all_content_search_description: Finn alt innhold fra %{organization}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginering
diff --git a/config/locales/pa-pk.yml b/config/locales/pa-pk.yml
index 57fe4605cc..c8132f587c 100644
--- a/config/locales/pa-pk.yml
+++ b/config/locales/pa-pk.yml
@@ -141,6 +141,11 @@ pa-pk:
selected:
organisation_schema:
all_content_search_description: "%{organisation} توں سارا مواد تلاش کرو"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: ورقہ بندی
diff --git a/config/locales/pa.yml b/config/locales/pa.yml
index 8c098a871a..754381d8ba 100644
--- a/config/locales/pa.yml
+++ b/config/locales/pa.yml
@@ -145,6 +145,11 @@ pa:
selected:
organisation_schema:
all_content_search_description: "%{organisation} ਤੋਂ ਸਾਰੀ ਸਮਗਰੀ ਲੱਭੋ"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: ਪੰਨਾ
diff --git a/config/locales/pl.yml b/config/locales/pl.yml
index 76129fd408..df5518b3a1 100644
--- a/config/locales/pl.yml
+++ b/config/locales/pl.yml
@@ -149,6 +149,11 @@ pl:
selected:
organisation_schema:
all_content_search_description: Znajdź całą zawartość od %{organizacja}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Numeracja stron
diff --git a/config/locales/ps.yml b/config/locales/ps.yml
index 4605d7367a..23de69a40c 100644
--- a/config/locales/ps.yml
+++ b/config/locales/ps.yml
@@ -142,6 +142,11 @@ ps:
selected:
organisation_schema:
all_content_search_description: له%{organization} څخه ټوله مینځپانګه ومومئ
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: مخینه
diff --git a/config/locales/pt.yml b/config/locales/pt.yml
index 7b03da66c9..56aa854edc 100644
--- a/config/locales/pt.yml
+++ b/config/locales/pt.yml
@@ -145,6 +145,11 @@ pt:
selected:
organisation_schema:
all_content_search_description: Encontrar todo o conteúdo de %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginação
diff --git a/config/locales/ro.yml b/config/locales/ro.yml
index 4e557176b7..71629b3b38 100644
--- a/config/locales/ro.yml
+++ b/config/locales/ro.yml
@@ -146,6 +146,11 @@ ro:
selected:
organisation_schema:
all_content_search_description: Găsiți tot conținutul de la %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginație
diff --git a/config/locales/ru.yml b/config/locales/ru.yml
index a6d6b9667f..ffc7c15328 100644
--- a/config/locales/ru.yml
+++ b/config/locales/ru.yml
@@ -149,6 +149,11 @@ ru:
selected:
organisation_schema:
all_content_search_description: Найти весь контент от %{organization}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Разбивка
diff --git a/config/locales/si.yml b/config/locales/si.yml
index 0433aee6a7..b5748afb37 100644
--- a/config/locales/si.yml
+++ b/config/locales/si.yml
@@ -145,6 +145,11 @@ si:
selected:
organisation_schema:
all_content_search_description: "%{organisation} වෙතින් සියලුම අන්තර්ගතය සෝයන්න"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: පිටු අංකය
diff --git a/config/locales/sk.yml b/config/locales/sk.yml
index c68b5ae3a8..6857e74fd4 100644
--- a/config/locales/sk.yml
+++ b/config/locales/sk.yml
@@ -150,6 +150,11 @@ sk:
selected:
organisation_schema:
all_content_search_description: Nájsť všetok obsah z %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Stránkovanie
diff --git a/config/locales/sl.yml b/config/locales/sl.yml
index e4f6175cae..9d3c3c2d1d 100644
--- a/config/locales/sl.yml
+++ b/config/locales/sl.yml
@@ -152,6 +152,11 @@ sl:
selected:
organisation_schema:
all_content_search_description: Oglejte si vse gradivo %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Oštevilčenje
diff --git a/config/locales/so.yml b/config/locales/so.yml
index 03a54f32c9..dc94162322 100644
--- a/config/locales/so.yml
+++ b/config/locales/so.yml
@@ -145,6 +145,11 @@ so:
selected:
organisation_schema:
all_content_search_description: Raadi dhamaan waxyaabaha uu ka koobanyahay %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Lambar siinta boga
diff --git a/config/locales/sq.yml b/config/locales/sq.yml
index 4c39e6d117..0d7688d192 100644
--- a/config/locales/sq.yml
+++ b/config/locales/sq.yml
@@ -145,6 +145,11 @@ sq:
selected:
organisation_schema:
all_content_search_description: Gjeni të gjithë përmbajtjen nga %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Numërtimi
diff --git a/config/locales/sr.yml b/config/locales/sr.yml
index 87443f210c..3d03f8f2b3 100644
--- a/config/locales/sr.yml
+++ b/config/locales/sr.yml
@@ -146,6 +146,11 @@ sr:
selected:
organisation_schema:
all_content_search_description: Pronađite sav sadržaj organizacije %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Broj stranice
diff --git a/config/locales/sv.yml b/config/locales/sv.yml
index 06b2df651a..529743780a 100644
--- a/config/locales/sv.yml
+++ b/config/locales/sv.yml
@@ -145,6 +145,11 @@ sv:
selected:
organisation_schema:
all_content_search_description: Hitta allt innehåll från %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Paginering
diff --git a/config/locales/sw.yml b/config/locales/sw.yml
index 78137e6c66..65ed200616 100644
--- a/config/locales/sw.yml
+++ b/config/locales/sw.yml
@@ -145,6 +145,11 @@ sw:
selected:
organisation_schema:
all_content_search_description: Tafuta maudhui yote kutoka %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Nambari za kurasa
diff --git a/config/locales/ta.yml b/config/locales/ta.yml
index 13d2de4db3..485480ffad 100644
--- a/config/locales/ta.yml
+++ b/config/locales/ta.yml
@@ -146,6 +146,11 @@ ta:
selected:
organisation_schema:
all_content_search_description: "%{organisation}-லிருந்து அனைத்து உள்ளடக்கத்தையும் கண்டறி"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: பக்கமிடுதல்
diff --git a/config/locales/th.yml b/config/locales/th.yml
index 8f492e28ff..da7df0da58 100644
--- a/config/locales/th.yml
+++ b/config/locales/th.yml
@@ -143,6 +143,11 @@ th:
selected:
organisation_schema:
all_content_search_description: ค้นหาเนื้อหาทั้งหมดจาก %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: การแบ่งหน้า
diff --git a/config/locales/tk.yml b/config/locales/tk.yml
index d757117763..9c6aa6850d 100644
--- a/config/locales/tk.yml
+++ b/config/locales/tk.yml
@@ -146,6 +146,11 @@ tk:
selected:
organisation_schema:
all_content_search_description: Ähli mazmunyny %{organisation}-dan tapyň
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Sahypa
diff --git a/config/locales/tr.yml b/config/locales/tr.yml
index 487ceeee83..4c17876c49 100644
--- a/config/locales/tr.yml
+++ b/config/locales/tr.yml
@@ -146,6 +146,11 @@ tr:
selected:
organisation_schema:
all_content_search_description: "%{organisation} kaynaklı tüm içeriği bul"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Sayfa
diff --git a/config/locales/uk.yml b/config/locales/uk.yml
index c1e711d6f5..99ff28c817 100644
--- a/config/locales/uk.yml
+++ b/config/locales/uk.yml
@@ -152,6 +152,11 @@ uk:
selected:
organisation_schema:
all_content_search_description: Знайти весь вміст від %{organization}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Поділ на сторінки
diff --git a/config/locales/ur.yml b/config/locales/ur.yml
index 07cba6822d..273ea4274d 100644
--- a/config/locales/ur.yml
+++ b/config/locales/ur.yml
@@ -142,6 +142,11 @@ ur:
selected:
organisation_schema:
all_content_search_description: "%{organisation} کا تمام مواد تلاش کریں"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: صفحہ بندی
diff --git a/config/locales/uz.yml b/config/locales/uz.yml
index ec0b6e2ad8..dae1f1b964 100644
--- a/config/locales/uz.yml
+++ b/config/locales/uz.yml
@@ -147,6 +147,11 @@ uz:
selected:
organisation_schema:
all_content_search_description: "%{organization} дан бутун контентни топиш"
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Саҳифаларнинг рақамланиши
diff --git a/config/locales/vi.yml b/config/locales/vi.yml
index efdb31298f..be2b9265c8 100644
--- a/config/locales/vi.yml
+++ b/config/locales/vi.yml
@@ -144,6 +144,11 @@ vi:
selected:
organisation_schema:
all_content_search_description: Tìm tất cả nội dung từ %{organisation}
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: Phân trang
diff --git a/config/locales/zh-hk.yml b/config/locales/zh-hk.yml
index 387cae7dd5..9f0bd9c1b4 100644
--- a/config/locales/zh-hk.yml
+++ b/config/locales/zh-hk.yml
@@ -143,6 +143,11 @@ zh-hk:
selected:
organisation_schema:
all_content_search_description: 從 %{organisation} 獲得更多內容
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: 分頁
diff --git a/config/locales/zh-tw.yml b/config/locales/zh-tw.yml
index 4abdfb02e5..069ca2d4fc 100644
--- a/config/locales/zh-tw.yml
+++ b/config/locales/zh-tw.yml
@@ -143,6 +143,11 @@ zh-tw:
selected:
organisation_schema:
all_content_search_description: 從 %{organisation} 找到所有內容
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: 分頁
diff --git a/config/locales/zh.yml b/config/locales/zh.yml
index f9cf764a0d..c7d2f06fae 100644
--- a/config/locales/zh.yml
+++ b/config/locales/zh.yml
@@ -143,6 +143,11 @@ zh:
selected:
organisation_schema:
all_content_search_description: 查找 %{organisation} 的全部内容
+ password_input:
+ button:
+ button_aria_label:
+ error_text_prefix:
+ label:
previous_and_next_navigation:
next:
pagination: 分页
diff --git a/spec/components/password_input_spec.rb b/spec/components/password_input_spec.rb
new file mode 100644
index 0000000000..06e78cd7f4
--- /dev/null
+++ b/spec/components/password_input_spec.rb
@@ -0,0 +1,47 @@
+require "rails_helper"
+
+describe "Password Input", type: :view do
+ def component_name
+ "password_input"
+ end
+
+ before { allow(SecureRandom).to receive(:hex).and_return("1234") }
+
+ it "renders a password input component correctly by default" do
+ render_component({})
+ assert_select 'div.govuk-password-input[class~="govuk-form-group govuk-password-input gem-c-password-input govuk-!-margin-bottom-3"]'
+ assert_select "div.govuk-password-input[data-module=govuk-password-input]"
+ assert_select "div.govuk-password-input input.govuk-input.govuk-password-input__input.govuk-js-password-input-input"
+ assert_select "div.govuk-password-input input[name=password][type=password][autocomplete=current-password][autocapitalize=none][spellcheck=false][id='1234-password-input']"
+ assert_select "div.govuk-password-input label[for='1234-password-input']", "Password"
+ assert_select "div.govuk-password-input button[aria-controls='1234-password-input']", "Show"
+ assert_select "p#1234-password-input-with-error-message-error", false
+ assert_select "div.govuk-password-input input.govuk-input--error", false
+ assert_select "div.govuk-form-group--error", false
+ end
+
+ it "renders a password input with extra classes and a paragraph when error_text is passed" do
+ render_component({ error_text: "Password must contain at least 8 characters" })
+ assert_select "div.govuk-form-group--error"
+ assert_select "div.govuk-password-input label[for='1234-password-input-with-error-message']", "Password"
+ assert_select "div.govuk-password-input input.govuk-input--error[name=password-input-with-error-message]"
+ assert_select "div.govuk-password-input input.govuk-input--error[aria-describedby='1234-password-input-with-error-message-error']"
+ assert_select "div.govuk-password-input button[aria-controls='1234-password-input-with-error-message']", "Show"
+ assert_select "p#1234-password-input-with-error-message-error", "Error: Password must contain at least 8 characters"
+ end
+
+ it "renders a password input with custom text" do
+ render_component({
+ label_text: "Secret number",
+ error_text_prefix: "Incompatible",
+ error_text: "6 is scared of 7, so they can't be next to each other.",
+ })
+ assert_select "div.govuk-password-input label", "Secret number"
+ assert_select "p#1234-password-input-with-error-message-error", "Incompatible: 6 is scared of 7, so they can't be next to each other."
+ end
+
+ it "accepts margin_bottom values" do
+ render_component({ margin_bottom: 9 })
+ assert_select 'div.govuk-password-input[class~="govuk-form-group govuk-password-input gem-c-password-input govuk-!-margin-bottom-9"]'
+ end
+end
diff --git a/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb b/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb
index 477f4d787f..f829af6442 100644
--- a/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb
+++ b/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb
@@ -19,7 +19,7 @@ def request
end
it "detect the total number of stylesheet paths" do
- expect(get_component_css_paths.count).to eql(75)
+ expect(get_component_css_paths.count).to eql(76)
end
it "initialize empty asset helper" do