passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/AccountRecovery/ReviewAccountRecoveryRequest/ReviewAccountRecoveryRequest.js

@@ -0,0 +1,279 @@
+/**
+ * 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, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
+import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
+import UserAvatar from "../../Common/Avatar/UserAvatar";
+import {withAppContext} from "../../../contexts/AppContext";
+import {withDialog} from "../../../contexts/DialogContext";
+import {DateTime} from "luxon";
+import NotifyError from "../../Common/Error/NotifyError/NotifyError";
+import Tooltip from "../../Common/Tooltip/Tooltip";
+import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
+
+class ReviewAccountRecoveryRequest extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getDefaultState();
+    this.bindCallbacks();
+  }
+
+  /**
+   * Returns the default component state
+   */
+  getDefaultState() {
+    return {
+      status: "rejected",
+      processing: false
+    };
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+  }
+
+  /**
+   * Toggle the processing mode
+   */
+  async toggleProcessing() {
+    await this.setState({processing: !this.state.processing});
+  }
+
+  /**
+   * Returns true if the component must be in a processing mode
+   */
+  get isProcessing() {
+    return this.state.processing;
+  }
+
+  /**
+   * Go to the next process
+   * @param event A form submit event
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    if (!this.state.processing) {
+      await this.submit();
+    }
+  }
+
+  /**
+   * Submit the changes.
+   */
+  async submit() {
+    await this.toggleProcessing();
+
+    try {
+      await this.props.onSubmit(this.state.status);
+      await this.toggleProcessing();
+      this.props.onClose();
+    } catch (error) {
+      await this.toggleProcessing();
+      //@todo unify unexpected error management: the error should be handle by the workflow proposing the callback prop
+      this.onUnexpectedError(error);
+    }
+  }
+
+  /**
+   * Whenever an unexpected error occured
+   * @param {object} error The error
+   * @returns {Promise<void>}
+   */
+  onUnexpectedError(error) {
+    const errorDialogProps = {
+      error: error
+    };
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
+  }
+
+  /**
+   * Handle input change
+   * @param event
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value
+    });
+  }
+
+  /**
+   * get fingerprint
+   * @returns {JSX.Element}
+   */
+  get fingerprint() {
+    const result = this.props.accountRecoveryRequest.fingerprint.toUpperCase().replace(/.{4}/g, '$& ');
+    return <>{result.substr(0, 24)}<br/>{result.substr(25)}</>;
+  }
+
+  /**
+   * Format date in time ago
+   * @param {string} date The date to format
+   * @return {string}
+   */
+  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 user who initiated the account recovery request.
+   * @returns {object}
+   */
+  get creator() {
+    return this.props.accountRecoveryRequest.creator;
+  }
+
+  /**
+   * Get the creator first name.
+   * @returns {string}
+   */
+  get creatorFirstName() {
+    return this.creator.profile.first_name;
+  }
+
+  /**
+   * Get the date at when the account recovery has been initiated by the user.
+   * @returns {*}
+   */
+  get date() {
+    return this.props.accountRecoveryRequest.created;
+  }
+
+  /**
+   * Handle close button click.
+   */
+  handleCloseClick() {
+    this.props.onCancel();
+    this.props.onClose();
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    const requesterFirstname = this.creatorFirstName;
+    return (
+      <DialogWrapper
+        title={this.translate("Review account recovery request")}
+        onClose={this.handleCloseClick}
+        disabled={this.state.processing}
+        className="review-account-recovery-dialog">
+        <form onSubmit={this.handleSubmit}>
+          <div className="form-content">
+            <ul>
+              <li className="usercard-detailed-col-2">
+                <div className="content-wrapper">
+                  <div className="content">
+                    <div>
+                      <Tooltip message={this.fingerprint} direction="bottom">
+                        <span className="name-with-tooltip">{requesterFirstname}</span>
+                      </Tooltip>
+                      &nbsp;
+                      <span className="name"><Trans>requested an account recovery</Trans></span>
+                    </div>
+                    <div className="subinfo light">{this.formatDateTimeAgo(this.date)}</div>
+                  </div>
+                </div>
+                <UserAvatar
+                  user={this.creator}
+                  baseUrl={this.props.context.userSettings.getTrustedDomain()}
+                  attentionRequired={true}/>
+              </li>
+            </ul>
+            <label><Trans>How do you want to proceed?</Trans></label>
+            <div className="radiolist-alt">
+              <div className={`input radio ${this.state.status === "rejected" ? "checked" : ""}`}>
+                <input type="radio"
+                  value="rejected"
+                  onChange={this.handleInputChange}
+                  name="status"
+                  checked={this.state.status === "rejected"}
+                  id="statusRecoverAccountReject"
+                  disabled={this.isProcessing}/>
+                <label htmlFor="statusRecoverAccountReject">
+                  <span className="name"><Trans>Reject</Trans></span>
+                  <span className="info">
+                    <Trans>{{requesterFirstname}} did not initiate this request.</Trans>
+                  </span>
+                </label>
+              </div>
+              <div className={`input radio ${this.state.status === "approved" ? "checked" : ""}`}>
+                <input type="radio"
+                  value="approved"
+                  onChange={this.handleInputChange}
+                  name="status"
+                  checked={this.state.status === "approved"}
+                  id="statusRecoverAccountAccept"
+                  disabled={this.isProcessing}/>
+                <label htmlFor="statusRecoverAccountAccept">
+                  <span className="name"><Trans>Approve</Trans></span>
+                  <span className="info">
+                    <Trans>I verified with <span>{{requesterFirstname}}</span> that the request is valid.</Trans>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div className="submit-wrapper clearfix">
+            <button
+              className={`button button-left ${this.isProcessing ? "disabled" : ""}`}
+              type="button"
+              disabled={this.isProcessing}>
+              {this.translate("Learn More")}
+            </button>
+            <FormCancelButton
+              disabled={this.isProcessing}
+              onClick={this.handleCloseClick}/>
+            <FormSubmitButton
+              value={this.translate("Submit")}
+              disabled={this.isProcessing}
+              processing={this.isProcessing}/>
+          </div>
+        </form>
+      </DialogWrapper>
+    );
+  }
+}
+
+ReviewAccountRecoveryRequest.propTypes = {
+  context: PropTypes.any.isRequired, // The application context
+  accountRecoveryRequest: PropTypes.object.isRequired, // The account recovery request to review.
+  dialogContext: PropTypes.object, // The dialog handler
+  onClose: PropTypes.func, // The close callback
+  onCancel: PropTypes.func, // The cancel callback
+  onSubmit: PropTypes.func, // The review submit requested callback
+  t: PropTypes.func, // The translation function
+};
+export default withAppContext(withDialog(withTranslation("common")(ReviewAccountRecoveryRequest)));

package/src/react-extension/components/AccountRecovery/ReviewAccountRecoveryRequest/ReviewAccountRecoveryRequest.test.data.js

@@ -0,0 +1,52 @@
+/**
+ * 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
+ */
+export function defaultProps() {
+  return {
+    context: {
+      locale: 'en-GB',
+      userSettings: {
+        getTrustedDomain: () => (new URL(window.location.href)).origin
+      },
+      loggedInUser: {
+        id: '54c6278e-f824-5fdb-91ff-3e946b18c996'
+      }
+    },
+    accountRecoveryRequest: {
+      id: "54c6278e-f824-5fda-91ff-3e946b18d996",
+      status: "pending",
+      fingerprint: "848E95CC7493129AD862583129B81CA8936023DD",
+      created: "2022-01-13T15:27:26.301Z",
+      creator: {
+        id: "54c6278e-f824-5fda-91ff-3e946b18d994",
+        role_id: "c4870358-e32f-41ce-999b-8f80c9b0d17f",
+        active: true,
+        deleted: false,
+        last_logged_in: "",
+        profile: {
+          avatar: {url: {medium: "img/avatar/user_medium.png", small: "img/avatar/user.png"}},
+          created: "2020-09-01T13:11:08+00:00",
+          first_name: "Betty",
+          id: "f6b23982-d3dd-4f8b-9bcc-f3a473edffc2",
+          last_name: "Holberton",
+          modified: "2020-09-01T13:11:08+00:00",
+          user_id: "5247399c-6c8a-47f0-8880-aa854e01e554",
+        },
+      },
+    },
+    onClose: jest.fn(),
+    onCancel: jest.fn(),
+    onSubmit: jest.fn(),
+    onError: jest.fn()
+  };
+}

package/src/react-extension/components/AccountRecovery/ReviewAccountRecoveryRequest/ReviewAccountRecoveryRequest.test.js

@@ -0,0 +1,77 @@
+/**
+ * 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
+ */
+
+/**
+ * Unit tests on ReviewAccountRecoveryRequest in regard of specifications
+ */
+import ReviewAccountRecoveryRequestPage from "./ReviewAccountRecoveryRequest.test.page";
+import {waitFor} from "@testing-library/react";
+import {defaultProps} from "./ReviewAccountRecoveryRequest.test.data";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("ReviewAccountRecoveryRequest", () => {
+  const props = defaultProps();
+
+  it('As AD I can approve an account recovery', async() => {
+    const page = new ReviewAccountRecoveryRequestPage(props);
+    await waitFor(() => { });
+
+    await page.selectReview(page.acceptCheckbox);
+    expect(page.acceptCheckbox.checked).toBeTruthy();
+    expect(page.rejectCheckbox.checked).toBeFalsy();
+    await page.submit();
+    const status = 'approved';
+
+    expect(props.onSubmit).toHaveBeenCalledWith(status);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('As AD I can reject an account recovery', async() => {
+    const page = new ReviewAccountRecoveryRequestPage(props);
+    await waitFor(() => { });
+
+    expect(page.rejectCheckbox.checked).toBeTruthy();
+    expect(page.acceptCheckbox.checked).toBeFalsy();
+    await page.submit();
+    const status = 'rejected';
+
+    expect(props.onSubmit).toHaveBeenCalledWith(status);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('As AD I can cancel a review of an account recovery', async() => {
+    const page = new ReviewAccountRecoveryRequestPage(props);
+    await waitFor(() => { });
+
+    expect(page.rejectCheckbox.checked).toBeTruthy();
+    expect(page.acceptCheckbox.checked).toBeFalsy();
+    await page.cancel();
+    expect(props.onCancel).toHaveBeenCalled();
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('As AD I can close a review of an account recovery', async() => {
+    const page = new ReviewAccountRecoveryRequestPage(props);
+    await waitFor(() => { });
+
+    expect(page.rejectCheckbox.checked).toBeTruthy();
+    expect(page.acceptCheckbox.checked).toBeFalsy();
+    await page.close();
+    expect(props.onCancel).toHaveBeenCalled();
+    expect(props.onClose).toHaveBeenCalled();
+  });
+});

package/src/react-extension/components/AccountRecovery/ReviewAccountRecoveryRequest/ReviewAccountRecoveryRequest.test.page.js

@@ -0,0 +1,119 @@
+/**
+ * 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 {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import ReviewAccountRecoveryRequest from "./ReviewAccountRecoveryRequest";
+/**
+ * The ReviewAccountRecoveryRequestPage component represented as a page
+ */
+export default class ReviewAccountRecoveryRequestPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <ReviewAccountRecoveryRequest {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the review account recovery element
+   */
+  get reviewAccountRecovery() {
+    return this._page.container.querySelector('.save-recovery-account-settings-dialog');
+  }
+
+  /**
+   * Returns the dialog close element
+   */
+  get closeButton() {
+    return this._page.container.querySelector('.dialog-close');
+  }
+
+  /**
+   * Get the accepted checkbox element
+   */
+  get acceptCheckbox() {
+    return this._page.container.querySelector('#statusRecoverAccountAccept');
+  }
+
+  /**
+   * Get the rejected checkbox element
+   */
+  get rejectCheckbox() {
+    return this._page.container.querySelector('#statusRecoverAccountReject');
+  }
+
+  /**
+   * Returns the save button element
+   */
+  get submitButton() {
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
+  }
+
+  /**
+   * Returns the cancel button element
+   */
+  get cancelButton() {
+    return this._page.container.querySelector('.submit-wrapper .cancel');
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.reviewAccountRecovery !== null;
+  }
+
+  /**
+   * Saves the change on the group
+   */
+  async submit() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.submitButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Cancels the user's MFA disable
+   */
+  async cancel() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.cancelButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Close the dialog
+   */
+  async close() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.closeButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Go to renew key
+   */
+  async selectReview(review) {
+    const leftClick = {button: 0};
+    fireEvent.click(review, leftClick);
+    await waitFor(() => {});
+  }
+}

package/src/react-extension/components/AccountRecovery/ReviewAccountRecoveryRequest/ReviewAccountRecoveryRequest.test.stories.js

@@ -0,0 +1,36 @@
+/**
+ * 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 {MemoryRouter, Route} from "react-router-dom";
+import ReviewAccountRecoveryRequest from "./ReviewAccountRecoveryRequest";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import {defaultProps} from "./ReviewAccountRecoveryRequest.test.data";
+
+
+export default {
+  title: 'Passbolt/AccountRecovery/ReviewAccountRecoveryRequest',
+  component: ReviewAccountRecoveryRequest
+};
+
+
+const Template = args =>
+  <MockTranslationProvider>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ReviewAccountRecoveryRequest {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </MockTranslationProvider>;
+
+export const Initial = Template.bind({});
+Initial.args = defaultProps();

package/src/react-extension/components/Administration/AdministrationWorkspace.js

@@ -22,7 +22,6 @@ import Logo from "../Common/Navigation/Header/Logo";
 import DisplayUserBadgeMenu from "../User/DisplayUserBadgeMenu/DisplayUserBadgeMenu";
 import DisplayAdministrationMenu from "./DisplayAdministrationMenu/DisplayAdministrationMenu";
 import DisplayMfaAdministration from "./DisplayMfaAdministration/DisplayMfaAdministration";
-import DisplayAdministrationWorkspaceActions from "./DisplayAdministrationWorkspaceActions/DisplayAdministrationWorkspaceActions";
 import DisplayAdministrationWorkspaceBreadcrumb
   from "./DisplayAdministrationWorkspaceBreadcrumb/DisplayAdministrationWorkspaceBreadcrumb";
 import DisplayUserDirectoryAdministration
@@ -33,6 +32,8 @@ import SearchBar from "../Common/Navigation/Search/SearchBar";
 import DisplaySubscriptionKey from "./DisplaySubscriptionKey/DisplaySubscriptionKey";
 import DisplayInternationalizationAdministration
   from "./DisplayInternationalizationAdministration/DisplayInternationalizationAdministration";
+import ManageAccountRecoveryAdministrationSettings
+  from "./ManageAccountRecoveryAdministrationSettings/ManageAccountRecoveryAdministrationSettings";
 
 class AdministrationWorkspace extends Component {
   /**
@@ -75,7 +76,16 @@ class AdministrationWorkspace extends Component {
     return AdministrationWorkspaceMenuTypes.INTERNATIONALIZATION === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
+  /**
+   * If Account Recovery menu is selected
+   * @returns {boolean}
+   */
+  isAccountRecoverySelected() {
+    return AdministrationWorkspaceMenuTypes.ACCOUNT_RECOVERY === this.props.administrationWorkspaceContext.selectedAdministration;
+  }
+
   render() {
+    const AdministrationWorkspaceAction = this.props.administrationWorkspaceContext.administrationWorkspaceAction;
     return (
       <div id="container" className="page administration">
         <div id="app" tabIndex="1000">
@@ -90,7 +100,7 @@ class AdministrationWorkspace extends Component {
           <div className="header third">
             <div className="col1 main-action-wrapper">
             </div>
-            <DisplayAdministrationWorkspaceActions/>
+            <AdministrationWorkspaceAction/>
           </div>
           <div className="panel main">
             <div>
@@ -99,24 +109,25 @@ class AdministrationWorkspace extends Component {
               </div>
               <div className="panel middle">
                 <DisplayAdministrationWorkspaceBreadcrumb/>
-                <div className="workspace-main">
-                  <div className="grid grid-responsive-12">
-                    {this.isMfaSelected() &&
-                    <DisplayMfaAdministration/>
-                    }
-                    {this.isUserDirectorySelected() &&
-                    <DisplayUserDirectoryAdministration/>
-                    }
-                    {this.isEmailNotificationsSelected() &&
-                    <DisplayEmailNotificationsAdministration/>
-                    }
-                    {this.isSubscriptionSelected() &&
-                    <DisplaySubscriptionKey/>
-                    }
-                    {this.isInternationalizationSelected() &&
-                    <DisplayInternationalizationAdministration/>
-                    }
-                  </div>
+                <div className="grid grid-responsive-12">
+                  {this.isMfaSelected() &&
+                  <DisplayMfaAdministration/>
+                  }
+                  {this.isUserDirectorySelected() &&
+                  <DisplayUserDirectoryAdministration/>
+                  }
+                  {this.isEmailNotificationsSelected() &&
+                  <DisplayEmailNotificationsAdministration/>
+                  }
+                  {this.isSubscriptionSelected() &&
+                  <DisplaySubscriptionKey/>
+                  }
+                  {this.isInternationalizationSelected() &&
+                  <DisplayInternationalizationAdministration/>
+                  }
+                  {this.isAccountRecoverySelected() &&
+                  <ManageAccountRecoveryAdministrationSettings/>
+                  }
                 </div>
               </div>
             </div>

package/src/react-extension/components/Administration/AdministrationWorkspace.test.data.js

@@ -3,6 +3,9 @@
  * @param appContext An existing app context
  * @returns {any | ({userSettings: UserSettings, siteSettings: SiteSettings, port: MockPort} & {})}
  */
+import DisplayAdministrationWorkspaceActions
+  from "./DisplayAdministrationWorkspaceActions/DisplayAdministrationWorkspaceActions";
+
 export function defaultAppContext(appContext) {
   const defaultAppContext = {
   };
@@ -21,7 +24,8 @@ export function defaultProps(selectedAdministration) {
       }
     },
     administrationWorkspaceContext: {
-      selectedAdministration
+      selectedAdministration,
+      administrationWorkspaceAction: DisplayAdministrationWorkspaceActions
     }
   };
 }