LVD-FluentUi-PasswordChangeBox

Background music: Gary Moore - The Loner - Live at Hammersmith Odeon.

A ReactJS password change box built using the FluentUI library. It features a basic structure with some options to customize the overall structure and layout:

• one can opt to also require that the user enter the existing password;
• one can opt between a couple of layout variations: fixed or fluid, framed (that is, within a rectangle drawn using a discrete shadow) or un-framed and center or un-centered.

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

Contents

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

Installation

npm install --save lvd-fluentui-passwordchangebox

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 { PasswordChangeBox } from 'lvd-fluentui-passwordchangebox';

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

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

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

	_handlePasswordChangeRequested(values) {
		//save new password
	}

	_handleBackRequested(values) {
		//navigate to wherever the user initially came from
	}

	render() {
		return (
			<PasswordChangeBox 
				onPasswordChangeValuesChanged={this._handlePasswordChangeValuesChanged}
				onPasswordChangedRequested={this._handlePasswordChangeRequested}
				onBackRequested={this._handleBackRequested}
			/>
		);
	}
}

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

From version 0.0.3 onwards, for convenience, the following API artefacts are forwarded from the underlying 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 container css class name	className	string	Defaults to null.
Set additional container 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.
Display fields in underlined style.	underlined	boolean	Defaults to false.
Allow user to reveal password	canReveal	boolean	Defaults to true
Whether or not to require existing password	requireExistingPassword	boolean	Defaults to true
Component title	titleProps	Title Customization Object	See below.
Message	messageProps	Message Object	See below. By default no message is shown.
Customize the existing password field	existingPasswordProps	Existing Password Customization Object	Only used when requireExistingPassword={true}. See below.
Customize the new password field	newPasswordProps	New Password Customization Object	See below.
Customize the password confirmation field	confirmNewPasswordProps	Confirm New Password Customization Object	See below.
Customize change password button	passwordChangeButtonProps	Change Password Button Customization Object	See below.
Customize the back button	backActionButtonProps	Back Button Customization Object	See below.

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 to Change password if not specified or empty.

Example:

<PasswordChangeBox 
	...
	titleProps={{
		show: true,
		text: "Time to change your password. Make it count!"
	}}
	...
/>

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	PasswordChangeBoxMessageType	Type of message - used for formatting (error, warning etc.). Defaults to null if not specified. See here for all supported values.

Example:

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

Existing Password Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
label	string	Field label. Defaults to Current password:.
placeholder	string	Field placeholder. Defaults to Please enter your current password.
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 current password.

Example:

<PasswordChangeBox 
	...
	existingPasswordProps={{
		label: 'Existing password:',
		placeholder: 'Please enter your existing password',
		emptyErrorMessage: 'You must fill in your existing password'
	}}
	...
/>

New Password Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
label	string	Field label. Defaults to New password:.
placeholder	string	Field placeholder. Defaults to Please enter your new password.
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 new password.
passwordStrengthProps	Password Strength Object	See here.
passwordRulesProps	Password Rules Information Object	See here.

Example:

<PasswordChangeBox 
	...
	newPasswordProps={{
		label: 'Brand new password:',
		placeholder: 'Please enter your brand new password',
		emptyErrorMessage: 'You must fill in your brand new password',
		passwordStrengthProps: {
			/* password strength configuration */
		},
		passwordRulesProps: {
			rules: [/* some password rules */]
		}
	}}
	...
/>

Confirm New Password Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
label	string	Field label. Defaults to Password confirmation:.
placeholder	string	Field placeholder. Defaults to Please confirm new password.
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 confirm your new password.
mismatchErrorMessage	string	Error message displayed when the value of this field does not match the value of the new password field. That is, when the new password and its confirmation are not the same. Defaults to The new password confirmation does not match the new password.

Example:

<PasswordChangeBox 
	...
	confirmNewPasswordProps={{
		description: 'Becasue, let us face it, we have all been there: all new password, but immediately forgotten!'
	}}
	...
/>

Change Password Button Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
label	string	Defaults to Change password.

Example:

<PasswordChangeBox 
	...
	passwordChangeButtonProps={{
		label: 'Submit new password'
	}}
	...
/>

Back Button Customization Object

A plain javascript object with the following properties:

Name	Type	Notes
label	string	Defaults to Change password.
show	boolean	Whether to show the button or not. Defaults to true.
position	BackButtonPositions	Defaults to BackButtonPositions.left.

Example:

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

Password Change Values Object

The password change values are exported as a plain javascript object with the following properties:

Name	Type	Notes
existingPassword	string	Set to null if the existing password is not, by configuration, required
newPassword	string	-
confirmNewPassword	string	-

Events

Event	Prop Name	Arguments	Notes
Password change requested	onPasswordChangedRequested	(Password Change Values Object)	Triggered when the Change password button is clicked.
Values changed	onPasswordChangeValuesChanged	(oldValues:Password Change Values Object, newValues:Password Change Values Object)	Triggered whenever any field changes.
Navigate back	onBackRequested	(Password Change Values Object)	Triggered when the Back button is clicked.
Component initialized	onPasswordChangeBoxInitialized	(none)	Triggered when the component is mounted by React.
Component disposed	onPasswordChangeBoxDisposed	(Password Change Values Object)	Triggered when the component is un-mounted by React.

Changelog

Version 0.0.6

• Fixed typings declaration.

Version 0.0.5

• Added type definitions.

Version 0.0.4

• Added the underlying password box CSS stylesheet to the exported stylesheet.

Version 0.0.3

• Forwarded underlying password box public APIs, without the password box component itself.

Version 0.0.2

• Minor styling update.

Version 0.0.1

• First tracked version.

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...