passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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>
@@ -116,6 +126,9 @@ class AdministrationWorkspace extends Component {
                     {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
     }
   };
 }

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

@@ -29,6 +29,9 @@ jest.mock("./DisplayAdministrationWorkspaceBreadcrumb/DisplayAdministrationWorks
 jest.mock("./DisplayMfaAdministration/DisplayMfaAdministration", () => () => <span className="mfa-details"></span>);
 jest.mock("./DisplayUserDirectoryAdministration/DisplayUserDirectoryAdministration", () => () => <span className="user-directory-details"></span>);
 jest.mock("./DisplayEmailNotificationsAdministration/DisplayEmailNotificationsAdministration", () => () => <span className="email-notifications-details"></span>);
+jest.mock("./DisplaySubscriptionKey/DisplaySubscriptionKey", () => () => <span className="subscription-key-details"></span>);
+jest.mock("./DisplayInternationalizationAdministration/DisplayInternationalizationAdministration", () => () => <span className="internationalization-details"></span>);
+jest.mock("./ManageAccountRecoveryAdministrationSettings/ManageAccountRecoveryAdministrationSettings", () => () => <span className="account-recovery-details"></span>);
 
 beforeEach(() => {
   jest.resetModules();
@@ -44,6 +47,9 @@ describe("Display Administration Workspace", () => {
     expect(page.isMfaSelected).toBeTruthy();
     expect(page.isUserDirectorySelected).toBeFalsy();
     expect(page.isEmailNotificationsSelected).toBeFalsy();
+    expect(page.isSubscriptionKeySelected).toBeFalsy();
+    expect(page.isInternationalizationSelected).toBeFalsy();
+    expect(page.isAccountRecoverySelected).toBeFalsy();
   });
 
   it('As AD, I should see the user directory details area', async() => {
@@ -52,6 +58,9 @@ describe("Display Administration Workspace", () => {
     expect(page.isMfaSelected).toBeFalsy();
     expect(page.isUserDirectorySelected).toBeTruthy();
     expect(page.isEmailNotificationsSelected).toBeFalsy();
+    expect(page.isSubscriptionKeySelected).toBeFalsy();
+    expect(page.isInternationalizationSelected).toBeFalsy();
+    expect(page.isAccountRecoverySelected).toBeFalsy();
   });
 
   it('As AD, I should see the email notifications details area', async() => {
@@ -60,6 +69,42 @@ describe("Display Administration Workspace", () => {
     expect(page.isMfaSelected).toBeFalsy();
     expect(page.isUserDirectorySelected).toBeFalsy();
     expect(page.isEmailNotificationsSelected).toBeTruthy();
+    expect(page.isSubscriptionKeySelected).toBeFalsy();
+    expect(page.isInternationalizationSelected).toBeFalsy();
+    expect(page.isAccountRecoverySelected).toBeFalsy();
+  });
+
+  it('As AD, I should see the subscription key details area', async() => {
+    page = new AdministrationWorkspacePage(context, defaultProps(AdministrationWorkspaceMenuTypes.SUBSCRIPTION));
+    await waitFor(() => {});
+    expect(page.isMfaSelected).toBeFalsy();
+    expect(page.isUserDirectorySelected).toBeFalsy();
+    expect(page.isEmailNotificationsSelected).toBeFalsy();
+    expect(page.isSubscriptionKeySelected).toBeTruthy();
+    expect(page.isInternationalizationSelected).toBeFalsy();
+    expect(page.isAccountRecoverySelected).toBeFalsy();
+  });
+
+  it('As AD, I should see the internationalization details area', async() => {
+    page = new AdministrationWorkspacePage(context, defaultProps(AdministrationWorkspaceMenuTypes.INTERNATIONALIZATION));
+    await waitFor(() => {});
+    expect(page.isMfaSelected).toBeFalsy();
+    expect(page.isUserDirectorySelected).toBeFalsy();
+    expect(page.isEmailNotificationsSelected).toBeFalsy();
+    expect(page.isSubscriptionKeySelected).toBeFalsy();
+    expect(page.isInternationalizationSelected).toBeTruthy();
+    expect(page.isAccountRecoverySelected).toBeFalsy();
+  });
+
+  it('As AD, I should see the account recovery details area', async() => {
+    page = new AdministrationWorkspacePage(context, defaultProps(AdministrationWorkspaceMenuTypes.ACCOUNT_RECOVERY));
+    await waitFor(() => {});
+    expect(page.isMfaSelected).toBeFalsy();
+    expect(page.isUserDirectorySelected).toBeFalsy();
+    expect(page.isEmailNotificationsSelected).toBeFalsy();
+    expect(page.isSubscriptionKeySelected).toBeFalsy();
+    expect(page.isInternationalizationSelected).toBeFalsy();
+    expect(page.isAccountRecoverySelected).toBeTruthy();
   });
 });
 

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

@@ -13,7 +13,6 @@
  * @since         2.11.0
  */
 
-
 import {render} from "@testing-library/react";
 import React from "react";
 import {BrowserRouter as Router} from "react-router-dom";
@@ -50,17 +49,38 @@ export default class AdministrationWorkspacePage {
   }
 
   /**
-   * Returns true if the mfa area is visible
+   * Returns true if the user directory area is visible
    */
   get isUserDirectorySelected() {
     return Boolean(this._page.container.querySelector('.user-directory-details'));
   }
 
   /**
-   * Returns true if the mfa area is visible
+   * Returns true if the email notifications area is visible
    */
   get isEmailNotificationsSelected() {
     return Boolean(this._page.container.querySelector('.email-notifications-details'));
   }
+
+  /**
+   * Returns true if the subscription key area is visible
+   */
+  get isSubscriptionKeySelected() {
+    return Boolean(this._page.container.querySelector('.subscription-key-details'));
+  }
+
+  /**
+   * Returns true if the internationalization area is visible
+   */
+  get isInternationalizationSelected() {
+    return Boolean(this._page.container.querySelector('.internationalization-details'));
+  }
+
+  /**
+   * Returns true if the account recovery area is visible
+   */
+  get isAccountRecoverySelected() {
+    return Boolean(this._page.container.querySelector('.account-recovery-details'));
+  }
 }
 

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

@@ -0,0 +1,254 @@
+/**
+ * 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, Fragment} 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 {withAppContext} from "../../../contexts/AppContext";
+import {DateTime} from "luxon";
+
+class ConfirmSaveAccountRecoverySettings extends Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.getDefaultState();
+    this.bindCallbacks();
+  }
+
+  /**
+   * Returns the default component state
+   */
+  getDefaultState() {
+    return {
+      processing: false
+    };
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  /**
+   * Handle close button click.
+   */
+  handleClose() {
+    this.props.onClose();
+  }
+
+  /**
+   * 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} event A form submit event
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    await this.toggleProcessing();
+    try {
+      await this.props.onSubmit();
+      this.props.onClose();
+    } catch (error) {
+      await this.toggleProcessing();
+      if (error.name === "UserAbortsOperationError") {
+        // It can happen when the user has closed the passphrase entry dialog by instance. Do nothing.
+      } else {
+        // The component passing the onSubmit prop should take care of any unexpected errors, this code should not run.
+        console.error('Uncaught uncontrolled error');
+        throw error;
+      }
+    }
+  }
+
+  /**
+   * format fingerprint
+   * @param fingerprint
+   * @returns {JSX.Element}
+   */
+  formatFingerprint(fingerprint) {
+    fingerprint = fingerprint || "";
+    const result = fingerprint.toUpperCase().replace(/.{4}/g, '$& ');
+    return <>{result.substr(0, 24)}<br/>{result.substr(25)}</>;
+  }
+
+  /**
+   * format user ids
+   * @param user_ids
+   * @returns {JSX.Element}
+   */
+  formatUserIds(user_ids) {
+    user_ids = user_ids || [];
+    return user_ids.map((user, id) => <Fragment key={id}>{user.name}&lt;{user.email}&gt;<br/></Fragment>);
+  }
+
+  /**
+   * Format date in time ago
+   * @param {string} date The date to format
+   * @return {string}
+   */
+  formatDateTimeAgo(date) {
+    if (date === 'Never') {
+      return 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});
+  }
+
+  /**
+   * Format date
+   * @param {string} date The date to format
+   * @return {string}
+   */
+  formatDate(date) {
+    return DateTime.fromJSDate(new Date(date)).setLocale(this.props.context.locale).toLocaleString(DateTime.DATETIME_FULL);
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <DialogWrapper
+        title={this.translate("Save Settings Summary")}
+        onClose={this.handleClose}
+        disabled={this.state.processing}
+        className="save-recovery-account-settings-dialog">
+        <form onSubmit={this.handleSubmit}>
+          <div className="form-content">
+            {this.props.policy &&
+              <>
+                <label><Trans>New Account Recovery Policy</Trans></label>
+                <div className="radiolist-alt">
+                  <div className="input radio">
+                    <label htmlFor="accountPolicy">
+                      <span className="name">
+                        {{
+                          mandatory: <Trans>Mandatory</Trans>,
+                          'opt-out': <Trans>Optional, Opt-out</Trans>,
+                          'opt-in': <Trans>Optional, Opt-in</Trans>,
+                          disabled: <Trans>Disable</Trans>
+                        }[this.props.policy]}
+                      </span>
+                      <span className="info">
+                        {{
+                          mandatory: <><Trans>Every user is required to provide a copy of their private key and passphrase during setup.</Trans><br/><Trans>Warning: You should inform your users not to store personal passwords.</Trans></>,
+                          'opt-out': <Trans>Every user will be prompted to provide a copy of their private key and passphrase by default during the setup, but they can opt out.</Trans>,
+                          'opt-in': <Trans>Every user can decide to provide a copy of their private key and passphrase by default during the setup, but they can opt in.</Trans>,
+                          disabled: <><Trans>Backup of the private key and passphrase will not be stored. This is the safest option.</Trans><br/><Trans>Warning: If users lose their private key and passphrase they will not be able to recover their account.</Trans></>
+                        }[this.props.policy]}
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </>
+            }
+            {this.props.keyInfo &&
+              <>
+                <label><Trans>New Organization Recovery Key</Trans></label>
+                <div className="recovery-key-details">
+                  <table className="table-info recovery-key">
+                    <tbody>
+                      <tr className="user-ids">
+                        <td className="label"><Trans>Uid</Trans></td>
+                        <td className="value">{this.formatUserIds(this.props.keyInfo.user_ids)}</td>
+                      </tr>
+                      <tr className="fingerprint">
+                        <td className="label"><Trans>Fingerprint</Trans></td>
+                        <td className="value">{this.formatFingerprint(this.props.keyInfo.fingerprint)}</td>
+                      </tr>
+                      <tr className="algorithm">
+                        <td className="label"><Trans>Algorithm</Trans></td>
+                        <td className="value">{this.props.keyInfo.algorithm}</td>
+                      </tr>
+                      <tr className="key-length">
+                        <td className="label"><Trans>Key length</Trans></td>
+                        <td className="value">{this.props.keyInfo.length}</td>
+                      </tr>
+                      <tr className="created">
+                        <td className="label"><Trans>Created</Trans></td>
+                        <td className="value">{this.formatDate(this.props.keyInfo.created)}</td>
+                      </tr>
+                      <tr className="expires">
+                        <td className="label"><Trans>Expires</Trans></td>
+                        <td className="value">{this.formatDateTimeAgo(this.props.keyInfo.expires)}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </>
+            }
+          </div>
+          <div className="warning message">
+            <Trans>Warning, Please review carefully this configuration as it will not be trivial to change this later.</Trans>
+          </div>
+          <div className="submit-wrapper clearfix">
+            <button className={`button button-left ${this.isProcessing ? "disabled" : ''}`} type="button">{this.translate("Learn More")}</button>
+            <FormSubmitButton
+              value={this.translate("Save")}
+              disabled={this.isProcessing}
+              processing={this.isProcessing}
+              warning={true}/>
+            <button
+              className={`button cancel ${this.isProcessing ? "disabled" : ''}`}
+              role="button"
+              type="button"
+              onClick={this.handleClose}
+              disabled={this.isProcessing}>
+              <span><Trans>Cancel</Trans></span>
+            </button>
+          </div>
+        </form>
+      </DialogWrapper>
+    );
+  }
+}
+
+ConfirmSaveAccountRecoverySettings.propTypes = {
+  context: PropTypes.any, // The application context
+  onClose: PropTypes.func, // Callback when the dialog must be closed
+  onSubmit: PropTypes.func, // The submit callback
+  policy: PropTypes.string, // The account recovery policy if any change of policy
+  keyInfo: PropTypes.object, // The account recovery public key details if any change of key
+  t: PropTypes.func, // The translation function
+};
+export default withAppContext(withTranslation('common')(ConfirmSaveAccountRecoverySettings));

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

@@ -0,0 +1,153 @@
+/**
+ * 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 {*}
+ */
+import {DateTime} from "luxon";
+import {defaultAppContext} from "../../../contexts/ExtAppContext.test.data";
+
+/**
+ * Default props.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function defaultProps(props = {}) {
+  const _props = {
+    context: defaultAppContext(props?.context),
+    policy: "opt-in",
+    keyInfo: null,
+    onClose: jest.fn(),
+    onCancel: jest.fn(),
+    onSubmit: jest.fn(),
+    onError: jest.fn(),
+  };
+  delete props.context; // Treated in the default
+  return Object.assign(_props, props);
+}
+
+/**
+ * Has changed policy.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function hasChangedPolicyProps(props = {}) {
+  const _props = {
+    context: defaultAppContext(),
+    policy: "mandatory",
+    keyInfo: {
+      user_ids: [{
+        name: "ada",
+        email: "ada@passbolt.com"
+      }, {
+        name: "betty",
+        email: "betty@passbolt.com"
+      }],
+      fingerprint: "0c1d1761110d1e33c9006d1a5b1b332ed06426d3",
+      algorithm: "RSA",
+      length: "4096",
+      created: "2020-09-01T13:11:08+00:00",
+      expires: "Never"
+    }
+  };
+  return defaultProps(Object.assign(_props, props));
+}
+
+/**
+ * Format date in time ago
+ * @param {string} date The date to format
+ * @return {string}
+ */
+export function formatDateTimeAgo(date) {
+  if (date === 'Never') {
+    return date;
+  }
+  const dateTime = DateTime.fromISO(date);
+  const duration = dateTime.diffNow().toMillis();
+  return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative();
+}
+
+export function formatDate(date) {
+  return DateTime.fromJSDate(new Date(date)).setLocale("en-UK").toLocaleString(DateTime.DATETIME_FULL);
+}
+
+/**
+ * Disabled policy props
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function disabledPolicyProps(props = {}) {
+  const _props = {
+    policy: "disabled",
+  };
+  return defaultProps(Object.assign(_props, props));
+}
+
+/**
+ * Mandatory policy props with organization key
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function mandatoryPolicyPropsWithOrganisationKey(props = {}) {
+  const _props = {
+    policy: "mandatory",
+    keyInfo: {
+      fingerprint: "0c1d1761110d1e33c9006d1a5b1b332ed06426d3",
+      algorithm: "RSA",
+      length: "4096",
+      created: "2020-09-01T13:11:08+00:00",
+      expires: "Never"
+    }
+  };
+  return defaultProps(Object.assign(_props, props));
+}
+
+/**
+ * Opt-in policy props with organization key
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function optInPolicyPropsWithOrganisationKey(props = {}) {
+  const _props = {
+    policy: "opt-in",
+    keyInfo: {
+      fingerprint: "0c1d1761110d1e33c9006d1a5b1b332ed06426d3",
+      algorithm: "RSA",
+      length: "4096",
+      created: "2020-09-01T13:11:08+00:00",
+      expires: "Never"
+    }
+  };
+  return defaultProps(Object.assign(_props, props));
+}
+
+/**
+ * Opt-out policy props with organization key
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function optOutPolicyPropsWithOrganisationKey(props = {}) {
+  const _props = {
+    policy: "opt-out",
+    keyInfo: {
+      fingerprint: "0c1d1761110d1e33c9006d1a5b1b332ed06426d3",
+      algorithm: "RSA",
+      length: "4096",
+      created: "2020-09-01T13:11:08+00:00",
+      expires: "Never"
+    }
+  };
+  return defaultProps(Object.assign(_props, props));
+}