lvd-fluentui-passwordchangebox v0.0.6

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

Title Customization Object

A plain javascript object with the following properties:

Example:

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

Message Object

A plain javascript object with the following properties:

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:

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:

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:

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:

Example:

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

Back Button Customization Object

A plain javascript object with the following properties:

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:

Events

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