passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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 = {

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

@@ -12,15 +12,21 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import Icon from "../../Common/Icons/Icon";
-import SecurityComplexity from "../../../../shared/lib/Secret/SecretComplexity";
-import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
-import NotifyError from "../../Common/Error/NotifyError/NotifyError";
-import {withDialog} from "../../../contexts/DialogContext";
 import PropTypes from "prop-types";
 import debounce from "debounce-promise";
-import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../Common/Icons/Icon";
+import SecurityComplexity from "../../../../shared/lib/Secret/SecretComplexity";
+import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
+
+/**
+ * The component display variations.
+ * @type {Object}
+ */
+export const CreateGpgKeyVariation = {
+  SETUP: 'Setup',
+  GENERATE_ACCOUNT_RECOVERY_GPG_KEY: 'Account recovery request key'
+};
 
 /**
  * The component allows the user to create a Gpg key by automatic generation or by manually importing one
@@ -201,25 +207,7 @@ class CreateGpgKey extends Component {
    */
   async generateGpgKey() {
     await this.toggleProcessing();
-    this.props.authenticationContext.onGenerateGpgKeyRequested(this.state.passphrase)
-      .catch(this.onGpgKeyGeneratedFailure.bind(this));
-  }
-
-  /**
-   * Whenever the gpg key generation failed
-   * @param error The error
-   */
-  async onGpgKeyGeneratedFailure(error) {
-    await this.toggleProcessing();
-    const ErrorDialogProps = {message: error.message};
-    this.props.dialogContext.open(NotifyError, ErrorDialogProps);
-  }
-
-  /**
-   * Request to import the gpg key
-   */
-  importGpgKey() {
-    this.props.authenticationContext.onGoToImportGpgKeyRequested();
+    this.props.onComplete(this.state.passphrase);
   }
 
   /**
@@ -252,7 +240,14 @@ class CreateGpgKey extends Component {
     const disabledClassName = this.mustBeDisabled ? 'disabled' : '';
     return (
       <div className="create-gpg-key">
-        <h1><Trans>Welcome to Passbolt, please select a passphrase!</Trans></h1>
+        <h1>
+          {this.props.displayAs === CreateGpgKeyVariation.SETUP &&
+          <Trans>Welcome to Passbolt, please select a passphrase!</Trans>
+          }
+          {this.props.displayAs === CreateGpgKeyVariation.GENERATE_ACCOUNT_RECOVERY_GPG_KEY &&
+          <Trans>Choose a new passphrase.</Trans>
+          }
+        </h1>
         <form acceptCharset="utf-8" onSubmit={this.handleSubmit} className="enter-passphrase">
           <p>
             <Trans>This passphrase is the only passphrase you will need to remember from now on, choose wisely!</Trans>
@@ -276,7 +271,7 @@ class CreateGpgKey extends Component {
             </a>
             <div className="password-complexity">
               <span className="progress">
-                <span className={`progress-bar ${this.state.passphraseStrength.id}`}></span>
+                <span className={`progress-bar ${this.state.passphraseStrength.id}`}/>
               </span>
             </div>
           </div>
@@ -309,12 +304,13 @@ class CreateGpgKey extends Component {
               disabled={this.mustBeDisabled || this.isProcessing}>
               <Trans>Next</Trans>
             </button>
-            <a
-              id="import-key-link"
-              onClick={this.handleImportGpgKey}
-              disabled={!this.areActionsAllowed}>
-              <Trans>Or use an existing private key.</Trans>
+            {this.props.onSecondaryActionClick &&
+            <a onClick={this.props.onSecondaryActionClick}>
+              {{
+                [CreateGpgKeyVariation.SETUP]: <Trans>Or use an existing private key.</Trans>,
+              }[this.props.displayAs]}
             </a>
+            }
           </div>
         </form>
       </div>
@@ -322,10 +318,18 @@ class CreateGpgKey extends Component {
   }
 }
 
+CreateGpgKey.defaultProps = {
+  displayAs: CreateGpgKeyVariation.SETUP,
+};
+
 CreateGpgKey.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
+  displayAs: PropTypes.PropTypes.oneOf([
+    CreateGpgKeyVariation.SETUP,
+    CreateGpgKeyVariation.GENERATE_ACCOUNT_RECOVERY_GPG_KEY
+  ]), // Defines how the form should be displayed and behaves
+  onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
+  t: PropTypes.func.isRequired, // The translation function
 };
 
-export default withAuthenticationContext(withDialog(withTranslation('common')(CreateGpgKey)));
+export default withTranslation('common')(CreateGpgKey);

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

@@ -1,23 +1,27 @@
-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(),
-    onGenerateGpgKeyRequested: jest.fn()
-  };
-  return Object.assign(defaultAppContext, appContext || {});
-}
+import {CreateGpgKeyVariation} from "./CreateGpgKey";
 
 /**
  * Default props
  * @returns {{}}
  */
-export function defaultProps() {
-  return {
+export function defaultProps(props) {
+  const defaultProps = {
+    displayAs: CreateGpgKeyVariation.SETUP,
+    onComplete: jest.fn(() => Promise.resolve()),
+    onSecondaryActionClick: jest.fn(() => Promise.resolve()),
   };
+  return Object.assign(defaultProps, props || {});
 }