{"id":2351,"date":"2022-01-26T12:19:53","date_gmt":"2022-01-26T12:19:53","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2351"},"modified":"2022-01-26T12:19:53","modified_gmt":"2022-01-26T12:19:53","slug":"a-reactjs-password-recovery-box-component-built-using-the-fluentui-library","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2351","title":{"rendered":"A ReactJS password recovery box component built using the FluentUI library"},"content":{"rendered":"\n<p>A ReactJS password recovery box built using the <a href=\"https:\/\/github.com\/microsoft\/fluentui\" target=\"_blank\" rel=\"noreferrer noopener\">FluentUI library<\/a>, comprised of two steps:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul><li>password identification step &#8211; user provides some sort of identification to kick of the process;<\/li><li>password change step &#8211; user enters a new password, after a password recovery link has been sent to the user&#8217;s e-mail address.<\/li><\/ul>\n\n\n\n<p>For the password change step, the <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordChangeBox\" target=\"_blank\" rel=\"noreferrer noopener\">LVD-FluentUi-PasswordChangeBox<\/a> is used, to which all its documented props are forwarded.<\/p>\n\n\n\n<p>Here&#8217;s a set screenshots of how it all looks like <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/blob\/main\/src\/css\/style.css\" target=\"_blank\" rel=\"noreferrer noopener\">using the default styling<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/raw.githubusercontent.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/main\/docs\/Capture-Step1.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/raw.githubusercontent.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/main\/docs\/Capture-Step2.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 id=\"installation\">Installation<\/h2>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<p><code>npm install --save lvd-fluentui-passwordrecoverybox<\/code><\/p>\n\n\n\n<h2 id=\"demo\">Demo<\/h2>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<p>The <code>demo<\/code> directory contains <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/tree\/main\/demo\" target=\"_blank\" rel=\"noreferrer noopener\">a compiled and ready-to-run example<\/a>. Just open up the <code>index.html<\/code> file.<\/p>\n\n\n\n<ul><li>For step 1, use <code>test@email.com<\/code> to advance to next step. Any other value will display an error message.<\/li><li>On the second step, enter any password you like.<\/li><\/ul>\n\n\n\n<h2 id=\"basicusage\">Basic Usage<\/h2>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<p>Handling the first step of the password recovery process:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { PasswordRecoveryBox, PasswordRecoverySteps } from 'lvd-fluentui-passwordrecoverybox';\n\nclass PasswordRecoveryBoxStep1SamplePage extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis._handlePasswordRecoveryInitiationValuesChanged = \n\t\t\tthis._handlePasswordRecoveryInitiationValuesChanged.bind(this);\n\t\tthis._handlePasswordRecoveryInitiationRequested =\n\t\t\tthis._handlePasswordRecoveryInitiationRequested.bind(this);\n\t}\n\n\t_handlePasswordRecoveryInitiationValuesChanged(oldValues, newValues) {\n\t\t\/\/do something, if desired\n\t}\n\n\t_handlePasswordRecoveryInitiationRequested(newValues) {\n\t\t\/\/lookup identification, send recovery link if valid\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t&lt;PasswordRecoveryBox \n\t\t\t\tstep={PasswordRecoverySteps.CollectUserIdentifier}\n\t\t\t\tmessageProps={\/* use this to display a message after processing *\/}\n\t\t\t\tonPasswordRecoveryInitiationValuesChanged={this._handlePasswordRecoveryInitiationValuesChanged}\n\t\t\t\tonPasswordRecoveryInitiationRequested={this._handlePasswordRecoveryInitiationRequested}\n\t\t\t\/&gt;\n\t\t);\n\t}\n}\n<\/code><\/pre>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<p>Handling the second step of the password recovery process:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nimport { PasswordRecoveryBox, PasswordRecoverySteps } from 'lvd-fluentui-passwordrecoverybox';\n\nclass PasswordRecoveryBoxStep2SamplePage extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis._handlePasswordChangeValuesChanged = \n\t\t\tthis._handlePasswordChangeValuesChanged.bind(this);\n\t\tthis._handlePasswordChangeRequested = \n\t\t\tthis._handlePasswordChangeRequested.bind(this);\n\t}\n\n\t_handlePasswordChangeValuesChanged(oldValues, newValues) {\n\t\t\/\/do something, if desired\n\t}\n\n\t_handlePasswordChangeRequested(values) {\n\t\t\/\/validate and change new password\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t&lt;PasswordRecoveryBox \n\t\t\t\tstep={PasswordRecoverySteps.EnterNewPassword}\n\t\t\t\tmessageProps={\/* use this to display a message after processing *\/}\n\t\t\t\tonPasswordChangeValuesChanged={this._handlePasswordChangeValuesChanged}\n\t\t\t\tonPasswordChangeRequested={this._handlePasswordChangeRequested}\n\t\t\t\/&gt;\n\t\t);\n\t}\n}\n<\/code><\/pre>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<p>You can find a full working example <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/blob\/main\/src\/App.jsx\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<h2 id=\"styling\">Styling<\/h2>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<p>You can either directly include the <code>dist\/style.css<\/code> into your <code>html<\/code> web page or use the <code>@import<\/code> directive inside your stylesheet if building using webpack:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import '~lvd-fluentui-passwordrecoverybox\/dist\/style.css';\n<\/code><\/pre>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>Also see <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/blob\/main\/src\/components\/PasswordRecoveryBox.jsx\" target=\"_blank\" rel=\"noreferrer noopener\">the component itself<\/a>.<\/p>\n\n\n\n<h2 id=\"building\">Building<\/h2>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<p>To build the demo application:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build-app\n<\/code><\/pre>\n\n\n\n<p>To build the library:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build-dist\n<\/code><\/pre>\n\n\n\n<p>To build both in one sitting:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build\n<\/code><\/pre>\n\n\n\n<h2 id=\"forwardedapis\">Forwarded APIs<\/h2>\n\n\n\n<p>For convenience, the following API artefacts are forwarded from the underlying password change box component (which itself, forwards them from the underyling <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordBox\" target=\"_blank\" rel=\"noreferrer noopener\">password box component<\/a>):<\/p>\n\n\n\n<ul><li><code>PasswordCallbackRule<\/code>,<\/li><li><code>PasswordRegexRule<\/code>,<\/li><li><code>PasswordEvaluator<\/code>,<\/li><li><code>PasswordLengthRule<\/code>,<\/li><li><code>PasswordStrengthIndicator<\/code>,<\/li><li><code>StrengthIndicatorStyles<\/code>,<\/li><li><code>PasswordStrengthLevels<\/code>,<\/li><li><code>getAllAvailableLevels<\/code>,<\/li><li><code>getAvailableLevelCount<\/code>.<\/li><\/ul>\n\n\n\n<h2 id=\"customizationoptions\">Customization Options<\/h2>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>What<\/th><th>Prop Name<\/th><th>Type<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Disable component<\/td><td><code>disabled<\/code><\/td><td><code>boolean<\/code><\/td><td>Cascades to all fields and buttons. Defaults to <code>false<\/code>.<\/td><\/tr><tr><td>Configure whether to use framed container layout or not<\/td><td><code>framed<\/code><\/td><td><code>boolean<\/code><\/td><td>If <code>true<\/code>, it will display the default shadow-box frame. Defaults to <code>true<\/code>.<\/td><\/tr><tr><td>Configure whether to use built-in fixed-width container layout or not<\/td><td><code>fixed<\/code><\/td><td><code>boolean<\/code><\/td><td>If <code>true<\/code>, it will set the container width to the default width of <code>600px<\/code>. Defaults to <code>true<\/code>.<\/td><\/tr><tr><td>Configure whether to center the container or not<\/td><td><code>centered<\/code><\/td><td><code>boolean<\/code><\/td><td>If <code>true<\/code>, it will attempt to center the container. Defaults to <code>true<\/code>.<\/td><\/tr><tr><td>Set additional master container css class name<\/td><td><code>className<\/code><\/td><td><code>string<\/code><\/td><td>Defaults to <code>null<\/code>.<\/td><\/tr><tr><td>Set additional master inline css style properties<\/td><td><code>style<\/code><\/td><td><code>object<\/code><\/td><td>Key-value plain javascript object. Defaults to <code>{}<\/code>.<\/td><\/tr><tr><td>Make component readonly<\/td><td><code>readOnly<\/code><\/td><td><code>boolean<\/code><\/td><td>Cascades to all fields. Defaults to <code>false<\/code>. Can be overridden at step level.<\/td><\/tr><tr><td>Display fields in underlined style.<\/td><td><code>underlined<\/code><\/td><td><code>boolean<\/code><\/td><td>Defaults to <code>false<\/code>. Can be overridden at step level.<\/td><\/tr><tr><td>Message<\/td><td><code>messageProps<\/code><\/td><td><code>Message Object<\/code><\/td><td>See below. By default no message is shown.<\/td><\/tr><tr><td>Current step<\/td><td><code>step<\/code><\/td><td><code>PasswordRecoverySteps<\/code><\/td><td>What is the currently active step. Defaults to <code>PasswordRecoverySteps<\/code>.<code>CollectUserIdentifier<\/code>, which is the first step. See below for available values.<\/td><\/tr><tr><td>Customize the first step<\/td><td><code>step1Props<\/code><\/td><td><code>User Identification Customization Object<\/code><\/td><td>See below.<\/td><\/tr><tr><td>Customize the second step<\/td><td><code>step2Props<\/code><\/td><td><code>Password Change Box Customization Object<\/code><\/td><td>All the properties supported by the underlying <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordChangeBox\" target=\"_blank\" rel=\"noreferrer noopener\">password change box<\/a>, with the exception of <code>framed<\/code>, <code>centered<\/code> and <code>fixed<\/code>, which are set to false. See here for <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/blob\/main\/src\/components\/PasswordRecoveryStep2Defaults.js\" target=\"_blank\" rel=\"noreferrer noopener\">default values provided by this component<\/a>.<\/td><\/tr><tr><td>Customize the back button<\/td><td><code>backActionButtonProps<\/code><\/td><td><code>Back Button Customization Object<\/code><\/td><td>Can be used to customize the back button for both steps. Can be overridden at step level. See below.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 id=\"messageobject\">Message Object<\/h3>\n\n\n\n<p>A plain javascript object with the following properties:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Type<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><code>message<\/code><\/td><td><code>string<\/code><\/td><td>The actual message to be displayed. Defaults to <code>null<\/code> if not specified.<\/td><\/tr><tr><td><code>type<\/code><\/td><td><code>PasswordRecoveryBoxMessageType<\/code><\/td><td>Type of message &#8211; used for formatting (error, warning etc.). Defaults to <code>null<\/code> if not specified. See <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/blob\/main\/src\/components\/PasswordRecoveryBoxMessageType.js\" target=\"_blank\" rel=\"noreferrer noopener\">here for all supported values<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;PasswordRecoveryBox \n\t...\n\tmessageProps={{\n\t\tmessage: \"The existing password you entered was invalid\",\n\t\ttype: PasswordRecoveryBoxMessageType.error\n\t}}\n\t...\n\/&gt;\n<\/code><\/pre>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<h3 id=\"steps\">Steps<\/h3>\n\n\n\n<p>The following <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/blob\/main\/src\/components\/PasswordRecoverySteps.js\" target=\"_blank\" rel=\"noreferrer noopener\">steps are available<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Usage<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>Collect user identification data<\/td><td><code>PasswordRecoverySteps.CollectUserIdentifier<\/code><\/td><td>First step<\/td><\/tr><tr><td>Collect new user password information data<\/td><td><code>PasswordRecoverySteps.EnterNewPassword<\/code><\/td><td>Second step<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;PasswordRecoveryBox \n\t...\n\tstep={PasswordRecoverySteps.EnterNewPassword}\n\t...\n\/&gt;\n<\/code><\/pre>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<h3 id=\"useridentificationcustomizationobject\">User Identification Customization Object<\/h3>\n\n\n\n<p>A plain javascript object with the following properties:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Type<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><code>className<\/code><\/td><td><code>string<\/code><\/td><td>Set additional container class name. Defaults to <code>null<\/code>.<\/td><\/tr><tr><td><code>style<\/code><\/td><td><code>object<\/code><\/td><td>Set additional container inline css style properties. Key-value plain javascript object. Defaults to <code>{}<\/code>.<\/td><\/tr><tr><td><code>userIdentifierProps<\/code><\/td><td><code>User Identifier Customization Object<\/code><\/td><td>Configure user identifier field. See below.<\/td><\/tr><tr><td><code>titleProps<\/code><\/td><td><code>Title Customization Object<\/code><\/td><td>Configure title. See below. Title defaults to <code>Password recovery - Identify yourself<\/code>.<\/td><\/tr><tr><td><code>passwordRecoveryInitiationButtonProps<\/code><\/td><td><code>Password Recovery Initiation Button Configuration Object<\/code><\/td><td>Configure the password recovery initiation button. See below.<\/td><\/tr><tr><td><code>backActionButtonProps<\/code><\/td><td><code>Back Button Customization Object<\/code><\/td><td>Configure the back button. See below.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;PasswordRecoveryBox \n\t...\n\tstep1Props={{\n\t\tclassName: 'x-class-step1',\n\t\tuserIdentifierProps: {\n\t\t\tlabel: 'We need your e-mail',\n\t\t\tdescription: 'You will receive a password recovery link and further instructions to this e-mail, if valid.'\n\t\t}\n\t}}\n\t...\n\/&gt;\n<\/code><\/pre>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<h3 id=\"useridentifiercustomizationobject\">User Identifier Customization Object<\/h3>\n\n\n\n<p>A plain javascript object with the following properties:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Type<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><code>label<\/code><\/td><td><code>string<\/code><\/td><td>Field label. Defaults to <code>E-mail address:<\/code>.<\/td><\/tr><tr><td><code>placeholder<\/code><\/td><td><code>string<\/code><\/td><td>Field placeholder. Defaults to <code>Please fill in your e-mail address<\/code>.<\/td><\/tr><tr><td><code>description<\/code><\/td><td><code>string<\/code><\/td><td>Field descriptive text, displayed below the field. Defaults to empty string.<\/td><\/tr><tr><td><code>emptyErrorMessage<\/code><\/td><td><code>string<\/code><\/td><td>Error message displayed when the field is left empty. Defaults to <code>You must fill in your e-mail address<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 id=\"titlecustomizationobject\">Title Customization Object<\/h3>\n\n\n\n<p>A plain javascript object with the following properties:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Type<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><code>show<\/code><\/td><td><code>boolean<\/code><\/td><td>Defaults to <code>true<\/code> if not specified.<\/td><\/tr><tr><td><code>text<\/code><\/td><td><code>string<\/code><\/td><td>Defaults depending on the current step if not specified or empty.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 id=\"passwordrecoveryinitiationbuttonconfigurationobject\">Password Recovery Initiation Button Configuration Object<\/h3>\n\n\n\n<p>A plain javascript object with the following properties:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Type<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><code>label<\/code><\/td><td><code>string<\/code><\/td><td>Defaults to <code>Recover my password<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 id=\"backbuttoncustomizationobject\">Back Button Customization Object<\/h3>\n\n\n\n<p>A plain javascript object with the following properties:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Type<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><code>label<\/code><\/td><td><code>string<\/code><\/td><td>Defaults to <code>Back to log-in<\/code> for both steps.<\/td><\/tr><tr><td><code>show<\/code><\/td><td><code>boolean<\/code><\/td><td>Whether to show the button or not. Defaults to <code>true<\/code>.<\/td><\/tr><tr><td><code>position<\/code><\/td><td><code>BackButtonPositions<\/code><\/td><td>Defaults to <code>BackButtonPositions.left<\/code>. See <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\/blob\/main\/src\/components\/BackButtonPositions.js\" target=\"_blank\" rel=\"noreferrer noopener\">here for all supported values<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;PasswordRecoveryBox \n\t...\n\tbackActionButtonProps={{\n\t\tlabel: 'Back to log-in',\n\t\tshow: true,\n\t\t\/\/align back button to the far-right of the container\n\t\tposition: BackButtonPositions.right \n\t}}\n\t...\n\/&gt;\n<\/code><\/pre>\n\n\n\n<p>JavaScript<\/p>\n\n\n\n<h2 id=\"useridentificationvaluesobject\">User Identification Values Object<\/h2>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<p>The user identification values are exported as a plain javascript object with the following properties:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Type<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><code>userIdentifier<\/code><\/td><td><code>string<\/code><\/td><td>&#8211;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 id=\"passwordchangevaluesobject\">Password Change Values Object<\/h3>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<p>Same as <a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordChangeBox#password-change-values-object\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<h2 id=\"events\">Events<\/h2>\n\n\n\n<p><a target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Event<\/th><th>Prop Name<\/th><th>Arguments<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td>User identfication values changed &#8211; Step 1<\/td><td><code>onPasswordRecoveryInitiationValuesChanged<\/code><\/td><td>(<code>oldValues<\/code>:<code>User Identification Values Object<\/code>, <code>newValues<\/code>:<code>User Identification Values Object<\/code>)<\/td><td>Triggered whenerver any of fields from Step 1 changes.<\/td><\/tr><tr><td>Password recovery initation requested &#8211; Step 1<\/td><td><code>onPasswordRecoveryInitiationRequested<\/code><\/td><td>(<code>User Identification Values Object<\/code>)<\/td><td>Trigered whenever the <code>Recovery my password<\/code> button is clicked<\/td><\/tr><tr><td>Navigate back from Step 1<\/td><td><code>onBackFromPasswordRecoveryInitiationRequested<\/code><\/td><td>(<code>User Identification Values Object<\/code>)<\/td><td>Triggered whenever the <code>Back<\/code> button is clicked when Step 1 is active.<\/td><\/tr><tr><td>Password change values changed &#8211; Step 2<\/td><td><code>onPasswordChangeValuesChanged<\/code><\/td><td>(<code>oldValues<\/code>:<code>Password Change Values Object<\/code>, <code>newValues<\/code>:<code>Password Change Values Object<\/code>)<\/td><td>Triggered whenever any of the values from Step 2 changes.<\/td><\/tr><tr><td>Password change requested &#8211; Step 2<\/td><td><code>onPasswordChangeRequested<\/code><\/td><td>(<code>Password Change Values Object<\/code>)<\/td><td>Triggered whenever the <code>Change my password<\/code> button is clicked<\/td><\/tr><tr><td>Navigate back from Step 2<\/td><td><code>onBackFromPasswordChangeRequested<\/code><\/td><td>(<code>Password Change Values Object<\/code>)<\/td><td>Triggered whenever the <code>Back<\/code> button is clicked when Step 2 is active.<\/td><\/tr><tr><td>Component initialized<\/td><td><code>onPasswordRecoveryBoxInitiatlized<\/code><\/td><td>(<code>none<\/code>)<\/td><td>Triggered when the component is mounted by <code>React<\/code>.<\/td><\/tr><tr><td>Component disposed<\/td><td><code>onPasswordRecoveryBoxDisposed<\/code><\/td><td>(<code>none<\/code>)<\/td><td>Triggered when the component is un-mounted by <code>React<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 id=\"github\">GitHub<\/h2>\n\n\n\n<p><a href=\"https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox\">https:\/\/github.com\/alexboia\/LVD-FluentUi-PasswordRecoveryBox<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A ReactJS password recovery box built using the FluentUI library, comprised of two steps:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2351"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2351"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2351\/revisions"}],"predecessor-version":[{"id":2352,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2351\/revisions\/2352"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}