Updated validation error UI to be in line with the improved login/signup page in #13937lbennett/gitlab-ce-registration-check-username-in-use-ajax

3 files changed, 14 insertions, 28 deletions

diff --git a/app/assets/javascripts/username_validator.js.es6 b/app/assets/javascripts/username_validator.js.es6
index 7d096d1adf7..9ec9764a27f 100644
--- 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');
         }
       });
     }
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 042b17b865a..f997d415ff9 100644
--- 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;
       }
     }
   }
diff --git a/spec/features/users_spec.rb b/spec/features/users_spec.rb
index 7630d299349..a0b24571ea4 100644
--- a/spec/features/users_spec.rb
+++ b/spec/features/users_spec.rb
@@ -50,18 +50,16 @@ feature 'Users', feature: true, js: true do
       @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