diff options
-rw-r--r-- | app/assets/javascripts/username_validator.coffee | 36 | ||||
-rw-r--r-- | app/assets/javascripts/username_validator.es6 | 51 | ||||
-rw-r--r-- | app/assets/javascripts/username_validator.js.es6 | 52 |
3 files changed, 52 insertions, 87 deletions
diff --git a/app/assets/javascripts/username_validator.coffee b/app/assets/javascripts/username_validator.coffee deleted file mode 100644 index 9d77fd50f8a..00000000000 --- a/app/assets/javascripts/username_validator.coffee +++ /dev/null @@ -1,36 +0,0 @@ -class @UsernameValidator - DEBOUNCE_TIMEOUT_DURATION = 1000 - ERROR_ICON_CLASSES = 'fa fa-exclamation-circle error' - USERNAME_IN_USE_MESSAGE = 'Username "$1" is in use!' - LOADING_ICON_CLASSES = 'fa fa-spinner fa-spin' - SUCCESS_ICON_CLASSES = 'fa fa-check-circle success' - TOOLTIP_PLACEMENT = 'left' - - constructor: () -> - @inputElement = $('#new_user_username') - @iconElement = $('<i></i>') - @inputElement.parent().append @iconElement - - debounceTimeout = _.debounce @validateUsername, DEBOUNCE_TIMEOUT_DURATION - - @inputElement.keyup => - @iconElement.removeClass().tooltip 'destroy' - username = @inputElement.val() - return if username is '' - @iconElement.addClass LOADING_ICON_CLASSES - debounceTimeout username - - validateUsername: (username) => - $.ajax - type: 'GET' - url: "/u/#{username}/exists" - dataType: 'json' - success: (res) => - if res.exists - @iconElement.removeClass().addClass ERROR_ICON_CLASSES - .tooltip - title: USERNAME_IN_USE_MESSAGE.replace /\$1/g, username - placement: TOOLTIP_PLACEMENT - else - @iconElement.removeClass().addClass SUCCESS_ICON_CLASSES - .tooltip 'destroy' diff --git a/app/assets/javascripts/username_validator.es6 b/app/assets/javascripts/username_validator.es6 deleted file mode 100644 index 67dacb655cc..00000000000 --- a/app/assets/javascripts/username_validator.es6 +++ /dev/null @@ -1,51 +0,0 @@ -((global) => { - class UsernameValidator { - constructor() { - this.debounceTimeoutDuration = 1000; - this.errorIconClasses = 'fa fa-exclamation-circle error'; - this.usernameInUseMessage = 'Username "$1" is in use!'; - this.loadingIconClasses = 'fa fa-spinner fa-spin'; - this.successIconClasses = 'fa fa-check-circle success'; - this.tooltipPlacement = 'left'; - - this.inputElement = $('#new_user_username'); - let inputContainer = this.inputElement.parent(); - inputContainer.append('<i></i>'); - this.iconElement = $('i', inputContainer); - - let debounceTimeout = _.debounce(this.validateUsername, debounceTimeoutDuration); - this.inputElement.keyup(() => this.debounceRequest(debounceTimeout)); - } - - debounceRequest(debounceTimeout) { - this.iconElement.removeClass().tooltip('destroy'); - let username = this.inputElement.val(); - if (username === '') return; - this.iconElement.addClass(loadingIconClasses); - debounceTimeout(username); - } - - validateUsername(username) { - $.ajax({ - type: 'GET', - url: `/u/${username}/exists`, - dataType: 'json', - success: () => { - this.iconElement - .removeClass().addClass(errorIconClasses) - .tooltip({ - title: usernameInUseMessage.replace(/\$1/g, username), - placement: tooltipPlacement - }); - }, - error: () => { - this.iconElement - .removeClass().addClass(successIconClasses) - .tooltip('destroy') - } - }); - } - } - - global.UsernameValidator = UsernameValidator; -})(window); diff --git a/app/assets/javascripts/username_validator.js.es6 b/app/assets/javascripts/username_validator.js.es6 new file mode 100644 index 00000000000..5152eb23cce --- /dev/null +++ b/app/assets/javascripts/username_validator.js.es6 @@ -0,0 +1,52 @@ +((global) => { + class UsernameValidator { + constructor() { + this.debounceTimeoutDuration = 1000; + this.errorIconClasses = 'fa fa-exclamation-circle error'; + this.usernameInUseMessage = 'Username "$1" is in use!'; + this.loadingIconClasses = 'fa fa-spinner fa-spin'; + this.successIconClasses = 'fa fa-check-circle success'; + this.tooltipPlacement = 'left'; + + this.inputElement = $('#new_user_username'); + this.iconElement = $('<i></i>'); + this.inputElement.parent().append(this.iconElement); + + let debounceTimeout = _.debounce((username) => { + this.validateUsername(username); + }, this.debounceTimeoutDuration); + + this.inputElement.keyup(() => { + this.iconElement.removeClass().tooltip('destroy'); + let username = this.inputElement.val(); + if (username === '') return; + this.iconElement.addClass(this.loadingIconClasses); + debounceTimeout(username); + }); + } + + validateUsername(username) { + $.ajax({ + type: 'GET', + url: `/u/${username}/exists`, + dataType: 'json', + success: (res) => { + if (res.exists) { + this.iconElement + .removeClass().addClass(this.errorIconClasses) + .tooltip({ + title: this.usernameInUseMessage.replace(/\$1/g, username), + placement: this.tooltipPlacement + }); + } else { + this.iconElement + .removeClass().addClass(this.successIconClasses) + .tooltip('destroy'); + } + } + }); + } + } + + global.UsernameValidator = UsernameValidator; +})(window); |