LG-10231: content improvements for F/T unlock sign up screen

app/controllers/users/webauthn_setup_controller.rb

@@ -28,7 +28,7 @@ def new
       analytics.webauthn_setup_visit(**properties)
       save_challenge_in_session
       @exclude_credentials = exclude_credentials
-
+      @need_to_set_up_additional_mfa = need_to_set_up_additional_mfa?
       if !result.success?
         if @platform_authenticator
           irs_attempts_api_tracker.mfa_enroll_webauthn_platform(success: false)
@@ -174,6 +174,11 @@ def analytics_properties
       }
     end
 
+    def need_to_set_up_additional_mfa?
+      return false unless @platform_authenticator
+      in_multi_mfa_selection_flow? && mfa_selection_count < 2
+    end
+
     def process_invalid_webauthn(form)
       if form.name_taken
         if form.platform_authenticator?

app/presenters/webauthn_setup_presenter.rb

@@ -29,7 +29,6 @@ def image_path
 
   def page_title
     if @platform_authenticator
-      # Note: The following title is incorrect and awaiting copy
       t('headings.webauthn_platform_setup.new')
     else
       t('titles.webauthn_setup')
@@ -44,6 +43,12 @@ def heading
     end
   end
 
+  def device_nickname_hint
+    if @platform_authenticator
+      t('forms.webauthn_platform_setup.nickname_hint')
+    end
+  end
+
   def intro_html
     if @platform_authenticator
       t(

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

@@ -4,9 +4,9 @@
 
 <%= render PageHeadingComponent.new.with_content(@presenter.heading) %>
 
-<% if @platform_authenticator %>
-  <%= render AlertComponent.new(type: :warning, class: 'margin-y-1') do %>
-    <%= t('forms.webauthn_platform_setup.warning_text') %>
+<% if @need_to_set_up_additional_mfa %>
+  <%= render AlertComponent.new(type: :info, class: 'margin-bottom-4') do %>
+    <%= t('forms.webauthn_platform_setup.info_text') %>
   <% end %>
 <% end %>
 
@@ -36,6 +36,7 @@
         name: :name,
         required: true,
         label: @presenter.nickname_label,
+        hint: @presenter.device_nickname_hint,
         input_html: {
           id: 'nickname',
           class: 'font-family-mono',

config/locales/forms/en.yml

@@ -149,18 +149,18 @@ en:
       confirm: Are you sure you want to remove face or touch unlock?
     webauthn_platform_setup:
       continue: Continue
+      info_text: You’ll need to set up an additional authentication method after you
+        set up face or touch unlock.
       instructions_text: Use Touch or Face Unlock to access your account with %{app_name}
       instructions_title: Use Touch or Face Unlock to access your account.
-      intro_html: '<p>When you want to access your %{app_name} account, you use your
-        device to scan your face or fingerprint. Your device confirms if those
-        scans are a match to the images you already have stored on your
-        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_html: '<p>Save your face or fingerprint as a credential on your device, so
+        you can access your account with it. %{app_name} does not store your
+        face or fingerprint.</p><p>You may need to use the same device to sign
+        in each time. %{link}</p>'
       intro_link_text: Learn more about face or touch unlock.
       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
-        avoid account lockout.
+      nickname_hint: If you add more devices for face or touch unlock, you’ll know
+        which one is which.
     webauthn_setup:
       continue: Continue
       instructions_text: Press the button on your security key to register it with %{app_name}

config/locales/forms/es.yml

@@ -157,21 +157,21 @@ es:
         seguridad?'
     webauthn_platform_setup:
       continue: Continuar
+      info_text: Tendrá que configurar un método de autenticación adicional después de
+        establecer el desbloqueo con la cara o con la huella digital.
       instructions_text: Use el desbloqueo facial o táctil para acceder a su cuenta
         con %{app_name}.
       instructions_title: Use el desbloqueo facial o táctil para acceder a su cuenta.
-      intro_html: '<p>Cuando quiera acceder a su cuenta de %{app_name}, podrá utilizar
-        su dispositivo para escanear su cara o su huella dactilar. El
-        dispositivo confirma si dichos escaneos coinciden con las imágenes que
-        ya tiene almacenadas en su dispositivo.</p><p>Nosotros no copiamos ni
-        almacenamos estas imágenes. Necesitará el mismo dispositivo para iniciar
-        sesión en el futuro utilizando el desbloqueo facial o táctil.
+      intro_html: '<p>Guarde la cara o la huella digital como credencial en su
+        dispositivo. De esta forma, accederá a su cuenta con una de ellas.
+        %{app_name} no almacena la cara ni la huella digital.</p><p>Es posible
+        que necesite usar el mismo dispositivo para ingresar en cada ocasión
         %{link}</p>'
-      intro_link_text: Conozca más sobre el desbloqueo facial o táctil.
+      intro_link_text: Obtenga más información sobre el desbloqueo con la cara o con
+        la huella digital.
       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
-        recomendamos que configures diferentes métodos de autenticación.
+      nickname_hint: Si agrega más dispositivos para desbloquear con la cara o con la
+        huella digital, podrá distinguirlos.
     webauthn_setup:
       continue: Continuar
       instructions_text: Presione el botón en su clave de seguridad para registrarlo

config/locales/forms/fr.yml

@@ -162,23 +162,24 @@ fr:
         déverrouillage par empreinte digitale?
     webauthn_platform_setup:
       continue: Continuer
+      info_text: Vous aurez besoin de configurer une méthode d’authentification
+        supplémentaire après que vous aurez configuré le déverrouillage facial
+        ou le déverrouillage tactile.
       instructions_text: Utilisez le déverrouillage par empreinte digitale ou le
         déverouillage facial pour accéder à votre compte avec %{app_name}.
       instructions_title: Utilisez le déverrouillage par empreinte digitale ou le
         déverouillage facial pour accéder à votre compte.
-      intro_html: '<p>Lorsque vous voulez accéder à votre compte %{app_name}, vous
-        utilisez votre appareil pour numériser votre visage ou votre empreinte
-        digitale. Votre appareil confirme si ces numérisations correspondent aux
-        images que vous avez déjà stockées sur votre appareil.</p><p>Nous ne
-        copions ni ne stockons ces images. Vous aurez besoin du même appareil
-        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.
+      intro_html: '<p>Enregistrez votre visage ou votre empreinte digitale en tant
+        qu’identifiant sur votre appareil, afin de pouvoir les utiliser pour
+        accéder à votre compte. %{app_name} ne stocke pas votre visage ni votre
+        empreinte digitale</p><p>Il se peut que vous ayez besoin d’utiliser le
+        même appareil pour vous connecter chaque fois.%{link}</p>'
+      intro_link_text: En savoir plus sur le déverrouillage facial ou sur le
+        déverrouillage tactile.
       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
-        plusieurs méthodes d’authentification afin d’éviter que votre compte ne
-        se bloque.
+      nickname_hint: Au cas où vous ajouteriez d’autres appareils pour le
+        déverrouillage facial ou pour le déverrouillage tactile, vous saurez les
+        reconnaître.
     webauthn_setup:
       continue: Continuer
       instructions_text: Appuyez sur le bouton de votre clé de sécurité pour

config/locales/headings/en.yml

@@ -70,6 +70,6 @@ en:
     verify_email: Check your email
     verify_personal_key: Verify your personal key
     webauthn_platform_setup:
-      new: Use your device
+      new: Add face or touch unlock
     webauthn_setup:
       new: Add your security key

config/locales/headings/es.yml

@@ -70,6 +70,6 @@ es:
     verify_email: Revise su email
     verify_personal_key: Verifica tu clave personal
     webauthn_platform_setup:
-      new: Utilice su dispositivo
+      new: Desbloqueo facial o táctil
     webauthn_setup:
       new: Añade tu clave de seguridad

config/locales/headings/fr.yml

@@ -73,6 +73,6 @@ fr:
     verify_email: Consultez vos courriels
     verify_personal_key: Vérifier votre clé personnelle
     webauthn_platform_setup:
-      new: Utilisez votre appareil
+      new: Déverrouillage facial ou tactile
     webauthn_setup:
       new: Ajoutez votre clé de sécurité

spec/controllers/users/webauthn_setup_controller_spec.rb

@@ -61,6 +61,13 @@
 
         get :new
       end
+      context 'when adding webauthn platform to existing user MFA methods' do
+        it 'should set need_to_set_up_additional_mfa to false' do
+          get :new, params: { platform: true }
+          additional_mfa_check = assigns(:need_to_set_up_additional_mfa)
+          expect(additional_mfa_check).to be_falsey
+        end
+      end
     end
 
     describe 'patch confirm' do
@@ -187,8 +194,37 @@
       request.host = 'localhost:3000'
       controller.user_session[:webauthn_challenge] = webauthn_challenge
     end
+
+    describe 'webauthn platform #new' do
+      context 'when in account creation flow and selected multiple mfa' do
+        let(:mfa_selections) { ['webauthn_platform', 'voice'] }
+        before do
+          controller.user_session[:mfa_selections] = mfa_selections
+        end
+
+        it 'should set need_to_set_up_additional_mfa to false' do
+          get :new, params: { platform: true }
+          additional_mfa_check = assigns(:need_to_set_up_additional_mfa)
+          expect(additional_mfa_check).to be_falsey
+        end
+      end
+
+      context 'when in account creation and only have platform as sole MFA method' do
+        let(:mfa_selections) { ['webauthn_platform'] }
+
+        before do
+          controller.user_session[:mfa_selections] = mfa_selections
+        end
+
+        it 'should set need_to_set_up_additional_mfa to true' do
+          get :new, params: { platform: true }
+          additional_mfa_check = assigns(:need_to_set_up_additional_mfa)
+          expect(additional_mfa_check).to be_truthy
+        end
+      end
+    end
     describe 'multiple MFA handling' do
-      let(:mfa_selections) { ['webauthn', 'voice'] }
+      let(:mfa_selections) { ['webauthn_platform', 'voice'] }
 
       before do
         controller.user_session[:mfa_selections] = mfa_selections

spec/presenters/webauthn_setup_presenter_spec.rb

@@ -59,6 +59,12 @@
     it { is_expected.to eq(t('forms.webauthn_setup.nickname')) }
   end
 
+  describe '#device_nickname_hint' do
+    subject { presenter.device_nickname_hint }
+
+    it { is_expected.to eq(nil) }
+  end
+
   describe '#button_text' do
     subject { presenter.button_text }
 
@@ -98,6 +104,12 @@
       it { is_expected.to eq(t('forms.webauthn_platform_setup.nickname')) }
     end
 
+    describe '#device_nickname_hint' do
+      subject { presenter.device_nickname_hint }
+
+      it { is_expected.to eq(t('forms.webauthn_platform_setup.nickname_hint')) }
+    end
+
     describe '#button_text' do
       subject { presenter.button_text }
 

spec/views/users/webauthn_setup/new.html.erb_spec.rb

@@ -32,11 +32,40 @@
 
       render
     end
+    context 'when user selects multiple MFA options on account creation' do
+      before do
+        assign(:need_to_set_up_additional_mfa, false)
+      end
 
-    it 'displays warning alert' do
-      render
+      it 'does not displays info alert' do
+        render
+
+        expect(rendered).to_not have_content(I18n.t('forms.webauthn_platform_setup.info_text'))
+      end
+    end
+
+    context 'when user selects only platform auth options on account creation' do
+      before do
+        assign(:need_to_set_up_additional_mfa, true)
+      end
+
+      it 'displays info alert' do
+        render
+
+        expect(rendered).to have_content(I18n.t('forms.webauthn_platform_setup.info_text'))
+      end
+    end
+
+    context 'when user is adding MFA at accounts page' do
+      before do
+        assign(:need_to_set_up_additional_mfa, false)
+      end
+
+      it 'does not displays info alert' do
+        render
 
-      expect(rendered).to have_content(I18n.t('forms.webauthn_platform_setup.warning_text'))
+        expect(rendered).to_not have_content(I18n.t('forms.webauthn_platform_setup.info_text'))
+      end
     end
   end
 end