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 */ });