Added a password strength indicator

to the profile page and the sign_up page, added CSS to best display it and created the custom script to load the meter.

app/assets/javascripts/application.js.coffee

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

app/assets/javascripts/password_strength.js.coffee

+overwritten_messages =
+  wordSimilarToUsername: "Your password should not contain your username"
+
+overwritten_rules =
+  wordSequences: false
+  
+$(document).ready ->
+  profileOptions = {}
+  profileOptions.ui =
+    container: "#password-strength"
+    showVerdictsInsideProgressBar: true
+    showPopover: true
+    showErrors: true
+    errorMessages: overwritten_messages
+  profileOptions.rules =
+    activated: overwritten_rules
+
+  signUpOptions = {}
+  signUpOptions.common =
+    usernameField: "#user_username"
+  signUpOptions.ui =
+    container: "#password-strength"
+    showPopover: true
+    showErrors: true
+    showVerdicts: false
+    showProgressBar: false
+    showStatus: true
+    errorMessages: overwritten_messages
+  signUpOptions.rules =
+    activated: overwritten_rules
+
+  $("#user_password").pwstrength profileOptions
+  $("#user_password_sign_up").pwstrength signUpOptions

app/assets/stylesheets/sections/profile.scss

@@ -111,3 +111,12 @@
     height: 50px;
   }
 }
+
+//CSS for password-strength indicator
+#password-strength {
+  margin-bottom: 0;
+}
+
+.progress {
+  margin-top: 10px;
+}

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

@@ -2,7 +2,7 @@
   .login-heading
     %h3 Sign up
   .login-body
-    = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+    = form_for(resource, as: resource_name, url: registration_path(resource_name), role: 'form') do |f|
       .devise-errors
         = devise_error_messages!
       %div
@@ -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

@@ -21,7 +21,7 @@
           %div
             = link_to "Forgot your password?", reset_profile_password_path, method: :put
 
-      .form-group
+      .form-group#password-strength
         = f.label :password, 'New password', class: 'control-label'
         .col-sm-10
           = f.password_field :password, required: true, class: 'form-control'