passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-quickaccess/components/GeneratePasswordPage/ConfigurePasswordGenerator.js

@@ -0,0 +1,189 @@
+/**
+ * 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.3.0
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+
+class ConfigurePasswordGenerator extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindCallbacks();
+  }
+
+  /**
+   * Returns the default state
+   */
+  get defaultState() {
+    return {
+      configuration: JSON.parse(JSON.stringify(this.props.configuration))
+    };
+  }
+
+  /**
+   * Returns the current values of length option
+   * @return {{default: number, min: number, max: number}}
+   */
+  get length() {
+    const {default_options} = this.state.configuration;
+    return {
+      default: default_options.length,
+      min: default_options.min_length,
+      max: default_options.max_length,
+    };
+  }
+
+  /**
+   * Returns the current masks
+   */
+  get masks() {
+    return this.state.configuration.masks;
+  }
+
+  /**
+   * Returns true if the options exclude-look-alike-characters is true
+   */
+  get isExcludeLookAlikeCharacters() {
+    return this.state.configuration.default_options.look_alike;
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleLengthChanged = this.handleLengthChanged.bind(this);
+    this.handleMaskToggled = this.handleMaskToggled.bind(this);
+    this.handleExcludeLookAlikeCharactersToggled = this.handleExcludeLookAlikeCharactersToggled.bind(this);
+  }
+
+  /**
+   * Whenever the length option value has been changed
+   */
+  handleLengthChanged(event) {
+    const value = event.target.value;
+    const configuration = {...this.state.configuration};
+    configuration.default_options.length = value;
+
+    this.setState({configuration});
+    this.props.onChanged(configuration);
+  }
+
+  /**
+   * Whenever a mask has been toggled on/off
+   * @param maskName The name of a mask
+   * @param event Dom Click event
+   */
+  handleMaskToggled(maskName, event) {
+    // Avoid side effect
+    event.preventDefault();
+    const configuration = {...this.state.configuration};
+    configuration.masks = configuration.masks.map(mask => {
+      if (mask.name === maskName && !mask.required) {
+        return {...mask, active: !mask.active};
+      } else {
+        return mask;
+      }
+    });
+    this.setState({configuration});
+    this.props.onChanged(configuration);
+  }
+
+  /**
+   * Whenever the exclude-look-alike-character option has been toggled on/off
+   */
+  handleExcludeLookAlikeCharactersToggled() {
+    const configuration = {...this.state.configuration};
+    configuration.default_options.look_alike = !configuration.default_options.look_alike;
+    this.setState({configuration});
+    this.props.onChanged(configuration);
+  }
+
+  /**
+   * Render the component
+   * @return {JSX.Element}
+   */
+  render() {
+    return (
+      <>
+        <div>
+          <label htmlFor="configure-password-generator-form-length">
+            <Trans>Length</Trans>
+          </label>
+          <div className="slider">
+            <input
+              name="length"
+              min={this.length.min}
+              max={this.length.max}
+              value={this.length.default}
+              step="1"
+              type="range"
+              onChange={this.handleLengthChanged}/>
+            <input
+              id="configure-password-generator-form-length"
+              type="number"
+              min={this.length.min}
+              max={this.length.max}
+              value={this.length.default}
+              onChange={this.handleLengthChanged}/>
+          </div>
+        </div>
+
+        <div>
+          <label htmlFor="configure-password-generator-form-masks">
+            <Trans>Character Types</Trans>
+          </label>
+          <div className="button-group">
+            {
+              this.masks.map(mask => (
+                <button
+                  key={mask.name}
+                  className={`button button-toggle ${(mask.active ? 'selected' : '')}`}
+                  onClick={event => this.handleMaskToggled(mask.name, event)}>
+                  {mask.label}
+                </button>
+              ))
+            }
+          </div>
+        </div>
+
+        <div>
+          <div className="input checkbox">
+            <input
+              id="configure-password-generator-form-exclude-look-alike"
+              type="checkbox"
+              name="exclude-look-alike"
+              checked={this.isExcludeLookAlikeCharacters}
+              onChange={this.handleExcludeLookAlikeCharactersToggled}/>
+            <label htmlFor="configure-password-generator-form-exclude-look-alike">
+              <Trans>Exclude look-alike characters</Trans>
+            </label>
+          </div>
+        </div>
+
+      </>
+    );
+  }
+}
+
+ConfigurePasswordGenerator.propTypes = {
+  configuration: PropTypes.object, // The current generator options configuration
+  onChanged: PropTypes.func, // Called whenever the generator configuration changed
+  t: PropTypes.func, // The translation function
+};
+
+export default withTranslation('common')(ConfigurePasswordGenerator);

package/src/react-quickaccess/components/GeneratePasswordPage/ConfigurePasswordGenerator.test.data.js

@@ -0,0 +1,40 @@
+/**
+ * Default props
+ * @returns {*}
+ */
+export function defaultProps() {
+  return {
+    configuration:  {
+      default_options: {
+        length: 10,
+        look_alike: true,
+        min_length: 8,
+        max_length: 24,
+      },
+      masks: [
+        {
+          "name": "upper",
+          "label": "A-Z",
+          "characters": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+        },
+        {
+          "name": "lower",
+          "label": "a-z",
+          "characters": "abcdefghijklmnopqrstuvwxyz",
+        },
+        {
+          "name": "digit",
+          "label": "0-9",
+          "characters": "0123456789",
+          "active": true,
+        },
+        {
+          "name": "parenthesis",
+          "label": "([|])",
+          "characters": "([|])",
+        }
+      ]
+    },
+    onChanged: jest.fn()
+  };
+}

package/src/react-quickaccess/components/GeneratePasswordPage/ConfigurePasswordGenerator.test.js

@@ -0,0 +1,67 @@
+/**
+ * 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.3.0
+ */
+
+/**
+ * Unit tests on ConfigurePasswordGenerator in regard of specifications
+ */
+import ConfigurePasswordGeneratorPage from "./ConfigurePasswordGenerator.test.page";
+import {defaultProps} from "./ConfigurePasswordGenerator.test.data";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("Configure Password Generator", () => {
+  let page; // The page to test against
+  let props = null; // The page props
+
+  beforeEach(() => {
+    props = defaultProps(); // The props to pass
+    page = new ConfigurePasswordGeneratorPage(props);
+  });
+
+  describe('As LU I should update the password configuration', () => {
+    it('As LU I should change the range of word count', async() => {
+      expect(page.rangeLength.value).toBe("10");
+      expect(page.length.value).toBe("10");
+      await page.changeRangeLength("20");
+      expect(page.rangeLength.value).toBe("20");
+      expect(page.length.value).toBe("20");
+      expect(props.onChanged).toHaveBeenCalled();
+    });
+
+    it('As LU I should change the number of word count', async() => {
+      expect(page.rangeLength.value).toBe("10");
+      expect(page.length.value).toBe("10");
+      await page.changeLength("20");
+      expect(page.rangeLength.value).toBe("20");
+      expect(page.length.value).toBe("20");
+      expect(props.onChanged).toHaveBeenCalled();
+    });
+
+    it('As LU I should change the masks', async() => {
+      expect(page.numberOfActiveMask).toBe(1);
+      await page.selectMask(1);
+      expect(page.numberOfActiveMask).toBe(2);
+      expect(props.onChanged).toHaveBeenCalled();
+    });
+
+    it('As LU I should change the look alike', async() => {
+      expect(page.isCheckedLookAlike).toBeTruthy();
+      await page.changeLookAlike();
+      expect(page.isCheckedLookAlike).toBeFalsy();
+      expect(props.onChanged).toHaveBeenCalled();
+    });
+  });
+});

package/src/react-quickaccess/components/GeneratePasswordPage/ConfigurePasswordGenerator.test.page.js

@@ -0,0 +1,121 @@
+
+/**
+ * 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.3.0
+ */
+
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider
+  from "../../../react-extension/test/mock/components/Internationalisation/MockTranslationProvider";
+import ConfigurePasswordGenerator from "./ConfigurePasswordGenerator";
+
+/**
+ * The ConfigurePasswordGenerator component represented as a page
+ */
+export default class ConfigurePasswordGeneratorPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <ConfigurePasswordGenerator {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Get the range length input
+   */
+  get rangeLength() {
+    return this._page.container.querySelector('.slider input[type="range"]');
+  }
+
+  /**
+   * Get the length input
+   */
+  get length() {
+    return this._page.container.querySelector('.slider input[type="number"]');
+  }
+
+  /**
+   * Get the mask button following the index
+   */
+  maskButton(index) {
+    return this._page.container.querySelectorAll('.button-group .button')[index - 1];
+  }
+
+  /**
+   * Get the look alike
+   */
+  get lookAlike() {
+    return this._page.container.querySelector('#configure-password-generator-form-exclude-look-alike');
+  }
+
+  /**
+   * Get the look alike
+   */
+  get isCheckedLookAlike() {
+    return this._page.container.querySelector('#configure-password-generator-form-exclude-look-alike').checked;
+  }
+
+  /**
+   * Get the number of active mask
+   */
+  get numberOfActiveMask() {
+    return this._page.container.querySelectorAll('.button-group .button.selected').length;
+  }
+
+  /**
+   * Change range length
+   * @param data
+   * @returns {Promise<void>}
+   */
+  async changeRangeLength(data) {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.rangeLength, dataInputEvent);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Change length
+   * @param data
+   * @returns {Promise<void>}
+   */
+  async changeLength(data) {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.length, dataInputEvent);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Change mask
+   * @returns {Promise<void>}
+   */
+  async selectMask(index) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.maskButton(index), leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Change look alike
+   * @returns {Promise<void>}
+   */
+  async changeLookAlike() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.lookAlike, leftClick);
+    await waitFor(() => {});
+  }
+}