Rule set

  • eight or more characters long
  • a mix of letters, numbers and symbols
  • at least medium strength

Password Type Also contains some help text

Weak Medium Strong
= codeBlender "input", "atom/form/input", { help:  { text: "Enter 8 characters [a-zA-Z0-9]" },
                            icon:  { prepend: "fa-credit-card" },
                            input: { extraClass:      "password-strength form-control",
                                     inputGroupClass: "input-group form-group-password-strength",
                                     name:            "password",
                                     placeholder:     "Enter password",
                                     type:            "password" },
                            label: { title: "Password" },
                            strengthMeter: true }
<div class='form-group' show-errors='{showSuccess: true}'>
<label class='control-label' for='password'>
Password
</label>
<div class='input-group form-group-password-strength'>
<span class='fa fa-credit-card input-group-addon' ng-hide='loading'></span>


<input autocomplete='on' class='form-control password-strength form-control' id='password' name='password' placeholder='Enter password' type='password'>

<span class='input-group-addon'>
<span class='password-strength-container'>
<span class='password-strength-text'>
<span class='password-text weak'>Weak</span>
<span class='password-text medium'>Medium</span>
<span class='password-text strong'>Strong</span>
</span>
<span class='two icon'></span>
</span>
</span>

</div>

<span class='help-block'></span>

</div>


States

Resources Useful websites and tutorials