passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/Administration/SelectAccountRecoveryOrganizationKey/ImportOrganizationKey.js

@@ -0,0 +1,289 @@
+/**
+ * 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 {Trans, withTranslation} from "react-i18next";
+import PropTypes from "prop-types";
+import Icon from "../../Common/Icons/Icon";
+import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
+import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
+import {withAppContext} from "../../../contexts/AppContext";
+
+/**
+ * This component allows to display the import organization key for the administration
+ */
+class ImportOrganizationKey extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindCallbacks();
+    this.createInputRef();
+  }
+
+  /**
+   * Get default state
+   * @returns {Object}
+   */
+  get defaultState() {
+    return {
+      processing: false, // component is processing or not
+      key: "", // The subscription key
+      keyError: "", // The error subscription key
+      hasAlreadyBeenValidated: false, // true if the form has already validated once,
+      selectedFile: null, // the file to import
+    };
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSelectFile = this.handleSelectFile.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSelectOrganizationKeyFile = this.handleSelectOrganizationKeyFile.bind(this);
+  }
+
+  /**
+   * Create DOM nodes or React elements references in order to be able to access them programmatically.
+   */
+  createInputRef() {
+    this.keyInputRef = React.createRef();
+    this.fileUploaderRef = React.createRef();
+  }
+
+  /**
+   * Whenever the user select a organization key file
+   * @param event The file dom event
+   */
+  async handleSelectOrganizationKeyFile(event) {
+    const [organizationFile] = event.target.files;
+    const organizationKey = await this.readOrganizationKeyFile(organizationFile);
+    this.setState({key: organizationKey, selectedFile: organizationFile});
+  }
+
+  /**
+   * Read the selected file and returns its content in text form
+   * @param organizationFile The given file
+   * @return {Promise}
+   */
+  readOrganizationKeyFile(organizationFile) {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+      reader.onloadend = () => {
+        try {
+          resolve(reader.result);
+        } catch (e) {
+          reject(e);
+        }
+      };
+      reader.readAsText(organizationFile);
+    });
+  }
+
+  /**
+   * Validate the key input.
+   * @return {Promise}
+   */
+  async validateKeyInput() {
+    const key = this.state.key.trim();
+    if (key === "") {
+      return Promise.reject(new Error(this.translate("The key can't be empty.")));
+    }
+    return await this.props.context.port.request('passbolt.account-recovery.validate-organization-key', key);
+  }
+
+  /**
+   * Check if the form is valid.
+   * @return {Promise<boolean>}
+   */
+  async validate() {
+    // Reset the form errors.
+    this.setState({
+      keyError: "",
+    });
+
+    return await this.validateKeyInput()
+      .then(() => true)
+      .catch(error => {
+        this.setState({keyError: error.message});
+        return false;
+      });
+  }
+
+  /**
+   * Handle form input change.
+   * @params {ReactEvent} The react event.
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    this.setState({
+      [target.name]: target.value
+    });
+  }
+
+  /**
+   * Handle the selection of a file by file explorer
+   */
+  handleSelectFile() {
+    this.fileUploaderRef.current.click();
+  }
+
+  /**
+   * Handle form submit event.
+   * @params {ReactEvent} The react event
+   * @return {Promise}
+   */
+  async handleFormSubmit(event) {
+    event.preventDefault();
+
+    if (!this.state.processing) {
+      await this.save();
+    }
+  }
+
+  /**
+   * Save the changes.
+   */
+  async save() {
+    await this.setState({hasAlreadyBeenValidated: true});
+    await this.toggleProcessing();
+
+    if (!await this.validate()) {
+      this.handleValidateError();
+      await this.toggleProcessing();
+      return;
+    }
+
+    await this.props.onUpdateOrganizationKey(this.state.key.trim());
+  }
+
+  /**
+   * Handle validation error.
+   */
+  handleValidateError() {
+    this.focusFieldError();
+  }
+
+  /**
+   * Focus the field of the form which is in error state.
+   */
+  focusFieldError() {
+    if (this.state.keyError) {
+      this.keyInputRef.current.focus();
+    }
+  }
+
+  /**
+   * Toggle the processing mode
+   */
+  async toggleProcessing() {
+    await this.setState({processing: !this.state.processing});
+  }
+
+  /**
+   * Should input be disabled? True if state is processing
+   * @returns {boolean}
+   */
+  hasAllInputDisabled() {
+    return this.state.processing;
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Returns the selected file's name
+   */
+  get selectedFilename() {
+    return this.state.selectedFile ? this.state.selectedFile.name : "";
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <form onSubmit={this.handleFormSubmit} noValidate>
+        <div className="form-content import-organization-key">
+          <div className={`input textarea required ${this.state.keyError ? "error" : ""}`}>
+            <label htmlFor="organization-recover-form-key"><Trans>Import an OpenPGP Public key</Trans></label>
+            <textarea id="organization-recover-form-key" name="key" value={this.state.key}
+              onKeyUp={this.handleKeyInputKeyUp} onChange={this.handleInputChange}
+              disabled={this.hasAllInputDisabled()} ref={this.keyInputRef} className="required"
+              placeholder='Add Open PGP Public key' required="required" autoComplete="off" autoFocus={true} />
+          </div>
+          <div className="input-file-chooser-wrapper">
+            <input
+              type="file"
+              ref={this.fileUploaderRef}
+              disabled={this.hasAllInputDisabled()}
+              onChange={this.handleSelectOrganizationKeyFile} />
+
+            <div className="input text">
+              <label htmlFor="dialog-import-private-key">
+                <Trans>Select a file to import</Trans>
+              </label>
+              <div className="input-file-inline">
+                <input
+                  type="text"
+                  disabled={true}
+                  placeholder={this.translate("No file selected")}
+                  defaultValue={this.selectedFilename} />
+                <a
+                  className={`button primary ${this.hasAllInputDisabled() ? "disabled" : ""}`}
+                  onClick={this.handleSelectFile}>
+                  <Icon name="upload-a" />
+                  <span><Trans>Choose a file</Trans></span>
+                </a>
+              </div>
+              {this.state.keyError &&
+                <div className="key error-message">{this.state.keyError}</div>
+              }
+            </div>
+          </div>
+        </div>
+        {!this.state.hasAlreadyBeenValidated &&
+          <div className="message notice">
+            <Icon baseline={true} name="info-circle" />
+            <strong><Trans>Pro tip</Trans>:</strong> <Trans>Learn how to <a href="https://help.passbolt.com/hosting/install/ce/from-source.html#generate-an-openpgp-key" target="_blank" rel="noopener noreferrer">generate a key separately.</a></Trans>
+          </div>
+        }
+        <div className="submit-wrapper clearfix">
+          <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Apply")} />
+          <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.props.onClose} />
+        </div>
+      </form>
+    );
+  }
+}
+
+ImportOrganizationKey.propTypes = {
+  context: PropTypes.object,
+  onUpdateOrganizationKey: PropTypes.func,
+  onClose: PropTypes.func,
+  t: PropTypes.func, // The translation function
+};
+
+export default withAppContext(withTranslation('common')(ImportOrganizationKey));

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

@@ -0,0 +1,188 @@
+/**
+ * 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 ConfirmSaveAccountRecoverySettings in regard of specifications
+ */
+import {waitFor} from "@testing-library/react";
+import SelectAccountRecoveryOrganizationKeyPage from "./SelectAccountRecoveryOrganizationKey.test.page";
+import MockPort from "../../../test/mock/MockPort";
+
+const originalClipboard = global.navigator.clipboard;
+
+beforeEach(() => {
+  jest.resetModules();
+  let clipboardData = ''; //initalizing clipboard data so it can be used in testing
+  const mockClipboard = {
+    writeText: jest.fn(data => clipboardData = data),
+    readText: jest.fn(() => document.activeElement.value = clipboardData),
+  };
+  global.navigator.clipboard = mockClipboard;
+});
+
+afterEach(() => {
+  jest.resetAllMocks();
+  global.navigator.clipboard = originalClipboard;
+});
+
+function defaultProps() {
+  return {
+    context: {
+      port: new MockPort(),
+      setContext: () => { }
+    },
+    dialogContext: {
+      open: jest.fn()
+    },
+    onClose: jest.fn(),
+  };
+}
+
+describe("See the Confirm Save Account Recovery Settings", () => {
+  let page; // The page to test agains
+
+  describe('As AD I can import an ORK', () => {
+    /**
+     * Given  that I am a logged in administrator in the administration workspace
+     * And    I am on the Account recovery settings page
+     * And    I selected an Account recovery policy other than “Disabled (default)”
+     * When   I click on the “Add an Organization Recovery Key” button
+     * Then   I see an “Organization recovery key” dialog
+     * And    I see a title
+     * And    I see a close button to go back to the Account recovery settings page
+     * And    I see 2 tabs, “Import”, “Generate”
+     * And    I see the “Import” tab is selected by default
+     * And    I see an “Import an OpenPGP Public key” mandatory text area with an “Add OpenPGP Public key” placeholder
+     * And    I see a “Browse” button with a “Or select a file from your computer.” next to it
+     * And    I see a pro tip bar with a description and a link
+     * And    I see a “Cancel” button to go back to the Account recovery settings page
+     * And    I see an “Apply” button
+     */
+    it('As a logged in administrator on the account recovery settings in the administration workspace, I can open a dialog to import an Organization Recovery Key', async() => {
+      expect.assertions(11);
+      page = new SelectAccountRecoveryOrganizationKeyPage();
+      await waitFor(() => { });
+      // Dialog title exists and correct
+      expect(page.exists()).toBeTruthy();
+      expect(page.title.textContent).toBe("Organization Recovery Key");
+
+      // Close button exists
+      expect(page.closeButton).not.toBeNull();
+
+      // Tabs exists
+      const tabs = page.tabs;
+      const tabsContent = [];
+      tabs.forEach(t => tabsContent.push(t.textContent));
+      expect(tabsContent.sort()).toEqual(["Import", "Generate"].sort());
+
+      // Default selected tab is Import tab
+      expect(page.isImportKeyTabSelected()).toBeTruthy();
+
+      // Import tab has a correct title and the text area exists
+      expect(page.imoprtKeyTitle.textContent).toBe("Import an OpenPGP Public key");
+      expect(page.importKeyTextArea).not.toBeNull();
+
+      // The button to import the key exists and has the correct value
+      expect(page.browseInput).not.toBeNull();
+      //expect(page.browseInput.textContent).toBe("Or select a file from your computer."); //There's no such thing at the moment
+
+      // The import tab has a pro tip with a description and a link
+      expect(page.proTipDescription).not.toBe("");
+      expect(page.proTipLink).not.toBeNull();
+
+      // The import tab has an Apply button
+      expect(page.applyButton).not.toBeNull();
+    });
+
+    /**
+     * Given  that I am a logged in administrator in the administration workspace
+     * And    I am on the import tab of the “Organization Recovery Key” dialog
+     * When   I paste a OpenPGP Public key in the “Import an OpenPGP Public key” field
+     * Then   I see the OpenPGP key in the textarea
+     */
+    it('As a logged in administrator on the account recovery settings in the administration workspace, I can copy/paste an OpenPGP Public key in the Organization Recovery Key dialog', async() => {
+      expect.assertions(1);
+      page = new SelectAccountRecoveryOrganizationKeyPage();
+      await waitFor(() => { });
+
+      //pick a text doesn't have to be a real key
+      const expectedText = "a fake pasted key";
+      navigator.clipboard.writeText(expectedText);
+
+      page.importKeyTextArea.select();
+      navigator.clipboard.readText();
+
+      expect(page.importKeyTextArea.value).toBe(expectedText);
+    });
+
+    /**
+     * Given  that I am a logged in administrator in the administration workspace
+     * And    I am on the import tab of the “Organization Recovery Key” dialog
+     * When   I click on the browse button
+     * Then   I see the OS/browser file dialog
+     * When   I select a OpenPGP Public key file
+     * And    I validate my selection
+     * Then   the modal is closed
+     * And    I see the OpenPGP key in the field
+     */
+    it('As a logged in administrator in the administration workspace, I can import an OpenPGP Public key in the Organization Recovery Key dialog', async() => {
+      page = new SelectAccountRecoveryOrganizationKeyPage();
+      await waitFor(() => { });
+
+      const fileContent = '(⌐□_□)';
+      const waitForFileReadCallback = () => expect(page.importKeyTextArea.value).toBe(fileContent);
+
+      await page.userHasSelectedAFile(fileContent, waitForFileReadCallback);
+    });
+
+    /**
+     * Given  that I am a logged in administrator in the administration workspace
+     * And    I am on the import tab of the “Organization Recovery Key” dialog
+     * And    I imported an invalid or weak OpenPGP key
+     * And    I see the invalid OpenPGP key in the “Import an OpenPGP Public key” textarea
+     * When   I click on the “Apply” button
+     * Then   I see an error message under the textarea
+     * And    I the message tells me the key is invalid or does not meet the security requirement
+     * And    I see the “Import an OpenPGP Public key” label in @red
+     *
+     *
+     * Given  that I am a logged in administrator in the administration workspace
+     * And    I am on the import tab of the “Organization Recovery Key” dialog
+     * And    I imported an OpenPGP key already in use
+     * And    I see the already in use OpenPGP key in the “Import an OpenPGP Public key” textarea
+     * When   I click on the “Apply” button
+     * Then   I see an error message in @red under the textarea
+     * And    I the message tells me the key is already in use
+     * And    I see the “Import an OpenPGP Public key” label in @red
+     */
+    it('As a logged in administrator in the administration workspace, I cannot import an invalid OpenPGP Public key in the Organization Recovery Key settings', async() => {
+      const props = defaultProps();
+      page = new SelectAccountRecoveryOrganizationKeyPage(props);
+
+      const errorMessage = "The key is already used.";
+      const mockValidateKey = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
+      mockValidateKey(jest.fn(() => Promise.reject(new Error(errorMessage))));
+
+      await waitFor(() => { });
+
+      const waitForFileReadCallback = () => expect(page.importKeyTextArea.value).not.toBe("");
+      await page.userHasSelectedAFile('Key already used!', waitForFileReadCallback);
+
+      const waitForErrorMessageCallback = () => expect(page.importErrorMessage).not.toBeNull();
+      await page.applyChanges(waitForErrorMessageCallback);
+
+      expect(page.importErrorMessage.textContent).toBe(errorMessage);
+    });
+  });
+});

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

@@ -0,0 +1,121 @@
+/**
+ * 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 PropTypes from "prop-types";
+import {withTranslation} from "react-i18next";
+import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
+import Tab from "../../Common/Tab/Tab";
+import Tabs from "../../Common/Tab/Tabs";
+import ImportOrganizationKey from "./ImportOrganizationKey";
+import GenerateOrganizationKey from "./GenerateOrganizationKey";
+
+/**
+ * This component allows to display the create recover account for the administration
+ */
+class SelectAccountRecoveryOrganizationKey extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindCallbacks();
+  }
+
+  /**
+   * Get default state
+   * @returns {*}
+   */
+  get defaultState() {
+    return {
+      processing: false, // component is processing or not
+    };
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleApplyChanges = this.handleApplyChanges.bind(this);
+  }
+
+  /**
+   * Handle close button click.
+   */
+  handleCloseClick() {
+    this.props.onClose();
+  }
+
+  /**
+   * Handle apply button click.
+   */
+  handleApplyChanges(public_key, private_key) {
+    this.handleCloseClick();
+    this.props.handleUpdateOrganizationKey(public_key, private_key);
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <DialogWrapper
+        title={this.translate("Organization Recovery Key")}
+        onClose={this.handleCloseClick}
+        disabled={this.state.processing}
+        className="organization-recover-key-dialog">
+        <Tabs activeTabName='Import'>
+          <Tab
+            key='Import'
+            name='Import'
+            type='Import'>
+            <ImportOrganizationKey
+              {...this.props}
+              onClose={this.handleCloseClick}
+              onUpdateOrganizationKey={this.handleApplyChanges} />
+          </Tab>
+          <Tab
+            key='Generate'
+            name='Generate'
+            type='Generate'>
+            <GenerateOrganizationKey
+              {...this.props}
+              onClose={this.handleCloseClick}
+              onUpdateOrganizationKey={this.handleApplyChanges} />
+          </Tab>
+        </Tabs>
+      </DialogWrapper>
+    );
+  }
+}
+
+SelectAccountRecoveryOrganizationKey.propTypes = {
+  handleUpdateOrganizationKey: PropTypes.func,
+  onClose: PropTypes.func,
+  t: PropTypes.func, // The translation function
+};
+
+export default withTranslation('common')(SelectAccountRecoveryOrganizationKey);