Use more generic ids in U2F authenticate

app/assets/javascripts/authentication/u2f/authenticate.js

@@ -40,10 +40,10 @@ export default class U2FAuthenticate {
     this.signRequests = u2fParams.sign_requests.map(request => omit(request, 'challenge'));
 
     this.templates = {
-      setup: '#js-authenticate-u2f-setup',
-      inProgress: '#js-authenticate-u2f-in-progress',
-      error: '#js-authenticate-u2f-error',
-      authenticated: '#js-authenticate-u2f-authenticated',
+      setup: '#js-authenticate-token-2fa-setup',
+      inProgress: '#js-authenticate-token-2fa-in-progress',
+      error: '#js-authenticate-token-2fa-error',
+      authenticated: '#js-authenticate-token-2fa-authenticated',
     };
   }
 
@@ -88,7 +88,7 @@ export default class U2FAuthenticate {
       error_message: error.message(),
       error_code: error.errorCode,
     });
-    return this.container.find('#js-u2f-try-again').on('click', this.renderInProgress);
+    return this.container.find('#js-token-2fa-try-again').on('click', this.renderInProgress);
   }
 
   renderAuthenticated(deviceResponse) {

app/assets/javascripts/authentication/u2f/index.js

@@ -5,8 +5,8 @@ export default () => {
   if (!gon.u2f) return;
 
   const u2fAuthenticate = new U2FAuthenticate(
-    $('#js-authenticate-u2f'),
-    '#js-login-u2f-form',
+    $('#js-authenticate-token-2fa'),
+    '#js-login-token-2fa-form',
     gon.u2f,
     document.querySelector('#js-login-2fa-device'),
     document.querySelector('.js-2fa-form'),

app/assets/javascripts/authentication/u2f/register.js

@@ -78,7 +78,7 @@ export default class U2FRegister {
       error_message: error.message(),
       error_code: error.errorCode,
     });
-    return this.container.find('#js-u2f-try-again').on('click', this.renderSetup);
+    return this.container.find('#js-token-2fa-try-again').on('click', this.renderSetup);
   }
 
   renderRegistered(deviceResponse) {

app/views/u2f/_authenticate.html.haml

-#js-authenticate-u2f
+#js-authenticate-token-2fa
 %a.btn.btn-block.btn-info#js-login-2fa-device{ href: '#' }= _("Sign in via 2FA code")
 
-%script#js-authenticate-u2f-in-progress{ type: "text/template" }
+%script#js-authenticate-token-2fa-in-progress{ type: "text/template" }
   %p= _("Trying to communicate with your device. Plug it in (if you haven't already) and press the button on the device now.")
 
-%script#js-authenticate-u2f-error{ type: "text/template" }
+%script#js-authenticate-token-2fa-error{ type: "text/template" }
   %div
     %p <%= error_message %> (#{_("error code:")} <%= error_code %>)
-    %a.btn.btn-block.btn-warning#js-u2f-try-again= _("Try again?")
+    %a.btn.btn-block.btn-warning#js-token-2fa-try-again= _("Try again?")
 
-%script#js-authenticate-u2f-authenticated{ type: "text/template" }
+%script#js-authenticate-token-2fa-authenticated{ type: "text/template" }
   %div
-    %p= _("We heard back from your U2F device. You have been authenticated.")
-    = form_tag(target_path, method: :post, id: 'js-login-u2f-form') do |f|
+    %p= _("We heard back from your device. You have been authenticated.")
+    = form_tag(target_path, method: :post, id: 'js-login-token-2fa-form') do |f|
       - if render_remember_me
         - resource_params = params[resource_name].presence || params
         = hidden_field_tag 'user[remember_me]', resource_params.fetch(:remember_me, 0)

app/views/u2f/_register.html.haml

@@ -25,7 +25,7 @@
   %div
     %p
       %span <%= error_message %> (#{_("error code:")} <%= error_code %>)
-    %a.btn.btn-warning#js-u2f-try-again= _("Try again?")
+    %a.btn.btn-warning#js-token-2fa-try-again= _("Try again?")
 
 %script#js-register-u2f-registered{ type: "text/template" }
   .row.append-bottom-10

locale/gitlab.pot

@@ -24830,7 +24830,7 @@ msgstr ""
 msgid "We have found the following errors:"
 msgstr ""
 
-msgid "We heard back from your U2F device. You have been authenticated."
+msgid "We heard back from your device. You have been authenticated."
 msgstr ""
 
 msgid "We recommend that you buy more Pipeline minutes to avoid any interruption of service."

spec/features/u2f_spec.rb

@@ -257,7 +257,7 @@ describe 'Using U2F (Universal 2nd Factor) Devices for Authentication', :js do
       expect(page).to have_button('Verify code')
       expect(page).to have_css('#user_otp_attempt')
       expect(page).not_to have_link('Sign in via 2FA code')
-      expect(page).not_to have_css('#js-authenticate-u2f')
+      expect(page).not_to have_css('#js-authenticate-token-2fa')
     end
 
     before do

spec/frontend/authentication/u2f/authenticate_spec.js

@@ -13,10 +13,10 @@ describe('U2FAuthenticate', () => {
   beforeEach(() => {
     loadFixtures('u2f/authenticate.html');
     u2fDevice = new MockU2FDevice();
-    container = $('#js-authenticate-u2f');
+    container = $('#js-authenticate-token-2fa');
     component = new U2FAuthenticate(
       container,
-      '#js-login-u2f-form',
+      '#js-login-token-2fa-form',
       {
         sign_requests: [],
       },
@@ -92,7 +92,7 @@ describe('U2FAuthenticate', () => {
         u2fDevice.respondToAuthenticateRequest({
           errorCode: 'error!',
         });
-        const retryButton = container.find('#js-u2f-try-again');
+        const retryButton = container.find('#js-token-2fa-try-again');
         retryButton.trigger('click');
         setupButton = container.find('#js-login-u2f-device');
         setupButton.trigger('click');