LG-10233: Sign in "Use face or touch unlock" page revisions

app/javascript/packs/webauthn-authenticate.ts

@@ -3,9 +3,6 @@ import type { VerifyCredentialDescriptor } from '@18f/identity-webauthn';
 
 function webauthn() {
   const webauthnInProgressContainer = document.getElementById('webauthn-auth-in-progress')!;
-  const webauthnSuccessContainer = document.getElementById('webauthn-auth-successful')!;
-
-  const webauthAlertContainer = document.querySelector('.usa-alert--error')!;
 
   const spinner = document.getElementById('spinner')!;
   spinner.classList.remove('display-none');
@@ -30,22 +27,19 @@ function webauthn() {
         (document.getElementById('client_data_json') as HTMLInputElement).value =
           result.clientDataJSON;
         (document.getElementById('signature') as HTMLInputElement).value = result.signature;
-        webauthnInProgressContainer.classList.add('display-none');
-        webauthnSuccessContainer.classList.remove('display-none');
-        // Check if alert container is shown and remove when device passes successfully.
-        if (webauthAlertContainer) {
-          webauthAlertContainer.remove();
-        }
       })
       .catch((error: Error) => {
         (document.getElementById('webauthn_error') as HTMLInputElement).value = error.name;
+      })
+      .then(() => {
         (document.getElementById('webauthn_form') as HTMLFormElement).submit();
       });
   }
 }
 
 function webauthnButton() {
-  const button = document.getElementById('webauthn-button')!;
+  const button = document.getElementById('webauthn-button') as HTMLButtonElement;
+  button.type = 'button';
   button.addEventListener('click', webauthn);
 }
 

app/presenters/two_factor_auth_code/webauthn_authentication_presenter.rb

@@ -37,26 +37,10 @@ def authenticate_button_text
       end
     end
 
-    def login_text
-      if platform_authenticator?
-        t('forms.webauthn_platform_setup.login_text')
-      else
-        t('forms.webauthn_setup.login_text')
-      end
-    end
-
     def help_text
       ''
     end
 
-    def verified_info_text
-      if platform_authenticator?
-        t('two_factor_authentication.webauthn_platform_verified.info')
-      else
-        t('two_factor_authentication.webauthn_verified.info')
-      end
-    end
-
     def header
       if platform_authenticator?
         t('two_factor_authentication.webauthn_platform_header_text')
@@ -65,14 +49,6 @@ def header
       end
     end
 
-    def verified_header
-      if platform_authenticator?
-        t('two_factor_authentication.webauthn_platform_verified.header')
-      else
-        t('two_factor_authentication.webauthn_verified.header')
-      end
-    end
-
     def link_text
       if service_provider_mfa_policy.phishing_resistant_required?
         if service_provider_mfa_policy.allow_user_to_switch_method?
@@ -113,15 +89,6 @@ def webauthn_not_enabled_link
       end
     end
 
-    def fallback_question
-      return '' unless service_provider_mfa_policy.allow_user_to_switch_method?
-      if platform_authenticator?
-        t('two_factor_authentication.webauthn_platform_fallback.question')
-      else
-        t('two_factor_authentication.webauthn_fallback.question')
-      end
-    end
-
     def multiple_factors_enabled?
       service_provider_mfa_policy.multiple_factors_enabled?
     end

app/views/two_factor_authentication/webauthn_verification/show.html.erb

@@ -31,51 +31,49 @@
           webauthn_not_enabled_url: @presenter.webauthn_not_enabled_link,
         },
       ) do %>
-    <div class="display-none spinner text-center margin-bottom-4" id="spinner">
+    <div class="display-none spinner text-center margin-bottom-5" id="spinner">
       <%= image_tag(
             asset_url('spinner.gif'),
             srcset: asset_url('spinner@2x.gif'),
             height: 144,
             width: 144,
             alt: '',
           ) %>
+      <p class="text-bold margin-y-5">
+        <%= t('two_factor_authentication.webauthn_authenticating') %>
+      </p>
     </div>
-    <p class="text-bold">
-      <%= @presenter.login_text %>
-    </p>
-    <button type="button" id="webauthn-button" class="display-block margin-y-3 usa-button usa-button--big usa-button--wide">
+    <button id="webauthn-button" class="display-block margin-y-3 usa-button usa-button--big usa-button--wide">
       <%= @presenter.authenticate_button_text %>
     </button>
-    <%= render 'shared/fallback_links', presenter: @presenter %>
   <% end %>
 
-  <div id='webauthn-auth-successful' class="display-none">
-    <div class="text-center margin-bottom-2">
-      <%= image_tag(
-            asset_url('webauthn-verified.svg'),
-            height: 144,
-            width: 144,
-            alt: '',
-          ) %>
-    </div>
-    <h2 class="h4 half-center margin-top-4">
-      <%= @presenter.verified_header %>
-    </h2>
-    <p class="half-center">
-      <%= @presenter.verified_info_text %>
-    </p>
-    <%= f.input(
-          :remember_device,
-          as: :boolean,
-          label: t('forms.messages.remember_device'),
-          wrapper_html: { class: 'margin-top-4' },
-          input_html: {
-            class: 'usa-checkbox__input--bordered',
-            checked: @presenter.remember_device_box_checked?,
-          },
-        ) %>
-    <%= f.submit t('forms.buttons.continue'), class: 'display-block margin-y-4' %>
-  </div>
+  <%= f.input(
+        :remember_device,
+        as: :boolean,
+        label: t('forms.messages.remember_device'),
+        wrapper_html: { class: 'margin-y-5' },
+        input_html: {
+          class: 'usa-checkbox__input--bordered',
+          checked: @presenter.remember_device_box_checked?,
+        },
+      ) %>
+
+  <%= render TroubleshootingOptionsComponent.new do |c| %>
+    <% c.with_header { t('components.troubleshooting_options.default_heading') } %>
+    <% if @presenter.link_path.present? %>
+      <% c.with_option(url: @presenter.link_path).with_content(@presenter.link_text) %>
+    <% end %>
+    <% c.with_option(
+         url: help_center_redirect_path(
+           category: 'get-started',
+           article: 'authentication-options',
+           flow: :two_factor_authentication,
+           step: :webauthn_verification,
+         ),
+         new_tab: true,
+       ).with_content(t('two_factor_authentication.phone_verification.troubleshooting.learn_more')) %>
+  <% end %>
 <% end %>
 <%= render 'shared/cancel', link: @presenter.cancel_link %>
 

config/locales/forms/en.yml

@@ -157,7 +157,6 @@ en:
         device.</p><p>We do not copy or store these images. You’ll need the same
         device to sign in using face or touch unlock in the future. %{link}</p>'
       intro_link_text: Learn more about face or touch unlock.
-      login_text: 'When you are ready, press the button:'
       nickname: Device nickname
       warning_text: If you lose or change your device, you’ll have to reset your
         account. We recommend setting up multiple authentication methods to help
@@ -169,5 +168,4 @@ en:
       intro_html: '<p>Add a security key that meets the FIDO standard as your
         authentication method. You can add as many security keys as you want. To
         get started, first give your security key a nickname.</p>'
-      login_text: 'When you are ready to authenticate, press the button:'
       nickname: Security key nickname

config/locales/forms/es.yml

@@ -168,7 +168,6 @@ es:
         sesión en el futuro utilizando el desbloqueo facial o táctil.
         %{link}</p>'
       intro_link_text: Conozca más sobre el desbloqueo facial o táctil.
-      login_text: 'Cuando esté listo, presione el botón:'
       nickname: Apodo de dispositivo.
       warning_text: En caso de que pierdas o cambies tu dispositivo, tienes que
         restablecer tu cuenta. Para evitar el bloqueo de la cuenta, te
@@ -182,5 +181,4 @@ es:
         método de autenticación. Puede añadir tantas claves de seguridad como
         desee. Para empezar, primero asigne un apodo a su clave de
         seguridad.</p>'
-      login_text: 'Cuando esté listo para autenticarse, presione el botón:'
       nickname: Apodo clave de seguridad

config/locales/forms/fr.yml

@@ -174,7 +174,6 @@ fr:
         pour vous connecter en utilisant le déverrouillage facial ou tactile à
         l’avenir. %{link}</p>'
       intro_link_text: En savoir plus sur le déverrouillage facial ou tactile.
-      login_text: 'Lorsque vous êtes prêt, appuyez sur le bouton:'
       nickname: Pseudo dispositivo
       warning_text: Si vous perdez ou changez votre appareil, vous devrez
         réinitialiser votre compte. Nous vous conseillons de mettre en place
@@ -189,5 +188,4 @@ fr:
         méthode d’authentification. Vous pouvez ajouter autant de clés de
         sécurité que vous le souhaitez. Pour commencer, donnez d’abord un surnom
         à votre clé de sécurité.</p>'
-      login_text: 'Lorsque vous êtes prêt à vous authentifier, appuyez sur le bouton:'
       nickname: Pseudo clé de sécurité

config/locales/two_factor_authentication/en.yml

@@ -183,24 +183,15 @@ en:
     two_factor_hspd12_choice_intro: This app requires a higher level of security.
       You need to verify your identity using a government employee ID (PIV/CAC)
       to access your information.
+    webauthn_authenticating: Authenticating your credentials…
     webauthn_error:
       additional_methods_link: choose another authentication method
       error_page_text: You have face or touch unlock enabled for this account. Use the
         same device and browser profile each time.
       multiple_methods: Face or touch unlock was unsuccessful. Please try again or %{link}.
       title: We can’t identify your device
-    webauthn_fallback:
-      question: Don’t have your security key available?
     webauthn_header_text: Connect your security key
     webauthn_piv_available: Use your PIV or CAC
-    webauthn_platform_fallback:
-      question: Don’t have your device available?
     webauthn_platform_header_text: Use face or touch unlock
     webauthn_platform_use_key: Use face or touch unlock
-    webauthn_platform_verified:
-      header: Device verified
-      info: We have verified your device. Click continue to sign in.
     webauthn_use_key: Use security key
-    webauthn_verified:
-      header: Security key verified
-      info: We have verified your security key. Click continue to sign in.

config/locales/two_factor_authentication/es.yml

@@ -197,27 +197,16 @@ es:
       seguridad. Para poder acceder a su información, deberá verificar su
       identidad a través de un dispositivo físico como una clave de seguridad o
       identificación de empleado gubernamental (PIV/CAC)
+    webauthn_authenticating: Autenticando sus credenciales…
     webauthn_error:
       additional_methods_link: elija otro método de autenticación
       error_page_text: Tiene habilitado el desbloqueo facial o táctil para esta
         cuenta. Utilice cada vez el mismo dispositivo y perfil de navegador.
       multiple_methods: El desbloqueo facial o táctil no fue exitoso. Por favor,
         inténtelo de nuevo o %{link}.
       title: No podemos reconocer su dispositivo
-    webauthn_fallback:
-      question: '¿No dispone de su llave de seguridad?'
     webauthn_header_text: Conecte su llave de seguridad
     webauthn_piv_available: Utilice su PIV o CAC
-    webauthn_platform_fallback:
-      question: '¿No dispone de tu dispositivo?'
     webauthn_platform_header_text: Usar desbloqueo facial o táctil
     webauthn_platform_use_key: Usar desbloqueo facial o táctil
-    webauthn_platform_verified:
-      header: Dispositivo verificado
-      info: Hemos verificado su dispositivo. Haga clic en continuar para iniciar
-        sesión.
     webauthn_use_key: Usar llave de seguridad
-    webauthn_verified:
-      header: Llave de seguridad verificada
-      info: Hemos verificado su llave de seguridad. Haga clic en continuar para
-        iniciar sesión.

config/locales/two_factor_authentication/fr.yml

@@ -203,6 +203,7 @@ fr:
       sécurité. Vous devez vérifier votre identité à l’aide d’un appareil
       physique tel qu’une clé de sécurité ou un identifiant d’employé du
       gouvernement (PIC/CAC) pour accéder à vos informations.
+    webauthn_authenticating: Authentification de vos informations d’identification…
     webauthn_error:
       additional_methods_link: choisir une autre méthode d’authentification
       error_page_text: Vous avez activé le déverrouillage facial ou tactile pour ce
@@ -211,20 +212,8 @@ fr:
       multiple_methods: Le déverrouillage facial ou tactile n’a pas fonctionné.
         Veuillez réessayer ou %{link}.
       title: Nous ne pouvons pas identifier votre appareil
-    webauthn_fallback:
-      question: Vous n’avez pas votre clé de sécurité avec vous?
     webauthn_header_text: Connectez votre clé de sécurité
     webauthn_piv_available: Utilisez votre PIV ou CAC
-    webauthn_platform_fallback:
-      question: Vous n’avez pas votre appareil à disposition?
     webauthn_platform_header_text: Utilisez le déverrouillage facial ou tactile
     webauthn_platform_use_key: Utilisez le déverrouillage facial ou tactile
-    webauthn_platform_verified:
-      header: Appareil vérifié
-      info: Nous avons vérifié votre appareil. Cliquez sur continuer pour vous
-        connecter.
     webauthn_use_key: Utiliser la clé de sécurité
-    webauthn_verified:
-      header: Clé de sécurité vérifiée
-      info: Nous avons vérifié votre clé de sécurité. Cliquez sur Continuer pour vous
-        connecter.

spec/features/remember_device/user_opted_preference_spec.rb

@@ -117,9 +117,8 @@
         allow(WebauthnVerificationForm).to receive(:domain_name).and_return('localhost:3000')
         mock_webauthn_verification_challenge
         sign_in_user(user)
-        mock_press_button_on_hardware_key_on_verification
         uncheck(:remember_device)
-        click_button t('forms.buttons.continue')
+        mock_press_button_on_hardware_key_on_verification
         first(:link, t('links.sign_out')).click
 
         sign_in_user(user)

spec/features/remember_device/webauthn_spec.rb

@@ -24,9 +24,8 @@
       def remember_device_and_sign_out_user
         mock_webauthn_verification_challenge
         sign_in_user(user)
-        mock_press_button_on_hardware_key_on_verification
         check t('forms.messages.remember_device')
-        click_button t('forms.buttons.continue')
+        mock_press_button_on_hardware_key_on_verification
         first(:link, t('links.sign_out')).click
         user
       end
@@ -88,9 +87,8 @@ def remember_device_and_sign_out_user
       def remember_device_and_sign_out_user
         mock_webauthn_verification_challenge
         sign_in_user(user)
-        mock_press_button_on_hardware_key_on_verification
         check t('forms.messages.remember_device')
-        click_button t('forms.buttons.continue')
+        mock_press_button_on_hardware_key_on_verification
         first(:link, t('links.sign_out')).click
         user
       end

spec/features/two_factor_authentication/sign_in_spec.rb

@@ -549,7 +549,6 @@ def attempt_to_bypass_2fa
 
           sign_in_user(webauthn_configuration.user)
           mock_press_button_on_hardware_key_on_verification
-          click_button t('forms.buttons.continue')
 
           expect(page).to have_current_path(account_path)
         end
@@ -565,7 +564,6 @@ def attempt_to_bypass_2fa
 
           sign_in_user(webauthn_configuration.user)
           mock_press_button_on_hardware_key_on_verification
-          click_button t('forms.buttons.continue')
 
           expect(page).to have_current_path(account_path)
         end

spec/features/webauthn/sign_in_spec.rb

@@ -24,7 +24,6 @@
 
     sign_in_user(webauthn_configuration.user)
     mock_press_button_on_hardware_key_on_verification
-    click_button t('forms.buttons.continue')
 
     expect(page).to have_current_path(account_path)
   end
@@ -34,7 +33,6 @@
     # when the button is pressed.
     sign_in_user(webauthn_configuration.user)
     mock_press_button_on_hardware_key_on_verification
-    click_button t('forms.buttons.continue')
 
     expect(page).to have_content(t('errors.general'))
     expect(page).to have_current_path(login_two_factor_webauthn_path)
@@ -44,7 +42,7 @@
     mock_webauthn_verification_challenge
 
     sign_in_user(webauthn_configuration.user)
-    click_button t('forms.buttons.continue')
+    click_button t('two_factor_authentication.webauthn_use_key')
 
     expect(page).to have_content(t('errors.general'))
     expect(page).to have_current_path(login_two_factor_webauthn_path)
@@ -55,12 +53,11 @@
 
     sign_in_user(webauthn_configuration.user)
     # click the next button or cancel from the browser dialog
-    click_button t('forms.buttons.continue')
+    click_button t('two_factor_authentication.webauthn_use_key')
 
     expect(page).to have_content(t('errors.general'))
 
     mock_press_button_on_hardware_key_on_verification
-    click_button t('forms.buttons.continue')
 
     expect(page).to_not have_content(t('errors.general'))
   end