Remove u2f from globalnamespace

app/assets/javascripts/dispatcher.js

@@ -78,6 +78,7 @@ import initChangesDropdown from './init_changes_dropdown';
 import AbuseReports from './abuse_reports';
 import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
 import AjaxLoadingSpinner from './ajax_loading_spinner';
+import U2FAuthenticate from './u2f/authenticate';
 
 (function() {
   var Dispatcher;
@@ -535,14 +536,16 @@ import AjaxLoadingSpinner from './ajax_loading_spinner';
         case 'sessions':
         case 'omniauth_callbacks':
           if (!gon.u2f) break;
-          gl.u2fAuthenticate = new gl.U2FAuthenticate(
+          const u2fAuthenticate = new U2FAuthenticate(
             $('#js-authenticate-u2f'),
             '#js-login-u2f-form',
             gon.u2f,
             document.querySelector('#js-login-2fa-device'),
             document.querySelector('.js-2fa-form'),
           );
-          gl.u2fAuthenticate.start();
+          u2fAuthenticate.start();
+          // needed in rspec
+          gl.u2fAuthenticate = u2fAuthenticate;
         case 'admin':
           new Admin();
           switch (path[1]) {

app/assets/javascripts/main.js

@@ -47,12 +47,6 @@ import './lib/utils/url_utility';
 // behaviors
 import './behaviors/';
 
-// u2f
-import './u2f/authenticate';
-import './u2f/error';
-import './u2f/register';
-import './u2f/util';
-
 // everything else
 import './activities';
 import './admin';

app/assets/javascripts/two_factor_auth.js

-/* global U2FRegister */
+import U2FRegister from './u2f/register';
+
 document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
   const skippable = twoFactorNode.dataset.twoFactorSkippable === 'true';

app/assets/javascripts/u2f/authenticate.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, prefer-arrow-callback, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, max-len */
+/* eslint-disable func-names, wrap-iife */
 /* global u2f */
-/* global U2FError */
-/* global U2FUtil */
-
 import _ from 'underscore';
+import isU2FSupported from './util';
+import U2FError from './error';
 
 // Authenticate U2F (universal 2nd factor) devices for users to authenticate with.
 //
 // 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 = {});
-
-  global.U2FAuthenticate = (function() {
-    function U2FAuthenticate(container, form, u2fParams, fallbackButton, fallbackUI) {
+export default class U2FAuthenticate {
+  constructor(container, form, u2fParams, fallbackButton, fallbackUI) {
     this.container = container;
     this.renderNotSupported = this.renderNotSupported.bind(this);
     this.renderAuthenticated = this.renderAuthenticated.bind(this);
@@ -27,8 +23,10 @@ import _ from 'underscore';
     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) {
+    if (this.fallbackButton) {
+      this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this));
+    }
+
     // The U2F Javascript API v1.1 requires a single challenge, with
     // _no challenges per-request_. The U2F Javascript API v1.0 requires a
     // challenge per-request, which is done by copying the single challenge
@@ -40,79 +38,71 @@ import _ from 'underscore';
     // Note: The server library fixes this behaviour in (unreleased) version 1.0.0.
     // This can be removed once we upgrade.
     // https://github.com/castle/ruby-u2f/commit/103f428071a81cd3d5f80c2e77d522d5029946a4
-        return _(request).omit('challenge');
-      });
+    this.signRequests = u2fParams.sign_requests.map(request => _(request).omit('challenge'));
+
+    this.templates = {
+      notSupported: '#js-authenticate-u2f-not-supported',
+      setup: '#js-authenticate-u2f-setup',
+      inProgress: '#js-authenticate-u2f-in-progress',
+      error: '#js-authenticate-u2f-error',
+      authenticated: '#js-authenticate-u2f-authenticated',
+    };
   }
 
-    U2FAuthenticate.prototype.start = function() {
-      if (U2FUtil.isU2FSupported()) {
+  start() {
+    if (isU2FSupported()) {
       return this.renderInProgress();
-      } else {
+    }
     return this.renderNotSupported();
   }
-    };
 
-    U2FAuthenticate.prototype.authenticate = function() {
-      return u2f.sign(this.appId, this.challenge, this.signRequests, (function(_this) {
-        return function(response) {
-          var error;
+  authenticate() {
+    return u2f.sign(this.appId, this.challenge, this.signRequests, (function (_this) {
+      return function (response) {
         if (response.errorCode) {
-            error = new U2FError(response.errorCode, 'authenticate');
+          const error = new U2FError(response.errorCode, 'authenticate');
           return _this.renderError(error);
-          } else {
-            return _this.renderAuthenticated(JSON.stringify(response));
         }
+        return _this.renderAuthenticated(JSON.stringify(response));
       };
     })(this), 10);
-    };
-
-    // Rendering #
-    U2FAuthenticate.prototype.templates = {
-      "notSupported": "#js-authenticate-u2f-not-supported",
-      "setup": '#js-authenticate-u2f-setup',
-      "inProgress": '#js-authenticate-u2f-in-progress',
-      "error": '#js-authenticate-u2f-error',
-      "authenticated": '#js-authenticate-u2f-authenticated'
-    };
+  }
 
-    U2FAuthenticate.prototype.renderTemplate = function(name, params) {
-      var template, templateString;
-      templateString = $(this.templates[name]).html();
-      template = _.template(templateString);
+  renderTemplate(name, params) {
+    const templateString = $(this.templates[name]).html();
+    const template = _.template(templateString);
     return this.container.html(template(params));
-    };
+  }
 
-    U2FAuthenticate.prototype.renderInProgress = function() {
+  renderInProgress() {
     this.renderTemplate('inProgress');
     return this.authenticate();
-    };
+  }
 
-    U2FAuthenticate.prototype.renderError = function(error) {
+  renderError(error) {
     this.renderTemplate('error', {
       error_message: error.message(),
-        error_code: error.errorCode
+      error_code: error.errorCode,
     });
     return this.container.find('#js-u2f-try-again').on('click', this.renderInProgress);
-    };
+  }
 
-    U2FAuthenticate.prototype.renderAuthenticated = function(deviceResponse) {
+  renderAuthenticated(deviceResponse) {
     this.renderTemplate('authenticated');
     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() {
+  renderNotSupported() {
     return this.renderTemplate('notSupported');
-    };
+  }
 
-    U2FAuthenticate.prototype.switchToFallbackUI = function() {
+  switchToFallbackUI() {
     this.fallbackButton.classList.add('hidden');
     this.container[0].classList.add('hidden');
     this.fallbackUI.classList.remove('hidden');
-    };
+  }
 
-    return U2FAuthenticate;
-  })();
-})();
+}

app/assets/javascripts/u2f/error.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-console, quotes, prefer-template, max-len */
-/* global u2f */
-
-(function() {
-  this.U2FError = (function() {
-    function U2FError(errorCode, u2fFlowType) {
+export default class U2FError {
+  constructor(errorCode, u2fFlowType) {
     this.errorCode = errorCode;
     this.message = this.message.bind(this);
     this.httpsDisabled = window.location.protocol !== 'https:';
     this.u2fFlowType = u2fFlowType;
   }
 
-    U2FError.prototype.message = function() {
-      if (this.errorCode === u2f.ErrorCodes.BAD_REQUEST && this.httpsDisabled) {
+  message() {
+    if (this.errorCode === window.u2f.ErrorCodes.BAD_REQUEST && this.httpsDisabled) {
       return 'U2F only works with HTTPS-enabled websites. Contact your administrator for more details.';
-      } else if (this.errorCode === u2f.ErrorCodes.DEVICE_INELIGIBLE) {
-        if (this.u2fFlowType === 'authenticate') return 'This device has not been registered with us.';
-        if (this.u2fFlowType === 'register') return 'This device has already been registered with us.';
+    } else if (this.errorCode === window.u2f.ErrorCodes.DEVICE_INELIGIBLE) {
+      if (this.u2fFlowType === 'authenticate') {
+        return 'This device has not been registered with us.';
       }
-      return "There was a problem communicating with your device.";
-    };
-
-    return U2FError;
-  })();
-}).call(window);
+      if (this.u2fFlowType === 'register') {
+        return 'This device has already been registered with us.';
+      }
+    }
+    return 'There was a problem communicating with your device.';
+  }
+}

app/assets/javascripts/u2f/register.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, max-len */
+/* eslint-disable func-names, wrap-iife */
 /* global u2f */
-/* global U2FError */
-/* global U2FUtil */
 
 import _ from 'underscore';
+import isU2FSupported from './util';
+import U2FError from './error';
 
 // Register U2F (universal 2nd factor) devices for users to authenticate with.
 //
 // State Flow #1: setup -> in_progress -> registered -> POST to server
 // State Flow #2: setup -> in_progress -> error -> setup
-(function() {
-  this.U2FRegister = (function() {
-    function U2FRegister(container, u2fParams) {
+export default class U2FRegister {
+  constructor(container, u2fParams) {
     this.container = container;
     this.renderNotSupported = this.renderNotSupported.bind(this);
     this.renderRegistered = this.renderRegistered.bind(this);
@@ -24,75 +23,67 @@ import _ from 'underscore';
     this.appId = u2fParams.app_id;
     this.registerRequests = u2fParams.register_requests;
     this.signRequests = u2fParams.sign_requests;
+
+    this.templates = {
+      notSupported: '#js-register-u2f-not-supported',
+      setup: '#js-register-u2f-setup',
+      inProgress: '#js-register-u2f-in-progress',
+      error: '#js-register-u2f-error',
+      registered: '#js-register-u2f-registered',
+    };
   }
 
-    U2FRegister.prototype.start = function() {
-      if (U2FUtil.isU2FSupported()) {
+  start() {
+    if (isU2FSupported()) {
       return this.renderSetup();
-      } else {
+    }
     return this.renderNotSupported();
   }
-    };
 
-    U2FRegister.prototype.register = function() {
-      return u2f.register(this.appId, this.registerRequests, this.signRequests, (function(_this) {
-        return function(response) {
-          var error;
+  register() {
+    return u2f.register(this.appId, this.registerRequests, this.signRequests, (function (_this) {
+      return function (response) {
         if (response.errorCode) {
-            error = new U2FError(response.errorCode, 'register');
+          const error = new U2FError(response.errorCode, 'register');
           return _this.renderError(error);
-          } else {
-            return _this.renderRegistered(JSON.stringify(response));
         }
+        return _this.renderRegistered(JSON.stringify(response));
       };
     })(this), 10);
-    };
-
-    // Rendering #
-    U2FRegister.prototype.templates = {
-      "notSupported": "#js-register-u2f-not-supported",
-      "setup": '#js-register-u2f-setup',
-      "inProgress": '#js-register-u2f-in-progress',
-      "error": '#js-register-u2f-error',
-      "registered": '#js-register-u2f-registered'
-    };
+  }
 
-    U2FRegister.prototype.renderTemplate = function(name, params) {
-      var template, templateString;
-      templateString = $(this.templates[name]).html();
-      template = _.template(templateString);
+  renderTemplate(name, params) {
+    const templateString = $(this.templates[name]).html();
+    const template = _.template(templateString);
     return this.container.html(template(params));
-    };
+  }
 
-    U2FRegister.prototype.renderSetup = function() {
+  renderSetup() {
     this.renderTemplate('setup');
     return this.container.find('#js-setup-u2f-device').on('click', this.renderInProgress);
-    };
+  }
 
-    U2FRegister.prototype.renderInProgress = function() {
+  renderInProgress() {
     this.renderTemplate('inProgress');
     return this.register();
-    };
+  }
 
-    U2FRegister.prototype.renderError = function(error) {
+  renderError(error) {
     this.renderTemplate('error', {
       error_message: error.message(),
-        error_code: error.errorCode
+      error_code: error.errorCode,
     });
     return this.container.find('#js-u2f-try-again').on('click', this.renderSetup);
-    };
+  }
 
-    U2FRegister.prototype.renderRegistered = function(deviceResponse) {
+  renderRegistered(deviceResponse) {
     this.renderTemplate('registered');
     // Prefer to do this instead of interpolating using Underscore templates
     // because of JSON escaping issues.
-      return this.container.find("#js-device-response").val(deviceResponse);
-    };
+    return this.container.find('#js-device-response').val(deviceResponse);
+  }
 
-    U2FRegister.prototype.renderNotSupported = function() {
+  renderNotSupported() {
     return this.renderTemplate('notSupported');
-    };
-
-    return U2FRegister;
-  })();
-}).call(window);
+  }
+}

app/assets/javascripts/u2f/util.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife */
-(function() {
-  this.U2FUtil = (function() {
-    function U2FUtil() {}
-
-    U2FUtil.isU2FSupported = function() {
+export default function isU2FSupported() {
   return window.u2f;
-    };
-
-    return U2FUtil;
-  })();
-}).call(window);
+}

spec/javascripts/u2f/authenticate_spec.js

-/* eslint-disable space-before-function-paren, new-parens, quotes, comma-dangle, no-var, one-var, one-var-declaration-per-line, max-len */
-/* global MockU2FDevice */
-/* global U2FAuthenticate */
-
-import '~/u2f/authenticate';
-import '~/u2f/util';
-import '~/u2f/error';
+import U2FAuthenticate from '~/u2f/authenticate';
 import 'vendor/u2f';
-import './mock_u2f_device';
+import MockU2FDevice from './mock_u2f_device';
 
-(function() {
-  describe('U2FAuthenticate', function() {
+describe('U2FAuthenticate', () => {
   preloadFixtures('u2f/authenticate.html.raw');
 
-    beforeEach(function() {
+  beforeEach(() => {
     loadFixtures('u2f/authenticate.html.raw');
-      this.u2fDevice = new MockU2FDevice;
-      this.container = $("#js-authenticate-u2f");
-      this.component = new window.gl.U2FAuthenticate(
+    this.u2fDevice = new MockU2FDevice();
+    this.container = $('#js-authenticate-u2f');
+    this.component = new U2FAuthenticate(
       this.container,
       '#js-login-u2f-form',
       {
-          sign_requests: []
+        sign_requests: [],
       },
       document.querySelector('#js-login-2fa-device'),
-        document.querySelector('.js-2fa-form')
+      document.querySelector('.js-2fa-form'),
     );
 
     // bypass automatic form submission within renderAuthenticated
@@ -31,42 +24,40 @@ import './mock_u2f_device';
 
     return this.component.start();
   });
-    it('allows authenticating via a U2F device', function() {
-      var inProgressMessage;
-      inProgressMessage = this.container.find("p");
-      expect(inProgressMessage.text()).toContain("Trying to communicate with your device");
+
+  it('allows authenticating via a U2F device', () => {
+    const inProgressMessage = this.container.find('p');
+    expect(inProgressMessage.text()).toContain('Trying to communicate with your device');
     this.u2fDevice.respondToAuthenticateRequest({
-        deviceData: "this is data from the device"
+      deviceData: 'this is data from the device',
     });
     expect(this.component.renderAuthenticated).toHaveBeenCalledWith('{"deviceData":"this is data from the device"}');
   });
-    return describe("errors", function() {
-      it("displays an error message", function() {
-        var errorMessage, setupButton;
-        setupButton = this.container.find("#js-login-u2f-device");
+
+  return describe('errors', () => {
+    it('displays an error message', () => {
+      const setupButton = this.container.find('#js-login-u2f-device');
       setupButton.trigger('click');
       this.u2fDevice.respondToAuthenticateRequest({
-          errorCode: "error!"
+        errorCode: 'error!',
       });
-        errorMessage = this.container.find("p");
-        return expect(errorMessage.text()).toContain("There was a problem communicating with your device");
+      const errorMessage = this.container.find('p');
+      return expect(errorMessage.text()).toContain('There was a problem communicating with your device');
     });
-      return it("allows retrying authentication after an error", function() {
-        var retryButton, setupButton;
-        setupButton = this.container.find("#js-login-u2f-device");
+    return it('allows retrying authentication after an error', () => {
+      let setupButton = this.container.find('#js-login-u2f-device');
       setupButton.trigger('click');
       this.u2fDevice.respondToAuthenticateRequest({
-          errorCode: "error!"
+        errorCode: 'error!',
       });
-        retryButton = this.container.find("#js-u2f-try-again");
+      const retryButton = this.container.find('#js-u2f-try-again');
       retryButton.trigger('click');
-        setupButton = this.container.find("#js-login-u2f-device");
+      setupButton = this.container.find('#js-login-u2f-device');
       setupButton.trigger('click');
       this.u2fDevice.respondToAuthenticateRequest({
-          deviceData: "this is data from the device"
+        deviceData: 'this is data from the device',
       });
       expect(this.component.renderAuthenticated).toHaveBeenCalledWith('{"deviceData":"this is data from the device"}');
     });
   });
-  });
-}).call(window);
+});

spec/javascripts/u2f/mock_u2f_device.js

-/* eslint-disable space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-expressions, no-return-assign, no-param-reassign, max-len */
+/* eslint-disable prefer-rest-params, wrap-iife,
+no-unused-expressions, no-return-assign, no-param-reassign*/
 
-(function() {
-  this.MockU2FDevice = (function() {
-    function MockU2FDevice() {
+export default class MockU2FDevice {
+  constructor() {
     this.respondToAuthenticateRequest = this.respondToAuthenticateRequest.bind(this);
     this.respondToRegisterRequest = this.respondToRegisterRequest.bind(this);
     window.u2f || (window.u2f = {});
-      window.u2f.register = (function(_this) {
-        return function(appId, registerRequests, signRequests, callback) {
+    window.u2f.register = (function (_this) {
+      return function (appId, registerRequests, signRequests, callback) {
         return _this.registerCallback = callback;
       };
     })(this);
-      window.u2f.sign = (function(_this) {
-        return function(appId, challenges, signRequests, callback) {
+    window.u2f.sign = (function (_this) {
+      return function (appId, challenges, signRequests, callback) {
         return _this.authenticateCallback = callback;
       };
     })(this);
   }
 
-    MockU2FDevice.prototype.respondToRegisterRequest = function(params) {
+  respondToRegisterRequest(params) {
     return this.registerCallback(params);
-    };
+  }
 
-    MockU2FDevice.prototype.respondToAuthenticateRequest = function(params) {
+  respondToAuthenticateRequest(params) {
     return this.authenticateCallback(params);
-    };
-
-    return MockU2FDevice;
-  })();
-}).call(window);
+  }
+}

spec/javascripts/u2f/register_spec.js

-/* eslint-disable space-before-function-paren, new-parens, quotes, no-var, one-var, one-var-declaration-per-line, comma-dangle, max-len */
-/* global MockU2FDevice */
-/* global U2FRegister */
-
-import '~/u2f/register';
-import '~/u2f/util';
-import '~/u2f/error';
+import U2FRegister from '~/u2f/register';
 import 'vendor/u2f';
-import './mock_u2f_device';
+import MockU2FDevice from './mock_u2f_device';
 
-(function() {
-  describe('U2FRegister', function() {
+describe('U2FRegister', () => {
   preloadFixtures('u2f/register.html.raw');
 
-    beforeEach(function() {
+  beforeEach(() => {
     loadFixtures('u2f/register.html.raw');
-      this.u2fDevice = new MockU2FDevice;
-      this.container = $("#js-register-u2f");
-      this.component = new U2FRegister(this.container, $("#js-register-u2f-templates"), {}, "token");
+    this.u2fDevice = new MockU2FDevice();
+    this.container = $('#js-register-u2f');
+    this.component = new U2FRegister(this.container, $('#js-register-u2f-templates'), {}, 'token');
     return this.component.start();
   });
-    it('allows registering a U2F device', function() {
-      var deviceResponse, inProgressMessage, registeredMessage, setupButton;
-      setupButton = this.container.find("#js-setup-u2f-device");
+
+  it('allows registering a U2F device', () => {
+    const setupButton = this.container.find('#js-setup-u2f-device');
     expect(setupButton.text()).toBe('Setup new U2F device');
     setupButton.trigger('click');
-      inProgressMessage = this.container.children("p");
-      expect(inProgressMessage.text()).toContain("Trying to communicate with your device");
+    const inProgressMessage = this.container.children('p');
+    expect(inProgressMessage.text()).toContain('Trying to communicate with your device');
     this.u2fDevice.respondToRegisterRequest({
-        deviceData: "this is data from the device"
+      deviceData: 'this is data from the device',
     });
-      registeredMessage = this.container.find('p');
-      deviceResponse = this.container.find('#js-device-response');
-      expect(registeredMessage.text()).toContain("Your device was successfully set up!");
+    const registeredMessage = this.container.find('p');
+    const deviceResponse = this.container.find('#js-device-response');
+    expect(registeredMessage.text()).toContain('Your device was successfully set up!');
     return expect(deviceResponse.val()).toBe('{"deviceData":"this is data from the device"}');
   });
-    return describe("errors", function() {
-      it("doesn't allow the same device to be registered twice (for the same user", function() {
-        var errorMessage, setupButton;
-        setupButton = this.container.find("#js-setup-u2f-device");
+
+  return describe('errors', () => {
+    it('doesn\'t allow the same device to be registered twice (for the same user', () => {
+      const setupButton = this.container.find('#js-setup-u2f-device');
       setupButton.trigger('click');
       this.u2fDevice.respondToRegisterRequest({
-          errorCode: 4
+        errorCode: 4,
       });
-        errorMessage = this.container.find("p");
-        return expect(errorMessage.text()).toContain("already been registered with us");
+      const errorMessage = this.container.find('p');
+      return expect(errorMessage.text()).toContain('already been registered with us');
     });
-      it("displays an error message for other errors", function() {
-        var errorMessage, setupButton;
-        setupButton = this.container.find("#js-setup-u2f-device");
+
+    it('displays an error message for other errors', () => {
+      const setupButton = this.container.find('#js-setup-u2f-device');
       setupButton.trigger('click');
       this.u2fDevice.respondToRegisterRequest({
-          errorCode: "error!"
+        errorCode: 'error!',
       });
-        errorMessage = this.container.find("p");
-        return expect(errorMessage.text()).toContain("There was a problem communicating with your device");
+      const errorMessage = this.container.find('p');
+      return expect(errorMessage.text()).toContain('There was a problem communicating with your device');
     });
-      return it("allows retrying registration after an error", function() {
-        var registeredMessage, retryButton, setupButton;
-        setupButton = this.container.find("#js-setup-u2f-device");
+
+    return it('allows retrying registration after an error', () => {
+      let setupButton = this.container.find('#js-setup-u2f-device');
       setupButton.trigger('click');
       this.u2fDevice.respondToRegisterRequest({
-          errorCode: "error!"
+        errorCode: 'error!',
       });
-        retryButton = this.container.find("#U2FTryAgain");
+      const retryButton = this.container.find('#U2FTryAgain');
       retryButton.trigger('click');
-        setupButton = this.container.find("#js-setup-u2f-device");
+      setupButton = this.container.find('#js-setup-u2f-device');
       setupButton.trigger('click');
       this.u2fDevice.respondToRegisterRequest({
-          deviceData: "this is data from the device"
-        });
-        registeredMessage = this.container.find("p");
-        return expect(registeredMessage.text()).toContain("Your device was successfully set up!");
+        deviceData: 'this is data from the device',
       });
+      const registeredMessage = this.container.find('p');
+      return expect(registeredMessage.text()).toContain('Your device was successfully set up!');
     });
   });
-}).call(window);
+});