LIBITD-2573. Make Confirmation checkbox more noticeable

app/assets/stylesheets/application.scss

@@ -17,14 +17,15 @@
  *= require_self
  */
 
+$required_field_error_color: #a94442;
 
 body > #viewport > .content > .container { margin-top: 25px;  }
 .alert { margin-top: 15px; }
 
 #home-jumbo, #upload-jumbo { margin-top: 50px }
 
 label.required abbr {
-  color: #a94442;
+  color: $required_field_error_color;
 }
 
 
@@ -39,7 +40,12 @@ label.required abbr {
 }
 
 
-.help-block.has-error { color: #a94442 }
+.help-block.has-error { color: $required_field_error_color; }
+
+.has-error input[type="checkbox"] {
+  outline: 2px solid $required_field_error_color;
+  outline-offset: 2px;
+}
 
 .radio-question { padding-left: 50px; padding-right: 20px; vertical-align: middle; }
 .help-block.radio-question-help { vertical-align: middle; margin-bottom: 2px; display: inline-block; padding-left: 10px }
@@ -136,6 +142,10 @@ table.prospects th, table.prospects td  {
   margin-bottom: 2em;
 }
 
+.prospect_user_confirmation label {
+  font-weight: bold;
+}
+
 /* configuration page */
 .mover { width: 5% }
 .toggler { float: right }

app/views/prospects/_summary.html.erb

@@ -142,10 +142,11 @@
 <%= form.input :additional_comments, label: "Enter below:", disabled: !@current_user.nil? %>
 <h2>Confirmation</h2>
 <% unless @current_user %>
-  <%= form.label(  :user_confirmation, { class: "required" } ) do %>
-    <abbr title='required'>*</abbr> I certify that all information on this application is accurate and recognize it is subject to verification.
-  <% end %>
-  <%= form.check_box( :user_confirmation, { class: 'user_confirmation', required: true } )  %> Yes.
+  <%= form.input :user_confirmation,
+                 as: :boolean,
+                 wrapper: :vertical_boolean,
+                 label: 'I certify that all information on this application is accurate and recognize it is subject to verification.',
+                 required: true %>
 <% end %>
-<br/>
+
 <%= form.input( :user_signature, { class: 'user_signature', required: true , label: "Please type your name as it will serve as a digital signature:", disabled:  !@current_user.nil? } )  %>

test/system/submit_prospect_application_test.rb

@@ -112,4 +112,45 @@ class SubmitProspectApplicationTest < ApplicationSystemTestCase
     assert page.has_field?("prospect_phone_numbers_attributes_0_phone_type", with: "local")
     assert_equal Prospect.steps[1], page.get_rack_session_key("prospect_step")
   end
+
+  test "won't submit if confirmation checkbox and signature are not provided" do
+    # Fast-forward session to the final step, mirroring comment_confirmation_test.rb
+    fixture = prospects(:all_valid)
+    all_valid = fixture.attributes
+    all_valid[:enumeration_ids] = fixture.enumerations.map(&:id)
+    all_valid.reject! { |a| %w[id created_at updated_at].include? a }
+
+    all_valid[:directory_id] = SecureRandom.hex
+    all_valid[:semester] = Enumeration.active_semesters.first.value
+    all_valid[:available_hours_per_week] = 0
+
+    all_valid["addresses_attributes"] = [ addresses(:all_valid_springfield).attributes.reject { |a| a == "id" } ]
+    all_valid["phone_numbers_attributes"] = [ phone_numbers(:all_valid_dummy).attributes.reject { |a| a == "id" } ]
+
+    # Remove the "user_signature" key for this test
+    all_valid.reject! { |a| a == "user_signature" }
+
+    page.set_rack_session(prospect_params: all_valid)
+    page.set_rack_session(prospect_step: "comments_confirmation")
+
+    visit new_prospect_path
+    assert page.has_content?("Confirmation")
+
+    # Attempt to submit without checking the confirmation checkbox or providing a signature
+    click_button "Submit"
+
+    # Form should not have been submitted — still on the confirmation page
+    assert_not page.has_content?("Submitted")
+    assert page.has_content?("Confirmation")
+
+    # Both fields should show validation errors
+    assert page.has_css?(".prospect_user_confirmation.has-error"),
+      "Expected confirmation checkbox wrapper to have has-error class"
+    assert page.has_css?(".has-error input[type='checkbox']"),
+      "Expected confirmation checkbox to have error outline"
+    assert page.has_content?("must be accepted")
+    assert page.has_css?(".prospect_user_signature.has-error"),
+      "Expected signature field wrapper to have has-error class"
+    assert page.has_content?("can't be blank")
+  end
 end