Updated validation error UI to be in line with the improved login/signup page in #13937

62005593 · Luke Bennett · eab157f5 · 62005593 · 62005593 · 62005593
--- a/app/assets/javascripts/username_validator.js.es6
+++ b/app/assets/javascripts/username_validator.js.es6
@@ -12,37 +12,27 @@
      this.iconElement  = $('<i></i>');
      this.inputElement.parent().append(this.iconElement);

-      let debounceTimeout = _.debounce((username) => {
+      const debounceTimeout = _.debounce((username) => {
        this.validateUsername(username);
      }, debounceTimeoutDuration);

      this.inputElement.keyup(() => {
-        this.iconElement.removeClass().tooltip('destroy');
-        let username = this.inputElement.val();
+        this.iconElement.removeClass();
+        const username = this.inputElement.val();
        if (username === '') return;
-        this.iconElement.addClass(loadingIconClasses);
        debounceTimeout(username);
      });
    }

    validateUsername(username) {
+      this.iconElement.addClass(loadingIconClasses);
      $.ajax({
        type: 'GET',
        url: `/u/${username}/exists`,
        dataType: 'json',
        success: (res) => {
-          if (res.exists) {
-            this.iconElement
-              .removeClass().addClass(errorIconClasses)
-              .tooltip({
-                title: usernameInUseMessage.replace(/\$1/g, username),
-                placement: tooltipPlacement
-              });
-          } else {
-            this.iconElement
-              .removeClass().addClass(successIconClasses)
-              .tooltip('destroy');
-          }
+          this.iconElement.removeClass();
+          if (res.exists) this.inputElement.addClass('validation-error');
        }
      });
    }

--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -71,12 +71,10 @@
        position: absolute;
        right: 8px;
        top: 12px;
-        &.success {
-          color: $green-normal;
-        }
-        &.error {
-          color: $red-normal;
-        }
+      }
+      .validation-error {
+        border: 1px solid $red-normal;
+        box-shadow: 0 0 3px $red-normal;
      }
    }
  }

--- a/spec/features/users_spec.rb
+++ b/spec/features/users_spec.rb
@@ -50,18 +50,16 @@
      @username_field = find '.username'
    end

-    scenario 'shows an error icon if the username already exists' do
+    scenario 'shows an error border if the username already exists' do
      fill_in username_input, with: user.username
-      expect(@username_field).to have_css loading_icon
      wait_for_ajax
-      expect(@username_field).to have_css '.fa.error'
+      expect(@username_field).to have_css '.validation-error'
    end

-    scenario 'shows a success icon if the username is available' do
+    scenario 'doesn\'t show an error border if the username is available' do
      fill_in username_input, with: 'new-user'
-      expect(@username_field).to have_css loading_icon
      wait_for_ajax
-      expect(@username_field).to have_css '.fa.success'
+      expect(@username_field).not_to have_css '.validation-error'
    end
  end