Commit 3d705131 authored by Patricio Cano's avatar Patricio Cano

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.
parent d9aa3f92
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
#= require jquery.turbolinks #= require jquery.turbolinks
#= require turbolinks #= require turbolinks
#= require bootstrap #= require bootstrap
#= require pwstrength-bootstrap-1.2.2
#= require password_strength
#= require select2 #= require select2
#= require raphael #= require raphael
#= require g.raphael-min #= require g.raphael-min
......
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
...@@ -111,3 +111,12 @@ ...@@ -111,3 +111,12 @@
height: 50px; height: 50px;
} }
} }
//CSS for password-strength indicator
#password-strength {
margin-bottom: 0;
}
.progress {
margin-top: 10px;
}
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.login-heading .login-heading
%h3 Sign up %h3 Sign up
.login-body .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-errors
= devise_error_messages! = devise_error_messages!
%div %div
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
= f.text_field :username, class: "form-control middle", placeholder: "Username", required: true = f.text_field :username, class: "form-control middle", placeholder: "Username", required: true
%div %div
= f.email_field :email, class: "form-control middle", placeholder: "Email", required: true = f.email_field :email, class: "form-control middle", placeholder: "Email", required: true
%div .form-group#password-strength
= f.password_field :password, class: "form-control middle", placeholder: "Password", required: true = f.password_field :password, class: "form-control middle", id: "user_password_sign_up", placeholder: "Password", required: true
%div %div
= f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm password", required: true = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm password", required: true
%div %div
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
%div %div
= link_to "Forgot your password?", reset_profile_password_path, method: :put = 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' = f.label :password, 'New password', class: 'control-label'
.col-sm-10 .col-sm-10
= f.password_field :password, required: true, class: 'form-control' = f.password_field :password, required: true, class: 'form-control'
......
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment