Consolidate SAML/OIDC redirect JavaScript (#9985)

* Consolidate SAML/OIDC redirect JavaScript changelog: Internal, Code Quality, Consolidate redirect logic for SAML/OIDC * Use classList#replace for no-js replacement * Use consistent click_immediate attribute value See: #9985 (comment) * Remove unnecessary hidden field for tests See: #9985 (comment) * Fix helper for OIDC redirect link * Improve spec helper resilience to HTML tag attributes
18F · Jan 30, 2024 · da1311e · da1311e
1 parent 4f9d43a
commit da1311e
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 29 deletions.
diff --git a/app/javascript/packs/click-immediate.ts b/app/javascript/packs/click-immediate.ts
@@ -0,0 +1,3 @@
+document
+  .querySelectorAll<HTMLElement>('[data-click-immediate]')
+  .forEach((element) => element.click());
diff --git a/app/javascript/packs/openid-connect-redirect.ts b/app/javascript/packs/openid-connect-redirect.ts
diff --git a/app/javascript/packs/saml-post.js b/app/javascript/packs/saml-post.js
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -18,7 +18,7 @@
   <title><%= title %> | <%= APP_NAME %></title>
 
   <%= javascript_tag(nonce: true) do %>
-    document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, 'js');
+    document.documentElement.classList.replace('no-js', 'js');
   <% end %>
   <%= preload_link_tag font_url('public-sans/PublicSans-Bold.woff2') %>
   <%= preload_link_tag font_url('public-sans/PublicSans-Regular.woff2') %>

diff --git a/app/views/openid_connect/shared/redirect_js.html.erb b/app/views/openid_connect/shared/redirect_js.html.erb
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html class="no-js">
   <head>
     <meta charset="utf-8" />
     <title><%= t('headings.redirecting') %> | <%= APP_NAME %></title>
+    <%= javascript_tag(nonce: true) do %>
+      document.documentElement.classList.replace('no-js', 'js');
+    <% end %>
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= render_stylesheet_once_tags %>
   </head>
   <body class="tablet:bg-primary-lighter">
-    <div class="grid-container tablet:padding-y-6">
+    <div class="grid-container tablet:padding-y-6 no-js">
       <div class="grid-row">
         <div class="tablet:grid-col-6 tablet:grid-offset-3">
           <%= render PageHeadingComponent.new.with_content(t('saml_idp.shared.saml_post_binding.heading')) %>
@@ -16,10 +19,10 @@
             <%= t('saml_idp.shared.saml_post_binding.no_js') %>
           </p>
 
-          <%= link_to(t('forms.buttons.continue'), @oidc_redirect_uri, class: 'usa-button usa-button--wide usa-button--big', id: 'openid-connect-redirect') %>
+          <%= link_to(t('forms.buttons.continue'), @oidc_redirect_uri, class: 'usa-button usa-button--wide usa-button--big', data: { click_immediate: '' }) %>
         </div>
       </div>
     </div>
-    <%= render_javascript_pack_once_tags 'openid-connect-redirect' %>
+    <%= render_javascript_pack_once_tags 'click-immediate' %>
   </body>
 </html>
diff --git a/app/views/saml_idp/shared/saml_post_binding.html.erb b/app/views/saml_idp/shared/saml_post_binding.html.erb
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
-<html>
+<html class="no-js">
   <head>
     <meta charset="utf-8" />
     <title><%= t('headings.redirecting') %> | <%= APP_NAME %></title>
+    <%= javascript_tag(nonce: true) do %>
+      document.documentElement.classList.replace('no-js', 'js');
+    <% end %>
     <%= csrf_meta_tags %>
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= render_stylesheet_once_tags %>
-    <%= render_javascript_pack_once_tags 'saml-post' %>
   </head>
   <body>
-    <div class="grid-container tablet:padding-y-6">
+    <div class="grid-container tablet:padding-y-6 no-js">
       <div class="grid-row">
         <div class="tablet:grid-col-6 tablet:grid-offset-3">
           <%= render PageHeadingComponent.new.with_content(t('.heading')) %>
@@ -18,16 +20,16 @@
             <%= t('.no_js') %>
           </p>
 
-          <%= form_tag action_url, id: 'saml-post-binding' do %>
-            <%= hidden_field_tag('csp_uris', csp_uris) if Rails.env.test? %>
+          <%= simple_form_for('', url: action_url) do |f| %>
             <%= hidden_field_tag(type, message) %>
             <% if params.key?(:RelayState) %>
               <%= hidden_field_tag('RelayState', params[:RelayState]) %>
             <% end %>
-            <%= submit_tag t('forms.buttons.submit.default'), class: 'usa-button usa-button--wide usa-button--big' %>
+            <%= f.submit t('forms.buttons.submit.default'), data: { click_immediate: '' } %>
           <% end %>
         </div>
       </div>
     </div>
+    <%= render_javascript_pack_once_tags 'click-immediate' %>
   </body>
 </html>
diff --git a/app/views/shared/saml_post_form.html.erb b/app/views/shared/saml_post_form.html.erb
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html class="no-js">
   <head>
     <meta charset="utf-8" />
+    <%= javascript_tag(nonce: true) do %>
+      document.documentElement.classList.replace('no-js', 'js');
+    <% end %>
     <%= csrf_meta_tags %>
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= render_stylesheet_once_tags %>
-    <%= render_javascript_pack_once_tags 'saml-post' %>
   </head>
   <body>
-    <div class="grid-container tablet:padding-y-6">
+    <div class="grid-container tablet:padding-y-6 no-js">
       <div class="grid-row">
         <div class="tablet:grid-col-6 tablet:grid-offset-3">
           <%= render PageHeadingComponent.new.with_content(t('saml_idp.shared.saml_post_binding.heading')) %>
@@ -17,14 +19,15 @@
             <%= t('saml_idp.shared.saml_post_binding.no_js') %>
           </p>
 
-          <%= form_tag action_url, id: 'saml-post-binding' do %>
+          <%= simple_form_for('', url: action_url) do |f| %>
             <% form_params.each do |key, val| %>
               <%= hidden_field_tag(key, val) %>
             <% end %>
-            <%= submit_tag t('forms.buttons.submit.default'), class: 'usa-button usa-button--wide usa-button--big' %>
+            <%= f.submit t('forms.buttons.submit.default'), data: { click_immediate: '' } %>
           <% end %>
         </div>
       </div>
     </div>
+    <%= render_javascript_pack_once_tags 'click-immediate' %>
   </body>
 </html>
diff --git a/spec/support/oidc_auth_helper.rb b/spec/support/oidc_auth_helper.rb
@@ -120,8 +120,7 @@ def extract_meta_refresh_url
   end
 
   def extract_redirect_url
-    content = page.find('a#openid-connect-redirect')
-    content[:href]
+    page.find_link(t('forms.buttons.continue'))[:href]
   end
 
   def oidc_redirect_url

diff --git a/spec/support/saml_response_doc.rb b/spec/support/saml_response_doc.rb
@@ -33,7 +33,7 @@ def input_id
   def raw_xml_response
     if @test_type == 'feature'
       xml_response
-    elsif @response.body.include?('<html>')
+    elsif @response.body.include?('<html')
       html_response
     else
       @response.body

diff --git a/tsconfig.json b/tsconfig.json
@@ -25,5 +25,5 @@
     "./*.js",
     "scripts"
   ],
-  "exclude": ["**/fixtures", "**/*.spec.js", "app/javascript/packs/saml-post.js"]
+  "exclude": ["**/fixtures", "**/*.spec.js"]
 }