LG-1388 webauthn hide on disabled js

app/javascript/packs/webauthn-unhide-signup.js

@@ -0,0 +1,11 @@
+const WebAuthn = require('../app/webauthn');
+
+function unhideWebauthn() {
+  if (WebAuthn.isWebAuthnEnabled()) {
+    const elem = document.querySelector('label[for=two_factor_options_form_selection_webauthn]');
+    if (elem) {
+      elem.classList.remove('hide');
+    }
+  }
+}
+document.addEventListener('DOMContentLoaded', unhideWebauthn);

app/presenters/two_factor_authentication/webauthn_selection_presenter.rb

@@ -5,7 +5,7 @@ def method
     end
 
     def html_class
-      'hidden'
+      'hide'
     end
   end
 end

app/views/two_factor_authentication/options/index.html.slim

@@ -32,4 +32,4 @@ br
     p = @presenter.account_reset_or_cancel_link
 = render 'shared/cancel', link: destroy_user_session_path
 
-== javascript_pack_tag 'webauthn-unhide'
+== javascript_pack_tag 'webauthn-unhide-signin'

app/views/users/two_factor_authentication_setup/index.html.erb

@@ -12,7 +12,7 @@
     <fieldset class="m0 p0 border-none">
       <legend class="mb2 serif bold"><%= @presenter.label %></legend>
       <% @presenter.options.each_with_index do |option, index| %>
-      <label class="btn-border col-12 mb2 bg-lightest-blue" for="two_factor_options_form_selection_<%= option.type %>">
+      <label class="btn-border col-12 mb2 bg-lightest-blue <%= option.html_class %>" for="two_factor_options_form_selection_<%= option.type %>">
         <div class="radio">
           <%= radio_button_tag('two_factor_options_form[selection]', option.type, index.zero?) %>
           <span class="indicator mt-tiny"></span>
@@ -30,3 +30,5 @@
 <div class="mt2 pt1 border-top">
   <%= render 'shared/cancel', link: destroy_user_session_path %>
 </div>
+
+<%= javascript_pack_tag("webauthn-unhide-signup") %>

spec/features/webauthn/hidden_spec.rb

@@ -0,0 +1,23 @@
+require 'rails_helper'
+
+describe 'webauthn hide' do
+  context 'with javascript enabled', :js do
+    it 'displays the security key option' do
+      sign_up_and_set_password
+      webauthn_option = page.find('label[for=two_factor_options_form_selection_webauthn]')
+
+      expect(webauthn_option).to be_visible
+    end
+  end
+
+  context 'with javascript disabled' do
+    it 'does not display the security key option' do
+      sign_up_and_set_password
+      webauthn_option = page.find(
+        'label[for=two_factor_options_form_selection_webauthn]',
+      )
+
+      expect(webauthn_option[:class]).to include('hide')
+    end
+  end
+end

spec/presenters/two_factor_authentication/webauthn_selection_presenter_spec.rb

@@ -11,8 +11,8 @@
   end
 
   describe '#html_class' do
-    it 'returns hidden' do
-      expect(subject.html_class).to eq 'hidden'
+    it 'returns hide' do
+      expect(subject.html_class).to eq 'hide'
     end
   end
 end