simple_form_password_with_hints

A nice improvement for the password fields in Simple Form.

Simple Form Password With Hints aims to add directs (javascript) controls to your password fields in Simple Form.

Add it to your Gemfile:

gem 'simple_form_password_with_hints'

Run the following command to install it:

bundle install

Add it to your application.sass:

@import 'simple_form_password_with_hints'

Add it to your application.js:

//= require simple_form_password_with_hints

Simple Form Password With Hints relies on the Bootstrap markup, so it presumes that you installed Simple Form with the Bootstrap option. To do that you have to use the bootstrap option in the Simple Form install generator, like this:

rails generate simple_form:install --bootstrap

You have to be sure that you added a copy of the Bootstrap assets on your application.

Simple Form Password With Hints comes with two new input types. One is meant to replace the standard :password field: :password_with_hints. The second one is meant to replace the :password_confirmation field: :password_with_sync.

To start using Simple Form Password With Hints you just have to change the input type of the :password / :password_confirmation fields.

So basically your field:

<%= f.input :password %>

becomes

<%= f.input :password,
            as: :password_with_hints,  
            validators: {
              length: 6,
              uppercase_char: true,
              lowercase_char: true,
              numeric_char: true,
              special_char: '#&@?!'
            } %>

and your field

<%= f.input :password_confirmation %>

becomes

<%= f.input :password_confirmation,
            as: :password_with_sync,  
            compare_with_field: :password %>

For both kind of fields you can add an option allow_password_uncloaking: true which will add an eye on the right side of the field. Clicking on the eye will toggle the visibility of the password field between stars (******) and text (Mypassword!).

Of course you can add every other current option to your fields.

For :password_with_hints field you can safely ignore every validator you don't want to use. Just set the test to false or delete the line.

Please keep in mind that the controls are only indicatives, and don't prevent to submit the fields, even when all checks are not filled. So you will have to ensure of the password complexity in the model file. Basically in your User model you will have to add a test like this:

validate :password_complexity

def password_complexity
  # Regexp extracted from https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a
  return if password.blank? || password =~ /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!,@$%^&*+£µ-]).{8,70}$/
  errors.add :password, 'Your password is not strong enough'
end

This regex matches the validators:

validators: {
  length: 8,
  uppercase_char: true,
  lowercase_char: true,
  numeric_char: true,
  special_char: '#?!,@$%^&*+£µ-'
}

If you use Devise you might want to use the gem setup directly. And maybe add the special chars list in the configuration. So in you config/application.rb you might add config.allowed_special_chars = '#?!,@$%^&*+£µ-'. And then your regex in the model file should look like that:

/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#{Rails.application.config.allowed_special_chars}]).{#{Devise.password_length.first},#{Devise.password_length.last}}$/

and the validator:

validators: {
  length: Devise.password_length.first,
  uppercase_char: true,
  lowercase_char: true,
  numeric_char: true,
  special_char: Rails.application.config.allowed_special_chars
}

Simple Form With Hints uses the I18n API to manage the texts displayed. Feel free to overwrite the keys or add languages.

We intend to maintain support for all Ruby / Rails versions that haven't reached end-of-life.

For more information about specific versions please check Ruby and Rails maintenance policies, and our test matrix.

If you discover any bugs, feel free to create an issue on GitHub. Please add as much information as possible to help us in fixing the potential bug. We also encourage you to help even more by forking and sending us a pull request.

https://github.com/noesya/simple_form_password_with_hints/issues

• Pierre-André Boissinot (https://github.com/pabois)

MIT License.