1 files changed, 105 insertions, 109 deletions
diff --git a/app/assets/javascripts/username_validator.js b/app/assets/javascripts/username_validator.js
index 137cefa3b8e..a348d69153c 100644
--- a/app/assets/javascripts/username_validator.js
+++ b/app/assets/javascripts/username_validator.js
@@ -1,135 +1,131 @@
 /* eslint-disable comma-dangle, consistent-return, class-methods-use-this, arrow-parens, no-param-reassign, max-len */
 
-((global) => {
-  const debounceTimeoutDuration = 1000;
-  const invalidInputClass = 'gl-field-error-outline';
-  const successInputClass = 'gl-field-success-outline';
-  const unavailableMessageSelector = '.username .validation-error';
-  const successMessageSelector = '.username .validation-success';
-  const pendingMessageSelector = '.username .validation-pending';
-  const invalidMessageSelector = '.username .gl-field-error';
-
-  class UsernameValidator {
-    constructor() {
-      this.inputElement = $('#new_user_username');
-      this.inputDomElement = this.inputElement.get(0);
-      this.state = {
-        available: false,
-        valid: false,
-        pending: false,
-        empty: true
-      };
-
-      const debounceTimeout = _.debounce((username) => {
-        this.validateUsername(username);
-      }, debounceTimeoutDuration);
-
-      this.inputElement.on('keyup.username_check', () => {
-        const username = this.inputElement.val();
-
-        this.state.valid = this.inputDomElement.validity.valid;
-        this.state.empty = !username.length;
-
-        if (this.state.valid) {
-          return debounceTimeout(username);
-        }
-
-        this.renderState();
-      });
-
-      // Override generic field validation
-      this.inputElement.on('invalid', this.interceptInvalid.bind(this));
-    }
-
-    renderState() {
-      // Clear all state
-      this.clearFieldValidationState();
+const debounceTimeoutDuration = 1000;
+const invalidInputClass = 'gl-field-error-outline';
+const successInputClass = 'gl-field-success-outline';
+const unavailableMessageSelector = '.username .validation-error';
+const successMessageSelector = '.username .validation-success';
+const pendingMessageSelector = '.username .validation-pending';
+const invalidMessageSelector = '.username .gl-field-error';
+
+export default class UsernameValidator {
+  constructor() {
+    this.inputElement = $('#new_user_username');
+    this.inputDomElement = this.inputElement.get(0);
+    this.state = {
+      available: false,
+      valid: false,
+      pending: false,
+      empty: true
+    };
+
+    const debounceTimeout = _.debounce((username) => {
+      this.validateUsername(username);
+    }, debounceTimeoutDuration);
+
+    this.inputElement.on('keyup.username_check', () => {
+      const username = this.inputElement.val();
+
+      this.state.valid = this.inputDomElement.validity.valid;
+      this.state.empty = !username.length;
 
-      if (this.state.valid && this.state.available) {
-        return this.setSuccessState();
+      if (this.state.valid) {
+        return debounceTimeout(username);
       }
 
-      if (this.state.empty) {
-        return this.clearFieldValidationState();
-      }
+      this.renderState();
+    });
 
-      if (this.state.pending) {
-        return this.setPendingState();
-      }
+    // Override generic field validation
+    this.inputElement.on('invalid', this.interceptInvalid.bind(this));
+  }
 
-      if (!this.state.available) {
-        return this.setUnavailableState();
-      }
+  renderState() {
+    // Clear all state
+    this.clearFieldValidationState();
 
-      if (!this.state.valid) {
-        return this.setInvalidState();
-      }
+    if (this.state.valid && this.state.available) {
+      return this.setSuccessState();
     }
 
-    interceptInvalid(event) {
-      event.preventDefault();
-      event.stopPropagation();
+    if (this.state.empty) {
+      return this.clearFieldValidationState();
     }
 
-    validateUsername(username) {
-      if (this.state.valid) {
-        this.state.pending = true;
-        this.state.available = false;
-        this.renderState();
-        return $.ajax({
-          type: 'GET',
-          url: `${gon.relative_url_root}/users/${username}/exists`,
-          dataType: 'json',
-          success: (res) => this.setAvailabilityState(res.exists)
-        });
-      }
+    if (this.state.pending) {
+      return this.setPendingState();
     }
 
-    setAvailabilityState(usernameTaken) {
-      if (usernameTaken) {
-        this.state.valid = false;
-        this.state.available = false;
-      } else {
-        this.state.available = true;
-      }
-      this.state.pending = false;
-      this.renderState();
+    if (!this.state.available) {
+      return this.setUnavailableState();
     }
 
-    clearFieldValidationState() {
-      this.inputElement.siblings('p').hide();
-
-      this.inputElement.removeClass(invalidInputClass)
-        .removeClass(successInputClass);
+    if (!this.state.valid) {
+      return this.setInvalidState();
     }
+  }
 
-    setUnavailableState() {
-      const $usernameUnavailableMessage = this.inputElement.siblings(unavailableMessageSelector);
-      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
-      $usernameUnavailableMessage.show();
-    }
+  interceptInvalid(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
 
-    setSuccessState() {
-      const $usernameSuccessMessage = this.inputElement.siblings(successMessageSelector);
-      this.inputElement.addClass(successInputClass).removeClass(invalidInputClass);
-      $usernameSuccessMessage.show();
+  validateUsername(username) {
+    if (this.state.valid) {
+      this.state.pending = true;
+      this.state.available = false;
+      this.renderState();
+      return $.ajax({
+        type: 'GET',
+        url: `${gon.relative_url_root}/users/${username}/exists`,
+        dataType: 'json',
+        success: (res) => this.setAvailabilityState(res.exists)
+      });
     }
+  }
 
-    setPendingState() {
-      const $usernamePendingMessage = $(pendingMessageSelector);
-      if (this.state.pending) {
-        $usernamePendingMessage.show();
-      } else {
-        $usernamePendingMessage.hide();
-      }
+  setAvailabilityState(usernameTaken) {
+    if (usernameTaken) {
+      this.state.valid = false;
+      this.state.available = false;
+    } else {
+      this.state.available = true;
     }
+    this.state.pending = false;
+    this.renderState();
+  }
 
-    setInvalidState() {
-      const $inputErrorMessage = $(invalidMessageSelector);
-      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
-      $inputErrorMessage.show();
+  clearFieldValidationState() {
+    this.inputElement.siblings('p').hide();
+
+    this.inputElement.removeClass(invalidInputClass)
+      .removeClass(successInputClass);
+  }
+
+  setUnavailableState() {
+    const $usernameUnavailableMessage = this.inputElement.siblings(unavailableMessageSelector);
+    this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
+    $usernameUnavailableMessage.show();
+  }
+
+  setSuccessState() {
+    const $usernameSuccessMessage = this.inputElement.siblings(successMessageSelector);
+    this.inputElement.addClass(successInputClass).removeClass(invalidInputClass);
+    $usernameSuccessMessage.show();
+  }
+
+  setPendingState() {
+    const $usernamePendingMessage = $(pendingMessageSelector);
+    if (this.state.pending) {
+      $usernamePendingMessage.show();
+    } else {
+      $usernamePendingMessage.hide();
     }
   }
 
-  global.UsernameValidator = UsernameValidator;
-})(window);
+  setInvalidState() {
+    const $inputErrorMessage = $(invalidMessageSelector);
+    this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
+    $inputErrorMessage.show();
+  }
+}