passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -12,71 +12,30 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
 import {Trans, withTranslation} from "react-i18next";
 import PropTypes from "prop-types";
 
-/**
- * This component downloads autamatically the recovery kit including the GPG key
- */
 class DownloadRecoveryKit extends Component {
   /**
-   * Default contrustor
-   */
-  constructor(props) {
-    super(props);
-    this.bindEventHandlers();
-  }
-
-  /**
-   * Whenever the component is mounted
+   * ComponentDidMount
+   * @return {void}
    */
   componentDidMount() {
-    this.download();
+    this.props.onDownload();
   }
 
   /**
-   * Binds the component event handlers
-   */
-  bindEventHandlers() {
-    this.handleNext = this.handleNext.bind(this);
-    this.handleDownload = this.handleDownload.bind(this);
-  }
-
-  /**
-   * Whenever the user wants to continue the setup
+   * Whenever the user completed the step.
    */
   handleNext() {
-    this.continueSetup();
+    this.props.onComplete();
   }
 
   /**
-   * Whenever the user wants to download the recovery kit again
+   * Whenever the user wants to download the recovery kit again.
    */
   handleDownload() {
-    this.download();
-  }
-
-  /**
-   * Continue the setup process
-   */
-  continueSetup() {
-    this.props.authenticationContext.onRecoveryKitDownloaded();
-  }
-
-  /**
-   * Download the recovery kit
-   */
-  async download() {
-    await this.props.authenticationContext.onDownloadRecoveryKitRequested();
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
+    this.props.onDownload();
   }
 
   /**
@@ -96,13 +55,13 @@ class DownloadRecoveryKit extends Component {
           <button
             type="submit"
             className={`button primary big full-width`}
-            onClick={this.handleNext}
+            onClick={this.handleNext.bind(this)}
             role="button">
             <Trans>Next</Trans>
           </button>
           <a
             id="download-kit"
-            onClick={this.handleDownload}>
+            onClick={this.handleDownload.bind(this)}>
             <Trans>Download the kit again!</Trans>
           </a>
         </div>
@@ -112,8 +71,8 @@ class DownloadRecoveryKit extends Component {
 }
 
 DownloadRecoveryKit.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  t: PropTypes.func, // The translation function
+  onDownload: PropTypes.func.isRequired, // Callback to trigger when the user wants to download its recovery kit.
+  onComplete: PropTypes.func.isRequired, // Callback to trigger when the step is completed.
 };
 
-export default withAuthenticationContext(withTranslation('common')(DownloadRecoveryKit));
+export default withTranslation('common')(DownloadRecoveryKit);

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

@@ -1,24 +1,24 @@
-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) 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
  */
-export function defaultAppContext(appContext) {
-  const defaultAppContext = {
-    port: new MockPort(),
-    onDownloadRecoveryKitRequested: jest.fn(),
-    onRecoveryKitDownloaded: jest.fn(),
-  };
-  return Object.assign(defaultAppContext, appContext || {});
-}
-
 /**
  * Default props
  * @returns {{}}
  */
-export function defaultProps() {
-  return {
+export function defaultProps(props) {
+  const defaultProps = {
+    onComplete: jest.fn(() => Promise.resolve()),
+    onDownload: jest.fn(() => Promise.resolve()),
   };
+  return Object.assign(defaultProps, props || {});
 }

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

@@ -1,39 +1,36 @@
 /**
  * Unit tests on DownloadRecoveryKit in regard of specifications
  */
-import {defaultAppContext, defaultProps} from "./DownloadRecoveryKit.test.data";
+import {defaultProps} from "./DownloadRecoveryKit.test.data";
 import DownloadRecoveryKitPage from "./DownloadRecoveryKit.test.page";
 
-
 beforeEach(() => {
   jest.resetModules();
 });
 
 describe("Download Recovery Kit", () => {
   let page, // The page to test against
-    context; // The context
-  const props = defaultProps(); // The props to pass
+    props; // The props to pass
 
   beforeEach(() => {
-    context = defaultAppContext();
-    page = new DownloadRecoveryKitPage(context, props);
+    props = defaultProps();
+    page = new DownloadRecoveryKitPage(props);
   });
 
   it('As AN on the download recovery kit page I should see the download of my recovery kit starting automatically', async() => {
-    jest.spyOn(context, 'onDownloadRecoveryKitRequested').mockImplementationOnce(jest.fn());
-    expect(context.onDownloadRecoveryKitRequested).toHaveBeenCalled();
+    expect.assertions(1);
+    expect(props.onDownload).toHaveBeenCalled();
   });
 
   it('As AN I should be able to start the download of the recovery kit manually', async() => {
-    const requestMock = jest.spyOn(context, 'onDownloadRecoveryKitRequested').mockImplementationOnce(jest.fn());
-    const expectedDownloadCallCount = 2;
+    expect.assertions(1);
     await page.download();
-    expect(requestMock.mock.calls.length).toBe(expectedDownloadCallCount);
+    expect(props.onDownload).toHaveBeenCalledTimes(2);
   });
 
   it('As AN I should be able to go to the next step “choose a security token', async() => {
-    jest.spyOn(context, 'onRecoveryKitDownloaded').mockImplementationOnce(jest.fn());
+    expect.assertions(1);
     await page.next();
-    expect(context.onRecoveryKitDownloaded).toHaveBeenCalled();
+    expect(props.onComplete).toHaveBeenCalled();
   });
 });

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

@@ -1,6 +1,19 @@
+/**
+ * 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 {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
-import AuthenticationContextProvider from "../../../contexts/AuthenticationContext";
 import DownloadRecoveryKit from "./DownloadRecoveryKit";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
@@ -10,15 +23,12 @@ import MockTranslationProvider from "../../../test/mock/components/International
 export default class DownloadRecoveryKitPage {
   /**
    * Default constructor
-   * @param context Context value
    * @param props Props to attach
    */
-  constructor(context, props) {
+  constructor(props) {
     this._page = render(
       <MockTranslationProvider>
-        <AuthenticationContextProvider value={context}>
-          <DownloadRecoveryKit {...props} />
-        </AuthenticationContextProvider>
+        <DownloadRecoveryKit {...props} />
       </MockTranslationProvider>
     );
   }

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

@@ -1,30 +1,36 @@
+/**
+ * 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 DownloadRecoveryKit from "./DownloadRecoveryKit";
 
-
 export default {
   title: 'Passbolt/Authentication/DownloadRecoveryKit',
   component: DownloadRecoveryKit
 };
 
-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 => <DownloadRecoveryKit {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DownloadRecoveryKit {...args} {...routerProps}/>}/>
+        </MemoryRouter>
       </div>
     </div>
-  </AuthenticationContext.Provider>;
+  </div>;
 
 
 export const Initial = Template.bind({});

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

@@ -1,12 +1,25 @@
+/**
+ * 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 SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
 import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
 
 /**
  * Default props
- * @returns {object}
+ * @returns {{}}
  */
-export function defaultProps() {
-  return {
+export function defaultProps(props) {
+  const defaultProps = {
     context: {
       setContext: jest.fn(),
       siteSettings: new SiteSettings(siteSettingsFixture),
@@ -17,4 +30,5 @@ export function defaultProps() {
       onRegistrationRequested: () => {},
     }
   };
+  return Object.assign(defaultProps, props || {});
 }

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

@@ -1,4 +1,3 @@
-
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)

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

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

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

@@ -1,22 +1,39 @@
+/**
+ * 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         2.11.0
+ */
+
 import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
 import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
 
+export function defaultAppContext(context) {
+  const defaultAppContext = {
+    setContext: jest.fn(),
+    siteSettings: new SiteSettings(siteSettingsFixture),
+    trustedDomain: "http://127.0.0.1:3001"
+  };
+  return Object.assign(defaultAppContext, context || {});
+}
+
 /**
  * Default props
- * @returns {object}
+ * @returns {{}}
  */
-export function defaultProps(data) {
-  data = data || {};
-  const props = {
-    context: {
-      setContext: jest.fn(),
-      siteSettings: new SiteSettings(siteSettingsFixture),
-      trustedDomain: "http://127.0.0.1:3001"
-    },
+export function defaultProps(props) {
+  const defaultProps = {
+    context: defaultAppContext(),
     apiTriageContext: {
       onTriageRequested: () => {},
     }
   };
-
-  return Object.assign(props, data);
+  return Object.assign(defaultProps, props || {});
 }

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

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

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

@@ -1,9 +1,22 @@
+/**
+ * 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)
+ */
+
 /**
  * Default props
- * @returns {{dialogContext: {open: jest.Mock}, context: {onCheckIsAuthenticatedRequested: jest.Mock}}}
+ * @returns {{}}
  */
-export function defaultProps() {
-  return {
+export function defaultProps(props) {
+  const defaultProps = {
     context: {
       onCheckIsAuthenticatedRequested: jest.fn()
     },
@@ -11,4 +24,5 @@ export function defaultProps() {
       open: jest.fn()
     }
   };
+  return Object.assign(defaultProps, props || {});
 }

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

@@ -12,11 +12,18 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import NotifyError from "../../Common/Error/NotifyError/NotifyError";
-import {withDialog} from "../../../contexts/DialogContext";
-import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
 import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
+
+/**
+ * The component display variations.
+ * @type {Object}
+ */
+export const ImportGpgKeyVariations = {
+  SETUP: 'Setup',
+  RECOVER: 'Recover'
+};
 
 /**
  * This component allows the user to import his Gpg key
@@ -139,13 +146,14 @@ class ImportGpgKey extends Component {
    * Verify and save the private gpg key
    */
   async save() {
-    await this.props.authenticationContext.onImportGpgKeyRequested(this.state.privateKey)
+    await this.props.onComplete(this.state.privateKey)
       .catch(this.onSaveFailure.bind(this));
   }
 
   /**
    * Whenever the gpg key import failed
-   * @param error The error
+   * @param {Error} error The error
+   * @throw {Error} If an unexpected errors hits the component. Errors not of type: InvalidMasterPasswordError.
    */
   async onSaveFailure(error) {
     // It can happen when some key validation went wrong.
@@ -153,8 +161,7 @@ class ImportGpgKey extends Component {
     if (error.name === "GpgKeyError") {
       this.setState({errors: {invalidPrivateKey: true}, errorMessage: error.message});
     } else {
-      const ErrorDialogProps = {message: error.message};
-      this.props.dialogContext.open(NotifyError, ErrorDialogProps);
+      throw error;
     }
   }
 
@@ -186,16 +193,25 @@ class ImportGpgKey extends Component {
   }
 
   /**
-   * Validate the security token data
+   * Validate the imported private key
    */
   async validate() {
     const {privateKey} = this.state;
-    const emptyPrivateKey =  privateKey.trim() === '';
+    const emptyPrivateKey = privateKey.trim() === '';
     if (emptyPrivateKey) {
-      await this.setState({hasBeenValidated: true, errors: {emptyPrivateKey}});
+      this.setState({hasBeenValidated: true, errors: {emptyPrivateKey}});
       return;
     }
-    await this.setState({hasBeenValidated: true, errors: {}});
+
+    let invalidPrivateKey = false;
+    let errorMessage = "";
+    try {
+      await this.props.validatePrivateGpgKey(privateKey);
+    } catch (e) {
+      invalidPrivateKey = true;
+      errorMessage = e.message;
+    }
+    this.setState({hasBeenValidated: true, errors: {invalidPrivateKey}, errorMessage});
   }
 
   /**
@@ -220,7 +236,12 @@ class ImportGpgKey extends Component {
     const processingClassName = this.isProcessing ? 'processing' : '';
     return (
       <div className="import-private-key">
-        <h1>{this.props.title}</h1>
+        <h1>
+          {{
+            [ImportGpgKeyVariations.SETUP]: <Trans>Please enter your private key to continue.</Trans>,
+            [ImportGpgKeyVariations.RECOVER]: <Trans>Welcome back, please enter your private key to begin the recovery process.</Trans>
+          }[this.props.displayAs]}
+        </h1>
         <form
           acceptCharset="utf-8"
           onSubmit={this.handleSubmit}>
@@ -240,7 +261,8 @@ class ImportGpgKey extends Component {
                 type="file"
                 ref={this.fileUploaderRef}
                 disabled={!this.areActionsAllowed}
-                onChange={this.handleSelectPrivateKeyFile}/>
+                onChange={this.handleSelectPrivateKeyFile}
+                accept="text/plain,.key,.asc"/>
               {this.state.hasBeenValidated &&
               <>
                 {this.state.errors.emptyPrivateKey &&
@@ -261,7 +283,14 @@ class ImportGpgKey extends Component {
               disabled={this.isProcessing}>
               <Trans>Next</Trans>
             </button>
-            {this.props.secondaryAction}
+            {this.props.onSecondaryActionClick &&
+            <a onClick={this.props.onSecondaryActionClick}>
+              {{
+                [ImportGpgKeyVariations.SETUP]: <Trans>Or generate a new private key.</Trans>,
+                [ImportGpgKeyVariations.RECOVER]: <Trans>Help, I lost my private key.</Trans>,
+              }[this.props.displayAs]}
+            </a>
+            }
           </div>
         </form>
       </div>
@@ -269,11 +298,19 @@ class ImportGpgKey extends Component {
   }
 }
 
+ImportGpgKey.defaultProps = {
+  displayAs: ImportGpgKeyVariations.SETUP,
+};
+
 ImportGpgKey.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  title: PropTypes.string, // title
-  dialogContext: PropTypes.any, // The dialog context
-  secondaryAction: PropTypes.any, // Secondary action to display
+  context: PropTypes.object, // The application context
+  onComplete: PropTypes.func.isRequired, // The callback to trigger when the user wants to import its gpg key
+  displayAs: PropTypes.oneOf([
+    ImportGpgKeyVariations.SETUP,
+    ImportGpgKeyVariations.RECOVER
+  ]), // 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, // The translation function
+  validatePrivateGpgKey: PropTypes.func, // The callback to check the validity of the gpg key
 };
-export default withAuthenticationContext(withDialog(withTranslation('common')(ImportGpgKey)));
+export default withAppContext(withTranslation('common')(ImportGpgKey));