Implement U2F registration.

- Move the `TwoFactorAuthsController`'s `new` action to `show`, since
  the page is not used to create a single "two factor auth" anymore. We
  can have a single 2FA authenticator app, along with any number of U2F
  devices, in any combination, so the page will be accessed after the
  first "two factor auth" is created.
- Add the `u2f` javascript library, which provides an API to the
  browser's U2F implementation.
- Add tests for the JS components

3 files changed, 82 insertions, 51 deletions

diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 01ac8161945..3d2a245ecbd 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -11,7 +11,7 @@
     %p
       Your private token is used to access application resources without authentication.
   .col-lg-9
-    = form_for @user, url: reset_private_token_profile_path, method: :put, html: {class: "private-token"} do |f|
+    = form_for @user, url: reset_private_token_profile_path, method: :put, html: { class: "private-token" } do |f|
       %p.cgray
         - if current_user.private_token
           = label_tag "token", "Private token", class: "label-light"
@@ -29,21 +29,22 @@
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar
     %h4.prepend-top-0
-      Two-factor Authentication
+      Two-Factor Authentication
     %p
-      Increase your account's security by enabling two-factor authentication (2FA).
+      Increase your account's security by enabling Two-Factor Authentication (2FA).
   .col-lg-9
     %p
-      Status: #{current_user.two_factor_enabled? ? 'enabled' : 'disabled'}
-    - if !current_user.two_factor_enabled?
-      %p
-        Download the Google Authenticator application from App Store for iOS or Google Play for Android and scan this code.
-        More information is available in the #{link_to('documentation', help_page_path('profile', 'two_factor_authentication'))}.
-      .append-bottom-10
-        = link_to 'Enable two-factor authentication', new_profile_two_factor_auth_path, class: 'btn btn-success'
+      Status: #{current_user.two_factor_enabled? ? 'Enabled' : 'Disabled'}
+    - if current_user.two_factor_enabled?
+      = link_to 'Manage Two-Factor Authentication', profile_two_factor_auth_path, class: 'btn btn-info'
+      = link_to 'Disable', profile_two_factor_auth_path,
+                method: :delete,
+                data: { confirm: "Are you sure? This will invalidate your registered applications and U2F devices." },
+                class: 'btn btn-danger'
     - else
-      = link_to 'Disable Two-factor Authentication', profile_two_factor_auth_path, method: :delete, class: 'btn btn-danger',
-              data: { confirm: 'Are you sure?' }
+      .append-bottom-10
+        = link_to 'Enable Two-Factor Authentication', profile_two_factor_auth_path, class: 'btn btn-success'
+
 %hr
 - if button_based_providers.any?
   .row.prepend-top-default
diff --git a/app/views/profiles/two_factor_auths/new.html.haml b/app/views/profiles/two_factor_auths/new.html.haml
deleted file mode 100644
index 69fc81cb45c..00000000000
--- a/app/views/profiles/two_factor_auths/new.html.haml
+++ /dev/null
@@ -1,39 +0,0 @@
-- page_title 'Two-factor Authentication', 'Account'
-
-.row.prepend-top-default
-  .col-lg-3
-    %h4.prepend-top-0
-      Two-factor Authentication (2FA)
-    %p
-      Increase your account's security by enabling two-factor authentication (2FA).
-  .col-lg-9
-    %p
-      Download the Google Authenticator application from App Store for iOS or Google Play for Android and scan this code.
-      More information is available in the #{link_to('documentation', help_page_path('profile', 'two_factor_authentication'))}.
-    .row.append-bottom-10
-      .col-md-3
-        = raw @qr_code
-      .col-md-9
-        .account-well
-          %p.prepend-top-0.append-bottom-0
-            Can't scan the code?
-          %p.prepend-top-0.append-bottom-0
-            To add the entry manually, provide the following details to the application on your phone.
-          %p.prepend-top-0.append-bottom-0
-            Account:
-            = current_user.email
-          %p.prepend-top-0.append-bottom-0
-            Key:
-            = current_user.otp_secret.scan(/.{4}/).join(' ')
-          %p.two-factor-new-manual-content
-            Time based: Yes
-    = form_tag profile_two_factor_auth_path, method: :post do |f|
-      - if @error
-        .alert.alert-danger
-          = @error
-      .form-group
-        = label_tag :pin_code, nil, class: "label-light"
-        = text_field_tag :pin_code, nil, class: "form-control", required: true
-      .prepend-top-default
-        = submit_tag 'Enable two-factor authentication', class: 'btn btn-success'
-        = link_to 'Configure it later', skip_profile_two_factor_auth_path, :method => :patch,  class: 'btn btn-cancel' if two_factor_skippable?
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
new file mode 100644
index 00000000000..ce76cb73c9c
--- /dev/null
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -0,0 +1,69 @@
+- page_title 'Two-Factor Authentication', 'Account'
+- header_title "Two-Factor Authentication", profile_two_factor_auth_path
+
+.row.prepend-top-default
+  .col-lg-3
+    %h4.prepend-top-0
+      Register Two-Factor Authentication App
+    %p
+      Use an app on your mobile device to enable two-factor authentication (2FA).
+  .col-lg-9
+    - if current_user.two_factor_otp_enabled?
+      = icon "check inverse", base: "circle", class: "text-success", text: "You've already enabled two-factor authentication using mobile authenticator applications. You can disable it from your account settings page."
+    - else
+      %p
+        Download the Google Authenticator application from App Store or Google Play Store and scan this code.
+        More information is available in the #{link_to('documentation', help_page_path('profile', 'two_factor_authentication'))}.
+      .row.append-bottom-10
+        .col-md-3
+          = raw @qr_code
+        .col-md-9
+          .account-well
+            %p.prepend-top-0.append-bottom-0
+              Can't scan the code?
+            %p.prepend-top-0.append-bottom-0
+              To add the entry manually, provide the following details to the application on your phone.
+            %p.prepend-top-0.append-bottom-0
+              Account:
+              = current_user.email
+            %p.prepend-top-0.append-bottom-0
+              Key:
+              = current_user.otp_secret.scan(/.{4}/).join(' ')
+            %p.two-factor-new-manual-content
+              Time based: Yes
+      = form_tag profile_two_factor_auth_path, method: :post do |f|
+        - if @error
+          .alert.alert-danger
+            = @error
+        .form-group
+          = label_tag :pin_code, nil, class: "label-light"
+          = text_field_tag :pin_code, nil, class: "form-control", required: true
+        .prepend-top-default
+          = submit_tag 'Register with Two-Factor App', class: 'btn btn-success'
+
+%hr
+
+.row.prepend-top-default
+
+  .col-lg-3
+    %h4.prepend-top-0
+      Register Universal Two-Factor (U2F) Device
+    %p
+      Use a hardware device to add the second factor of authentication.
+    %p
+      As U2F devices are only supported by a few browsers, it's recommended that you set up a
+      two-factor authentication app as well as a U2F device so you'll always be able to log in
+      using an unsupported browser.
+  .col-lg-9
+    %p
+      - if @registration_key_handles.present?
+        = icon "check inverse", base: "circle", class: "text-success", text: "You have #{pluralize(@registration_key_handles.size, 'U2F device')} registered with GitLab."
+    - if @u2f_registration.errors.present?
+      = form_errors(@u2f_registration)
+    = render "u2f/register"
+
+- if two_factor_skippable?
+  :javascript
+    var button = "<a class='btn btn-xs btn-warning pull-right' data-method='patch' href='#{skip_profile_two_factor_auth_path}'>Configure it later</a>";
+    $(".flash-alert").append(button);
+