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

app/assets/javascripts/application.js.coffee

@@ -18,6 +18,7 @@
 #= require jquery.turbolinks
 #= require turbolinks
 #= require bootstrap
+#= require password_strength
 #= require select2
 #= require raphael
 #= require g.raphael-min

app/assets/javascripts/password_strength.js.coffee

+#= require pwstrength-bootstrap-1.2.2
+overwritten_messages =
+  wordSimilarToUsername: "Your password should not contain your username"
+
+overwritten_rules =
+  wordSequences: false
+
+options =
+  showProgressBar: false
+  showVerdicts: false
+  showPopover: true
+  showErrors: true
+  showStatus: true
+  errorMessages: overwritten_messages
+  
+$(document).ready ->
+  profileOptions = {}
+  profileOptions.ui = options
+  profileOptions.rules =
+    activated: overwritten_rules
+
+  deviseOptions = {}
+  deviseOptions.common =
+    usernameField: "#user_username"
+  deviseOptions.ui = options
+  deviseOptions.rules =
+    activated: overwritten_rules
+
+  $("#user_password_profile").pwstrength profileOptions
+  $("#user_password_sign_up").pwstrength deviseOptions
+  $("#user_password_recover").pwstrength deviseOptions

app/assets/stylesheets/sections/profile.scss

@@ -111,3 +111,20 @@
     height: 50px;
   }
 }
+
+//CSS for password-strength indicator
+#password-strength {
+  margin-bottom: 0;
+}
+
+.has-success input {
+  background-color: #D6F1D7 !important;
+}
+
+.has-error input {
+  background-color: #F3CECE !important;
+}
+
+.has-warning input {
+  background-color: #FFE9A4 !important;
+}

app/views/devise/passwords/edit.html.haml

@@ -6,8 +6,8 @@
       .devise-errors
         = devise_error_messages!
       = f.hidden_field :reset_password_token
-      %div
-        = f.password_field :password, class: "form-control top", placeholder: "New password", required: true
+      .form-group#password-strength
+        = f.password_field :password, class: "form-control top", id: "user_password_recover", placeholder: "New password", required: true
       %div
         = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm new password", required: true
       .clearfix.append-bottom-10

app/views/devise/registrations/new.html.haml

@@ -11,8 +11,8 @@
         = f.text_field :username, class: "form-control middle", placeholder: "Username", required: true
       %div
         = f.email_field :email, class: "form-control middle", placeholder: "Email", required: true
-      %div
-        = f.password_field :password, class: "form-control middle", placeholder: "Password", required: true
+      .form-group#password-strength
+        = f.password_field :password, class: "form-control middle", id: "user_password_sign_up", placeholder: "Password", required: true
       %div
         = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm password", required: true
       %div

app/views/profiles/passwords/edit.html.haml

@@ -24,7 +24,7 @@
       .form-group
         = f.label :password, 'New password', class: 'control-label'
         .col-sm-10
-          = f.password_field :password, required: true, class: 'form-control'
+          = f.password_field :password, required: true, class: 'form-control', id: 'user_password_profile'
       .form-group
         = f.label :password_confirmation, class: 'control-label'
         .col-sm-10

app/views/profiles/passwords/new.html.haml

@@ -16,7 +16,7 @@
     .col-sm-10= f.password_field :current_password, required: true, class: 'form-control'
   .form-group
     = f.label :password, class: 'control-label'
-    .col-sm-10= f.password_field :password, required: true, class: 'form-control'
+    .col-sm-10= f.password_field :password, required: true, class: 'form-control', id: 'user_password_profile'
   .form-group
     = f.label :password_confirmation, class: 'control-label'
     .col-sm-10

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

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

spec/features/users_spec.rb

@@ -11,7 +11,7 @@ describe 'Users', feature: true do
       fill_in "user_name", with: "Name Surname"
       fill_in "user_username", with: "Great"
       fill_in "user_email", with: "name@mail.com"
-      fill_in "user_password", with: "password1234"
+      fill_in "user_password_sign_up", with: "password1234"
       fill_in "user_password_confirmation", with: "password1234"
       expect { click_button "Sign up" }.to change {User.count}.by(1)
     end