passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/Authentication/CheckPassphrase/CheckPassphrase.test.stories.js

@@ -1,33 +1,50 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 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) 2020 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.0.0
+ */
+
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
-import CheckPassphrase from "./CheckPassphrase";
-
+import CheckPassphrase, {CheckPassphraseVariations} from "./CheckPassphrase";
+import {defaultProps} from "./CheckPassphrase.test.data";
 
 export default {
   title: 'Passbolt/Authentication/CheckPassphrase',
   component: CheckPassphrase
 };
 
-const context = {
-};
-
-
 const Template = args =>
-  <AuthenticationContext.Provider value={context}>
-    <div id="container" className="container page login">
-      <div className="content">
-        <div className="login-form">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <CheckPassphrase {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <CheckPassphrase {...args} {...routerProps}/>}/>
+        </MemoryRouter>
       </div>
     </div>
-  </AuthenticationContext.Provider>;
+  </div>;
 
-
-export const Initial = Template.bind({});
-Initial.parameters = {
+const defaultParameters = {
   css: "ext_authentication"
 };
+
+export const Setup = Template.bind({});
+Setup.args = defaultProps();
+Setup.parameters = defaultParameters;
+
+export const SetupWithRememberMe = Template.bind({});
+SetupWithRememberMe.args = defaultProps({canRememberMe: true});
+SetupWithRememberMe.parameters = defaultParameters;
+
+export const Recover = Template.bind({});
+Recover.args = defaultProps({displayAs: CheckPassphraseVariations.RECOVER});
+Recover.parameters = defaultParameters;

package/src/react-extension/components/Authentication/ChooseAccountRecoveryPreference/ChooseAccountRecoveryPreference.js

@@ -0,0 +1,191 @@
+/**
+ * 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";
+
+class ChooseAccountRecoveryPreference extends Component {
+  /**
+   * Default constructor
+   * @param {object} props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.getDefaultState(props);
+    this.bindCallbacks();
+  }
+
+  /**
+   * Returns the default component state
+   */
+  getDefaultState(props) {
+    const status = props.policy === "opt-in" ? "rejected" : "approved";
+    return {
+      status: status,
+      processing: false,
+    };
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.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) {
+    // Avoid the form to be submitted.
+    event.preventDefault();
+    await this.toggleProcessing();
+    this.complete();
+  }
+
+  /**
+   * Whenever the user wants to complete the step.
+   */
+  complete() {
+    this.props.onComplete(this.state.status);
+  }
+
+  /**
+   * Handle form input changes.
+   * @params {ReactEvent} The react event
+   * @returns {void}
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value
+    });
+  }
+
+  /**
+   * Can the user reject to join the account recovery program.
+   * @returns {boolean}
+   */
+  canReject() {
+    return this.props.policy !== "mandatory";
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="recovery-account-setup-extension">
+        <h1><Trans>Account recovery</Trans> ({{
+          ["opt-in"]: <Trans>Optional</Trans>,
+          ["opt-out"]: <Trans>Recommended</Trans>,
+          ["mandatory"]: <Trans>Mandatory</Trans>
+        }[this.props.policy]})</h1>
+        <form onSubmit={this.handleSubmit}>
+          <p>
+            <Trans>It is possible and recommended to share securely a copy of your private key and passphrase
+              with your organization recovery contacts.</Trans> <Trans>They will be able to help you in case you lose them.</Trans>
+          </p>
+          <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 agree to share this info 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 this info with my organization recovery contacts</Trans>
+                </span>
+              </label>
+            </div>
+          </div>
+          <div className="form-actions">
+            <button
+              type="submit"
+              className={`button primary big full-width ${this.isProcessing ? "processing" : ""}`}
+              role="button"
+              disabled={this.isProcessing}>
+              <Trans>Next</Trans>
+            </button>
+            {this.props.canGenerateNewKeyInstead &&
+            <a className={`generate-new-key ${this.isProcessing ? "disabled" : ""}`}
+              onClick={this.props.onGenerateNewKeyInstead}
+              role="button">
+              <Trans>Generate new key instead</Trans>
+            </a>
+            }
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+ChooseAccountRecoveryPreference.defaultProps = {
+  canGenerateNewKeyInstead: false,
+};
+
+ChooseAccountRecoveryPreference.propTypes = {
+  policy: PropTypes.oneOf([
+    "opt-in",
+    "opt-out",
+    "mandatory"
+  ]).isRequired, // The account recovery organization policy.
+  onComplete: PropTypes.func.isRequired, // Callback to trigger when the user chose its preference.
+  canGenerateNewKeyInstead: PropTypes.bool, // Can generate new key
+  onGenerateNewKeyInstead: PropTypes.func, // Callback to trigger when the user wants to generate a new key instead.
+};
+export default withTranslation("common")(ChooseAccountRecoveryPreference);

package/src/react-extension/components/Authentication/ChooseAccountRecoveryPreference/ChooseAccountRecoveryPreference.test.data.js

@@ -0,0 +1,90 @@
+/**
+ * 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 {{}}
+ */
+export function defaultProps(props) {
+  const defaultProps = {
+    policy: 'mandatory',
+    onComplete: () => {},
+    canGenerateNewKeyInstead: true,
+    onGenerateNewKeyInstead: () => {}
+  };
+  return Object.assign(defaultProps, props || {});
+}
+
+/**
+ * Mandatory policy props
+ * @returns {*}
+ */
+export function mandatoryPolicyProps() {
+  return defaultProps({
+    policy: 'mandatory',
+  });
+}
+
+/**
+ * Opt-In policy props
+ * @returns {*}
+ */
+export function optInPolicyProps() {
+  return defaultProps({
+    policy: 'opt-in',
+  });
+}
+
+/**
+ * OptOut policy props
+ * @returns {*}
+ */
+export function optOutPolicyProps() {
+  return defaultProps({
+    policy: 'opt-out',
+  });
+}
+
+/**
+ * Mandatory policy props with imported key
+ * @returns {*}
+ */
+export function mandatoryPolicyPropsWithImportedKey() {
+  return defaultProps({
+    policy: 'mandatory',
+    canGenerateNewKeyInstead: true,
+  });
+}
+
+/**
+ * Opt-In policy props with imported key
+ * @returns {*}
+ */
+export function optInPolicyPropsWithImportedKey() {
+  return defaultProps({
+    policy: 'opt-in',
+    canGenerateNewKeyInstead: true,
+  });
+}
+
+/**
+ * OptOut policy props with imported key
+ * @returns {*}
+ */
+export function optOutPolicyPropsWithImportedKey() {
+  return defaultProps({
+    policy: 'opt-out',
+    canGenerateNewKeyInstead: true,
+  });
+}

package/src/react-extension/components/Authentication/ChooseAccountRecoveryPreference/ChooseAccountRecoveryPreference.test.js

@@ -0,0 +1,92 @@
+/**
+ * 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 ChooseAccountRecoveryPreference in regard of specifications
+ */
+import {
+  defaultProps, optInPolicyProps, optOutPolicyProps,
+} from "./ChooseAccountRecoveryPreference.test.data";
+import ChooseAccountRecoveryPreferencePage from "./ChooseAccountRecoveryPreference.test.page";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("See the Choose Account Recovery Preference page", () => {
+  let page; // The page to test again
+
+  describe('As user in the setup process, I can see the account recovery setup page', () => {
+    /**
+     * I should see the account recovery setup page
+     */
+    it('As user in the setup process who generated an OpenPGP key, I can see the Mandatory account recovery setup page', async() => {
+      expect.assertions(5);
+      const props = defaultProps(); // The props to pass
+      page = new ChooseAccountRecoveryPreferencePage(props);
+
+      // Dialog title exists and correct
+      expect(page.exists()).toBeTruthy();
+      expect(page.title).toBe("Account recovery (Mandatory)");
+
+      // input radio
+      expect(page.acceptRadioButton.isChecked).toBeTruthy();
+
+      // next button exists
+      expect(page.nextButton.textContent).toBe("Next");
+
+      // generate new key button exists
+      expect(page.generateNewKeyButton.textContent).toBe('Generate new key instead');
+    });
+
+    it('As user in the setup process who generated an OpenPGP key, I can see the Opt-out account recovery setup page', async() => {
+      expect.assertions(4);
+      const props = optOutPolicyProps(); // The props to pass
+      page = new ChooseAccountRecoveryPreferencePage(props);
+
+      // Dialog title exists and correct
+      expect(page.exists()).toBeTruthy();
+      expect(page.title).toBe("Account recovery (Recommended)");
+
+      // input radio
+      expect(page.acceptRadioButton.isChecked).toBeTruthy();
+      expect(page.rejectRadioButton.isChecked).toBeFalsy();
+    });
+
+    it('As user in the setup process who generated an OpenPGP key, I can see the Opt-in account recovery setup page', async() => {
+      expect.assertions(4);
+      const props = optInPolicyProps(); // The props to pass
+      page = new ChooseAccountRecoveryPreferencePage(props);
+
+      // Dialog title exists and correct
+      expect(page.exists()).toBeTruthy();
+      expect(page.title).toBe("Account recovery (Optional)");
+
+      // input radio
+      expect(page.acceptRadioButton.isChecked).toBeFalsy();
+      expect(page.rejectRadioButton.isChecked).toBeTruthy();
+    });
+
+    it('As user I can go generate a new key', async() => {
+      const onGenerateNewKeyInstead = jest.fn(() => Promise.resolve());
+      const props = defaultProps({onGenerateNewKeyInstead}); // The props to pass
+      page = new ChooseAccountRecoveryPreferencePage(props);
+
+      expect.assertions(2);
+      expect(page.exists()).toBeTruthy();
+      await page.goToGenerateNewKey();
+      expect(onGenerateNewKeyInstead).toHaveBeenCalled();
+    });
+  });
+});

package/src/react-extension/components/Authentication/ChooseAccountRecoveryPreference/ChooseAccountRecoveryPreference.test.page.js

@@ -0,0 +1,109 @@
+/**
+ * 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 ChooseAccountRecoveryPreference from "./ChooseAccountRecoveryPreference";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The ChooseAccountRecoveryPreference component represented as a page
+ */
+export default class ChooseAccountRecoveryPreferencePage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <ChooseAccountRecoveryPreference {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the account recovery preference element
+   */
+  get accountRecoveryPreference() {
+    return this._page.container.querySelector('.recovery-account-setup-extension');
+  }
+
+  /**
+   * Returns the title element
+   */
+  get title() {
+    return this._page.container.querySelector('.recovery-account-setup-extension h1').textContent;
+  }
+
+  /**
+   * Returns the reject radio button element
+   */
+  get rejectRadioButton() {
+    const element = this._page.container.querySelector('#statusRecoverAccountReject');
+    return {
+      get element() { return element; },
+      get isChecked()  { return element.checked; }
+    };
+  }
+
+  /**
+   * Returns the accept radio button element
+   */
+  get acceptRadioButton() {
+    const element = this._page.container.querySelector('#statusRecoverAccountAccept');
+    return {
+      get element() { return element; },
+      get isChecked()  { return element.checked; }
+    };
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.accountRecoveryPreference !== null;
+  }
+
+  /**
+   * Returns the next button element
+   */
+  get nextButton() {
+    return this._page.container.querySelector('.form-actions button[type=\"submit\"]');
+  }
+
+  /**
+   * Returns the generate new key button element
+   */
+  get generateNewKeyButton() {
+    return this._page.container.querySelector('.form-actions .generate-new-key');
+  }
+
+  /**
+   * next process
+   */
+  async next() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.nextButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Go to generate new key
+   */
+  async goToGenerateNewKey() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.generateNewKeyButton, leftClick);
+    await waitFor(() => {});
+  }
+}

package/src/react-extension/components/Authentication/ChooseAccountRecoveryPreference/ChooseAccountRecoveryPreference.test.stories.js

@@ -0,0 +1,60 @@
+/**
+ * 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 "../../../../css/themes/default/ext_authentication.css";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import ChooseAccountRecoveryPreference from "./ChooseAccountRecoveryPreference";
+import {
+  mandatoryPolicyProps,
+  mandatoryPolicyPropsWithImportedKey, optInPolicyProps,
+  optInPolicyPropsWithImportedKey, optOutPolicyProps, optOutPolicyPropsWithImportedKey
+} from "./ChooseAccountRecoveryPreference.test.data";
+
+
+export default {
+  title: 'Passbolt/Authentication/ChooseAccountRecoveryPreference',
+  component: ChooseAccountRecoveryPreference
+};
+
+const Template = args =>
+  <MockTranslationProvider>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <ChooseAccountRecoveryPreference {...args} {...routerProps}/>}/>
+          </MemoryRouter>
+        </div>
+      </div>
+    </div>
+  </MockTranslationProvider>;
+
+export const MandatoryWithLink = Template.bind({});
+MandatoryWithLink.args = mandatoryPolicyPropsWithImportedKey();
+
+export const OptOutWithLink = Template.bind({});
+OptOutWithLink.args = optOutPolicyPropsWithImportedKey();
+
+export const OptInWithLink = Template.bind({});
+OptInWithLink.args = optInPolicyPropsWithImportedKey();
+
+export const Mandatory = Template.bind({});
+Mandatory.args = mandatoryPolicyProps();
+
+export const OptOut = Template.bind({});
+OptOut.args = optOutPolicyProps();
+
+export const OptIn = Template.bind({});
+OptIn.args = optInPolicyProps();

package/src/react-extension/components/Authentication/ChooseSecurityToken/ChooseSecurityToken.js

@@ -12,13 +12,10 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import {CirclePicker} from "react-color";
-import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
-import NotifyError from "../../Common/Error/NotifyError/NotifyError";
-import {withDialog} from "../../../contexts/DialogContext";
 import PropTypes from "prop-types";
-import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {Trans, withTranslation} from "react-i18next";
+import {CirclePicker} from "react-color";
+import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 
 class ChooseSecurityToken extends Component {
   /**
@@ -189,21 +186,10 @@ class ChooseSecurityToken extends Component {
       textcolor: this.textColor,
       code: this.state.code
     };
-    await this.props.authenticationContext.onSaveSecurityTokenRequested(securityTokenDto)
-      .catch(this.onSaveFailure.bind(this));
-  }
 
-  /**
-   * Whenever the gpg key generation failed
-   * @param error The error
-   */
-  async onSaveFailure(error) {
-    await this.toggleProcessing();
-    const ErrorDialogProps = {message: error.message};
-    this.props.dialogContext.open(NotifyError, ErrorDialogProps);
+    await this.props.onComplete(securityTokenDto);
   }
 
-
   /**
    * Select a token color
    * @param color A color
@@ -285,14 +271,6 @@ class ChooseSecurityToken extends Component {
       || this.state.errors.lengthCode);
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
@@ -368,9 +346,7 @@ class ChooseSecurityToken extends Component {
 }
 
 ChooseSecurityToken.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  dialogContext: PropTypes.any, // The dialog context
-  t: PropTypes.func, // The translation function
+  onComplete: PropTypes.func.isRequired, // The callback function to call when the form is submitted
 };
 
-export default withAuthenticationContext(withDialog(withTranslation('common')(ChooseSecurityToken)));
+export default withTranslation('common')(ChooseSecurityToken);