Refactor 2FA login flaky scenario

The test case wherein 2FA is required after logging in fails
intermittently with `mr_attention_requests` feature flag on.

This is because at the time of this writing, a graphql request
redirects to 2FA page (this is not shown to the user) resulting to
a new secret generated which is different from what shown to the
user.

This refactors the scenario to get the OTP based on the secret
shown on the page instead. This way, we replicate a real life
usage of the feature instead.

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

@@ -34,7 +34,7 @@
                 = _('To add the entry manually, provide the following details to the application on your phone.')
               %p.gl-mt-0.gl-mb-0
                 = _('Account: %{account}') % { account: @account_string }
-              %p.gl-mt-0.gl-mb-0{ data: { qa_selector: 'otp_secret_content' } }
+              %p.gl-mt-0.gl-mb-0.two-factor-secret{ data: { qa_selector: 'otp_secret_content' } }
                 = _('Key: %{key}') %{ key: current_user.otp_secret.scan(/.{4}/).join(' ') }
               %p.two-factor-new-manual-content
                 = _('Time based: Yes')

spec/features/users/login_spec.rb

@@ -840,7 +840,15 @@ RSpec.describe 'Login', :clean_gitlab_redis_sessions do
 
           expect(page).to have_current_path(profile_two_factor_auth_path, ignore_query: true)
 
-          fill_in 'pin_code', with: user.reload.current_otp
+          # Use the secret shown on the page to generate the OTP that will be entered.
+          # This detects issues wherein a new secret gets generated after the
+          # page is shown.
+          wait_for_requests
+
+          otp_secret = page.find('.two-factor-secret').text.gsub('Key:', '').delete(' ')
+          current_otp = ROTP::TOTP.new(otp_secret).now
+
+          fill_in 'pin_code', with: current_otp
           fill_in 'current_password', with: user.password
 
           click_button 'Register with two-factor app'