Merge branch 'feature_password_strength_indicator' into 'master'

Add a password strength indicator to SIGN UP and PROFILE pages

Fixes #1647

Added a password strength indicator to the sign up page. You can see how it looks in the following screenshot. In the sign up page, it checks if the password contains the username and alerts the user about it. If the user still wants to proceed with creating his account, nothing will stop him. This is merely a message. The indicator changes the input background color based on the strength like this:

![new_full](https://dev.gitlab.org/uploads/gitlab/gitlabhq/0e6da27cfe/new_full.png)

The password strength indicator can also be found in the profile edit page. It functions in almost the exact same way, with the exception that it doesn't check if the password contains the username.

![edit_full](https://dev.gitlab.org/uploads/gitlab/gitlabhq/f73001539e/edit_full.png)

There are tests included.

/cc @job

See merge request !1227

2 files changed, 57 insertions, 4 deletions

diff --git a/features/profile/profile.feature b/features/profile/profile.feature
index d2125e013bc..d7fa370fe2a 100644
--- a/features/profile/profile.feature
+++ b/features/profile/profile.feature
@@ -83,3 +83,22 @@ Feature: Profile
     Given I visit profile design page
     When I change my code preview theme
     Then I should receive feedback that the changes were saved
+
+  @javascript
+  Scenario: I see the password strength indicator
+    Given I visit profile password page
+    When I try to set a weak password
+    Then I should see the input field yellow
+
+  @javascript
+  Scenario: I see the password strength indicator error
+    Given I visit profile password page
+    When I try to set a short password
+    Then I should see the input field red
+    And I should see the password error message
+
+  @javascript
+  Scenario: I see the password strength indicator with success
+    Given I visit profile password page
+    When I try to set a strong password
+    Then I should see the input field green
\ No newline at end of file
diff --git a/features/steps/profile/profile.rb b/features/steps/profile/profile.rb
index adfaefb1644..6d747b65bae 100644
--- a/features/steps/profile/profile.rb
+++ b/features/steps/profile/profile.rb
@@ -58,16 +58,34 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
 
   step 'I try change my password w/o old one' do
     within '.update-password' do
-      fill_in "user_password", with: "22233344"
+      fill_in "user_password_profile", with: "22233344"
       fill_in "user_password_confirmation", with: "22233344"
       click_button "Save"
     end
   end
 
+  step 'I try to set a weak password' do
+    within '.update-password' do
+      fill_in "user_password_profile", with: "22233344"
+    end
+  end
+
+  step 'I try to set a short password' do
+    within '.update-password' do
+      fill_in "user_password_profile", with: "short"
+    end
+  end
+
+  step 'I try to set a strong password' do
+    within '.update-password' do
+      fill_in "user_password_profile", with: "Itulvo9z8uud%$"
+    end
+  end
+
   step 'I change my password' do
     within '.update-password' do
       fill_in "user_current_password", with: "12345678"
-      fill_in "user_password", with: "22233344"
+      fill_in "user_password_profile", with: "22233344"
       fill_in "user_password_confirmation", with: "22233344"
       click_button "Save"
     end
@@ -76,7 +94,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
   step 'I unsuccessfully change my password' do
     within '.update-password' do
       fill_in "user_current_password", with: "12345678"
-      fill_in "user_password", with: "password"
+      fill_in "user_password_profile", with: "password"
       fill_in "user_password_confirmation", with: "confirmation"
       click_button "Save"
     end
@@ -86,6 +104,22 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
     page.should have_content "You must provide a valid current password"
   end
 
+  step 'I should see the input field yellow' do
+    page.should have_css 'div.has-warning'
+  end
+
+  step 'I should see the input field green' do
+    page.should have_css 'div.has-success'
+  end
+
+  step 'I should see the input field red' do
+    page.should have_css 'div.has-error'
+  end
+
+  step 'I should see the password error message' do
+    page.should have_content 'Your password is too short'
+  end
+
   step "I should see a password error message" do
     page.should have_content "Password confirmation doesn't match"
   end
@@ -146,7 +180,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
 
   step 'I submit new password' do
     fill_in :user_current_password, with: '12345678'
-    fill_in :user_password, with: '12345678'
+    fill_in :user_password_profile, with: '12345678'
     fill_in :user_password_confirmation, with: '12345678'
     click_button "Set new password"
   end