passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-web-integration/contexts/AppContext.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
+ */
+
+import React from "react";
+
+const AppContext = React.createContext({
+  context: null,
+});
+
+/**
+ * App Context Consumer HOC
+ * @param WrappedComponent
+ */
+export function withAppContext(WrappedComponent) {
+  return class withAppContext extends React.Component {
+    render() {
+      return (
+        <AppContext.Consumer>
+          {
+            AppContext => <WrappedComponent context={AppContext} {...this.props} />
+          }
+        </AppContext.Consumer>
+      );
+    }
+  };
+}
+
+export default AppContext;

package/src/react-web-integration/lib/Dom/DomUtils.js

@@ -0,0 +1,94 @@
+/**
+ * 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
+ */
+
+/**
+ * Some DOM utils
+ */
+class DomUtils {
+
+  static getAccessibleAndSameDomainIframes() {
+    return Array.prototype.filter.call( document.querySelectorAll("iframe"), iframe => {
+      const contentDocument = DomUtils.getAccessedIframeContentDocument(iframe);
+      return contentDocument && DomUtils.isRequestInitiatedFromSameOrigin(window.location.href, contentDocument.location.href);
+    });
+  }
+
+  /**
+   * Returns an accessible iframe document in the page
+   * @param {DomElement} iframe found on the page
+   * @return {DomElement} iframe document
+   */
+  static getAccessedIframeContentDocument(iframe) {
+    let iframeContentDocument = null;
+    try {
+      iframeContentDocument = iframe.contentDocument;
+    } catch (error) {
+      console.error(error);
+    }
+    return iframeContentDocument;
+  };
+
+
+  /**
+   * Check the requested document, top document and an iframe form is initiated from same domain.
+   *
+   * @param {string} requestedUrl The requested document url
+   * @param {string} documentUrl The current active document url
+   * @return {Boolean} true
+   */
+  static isRequestInitiatedFromSameOrigin(requestedUrl, documentUrl) {
+    // requestedUrl - from quickaccess
+    const parsedRequestedUrl = new URL(requestedUrl);
+    // Request initiated document origin
+    const requestedOrigin = parsedRequestedUrl.origin;
+    // documentUrl - from current active page
+    const parsedDocumentUrl = new URL(documentUrl);
+    // Top level document/an iframe document origin
+    const documentOrigin = parsedDocumentUrl.origin;
+
+    // Requested document and top/iframe document origin is same
+    return requestedOrigin === documentOrigin;
+  };
+
+  /**
+   * Returns the first scrollable parent of the given node
+   * @param node A Dom node
+   */
+  static getScrollParent(node) {
+    const regex = /(auto|scroll)/;
+
+    const style = (node, prop) =>
+      getComputedStyle(node, null).getPropertyValue(prop);
+
+    const isScrollable = (node) =>
+      regex.test(
+        style(node, "overflow") +
+        style(node, "overflow-y") +
+        style(node, "overflow-x"));
+
+    const scrollParent = node => {
+      if (!node || node===document.body) {
+        return window;
+      } else if (isScrollable(node)) {
+        return node;
+      } else {
+        return scrollParent(node.parentNode)
+      }
+    }
+    return scrollParent(node);
+  }
+
+}
+
+export default DomUtils;

package/src/react-web-integration/lib/InForm/InFormCallToActionField.js

@@ -0,0 +1,263 @@
+/**
+ * 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 {v4 as uuidv4} from "uuid";
+import DomUtils from "../Dom/DomUtils";
+import browser from "webextension-polyfill";
+
+/**
+ * An InFormCallToActionField is represented by a DOM element identified as an username field and to which
+ * in-form call-to-action and/or menu can be attached
+ */
+class InFormCallToActionField {
+
+  /**
+   * Retrieve all the DOM elements which can be an in-form username fields
+   */
+  static findAll(selector) {
+    const domFields =  Array.from(document.querySelectorAll(selector));
+    const iframesFields = InFormCallToActionField.findAllInIframes(selector);
+    return domFields.concat(iframesFields);
+  }
+
+  /**
+   * Retrieve all the iframes elements which can be an in-form username fields
+   * @return {*}
+   */
+  static findAllInIframes(selector) {
+    const iframes = DomUtils.getAccessibleAndSameDomainIframes();
+    const queryMapper = iframe => Array.from(iframe.contentDocument.querySelectorAll(selector));
+    return iframes
+      .map(queryMapper)
+      .flat();
+  }
+
+  /**
+   * Default constructor
+   * @param field The DOM element
+   * @param fieldType The type of field
+   */
+  constructor(field, fieldType) {
+    /** The field to which the in-form is attached */
+    this.field = field;
+    /** Type of the field ("username" or "password") */
+    this.fieldType = fieldType;
+    /** An unique identifier for the iframe */
+    this.iframeId = uuidv4();
+    /** The scrollable field parent */
+    this.scrollableFieldParent = null;
+    /** Flag telling if the user is mousing over the call-to-action (iframe) */
+    this.isCallToActionMousingOver = false;
+    /** In-form call-to-action click watcher */
+    this.callToActionClickWatcher = null;
+    /** In-form call-to-action click listener callback */
+    this.callToActionClickCallback = null;
+
+    this.bindCallbacks();
+    this.handleInsertionEvent();
+    this.handleRemoveEvent();
+    this.handleScrollEvent();
+  }
+
+  /**
+   * Binds methods callbacks
+   */
+  bindCallbacks() {
+    this.insertInformCallToActionIframe = this.insertInformCallToActionIframe.bind(this);
+    this.removeInFormCallToActionWhenMouseOut = this.removeInFormCallToActionWhenMouseOut.bind(this);
+    this.removeInFormCallToAction = this.removeInFormCallToAction.bind(this);
+    this.removeCallToActionIframe = this.removeCallToActionIframe.bind(this);
+    this.destroy = this.destroy.bind(this);
+  }
+
+  /**
+   * Handle a callback after on click on the in-form-call-to-action
+   * @param callback
+   */
+  onClick(callback) {
+    this.callToActionClickCallback = callback;
+  }
+
+  /** CALL-TO-ACTION INSERTION */
+
+  /**
+   * Whenever the call-to-action must be inserted
+   */
+  handleInsertionEvent() {
+    if (document.activeElement === this.field) {
+      this.insertInformCallToActionIframe();
+    }
+    this.field.addEventListener("mouseover", this.insertInformCallToActionIframe);
+    this.field.addEventListener("focus",  this.insertInformCallToActionIframe);
+  }
+
+  /**
+   * Insert an in-form call-to-action iframe
+   */
+  insertInformCallToActionIframe() {
+    const iframes = document.querySelectorAll('iframe');
+    // Use of Array prototype some method cause NodeList is not an array !
+    const iframeId =  this.iframeId;
+    const isIframeAlreadyInserted = Array.prototype.some.call(iframes, iframe => iframe.id === iframeId);
+    if (!isIframeAlreadyInserted) {
+      const iframe = this.createCallToActionIframe();
+      this.handleCallToActionClicked(iframe);
+    }
+  }
+
+  /**
+   * Create an iframe dedicated to the call-to-action
+   * @return {HTMLIFrameElement} The created iframe
+   */
+  createCallToActionIframe() {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const browserExtensionUrl = browser.runtime.getURL("/");
+    const {top, left} = this.calculateFieldPosition();
+    iframe.id = this.iframeId;
+    iframe.style.position = "fixed";
+    iframe.style.top = top + 'px'
+    iframe.style.left =  left + 'px';
+    iframe.style.border = 0;
+    iframe.style.width = '18px';
+    iframe.style.height = '18px';
+    iframe.style.zIndex = "1000";  // For you Yahoo with love
+    iframe.contentWindow.location = `${browserExtensionUrl}data/passbolt-iframe-in-form-call-to-action.html?passbolt=passbolt-iframe-in-form-call-to-action`;
+    return iframe;
+  }
+
+  /**
+   * Calculates the position on the screen of the DOM field
+   * @return {{top: number, left: number}}
+   */
+  calculateFieldPosition() {
+    let x = 0;
+    let y = 0;
+    let currentElement = this.field;
+    const {height, width} = this.field.getBoundingClientRect();
+    const {top: topBody, left: leftBody} = document.documentElement.getBoundingClientRect();
+    // We loop to calculate the cumulated position of the field
+    // from its ancestors and itself differential offset / scroll position
+    while(currentElement && !isNaN(currentElement.offsetLeft) && !isNaN(currentElement.offsetTop)) {
+      x += currentElement.offsetLeft - currentElement.scrollLeft;
+      y += currentElement.offsetTop - currentElement.scrollTop;
+      currentElement = currentElement.offsetParent;
+    }
+    // Then we add the body offset (notably in case of window scroll) + some local adjustments (margin / vertical aligment )
+    x = x + leftBody + width - 25;
+    y = y + topBody + Math.floor(height / 2) - 9; // Calculate the middle position of the input, 9 is the half of the iframe height
+    return {top: y, left: x};
+  }
+
+
+  /**
+   * Whenever the user clicked on the call-to-action iframe
+   * @param iframe The call-to-action iframe
+   */
+  handleCallToActionClicked(iframe) {
+    /* In case of click on iframe, the field lose the focus. Since it loses the focus, the iframe is removed.
+     * And so the call-to-action. So, we need to restore the focus on the input. In case, it did not have
+     * previously the focus, no matter since a click on the call-to-action should be a way to focus on the input
+     */
+    this.callToActionClickWatcher = setInterval(() => {
+      // Check if a click has been applied on some iframe
+      const elem = document.activeElement;
+      if (elem && elem.tagName == 'IFRAME' && elem.id === this.iframeId) {
+        this.field.focus();
+        this.callToActionClickCallback();
+        clearInterval(this.callToActionClickWatcher);
+      }
+    }, 100);
+    /* We need to know which iframe the user click on. We cannot add a listener on iframe
+     * since there are from different domains (target page vs extension pagemods)
+     */
+    iframe.addEventListener('mouseover', () => this.isCallToActionMousingOver = true);
+    iframe.addEventListener('mouseout', () => this.isCallToActionMousingOver = false);
+  }
+
+  /** CALL-TO-ACTION REMOVE */
+
+  /**
+   * Whenever the call-to-action must be removed
+   */
+  handleRemoveEvent() {
+    this.field.addEventListener("mouseout", this.removeInFormCallToActionWhenMouseOut);
+    this.field.addEventListener("blur",  this.removeInFormCallToAction);
+  }
+
+  /**
+   * Removes the in-form call-to-action iframe from the username or password field
+   */
+  removeInFormCallToAction() {
+    const isIframeMouseOver = this.isCallToActionMousingOver;
+    const isActiveElementAnAuthenticationField = document.activeElement === this.field;
+    if (!isIframeMouseOver && !isActiveElementAnAuthenticationField) {
+      this.removeCallToActionIframe();
+    }
+  }
+
+  /**
+   * Removes the call-to-action iframe from the username or password field when one moused out
+   * @param event The mouse-out event
+   */
+  removeInFormCallToActionWhenMouseOut(event) {
+    const isNotCallToActionIframe = event.relatedTarget && event.relatedTarget.id !== this.iframeId;
+    const isActiveElementAnAuthenticationField = document.activeElement === this.field;
+    if (isNotCallToActionIframe && !isActiveElementAnAuthenticationField) {
+      this.removeCallToActionIframe();
+    }
+  }
+
+  /**
+   * Remove the call-to-action (iframe)
+   */
+  removeCallToActionIframe() {
+    const iframes = document.querySelectorAll('iframe');
+    iframes.forEach(iframe => {
+      const identifierToMatch = this.iframeId;
+      if (iframe.id === identifierToMatch) {
+        iframe.parentNode.removeChild(iframe);
+      }
+    });
+  }
+
+  /** SCROLL REPOSITION */
+
+  /**
+   * Whenever the user scrolls the page
+   */
+  handleScrollEvent() {
+    // Remove the call-to-action
+    this.scrollableFieldParent = DomUtils.getScrollParent(this.field);
+    this.scrollableFieldParent.addEventListener('scroll', this.removeCallToActionIframe);
+  }
+
+  /** DESTROY */
+
+  /**
+   * Remove all listener and iframe to clean the page and avoid issue on extension update
+   */
+  destroy() {
+    this.field.removeEventListener("mouseover", this.insertInformCallToActionIframe);
+    this.field.removeEventListener("focus",  this.insertInformCallToActionIframe);
+    this.field.removeEventListener("mouseout", this.removeInFormCallToActionWhenMouseOut);
+    this.field.removeEventListener("blur",  this.removeInFormCallToAction);
+    this.scrollableFieldParent.removeEventListener('scroll', this.removeCallToActionIframe);
+    this.removeCallToActionIframe();
+  }
+}
+
+export default InFormCallToActionField;
+
+

package/src/react-web-integration/lib/InForm/InFormCredentialsFormField.js

@@ -0,0 +1,118 @@
+/**
+ * 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 InFormCallToActionField from "./InFormCallToActionField";
+import DomUtils from "../Dom/DomUtils";
+import {v4 as uuidv4} from "uuid";
+
+/** Button submit selector */
+const SUBMIT_BUTTON_SELECTOR = "button[type='submit'], input[type='submit']";
+
+/**
+ * An InFormCredentialsFormField is represented by a DOM element identified as credentials form DOM element which once filled
+ * can be auto-saved by Passbolt
+ */
+class InFormCredentialsFormField {
+  /**
+   * Retrieve all the DOM elements which can be an credentials form fields
+   */
+  static findAll() {
+    const domFields =  Array.from(document.querySelectorAll('form'));
+    const iframesFields = InFormCallToActionField.findAllInIframes();
+    return domFields.concat(iframesFields);
+  }
+
+  /**
+   * Retrieve all the iframes elements which can be an credential form field
+   * @return {*}
+   */
+  static findAllInIframes() {
+    const iframes = DomUtils.getAccessibleAndSameDomainIframes();
+    const queryMapper = iframe => Array.from(iframe.contentDocument.querySelectorAll('form'));
+    return iframes
+      .map(queryMapper)
+      .flat();
+  }
+
+  /**
+   * Default constructor
+   * @param field The DOM field which represents the field
+   * @param usernameField The username DOM field into the form
+   * @param passwordField The password DOM field into the form
+   */
+  constructor(field, usernameField, passwordField) {
+    /** The field to which the in-form is attached */
+    this.field = field;
+    /** The username field attached to the form */
+    this.usernameField = usernameField;
+    /** The password field attached to the form */
+    this.passwordField = passwordField;
+    /** Flag telling whether the form submission has already been performed (and avoid twice autosave call) */
+    this.hasAlreadySubmitted = false;
+
+    this.bindCallbacks();
+  }
+
+  /**
+   * Returns the submit button (if exists)
+   */
+  get submitButton() {
+    return this.field.querySelector(SUBMIT_BUTTON_SELECTOR);
+  }
+
+  /**
+   * Binds methods callbacks
+   */
+  bindCallbacks() {
+    this.handleAutoSaveEvent = this.handleAutoSaveEvent.bind(this);
+    this.autosave = this.autosave.bind(this);
+    this.destroy = this.destroy.bind(this);
+  }
+
+  /**
+   * Whenever one must propose auto-save on the current credentials form
+   * @param callback Callback when the auto-save should be performed
+   */
+  handleAutoSaveEvent() {
+    this.field.addEventListener('submit', this.autosave);
+    this.submitButton?.addEventListener('click', this.autosave);
+  }
+
+  /** Autosave current credentials in the page */
+  autosave() {
+    const areFieldsFilled = Boolean(this.usernameField?.value?.trim()) && Boolean(this.passwordField?.value?.trim());
+    if (!this.hasAlreadySubmitted && areFieldsFilled) {
+      this.hasAlreadySubmitted = true;
+      port.emit('passbolt.web-integration.autosave', {
+        name: document.title,
+        username: this.usernameField.value,
+        password:  this.passwordField.value,
+        url: document.URL
+      });
+    }
+  }
+
+  /** DESTROY */
+
+  /**
+   * Remove all listener to clean the page and avoid issue on extension update
+   */
+  destroy() {
+    this.field.removeEventListener('submit', this.autosave);
+    this.submitButton?.removeEventListener("click", this.autosave);
+  }
+
+}
+
+export default InFormCredentialsFormField;

package/src/react-web-integration/lib/InForm/InFormFieldSelector.js

@@ -0,0 +1,77 @@
+/**
+ * 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
+ */
+
+/**
+ * All the possible in-form fields DOM selectors
+ */
+export default {
+  /** Selectors to detect username inputs (input type text or not type with id or class or name contain user) */
+  USERNAME_FIELD_SELECTOR: `input[type='text'][name*='user']:not([hidden]):not([disabled]),
+  input[type='text'][name*='email']:not([hidden]):not([disabled]),
+  input[type='text'][id*='user']:not([hidden]):not([disabled]),
+  input[type='text'][id*='email']:not([hidden]):not([disabled]),
+  input[type='text'][class*='user']:not([hidden]):not([disabled]),
+  input[type='text'][class*='email']:not([hidden]):not([disabled]),
+  input[type='text'][autocomplete*='user']:not([hidden]):not([disabled]),
+  input[type='text'][autocomplete*='email']:not([hidden]):not([disabled]),
+  input[type='Text'][name*='user']:not([hidden]):not([disabled]),
+  input[type='Text'][name*='email']:not([hidden]):not([disabled]),
+  input[type='Text'][id*='user']:not([hidden]):not([disabled]),
+  input[type='Text'][id*='email']:not([hidden]):not([disabled]),
+  input[type='Text'][class*='user']:not([hidden]):not([disabled]),
+  input[type='Text'][class*='email']:not([hidden]):not([disabled]),
+  input[type='Text'][autocomplete*='user']:not([hidden]):not([disabled]),
+  input[type='Text'][autocomplete*='email']:not([hidden]):not([disabled]),
+  input[type='TEXT'][name*='user']:not([hidden]):not([disabled]),
+  input[type='TEXT'][name*='email']:not([hidden]):not([disabled]),
+  input[type='TEXT'][id*='user']:not([hidden]):not([disabled]),
+  input[type='TEXT'][id*='email']:not([hidden]):not([disabled]),
+  input[type='TEXT'][class*='user']:not([hidden]):not([disabled]),
+  input[type='TEXT'][class*='email']:not([hidden]):not([disabled]),
+  input[type='TEXT'][autocomplete*='user']:not([hidden]):not([disabled]),
+  input[type='TEXT'][autocomplete*='email']:not([hidden]):not([disabled]),
+  input[type='email']:not([hidden]):not([disabled]),
+  input[type='Email']:not([hidden]):not([disabled]),
+  input[type='EMAIL']:not([hidden]):not([disabled]),
+  input[name*='user']:not([type]):not([hidden]):not([disabled]),
+  input[name*='email']:not([type]):not([hidden]):not([disabled]),
+  input[id*='user']:not([type]):not([hidden]):not([disabled]),
+  input[id*='email']:not([type]):not([hidden]):not([disabled]),
+  input[class*='user']:not([type]):not([hidden]):not([disabled]),
+  input[class*='email']:not([type]):not([hidden]):not([disabled])
+  input[autocomplete*='user']:not([type]):not([hidden]):not([disabled]),
+  input[autocomplete*='email']:not([type]):not([hidden]):not([disabled])`,
+  /** Selectors to detect password inputs (input type password or type text with id or class or name contain password) */
+  PASSWORD_FIELD_SELECTOR: `input[type='password']:not([hidden]):not([disabled]),
+  input[type='Password']:not([hidden]):not([disabled]),
+  input[type='PASSWORD']:not([hidden]):not([disabled]),
+  input[type='text'][name*='password']:not([hidden]):not([disabled]),
+  input[type='text'][id*='password']:not([hidden]):not([disabled]),
+  input[type='text'][class*='password']:not([hidden]):not([disabled]),
+  input[type='Text'][name*='password']:not([hidden]):not([disabled]),
+  input[type='Text'][id*='password']:not([hidden]):not([disabled]),
+  input[type='Text'][class*='password']:not([hidden]):not([disabled]),
+  input[type='TEXT'][name*='password']:not([hidden]):not([disabled]),
+  input[type='TEXT'][id*='password']:not([hidden]):not([disabled]),
+  input[type='TEXT'][class*='password']:not([hidden]):not([disabled])
+  input[type='text'][name*='Password']:not([hidden]):not([disabled]),
+  input[type='text'][id*='Password']:not([hidden]):not([disabled]),
+  input[type='text'][class*='Password']:not([hidden]):not([disabled]),
+  input[type='Text'][name*='Password']:not([hidden]):not([disabled]),
+  input[type='Text'][id*='Password']:not([hidden]):not([disabled]),
+  input[type='Text'][class*='Password']:not([hidden]):not([disabled]),
+  input[type='TEXT'][name*='Password']:not([hidden]):not([disabled]),
+  input[type='TEXT'][id*='Password']:not([hidden]):not([disabled]),
+  input[type='TEXT'][class*='Password']:not([hidden]):not([disabled])`
+}