Password Strength
Add a password strength meter to a password input.
Usage
To apply this component, add a class of f-strength-container
to the parent element of the input and a data-f-password-strength
attribute to the password input you would like to use it on. The component creates some HTML around your input to hold all of the relevant DOM nodes.
Example
Markup
<form method="post" action="" class="f-form f-form-horizontal">
<div class="f-form-row">
<label class="f-form-label" for="myPassword">Type a test password</label>
<div class="f-form-controls f-strength-container">
<input type="password" id="myPassword" class="f-width-1-1" name="test_password" data-f-password-strength>
</div>
</div>
</form>
Progress Component
This component can use styles from the progress component. Simply include the progress CSS /assets/styles/css/components/progress.css
. If you would then like animated or striped progress bars you can set the options on your input: progressStriped : true
and progressAnimated : true
.
Example
Markup
<form method="post" action="" class="f-form f-form-horizontal">
<div class="f-form-row">
<label class="f-form-label" for="myPassword">Type a test password</label>
<div class="f-form-controls f-strength-container">
<input type="password" id="myPassword" class="f-width-1-1" name="test_password" data-f-password-strength="{progressStriped:true,progressAnimated:true}">
</div>
</div>
</form>
Verbose Messaging
By Default this component has verbose message output to let the user know why their password might be considered bad/good. This can be turned off by setting verbose
and verboseSuccess
to false when setting the options.
To set the element the messaging appears in set verboseElement
to a selector.
Example
Markup
<form method="post" action="" class="f-form f-form-horizontal">
<div class="f-form-row">
<label class="f-form-label" for="myPassword">Type a test password</label>
<div class="f-form-controls f-strength-container">
<input type="password" id="myPassword" class="f-width-1-1" name="test_password" data-f-password-strength="{verbose:false,verboseSuccess:false}">
</div>
</div>
</form>
Example with Verbose Element
Verbose Output
Markup
<div class="f-grid f-grid-width-medium-1-2">
<div>
<form method="post" action="" class="f-form f-form-large">
<div class="f-form-row">
<label class="f-form-label">Type a test password</label>
<div class="f-form-controls f-strength-container">
<input type="password" class="f-width-1-1" name="test_password" data-f-password-strength="{verboseElement:'.verbose-output'}">
</div>
</div>
</form>
</div>
<div>
<div class="f-panel f-panel-box">
<h3>Verbose Output</h3>
<div class="verbose-output"></div>
</div>
</div>
</div>
Time To Crack
If you would like to display the time to crack after the verbose output add the option showTimeData
to your data-f-password-strength
attribute.
If you only want to show the time to crack, set verbose
to false
and set verboseElement
to the selector of the element you would like the messages to appear in.
Example
Markup
<form method="post" action="" class="f-form f-form-horizontal">
<div class="f-form-row">
<label class="f-form-label" for="myPassword">Type a test password</label>
<div class="f-form-controls f-strength-container">
<input type="password" id="myPassword" class="f-width-1-1" name="test_password" data-f-password-strength="{verbose:false,verboseElement:'.time-element',showTimeData:true}">
<div class="time-element"></div>
</div>
</div>
</form>
Circular Output
To create a nice circular output to the right of the input just add circle: true
in the options. This will override the other display options.
Please note: Some of the colours in this are hard-coded in the JavaScript. You can override them but you'll have to pass a colours object such as:
colours: {
"vweak" : "#ea8",
"weak" : "#eec290",
"okay" : "#ed9",
"medium:" : "#ccc68d",
"strong" : "#bb8"
}
Example
Markup
<form method="post" action="" class="f-form f-form-horizontal">
<div class="f-form-row">
<label class="f-form-label" for="myPassword">Type a test password</label>
<div class="f-form-controls f-strength-container">
<input type="password" id="myPassword" class="f-width-1-1" name="test_password" data-f-password-strength="{circle:true}">
</div>
</div>
</form>
Banned Word List
There is an optional file called password-strength-banlist.min.js
, which contains the top 10,000 most used passwords. If you would like to add this component to the password strength functionality you simply need to include the file before the password-strength.min.js
file.
Please note: The size of this file is quite large, which is why it was not included by default. Compressed it is 72kb.
Markup
<script src="/assets/scripts/components/min/password-strength-banlist.min.js"></script>
<script src="/assets/scripts/components/min/password-strength.min.js"></script>
JavaScript options
This is an example of how to set options via attribute:
<input type="password" data-f-password-strength="{strengthLabel:'Strength: ',progressStriped:true,progressAnimated:true}">
Option | Possible value | Default | Description |
---|---|---|---|
strengthLabel |
any string | Strength: | Text to show before the strength |
strengthScaleFactor |
integer | 1 | Change this to up the strength scale |
banMode |
strict, loose | strict | Change how banned words are checked |
verbose |
boolean | true | Output warnings and recommendations |
verboseSuccess |
boolean | true | Output successful messages for good passwords |
verboseElement |
string | false | If you would like to put the verbose output somewhere add a selector here |
lang |
object | { none: 'n/a', veryweak: 'very weak', weak: 'weak', okay: 'okay', medium: 'medium', strong: 'strong' } | Coming soon, custom languages for output messages |
showTimeData |
boolean | false | Output time to crack the password |
progressStriped |
boolean | false | Include the progress component CSS and set this to true to style like a progress bar |
progressAnimated |
boolean | false | Include the progress component CSS and set this to true to animate progress bar |
strengthClass |
string | f-strength-input | class applied to element |
strengthMeterClass |
string | f-strength-meter | class applied to element |
strengthButtonClass |
string | f-strength-show | class applied to element |
strengthButtonText |
string | <i class="material-icons">visibility</i> | class applied to element |
strengthButtonTextToggle |
string | <i class="material-icons">visibility_off</i> | class applied to element |
circle |
boolean | false | outputs circular widget displaying password strength |
colours |
object | { "vweak" : "#ea8", "weak" : "#eec290", "okay" : "#ed9", "medium:" : "#ccc68d", "strong" : "#bb8" } | sets the colours used on the component |
Init element manually
let objPassword = FatKit.passwordStrength(element, { /* options */ });