passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -0,0 +1,104 @@
+/**
+ * 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 ManageAccountRecoveryUserSettings from "./ManageAccountRecoveryUserSettings";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+
+export default {
+  title: 'Passbolt/AccountRecovery/ManageAccountRecoveryUserSettings',
+  component: ManageAccountRecoveryUserSettings
+};
+
+
+const Template = args =>
+  <MockTranslationProvider>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ManageAccountRecoveryUserSettings {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </MockTranslationProvider>;
+
+export const OptOut = Template.bind({});
+OptOut.args = {
+  context: {
+    locale: "en-US",
+    userSettings: {
+      getTrustedDomain: () => new URL(window.location).origin
+    }
+  },
+  organizationPolicy: {
+    creator: {
+      profile: {
+        first_name: "Ada",
+        last_name: "Lovelace"
+      },
+      gpgkey: {
+        fingerprint: "848E95CC7493129AD862583129B81CA8936023DD"
+      }
+    },
+    policy: "opt-out",
+    modified: "2021-05-25T09:08:34.123",
+  },
+  onClose: () => {}
+};
+
+export const OptIn = Template.bind({});
+OptIn.args = {
+  context: {
+    locale: "en-US",
+    userSettings: {
+      getTrustedDomain: () => new URL(window.location).origin
+    }
+  },
+  organizationPolicy: {
+    creator: {
+      profile: {
+        first_name: "Ada",
+        last_name: "Lovelace"
+      },
+      gpgkey: {
+        fingerprint: "848E95CC7493129AD862583129B81CA8936023DD"
+      }
+    },
+    policy: "opt-in",
+    modified: "2021-05-25T09:08:34.123",
+  },
+  onClose: () => {}
+};
+
+export const Mandatory = Template.bind({});
+Mandatory.args = {
+  context: {
+    locale: "en-US",
+    userSettings: {
+      getTrustedDomain: () => new URL(window.location).origin
+    }
+  },
+  organizationPolicy: {
+    creator: {
+      profile: {
+        first_name: "Ada",
+        last_name: "Lovelace"
+      },
+      gpgkey: {
+        fingerprint: "848E95CC7493129AD862583129B81CA8936023DD"
+      }
+    },
+    policy: "mandatory",
+    modified: "2021-05-25T09:08:34.123",
+  },
+  onClose: () => {}
+};

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

@@ -0,0 +1,286 @@
+/**
+ * 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";
+
+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
+   * @param fingerprint
+   * @returns string
+   */
+  get fingerprint() {
+    return this.props.accountRecoveryRequest.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 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>
+                      <span
+                        className="tooltip tooltip-bottom"
+                        data-tooltip={this.fingerprint}>
+                        <span className="name-with-tooltip">{requesterFirstname}</span>
+                      </span>
+                      &nbsp;
+                      <span className="name"><Trans>requested an account recovery</Trans></span>
+                    </div>
+                    <div className="subinfo light">{this.formatDateTimeAgo(this.date)}</div>
+                  </div>
+                </div>
+                <div className="teaser-image attention-required">
+                  <UserAvatar
+                    user={this.creator}
+                    baseUrl={this.props.context.userSettings.getTrustedDomain()}
+                    attentionRequired={true}/>
+                </div>
+              </li>
+            </ul>
+            <p><strong><Trans>How do you want to proceed?</Trans></strong></p>
+            <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>
+            <FormSubmitButton
+              value={this.translate("Submit")}
+              disabled={this.isProcessing}
+              processing={this.isProcessing}/>
+            <button
+              className={`button cancel ${this.isProcessing ? "disabled" : ""}`}
+              role="button"
+              type="button"
+              onClick={this.handleCloseClick}
+              disabled={this.isProcessing}>
+              <span><Trans>Cancel</Trans></span>
+            </button>
+          </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,51 @@
+/**
+ * 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",
+      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 input[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();