Improved the u2f flow18556-polish-up-the-u2f-flow

Added tests

1 files changed, 21 insertions, 14 deletions

diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js.es6
index e407b856e10..2b992109a8c 100644
--- a/app/assets/javascripts/u2f/authenticate.js
+++ b/app/assets/javascripts/u2f/authenticate.js.es6
@@ -8,21 +8,26 @@
 // State Flow #1: setup -> in_progress -> authenticated -> POST to server
 // State Flow #2: setup -> in_progress -> error -> setup
 (function() {
+  const global = window.gl || (window.gl = {});
+
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
-  this.U2FAuthenticate = (function() {
-    function U2FAuthenticate(container, u2fParams) {
+  global.U2FAuthenticate = (function() {
+    function U2FAuthenticate(container, form, u2fParams, fallbackButton, fallbackUI) {
       this.container = container;
       this.renderNotSupported = bind(this.renderNotSupported, this);
       this.renderAuthenticated = bind(this.renderAuthenticated, this);
       this.renderError = bind(this.renderError, this);
       this.renderInProgress = bind(this.renderInProgress, this);
-      this.renderSetup = bind(this.renderSetup, this);
       this.renderTemplate = bind(this.renderTemplate, this);
       this.authenticate = bind(this.authenticate, this);
       this.start = bind(this.start, this);
       this.appId = u2fParams.app_id;
       this.challenge = u2fParams.challenge;
+      this.form = form;
+      this.fallbackButton = fallbackButton;
+      this.fallbackUI = fallbackUI;
+      if (this.fallbackButton) this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this));
       this.signRequests = u2fParams.sign_requests.map(function(request) {
         // The U2F Javascript API v1.1 requires a single challenge, with
         // _no challenges per-request_. The U2F Javascript API v1.0 requires a
@@ -41,7 +46,7 @@
 
     U2FAuthenticate.prototype.start = function() {
       if (U2FUtil.isU2FSupported()) {
-        return this.renderSetup();
+        return this.renderInProgress();
       } else {
         return this.renderNotSupported();
       }
@@ -77,11 +82,6 @@
       return this.container.html(template(params));
     };
 
-    U2FAuthenticate.prototype.renderSetup = function() {
-      this.renderTemplate('setup');
-      return this.container.find('#js-login-u2f-device').on('click', this.renderInProgress);
-    };
-
     U2FAuthenticate.prototype.renderInProgress = function() {
       this.renderTemplate('inProgress');
       return this.authenticate();
@@ -92,22 +92,29 @@
         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-u2f-try-again').on('click', this.renderInProgress);
     };
 
     U2FAuthenticate.prototype.renderAuthenticated = function(deviceResponse) {
       this.renderTemplate('authenticated');
-      // Prefer to do this instead of interpolating using Underscore templates
-      // because of JSON escaping issues.
-      return this.container.find("#js-device-response").val(deviceResponse);
+      const container = this.container[0];
+      container.querySelector('#js-device-response').value = deviceResponse;
+      container.querySelector(this.form).submit();
+      this.fallbackButton.classList.add('hidden');
     };
 
     U2FAuthenticate.prototype.renderNotSupported = function() {
       return this.renderTemplate('notSupported');
     };
 
+    U2FAuthenticate.prototype.switchToFallbackUI = function() {
+      this.fallbackButton.classList.add('hidden');
+      this.container[0].classList.add('hidden');
+      this.fallbackUI.classList.remove('hidden');
+    };
+
     return U2FAuthenticate;
 
   })();
 
-}).call(this);
+})();