LVD-FluentUi-PasswordRecoveryBox

A ReactJS password recovery box built using the FluentUI library, comprised of two steps:

password identification step - user provides some sort of identification to kick of the process;
password change step - user enters a new password, after a password recovery link has been sent to the user's e-mail address.

For the password change step, the LVD-FluentUi-PasswordChangeBox is used, to which all its documented props are forwarded.

Here's a set screenshots of how it all looks like using the default styling:

Installation

npm install --save lvd-fluentui-passwordrecoverybox

Demo

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

For step 1, use test@email.com to advance to next step. Any other value will display an error message.
On the second step, enter any password you like.

Basic Usage

Handling the first step of the password recovery process:

import React from 'react';
import { PasswordRecoveryBox, PasswordRecoverySteps } from 'lvd-fluentui-passwordrecoverybox';

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

		this._handlePasswordRecoveryInitiationValuesChanged = 
			this._handlePasswordRecoveryInitiationValuesChanged.bind(this);
		this._handlePasswordRecoveryInitiationRequested =
			this._handlePasswordRecoveryInitiationRequested.bind(this);
	}

	_handlePasswordRecoveryInitiationValuesChanged(oldValues, newValues) {
		//do something, if desired
	}

	_handlePasswordRecoveryInitiationRequested(newValues) {
		//lookup identification, send recovery link if valid
	}

	render() {
		return (
			<PasswordRecoveryBox 
				step={PasswordRecoverySteps.CollectUserIdentifier}
				messageProps={/* use this to display a message after processing */}
				onPasswordRecoveryInitiationValuesChanged={this._handlePasswordRecoveryInitiationValuesChanged}
				onPasswordRecoveryInitiationRequested={this._handlePasswordRecoveryInitiationRequested}
			/>
		);
	}
}

Handling the second step of the password recovery process:

import React from 'react';
import { PasswordRecoveryBox, PasswordRecoverySteps } from 'lvd-fluentui-passwordrecoverybox';

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

		this._handlePasswordChangeValuesChanged = 
			this._handlePasswordChangeValuesChanged.bind(this);
		this._handlePasswordChangeRequested = 
			this._handlePasswordChangeRequested.bind(this);
	}

	_handlePasswordChangeValuesChanged(oldValues, newValues) {
		//do something, if desired
	}

	_handlePasswordChangeRequested(values) {
		//validate and change new password
	}

	render() {
		return (
			<PasswordRecoveryBox 
				step={PasswordRecoverySteps.EnterNewPassword}
				messageProps={/* use this to display a message after processing */}
				onPasswordChangeValuesChanged={this._handlePasswordChangeValuesChanged}
				onPasswordChangeRequested={this._handlePasswordChangeRequested}
			/>
		);
	}
}

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-passwordrecoverybox/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

Forwarded APIs

For convenience, the following API artefacts are forwarded from the underlying password change box component (which itself, forwards them from the underyling password box component):

PasswordCallbackRule,
PasswordRegexRule,
PasswordEvaluator,
PasswordLengthRule,
PasswordStrengthIndicator,
StrengthIndicatorStyles,
PasswordStrengthLevels,
getAllAvailableLevels,
getAvailableLevelCount.

Customization Options

What	Prop Name	Type	Notes
Disable component	`disabled`	`boolean`	Cascades to all fields and buttons. Defaults to `false`.
Configure whether to use framed container layout or not	`framed`	`boolean`	If `true`, it will display the default shadow-box frame. Defaults to `true`.
Configure whether to use built-in fixed-width container layout or not	`fixed`	`boolean`	If `true`, it will set the container width to the default width of `600px`. Defaults to `true`.
Configure whether to center the container or not	`centered`	`boolean`	If `true`, it will attempt to center the container. Defaults to `true`.
Set additional master container css class name	`className`	`string`	Defaults to `null`.
Set additional master inline css style properties	`style`	`object`	Key-value plain javascript object. Defaults to `{}`.
Make component readonly	`readOnly`	`boolean`	Cascades to all fields. Defaults to `false`. Can be overridden at step level.
Display fields in underlined style.	`underlined`	`boolean`	Defaults to `false`. Can be overridden at step level.
Message	`messageProps`	`Message Object`	See below. By default no message is shown.
Current step	`step`	`PasswordRecoverySteps`	What is the currently active step. Defaults to `PasswordRecoverySteps`.`CollectUserIdentifier`, which is the first step. See below for available values.
Customize the first step	`step1Props`	`User Identification Customization Object`	See below.
Customize the second step	`step2Props`	`Password Change Box Customization Object`	All the properties supported by the underlying password change box, with the exception of `framed`, `centered` and `fixed`, which are set to false. See here for default values provided by this component.
Customize the back button	`backActionButtonProps`	`Back Button Customization Object`	Can be used to customize the back button for both steps. Can be overridden at step level. See below.

Message Object

A plain javascript object with the following properties:

Name	Type	Notes
`message`	`string`	The actual message to be displayed. Defaults to `null` if not specified.
`type`	`PasswordRecoveryBoxMessageType`	Type of message - used for formatting (error, warning etc.). Defaults to `null` if not specified. See here for all supported values.

Example:

<PasswordRecoveryBox 
	...
	messageProps={{
		message: "The existing password you entered was invalid",
		type: PasswordRecoveryBoxMessageType.error
	}}
	...
/>

Steps

The following steps are available.

Name	Usage	Notes
Collect user identification data	`PasswordRecoverySteps.CollectUserIdentifier`	First step
Collect new user password information data	`PasswordRecoverySteps.EnterNewPassword`	Second step

Example:

<PasswordRecoveryBox 
	...
	step={PasswordRecoverySteps.EnterNewPassword}
	...
/>

User Identification Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
`className`	`string`	Set additional container class name. Defaults to `null`.
`style`	`object`	Set additional container inline css style properties. Key-value plain javascript object. Defaults to `{}`.
`userIdentifierProps`	`User Identifier Customization Object`	Configure user identifier field. See below.
`titleProps`	`Title Customization Object`	Configure title. See below. Title defaults to `Password recovery - Identify yourself`.
`passwordRecoveryInitiationButtonProps`	`Password Recovery Initiation Button Configuration Object`	Configure the password recovery initiation button. See below.
`backActionButtonProps`	`Back Button Customization Object`	Configure the back button. See below.

Example:

<PasswordRecoveryBox 
	...
	step1Props={{
		className: 'x-class-step1',
		userIdentifierProps: {
			label: 'We need your e-mail',
			description: 'You will receive a password recovery link and further instructions to this e-mail, if valid.'
		}
	}}
	...
/>

User Identifier Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
`label`	`string`	Field label. Defaults to `E-mail address:`.
`placeholder`	`string`	Field placeholder. Defaults to `Please fill in your e-mail address`.
`description`	`string`	Field descriptive text, displayed below the field. Defaults to empty string.
`emptyErrorMessage`	`string`	Error message displayed when the field is left empty. Defaults to `You must fill in your e-mail address`.

Title Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
`show`	`boolean`	Defaults to `true` if not specified.
`text`	`string`	Defaults depending on the current step if not specified or empty.

Password Recovery Initiation Button Configuration Object

A plain javascript object with the following properties:

Name	Type	Notes
`label`	`string`	Defaults to `Recover my password`.

Back Button Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
`label`	`string`	Defaults to `Back to log-in` for both steps.
`show`	`boolean`	Whether to show the button or not. Defaults to `true`.
`position`	`BackButtonPositions`	Defaults to `BackButtonPositions.left`. See here for all supported values.

Example:

<PasswordRecoveryBox 
	...
	backActionButtonProps={{
		label: 'Back to log-in',
		show: true,
		//align back button to the far-right of the container
		position: BackButtonPositions.right 
	}}
	...
/>

User Identification Values Object

The user identification values are exported as a plain javascript object with the following properties:

Name	Type	Notes
`userIdentifier`	`string`	-

Password Change Values Object

Same as here.

Events

Event	Prop Name	Arguments	Notes
User identfication values changed - Step 1	`onPasswordRecoveryInitiationValuesChanged`	(`oldValues`:`User Identification Values Object`, `newValues`:`User Identification Values Object`)	Triggered whenerver any of fields from Step 1 changes.
Password recovery initation requested - Step 1	`onPasswordRecoveryInitiationRequested`	(`User Identification Values Object`)	Trigered whenever the `Recovery my password` button is clicked
Navigate back from Step 1	`onBackFromPasswordRecoveryInitiationRequested`	(`User Identification Values Object`)	Triggered whenever the `Back` button is clicked when Step 1 is active.
Password change values changed - Step 2	`onPasswordChangeValuesChanged`	(`oldValues`:`Password Change Values Object`, `newValues`:`Password Change Values Object`)	Triggered whenever any of the values from Step 2 changes.
Password change requested - Step 2	`onPasswordChangeRequested`	(`Password Change Values Object`)	Triggered whenever the `Change my password` button is clicked
Navigate back from Step 2	`onBackFromPasswordChangeRequested`	(`Password Change Values Object`)	Triggered whenever the `Back` button is clicked when Step 2 is active.
Component initialized	`onPasswordRecoveryBoxInitiatlized`	(`none`)	Triggered when the component is mounted by `React`.
Component disposed	`onPasswordRecoveryBoxDisposed`	(`none`)	Triggered when the component is un-mounted by `React`.

GitHub

https://github.com/alexboia/LVD-FluentUi-PasswordRecoveryBox