passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow.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 {render} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import {HandleReviewAccountRecoveryRequestWorkflow} from "./HandleReviewAccountRecoveryRequestWorkflow";
+
+/**
+ * The HandleSaveAccountRecovery component represented as a page
+ */
+export default class HandleReviewAccountRecoveryRequestWorkflowTestPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <HandleReviewAccountRecoveryRequestWorkflow {...props} ref={node => {
+          this._instance = node;
+        }}/>
+      </MockTranslationProvider>
+    );
+  }
+}

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

@@ -0,0 +1,316 @@
+/**
+ * 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 {withRouter} from "react-router-dom";
+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 {DateTime} from "luxon";
+import {withAccountRecovery} from "../../../contexts/AccountRecoveryUserContext";
+import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
+import {withDialog} from "../../../contexts/DialogContext";
+import NotifyError from "../../Common/Error/NotifyError/NotifyError";
+
+class ManageAccountRecoveryUserSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getDefaultState();
+    this.bindCallbacks();
+  }
+
+  /**
+   * Returns the default component state
+   */
+  getDefaultState() {
+    return {
+      status: null,
+      processing: false
+    };
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.close = this.close.bind(this);
+  }
+
+  /**
+   * Whenever the component is mounted
+   */
+  componentDidMount() {
+    if (this.props.organizationPolicy.policy === "opt-in") {
+      this.setState({status: "rejected"});
+    } else {
+      this.setState({status: "approved"});
+    }
+  }
+
+  /**
+   * Toggle the processing mode
+   */
+  toggleProcessing() {
+    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();
+    this.toggleProcessing();
+    const accountRecoveryUserSettingDto = {status: this.state.status};
+    try {
+      await this.props.context.port.request("passbolt.account-recovery.save-user-settings", accountRecoveryUserSettingDto);
+      this.props.accountRecoveryContext.setUserAccountRecoveryStatus(this.state.status);
+      this.props.actionFeedbackContext.displaySuccess(this.translate("The account recovery subscription setting has been updated."));
+      this.close();
+    } catch (error) {
+      this.toggleProcessing();
+      if (error.name === "UserAbortsOperationError") {
+        return;
+      }
+      console.error(error);
+      this.handleError(error);
+    }
+  }
+
+  /**
+   * Close the dialog.
+   */
+  close() {
+    this.props.onClose();
+    const pathname = this.props.location.pathname;
+    if (pathname !== "/app/settings/account-recovery") {
+      this.props.history.push("/app/settings/account-recovery");
+    }
+  }
+
+  /**
+   * Handle input change
+   * @param event
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value
+    });
+  }
+
+  /**
+   * Handle exception by displaying a pop-up containing the details of the error.
+   * @param {Error} error
+   */
+  handleError(error) {
+    const errorDialogProps = {
+      error: error
+    };
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
+  }
+
+  canReject() {
+    return this.props.organizationPolicy.policy !== "mandatory";
+  }
+
+  /**
+   * get fingerprint
+   * @param fingerprint
+   * @returns string
+   */
+  formatFingerprint(fingerprint) {
+    return fingerprint.toUpperCase().replace(/.{4}(?=.)/g, "$& ");
+  }
+
+  /**
+   * 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 requesting the current user to subscribe to the account recovery program.
+   * @returns {*}
+   */
+  get requestor() {
+    return this.props.organizationPolicy.creator;
+  }
+
+  /**
+   * Get the user name requesting the current user to subscribe to the account recovery program.
+   * @returns {string}
+   */
+  get requestorName() {
+    return `${this.requestor.profile.first_name} ${this.requestor.profile.last_name}`;
+  }
+
+  /**
+   * Get the date at when the account recovery program subscription has been asked.
+   * @returns {*}
+   */
+  get date() {
+    return this.props.organizationPolicy.modified;
+  }
+
+  /**
+   * Get the type
+   * @returns {string}
+   */
+  get type() {
+    if (this.props.organizationPolicy.policy === "mandatory") {
+      return "Mandatory";
+    } else if (this.props.organizationPolicy.policy === "opt-out") {
+      return "Recommended";
+    } else {
+      return "Optional";
+    }
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <DialogWrapper
+        title={`${this.translate("Recovery")} (${this.type})`}
+        onClose={this.close}
+        disabled={this.state.processing}
+        className="recovery-account-policy-dialog">
+        <form onSubmit={this.handleSubmit}>
+          <div className="form-content">
+            <p>
+              <Trans>It is possible and recommended to share securely your recovery kit with your organization recovery contacts.</Trans>&nbsp;
+              <Trans>They will be able to help you in case you lose it.</Trans>
+            </p>
+            <ul>
+              <li className="usercard-detailed-col-2">
+                <div className="content-wrapper">
+                  <div className="content">
+                    <div>
+                      <span
+                        className="tooltip tooltip-bottom"
+                        data-tooltip={this.formatFingerprint(this.requestor.gpgkey.fingerprint)}>
+                        <span className="name-with-tooltip">{`${this.requestorName} (${this.translate("admin")})`}</span>
+                      </span>
+                      &nbsp;
+                      <span className="name"><Trans>requested this operation</Trans></span>
+                    </div>
+                    <div className="subinfo light">{this.formatDateTimeAgo(this.date)}</div>
+                  </div>
+                </div>
+                <UserAvatar user={this.requestor} baseUrl={this.props.context.userSettings.getTrustedDomain()}/>
+              </li>
+            </ul>
+            <div className="radiolist-alt">
+              {this.canReject() &&
+              <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>I do not want to share a copy of my private key & passphrase with my organization recovery contacts.</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>Accept</Trans></span>
+                  <span className="info">
+                    <Trans>I agree to share securely a copy of my private key & passphrase with my organization recovery contacts.</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>
+            <FormSubmitButton
+              value={this.translate("Save")}
+              disabled={this.isProcessing}
+              processing={this.isProcessing}/>
+            <button
+              className={`button cancel ${this.isProcessing ? "disabled" : ""}`}
+              role="button"
+              type="button"
+              onClick={this.close}
+              disabled={this.isProcessing}>
+              <span><Trans>Cancel</Trans></span>
+            </button>
+          </div>
+        </form>
+      </DialogWrapper>
+    );
+  }
+}
+
+ManageAccountRecoveryUserSettings.propTypes = {
+  context: PropTypes.any, // The application context
+  accountRecoveryContext: PropTypes.any, // The account recovery context
+  dialogContext: PropTypes.object, // The dialog handler context
+  organizationPolicy: PropTypes.object, // The organization policy details
+  actionFeedbackContext: PropTypes.object, // The action feedback context handler
+  onClose: PropTypes.func, // The close callback
+  history: PropTypes.object, // The navigation history
+  location: PropTypes.object, // The current page location
+  t: PropTypes.func, // The translation function
+};
+export default withRouter(withAppContext(withActionFeedback(withAccountRecovery(withDialog(withTranslation("common")(ManageAccountRecoveryUserSettings))))));

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

@@ -0,0 +1,55 @@
+/**
+ * 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
+ */
+
+/**
+ * Default props
+ * @returns {object}
+ */
+export function defaultProps(policy) {
+  return {
+    context: {
+      locale: "en-US",
+      userSettings: {
+        getTrustedDomain: () => new URL(window.location).origin
+      },
+      port: {
+        request: jest.fn()
+      },
+      setContext: jest.fn()
+    },
+    organizationPolicy: {
+      modified: "2022-01-13T15:27:26.301Z",
+      creator: {
+        profile: {
+          first_name: "Ada",
+          last_name: "Lovelace"
+        },
+        gpgkey: {
+          fingerprint: "848E95CC7493129AD862583129B81CA8936023DD"
+        },
+      },
+      policy: policy
+    },
+    onClose: jest.fn(),
+    accountRecoveryContext: {
+      setUserAccountRecoveryStatus: jest.fn()
+    },
+    actionFeedbackContext: {
+      displaySuccess: jest.fn()
+    },
+    dialogContext: {
+      open: jest.fn()
+    }
+  };
+}

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

@@ -0,0 +1,132 @@
+/**
+ * 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 EnterNewPassphrase in regard of specifications
+ */
+import ManageAccountRecoveryUserSettingsPage from "./ManageAccountRecoveryUserSettings.test.page";
+import {waitFor} from "@testing-library/react";
+import {defaultProps} from "./ManageAccountRecoveryUserSettings.test.data";
+import NotifyError from "../../Common/Error/NotifyError/NotifyError";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("DisplayAccountRecoveryUserSettings", () => {
+  /**
+   * Given that I am a logged in user
+   * And   my account was created before the account recovery policy was enabled
+   * And   I previously closed or cancel the “Recovery (Optional)” and “Recovery (Mandatory)” dialog or the account recovery policy is “Optional, Opt-in”
+   * When  I am on the Account recovery settings in the profile workspace
+   * Then  I see a breadcrumb saying “All users > Username > Account recovery”
+   * And   I see the Account recovery title with a description telling me the purpose of the feature
+   * And   I see a section with the account recovery status, a “Review” button
+   * When	 I click on the “Review” button
+   * Then	 I see the “Recovery (Optional)” or “Recovery (Mandatory)” dialog
+   */
+  it('As a logged in user I can update my account recovery choice when my review is pending for the Opt-in, Mandatory and Opt-out policies (default state recommended)', async() => {
+    expect.assertions(3);
+    const props = defaultProps("opt-out");
+    const page = new ManageAccountRecoveryUserSettingsPage(props);
+    await waitFor(() => { });
+
+    expect(page.exists()).toBeTruthy();
+
+    expect(page.title.textContent).toBe("Recovery (Recommended)");
+    expect(page.acceptCheckbox.checked).toBeTruthy();
+  });
+
+  /**
+   * Given that I am a logged in user
+   * And   my account was created before the account recovery policy was enabled
+   * And   I previously closed or cancel the “Recovery (Optional)” and “Recovery (Mandatory)” dialog or the account recovery policy is “Optional, Opt-in”
+   * When  I am on the Account recovery settings in the profile workspace
+   * Then  I see a breadcrumb saying “All users > Username > Account recovery”
+   * And   I see the Account recovery title with a description telling me the purpose of the feature
+   * And   I see a section with the account recovery status, a “Review” button
+   * When	 I click on the “Review” button
+   * Then	 I see the “Recovery (Optional)” or “Recovery (Mandatory)” dialog
+   */
+  it('As a logged in user I can update my account recovery choice when my review is pending for the Opt-in, Mandatory and Opt-out policies (default state optional)', async() => {
+    expect.assertions(3);
+    const props = defaultProps("opt-in");
+    const page = new ManageAccountRecoveryUserSettingsPage(props);
+    await waitFor(() => { });
+
+    expect(page.exists()).toBeTruthy();
+
+    expect(page.title.textContent).toBe("Recovery (Optional)");
+    expect(page.rejectCheckbox.checked).toBeTruthy();
+  });
+
+  /**
+   * Given that I am a registered user
+   * And	the Account recovery is enabled for my organization
+   * And	the Account recovery policy is “Opt-out”
+   * And	I have a pending account recovery organization policy
+   * And	I am prompted to join the account recovery program
+   * When	I select reject
+   * And	I click on the save button
+   * Then	the dialog is closed
+   *
+   *
+   * Given that I am a registered user
+   * And  the Account recovery is enabled for my organisation
+   * And  the Account recovery policy is “Opt-out” or “Mandatory”
+   * And  I have a pending account recovery organisation policy
+   * And  I am prompted to join the account recovery program
+   * When I select the “Approve” choice
+   * And  I click on the save button
+   * Then I see a dialog to enter my passphrase
+   * When I enter my passphrase
+   * Then I see the “Enter passphrase” dialog is closed
+   * And  I see account recovery prompt dialog closed
+   * And  I see a progress dialog
+   * Then I see the progress dialog is closed
+   * And  I see a notification at the top telling my I joined the account recovery program
+   * And  I see the account recovery page in my settings workspace
+   * And  I see the Account recovery status enabled with a green dot
+   */
+  it('As a logged in user who has a pending organization account recovery policy, I can select not to join the account recovery program if the policy is “opt-out”', async() => {
+    const props = defaultProps("opt-in");
+    const page = new ManageAccountRecoveryUserSettingsPage(props);
+    await waitFor(() => { });
+
+    expect.assertions(6);
+    expect(page.exists()).toBeTruthy();
+    expect(page.rejectCheckbox.checked).toBeTruthy();
+
+    await page.clickOnSave();
+    expect(props.context.port.request).toHaveBeenCalledWith("passbolt.account-recovery.save-user-settings", {status: 'rejected'});
+    expect(props.accountRecoveryContext.setUserAccountRecoveryStatus).toHaveBeenCalledWith('rejected');
+    expect(props.actionFeedbackContext.displaySuccess).toHaveBeenCalledWith('The account recovery subscription setting has been updated.');
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should display an error notification dialog if an error happens when communicating with the background page', async() => {
+    const props = defaultProps("opt-in");
+    const errorMessage = "The background page couldn't process the request";
+    props.context.port.request.mockImplementation(() => { throw new Error(errorMessage); });
+    const page = new ManageAccountRecoveryUserSettingsPage(props);
+    await waitFor(() => { });
+
+    expect.assertions(1);
+    await page.clickOnSave();
+
+    expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {
+      error: new Error(errorMessage)
+    });
+  });
+});

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

@@ -0,0 +1,70 @@
+/**
+ * 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 {BrowserRouter as Router} from "react-router-dom";
+import {render, fireEvent, waitFor} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import ManageAccountRecoveryUserSettings from "./ManageAccountRecoveryUserSettings";
+/**
+ * The ManageAccountRecoveryUserSettingsPage component represented as a page
+ */
+export default class ManageAccountRecoveryUserSettingsPage {
+  /**
+   * Default constructor
+   * @param context Context value
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <Router>
+          <ManageAccountRecoveryUserSettings {...props}/>
+        </Router>
+      </MockTranslationProvider>
+    );
+  }
+
+  selector(selection) {
+    return this._page.container.querySelector(selection);
+  }
+
+  exists() {
+    return this.title !== null;
+  }
+
+  get title() {
+    return this.selector('.recovery-account-policy-dialog h2');
+  }
+
+  get acceptCheckbox() {
+    return this.selector('#statusRecoverAccountAccept');
+  }
+
+  get rejectCheckbox() {
+    return this.selector('#statusRecoverAccountReject');
+  }
+
+  get saveButton() {
+    return this.selector('.submit-wrapper input[type="submit"]');
+  }
+
+  isProcessing() {
+    return this.saveButton.classList.contains('disabled');
+  }
+
+  async clickOnSave() {
+    fireEvent.click(this.saveButton, {button: 0});
+    await waitFor(() => {});
+  }
+}