passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Administration/DisplaySelfRegistrationAdministration/ConfirmDeletionSelfRegistrationSettings/ConfirmDeletionSelfRegistrationSettings.js

@@ -0,0 +1,103 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.9.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import DialogWrapper from "../../../Common/Dialog/DialogWrapper/DialogWrapper";
+import FormCancelButton from "../../../Common/Inputs/FormSubmitButton/FormCancelButton";
+import FormSubmitButton from "../../../Common/Inputs/FormSubmitButton/FormSubmitButton";
+import {withAdminSelfRegistration} from "../../../../contexts/Administration/AdministrationSelfRegistration/AdministrationSelfRegistrationContext";
+
+class ConfirmDeletionSelfRegistrationSettings extends Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  /**
+   * Handle close button click.
+   */
+  handleClose() {
+    this.props.onClose();
+  }
+
+  /**
+   * Go to the next process
+   * @param {Event} event A form submit event
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    await this.props.onSubmit();
+    this.props.onClose();
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    const isProcessing = this.props.adminSelfRegistrationContext.isProcessing();
+
+    return (
+      <DialogWrapper
+        title={this.props.t("Disable self registration")}
+        onClose={this.handleClose}
+        disabled={isProcessing}
+        className="delete-self-registration-settings-dialog">
+        <form onSubmit={this.handleSubmit}>
+          <div className="form-content">
+            <p>
+              <Trans>Are you sure to disable the self registration for the organization ?</Trans>
+            </p>
+            <p>
+              <Trans>Users will not be able to self register anymore.</Trans> <Trans>Only administrators would be able to invite users to register. </Trans>
+            </p>
+          </div>
+          <div className="submit-wrapper clearfix">
+            <FormCancelButton
+              onClick={this.handleClose}
+              disabled={isProcessing}/>
+            <FormSubmitButton
+              value={this.props.t("Save")}
+              disabled={isProcessing}
+              processing={isProcessing}
+              warning={true}/>
+          </div>
+        </form>
+      </DialogWrapper>
+    );
+  }
+}
+
+ConfirmDeletionSelfRegistrationSettings.propTypes = {
+  adminSelfRegistrationContext: PropTypes.object, // The self registration workspace context
+  onClose: PropTypes.func, // Callback when the dialog must be closed
+  onSubmit: PropTypes.func, // The submit callback
+  t: PropTypes.func, // The translation function
+};
+export default withAdminSelfRegistration(withTranslation('common')(ConfirmDeletionSelfRegistrationSettings));
+
+

package/src/react-extension/components/Administration/DisplaySelfRegistrationAdministration/ConfirmDeletionSelfRegistrationSettings/ConfirmDeletionSelfRegistrationSettings.test.js

@@ -0,0 +1,53 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.8.3
+ */
+
+/**
+ * Unit tests on ConfirmDeletionSelfRegistrationSettings in regard of specifications
+ */
+import {waitFor} from "@testing-library/react";
+import {defaultAppContext} from "../../../../contexts/ApiAppContext.test.data";
+import {defaultProps} from "../ConfirmSaveSelfRegistrationSettings/ConfirmSaveSelfRegistrationSettings.test.data";
+import ConfirmDeletionSelfRegistrationSettingsPage from './ConfirmDeletionSelfRegistrationSettings.test.page';
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("See the confirm disable self registration settings dialog", () => {
+  let page; // The page to test agains
+
+  describe('As a logged in administrator ', () => {
+    /**
+     * I should see the account recovery settings dialog
+     */
+    it('As a logged in administrator I can reset the “User self registration” settings when I disable and enable the setting', async() => {
+      const props = defaultProps(); // The props to pass
+      page = new ConfirmDeletionSelfRegistrationSettingsPage(defaultAppContext, props);
+      await waitFor(() => {});
+
+      expect(page.title).toBe("Disable self registration");
+
+      // Close button exists
+      expect(page.closeButton).not.toBeNull();
+
+      // domains list
+      expect(page.formContent.innerHTML).toBe('<p>Are you sure to disable the self registration for the organization ?</p><p>Users will not be able to self register anymore. Only administrators would be able to invite users to register. </p>');
+      // Save button exists
+      expect(page.saveButton.textContent).toBe("Save");
+      // Cancel button exists
+      expect(page.cancelButton.textContent).toBe("Cancel");
+    });
+  });
+});
+

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

@@ -0,0 +1,81 @@
+/**
+ * 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.8.3
+ */
+
+import React from "react";
+import MockTranslationProvider from "../../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import {render, fireEvent, waitFor} from '@testing-library/react';
+import {AdminSelfRegistrationContextProvider} from "../../../../contexts/Administration/AdministrationSelfRegistration/AdministrationSelfRegistrationContext";
+import AppContext from "../../../../contexts/AppContext";
+import ConfirmDeletionSelfRegistrationSettings from "./ConfirmDeletionSelfRegistrationSettings";
+/**
+ * The ConfirmDeletionSelfRegistrationSettings component represented as a page
+ */
+export default class ConfirmDeletionSelfRegistrationSettingsPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(appContext, props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <AppContext.Provider value={appContext}>
+          <AdminSelfRegistrationContextProvider  {...props}>
+            <ConfirmDeletionSelfRegistrationSettings {...props}/>
+          </AdminSelfRegistrationContextProvider>
+        </AppContext.Provider>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the title element
+   */
+  get title() {
+    return this._page.container.querySelector('.dialog-header-title').textContent;
+  }
+
+  /**
+   * Returns the form content
+   */
+  get formContent() {
+    return this._page.container.querySelector('.form-content');
+  }
+
+  /**
+   * Returns the save button element
+   */
+  get saveButton() {
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
+  }
+
+  /**
+   * Returns the cancel button element
+   */
+  get cancelButton() {
+    return this._page.container.querySelector('.submit-wrapper .cancel');
+  }
+
+  /**
+   * Click on the element
+   *
+   */
+  async click(element) {
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {
+    });
+  }
+}
+

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

@@ -0,0 +1,34 @@
+/**
+ *import { PropTypes } from 'prop-types';
+ *import defaultProps from '../DisplaySelfRegistrationAdministration.test.data';
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.8.3
+ */
+
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import {defaultProps} from "../ConfirmSaveSelfRegistrationSettings/ConfirmSaveSelfRegistrationSettings.test.data";
+import ConfirmDeletionSelfRegistrationSettings from "./ConfirmDeletionSelfRegistrationSettings";
+
+
+export default {
+  title: 'Components/Administration/ConfirmDeletionSelfRegistrationSettings',
+  component: ConfirmDeletionSelfRegistrationSettings
+};
+
+const Template = args =>
+  <MemoryRouter initialEntries={['/']}>
+    <Route component={routerProps => <ConfirmDeletionSelfRegistrationSettings  {...args} {...routerProps}/>}></Route>
+  </MemoryRouter>;
+
+export const Default = Template.bind({});
+Default.args = defaultProps();

package/src/react-extension/components/Administration/DisplaySelfRegistrationAdministration/ConfirmSaveSelfRegistrationSettings/ConfirmSaveSelfRegistrationSettings.js

@@ -0,0 +1,125 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.9.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import DialogWrapper from "../../../Common/Dialog/DialogWrapper/DialogWrapper";
+import FormCancelButton from "../../../Common/Inputs/FormSubmitButton/FormCancelButton";
+import FormSubmitButton from "../../../Common/Inputs/FormSubmitButton/FormSubmitButton";
+import {withAppContext} from "../../../../contexts/AppContext";
+import {withAdminSelfRegistration} from "../../../../contexts/Administration/AdministrationSelfRegistration/AdministrationSelfRegistrationContext";
+import MapObject from '../../../../lib/Map/MapObject';
+
+class ConfirmSaveSelfRegistrationSettings extends Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  /**
+   * Handle close button click.
+   */
+  handleClose() {
+    this.props.onClose();
+  }
+
+  /**
+   * Go to the next process
+   * @param {Event} event A form submit event
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    await this.props.onSubmit();
+    this.props.onClose();
+  }
+
+  /**
+   * return the allowed domains
+   */
+  get allowedDomains() {
+    return this.props.adminSelfRegistrationContext.getAllowedDomains();
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    const isProcessing = this.props.adminSelfRegistrationContext.isProcessing();
+    return (
+      <DialogWrapper
+        title={this.props.t("Save self registration settings")}
+        onClose={this.handleClose}
+        disabled={isProcessing}
+        className="save-self-registration-settings-dialog">
+        <form onSubmit={this.handleSubmit}>
+          <div className="form-content">
+            <>
+              <label><Trans>Allowed domains</Trans></label>
+              <div className="radiolist-alt">
+                <div className="input radio">
+                  <ul id="domains-list">
+                    {this.allowedDomains &&
+                         MapObject.iterators(this.allowedDomains).map(key => (
+                           <li key={key}>
+                             {this.allowedDomains.get(key)}
+                           </li>
+                         ))
+
+                    }
+                  </ul>
+                </div>
+              </div>
+            </>
+          </div>
+          <div className="warning message">
+            <Trans>Please review carefully this configuration.</Trans>
+          </div>
+          <div className="submit-wrapper clearfix">
+            <FormCancelButton
+              onClick={this.handleClose}
+              disabled={isProcessing}/>
+            <FormSubmitButton
+              value={this.props.t("Save")}
+              disabled={isProcessing}
+              processing={isProcessing}
+              warning={true}/>
+          </div>
+        </form>
+      </DialogWrapper>
+    );
+  }
+}
+
+ConfirmSaveSelfRegistrationSettings.propTypes = {
+  context: PropTypes.any, // The application context
+  onSubmit: PropTypes.func, // The submit callback
+  adminSelfRegistrationContext: PropTypes.object, // The self registration workspace context
+  onClose: PropTypes.func, // Callback when the dialog must be closed
+  t: PropTypes.func, // The translation function
+};
+export default withAppContext(withAdminSelfRegistration(withTranslation('common')(ConfirmSaveSelfRegistrationSettings)));
+

package/src/react-extension/components/Administration/DisplaySelfRegistrationAdministration/ConfirmSaveSelfRegistrationSettings/ConfirmSaveSelfRegistrationSettings.test.data.js

@@ -0,0 +1,63 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.8.3
+ */
+
+import {defaultAppContext} from "../../../../contexts/ApiAppContext.test.data";
+
+/**
+ * Default props.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function defaultProps(data = {}, userId) {
+  const defaultProps = {
+    context: defaultAppContext(data?.context, userId),
+    administrationWorkspaceContext: {
+      setDisplayAdministrationWorkspaceAction: jest.fn(),
+      resetDisplayAdministrationWorkspaceAction: jest.fn(),
+    },
+    onClose: jest.fn(),
+    onSubmit: jest.fn(),
+    t: jest.fn()
+  };
+  return Object.assign(defaultProps, data);
+}
+
+
+/**
+ * Has changed policy.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function propsWithMockDomains(props = {}) {
+  const _props = {
+    adminSelfRegistrationContext: {
+      isProcessing: jest.fn(),
+      getAllowedDomains: () =>  (mockDomains())
+    }
+  };
+  return defaultProps(Object.assign(_props, props));
+}
+
+/**
+ * Has changed policy.
+ * @param {Object} props The props to override
+ * @returns {object}
+ */
+export function mockDomains() {
+  const map = new Map();
+  map.set("uuid", "passbolt.com");
+  map.set("uuid2", "passbolt.lu");
+  return map;
+}
+

package/src/react-extension/components/Administration/DisplaySelfRegistrationAdministration/ConfirmSaveSelfRegistrationSettings/ConfirmSaveSelfRegistrationSettings.test.js

@@ -0,0 +1,54 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.8.3
+ */
+
+/**
+ * Unit tests on ConfirmSaveSelfRegistrationSettings in regard of specifications
+ */
+import {waitFor} from "@testing-library/react";
+import {defaultAppContext} from "../../../../contexts/ApiAppContext.test.data";
+import {propsWithMockDomains} from "./ConfirmSaveSelfRegistrationSettings.test.data";
+import ConfirmSaveSelfRegistrationSettingsPage from './ConfirmSaveSelfRegistrationSettings.test.page';
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("See the Confirm Save Self Registration Settings", () => {
+  let page; // The page to test agains
+
+  describe('As a logged in administrator ', () => {
+    /**
+     * I should see the account recovery settings dialog
+     */
+    it('As a logged in administrator I can save a list of domains when there is no error and at least one domain filled in', async() => {
+      const props = propsWithMockDomains(); // The props to pass
+      page = new ConfirmSaveSelfRegistrationSettingsPage(defaultAppContext, props);
+      await waitFor(() => {});
+
+      expect(page.title).toBe("Save self registration settings");
+
+      // Close button exists
+      expect(page.closeButton).not.toBeNull();
+
+      // domains list
+      expect(page.domainsList.innerHTML).toBe('<li>passbolt.com</li><li>passbolt.lu</li>');
+      // Save button exists
+      expect(page.saveButton.textContent).toBe("Save");
+
+      // Cancel button exists
+      expect(page.cancelButton.textContent).toBe("Cancel");
+    });
+  });
+});
+

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

@@ -0,0 +1,88 @@
+/**
+ * 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.8.3
+ */
+
+import React from "react";
+import MockTranslationProvider from "../../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import {render, fireEvent, waitFor} from '@testing-library/react';
+import {AdminSelfRegistrationContextProvider} from "../../../../contexts/Administration/AdministrationSelfRegistration/AdministrationSelfRegistrationContext";
+import AppContext from "../../../../contexts/AppContext";
+import ConfirmSaveSelfRegistrationSettings from "./ConfirmSaveSelfRegistrationSettings";
+/**
+ * The ConfirmSaveSelfRegistrationSettings component represented as a page
+ */
+export default class ConfirmSaveSelfRegistrationSettingsPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   * @param props Props to attach
+   */
+  constructor(appContext, props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <AppContext.Provider value={appContext}>
+          <AdminSelfRegistrationContextProvider  {...props}>
+            <ConfirmSaveSelfRegistrationSettings {...props}/>
+          </AdminSelfRegistrationContextProvider>
+        </AppContext.Provider>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the title element
+   */
+  get title() {
+    return this._page.container.querySelector('.dialog-header-title').textContent;
+  }
+
+  /**
+   * Returns the warning message
+   */
+  get warningMessage() {
+    return this._page.container.querySelector('.warning.message');
+  }
+
+  /**
+   * Returns the list of domains
+   */
+  get domainsList() {
+    return this._page.container.querySelector('#domains-list');
+  }
+
+  /**
+   * Returns the save button element
+   */
+  get saveButton() {
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
+  }
+
+  /**
+   * Returns the cancel button element
+   */
+  get cancelButton() {
+    return this._page.container.querySelector('.submit-wrapper .cancel');
+  }
+
+  /**
+   * Click on the element
+   *
+   */
+  async click(element) {
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {
+    });
+  }
+}
+

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

@@ -0,0 +1,35 @@
+/**
+ *import { PropTypes } from 'prop-types';
+ *import defaultProps from '../DisplaySelfRegistrationAdministration.test.data';
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.8.3
+ */
+
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import ConfirmSaveSelfRegistrationSettings from "./ConfirmSaveSelfRegistrationSettings";
+import {propsWithMockDomains} from "./ConfirmSaveSelfRegistrationSettings.test.data";
+
+
+export default {
+  title: 'Components/Administration/ConfirmSaveSelfRegistrationSettings',
+  component: ConfirmSaveSelfRegistrationSettings
+};
+
+const Template = args =>
+  <MemoryRouter initialEntries={['/']}>
+    <Route component={routerProps => <ConfirmSaveSelfRegistrationSettings  {...args} {...routerProps}/>}></Route>
+  </MemoryRouter>;
+
+export const Default = Template.bind({});
+Default.args = propsWithMockDomains();
+