/* eslint-disable comma-dangle, consistent-return, class-methods-use-this, arrow-parens, no-param-reassign, max-len */

import _ from 'underscore';

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) {
        return debounceTimeout(username);
      }

      this.renderState();
    });

    // Override generic field validation
    this.inputElement.on('invalid', this.interceptInvalid.bind(this));
  }

  renderState() {
    // Clear all state
    this.clearFieldValidationState();

    if (this.state.valid && this.state.available) {
      return this.setSuccessState();
    }

    if (this.state.empty) {
      return this.clearFieldValidationState();
    }

    if (this.state.pending) {
      return this.setPendingState();
    }

    if (!this.state.available) {
      return this.setUnavailableState();
    }

    if (!this.state.valid) {
      return this.setInvalidState();
    }
  }

  interceptInvalid(event) {
    event.preventDefault();
    event.stopPropagation();
  }

  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)
      });
    }
  }

  setAvailabilityState(usernameTaken) {
    if (usernameTaken) {
      this.state.valid = false;
      this.state.available = false;
    } else {
      this.state.available = true;
    }
    this.state.pending = false;
    this.renderState();
  }

  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();
    }
  }

  setInvalidState() {
    const $inputErrorMessage = $(invalidMessageSelector);
    this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
    $inputErrorMessage.show();
  }
}

@@ -140,16 +140,121 @@
 rscore';
+%0Aimport axios from '~/lib/utils/axios_utils';%0Aimport flash from '~/flash';%0Aimport %7B __ %7D from '~/locale';
 %0A%0Aconst 
@@ -2235,58 +2235,18 @@
     
-return $.ajax(%7B%0A        type: 'GET',%0A        url: 
+axios.get(
 %60$%7Bg
@@ -2292,17 +2292,17 @@
 /exists%60
-,
+)
 %0A       
@@ -2306,47 +2306,23 @@
     
-dataType: 'json',%0A        success: (res
+.then((%7B data %7D
 ) =%3E
@@ -2352,19 +2352,20 @@
 ate(
-res
+data
 .exists)
 %0A   
@@ -2360,24 +2360,95 @@
 .exists)
+)
 %0A      
-%7D
+  .catch(() =%3E flash(__('An error occurred while validating username'))
 );%0A    %7D

Replace $.ajax in username validator with axios