passbolt-styleguide 3.5.3 → 3.6.0-alpha1

package/src/react-extension/components/Administration/SelectAccountRecoveryOrganizationKey/SelectAccountRecoveryOrganizationKey.test.page.js

@@ -0,0 +1,262 @@
+/**
+ * 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 SelectAccountRecoveryOrganizationKey from "./SelectAccountRecoveryOrganizationKey";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+const GENERATE_TAB_INDEX = 1;
+
+/**
+ * The SelectAccountRecoveryOrganizationKeyPage component represented as a page
+ */
+export default class SelectAccountRecoveryOrganizationKeyPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <SelectAccountRecoveryOrganizationKey {...props} />
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the Select Account Recovery Organization Key Dialog
+   */
+  get selectAccountRecoveryOrganizationKeyDialog() {
+    return this._page.container.querySelector('.organization-recover-key-dialog');
+  }
+
+  /**
+   * Returns the dialog close element
+   */
+  get closeButton() {
+    return this._page.container.querySelector('.dialog-close');
+  }
+
+  /**
+   * Returns the title element
+   */
+  get title() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .dialog-header-title');
+  }
+
+  /**
+   * Returns all the available tabs
+   */
+  get tabs() {
+    return this._page.container.querySelectorAll('.organization-recover-key-dialog.dialog-wrapper .tab');
+  }
+
+  /**
+   * Get the title in the tab "Import"
+   */
+  get imoprtKeyTitle() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.import-organization-key label[for="organization-recover-form-key"]');
+  }
+
+  /**
+   * Get the textarea in the tab "Import"
+   */
+  get importKeyTextArea() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.import-organization-key #organization-recover-form-key');
+  }
+
+  /**
+   * Get the file input in the tab "Import"
+   */
+  get browseInput() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.import-organization-key .input-file-chooser-wrapper input');
+  }
+
+  /**
+   * Get the text in the pro tip box
+   */
+  get proTipDescription() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .message.notice').textContent;
+  }
+
+  /**
+   * Get the link found in the pro tip box
+   */
+  get proTipLink() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .message.notice a[href]');
+  }
+
+  /**
+   * Get the "Apply" button
+   */
+  get applyButton() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .submit-wrapper input[type="submit"]');
+  }
+
+  /**
+   * Get the HTML element that holds the error message of the "Import" form
+   */
+  get importErrorMessage() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.import-organization-key .error-message');
+  }
+
+  get nameField() {
+    return this._page.container.querySelector('#generate-organization-key-form-name');
+  }
+
+  get emailField() {
+    return this._page.container.querySelector('#generate-organization-key-form-email');
+  }
+
+  get algorithmField() {
+    return this._page.container.querySelector('#generate-organization-key-form-algorithm');
+  }
+
+  get keySizeField() {
+    return this._page.container.querySelector('#generate-organization-key-form-key-size');
+  }
+
+  get passphraseField() {
+    return this._page.container.querySelector('#generate-organization-key-form-password');
+  }
+
+  get showPassphraseButton() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key .password-view');
+  }
+
+  get securityToken() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key .security-token');
+  }
+
+  get passphraseStrength() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key .password-complexity');
+  }
+
+  get warningImportInstead() {
+    return this._page.container.querySelector('#generate-organization-key-setting-overridden-banner');
+  }
+
+  get cancelButton() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .cancel');
+  }
+
+  get generateButton() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .submit-wrapper input[type="submit"]');
+  }
+
+  get generateTab() {
+    return this._page.container.querySelectorAll('.organization-recover-key-dialog.dialog-wrapper .tabs .tab a')[GENERATE_TAB_INDEX];
+  }
+
+  get algorithmTooltip() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key [for="generate-organization-key-form-algorithm"] .tooltip');
+  }
+
+  get keySizeTooltip() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key [for="generate-organization-key-form-keySize"] .tooltip');
+  }
+
+  get nameFieldError() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key .name.error-message');
+  }
+
+  get emailFieldError() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key .email.error-message');
+  }
+
+  get passphraseFieldError() {
+    return this._page.container.querySelector('.organization-recover-key-dialog.dialog-wrapper .form-content.generate-organization-key .password.error-message');
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.selectAccountRecoveryOrganizationKeyDialog !== null;
+  }
+
+  /**
+   * Returns true if the current selected tab is the "Import" one
+   * @returns bool
+   */
+  isImportKeyTabSelected() {
+    return this._page.container.querySelector(".organization-recover-key-dialog.dialog-wrapper .tabs-active-content form .import-organization-key") !== null;
+  }
+
+  /**
+   * Returns true if the current selected tab is the "Generate" one
+   * @returns bool
+   */
+  isGenerateTabSeletect() {
+    return this._page.container.querySelector(".organization-recover-key-dialog.dialog-wrapper .tabs-active-content .generate-organization-key") !== null;
+  }
+
+  /**
+   * Return true if the given field is marked as required
+   * @return bool
+   */
+  isFieldRequired(field) {
+    return field.className.indexOf("required") !== -1;
+  }
+
+  /**
+   * Simulates a user having selected a file from the OS.
+   *
+   * @param {string} fileContent
+   * @param {function} waitForCallback
+   */
+  async userHasSelectedAFile(fileContent, waitForCallback) {
+    fireEvent.change(this.browseInput, {
+      target: {
+        files: [new File([fileContent], 'file.txt', {type: 'plain/text'})],
+      },
+    });
+
+    await waitFor(waitForCallback);
+  }
+
+  /**
+   * Simulates a click on the "Apply" button
+   * @param {function} waitForCallback
+   */
+  async applyChanges(waitForCallback) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.applyButton, leftClick);
+
+    await waitFor(waitForCallback);
+  }
+
+  async clickOnGenerateTab(waitForCallback) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.generateTab, leftClick);
+
+    await waitFor(waitForCallback);
+  }
+
+  async toggleShowPassword(waitForCallback) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.showPassphraseButton, leftClick);
+
+    await waitFor(waitForCallback);
+  }
+
+  async clickOnGenerateButton(waitForCallback) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.generateButton, leftClick);
+
+    await waitFor(waitForCallback);
+  }
+}

package/src/react-extension/components/Administration/SelectAccountRecoveryOrganizationKey/SelectAccountRecoveryOrganizationKey.test.stories.js

@@ -0,0 +1,50 @@
+/**
+ * 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 {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import SelectAccountRecoveryOrganizationKey from "./SelectAccountRecoveryOrganizationKey";
+import "../../../../css/themes/default/api_main.css";
+import AppContext from "../../../contexts/AppContext";
+import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
+
+
+export default {
+  title: 'Passbolt/Administration/SelectAccountRecoveryOrganizationKey',
+  component: SelectAccountRecoveryOrganizationKey
+};
+
+const context = {
+  userSettings: new UserSettings(userSettingsFixture),
+};
+
+const Template = args =>
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <div className="panel main">
+        <div className="panel middle">
+          <div className="workspace-main">
+            <div className="grid grid-responsive-12">
+              <Route component={routerProps => <SelectAccountRecoveryOrganizationKey {...args} {...routerProps}/>}></Route>
+            </div>
+          </div>
+        </div>
+      </div>
+    </MemoryRouter>
+  </AppContext.Provider>;
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -13,50 +13,18 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {withAppContext} from "../../../contexts/AppContext";
-import {
-  AuthenticationContextProcess,
-  withAuthenticationContext
-} from "../../../contexts/AuthenticationContext";
 import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 
 /**
  * This component propose to help the use who lost his gpg key or passphrase
  */
 class AskForAuthenticationHelp extends Component {
   /**
-   * Default contrustor
-   */
-  constructor(props) {
-    super(props);
-    this.bindEventHandlers();
-  }
-
-
-  /**
-   * Handle component event handlers
-   */
-  bindEventHandlers() {
-    this.onGoToImportGpgKeyRequested = this.onGoToImportGpgKeyRequested.bind(this);
-  }
-
-  /**
-   * When the user wants to enter its credentials again
-   */
-  onGoToImportGpgKeyRequested() {
-    if (this.props.authenticationContext.process === AuthenticationContextProcess.SETUP) {
-      this.props.authenticationContext.onGoToImportGpgKeyRequested();
-    } else {
-      this.props.authenticationContext.onInitializeRecoverRequested();
-    }
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
+   * When the user wants to try again.
    */
-  get translate() {
-    return this.props.t;
+  handleClickTryAgain() {
+    this.props.onTryAgain();
   }
 
   /**
@@ -79,7 +47,7 @@ class AskForAuthenticationHelp extends Component {
             rel="noopener noreferrer">
             <Trans>Request new account</Trans>
           </a>
-          <a onClick={this.onGoToImportGpgKeyRequested}>
+          <a onClick={this.handleClickTryAgain.bind(this)}>
             <Trans>I want to try again.</Trans>
           </a>
         </div>
@@ -89,9 +57,8 @@ class AskForAuthenticationHelp extends Component {
 }
 
 AskForAuthenticationHelp.propTypes = {
-  context: PropTypes.object, // The application context
-  authenticationContext: PropTypes.any, // The authentication context
-  t: PropTypes.func, // The translation function
+  context: PropTypes.object.isRequired, // The application context.
+  onTryAgain: PropTypes.func.isRequired, // The callback to trigger when the user wants to try again.
 };
 
-export default withAppContext(withAuthenticationContext(withTranslation('common')(AskForAuthenticationHelp)));
+export default withAppContext(withTranslation('common')(AskForAuthenticationHelp));

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

@@ -0,0 +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.6.0
+ */
+
+/**
+ * Returns the default app context for the unit test
+ * @param appContext An existing app context
+ * @returns {any}
+ */
+export function defaultAppContext(appContext) {
+  const defaultAppContext = {
+    trustedDomain: "https://passbolt.local"
+  };
+  return Object.assign(defaultAppContext, appContext || {});
+}
+
+/**
+ * Default props
+ * @returns {{}}
+ */
+export function defaultProps(props) {
+  const defaultProps = {
+    context: defaultAppContext(),
+    onTryAgain: jest.fn(() => Promise.resolve()),
+  };
+  return Object.assign(defaultProps, props || {});
+}

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

@@ -0,0 +1,40 @@
+/**
+ * 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 "./AskForAuthenticationHelp.test.data";
+import AskForAuthenticationHelpTestPage from "./AskForAuthenticationHelp.test.page";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("AskForAuthenticationHelp", () => {
+  let page, props;
+
+  beforeEach(() => {
+    props = defaultProps(); // The props to pass
+    page = new AskForAuthenticationHelpTestPage(props);
+  });
+
+  it('As AN I should be able to request a new account', async() => {
+    expect.assertions(1);
+    expect(page.requestNewAccountButton.getAttribute("href")).toEqual(`${props.context.trustedDomain}/users/recover`);
+  });
+
+  it('As AN I should be able to try again', async() => {
+    expect.assertions(1);
+    await page.tryAgain();
+    expect(props.onTryAgain).toHaveBeenCalled();
+  });
+});
+

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

@@ -0,0 +1,67 @@
+/**
+ * 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 AskForAuthenticationHelp from "./AskForAuthenticationHelp";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The AskForAuthenticationHelp component represented as a page
+ */
+export default class AskForAuthenticationHelpTestPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <AskForAuthenticationHelp {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the request new account element
+   */
+  get requestNewAccountButton() {
+    return this._page.container.querySelector('.button.primary');
+  }
+
+  /**
+   * Request new account
+   */
+  async requestNewAccount() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.requestNewAccountButton, leftClick);
+  }
+
+  /**
+   * Returns the try again link element
+   */
+  get tryAgainLink() {
+    return this._page.container.querySelector('.form-actions a:not(.primary)');
+  }
+
+  /**
+   * Try again
+   */
+  /**
+   * Request new account
+   */
+  async tryAgain() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.tryAgainLink, leftClick);
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+/**
+ * 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 {Trans, withTranslation} from "react-i18next";
+
+class CheckAccountRecoveryEmail extends Component {
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    // @todo review style as per figma
+    return (
+      <div className="email-sent-instructions">
+        <div className="email-sent-bg">
+        </div>
+        <h1><Trans>Please wait, while your request is processed.</Trans></h1>
+        <p><Trans>As soon as an administrator validates your request you will receive an email link to complete the process.</Trans></p>
+        <p><b><Trans>You need use the same computer and browser to finalize the process.</Trans></b></p>
+      </div>
+    );
+  }
+}
+
+export default withTranslation('common')(CheckAccountRecoveryEmail);

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

@@ -0,0 +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.6.0
+ */
+
+/**
+ * Unit tests on CheckAccountRecoveryEmail in regard of specifications
+ */
+
+import CheckAccountRecoveryEmailTestPage from "./CheckAccountRecoveryEmail.test.page";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("CheckAccountRecoveryEmail", () => {
+  let page; // The page to test against
+
+  beforeEach(() => {
+    page = new CheckAccountRecoveryEmailTestPage();
+  });
+
+  it('As AN I should be notified that an email will be sent to me when an administrator accept my account recovery request', () => {
+    expect(page.exists()).toBeTruthy();
+    expect(page.title).toBe("Please wait, while your request is processed.");
+    expect(page.message).toContain("As soon as an administrator validates your request you will receive an email link to complete the process.");
+  });
+});