Merge pull request #2877 from DFE-Digital/minor-form-tweaks-10

[CAPT-1729] Use GOVUK formbuilder for one time password form
DFE-Digital · Jun 21, 2024 · 9c0b1ce · 9c0b1ce
2 parents d0cb422 + 909058d
commit 9c0b1ce
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 46 deletions.
diff --git a/app/views/claims/_one_time_password.html.erb b/app/views/claims/_one_time_password.html.erb
@@ -2,46 +2,47 @@
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render("shared/error_summary", instance: form) if form.errors.any? %>
-
-    <span class="govuk-caption-xl"><%= email_or_mobile == "email" ? "Email address" : "Mobile number" %> verification</span>
-
-    <%= form_for form, url: claim_path(current_journey_routing_name) do |f| %>
-      <%= form_group_tag f.object do %>
-        <h1 class="govuk-label-wrapper">
-          <label class="govuk-label govuk-label--l" for="claim_one_time_password"><%= t("one_time_password.title") %></label>
-        </h1>
-
-        <div id="one-time-password-hint" class="govuk-hint">
-          <%= t("one_time_password.hint1_html", email_or_mobile_message: email_or_text_message, email_or_mobile_value: email_or_mobile_value) %>
-          <br><br>
-          <%= t("one_time_password.validity_duration", duration_valid: one_time_password_validity_duration) %>
-        </div>
-
-        <%= errors_tag f.object, :one_time_password %>
-        <%= f.text_field :one_time_password,
-                            autocomplete: "off",
-                            class: css_classes_for_input(f.object, :one_time_password, 'govuk-input--width-5'),
-                            "aria-describedby" => "one-time-password-hint" %>
+    <%= form_with model: form, url: claim_path(current_journey_routing_name), builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
+      <%= f.govuk_error_summary %>
+
+      <%= f.govuk_text_field :one_time_password,
+        width: 5,
+        autocomplete: "off",
+        label: {
+          text: t("one_time_password.title"),
+          tag: "h1",
+          size: "l"
+        },
+        caption: {
+          text: "#{email_or_mobile == "email" ? "Email address" : "Mobile number"} verification",
+          size: "xl"
+        },
+        hint: -> do %>
+          <p>
+            <%= t("one_time_password.hint1_html", email_or_mobile_message: email_or_text_message, email_or_mobile_value: email_or_mobile_value) %>
+          </p>
+
+          <p>
+            <%= t("one_time_password.validity_duration", duration_valid: one_time_password_validity_duration) %>
+          </p>
       <% end %>
 
       <div class="govuk-!-margin-bottom-6">
         <% if email_or_mobile == "email" %>
-          <%= link_to "Resend passcode (you will be sent back to the email address page)", claim_path(current_journey_routing_name, "email-address"), class: "govuk-link govuk-link--no-visited-state" %>
+          <%= govuk_link_to "Resend passcode (you will be sent back to the email address page)", claim_path(current_journey_routing_name, "email-address"), no_visited_state: true %>
         <% else %>
-          <%= link_to "Resend passcode (you will be sent back to the mobile number page)", claim_path(current_journey_routing_name, "mobile-number"), class: "govuk-link govuk-link--no-visited-state" %>
+          <%= govuk_link_to "Resend passcode (you will be sent back to the mobile number page)", claim_path(current_journey_routing_name, "mobile-number"), no_visited_state: true %>
         <% end %>
       </div>
 
       <div class="govuk-button-group">
-        <%= f.submit "Confirm", class: "govuk-button" %>
+        <%= f.govuk_submit "Confirm" %>
 
         <% if email_or_mobile == "email" %>
-          <%= link_to "Change email address", claim_path(current_journey_routing_name, "email-address"), class: "govuk-button govuk-button--secondary", role: "button", data: {module: "govuk-button"} %>
+          <%= govuk_button_link_to "Change email address", claim_path(current_journey_routing_name, "email-address"), secondary: true %>
         <% else %>
-          <%= link_to "Change mobile number", claim_path(current_journey_routing_name, "mobile-number"), class: "govuk-button govuk-button--secondary", role: "button", data: {module: "govuk-button"} %>
+          <%= govuk_button_link_to "Change mobile number", claim_path(current_journey_routing_name, "mobile-number"), secondary: true %>
         <% end %>
-
       </div>
     <% end %>
   </div>

diff --git a/spec/features/changing_answers_spec.rb b/spec/features/changing_answers_spec.rb
@@ -370,7 +370,7 @@
         mail = ActionMailer::Base.deliveries.last
         otp_in_mail_sent = mail[:personalisation].decoded.scan(/\b[0-9]{6}\b/).first
 
-        fill_in "claim_one_time_password", with: otp_in_mail_sent
+        fill_in "claim-one-time-password-field", with: otp_in_mail_sent
         click_on "Confirm"
 
         expect(session.reload.answers.email_verified).to eq true
@@ -426,7 +426,7 @@
         expect(page).to have_text("Mobile number verification")
         expect(page).to have_text("Enter the 6-digit passcode")
 
-        fill_in "claim_one_time_password", with: otp_code
+        fill_in "claim-one-time-password-field", with: otp_code
         click_on "Confirm"
 
         expect(page).not_to have_text("Some places are both a bank and a building society")
@@ -482,7 +482,7 @@
         expect(page).to have_text("Mobile number verification")
         expect(page).to have_text("Enter the 6-digit passcode")
 
-        fill_in "claim_one_time_password", with: otp_code
+        fill_in "claim-one-time-password-field", with: otp_code
         click_on "Confirm"
 
         expect(page).not_to have_text("Some places are both a bank and a building society")

diff --git a/spec/features/claim_with_mobile_sms_otp_spec.rb b/spec/features/claim_with_mobile_sms_otp_spec.rb
@@ -51,7 +51,7 @@
         expect(page).to have_text("Mobile number verification")
         expect(page).to have_text("Enter the 6-digit passcode")
 
-        fill_in "claim_one_time_password", with: scenario[:otp_code]
+        fill_in "claim-one-time-password-field", with: scenario[:otp_code]
         click_on "Confirm"
 
         expect(page).to have_text(I18n.t("questions.bank_or_building_society"))

diff --git a/spec/features/combined_teacher_claim_journey_spec.rb b/spec/features/combined_teacher_claim_journey_spec.rb
@@ -167,12 +167,12 @@
     otp_in_mail_sent = mail[:personalisation].decoded.scan(/\b[0-9]{6}\b/).first
 
     # - One time password wrong
-    fill_in "claim_one_time_password", with: "000000"
+    fill_in "claim-one-time-password-field", with: "000000"
     click_on "Confirm"
     expect(page).to have_text("Enter a valid passcode")
 
     # - clear and enter correct OTP
-    fill_in "claim_one_time_password", with: otp_in_mail_sent
+    fill_in "claim-one-time-password-field-error", with: otp_in_mail_sent
     click_on "Confirm"
 
     # - Provide mobile number

diff --git a/spec/features/combined_teacher_claim_journey_with_teacher_id_check_mobile_spec.rb b/spec/features/combined_teacher_claim_journey_with_teacher_id_check_mobile_spec.rb
@@ -211,7 +211,7 @@ def provide_alternative_number
     fill_in "Mobile number", with: alt_phone_number
     click_on "Continue"
 
-    fill_in "claim_one_time_password", with: otp_code
+    fill_in "claim-one-time-password-field", with: otp_code
     click_on "Confirm"
   end
 

diff --git a/spec/features/early_career_payments_claim_spec.rb b/spec/features/early_career_payments_claim_spec.rb
@@ -161,12 +161,12 @@
     otp_in_mail_sent = mail[:personalisation].decoded.scan(/\b[0-9]{6}\b/).first
 
     # - One time password wrong
-    fill_in "claim_one_time_password", with: "000000"
+    fill_in "claim-one-time-password-field", with: "000000"
     click_on "Confirm"
     expect(page).to have_text("Enter a valid passcode")
 
     # - clear and enter correct OTP
-    fill_in "claim_one_time_password", with: otp_in_mail_sent
+    fill_in "claim-one-time-password-field-error", with: otp_in_mail_sent
     click_on "Confirm"
 
     # - Provide mobile number
@@ -575,7 +575,7 @@
     mail = ActionMailer::Base.deliveries.last
     otp_in_mail_sent = mail[:personalisation].decoded.scan(/\b[0-9]{6}\b/).first
 
-    fill_in "claim_one_time_password", with: otp_in_mail_sent
+    fill_in "claim-one-time-password-field", with: otp_in_mail_sent
     click_on "Confirm"
 
     # - Provide mobile number
@@ -896,7 +896,7 @@
       mail = ActionMailer::Base.deliveries.last
       otp_in_mail_sent = mail[:personalisation].decoded.scan(/\b[0-9]{6}\b/).first
 
-      fill_in "claim_one_time_password", with: otp_in_mail_sent
+      fill_in "claim-one-time-password-field", with: otp_in_mail_sent
       click_on "Confirm"
 
       # - Provide mobile number

diff --git a/spec/features/hmrc_bank_validation_spec.rb b/spec/features/hmrc_bank_validation_spec.rb
@@ -92,7 +92,7 @@ def get_to_bank_details_page
     otp_in_mail_sent = mail[:personalisation].decoded.scan(/\b[0-9]{6}\b/).first
 
     # - clear and enter correct OTP
-    fill_in "claim_one_time_password", with: otp_in_mail_sent
+    fill_in "claim-one-time-password-field", with: otp_in_mail_sent
     click_on "Confirm"
 
     # - Provide mobile number

diff --git a/spec/features/levelling_up_premium_payments_spec.rb b/spec/features/levelling_up_premium_payments_spec.rb
@@ -171,12 +171,12 @@ def claim_up_to_check_your_answers
     otp_in_mail_sent = mail[:personalisation].decoded.scan(/\b[0-9]{6}\b/).first
 
     # - One time password wrong
-    fill_in "claim_one_time_password", with: "000000"
+    fill_in "claim-one-time-password-field", with: "000000"
     click_on "Confirm"
     expect(page).to have_text("Enter a valid passcode")
 
     # - clear and enter correct OTP
-    fill_in "claim_one_time_password", with: otp_in_mail_sent
+    fill_in "claim-one-time-password-field-error", with: otp_in_mail_sent
     click_on "Confirm"
 
     # - Provide mobile number

diff --git a/spec/features/one_time_password_spec.rb b/spec/features/one_time_password_spec.rb
@@ -16,7 +16,7 @@
 
   scenario "verifies the password" do
     # - that is wrong
-    fill_in "claim_one_time_password", with: "000000"
+    fill_in "claim-one-time-password-field", with: "000000"
 
     click_on "Confirm"
     expect(page).to have_text("Enter a valid passcode")
@@ -27,7 +27,7 @@
 
     stub_const("OneTimePassword::Base::DRIFT", -100)
 
-    fill_in "claim_one_time_password", with: get_otp_from_email
+    fill_in "claim-one-time-password-field-error", with: get_otp_from_email
     click_on "Confirm"
     expect(page).to have_text("Your passcode has expired, request a new one")
     expect(session.reload.answers.email_verified).to_not equal(true)
@@ -36,7 +36,7 @@
 
     stub_const("OneTimePassword::Base::DRIFT", drift)
 
-    fill_in "claim_one_time_password", with: get_otp_from_email
+    fill_in "claim-one-time-password-field-error", with: get_otp_from_email
     click_on "Confirm"
     expect(page).to_not have_css(".govuk-error-summary")
     expect(session.reload.answers.email_verified).to equal(true)

diff --git a/spec/features/student_loans_claim_spec.rb b/spec/features/student_loans_claim_spec.rb
@@ -127,7 +127,7 @@ def fill_in_remaining_personal_details_and_submit
     mail = ActionMailer::Base.deliveries.last
     otp_in_mail_sent = mail[:personalisation].decoded.scan(/\b[0-9]{6}\b/).first
 
-    fill_in "claim_one_time_password", with: otp_in_mail_sent
+    fill_in "claim-one-time-password-field", with: otp_in_mail_sent
 
     click_on "Confirm"
 

diff --git a/spec/features/tslr_claim_journey_with_teacher_id_check_mobile_spec.rb b/spec/features/tslr_claim_journey_with_teacher_id_check_mobile_spec.rb
@@ -200,7 +200,7 @@ def provide_alternative_number
     fill_in "Mobile number", with: alt_phone_number
     click_on "Continue"
 
-    fill_in "claim_one_time_password", with: otp_code
+    fill_in "claim-one-time-password-field", with: otp_code
     click_on "Confirm"
   end