passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/User/HandleReviewAccountRecoveryRequestRoute/HandleReviewAccountRecoveryRequestRoute.test.js

@@ -0,0 +1,54 @@
+/**
+ * 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 {waitFor} from "@testing-library/dom";
+import {v4 as uuidv4} from "uuid";
+import HandleReviewAccountRecoveryRequestRouteTestPage from "./HandleReviewAccountRecoveryRequestRoute.test.page";
+import {defaultProps, pendingAccountRecoveryRequest} from "./HandleReviewAccountRecoveryRequestRoute.test.data";
+
+describe("HandleReviewAccountRecoveryRequestRoute", () => {
+  it('As AD following a review account recovery request route I should see the creator of the request selected', async() => {
+    const user = {id: uuidv4()}; // @todo mock-dto The mock of the dto could reuse later the BP code.
+    const props = defaultProps({context: {users: [user]}});
+    const accountRecoveryRequest = pendingAccountRecoveryRequest({user_id: user.id}); // It should have user_id existing in the appContext.users store.
+    props.context.port.request = jest.fn(() => accountRecoveryRequest);
+
+    expect.assertions(1);
+    new HandleReviewAccountRecoveryRequestRouteTestPage(props);
+    await waitFor(() => {});
+    expect(props.userWorkspaceContext.onUserSelected.single).toHaveBeenCalledWith(user);
+  });
+
+  it('As AD following a review account recovery request route I should be notified if the account recovery request does not exist', async() => {
+    const user = {id: uuidv4()}; // @todo mock-dto The mock of the dto could reuse later the BP code.
+    const props = defaultProps({context: {users: [user]}});
+    props.context.port.request = jest.fn(() => Promise.reject());
+
+    expect.assertions(1);
+    new HandleReviewAccountRecoveryRequestRouteTestPage(props);
+    await waitFor(() => {});
+    expect(props.actionFeedbackContext.displayError).toHaveBeenCalledWith("The account recovery request does not exist.");
+  });
+
+  it('As AD following a review account recovery request route I should be notified if the creator of the account recovery request does not exist', async() => {
+    const user = {id: uuidv4()}; // @todo mock-dto The mock of the dto could reuse later the BP code.
+    const props = defaultProps();
+    const accountRecoveryRequest = pendingAccountRecoveryRequest({user_id: user.id}); // It should have user_id existing in the appContext.users store.
+    props.context.port.request = jest.fn(() => accountRecoveryRequest);
+
+    expect.assertions(1);
+    new HandleReviewAccountRecoveryRequestRouteTestPage(props);
+    await waitFor(() => {});
+    expect(props.actionFeedbackContext.displayError).toHaveBeenCalledWith("The user who requested an account recovery does not exist.");
+  });
+});

package/src/react-extension/components/User/HandleReviewAccountRecoveryRequestRoute/HandleReviewAccountRecoveryRequestRoute.test.page.js

@@ -0,0 +1,37 @@
+/**
+ * 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 {render} from "@testing-library/react";
+import {BrowserRouter as Router} from "react-router-dom";
+import HandleReviewAccountRecoveryRequestRoute from "./HandleReviewAccountRecoveryRequestRoute";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The ChangeLocale component represented as a page
+ */
+export default class HandleReviewAccountRecoveryRequestRouteTestPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <Router>
+          <HandleReviewAccountRecoveryRequestRoute {...props}/>
+        </Router>
+      </MockTranslationProvider>
+    );
+  }
+}

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

@@ -17,11 +17,13 @@ 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

@@ -9,7 +9,7 @@ export function defaultAppContext(appContext) {
   const defaultAppContext = {
     port: new MockPort(),
     userSettings: {
-      getTrustedDomain: () => "some url"
+      getTrustedDomain: () => (new URL(window.location.href)).origin
     },
     siteSettings: {
       getServerTimezone: () => ""

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,234 @@
+/**
+ * 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 "../../Common/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);
+  }
+
+  /**
+   * 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});
+    }
+  }
+
+  /**
+   * 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">
+            <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",
+  }
+];