lvd-fluentui-passwordrecoverybox
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    LVD-FluentUi-PasswordRecoveryBox

    NPM

    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 onPasswordRecoveryBoxInitialized (none) Triggered when the component is mounted by React.
    Component disposed onPasswordRecoveryBoxDisposed (none) Triggered when the component is un-mounted by React.

    Changelog

    Version 0.0.2

    • Added type definitions;
    • Fixed type - Renamed onPasswordRecoveryBoxInitiatlized to onPasswordRecoveryBoxInitialized;
    • Updated dependencies.

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

    ko-fi

    Install

    npm i lvd-fluentui-passwordrecoverybox

    DownloadsWeekly Downloads

    1

    Version

    0.0.2

    License

    BSD-3-Clause

    Unpacked Size

    5.88 MB

    Total Files

    13

    Last publish

    Collaborators

    • alexandru.boia