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

2 files changed, 72 insertions, 0 deletions

diff --git a/spec/javascripts/u2f/mock_u2f_device.js.coffee b/spec/javascripts/u2f/mock_u2f_device.js.coffee
new file mode 100644
index 00000000000..97ed0e83a0e
--- /dev/null
+++ b/spec/javascripts/u2f/mock_u2f_device.js.coffee
@@ -0,0 +1,15 @@
+class @MockU2FDevice
+  constructor: () ->
+    window.u2f ||= {}
+
+    window.u2f.register = (appId, registerRequests, signRequests, callback) =>
+      @registerCallback = callback
+
+    window.u2f.sign = (appId, challenges, signRequests, callback) =>
+      @authenticateCallback = callback
+
+  respondToRegisterRequest: (params) =>
+    @registerCallback(params)
+
+  respondToAuthenticateRequest: (params) =>
+    @authenticateCallback(params)
diff --git a/spec/javascripts/u2f/register_spec.js.coffee b/spec/javascripts/u2f/register_spec.js.coffee
new file mode 100644
index 00000000000..0858abeca1a
--- /dev/null
+++ b/spec/javascripts/u2f/register_spec.js.coffee
@@ -0,0 +1,57 @@
+#= require u2f/register
+#= require u2f/util
+#= require u2f/error
+#= require u2f
+#= require ./mock_u2f_device
+
+describe 'U2FRegister', ->
+  U2FUtil.enableTestMode()
+  fixture.load('u2f/register')
+
+  beforeEach ->
+    @u2fDevice = new MockU2FDevice
+    @container = $("#js-register-u2f")
+    @component = new U2FRegister(@container, $("#js-register-u2f-templates"), {}, "token")
+    @component.start()
+
+  it 'allows registering a U2F device', ->
+    setupButton = @container.find("#js-setup-u2f-device")
+    expect(setupButton.text()).toBe('Setup New U2F Device')
+    setupButton.trigger('click')
+
+    inProgressMessage = @container.children("p")
+    expect(inProgressMessage.text()).toContain("Trying to communicate with your device")
+
+    @u2fDevice.respondToRegisterRequest({deviceData: "this is data from the device"})
+    registeredMessage = @container.find('p')
+    deviceResponse = @container.find('#js-device-response')
+    expect(registeredMessage.text()).toContain("Your device was successfully set up!")
+    expect(deviceResponse.val()).toBe('{"deviceData":"this is data from the device"}')
+
+  describe "errors", ->
+    it "doesn't allow the same device to be registered twice (for the same user", ->
+      setupButton = @container.find("#js-setup-u2f-device")
+      setupButton.trigger('click')
+      @u2fDevice.respondToRegisterRequest({errorCode: 4})
+      errorMessage = @container.find("p")
+      expect(errorMessage.text()).toContain("already been registered with us")
+
+    it "displays an error message for other errors", ->
+      setupButton = @container.find("#js-setup-u2f-device")
+      setupButton.trigger('click')
+      @u2fDevice.respondToRegisterRequest({errorCode: "error!"})
+      errorMessage = @container.find("p")
+      expect(errorMessage.text()).toContain("There was a problem communicating with your device")
+
+    it "allows retrying registration after an error", ->
+      setupButton = @container.find("#js-setup-u2f-device")
+      setupButton.trigger('click')
+      @u2fDevice.respondToRegisterRequest({errorCode: "error!"})
+      retryButton = @container.find("#U2FTryAgain")
+      retryButton.trigger('click')
+
+      setupButton = @container.find("#js-setup-u2f-device")
+      setupButton.trigger('click')
+      @u2fDevice.respondToRegisterRequest({deviceData: "this is data from the device"})
+      registeredMessage = @container.find("p")
+      expect(registeredMessage.text()).toContain("Your device was successfully set up!")