passbolt-styleguide 3.5.3 → 3.6.0-beta1

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);

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

@@ -1,26 +1,25 @@
-import MockPort from "../../../test/mock/MockPort";
-
 /**
- * Returns the default app context for the unit test
- * @param appContext An existing app context
- * @returns {any}
+ * 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.0.0
  */
-export function defaultAppContext(appContext) {
-  const defaultAppContext = {
-    port: new MockPort(),
-    onSaveSecurityTokenRequested: jest.fn()
-  };
-  return Object.assign(defaultAppContext, appContext || {});
-}
 
 /**
  * Default props
- * @returns {{}}
+ * @param {Object} props The props to override
+ * @returns {object}
  */
-export function defaultProps() {
-  return {
-    dialogContext: {
-      open: jest.fn()
-    }
+export function defaultProps(props = {}) {
+  const defaultProps = {
+    onComplete: jest.fn(() => Promise.resolve()),
   };
+  return Object.assign(defaultProps, props);
 }

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

@@ -1,27 +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.0.0
+ */
+
 /**
  * Unit tests on CreateGpgKey in regard of specifications
  */
-import {defaultAppContext, defaultProps} from "./ChooseSecurityToken.test.data";
-import NotifyError from "../../Common/Error/NotifyError/NotifyError";
+import {defaultProps} from "./ChooseSecurityToken.test.data";
 import ChooseSecurityTokenPage from "./ChooseSecurityToken.test.page";
 import "../../../test/lib/crypto/cryptoGetRandomvalues";
 
-
 beforeEach(() => {
   jest.resetModules();
 });
 
 describe("Choose security token", () => {
   let page, // The page to test against
-    context; // The context
-  const props = defaultProps(); // The props to pass
-
-  beforeEach(() => {
-    context = defaultAppContext(); // The context
-    page = new ChooseSecurityTokenPage(context, props);
-  });
+    props; // The props to pass
 
   it('As AN I should be able to choose the color of my security token', async() => {
+    props = defaultProps();
+    page = new ChooseSecurityTokenPage(props);
+
+    expect.assertions(1);
     const colorToPick = '#009688';
     const expectedSelectedColor = 'rgb(0, 150, 136)';
     await page.selectColor(colorToPick);
@@ -29,12 +39,20 @@ describe("Choose security token", () => {
   });
 
   it('As AN I should be able to choose the code of my security token', async() => {
+    props = defaultProps();
+    page = new ChooseSecurityTokenPage(props);
+
+    expect.assertions(1);
     const expectedSelectedCode = '';
     await page.fillCode(expectedSelectedCode);
     expect(page.code).toBe(expectedSelectedCode);
   });
 
   it('As AN I should be able to randomize the code of my security token', async() => {
+    props = defaultProps();
+    page = new ChooseSecurityTokenPage(props);
+
+    expect.assertions(1);
     const colorToPick = '#009688';
     await page.selectColor(colorToPick);
     await page.randomize();
@@ -43,33 +61,43 @@ describe("Choose security token", () => {
 
   it('As AN I cannot update the form fields while submitting the form', async() => {
     let saveResolve = null;
-    const requestMockImpl = jest.fn(() => new Promise(resolve => saveResolve = resolve));
-    jest.spyOn(context, 'onSaveSecurityTokenRequested').mockImplementationOnce(requestMockImpl);
+    const onComplete = jest.fn(() => new Promise(resolve => saveResolve = resolve));
+    props = defaultProps({onComplete});
+    page = new ChooseSecurityTokenPage(props);
+
+    expect.hasAssertions();
     const inProgressFn = () => {
       expect(page.canChange).toBeFalsy();
       saveResolve();
     };
     await page.fillCode('ABC');
     await page.save(inProgressFn);
-    expect(context.onSaveSecurityTokenRequested).toHaveBeenCalled();
+    expect(props.onComplete).toHaveBeenCalled();
     expect(saveResolve).toBeDefined();
   });
 
   it('As AN I should see a processing feedback while submitting the form', async() => {
     let saveResolve = null;
-    const requestMockImpl = jest.fn(() => new Promise(resolve => saveResolve = resolve));
-    jest.spyOn(context, 'onSaveSecurityTokenRequested').mockImplementationOnce(requestMockImpl);
+    const onComplete = jest.fn(() => new Promise(resolve => saveResolve = resolve));
+    props = defaultProps({onComplete});
+    page = new ChooseSecurityTokenPage(props);
+
+    expect.hasAssertions();
     const inProgressFn = () => {
       expect(page.isProcessing).toBeTruthy();
       saveResolve();
     };
     await page.fillCode('ABC');
     await page.save(inProgressFn);
-    expect(context.onSaveSecurityTokenRequested).toHaveBeenCalled();
+    expect(props.onComplete).toHaveBeenCalled();
     expect(saveResolve).toBeDefined();
   });
 
   it('As AN I should see an error if the security token is empty after submitting the form (first validation)', async() => {
+    props = defaultProps();
+    page = new ChooseSecurityTokenPage(props);
+
+    expect.assertions(1);
     const emptyCode = ' ';
     await page.fillCode(emptyCode);
     await page.save();
@@ -77,19 +105,14 @@ describe("Choose security token", () => {
   });
 
   it('As AN I should see an error if the security token is not 3 length after submitting the form (first validation)', async() => {
+    props = defaultProps();
+    page = new ChooseSecurityTokenPage(props);
+
+    expect.assertions(1);
     const notGoodLengthCode = 'AB';
     await page.fillCode(notGoodLengthCode);
     await page.save();
     expect(page.hasNotGoodLengthCode).toBeTruthy();
   });
-
-  it('As AN I should see an error if the submission failed for an unexpected reason', async() => {
-    const expectedError = {message: 'Some error'};
-    jest.spyOn(context, 'onSaveSecurityTokenRequested').mockImplementationOnce(() => Promise.reject(expectedError));
-    jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn());
-    await page.fillCode('ABC');
-    await page.save();
-    expect(props.dialogContext.open).toBeCalledWith(NotifyError, expectedError);
-  });
 });
 

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

@@ -1,6 +1,19 @@
+/**
+ * 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.0.0
+ */
+
 import {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
-import AuthenticationContextProvider from "../../../contexts/AuthenticationContext";
 import ChooseSecurityToken from "./ChooseSecurityToken";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
@@ -10,15 +23,12 @@ import MockTranslationProvider from "../../../test/mock/components/International
 export default class ChooseSecurityTokenPage {
   /**
    * Default constructor
-   * @param context Context value
    * @param props Props to attach
    */
-  constructor(context, props) {
+  constructor(props) {
     this._page = render(
       <MockTranslationProvider>
-        <AuthenticationContextProvider value={context}>
-          <ChooseSecurityToken {...props}/>
-        </AuthenticationContextProvider>
+        <ChooseSecurityToken {...props}/>
       </MockTranslationProvider>
     );
   }
@@ -51,7 +61,6 @@ export default class ChooseSecurityTokenPage {
     return this._page.container.querySelector('.randomize-button-wrapper a');
   }
 
-
   /**
    * Returns the next button element
    */
@@ -59,7 +68,6 @@ export default class ChooseSecurityTokenPage {
     return this._page.container.querySelector('.button.primary');
   }
 
-
   /**
    * Returns true if the user can change something like the token code
    */
@@ -81,7 +89,6 @@ export default class ChooseSecurityTokenPage {
     return Boolean(this._page.container.querySelector('.empty-code'));
   }
 
-
   /**
    * Returns true if the not good code length error message is displayed
    */

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

@@ -1,31 +1,35 @@
+/**
+ * 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.0.0
+ */
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import ChooseSecurityToken from "./ChooseSecurityToken";
 
-
 export default {
   title: 'Passbolt/Authentication/ChooseSecurityToken',
   component: ChooseSecurityToken
 };
 
-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 => <ChooseSecurityToken {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <ChooseSecurityToken {...args} {...routerProps}/>}/>
+        </MemoryRouter>
       </div>
     </div>
-  </AuthenticationContext.Provider>;
-
+  </div>;
 
 export const Initial = Template.bind({});
 Initial.parameters = {