A ReactJS password recovery box component built using the FluentUI library

Overview

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 [email protected] 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.

Changelog

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

Releases(0.0.2)
Owner
Boia Alexandru
Writing code by day. Fixing it by night.
Boia Alexandru
React Visibility - Detect when an element is becoming visible or hidden on the page.

Detect when an element is becoming visible or hidden on the page.

Md Raihan 20 Oct 3, 2021
HTML to React parser that works on both the server (Node.js) and the client (browser):

HTML to React parser that works on both the server (Node.js) and the client (browser):

Mark 1k Oct 19, 2021
React-Godfather aims to explore an alternative mental model for function components.

React-Godfather "Look ma, no Hooks!" React-Godfather aims to explore an alternative mental model for function components. It adds a thin layer between

John Kapolos 17 Sep 20, 2021
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 325 Apr 14, 2021
🌊🐷 Utility for generalized composition of React components

???? Utility for generalized composition of React components

Enki 279 Oct 4, 2021
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Oct 15, 2021
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 150 Sep 18, 2021
Cookie cutter react portfolio suited perfectly for Github Pages

Cookie cutter react portfolio suited perfectly for Github Pages, get up and running in less then 5 minutes, just edit the data.json file and off you go!

null 37 Sep 9, 2021
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 343 Oct 3, 2021
📏 A resizable component for React.

?? A resizable component for React.

bokuweb 1.5k Oct 17, 2021
A lightweight react library that converts raw HTML to a React DOM structure.

A lightweight react library that converts raw HTML to a React DOM structure.

Arve Knudsen 652 Oct 17, 2021
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Fasky 82 Oct 13, 2021
Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Components AI 44 Oct 3, 2021
React Refresh Token with JWT and Axios Interceptors example

Buid React JWT Refresh Token example with Axios Interceptors - Refresh Token in React.js, Axios silent refresh JWT token example

null 18 Sep 30, 2021
repository for storing gRPC studies

Microsserviço com gRPC Este repositório armazena a estrutura inicial de um exemplo de projeto utilizando comunicação entre serviços com gRPC e Node.js

Davilson de Castro 1 Oct 14, 2021
A Fetch Library Support React New Suspense SSR

use-suspense-fetch A data fetching library for React Suspense. inspired by use-asset Feature use LRU Cache support create custom cache support React 1

Snake 6 Jul 12, 2021
Truncate a long string in the middle, instead of the end.

React Middle Ellipsis Check out the demo. Adding ellipses to the end of long text is cool. But not always! Sometimes the end of the text contains vita

bluepeter 41 Sep 8, 2021
Diff & patch JavaScript objects... in React

jsondiffpatch-react Originally forked from archived https://github.com/hero-guo/jsondiffpatch-for-react

bluepeter 2 Jul 9, 2021
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

Fernando Pasik 183 Oct 5, 2021