passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-web-integration/components/AskInFormMenuDisplay/AskInFormMenuDisplay.js

@@ -0,0 +1,161 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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 {withAppContext} from "../../contexts/AppContext";
+import PropTypes from "prop-types";
+
+/**
+ * This component is a call-to-action integrated into a target web page which includes
+ * an identified authentication form. When some Passbolt actions are available, the performed call-to-action
+ * proposes a menu of these available actions (DisplayInFormMenu)
+ */
+class AskInFormMenuDisplay extends React.Component {
+  /**
+   * Default constructor
+   * @param props Component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindEventHandlers();
+  }
+
+  /**
+   * Whenever the component is mounted
+   */
+  componentDidMount() {
+    this.props.context.port.on("passbolt.auth.after-logout", this.handleUserLoggedOut.bind(this));
+    this.props.context.port.on("passbolt.auth.after-login", this.handleUserLoggedIn.bind(this));
+    this.checkAuthenticationStatus();
+  }
+
+  /**
+   * Handle when the user is logged in.
+   */
+  async handleUserLoggedIn() {
+    const suggestedResourcesCount = await this.props.context.port.request("passbolt.in-form-cta.suggested-resources");
+    this.setState({
+      status: {
+        isActive: true,
+        suggestedResourcesCount
+      },
+    });
+  }
+
+  /**
+   * Handle when the user is logged out.
+   */
+  handleUserLoggedOut() {
+    this.setState({
+      status: {
+        isActive: false,
+        suggestedResourcesCount: 0
+      },
+    });
+  }
+
+  /**
+   * Returns the default state
+   */
+  get defaultState() {
+    return {
+      isReady: false, // True if the component is ready to be rendered
+      status: {
+        isActive: false, // By default, inactive call-to-action
+        suggestedResourcesCount: null // The number of resources to suggest
+      }
+    };
+  }
+
+  /**
+   * Returns the count of suggested resources
+   */
+  get suggestedResourcesCount() {
+    return this.state.status.suggestedResourcesCount;
+  }
+
+  /**
+   * Return the number of suggested resource to display the right logo
+   * @returns {string|null}
+   */
+  get logoNumber() {
+    return this.suggestedResourcesCount > 5 ? '5-plus' : this.suggestedResourcesCount;
+  }
+
+  /**
+   * Bind the event handlers
+   */
+  bindEventHandlers() {
+    this.handleIconClick = this.handleIconClick.bind(this);
+  }
+
+  /**
+   * Whenever the user clicks on the in-form passbolt icon
+   */
+  handleIconClick() {
+    this.execute();
+  }
+
+  /**
+   * Check the user authentication status
+   */
+  async checkAuthenticationStatus() {
+    const {isAuthenticated, isMfaRequired} = await this.props.context.port.request("passbolt.in-form-cta.check-status");
+    const isActive = isAuthenticated && !isMfaRequired;
+    let suggestedResourcesCount = 0;
+    if (isActive) {
+      suggestedResourcesCount = await this.props.context.port.request("passbolt.in-form-cta.suggested-resources");
+    }
+    this.setState({
+      isReady: true,
+      status: {
+        isActive,
+        suggestedResourcesCount
+      },
+    });
+  }
+
+  /**
+   * Perform the call-to-action
+   */
+  execute() {
+    this.props.context.port.request("passbolt.in-form-cta.execute");
+  }
+
+  /**
+   * Render the component
+   */
+  render() {
+    const logoClassModifier = this.state.status.isActive ? this.logoNumber : 'inactive';
+    return (
+      <>
+        {this.state.isReady &&
+          <a onClick={this.handleIconClick}>
+            <div className="in-form-icon">
+              <div className={`in-form-icon-logo in-form-icon-logo--${logoClassModifier}`} />
+            </div>
+          </a>
+        }
+
+      </>
+    );
+  }
+
+}
+
+AskInFormMenuDisplay.propTypes = {
+  context: PropTypes.any // The application context
+};
+
+export default withAppContext(AskInFormMenuDisplay);

package/src/react-web-integration/components/AskInFormMenuDisplay/AskInFormMenuDisplay.test.data.js

@@ -0,0 +1,39 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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
+ */
+
+/**
+ * Context with an unanthenticated user
+ * @type {{port: {request: (function(): {isAuthenticated: boolean, isMfaRequired: boolean})}}}
+ */
+export const contextWithUnauthenticatedUser = {
+  port: {
+    on: jest.fn(),
+    request: () => {
+      return {isAuthenticated: false, isMfaRequired: false}
+    }
+  }
+};
+
+/**
+ * Context with an authenticated user
+ * @type {{port: {request: (function(): {isAuthenticated: boolean, isMfaRequired: boolean})}}}
+ */
+export const contextWithAuthenticatedUser = {
+  port: {
+    on: jest.fn(),
+    request: () => {
+      return {isAuthenticated: true, isMfaRequired: false}
+    }
+  }
+};

package/src/react-web-integration/components/AskInFormMenuDisplay/AskInFormMenuDisplay.test.js

@@ -0,0 +1,48 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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 AskInFormMenuDisplay in regard of specifications
+ */
+
+import AskInFormMenuDisplayTestPage from "./AskInFormMenuDisplay.test.page";
+import {contextWithAuthenticatedUser, contextWithUnauthenticatedUser} from "./AskInFormMenuDisplay.test.data";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("See the Create Resource", () => {
+  let page; // The page to test against
+
+  describe('As a logged out user on a webpage with a form', () => {
+    beforeEach(() => {
+      page = new AskInFormMenuDisplayTestPage(contextWithUnauthenticatedUser);
+    });
+
+    it('I should see a grey Passbolt icon when I mouseover or focus on a username or password fields', async() => {
+      expect(page.isActive).toBeFalsy();
+    });
+  });
+
+  describe('As a logged in user on a webpage with a form', () => {
+    beforeEach(() => {
+      page = new AskInFormMenuDisplayTestPage(contextWithAuthenticatedUser);
+    });
+
+    it('I should see a grey Passbolt icon when I mouseover or focus on a username or password fields', async() => {
+      expect(page.isActive).toBeTruthy();
+    });
+  });
+});

package/src/react-web-integration/components/AskInFormMenuDisplay/AskInFormMenuDisplay.test.page.js

@@ -0,0 +1,42 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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 {render} from "@testing-library/react";
+import React from "react";
+import AskInFormMenuDisplay from "./AskInFormMenuDisplay";
+import AppContext from "../../contexts/AppContext";
+
+/**
+ * The AskInFormMenuDisplayTest component represented as a page
+ */
+export default class AskInFormMenuDisplayTestPage {
+  /**
+   * Default constructor
+   * @param appContext An app context
+   */
+  constructor(appContext) {
+    this._page = render(
+      <AppContext.Provider value={appContext}>
+        <AskInFormMenuDisplay/>
+      </AppContext.Provider>
+    );
+  }
+
+  /**
+   * Returns true if the in-form icon is in an active mode
+   */
+  get isActive() {
+    return this._page.container.querySelector('.in-form-icon-logo--inactive') === null;
+  }
+}

package/src/react-web-integration/components/AskInFormMenuDisplay/AskInFormMenuDisplay.test.stories.js

@@ -0,0 +1,91 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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, {useEffect} from "react";
+import AskInFormMenuDisplay from "./AskInFormMenuDisplay";
+import ReactDOM from "react-dom";
+import AppContext from "../../contexts/AppContext";
+
+export default {
+  title: 'Passbolt/WebIntegration/AskInFormMenuDisplay',
+  component: AskInFormMenuDisplay
+};
+
+
+// Simulate Iframe anchor of In-form components
+const InFormAnchor = ({context}) => {
+  useEffect(() => {
+    const loginInput = document.querySelector('input')
+    const anchor = document.createElement("div");
+    loginInput.parentNode.insertBefore(anchor, loginInput);
+
+    // Find the position to insert the in-form component in regard of the input
+    const {top, left, width, height} = loginInput.getBoundingClientRect();
+    const leftAnchorPosition = left + width - 25 // 25px inside the input
+    const topAnchorPosition = top + (height-16) / 2; // Look for the difference between the input height and the icon size 16
+    const containerStyle = {zIndex: 200, position: 'absolute', top: topAnchorPosition, left: leftAnchorPosition};
+    const InForm = () =>
+      <AppContext.Provider value={context}>
+        <div style={containerStyle}>
+          <div className="web-integration">
+            <AskInFormMenuDisplay/>
+          </div>
+        </div>
+      </AppContext.Provider>
+    ReactDOM.render(<InForm/>, anchor);
+  }, []);
+  return (<></>);
+}
+
+const Template = ({context}) =>
+  <div>
+    <input
+      type="text"
+      placeholder="username"/>
+    <InFormAnchor context={context}/>
+  </div>;
+
+const parameters = {
+  css: "ext_in_form_cta"
+};
+
+export const Inactive = Template.bind({});
+Inactive.args = {
+  context: {
+    port: {
+      request: () => {throw {data: {code: 401}}}
+    }
+  }
+};
+Inactive.parameters = parameters;
+
+export const ActiveWithNoSuggestion = Template.bind({});
+ActiveWithNoSuggestion.args = {
+  context: {
+    port: {
+      request: () => ({isActive: true, suggestedResourcesCount: 0})
+    }
+  }
+};
+ActiveWithNoSuggestion.parameters = parameters;
+
+export const ActiveWithOneSuggestion = Template.bind({});
+ActiveWithOneSuggestion.args = {
+  context: {
+    port: {
+      request: () => ({isActive: true, suggestedResourcesCount: 1})
+    }
+  }
+};
+ActiveWithOneSuggestion.parameters = parameters;