LG-12596: Update security key setup page

.rubocop.yml

@@ -74,7 +74,6 @@ IdentityIdp/ImageSizeLinter:
     - app/views/shared/_nav_branded.html.erb
     - app/views/sign_up/completions/show.html.erb
     - app/views/users/two_factor_authentication_setup/index.html.erb
-    - app/views/users/webauthn_setup/new.html.erb
 
 IdentityIdp/RedirectBackLinter:
   Enabled: true

app/controllers/users/webauthn_setup_controller.rb

@@ -15,6 +15,7 @@ class WebauthnSetupController < ApplicationController
     before_action :validate_existing_platform_authenticator
 
     helper_method :in_multi_mfa_selection_flow?
+    helper_method :mobile?
 
     def new
       form = WebauthnVisitForm.new(

app/presenters/webauthn_setup_presenter.rb

@@ -4,6 +4,7 @@ class WebauthnSetupPresenter < SetupPresenter
   include Rails.application.routes.url_helpers
   include ActionView::Helpers::UrlHelper
   include ActionView::Helpers::TranslationHelper
+  include LinkHelper
 
   attr_reader :url_options
 
@@ -26,11 +27,18 @@ def initialize(
     @url_options = url_options
   end
 
-  def image_path
-    if @platform_authenticator
-      'platform-authenticator.svg'
-    else
-      'security-key.svg'
+  def learn_more_html
+    if !@platform_authenticator
+      new_tab_link_to(
+        t('forms.webauthn_setup.learn_more'),
+        help_center_redirect_path(
+          category: 'get-started',
+          article: 'authentication-options',
+          article_anchor: 'security-key',
+          flow: :two_factor_authentication,
+          step: :security_key_setup,
+        ),
+      )
     end
   end
 
@@ -71,7 +79,7 @@ def intro_html
         ),
       )
     else
-      t('forms.webauthn_setup.intro_html')
+      t('forms.webauthn_setup.intro', app_name: APP_NAME)
     end
   end
 
@@ -87,7 +95,7 @@ def button_text
     if @platform_authenticator
       t('forms.webauthn_platform_setup.continue')
     else
-      t('forms.webauthn_setup.continue')
+      t('forms.webauthn_setup.set_up')
     end
   end
 end

app/views/users/webauthn_setup/new.html.erb

@@ -1,6 +1,8 @@
 <% self.title = @presenter.page_title %>
 
-<%= image_tag asset_url(@presenter.image_path), alt: '', width: '90', class: 'margin-left-1 margin-bottom-2', role: 'img' %>
+<% if @platform_authenticator %>
+  <%= image_tag asset_url('platform-authenticator.svg'), alt: '', width: 84, height: 95, class: 'margin-left-1 margin-bottom-2', role: 'img' %>
+<% end %>
 
 <%= render PageHeadingComponent.new.with_content(@presenter.heading) %>
 
@@ -10,7 +12,10 @@
   <% end %>
 <% end %>
 
-<%= @presenter.intro_html %>
+<span id="webauthn-intro">
+  <%= @presenter.intro_html %>
+</span>
+<%= @presenter.learn_more_html unless @platform_authenticator %>
 
 <%= simple_form_for(
       '',
@@ -33,20 +38,38 @@
 
   <%= hidden_field_tag :platform_authenticator, @platform_authenticator, id: 'platform_authenticator' %>
   <% if !@platform_authenticator %>
-
-      <%= render ValidatedFieldComponent.new(
-            form: f,
-            name: :name,
-            required: true,
-            label: @presenter.nickname_label,
-            hint: @presenter.device_nickname_hint,
-            input_html: {
-              id: 'nickname',
-              class: 'font-family-mono',
-              size: 16,
-              maxlength: 20,
-            },
-          ) %>
+    <fieldset aria-labelledby="webauthn-intro" class="padding-0 border-0 margin-y-4 margin-x-0">
+      <%= render ProcessListComponent.new(connected: true) do |c| %>
+        <%= c.with_item(heading: t('forms.webauthn_setup.step_1'), heading_id: 'step-1-label') do %>
+          <p><%= t('forms.webauthn_setup.step_1a') %></p>
+          <%= render ValidatedFieldComponent.new(
+                form: f,
+                name: :name,
+                required: true,
+                label: false,
+                hint: @presenter.device_nickname_hint,
+                wrapper_html: { class: 'margin-bottom-0' },
+                input_html: {
+                  aria: { labelledby: 'step-1-label' },
+                  id: 'nickname',
+                  class: 'font-family-mono',
+                  size: 16,
+                  maxlength: 20,
+                },
+              ) %>
+        <% end %>
+        <%= c.with_item(heading: t('forms.webauthn_setup.step_2')) do %>
+            <% if mobile? %>
+              <%= image_tag asset_url('mfa-options/security_key_mobile.svg'), width: 420, height: 193, class: 'height-auto', alt: t('forms.webauthn_setup.step_2_image_mobile_alt'), role: 'img' %>
+            <% else %>
+              <%= image_tag asset_url('mfa-options/security_key.svg'), width: 420, height: 193, class: 'height-auto', alt: t('forms.webauthn_setup.step_2_image_alt'), role: 'img' %>
+            <% end %>
+          <% end %>
+        <%= c.with_item(heading: t('forms.webauthn_setup.step_3')) do %>
+          <p><%= t('forms.webauthn_setup.step_3a') %></p>
+        <% end %>
+      <% end %>
+    </fieldset>
   <% end %> 
   <div class="margin-y-4 text-center" id="spinner" hidden>
     <%= image_tag(

config/locales/forms/en.yml

@@ -126,9 +126,16 @@ en:
       nickname_hint: If you add more devices for face or touch unlock, you’ll know
         which one is which.
     webauthn_setup:
-      continue: Continue
-      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>'
+      intro: Use your physical security key to add an additional layer of protection
+        to your %{app_name} account to prevent unauthorized access.
+      learn_more: Learn more about security keys
       nickname: Security key nickname
       saving: Saving your credentials …
+      set_up: Set up security key
+      step_1: Give it a nickname
+      step_1a: If you add more than one security key, you’ll know which one is which.
+      step_2: Insert a security key into your device
+      step_2_image_alt: A security key being inserted into the right side of a laptop
+      step_2_image_mobile_alt: A security key being inserted into the bottom of a smart phone
+      step_3: Set up your security key
+      step_3a: Click “set up security key” below and follow your browser’s instructions.

config/locales/forms/es.yml

@@ -133,10 +133,18 @@ es:
       nickname_hint: Si agrega más dispositivos para desbloquear con la cara o con la
         huella digital, podrá distinguirlos.
     webauthn_setup:
-      continue: Continuar
-      intro_html: '<p>Añada una clave de seguridad que cumpla el estándar FIDO como
-        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>'
+      intro: Utilice su clave de seguridad física para añadir un nivel adicional de
+        protección a su cuenta de %{app_name} y evitar accesos no autorizados.
+      learn_more: Obtenga información sobre claves de seguridad
       nickname: Apodo clave de seguridad
       saving: Guardando sus credenciales …
+      set_up: Configure su clave de seguridad
+      step_1: Darle un apodo
+      step_1a: Si añade más de una llave de seguridad, sabrá cuál es cuál.
+      step_2: Inserte una clave de seguridad en su dispositivo
+      step_2_image_alt: Una llave de seguridad insertada en el lado derecho de una
+        computadora portátil
+      step_2_image_mobile_alt: Una llave de seguridad insertada en la parte inferior de un celular
+      step_3: Configure su clave de seguridad
+      step_3a: Haga clic en “configurar clave de seguridad” (set up security key) más
+        abajo y siga las instrucciones de su navegador.