Password Score

‹ Back

Requires the zxcvbn gem, and this line to be added to your core.js:
//= require zxcvbn-async

Without zxcvbn, it will operate in demo mode as you can see here, which will return a random score on field change.

Be aware if you are using zxcvbn-ruby for server-side validation that the JS and ruby implementations have different results.

<div class="control-group password required test_form_password_score form--medium" data-password-score=""><div class="control-group--label"><label class="password required control-label" for="test_form_password_score"><abbr title="required">*</abbr> Password score</label></div><div class="controls"><input class="password required" required="required" aria-required="true" type="password" name="test_form[password_score]" id="test_form_password_score" /></div></div>
<%= f.input :password_score, wrapper_html: { class: "form--medium", data: { password_score: "" } } %>

You can customise the label under the field by using data-password-score-label. Here's an example with a custom label, using one of the form sizing classes and the password revealer for good measure.

<div class="control-group password required test_form_password_score_custom form--medium" data-password-score="" data-password-score-label="&lt;(&#39;.&#39; &lt;)"><div class="control-group--label"><label class="password required control-label" for="test_form_password_score_custom"><abbr title="required">*</abbr> Password score custom</label></div><div class="controls"><input data-password-reveal="" class="password required" required="required" aria-required="true" type="password" name="test_form[password_score_custom]" id="test_form_password_score_custom" /></div></div>
<%= f.input :password_score_custom, wrapper_html: { class: "form--medium", data: { password_score: "", password_score_label: "<('.' <)" } }, input_html: { data: { password_reveal: "" } } %>

Password score comes with a helper to test if zxcbvn is available: Ornament.C.FormPasswordScore.hasZxcvbn

You can rebind password scores if you need to, for example if the form has been ajaxed in, with Ornament.C.FormPasswordScore.init()