passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePasswordGenerator.js

@@ -0,0 +1,191 @@
+/**
+ * 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 button-group--nowrap">
+            {
+              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>
+          <label/>
+          <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-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePasswordGenerator.test.stories.js

@@ -0,0 +1,73 @@
+/**
+ * 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.2.0
+ */
+
+import AppContext from "../../../contexts/AppContext";
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import ConfigurePasswordGenerator from "./ConfigurePasswordGenerator";
+
+
+export default {
+  title: 'Passbolt/ResourcePassword/ConfigurePasswordGenerator',
+  component: ConfigurePasswordGenerator
+};
+
+
+const Template = args =>
+  <AppContext.Provider>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ConfigurePasswordGenerator {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
+
+export const Initial = Template.bind({});
+Initial.args = {
+  configuration:  {
+    default_options: {
+      length: 18,
+      look_alike: true,
+      min_length: 2,
+      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",
+        "required": true,
+      },
+      {
+        "name": "parenthesis",
+        "label": "([|])",
+        "characters": "([|])",
+      },
+      {
+        "name": "TBD",
+        "label": "TBD",
+        "characters": ""
+      },
+    ]
+  },
+  onChanged: () => {}
+};

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/GenerateResourcePassword.js

@@ -0,0 +1,296 @@
+/**
+ * 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 React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../Common/Icons/Icon";
+import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
+import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
+import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
+import Tabs from "../../Common/Tab/Tabs";
+import Tab from "../../Common/Tab/Tab";
+import ConfigurePassphraseGenerator from "./ConfigurePassphraseGenerator";
+import {withAppContext} from "../../../contexts/AppContext";
+import ConfigurePasswordGenerator from "./ConfigurePasswordGenerator";
+import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
+import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
+import {withResourcePasswordGeneratorContext} from "../../../contexts/ResourcePasswordGeneratorContext";
+import {SecretGeneratorComplexity} from "../../../../shared/lib/SecretGenerator/SecretGeneratorComplexity";
+
+/**
+ * This component generate password or passphrase following configuration
+ */
+class GenerateResourcePassword extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.initEventHandlers();
+  }
+
+  get defaultState() {
+    return {
+      password: "", // The password
+      isObfuscated: true, // True if the passphrase should not be visible
+      generator: {}, // The current password generator
+      loading: true,
+      processing: false
+    };
+  }
+
+  /**
+   * Whenever the component has been mounted
+   */
+  async componentDidMount() {
+    const type = this.props.resourcePasswordGeneratorContext.settings.default_generator;
+    const initialGenerator = this.generators.find(generator => generator.type === type);
+
+    await this.handleGeneratorChanged(initialGenerator);
+    this.setState({loading: false});
+  }
+
+  /**
+   * Initialize the event handlers
+   */
+  initEventHandlers() {
+    this.handleClose = this.handleClose.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleViewPasswordToggle = this.handleViewPasswordToggle.bind(this);
+    this.handleGeneratePassword = this.handleGeneratePassword.bind(this);
+    this.handleGeneratorChanged = this.handleGeneratorChanged.bind(this);
+    this.handleCopyPassword = this.handleCopyPassword.bind(this);
+  }
+
+  /**
+   * Returns the possible generators
+   */
+  get generators() {
+    return  this.props.resourcePasswordGeneratorContext.settings.generators;
+  }
+
+  /**
+   * Handle when the generator configuration has changed
+   * @param generatorConfiguration The generator configuration
+   * @returns {Promise<void>}
+   */
+  async handleGeneratorChanged(generatorConfiguration) {
+    await this.setState({generator: generatorConfiguration});
+    this.generatePassword();
+  }
+
+  /**
+   * Handle when one wants to generate password
+   */
+  handleGeneratePassword() {
+    this.generatePassword();
+  }
+
+  /**
+   * Handle close
+   */
+  handleClose() {
+    this.props.onClose();
+  }
+
+  /**
+   * Handle form input change.
+   * @params {ReactEvent} The react event.
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+    this.setState({
+      [name]: value
+    });
+  }
+
+  /**
+   * Handle view password button click.
+   */
+  handleViewPasswordToggle() {
+    if (this.state.processing) {
+      return;
+    }
+    this.setState({isObfuscated: !this.state.isObfuscated});
+  }
+
+  /**
+   * Handle the submission of the generated password.
+   * @params {ReactEvent} The react event
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    await this.setState({processing: true});
+    await this.props.resourcePasswordGeneratorContext.onPasswordGenerated(this.state.password, this.state.generator);
+    this.props.onClose();
+  }
+
+  /**
+   * Whenever one wants to copy the password
+   */
+  async handleCopyPassword() {
+    await this.props.context.port.request("passbolt.clipboard.copy", this.state.password);
+    this.props.actionFeedbackContext.displaySuccess(this.translate("The password has been copied to clipboard"));
+  }
+
+  /**
+   * Generate the password
+   */
+  generatePassword() {
+    const password = SecretGenerator.generate(this.state.generator);
+    this.setState({password});
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  isPasswordEmpty() {
+    return this.state.password === "";
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    const passwordEntropy = SecretGenerator.entropy(this.state.password);
+    const passwordStrength = SecretGeneratorComplexity.strength(passwordEntropy);
+    /*
+     * The parser can't find the translation for passwordStrength.label
+     * To fix that we can use it in comment
+     * this.translate("n/a")
+     * this.translate("very weak")
+     * this.translate("weak")
+     * this.translate("fair")
+     * this.translate("strong")
+     * this.translate("very strong")
+     *
+     * The parser can't find the translation for generator.name
+     * To fix that we can use it in comment
+     * this.translate("Password")
+     * this.translate("Passphrase")
+     */
+    return (
+      <>
+        {!this.state.loading &&
+        <DialogWrapper
+          title={this.translate("Password Generator")}
+          className="generate-resource-password-dialog"
+          disabled={this.state.processing}
+          onClose={this.handleClose}>
+          <form onSubmit={this.handleSubmit} noValidate>
+            <div className="form-content">
+              <div className="input-password-wrapper input">
+                <label htmlFor="generate-resource-password-form-password"><Trans>Password</Trans></label>
+                <div className="input text password">
+                  <input
+                    id="generate-resource-password-form-password"
+                    name="password"
+                    readOnly="readOnly"
+                    className="required"
+                    placeholder={this.translate("Password")}
+                    type={this.state.isObfuscated ? "password" : "text"}
+                    value={this.state.password}
+                    onChange={this.handleInputChange}
+                    disabled={this.state.processing}
+                    autoComplete="off"/>
+                  <a
+                    onClick={this.handleViewPasswordToggle}
+                    className={`password-view button button-icon toggle ${this.state.isObfuscated ? "" : "selected"}`}>
+                    <Icon name='eye-open' big={true}/>
+                    <span className="visually-hidden">view</span>
+                  </a>
+                </div>
+                <ul className="actions inline">
+                  <li>
+                    <a onClick={this.handleGeneratePassword} className="password-generate button-icon button">
+                      <Icon name='magic-wand' big={true}/>
+                      <span className="visually-hidden">generate</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      onClick={this.handleCopyPassword}
+                      className={`copy-to-clipboard button button-icon`}>
+                      <Icon name='copy-to-clipboard' big={true}/>
+                      <span className="visually-hidden">view</span>
+                    </a>
+                  </li>
+                </ul>
+                <div className={`password-complexity ${passwordStrength.id}`}>
+                  <span className="progress">
+                    <span className={`progress-bar ${passwordStrength.id}`} />
+                  </span>
+                  <span className="complexity-text">
+                    <div>
+                      <Trans>Complexity:</Trans> <strong>{this.translate(passwordStrength.label)}</strong>
+                    </div>
+                    <div>
+                      <Trans>Entropy:</Trans> <strong>{passwordEntropy.toFixed(1)} bits</strong>
+                    </div>
+
+                  </span>
+                </div>
+              </div>
+
+              <br/>
+
+              <Tabs activeTabName={this.state.generator.name}>
+                {this.generators.map(generator =>
+                  <Tab
+                    key={generator.name}
+                    name={generator.name}
+                    type={generator.type}
+                    onClick={() => this.handleGeneratorChanged(generator)}>
+                    {generator.type === "password" &&
+                    <ConfigurePasswordGenerator
+                      configuration={this.state.generator}
+                      onChanged={this.handleGeneratorChanged}/>
+                    }
+                    {generator.type === "passphrase" &&
+                    <ConfigurePassphraseGenerator
+                      configuration={this.state.generator}
+                      onChanged={this.handleGeneratorChanged}/>
+                    }
+                  </Tab>
+                )}
+              </Tabs>
+            </div>
+            <div className="submit-wrapper clearfix">
+              <FormSubmitButton value={this.translate("Apply")} disabled={this.state.processing || this.isPasswordEmpty()} processing={this.state.processing}/>
+              <FormCancelButton disabled={this.state.processing} onClick={this.handleClose}/>
+            </div>
+          </form>
+        </DialogWrapper>
+        }
+      </>
+    );
+  }
+}
+
+GenerateResourcePassword.propTypes = {
+  context: PropTypes.any, // The application context
+  resourcePasswordGeneratorContext: PropTypes.any, // The resource password generator context
+  actionFeedbackContext: PropTypes.any, // The action feedback context
+  onClose: PropTypes.func, // Whenever the component must be closed
+  t: PropTypes.func, // The translation function
+};
+
+export default withAppContext(withActionFeedback(withResourcePasswordGeneratorContext(withTranslation('common')(GenerateResourcePassword))));

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/GenerateResourcePassword.test.stories.js

@@ -0,0 +1,112 @@
+/**
+ * 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.2.0
+ */
+
+import AppContext from "../../../contexts/AppContext";
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import GenerateResourcePassword from "./GenerateResourcePassword";
+
+
+export default {
+  title: 'Passbolt/ResourcePassword/GenerateResourcePassword',
+  component: GenerateResourcePassword
+};
+
+
+const Template = args =>
+  <AppContext.Provider>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <GenerateResourcePassword {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
+
+export const Initial = Template.bind({});
+Initial.args = {
+  resourcePasswordGeneratorContext: {
+    settings: {
+      default_generator: "passphrase",
+      generators: [
+        {
+          "name": "Password",
+          "type": "password",
+          "default_options": {
+            "length": 18,
+            "look_alike": true,
+            "min_length": 8,
+            "max_length": 128,
+          },
+          "masks": [
+            {
+              "name": "upper",
+              "label": "A-Z",
+              "characters": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+            },
+            {
+              "name": "lower",
+              "label": "a-z",
+              "characters": "abcdefghijklmnopqrstuvwxyz",
+            },
+            {
+              "name": "digit",
+              "label": "0-9",
+              "characters": "0123456789",
+              "required": true,
+            },
+            {
+              "name": "parenthesis",
+              "label": "{ [ ( | ) ] ] }",
+              "characters": "([|])",
+            },
+            {
+              "name": "special_char1",
+              "label": "# $ % & @ ^ ~",
+              "characters": "#$%&@^~"
+            },
+            {
+              "name": "special_char2",
+              "label": ". , : ;",
+              "characters": ".,:;"
+            },
+            {
+              "name": "special_char5",
+              "label": "< * + ! ? =",
+              "characters": "<*+!?="
+            },
+            {
+              "name": "emoji",
+              "label": "😘",
+              "characters": "😀😃😄😁😆😅😂🤣🥲☺️😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓😎🥸🤩🥳😏😒😞😔😟😕🙁☹️😣😖😫😩🥺😢😭😤😠😡🤬🤯😳🥵🥶😱😨😰😥😓🤗🤔🤭🤫🤥😶😐😑😬🙄😯😦😧😮😲🥱😴🤤😪😵🤐🥴🤢🤮🤧😷🤒🤕🤑🤠😈👿👹👺🤡💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾"
+            },
+            {
+              "name": "ascii",
+              "label": "ascii",
+              "characters": "%&¡¢£¤¥¦§¨©ª«¬®¯°±²³µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿŒœŠšŸƒ—„†‡•…‰€™"
+            }
+          ],
+        },
+        {
+          "name": "Passphrase",
+          "type": "passphrase",
+          "default_options": {
+            "word_count": 8,
+            "word_case": "lowercase",
+            "min_word": 4,
+            "max_word": 40,
+            "separator": " "
+          },
+        }
+      ]
+    }
+  }
+};

package/src/react-extension/components/ResourceTag/DeleteResourceTag/DeleteResourceTag.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteResourceTag from "./DeleteResourceTag";
@@ -43,4 +42,3 @@ Initial.argTypes = {
     }
   }
 };
-

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.js

@@ -274,7 +274,7 @@ class EditResourceTag extends Component {
                 maxLength="128"
                 required="required" autoComplete="off" autoFocus={true}/>
               {this.state.nameError &&
-                  <div className="name error message">{this.state.nameError}</div>
+                  <div className="name error-message">{this.state.nameError}</div>
               }
             </div>
           </div>