passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.test.data.js

@@ -10,17 +10,123 @@ import userSettingsFixture from "../../../react-extension/test/fixture/Settings/
 export function defaultAppContext(appContext) {
   const defaultAppContext = {
     port: new MockPort(),
-    userSettings: new UserSettings(userSettingsFixture)
+    userSettings: new UserSettings(userSettingsFixture),
+    siteSettings: {
+      canIUse: () => true
+    }
   };
   return Object.assign(defaultAppContext, appContext || {});
 }
 
+/**
+ * Default props
+ * @returns {*}
+ */
+export function defaultProps() {
+  return {
+    prepareResourceContext: {
+      getSettings: () => settingsPasswordGenerator,
+      settings: settingsPasswordGenerator,
+      getPreparedResource: jest.fn(),
+      getLastGeneratedPassword: () => "Password"
+    }
+  };
+}
+
+const settingsPasswordGenerator = {
+  default_generator: "password",
+  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",
+          "active": true
+        },
+        {
+          "name": "lower",
+          "label": "a-z",
+          "characters": "abcdefghijklmnopqrstuvwxyz",
+          "active": true
+        },
+        {
+          "name": "digit",
+          "label": "0-9",
+          "characters": "0123456789",
+          "active": true
+        },
+        {
+          "name": "special_char1",
+          "label": "# $ % & @ ^ ~",
+          "characters": "#$%&@^~",
+          "active": true
+        },
+        {
+          "name": "parenthesis",
+          "label": "{ [ ( | ) ] ] }",
+          "characters": "([|])",
+          "active": true
+        },
+        {
+          "name": "special_char2",
+          "label": ". , : ;",
+          "characters": ".,:;",
+          "active": true
+        },
+        {
+          "name": "special_char3",
+          "label": "' \" `",
+          "characters": "'\"`",
+          "active": true
+        },
+        {
+          "name": "special_char4",
+          "label": "/ \\ _ -",
+          "characters": "/\\_-",
+          "active": true
+        },
+        {
+          "name": "special_char5",
+          "label": "< * + ! ? =",
+          "characters": "<*+!?=",
+          "active": true
+        },
+        {
+          "name": "emoji",
+          "label": "😘",
+          "characters": "😀😃😄😁😆😅😂🤣🥲☺️😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓😎🥸🤩🥳😏😒😞😔😟😕🙁☹️😣😖😫😩🥺😢😭😤😠😡🤬🤯😳🥵🥶😱😨😰😥😓🤗🤔🤭🤫🤥😶😐😑😬🙄😯😦😧😮😲🥱😴🤤😪😵🤐🥴🤢🤮🤧😷🤒🤕🤑🤠😈👿👹👺🤡💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾"
+        }
+      ],
+    },
+    {
+      "name": "Passphrase",
+      "type": "passphrase",
+      "default_options":{
+        "word_count": 8,
+        "word_case": "lowercase",
+        "min_word": 4,
+        "max_word": 40,
+        "separator": " "
+      },
+    }
+  ]
+};
+
 const mockTabInfo = {
   title: "test",
   url: "www.test.com"
 };
 
 export const mockResults = {
-  "passbolt.active-tab.get-info": mockTabInfo,
+  "passbolt.resources.prepare-resource": mockTabInfo,
   "passbolt.resources.create": {}
 };

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.test.js

@@ -1,12 +1,13 @@
 import React from "react";
 import {render, fireEvent, cleanup} from '@testing-library/react';
-import {StaticRouter} from 'react-router';
+import {StaticRouter} from 'react-router-dom';
 import ResourceCreatePage from "./ResourceCreatePage";
 import "../../../shared/lib/Secret/SecretComplexity";
 import {waitFor} from "@testing-library/dom";
 import MockTranslationProvider
   from "../../../react-extension/test/mock/components/Internationalisation/MockTranslationProvider";
-import MockPort from "../../../react-extension/test/mock/MockPort";
+import "../../../react-extension/test/lib/crypto/cryptoGetRandomvalues";
+import {defaultAppContext, defaultProps} from "./ResourceCreatePage.test.data";
 
 // Reset the modules before each test.
 beforeEach(() => {
@@ -24,26 +25,25 @@ describe("ResourceCreatePage", () => {
   describe("Form initialization", () => {
 
     it("should intialize the name and uri input fields with the active tab metadata", async() => {
-      const context = {
-        port: new MockPort()
-      };
+      const context = defaultAppContext();
       // mock the passbolt messaging layer.
       context.port = {
         request: event => new Promise(resolve => {
-          if (event === "passbolt.active-tab.get-info") {
+          if (event === "passbolt.quickaccess.prepare-resource") {
             resolve({
-              title: "Passbolt Browser Extension Test",
-              url: "https://passbolt-browser-extension/test"
+              name: "Passbolt Browser Extension Test",
+              uri: "https://passbolt-browser-extension/test"
             });
           }
         })
       };
+      const props = defaultProps();
 
       jest.useFakeTimers();
       const component = render(
         <MockTranslationProvider>
           <StaticRouter context={context}>
-            <ResourceCreatePage context={context} debug />
+            <ResourceCreatePage context={context} prepareResourceContext={props.prepareResourceContext} debug />
           </StaticRouter>
         </MockTranslationProvider>
       );
@@ -57,28 +57,33 @@ describe("ResourceCreatePage", () => {
       expect(nameInput.value).toBe("Passbolt Browser Extension Test");
       const uriInput = component.container.querySelector('[name="uri"]');
       expect(uriInput.value).toBe("https://passbolt-browser-extension/test");
+      const usernameInput = component.container.querySelector('[name="username"]');
+      expect(usernameInput.value).toBe(context.userSettings.username);
+      const passwordInput = component.container.querySelector('[name="password"]');
+      expect(passwordInput.value).toBe("AAAAAAAAAAAAAAAAAA");
     });
 
     it("should not initialize with chrome new tab metadata", async () => {
       // mock the passbolt messaging layer.
       window.passbolt = {
         request: event => new Promise(resolve => {
-          if (event === "passbolt.active-tab.get-info") {
+          if (event === "passbolt.quickaccess.prepare-resource") {
             resolve({
-              title: "newtab",
-              url: "chrome://newtab/"
+              name: "newtab",
+              uri: "chrome://newtab/"
             });
           }
         })
       };
 
-      const context = {};
+      const context = defaultAppContext();
+      const props = defaultProps();
 
       jest.useFakeTimers();
       const component = render(
         <MockTranslationProvider>
           <StaticRouter context={context}>
-            <ResourceCreatePage debug />
+            <ResourceCreatePage context={context} prepareResourceContext={props.prepareResourceContext} debug />
           </StaticRouter>
         </MockTranslationProvider>
       );
@@ -98,21 +103,21 @@ describe("ResourceCreatePage", () => {
       // mock the passbolt messaging layer.
       window.passbolt = {
         request: event => new Promise(resolve => {
-          if (event === "passbolt.active-tab.get-info") {
+          if (event === "passbolt.quickaccess.prepare-resource") {
             resolve({
-              title: "",
-              url: "about:newtab"
+              name: "",
+              uri: "about:newtab"
             });
           }
         })
       };
 
       jest.useFakeTimers();
-      const context = {};
+      const context = defaultAppContext();
       const component = render(
         <MockTranslationProvider>
           <StaticRouter context={context}>
-            <ResourceCreatePage debug />
+            <ResourceCreatePage context={context} debug />
           </StaticRouter>
         </MockTranslationProvider>
       );
@@ -137,17 +142,15 @@ describe("ResourceCreatePage", () => {
   describe("Form submition", () => {
     it("should create a new password on submit", async () => {
       const createPasswordEventMockCallback = jest.fn();
-      const context = {
-        port: new MockPort()
-      };
+      const context = defaultAppContext();
       // Mock the passbolt messaging layer.
       context.port = {
         request: function(event) {
           return new Promise(resolve => {
-            if (event === "passbolt.active-tab.get-info") {
+            if (event === "passbolt.quickaccess.prepare-resource") {
               resolve({
-                title: "Passbolt Browser Extension Test",
-                url: "https://passbolt-browser-extension/test"
+                name: "Passbolt Browser Extension Test",
+                uri: "https://passbolt-browser-extension/test"
               });
             }
             else if (event === "passbolt.resources.create") {

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import ResourceCreatePage from "./ResourceCreatePage";
@@ -14,7 +13,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><ResourceCreatePage {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><ResourceCreatePage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -22,12 +21,15 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
 };
+Initial.parameters = parameters;
 
 const contextMock = {
   port: {
@@ -38,6 +40,4 @@ export const CreateResourceFromTab = Template.bind({});
 CreateResourceFromTab.args = {
   context: defaultAppContext(contextMock)
 };
-
-
-
+CreateResourceFromTab.parameters = parameters;

package/src/react-quickaccess/components/ResourceViewPage/ResourceViewPage.js

@@ -3,6 +3,7 @@ import Transition from 'react-transition-group/Transition';
 import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
 import {withAppContext} from "../../contexts/AppContext";
+import {withRouter} from "react-router-dom";
 
 class ResourceViewPage extends React.Component {
   constructor(props) {
@@ -219,7 +220,7 @@ class ResourceViewPage extends React.Component {
     event.preventDefault();
     this.setState({usingOnThisTab: true});
     try {
-      await this.props.context.port.request('passbolt.quickaccess.use-resource-on-current-tab', this.state.resource.id, this.state.resource.username);
+      await this.props.context.port.request('passbolt.quickaccess.use-resource-on-current-tab', this.state.resource.id, this.props.context.tabId);
       window.close();
     } catch (error) {
       if (error && error.name === "UserAbortsOperationError") {
@@ -397,7 +398,7 @@ class ResourceViewPage extends React.Component {
               </span>
               <span className="visually-hidden"><Trans>Open in new window</Trans></span>
             </a>
-            <span className="property-name">Url</span>
+            <span className="property-name">URI</span>
             {this.state.resource.uri && sanitizeResourceUrl &&
               <a href={this.sanitizeResourceUrl()} role="button" className="property-value" target="_blank" rel="noopener noreferrer">
                 {this.state.resource.uri}
@@ -419,7 +420,9 @@ class ResourceViewPage extends React.Component {
           <a href="#" id="popupAction" className={`button primary big full-width ${this.state.usingOnThisTab ? "processing" : ""}`} role="button" onClick={this.handleUseOnThisTabClick}>
             <Trans>use on this page</Trans>
           </a>
+          {this.state.useOnThisTabError &&
           <div className="error-message">{this.state.useOnThisTabError}</div>
+          }
         </div>
       </div>
     );
@@ -435,4 +438,4 @@ ResourceViewPage.propTypes = {
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withTranslation('common')(ResourceViewPage));
+export default withAppContext(withRouter(withTranslation('common')(ResourceViewPage)));

package/src/react-quickaccess/components/ResourceViewPage/ResourceViewPage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import ResourceViewPage from "./ResourceViewPage";
 import AppContext from "../../contexts/AppContext";
@@ -14,7 +13,7 @@ export default {
 const Template = ({context, initialEntries, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={initialEntries}>
-      <Route path="/:id" component={routerProps => <div className="container page quickaccess"><ResourceViewPage {...args} {...routerProps}/></div>}/>
+      <Route path="/:id" component={routerProps => <div className="container quickaccess"><ResourceViewPage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -27,4 +26,7 @@ export const ResourceView = Template.bind({});
 ResourceView.args = {
   context: defaultAppContext(),
   initialEntries: ['/8e3874ae-4b40-590b-968a-418f704b9d9a']
-};
+};
+ResourceView.parameters = {
+  css: "ext_quickaccess"
+};

package/src/react-quickaccess/components/Search/Search.js

@@ -11,6 +11,15 @@ class Search extends React.Component {
     this.searchInputRef = React.createRef();
   }
 
+  /**
+   * ComponentDidMount
+   * Invoked immediately after component is inserted into the tree
+   * @return {void}
+   */
+  componentDidMount() {
+    this.focus();
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -20,7 +29,10 @@ class Search extends React.Component {
   }
 
   focus() {
-    this.searchInputRef.current.focus();
+    const canFocus = document.activeElement === document.body || document.activeElement === null;
+    if (canFocus) {
+      this.searchInputRef.current.focus();
+    }
   }
 
   handleInputChange(event) {

package/src/react-quickaccess/components/Search/Search.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import Search from "./Search";
@@ -14,7 +13,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><Search {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><Search {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -23,11 +22,10 @@ Template.propTypes = {
 };
 
 
-
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
 };
-
-
-
+Initial.parameters = {
+  css: "ext_quickaccess"
+};

package/src/react-quickaccess/contexts/PrepareResourceContext.js

@@ -0,0 +1,221 @@
+/**
+ * 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 * as React from "react";
+import PropTypes from "prop-types";
+import {withAppContext} from "./AppContext";
+
+/**
+ * Context related to prepare a resource ( name, url, username, password.)
+ */
+export const PrepareResourceContext = React.createContext({
+  settings: null, // The current settings of generators
+  lastGeneratedPassword: null, // The last password generated
+  resourcePrepared: null, // The resource prepared
+  onPrepareResource: () => {}, // Whenever a resource has been prepared
+  onPasswordGenerated: () => {}, // Whenever the a password has been generated with the generator
+  onLastGeneratedPasswordCleared: () => {}, // Whenever the last generated password must be cleared
+  getSettings: () => {}, // Whenever the settings must be get
+  getLastGeneratedPassword: () => {}, // Whenever the last generated password must be get
+  getPreparedResource: () => {} // Whenever the prepared resource must be get
+});
+
+/**
+ * The related context provider
+ */
+class PrepareResourceContextProvider extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    return {
+      settings: null, // The current settings of generators
+      lastGeneratedPassword: null, // The last password generated
+      resourcePrepared: null, // The resource prepared
+      onPrepareResource: this.onPrepareResource.bind(this), // Whenever a resource has been prepared
+      onPasswordGenerated: this.onPasswordGenerated.bind(this), // Whenever the a password has been generated with the generator
+      getSettings: this.getSettings.bind(this), // Whenever the settings must be get
+      getLastGeneratedPassword: this.getLastGeneratedPassword.bind(this), // Whenever the last generated password must be get
+      getPreparedResource: this.getPreparedResource.bind(this) // Whenever the prepared resource must be get
+    };
+  }
+
+  /**
+   * Whenever the component has been mounted
+   */
+  async componentDidMount() {
+    this.initializePasswordGenerator();
+  }
+
+  /**
+   * Initialize the password generator
+   */
+  async initializePasswordGenerator() {
+    if (this.props.context.isAuthenticated) {
+      const generatorSettings = await this.props.context.port.request('passbolt.password-generator.settings');
+      await this.setState({
+        settings: generatorSettings
+      });
+    }
+  }
+
+  /**
+   * Whenever the component updated
+   * @param previousProps The component previous props
+   */
+  async componentDidUpdate(previousProps) {
+    await this.handleIsAuthenticatedChange(previousProps.context.isAuthenticated);
+  }
+
+  /**
+   * Whenever the contextual isAuthenticated has changed
+   * @param previousIsAuthenticated The previous isAuthenticated
+   */
+  async handleIsAuthenticatedChange(previousIsAuthenticated) {
+    // This is a way to tell that the user has been authenticated
+    const isAuthenticatedNow = !previousIsAuthenticated && this.props.context.isAuthenticated;
+    if (isAuthenticatedNow) {
+      this.initializePasswordGenerator();
+    }
+  }
+
+  /**
+   * Whenever a password has been generated with the generator
+   * @param password The generated password
+   */
+  async onPasswordGenerated(password, generator) {
+    await this.changeGenerator(generator);
+    await this.updateGeneratedPassword(password);
+  }
+
+  /**
+   * Whenever a resource has been prepared by the user
+   * @param resource The prepared resource
+   */
+  async onPrepareResource(resource) {
+    this.setState({resourcePrepared: resource});
+  }
+
+  /**
+   * Whenever the last generated password must be cleared
+   */
+  clearLastGeneratedPassword() {
+    this.setState({lastGeneratedPassword: null});
+  }
+
+  /**
+   * Whenever the prepared resource must be cleared
+   */
+  clearPreparedResource() {
+    this.setState({resourcePrepared: null});
+  }
+
+  /**
+   * Change the default password generator
+   * @param generator A generator
+   */
+  changeGenerator(generator) {
+    const settings = {... this.state.settings};
+    settings.default_generator = generator.type;
+    settings.generators = settings.generators.map(defaultGenerator => defaultGenerator.type === generator.type ? generator : defaultGenerator);
+    this.setState({settings});
+  }
+
+  /**
+   * Updates the last generated password
+   * @param lastGeneratedPassword The last generated password
+   */
+  async updateGeneratedPassword(lastGeneratedPassword) {
+    await this.setState({lastGeneratedPassword});
+  }
+
+  /**
+   * Get the settings of the password generator
+   * @returns {Promise<*>}
+   */
+  async getSettings() {
+    if (!this.state.settings) {
+      await this.initializePasswordGenerator();
+    }
+    return this.state.settings;
+  }
+
+  /**
+   * Get the last generated password
+   * @returns {null|*}
+   */
+  getLastGeneratedPassword() {
+    const lastGeneratedPassword =  this.state.lastGeneratedPassword;
+    this.clearLastGeneratedPassword();
+    return lastGeneratedPassword;
+  }
+
+  /**
+   * Get the prepared resource
+   * @returns {null|*}
+   */
+  getPreparedResource() {
+    const resourcePrepared =  this.state.resourcePrepared;
+    this.clearPreparedResource();
+    return resourcePrepared;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <PrepareResourceContext.Provider value={this.state}>
+        {this.props.children}
+      </PrepareResourceContext.Provider>
+    );
+  }
+}
+
+PrepareResourceContextProvider.displayName = 'PrepareResourceContextProvider';
+PrepareResourceContextProvider.propTypes = {
+  context: PropTypes.any, // The application context
+  children: PropTypes.any,
+};
+
+
+export default withAppContext(PrepareResourceContextProvider);
+
+/**
+ * Generate Password Context Consumer HOC
+ * @param WrappedComponent
+ */
+export function withPrepareResourceContext(WrappedComponent) {
+  return class WithPrepareResource extends React.Component {
+    render() {
+      return (
+        <PrepareResourceContext.Consumer>
+          {
+            PrepareResourceContext => <WrappedComponent prepareResourceContext={PrepareResourceContext} {...this.props} />
+          }
+        </PrepareResourceContext.Consumer>
+      );
+    }
+  };
+}