passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -0,0 +1,34 @@
+/**
+ * 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 {defaultProps} from "./DisplayExpiredTokenError.test.data";
+import DisplayExpiredTokenErrorTestPage from "./DisplayExpiredTokenError.test.page";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("DisplayExpiredTokenError", () => {
+  let page, props;
+
+  beforeEach(() => {
+    props = defaultProps(); // The props to pass
+    page = new DisplayExpiredTokenErrorTestPage(props);
+  });
+
+  it('As AN I should be able to request a new invitation', async() => {
+    expect.assertions(1);
+    expect(page.requestNewInvitationButton.getAttribute("href")).toEqual(`${props.context.trustedDomain}/users/recover`);
+  });
+});
+

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

@@ -0,0 +1,49 @@
+/**
+ * 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} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import DisplayExpiredTokenError from "./DisplayExpiredTokenError";
+
+/**
+ * The DisplayExpiredTokenError component represented as a page
+ */
+export default class DisplayExpiredTokenErrorTestPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <DisplayExpiredTokenError {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the request new invitation element
+   */
+  get requestNewInvitationButton() {
+    return this._page.container.querySelector('.button.primary');
+  }
+
+  /**
+   * Request new account
+   */
+  async requestNewInvitation() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.requestNewInvitationButton, leftClick);
+  }
+}

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

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

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

@@ -17,14 +17,6 @@ import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
 
 class DisplayRequireInvitationError extends Component {
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -44,6 +36,5 @@ class DisplayRequireInvitationError extends Component {
 
 DisplayRequireInvitationError.propTypes = {
   context: PropTypes.any, // The application context
-  t: PropTypes.func, // The translation function
 };
 export default withAppContext(withTranslation('common')(DisplayRequireInvitationError));

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

@@ -16,7 +16,7 @@
  * Unit tests on DisplayError in regard of specifications
  */
 
-import DisplayRequireInvitationErrorPage from "./DisplayRequireInvitationErrorPage";
+import DisplayRequireInvitationErrorPage from "./DisplayRequireInvitationError.test.page";
 
 beforeEach(() => {
   jest.resetModules();

package/src/react-extension/components/Authentication/DisplayRequireInvitationError/{DisplayRequireInvitationErrorPage.js → DisplayRequireInvitationError.test.page.js}

@@ -1,4 +1,3 @@
-
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
@@ -24,8 +23,6 @@ import MockTranslationProvider from "../../../test/mock/components/International
 export default class DisplayRequireInvitationErrorPage {
   /**
    * Default constructor
-   * @param appContext An app context
-   * @param props Props to attach
    */
   constructor() {
     this._page = render(

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

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

@@ -14,21 +14,65 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../Common/Icons/Icon";
 
 class DisplayUnexpectedError extends Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindCallbacks();
+  }
+
+  /**
+   * Returns the component default state
+   */
+  get defaultState() {
+    return {
+      showErrorDetails: false // Display flag of the error details area
+    };
+  }
+
+  /**
+   * Bind the component handlers
+   */
+  bindCallbacks() {
+    this.handleErrorDetailsToggle = this.handleErrorDetailsToggle.bind(this);
+  }
+
   /**
    * Whenever the user click on the action
    */
   onClick() {
-    document.location.reload();
+    window.location.reload();
+  }
+
+  /**
+   * Handle the toggle display of error details
+   */
+  handleErrorDetailsToggle() {
+    this.setState({showErrorDetails: !this.state.showErrorDetails});
   }
 
   /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
+   * Does the provided error carry details.
+   * @returns {boolean}
    */
-  get translate() {
-    return this.props.t;
+  get hasErrorDetails() {
+    const error = this.props?.error;
+    return Boolean(error?.details) || Boolean(error?.data);
+  }
+
+  /**
+   * Format the error details as a string.
+   * @returns {string}
+   */
+  formatErrors() {
+    const errorMessage = this.props.error?.details || this.props.error?.data;
+    return JSON.stringify(errorMessage, null, 4);
   }
 
   /**
@@ -38,9 +82,34 @@ class DisplayUnexpectedError extends Component {
   render() {
     return (
       <div className="setup-error">
-        <h1><Trans>Something went wrong.</Trans></h1>
-        <p><Trans>The operation failed with the following error:</Trans></p>
+        <h1>{this.props.title}</h1>
+        <p>{this.props.message}</p>
         <p>{this.props.error && this.props.error.message}</p>
+        {this.hasErrorDetails &&
+          <div className="accordion error-details">
+            <div className="accordion-header">
+              <a onClick={this.handleErrorDetailsToggle}>
+                <Trans>Error details</Trans>
+                <Icon baseline={true} name={this.state.showErrorDetails ? "caret-up" : "caret-down"} />
+              </a>
+            </div>
+            {this.state.showErrorDetails &&
+              <div className="accordion-content">
+                <div className="input text">
+                  <label
+                    htmlFor="js_field_debug"
+                    className="visuallyhidden">
+                    <Trans>Error details</Trans>
+                  </label>
+                  <textarea
+                    id="js_field_debug"
+                    defaultValue={`${this.formatErrors()}`}
+                    readOnly />
+                </div>
+              </div>
+            }
+          </div>
+        }
         <div className="form-actions">
           <button onClick={this.onClick.bind(this)} className="button primary big full-width" role="button"><Trans>Try again</Trans></button>
         </div>
@@ -49,10 +118,22 @@ class DisplayUnexpectedError extends Component {
   }
 }
 
+DisplayUnexpectedError.defaultProps = {
+  title: <Trans>Something went wrong.</Trans>,
+  message: <Trans>The operation failed with the following error:</Trans>,
+};
+
 DisplayUnexpectedError.propTypes = {
+  title: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+  message: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string,
+  ]),
   error: PropTypes.any, // The error to display
-  errorActionLabel: PropTypes.string, // The action label
-  errorActionCallback: PropTypes.func, // The action callback
-  t: PropTypes.func, // The translation function
 };
 export default withTranslation('common')(DisplayUnexpectedError);

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

@@ -0,0 +1,56 @@
+/**
+ * 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 PassboltApiFetchError from "../../../../shared/lib/Error/PassboltApiFetchError";
+import EntityValidationError from "../../../../shared/lib/Error/EntityValidationError";
+
+/**
+ * Default props
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function defaultProps(props = {}) {
+  const defaultProps = {
+    error: new Error("Mocked unexpected error.")
+  };
+  return Object.assign(defaultProps, props);
+}
+
+/**
+ * Passbolt API fetch error props
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function passboltApiFetchErrorProps(props = {}) {
+  const error = new PassboltApiFetchError("Could not finalize API request", {
+    body: {
+      message: "The provided Gpg doesn't fit the minimal requirements.",
+    },
+    code: 403
+  });
+  const defaultProps = {error};
+  return Object.assign(defaultProps, props);
+}
+
+/**
+ * Passbolt Entity validation error props
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function passboltEntityValidationErrorProps(props = {}) {
+  const error = new EntityValidationError("Could not validate Entity");
+  error.addError("algorithm", "enum", "The algorithm value is not included in the supported list.");
+  const defaultProps = {error};
+  return Object.assign(defaultProps, props);
+}

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

@@ -0,0 +1,46 @@
+/**
+ * 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 {defaultProps, passboltApiFetchErrorProps} from "./DisplayUnexpectedError.test.data";
+import DisplayUnexpectedErrorTestPage from "./DisplayUnexpectedError.test.page";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("DisplayUnexpectedError", () => {
+  it('As AN I should be able to try again', async() => {
+    const props = defaultProps();
+    const page = new DisplayUnexpectedErrorTestPage(props);
+
+    expect.assertions(2);
+    Object.defineProperty(window, "location", {
+      value: {reload: jest.fn()},
+    });
+    expect(page.moreDetailsCta).toBeNull();
+    await page.tryAgain();
+    expect(window.location.reload).toHaveBeenCalled();
+  });
+
+  it('As a user I should see error details if the error carry some', async() => {
+    const props = passboltApiFetchErrorProps();
+    const page = new DisplayUnexpectedErrorTestPage(props);
+
+    expect.assertions(3);
+    expect(page.moreDetailsCta).toBeTruthy();
+    await page.showErrorDetails();
+    expect(page.moreDetailsCta).toBeTruthy();
+    expect(page.errorDetails.value).toEqual(JSON.stringify(props.error.data, null, 4));
+  });
+});
+

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

@@ -0,0 +1,79 @@
+/**
+ * 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} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import DisplayUnexpectedError from "./DisplayUnexpectedError";
+
+/**
+ * The DisplayUnexpectedError component represented as a page
+ */
+export default class DisplayUnexpectedErrorTestPage {
+  /**
+   * Default constructor
+   * @param {object} props Props to attach
+   */
+  constructor(props = {}) {
+    this._page = render(
+      <MockTranslationProvider>
+        <DisplayUnexpectedError {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the title
+   */
+  get title() {
+    return this._page.container.querySelector('.setup-error h1').textContent;
+  }
+
+  /**
+   * Returns the try again element
+   */
+  get tryAgainButton() {
+    return this._page.container.querySelector('.button.primary');
+  }
+
+  /**
+   * Returns the more details cta element
+   */
+  get moreDetailsCta() {
+    return this._page.container.querySelector('.error-details a');
+  }
+
+  /**
+   * Returns the more details element
+   */
+  get errorDetails() {
+    return this._page.container.querySelector('.error-details textarea');
+  }
+
+  /**
+   * Request new account
+   */
+  async tryAgain() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.tryAgainButton, leftClick);
+  }
+
+  /**
+   * Show error details
+   */
+  async showErrorDetails() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.moreDetailsCta, leftClick);
+  }
+}

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

@@ -1,33 +1,66 @@
+/**
+ * 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 DisplayUnexpectedError from "./DisplayUnexpectedError";
-
+import {
+  defaultProps,
+  passboltApiFetchErrorProps,
+  passboltEntityValidationErrorProps
+} from "./DisplayUnexpectedError.test.data";
 
 export default {
   title: 'Passbolt/Authentication/DisplayUnexpectedError',
   component: DisplayUnexpectedError
 };
 
-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 => <DisplayUnexpectedError {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUnexpectedError {...args} {...routerProps}/>}/>
+        </MemoryRouter>
       </div>
     </div>
-  </AuthenticationContext.Provider>;
+  </div>;
 
 
 export const Initial = Template.bind({});
+Initial.args = defaultProps();
 Initial.parameters = {
   css: "ext_authentication"
 };
+
+export const SignInError = Template.bind({});
+SignInError.args = defaultProps({
+  title: "Sorry, you have not been signed in.",
+  message: "Something went wrong, the sign in failed with the following error",
+});
+SignInError.parameters = {
+  css: "ext_authentication"
+};
+
+export const ErrorWithData = Template.bind({});
+ErrorWithData.args = passboltApiFetchErrorProps();
+ErrorWithData.parameters = {
+  css: "ext_authentication"
+};
+
+export const ErrorWithDetails = Template.bind({});
+ErrorWithDetails.args = passboltEntityValidationErrorProps();
+ErrorWithDetails.parameters = {
+  css: "ext_authentication"
+};