LG-11759: Add inline device nickname editing for security keys

app/controllers/users/webauthn_controller.rb

@@ -6,6 +6,7 @@ class WebauthnController < ApplicationController
     before_action :confirm_recently_authenticated_2fa
     before_action :set_form
     before_action :validate_configuration_exists
+    before_action :set_presenter
 
     def edit; end
 
@@ -15,7 +16,7 @@ def update
       analytics.webauthn_update_name_submitted(**result.to_h)
 
       if result.success?
-        flash[:success] = t('two_factor_authentication.webauthn_platform.renamed')
+        flash[:success] = presenter.rename_success_alert_text
         redirect_to account_path
       else
         flash.now[:error] = result.first_error_message
@@ -29,7 +30,7 @@ def destroy
       analytics.webauthn_delete_submitted(**result.to_h)
 
       if result.success?
-        flash[:success] = t('two_factor_authentication.webauthn_platform.deleted')
+        flash[:success] = presenter.delete_success_alert_text
         create_user_event(:webauthn_key_removed)
         revoke_remember_device(current_user)
         event = PushNotification::RecoveryInformationChangedEvent.new(user: current_user)
@@ -49,6 +50,14 @@ def form
 
     alias_method :set_form, :form
 
+    delegate :configuration, to: :form
+
+    def presenter
+      @presenter ||= TwoFactorAuthentication::WebauthnEditPresenter.new(configuration:)
+    end
+
+    alias_method :set_presenter, :presenter
+
     def form_class
       case action_name
       when 'edit', 'update'
@@ -59,7 +68,7 @@ def form_class
     end
 
     def validate_configuration_exists
-      render_not_found if form.configuration.blank?
+      render_not_found if configuration.blank?
     end
   end
 end

app/controllers/users/webauthn_setup_controller.rb

@@ -156,15 +156,19 @@ def handle_successful_delete
       else
         flash[:success] = t('notices.webauthn_deleted')
       end
-      track_delete(true)
+      track_delete(success: true, platform_authenticator: webauthn.platform_authenticator?)
     end
 
     def handle_failed_delete
-      track_delete(false)
+      track_delete(success: false, platform_authenticator: nil)
     end
 
-    def track_delete(success)
-      analytics.webauthn_delete_submitted(success:, configuration_id: delete_params[:id])
+    def track_delete(success:, platform_authenticator:)
+      analytics.webauthn_delete_submitted(
+        success:,
+        configuration_id: delete_params[:id],
+        platform_authenticator:,
+      )
     end
 
     def save_challenge_in_session

app/forms/two_factor_authentication/webauthn_delete_form.rb

@@ -51,7 +51,10 @@ def validate_has_multiple_mfa
     end
 
     def extra_analytics_attributes
-      { configuration_id: }
+      {
+        configuration_id:,
+        platform_authenticator: configuration&.platform_authenticator?,
+      }
     end
   end
 end

app/forms/two_factor_authentication/webauthn_update_form.rb

@@ -62,7 +62,10 @@ def validate_unique_name
     end
 
     def extra_analytics_attributes
-      { configuration_id: }
+      {
+        configuration_id:,
+        platform_authenticator: configuration&.platform_authenticator?,
+      }
     end
   end
 end

app/presenters/two_factor_authentication/webauthn_edit_presenter.rb

@@ -0,0 +1,61 @@
+module TwoFactorAuthentication
+  class WebauthnEditPresenter
+    include ActionView::Helpers::TranslationHelper
+
+    attr_reader :configuration
+
+    delegate :platform_authenticator?, to: :configuration
+
+    def initialize(configuration:)
+      @configuration = configuration
+    end
+
+    def heading
+      if platform_authenticator?
+        t('two_factor_authentication.webauthn_platform.edit_heading')
+      else
+        t('two_factor_authentication.webauthn_roaming.edit_heading')
+      end
+    end
+
+    def nickname_field_label
+      if platform_authenticator?
+        t('two_factor_authentication.webauthn_platform.nickname')
+      else
+        t('two_factor_authentication.webauthn_roaming.nickname')
+      end
+    end
+
+    def rename_button_label
+      if platform_authenticator?
+        t('two_factor_authentication.webauthn_platform.change_nickname')
+      else
+        t('two_factor_authentication.webauthn_roaming.change_nickname')
+      end
+    end
+
+    def delete_button_label
+      if platform_authenticator?
+        t('two_factor_authentication.webauthn_platform.delete')
+      else
+        t('two_factor_authentication.webauthn_roaming.delete')
+      end
+    end
+
+    def rename_success_alert_text
+      if platform_authenticator?
+        t('two_factor_authentication.webauthn_platform.renamed')
+      else
+        t('two_factor_authentication.webauthn_roaming.renamed')
+      end
+    end
+
+    def delete_success_alert_text
+      if platform_authenticator?
+        t('two_factor_authentication.webauthn_platform.deleted')
+      else
+        t('two_factor_authentication.webauthn_roaming.deleted')
+      end
+    end
+  end
+end

app/services/analytics_events.rb

@@ -4802,22 +4802,25 @@ def vendor_outage(
     )
   end
 
-  # @param [Boolean] success
-  # @param [Hash] error_details
-  # @param [Integer] configuration_id
+  # @param [Boolean] success Whether the submission was successful
+  # @param [Integer] configuration_id Database ID for the configuration
+  # @param [Boolean] platform_authenticator Whether the configuration was a platform authenticator
+  # @param [Hash] error_details Details for error that occurred in unsuccessful submission
   # Tracks when user attempts to delete a WebAuthn configuration
   # @identity.idp.previous_event_name WebAuthn Deleted
   def webauthn_delete_submitted(
     success:,
     configuration_id:,
+    platform_authenticator:,
     error_details: nil,
     **extra
   )
     track_event(
       :webauthn_delete_submitted,
       success:,
-      error_details:,
       configuration_id:,
+      platform_authenticator:,
+      error_details:,
       **extra,
     )
   end
@@ -4848,21 +4851,24 @@ def webauthn_setup_visit(platform_authenticator:, enabled_mfa_methods_count:, **
     )
   end
 
-  # @param [Boolean] success
-  # @param [Hash] error_details
-  # @param [Integer] configuration_id
+  # @param [Boolean] success Whether the submission was successful
+  # @param [Integer] configuration_id Database ID for the configuration
+  # @param [Boolean] platform_authenticator Whether the configuration was a platform authenticator
+  # @param [Hash] error_details Details for error that occurred in unsuccessful submission
   # Tracks when user submits a name change for a WebAuthn configuration
   def webauthn_update_name_submitted(
     success:,
     configuration_id:,
+    platform_authenticator:,
     error_details: nil,
     **extra
   )
     track_event(
       :webauthn_update_name_submitted,
       success:,
-      error_details:,
+      platform_authenticator:,
       configuration_id:,
+      error_details:,
       **extra,
     )
   end

app/views/accounts/_webauthn_roaming.html.erb

@@ -2,21 +2,20 @@
   <%= t('account.index.webauthn') %>
 </h2>
 
-<div class="border-bottom border-primary-light">
-  <% MfaContext.new(current_user).webauthn_roaming_configurations.each do |cfg| %>
-    <div class="grid-row padding-1 border-top border-left border-right border-primary-light">
-      <div class="grid-col-8 tablet:grid-col-6 truncate">
-        <%= cfg.name %>
-      </div>
-      <% if MfaPolicy.new(current_user).multiple_factors_enabled? %>
-        <div class="grid-col-4 tablet:grid-col-6 text-right">
-          <%= link_to(
-                t('account.index.webauthn_delete'),
-                webauthn_setup_delete_path(id: cfg.id),
-              ) %>
-        </div>
-      <% end %>
-    </div>
+<div role="list">
+  <% MfaContext.new(current_user).webauthn_roaming_configurations.each do |configuration| %>
+    <%= render ManageableAuthenticatorComponent.new(
+          configuration:,
+          user_session:,
+          manage_url: edit_webauthn_path(id: configuration.id),
+          manage_api_url: api_internal_two_factor_authentication_webauthn_path(id: configuration.id),
+          custom_strings: {
+            deleted: t('two_factor_authentication.webauthn_roaming.deleted'),
+            renamed: t('two_factor_authentication.webauthn_roaming.renamed'),
+            manage_accessible_label: t('two_factor_authentication.webauthn_roaming.manage_accessible_label'),
+          },
+          role: 'list-item',
+        ) %>
   <% end %>
 </div>
 
@@ -25,5 +24,6 @@
         link_to(webauthn_setup_path, **tag_options, &block)
       end,
       icon: :add,
-      class: 'usa-button usa-button--outline margin-top-2',
+      outline: true,
+      class: 'margin-top-2',
     ).with_content(t('account.index.webauthn_add')) %>

app/views/users/webauthn/edit.html.erb

@@ -1,6 +1,6 @@
-<% self.title = t('two_factor_authentication.webauthn_platform.edit_heading') %>
+<% self.title = @presenter.heading %>
 
-<%= render PageHeadingComponent.new.with_content(t('two_factor_authentication.webauthn_platform.edit_heading')) %>
+<%= render PageHeadingComponent.new.with_content(@presenter.heading) %>
 
 <%= simple_form_for(
       @form,
@@ -12,20 +12,17 @@
   <%= render ValidatedFieldComponent.new(
         form: f,
         name: :name,
-        label: t('two_factor_authentication.webauthn_platform.nickname'),
+        label: @presenter.nickname_field_label,
       ) %>
 
-  <%= f.submit(
-        t('two_factor_authentication.webauthn_platform.change_nickname'),
-        class: 'display-block margin-top-5',
-      ) %>
+  <%= f.submit(@presenter.rename_button_label, class: 'display-block margin-top-5') %>
 <% end %>
 
 <%= render ButtonComponent.new(
       action: ->(**tag_options, &block) do
         button_to(
           webauthn_path(id: @form.configuration.id),
-          form: { aria: { label: t('two_factor_authentication.webauthn_platform.delete') } },
+          form: { aria: { label: @presenter.delete_button_label } },
           **tag_options,
           &block
         )
@@ -35,6 +32,6 @@
       wide: true,
       danger: true,
       class: 'display-block margin-top-2',
-    ).with_content(t('two_factor_authentication.webauthn_platform.delete')) %>
+    ).with_content(@presenter.delete_button_label) %>
 
 <%= render 'shared/cancel', link: account_path %>

config/locales/account/en.yml

@@ -55,7 +55,6 @@ en:
       webauthn: Security key
       webauthn_add: Add security key
       webauthn_confirm_delete: Yes, remove key
-      webauthn_delete: Remove key
       webauthn_platform: Face or touch unlock
       webauthn_platform_add: Add face or touch unlock
       webauthn_platform_confirm_delete: Yes, remove face or touch unlock

config/locales/account/es.yml

@@ -56,7 +56,6 @@ es:
       webauthn: Clave de seguridad
       webauthn_add: Añadir clave de seguridad
       webauthn_confirm_delete: Si quitar la llave
-      webauthn_delete: Quitar llave
       webauthn_platform: El desbloqueo facial o táctil
       webauthn_platform_add: Añadir el desbloqueo facial o táctil
       webauthn_platform_confirm_delete: Si, quitar el desbloqueo facial o táctil

config/locales/account/fr.yml

@@ -59,7 +59,6 @@ fr:
       webauthn: Clé de sécurité
       webauthn_add: Ajouter une clé de sécurité
       webauthn_confirm_delete: Oui, supprimer la clé
-      webauthn_delete: Supprimer la clé
       webauthn_platform: Le déverouillage facial ou déverrouillage par empreinte digitale
       webauthn_platform_add: Ajouter le déverouillage facial ou déverrouillage par empreinte digitale
       webauthn_platform_confirm_delete: Oui, supprimer le déverouillage facial ou

config/locales/two_factor_authentication/en.yml

@@ -208,4 +208,12 @@ en:
       renamed: Successfully renamed your face or touch unlock method
     webauthn_platform_header_text: Use face or touch unlock
     webauthn_platform_use_key: Use screen unlock
+    webauthn_roaming:
+      change_nickname: Change nickname
+      delete: Delete this device
+      deleted: Successfully deleted a security key method
+      edit_heading: Manage your security key settings
+      manage_accessible_label: Manage security key
+      nickname: Nickname
+      renamed: Successfully renamed your security key method
     webauthn_use_key: Use security key

config/locales/two_factor_authentication/es.yml

@@ -223,4 +223,12 @@ es:
         facial o táctil
     webauthn_platform_header_text: Usar desbloqueo facial o táctil
     webauthn_platform_use_key: Usar el desbloqueo de pantalla
+    webauthn_roaming:
+      change_nickname: Cambiar apodo
+      delete: Eliminar este dispositivo
+      deleted: Se ha eliminado correctamente un método de clave de seguridad
+      edit_heading: Gestionar la configuración de su clave de seguridad
+      manage_accessible_label: Gestionar la clave de seguridad
+      nickname: Apodo
+      renamed: Se ha cambiado correctamente el nombre de su método de clave de seguridad
     webauthn_use_key: Usar llave de seguridad

config/locales/two_factor_authentication/fr.yml

@@ -235,4 +235,12 @@ fr:
         empreinte digitale a été renommée avec succès
     webauthn_platform_header_text: Utilisez le déverrouillage facial ou tactile
     webauthn_platform_use_key: Utiliser le déverrouillage de l’écran
+    webauthn_roaming:
+      change_nickname: Changer de pseudo
+      delete: Supprimer cet appareil
+      deleted: Suppression réussie d’une méthode de clé de sécurité
+      edit_heading: Gérer les paramètres de votre clé de sécurité
+      manage_accessible_label: Gérer la clé de sécurité
+      nickname: Pseudo
+      renamed: Votre méthode de clé de sécurité a été renommée avec succès
     webauthn_use_key: Utiliser la clé de sécurité