Merge pull request #3176 from alphagov/use-password-input-component

Use password input component

Gemfile.lock

@@ -164,24 +164,24 @@ GEM
       rest-client (~> 2.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    google-protobuf (4.28.1)
+    google-protobuf (4.28.2)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.28.1-aarch64-linux)
+    google-protobuf (4.28.2-aarch64-linux)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.28.1-arm64-darwin)
+    google-protobuf (4.28.2-arm64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.28.1-x86_64-linux)
+    google-protobuf (4.28.2-x86_64-linux)
       bigdecimal
       rake (>= 13)
     googleapis-common-protos-types (1.16.0)
       google-protobuf (>= 3.18, < 5.a)
-    govuk_app_config (9.14.0)
+    govuk_app_config (9.14.1)
       logstasher (~> 2.1)
-      opentelemetry-exporter-otlp (>= 0.25, < 0.29)
-      opentelemetry-instrumentation-all (>= 0.39.1, < 0.63.0)
+      opentelemetry-exporter-otlp (>= 0.25, < 0.30)
+      opentelemetry-instrumentation-all (>= 0.39.1, < 0.65.0)
       opentelemetry-sdk (~> 1.2)
       plek (>= 4, < 6)
       prometheus_exporter (~> 2.0)
@@ -193,7 +193,7 @@ GEM
     govuk_personalisation (1.0.0)
       plek (>= 1.9.0)
       rails (>= 6, < 8)
-    govuk_publishing_components (43.1.1)
+    govuk_publishing_components (43.3.0)
       govuk_app_config
       govuk_personalisation (>= 0.7.0)
       kramdown
@@ -323,7 +323,7 @@ GEM
     opentelemetry-api (1.4.0)
     opentelemetry-common (0.21.0)
       opentelemetry-api (~> 1.0)
-    opentelemetry-exporter-otlp (0.28.1)
+    opentelemetry-exporter-otlp (0.29.0)
       google-protobuf (>= 3.18)
       googleapis-common-protos-types (~> 1.3)
       opentelemetry-api (~> 1.1)
@@ -359,7 +359,7 @@ GEM
     opentelemetry-instrumentation-active_support (0.6.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-all (0.62.1)
+    opentelemetry-instrumentation-all (0.64.0)
       opentelemetry-instrumentation-active_model_serializers (~> 0.20.1)
       opentelemetry-instrumentation-aws_lambda (~> 0.1.0)
       opentelemetry-instrumentation-aws_sdk (~> 0.5.0)
@@ -378,9 +378,9 @@ GEM
       opentelemetry-instrumentation-koala (~> 0.20.1)
       opentelemetry-instrumentation-lmdb (~> 0.22.1)
       opentelemetry-instrumentation-mongo (~> 0.22.1)
-      opentelemetry-instrumentation-mysql2 (~> 0.27.0)
+      opentelemetry-instrumentation-mysql2 (~> 0.28.0)
       opentelemetry-instrumentation-net_http (~> 0.22.1)
-      opentelemetry-instrumentation-pg (~> 0.27.0)
+      opentelemetry-instrumentation-pg (~> 0.29.0)
       opentelemetry-instrumentation-que (~> 0.8.0)
       opentelemetry-instrumentation-racecar (~> 0.3.0)
       opentelemetry-instrumentation-rack (~> 0.24.0)
@@ -393,7 +393,7 @@ GEM
       opentelemetry-instrumentation-ruby_kafka (~> 0.21.0)
       opentelemetry-instrumentation-sidekiq (~> 0.25.0)
       opentelemetry-instrumentation-sinatra (~> 0.24.0)
-      opentelemetry-instrumentation-trilogy (~> 0.59.0)
+      opentelemetry-instrumentation-trilogy (~> 0.60.0)
     opentelemetry-instrumentation-aws_lambda (0.1.1)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
@@ -450,15 +450,15 @@ GEM
     opentelemetry-instrumentation-mongo (0.22.4)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-mysql2 (0.27.2)
+    opentelemetry-instrumentation-mysql2 (0.28.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-helpers-mysql
       opentelemetry-helpers-sql-obfuscation
       opentelemetry-instrumentation-base (~> 0.22.1)
     opentelemetry-instrumentation-net_http (0.22.7)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-pg (0.27.4)
+    opentelemetry-instrumentation-pg (0.29.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-helpers-sql-obfuscation
       opentelemetry-instrumentation-base (~> 0.22.1)
@@ -505,7 +505,7 @@ GEM
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
       opentelemetry-instrumentation-rack (~> 0.21)
-    opentelemetry-instrumentation-trilogy (0.59.3)
+    opentelemetry-instrumentation-trilogy (0.60.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-helpers-mysql
       opentelemetry-helpers-sql-obfuscation
@@ -537,7 +537,7 @@ GEM
     psych (5.1.2)
       stringio
     public_suffix (6.0.1)
-    puma (6.4.2)
+    puma (6.4.3)
       nio4r (~> 2.0)
     pundit (2.4.0)
       activesupport (>= 3.0.0)

app/assets/javascripts/application.js

@@ -1,6 +1,7 @@
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/components/copy-to-clipboard
 //= require govuk_publishing_components/components/option-select
+//= require govuk_publishing_components/components/password-input
 //= require govuk_publishing_components/components/table
 
 //= require_tree ./modules

app/assets/stylesheets/application.scss

@@ -90,7 +90,7 @@ $applications-table-actions-gap: 10px;
   }
 }
 
-.govuk-table__actions { 
+.govuk-table__actions {
   @include govuk-media-query($until: $vertical-on-smallscreen-breakpoint) {
     .govuk-button, .govuk-link {
       display: block;
@@ -109,3 +109,15 @@ $applications-table-actions-gap: 10px;
     gap: $applications-table-actions-gap;
   }
 }
+
+$show-button-em-size: 19px;
+$show-button-em-multiplier: 5;
+$show-button-width: calc($show-button-em-size * $show-button-em-multiplier);
+$show-button-left-margin: 5px;
+$show-button-space: calc($show-button-width + $show-button-left-margin);
+
+@include govuk-media-query($from: mobile) {
+  form[action="/users/sign_in"] .govuk-form-group:has(input[name="user[email]"]) {
+    padding-right: $show-button-space;
+  }
+}

app/views/devise/sessions/new.html.erb

@@ -14,13 +14,8 @@
         autocomplete: "email",
       } %>
 
-      <%= render "govuk_publishing_components/components/input", {
-        label: {
-          text: "Password"
-        },
-        name: "user[password]",
-        type: "password",
-        autocomplete: "current-password"
+      <%= render "govuk_publishing_components/components/password_input", {
+        name: "user[password]"
       } %>
 
       <%= render "govuk_publishing_components/components/button", {