lvd-fluentui-passwordchangebox

v0.0.6

Published

3 years ago

A ReactJS password change box component built using the FluentUI library

Downloads

0High
0Medium
0Low

alexandru.boia

react reactjs react-components ui-components fluentui password-box

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:

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