Add link to troubleshooting steps in error message

app/controllers/profiles/two_factor_auths_controller.rb

@@ -66,7 +66,7 @@ class Profiles::TwoFactorAuthsController < Profiles::ApplicationController
 
       render 'create'
     else
-      @error = _('Invalid pin code')
+      @error = { message: _('Invalid pin code.') }
       @qr_code = build_qr_code
 
       if Feature.enabled?(:webauthn)

app/views/profiles/two_factor_auths/show.html.haml

@@ -43,7 +43,9 @@
             .gl-alert.gl-alert-danger.gl-mb-5
               .gl-alert-container
                 .gl-alert-content
-                  = @error
+                  %p.gl-alert-body.gl-md-0
+                    = @error[:message]
+                    = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
           .form-group
             = label_tag :pin_code, _('Pin code'), class: "label-bold"
             = text_field_tag :pin_code, nil, class: "form-control gl-form-input", required: true, data: { qa_selector: 'pin_code_field' }

locale/gitlab.pot

@@ -18859,7 +18859,7 @@ msgstr ""
 msgid "Invalid period"
 msgstr ""
 
-msgid "Invalid pin code"
+msgid "Invalid pin code."
 msgstr ""
 
 msgid "Invalid pod_name"
@@ -36651,6 +36651,9 @@ msgstr ""
 msgid "Try out GitLab Pipelines"
 msgstr ""
 
+msgid "Try the troubleshooting steps here."
+msgstr ""
+
 msgid "Try to fork again"
 msgstr ""
 

spec/controllers/profiles/two_factor_auths_controller_spec.rb

@@ -175,7 +175,7 @@ RSpec.describe Profiles::TwoFactorAuthsController do
 
       it 'assigns error' do
         go
-        expect(assigns[:error]).to eq _('Invalid pin code')
+        expect(assigns[:error]).to eq({ message: 'Invalid pin code.' })
       end
 
       it 'assigns qr_code' do

spec/features/profiles/two_factor_auths_spec.rb

@@ -45,6 +45,19 @@ RSpec.describe 'Two factor auths' do
           expect(page).to have_content('Status: Enabled')
         end
       end
+
+      context 'when invalid pin is provided' do
+        let_it_be(:user) { create(:omniauth_user) }
+
+        it 'renders a error alert with a link to the troubleshooting section' do
+          visit profile_two_factor_auth_path
+
+          fill_in 'pin_code', with: '123'
+          click_button 'Register with two-factor app'
+
+          expect(page).to have_link('Try the troubleshooting steps here.', href: help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'))
+        end
+      end
     end
 
     context 'when user has two-factor authentication enabled' do