lvd-fluentui-passwordbox v0.0.5

LVD-FluentUi-PasswordBox

A ReactJS password box built using the FluentUI library. It features a basic structure, with some additional features:

• a strength indicator which can be set to one of the three avaialble different flavours;
• a password status callout bubble, which shows the strength rules the password must meet and which have been met thus far.

Additionally, it exposes some of the customization options which are available for the standard FluentUI TextInput field.

Here's a static screenshot of how it all looks like using the default styling:

And also an animated gif which shows how it all respons to user input:

Contents

1. Installation
2. Demo
3. Basic Usage
4. Styling
5. Building
6. Customization Options
7. Computing password strength levels
8. Events
9. Changelog
10. Donate

Installation

npm install --save lvd-fluentui-passwordbox

Demo

The demo directory contains a compiled and ready-to-run example. Just open up the index.html file.

Basic Usage

import React from 'react';
import { PasswordBox, 
	StrengthIndicatorStyles } from 'lvd-fluentui-passwordbox';

class SomePasswordPage extends React.Component {
	constructor(props) {
		super(props);

		this._handlePasswordChanged =
			this._handlePasswordChanged.bind(this);
	}

	_handlePasswordChanged(oldValue, newValue) {
		// For instance, compute strength level or password rules
		//	See below for a built-in API to do that (though it's not mandatory)
	}

	render() {
		const strengthLevel = /* fetch or compute strength level from somehwere */;
		const strengthLevelText = /* fetch or compute strength level text from somehwere */;
		const rules = /* fetch or compute password rules from somewhere */;

		return (
			<PasswordBox 
				label="Your password, please"
				placeholder="Please fill in your new password"
				canReveal={true}
				required={true}
				underlined={true}
				emptyErrorMessage="The password is required, whether you like it or not!"
				passwordStrengthProps={{
					style: StrengthIndicatorStyles.intermittentBar,
					level: strengthLevel,
					text: strengthText
				}}
				passwordRulesProps={{
					rules: rules
				}}
				onPasswordChanged={this._handlePasswordChanged}
			/>
		);
	}
}

You can find a full working example here.

Styling

You can either directly include the dist/style.css into your html web page or use the @import directive inside your stylesheet if building using webpack:

@import '~lvd-fluentui-passwordbox/dist/style.css';

Also see the component itself.

Building

To build the demo application:

npm run build-app

To build the library:

npm run build-dist

To build both in one sitting:

npm run build

Customization Options

All the default values are defined here.

Password Strength Object

A plain javascript object with the following properties:

Password Strength Levels

The following strength levels are available, fixed and may not be changed:

Strength Indicator Styles

The following styles are available:

Password Rules Information Object

A plain javascript object with the following properties:

Rule Evaluation Result Object

A plain javascript object with the following properties:

Password Information Callout Container Properties Object

These are the properties that are applied to the callout container itself. A plain javascript object with the following properties:

These properties mirror their corresponding properties described for the FluentUI Callout component.

Password Information Callout Title Properties Object

These are the properties that are applied to the callout title. A plain javascript object with the following properties:

These properties mirror their corresponding properties described for the FluentUI Text component.

Password Information Callout Icons Properties Object

These properties describe various icons used for rendering the password rules. A plain javascript object with the following properties:

Please see the supported FluentUI icons.

Computing password strength levels

It is up to you how you compute the password strength level, just as long you provide one of the values described above.

However, for your convenience there's an API that you can use to do so:

• define your rules using by creating instances of: - PasswordCallbackRule; - PasswordLengthRule; - PasswordRegexRule.
• feed these rules to the built-in password evaluator.

Here's an example, similar to the one built-in the demo application:

import { PasswordEvaluator, 
	PasswordCallbackRule, 
	PasswordLengthRule } 
from 'lvd-fluentui-passwordbox';

function _hasLowercaseLetters(password) {
	return !!password.match(/[a-z]+/);
}

function _hasUppercaseLetters(password) {
	return !!password.match(/[A-Z]+/);
}

function _hasNumbers(password) {
	return !!password.match(/[0-9]+/);
}

function _hasNonAlphaNumericCharacters(password) {
	return !!password.match(/[^a-zA-Z0-9]+/);
}

function _getRules() {
	return [
		new PasswordLengthRule(8),
		new PasswordCallbackRule(_hasLowercaseLetters, 
			'Must contain lowercase letters'),
		new PasswordCallbackRule(_hasUppercaseLetters, 
			'Must contain uppercase letters'),
		new PasswordCallbackRule(_hasNumbers, 
			'Must contain numbers'),
		new PasswordCallbackRule(_hasNonAlphaNumericCharacters, 
			'Must contain non-alphanumeric characters')
	];
}

export function evaluatePassword(password) {
	const evaluator = new PasswordEvaluator(_getRules());
	return evaluator.evaluatePassword(password);
}

You may also create your own password rules objects, just as long as they provide:

• an evaluate(input) method, that returns true if the password satisfies the rule or false otherwise;
• a name property, that describes the rule - will be displayed to the user.

Events

Changelog

Version 0.0.5

• Updated type definitions.

Version 0.0.4

• Added type definitions.

Version 0.0.3

• A descriptive text can now be displayed below the text field input, using the description prop;
• Can now listen for the text field input focus event using the onFocus prop;
• Can now listen for the text field input blur event using the onBlur prop.

Donate

I put some of my free time into developing and maintaining this plugin. If helped you in your projects and you are happy with it, you can...