From df31d793006aee913680606d66a0a86441531c22 Mon Sep 17 00:00:00 2001 From: Ynda Jas Date: Thu, 19 Sep 2024 11:07:46 +0100 Subject: [PATCH 1/3] Upgrade govuk_publishing_components to 43.3.0 This includes an update to the password input to allow a custom name, which we need for Devise compatibility (without undue hacking) --- Gemfile.lock | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 8b7e7ab14..f1d9e460c 100644 --- a/Gemfile.lock +++ b/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,7 +450,7 @@ 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 @@ -458,7 +458,7 @@ GEM 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) From 775e509b9fe1ed43e613afcf788613bae11b9e1f Mon Sep 17 00:00:00 2001 From: Ynda Jas Date: Wed, 18 Sep 2024 15:01:39 +0100 Subject: [PATCH 2/3] Use password input component There's now a password input component in govuk_publishing_components, implementing the password input from GOV.UK Design System v5. This adds a show/hide password button when JavaScript is enabled, which has previously been requested by a Signon user for accessibility purposes --- app/assets/javascripts/application.js | 1 + app/views/devise/sessions/new.html.erb | 9 ++------- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 0d259c2f2..4a6283a22 100644 --- a/app/assets/javascripts/application.js +++ b/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 diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index bb8cc17c5..857162bee 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/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", { From c5e062ea7e57af55bd890a6263a313a0643c8a05 Mon Sep 17 00:00:00 2001 From: Ynda Jas Date: Wed, 18 Sep 2024 15:03:34 +0100 Subject: [PATCH 3/3] Keep email and password input widths equal The show/hide button cuts into the space for the password input. In order for the email and password inputs to stay the same width, we need to add padding to the email input's wrapper equal to the space taken up by the show/hide button (including margin) We only want this change to apply to the signin form, not anywhere we have an email input, like on the create/invite new user page. I've used the form action in the selector to make this specific, which is a bit unconventional - we could add and use a class instead, but this works without changing the template. It is however reliant on the Device new session path not changing --- app/assets/stylesheets/application.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index d59a84e1b..e72aba116 100644 --- a/app/assets/stylesheets/application.scss +++ b/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; + } +}