passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/UserDetails/DisplayUserDetails/DisplayUserDetails.js

@@ -12,16 +12,18 @@
  * @since         2.13.0
  */
 import React from "react";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
+import {withAccountRecovery} from "../../../contexts/AccountRecoveryUserContext";
 import DisplayUserDetailsInformation from "../DisplayUserDetailsInformation/DisplayUserDetailsInformation";
 import DisplayUserDetailsGroups from "../DisplayUserDetailsGroups/DisplayUserDetailsGroups";
 import DisplayUserDetailsPublicKey from "../DisplayUserDetailsPublicKey/DisplayUserDetailsPublicKey";
 import UserAvatar from "../../Common/Avatar/UserAvatar";
 import {withTranslation} from "react-i18next";
+import DisplayUserDetailsAccountRecovery from "../DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery";
 
 class DisplayUserDetails extends React.Component {
   /**
@@ -33,6 +35,10 @@ class DisplayUserDetails extends React.Component {
     this.bindCallbacks();
   }
 
+  componentDidMount() {
+    this.props.accountRecoveryContext.findAccountRecoveryPolicy();
+  }
+
   /**
    * Bind callbacks methods
    */
@@ -80,6 +86,30 @@ class DisplayUserDetails extends React.Component {
     return this.props.t;
   }
 
+  /**
+   * Is the logged in user admin
+   * @returns {boolean}
+   */
+  isLoggedInUserAdmin() {
+    return this.props.context.loggedInUser && this.props.context.loggedInUser.role.name === 'admin';
+  }
+
+  /**
+   * Is the account recovery enabled
+   * @returns {boolean}
+   */
+  isAccountRecoveryEnabled() {
+    return this.props.accountRecoveryContext.isPolicyEnabled();
+  }
+
+  /**
+   * Get attention required
+   * @returns {boolean}
+   */
+  get hasAttentionRequired() {
+    return this.isAccountRecoveryEnabled() && Boolean(this.user.pending_account_recovery_request);
+  }
+
   /**
    * Render the component
    * @returns {JSX}
@@ -89,10 +119,11 @@ class DisplayUserDetails extends React.Component {
       <div className="panel aside ready">
         <div className="sidebar user">
           <div className="sidebar-header">
-            <div className="teaser-image">
+            <div className={`teaser-image  ${this.hasAttentionRequired ? "attention-required" : ""}`}>
               <UserAvatar
                 user={this.user}
-                baseUrl={this.baseUrl}/>
+                baseUrl={this.baseUrl}
+                attentionRequired={this.hasAttentionRequired}/>
             </div>
             <h3>
               <div className="title-wrapper">
@@ -112,6 +143,7 @@ class DisplayUserDetails extends React.Component {
           <DisplayUserDetailsInformation/>
           {this.user.active && <DisplayUserDetailsGroups/>}
           {this.user.active && <DisplayUserDetailsPublicKey/>}
+          {this.isAccountRecoveryEnabled() && this.user.active && this.isLoggedInUserAdmin() && <DisplayUserDetailsAccountRecovery/>}
         </div>
       </div>
     );
@@ -122,7 +154,8 @@ DisplayUserDetails.propTypes = {
   context: PropTypes.any, // The application context
   actionFeedbackContext: PropTypes.any, // The action feedback context
   userWorkspaceContext: PropTypes.any, // The user workspace context
+  accountRecoveryContext: PropTypes.object, // The account recovery context
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withUserWorkspace(withActionFeedback(withTranslation('common')(DisplayUserDetails))));
+export default withAppContext(withAccountRecovery(withUserWorkspace(withActionFeedback(withTranslation('common')(DisplayUserDetails)))));

package/src/react-extension/components/UserDetails/DisplayUserDetails/DisplayUserDetails.test.data.js

@@ -1,4 +1,22 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         2.13.0
+ */
+
 import MockPort from "../../../test/mock/MockPort";
+import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
+import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
+import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
 
 /**
  * Returns the default app context for the unit test
@@ -8,12 +26,8 @@ import MockPort from "../../../test/mock/MockPort";
 export function defaultAppContext(appContext) {
   const defaultAppContext = {
     port: new MockPort(),
-    userSettings: {
-      getTrustedDomain: () => "some url"
-    },
-    siteSettings: {
-      getServerTimezone: () => ""
-    },
+    userSettings: new UserSettings(userSettingsFixture),
+    siteSettings: new SiteSettings(siteSettingsFixture),
     groups:  [
       {
         "id": "516c2db6-0aed-52d8-854f-b3f3499995e7",

package/src/react-extension/components/UserDetails/DisplayUserDetails/DisplayUserDetails.test.js

@@ -39,7 +39,7 @@ describe("Display User Details", () => {
     mockContextRequest(context, () => {});
     jest.spyOn(props.actionFeedbackContext, "displaySuccess").mockImplementationOnce(() => {});
     await page.copyPermalink();
-    expect(context.port.request).toHaveBeenCalledWith("passbolt.clipboard.copy", "some url/app/users/view/54c6278e-f824-5fda-91ff-3e946b18d994");
+    expect(context.port.request).toHaveBeenCalledWith("passbolt.clipboard.copy", "http://localhost/app/users/view/54c6278e-f824-5fda-91ff-3e946b18d994");
     expect(props.actionFeedbackContext.displaySuccess).toHaveBeenCalled();
   });
 

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.js

@@ -0,0 +1,252 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import Icon from "../../../../shared/components/Icons/Icon";
+import {Trans, withTranslation} from "react-i18next";
+import {DateTime} from "luxon";
+import {withAppContext} from "../../../contexts/AppContext";
+import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
+import HandleReviewAccountRecoveryRequestWorkflow
+  from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
+import {withWorkflow} from "../../../contexts/WorkflowContext";
+
+/**
+ * This component displays the user details about information
+ */
+class DisplayUserDetailsAccountRecovery extends React.Component {
+  /**
+   * Default constructor
+   * @param props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindHandlers();
+  }
+
+  /**
+   * Returns the component default state
+   */
+  get defaultState() {
+    return {
+      loading: true, // loading
+      open: false, // Flag for the expand / collapse mode
+      userRequests: [] // The user requests
+    };
+  }
+
+  /**
+   * Whenever the component has updated in terms of props
+   * @param prevProps
+   */
+  async componentDidUpdate(prevProps) {
+    await this.handleUserChange(prevProps.userWorkspaceContext.details.user);
+    await this.handleUserPendingAccountRecoveryRequestChange(prevProps.userWorkspaceContext.details.user);
+  }
+
+  /**
+   * Check if the user has changed and fetch
+   * @param previousUser
+   */
+  async handleUserChange(previousUser) {
+    const hasUserChanged = this.selectedUser.id !== previousUser.id;
+    if ((hasUserChanged) && this.state.open) {
+      const state = Object.assign({}, this.defaultState, {open: true});
+      await this.setState(state);
+      await this.findUserRequests();
+      this.setState({loading: false});
+    }
+  }
+
+  /**
+   * Handle the update of the user pending account recovery request.
+   * When an admin reviews a pending request by instance, refresh the section content.
+   * @param {object} user The previous user
+   */
+  async handleUserPendingAccountRecoveryRequestChange(user) {
+    if (!this.state.open) {
+      return;
+    }
+    if (user?.pending_account_recovery_request?.status !== this.props.userWorkspaceContext.details.user?.pending_account_recovery_request?.status) {
+      await this.setState({loading: true});
+      await this.findUserRequests();
+      await this.setState({loading: false});
+    }
+  }
+
+  /**
+   * Bind the component handlers
+   */
+  bindHandlers() {
+    this.handleTitleClicked = this.handleTitleClicked.bind(this);
+    this.handleReviewClicked = this.handleReviewClicked.bind(this);
+  }
+
+  /**
+   * Handle the click on the title
+   */
+  async handleTitleClicked() {
+    // If the section is open, reset the component and close the section.
+    if (this.state.open) {
+      const defaultState = this.defaultState;
+      this.setState(defaultState);
+    } else {
+      await this.setState({loading: true, open: true});
+      await this.findUserRequests();
+      this.setState({loading: false});
+    }
+  }
+
+  /**
+   * Handle the click on the review button
+   */
+  handleReviewClicked() {
+    const accountRecoveryRequestId = this.selectedUser.pending_account_recovery_request.id;
+    this.props.workflowContext.start(HandleReviewAccountRecoveryRequestWorkflow, {accountRecoveryRequestId});
+  }
+
+  /**
+   * Find the user account recovery request and populate the state.
+   * @returns {Promise<void>}
+   */
+  async findUserRequests() {
+    const unsortedUserRequests = await this.props.context.port.request('passbolt.account-recovery.get-user-requests', this.selectedUser.id);
+    const userRequests = unsortedUserRequests.sort((a, b) => new Date(b.created) - new Date(a.created));
+    this.setState({userRequests});
+  }
+
+  /**
+   * Format date in time ago
+   * @param {string} date The date to format
+   * @return {string} The formatted date
+   */
+  formatDateTimeAgo(date) {
+    const dateTime = DateTime.fromISO(date);
+    const duration = dateTime.diffNow().toMillis();
+    return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative({locale: this.props.context.locale});
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Get the selected user
+   * @returns {*}
+   */
+  get selectedUser() {
+    return this.props.userWorkspaceContext.details.user;
+  }
+
+  /**
+   * Is account recovery pending
+   * @returns {boolean}
+   */
+  get isAccountRecoveryPending() {
+    return Boolean(this.selectedUser.pending_account_recovery_request);
+  }
+
+  /**
+   * Has user requests
+   * @returns {boolean}
+   */
+  get hasUserRequests() {
+    return this.state.userRequests.length > 0;
+  }
+
+  /**
+   * The previous account recovery requests
+   * @returns {*|null}
+   */
+  get previousAccountRecoveryRequest() {
+    if (this.isAccountRecoveryPending) {
+      return this.state.userRequests.length > 1 ? this.state.userRequests[1] : null;
+    } else {
+      return this.hasUserRequests ? this.state.userRequests[0] : null;
+    }
+  }
+
+  /**
+   * Capitalize first letter
+   * @param string
+   * @returns {string}
+   */
+  capitalizeFirstLetter(string) {
+    return string[0].toUpperCase() + string.slice(1);
+  }
+
+  /**
+   * Render the component
+   */
+  render() {
+    return (
+      <div className={`detailed-account-recovery accordion sidebar-section ${this.state.open ? "" : "closed"}`}>
+        <div className="accordion-header">
+          <h4>
+            <a onClick={this.handleTitleClicked} role="button">
+              <Trans>Account recovery</Trans>
+              {this.isAccountRecoveryPending &&
+                <Icon name="exclamation" baseline={true}/>
+              }
+              {this.state.open && <Icon name="caret-down"/>}
+              {!this.state.open && <Icon name="caret-right"/>}
+            </a>
+          </h4>
+        </div>
+        <div className="accordion-content">
+          {this.state.loading &&
+          <div className="processing-wrapper">
+            <Icon name="spinner"/>
+            <span className="processing-text"><Trans>Retrieving account recovery</Trans></span>
+          </div>
+          }
+          {!this.state.loading &&
+          <ul>
+            {this.isAccountRecoveryPending &&
+            <li className="pending-request-status">
+              <span className="label"><Trans>Current status</Trans></span>
+              <a className="button" role="button" onClick={this.handleReviewClicked}>Review</a>
+            </li>
+            }
+            <li className="previous-request">
+              <span className="label"><Trans>Previous recovery</Trans></span>
+              <span
+                className="value">{this.previousAccountRecoveryRequest ? `${this.capitalizeFirstLetter(this.previousAccountRecoveryRequest.status)} ${this.formatDateTimeAgo(this.previousAccountRecoveryRequest.created)}` : "Never"}</span>
+            </li>
+            <li className="requests-count">
+              <span className="label"><Trans>Number of recovery</Trans></span>
+              <span className="value">{this.state.userRequests.length}</span>
+            </li>
+          </ul>
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayUserDetailsAccountRecovery.propTypes = {
+  context: PropTypes.any,
+  userWorkspaceContext: PropTypes.object, // The user workspace context
+  workflowContext: PropTypes.any, // the workflow context
+  t: PropTypes.func, // The translation function
+};
+
+export default withAppContext(withWorkflow(withUserWorkspace(withTranslation('common')(DisplayUserDetailsAccountRecovery))));

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.test.data.js

@@ -0,0 +1,125 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import MockPort from "../../../test/mock/MockPort";
+import {DateTime} from "luxon";
+
+/**
+ * Default props
+ * @returns {any}
+ */
+export function defaultProps(props = {}) {
+  const defaultProps = {
+    context: {
+      port: new MockPort()
+    },
+    userWorkspaceContext: {
+      details: {
+        user: {
+          id: "54c6278e-f824-5fda-91ff-3e946b18d994",
+          pending_account_recovery_request: null
+        }
+      }
+    },
+    workflowContext: {
+      start: jest.fn()
+    }
+  };
+  return Object.assign(defaultProps, props);
+}
+
+/**
+ * Format date in time ago
+ * @param {string} date The date to format
+ * @return {string}
+ */
+export function formatDateTimeAgo(date) {
+  const dateTime = DateTime.fromISO(date);
+  const duration = dateTime.diffNow().toMillis();
+  return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative();
+}
+
+export const oneUserAccountRequestsPending = [{
+  "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
+  "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+  "status": "pending",
+  "created": "2020-05-04T20:31:45+00:00",
+}];
+
+export const oneUserAccountRequestsApproved = [{
+  "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
+  "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+  "status": "approved",
+  "created": "2020-05-04T20:31:45+00:00",
+}];
+
+export const userAccountRequestsRejectedWithPending = [
+  {
+    "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
+    "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+    "status": "pending",
+    "created": "2020-05-04T20:31:45+00:00",
+  },
+  {
+    "id": "54c6278e-f824-5fda-91ff-3e946b18d999",
+    "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+    "status": "rejected",
+    "created": "2020-05-04T20:31:45+00:00",
+  }
+];
+
+export const userAccountRequestsApprovedWithPending = [
+  {
+    "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
+    "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+    "status": "pending",
+    "created": "2020-05-04T20:31:45+00:00",
+  },
+  {
+    "id": "54c6278e-f824-5fda-91ff-3e946b18d999",
+    "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+    "status": "approved",
+    "created": "2020-05-04T20:31:45+00:00",
+  }
+];
+
+export const userAccountRequestsApproved = [
+  {
+    "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
+    "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+    "status": "approved",
+    "created": "2020-05-04T20:31:45+00:00",
+  },
+  {
+    "id": "54c6278e-f824-5fda-91ff-3e946b18d999",
+    "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+    "status": "approved",
+    "created": "2020-05-04T20:31:45+00:00",
+  }
+];
+
+export const userAccountRequestsRejected = [
+  {
+    "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
+    "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+    "status": "rejected",
+    "created": "2020-05-04T20:31:45+00:00",
+  },
+  {
+    "id": "54c6278e-f824-5fda-91ff-3e946b18d999",
+    "user_id": "d4c0e643-3967-443b-93b3-102d902c4511",
+    "status": "rejected",
+    "created": "2020-05-04T20:31:45+00:00",
+  }
+];

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.test.js

@@ -0,0 +1,150 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import {
+  defaultProps, formatDateTimeAgo, oneUserAccountRequestsApproved, oneUserAccountRequestsPending,
+  userAccountRequestsApproved, userAccountRequestsRejectedWithPending
+} from "./DisplayUserDetailsAccountRecovery.test.data";
+import DisplayUserDetailsAccountRecoveryPage from "./DisplayUserDetailsAccountRecovery.test.page";
+import HandleReviewAccountRecoveryRequestWorkflow from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
+
+/**
+ * Unit tests on DisplayUserDetailsAccountRecovery in regard of specifications
+ */
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("See account recovery", () => {
+  let page; // The page to test against
+
+  describe(' As LU I can see user account recovery requests during pending', () => {
+    const userWithPending = {
+      userWorkspaceContext: {
+        details: {
+          user: {
+            id: "54c6278e-f824-5fda-91ff-3e946b18d994",
+            pending_account_recovery_request: {"status": "pending"}
+          }
+        }
+      }
+    };
+    const props = defaultProps(userWithPending); // The props to pass
+
+    const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
+    it('I should see the user account recovery request during pending status', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(oneUserAccountRequestsPending));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.title).toBe('Account recovery');
+      expect(page.currentStatus).toBe('Current status');
+      expect(page.currentStatusButton.textContent).toBe('Review');
+      expect(page.previousRecoveryRequest).toBe('Never');
+      expect(page.numberOfRecovery).toBe('1');
+    });
+
+    it('I should see the user account recovery previous request during pending status', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(userAccountRequestsRejectedWithPending));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.currentStatus).toBe('Current status');
+      expect(page.currentStatusButton.textContent).toBe('Review');
+      expect(page.previousRecoveryRequest).toBe(`Rejected ${formatDateTimeAgo(userAccountRequestsRejectedWithPending[1].created)}`);
+      expect(page.numberOfRecovery).toBe('2');
+    });
+
+    it('I should review the user account recovery request during pending status', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(oneUserAccountRequestsPending));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.currentStatusButton.textContent).toBe('Review');
+      await page.reviewAccountRecovery();
+      const accountRecoveryRequestId = props.userWorkspaceContext.details.user.pending_account_recovery_request.id;
+      expect(props.workflowContext.start).toHaveBeenLastCalledWith(HandleReviewAccountRecoveryRequestWorkflow, {accountRecoveryRequestId});
+    });
+  });
+
+  describe(' As LU I can see user account recovery requests', () => {
+    const props = defaultProps(); // The props to pass
+
+    const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
+
+    it('I should see the user account recovery request', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(oneUserAccountRequestsApproved));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.currentStatusButton).toBeNull();
+      expect(page.previousRecoveryRequest).toBe(`Approved ${formatDateTimeAgo(oneUserAccountRequestsApproved[0].created)}`);
+      expect(page.numberOfRecovery).toBe('1');
+    });
+
+    it('I should see the user account recovery previous request', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve(userAccountRequestsApproved));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.title).toBe('Account recovery');
+      expect(page.currentStatusButton).toBeNull();
+      expect(page.previousRecoveryRequest).toBe(`Approved ${formatDateTimeAgo(userAccountRequestsApproved[1].created)}`);
+      expect(page.numberOfRecovery).toBe('2');
+    });
+
+    it('I should see user account recovery request with 0 request', async() => {
+      const userAccountRecoveryRequestMockImpl = jest.fn(() => Promise.resolve([]));
+      mockContextRequest(userAccountRecoveryRequestMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+      await page.toggleCollapse();
+
+      expect(page.title).toBe('Account recovery');
+      expect(page.currentStatusButton).toBeNull();
+      expect(page.previousRecoveryRequest).toBe('Never');
+      expect(page.numberOfRecovery).toBe('0');
+    });
+  });
+
+  describe(' As LU I see a loading state when the activity are not loaded', () => {
+    let findResolve;
+    const loadingFindMockImpl = jest.fn(() => new Promise(resolve => {
+      findResolve = resolve;
+    }));
+    const props = defaultProps(); // The props to pass
+
+    const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
+
+    beforeEach(() => {
+      mockContextRequest(loadingFindMockImpl);
+      page = new DisplayUserDetailsAccountRecoveryPage(props);
+    });
+
+    it('I should see the loading message “Retrieving account recovery”', async() => {
+      await page.toggleCollapse();
+
+      const inProgressFn = () => {
+        expect(page.isLoading()).toBeTruthy();
+        findResolve([]);
+      };
+      await page.waitForLoading(inProgressFn);
+      expect(page.isLoading()).toBeFalsy();
+    });
+  });
+});