passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/public-website-sign-in/PublicWebsiteSignInBootstrap.js

@@ -0,0 +1,25 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.7.0
+ */
+
+
+import SignInManager from "./lib/SignIn/SignInManager";
+
+/**
+ * Bootstrap the sign in web extension with passbolt.com browsed pages.
+ */
+async function init() {
+  SignInManager.initialize();
+}
+
+export const PublicWebsiteSignInBootstrap = {init};

package/src/public-website-sign-in/lib/SignIn/SignInManager.js

@@ -0,0 +1,85 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.7.0
+ */
+
+/**
+ * Manages the sign in web extension
+ */
+class SignInManager {
+  /**
+   * Default constructor
+   */
+  constructor() {
+    this.bindCallbacks();
+  }
+
+  /**
+   * Initializes the in-form manager
+   */
+  initialize() {
+    this.addClassToDomElement()
+    this.handlePortDisconnectEvent();
+    this.handlePublicWebsiteClickEvent();
+  }
+
+  /**
+   * Binds the callbacks
+   */
+  bindCallbacks() {
+    this.handlePublicWebsiteClickEvent = this.handlePublicWebsiteClickEvent.bind(this);
+    this.destroy = this.destroy.bind(this);
+  }
+
+  /**
+   * Add class to the html tag element
+   */
+  addClassToDomElement() {
+    document.documentElement.classList.add("passbolt-extension");
+  }
+
+  /**
+   * Handle the click on the sign in web extension
+   */
+  async handlePublicWebsiteClickEvent() {
+    document.documentElement.addEventListener('click', this.redirectToSignIn, true);
+  }
+
+  /**
+   * Redirect to the sign in url
+   * @param event
+   * @returns {Promise<void>}
+   */
+  redirectToSignIn(event) {
+    if (event.target.id === "extension-sign-in") {
+      port.request('passbolt.extension.sign-in-url');
+    }
+  }
+
+  /**
+   * Remove all event
+   */
+  destroy() {
+    document.documentElement.removeEventListener('click', this.redirectToSignIn, true);
+    document.documentElement.classList.remove("passbolt-extension");
+  }
+
+  /**
+   * Whenever the port is disconnected due to an update of the extension
+   */
+  handlePortDisconnectEvent() {
+    port._port.onDisconnect.addListener(this.destroy);
+  }
+}
+
+export default new SignInManager();
+

package/src/public-website-sign-in/lib/SignIn/SignInManager.test.data.js

@@ -0,0 +1,45 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.7.0
+ */
+
+import MockPort from "../../../react-extension/test/mock/MockPort";
+
+/**
+ * Create button for sign-in in DOM
+ * @type {string}
+ */
+export const domElementWithExtensionSignIn =
+  '<div>' +
+  '  <button type="button" id="extension-sign-in"/>' +
+  '</div>';
+
+/**
+ * Create one buttons for sign-in in DOM
+ * @type {string}
+ */
+export const domElementWithNoExtensionSignIn =
+  '<div>' +
+  '  <button type="button" id="other-button"/>' +
+  '</div>';
+
+/**
+ * Mock global variable in window
+ */
+export const initializeWindow = () => {
+  window.port = new MockPort();
+  window.port._port = {
+    onDisconnect: {
+      addListener: () => {}
+    }
+  };
+};

package/src/public-website-sign-in/lib/SignIn/SignInManager.test.js

@@ -0,0 +1,59 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.7.0
+ */
+
+/**
+ * Unit tests on SignInManager in regard of specifications
+ */
+
+import {
+  domElementWithExtensionSignIn, domElementWithNoExtensionSignIn,
+  initializeWindow
+} from "./SignInManager.test.data";
+import SignInManagerPage from "./SignInManager.test.page";
+import SignInManager from "./SignInManager";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("SignInManager", () => {
+  // Mock port in window
+  initializeWindow();
+  // Spy on port request
+  jest.spyOn(port, 'request').mockImplementation(() => "");
+
+  afterEach(() => {
+    SignInManager.destroy();
+  });
+
+  it("As AN I should not be redirected if I click on other button", async() => {
+    // Set up document body
+    // eslint-disable-next-line no-unsanitized/property
+    document.body.innerHTML = domElementWithNoExtensionSignIn; // The Dom
+    const SignInManager = new SignInManagerPage();
+    await SignInManager.clickOnOtherButton();
+    expect(port.request).not.toHaveBeenCalled();
+  });
+
+  it("As AN I should be redirected if I click on sign in", async() => {
+    // Set up document body
+    // eslint-disable-next-line no-unsanitized/property
+    document.body.innerHTML = domElementWithExtensionSignIn; // The Dom
+    const SignInManager = new SignInManagerPage();
+    await SignInManager.clickOnSignIn();
+    expect(document.documentElement.classList.contains("passbolt-extension")).toBeTruthy();
+    expect(port.request).toHaveBeenCalledWith("passbolt.extension.sign-in-url");
+  });
+});
+

package/src/public-website-sign-in/lib/SignIn/SignInManager.test.page.js

@@ -0,0 +1,67 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.7.0
+ */
+
+/**
+ * The SignInManager component represented as a page
+ */
+
+import SignInManager from "./SignInManager";
+import {fireEvent, waitFor} from "@testing-library/react";
+
+export default class SignInManagerPage {
+  /**
+   * Default constructor
+   */
+  constructor() {
+    SignInManager.initialize();
+  }
+
+  destroy() {
+    SignInManager.destroy();
+  }
+
+  /**
+   * Returns the sign in extension element
+   */
+  get signIn() {
+    return document.querySelector("#extension-sign-in");
+  }
+
+  /**
+   * Returns the sign in extension element
+   */
+  get otherButton() {
+    return document.querySelector("#other-button");
+  }
+
+  /**
+   * Click on sign in button
+   * @returns {Promise<void>}
+   */
+  async clickOnSignIn() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.signIn, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Click on other button
+   * @returns {Promise<void>}
+   */
+  async clickOnOtherButton() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.otherButton, leftClick);
+    await waitFor(() => {});
+  }
+}

package/src/react-extension/ExtBootstrapAccountRecovery.js

@@ -31,6 +31,19 @@ class ExtBootstrapAccountRecovery extends Component {
     this.handleRemoveIframeRequested();
   }
 
+  /**
+   * It returns true if the page is detected as a passbolt app.
+   * For that purpose, it simply checks if <html> has a class 'passbolt' set.
+   * @returns {boolean}
+   */
+  isPassboltApp() {
+    const rootNode = document.getRootNode();
+    const htmlTag = rootNode.lastChild;
+
+    return htmlTag?.tagName === "HTML"
+      && htmlTag.classList.contains('passbolt');
+  }
+
   /**
    * Remove skeleton preloaded in html if any
    */
@@ -59,6 +72,10 @@ class ExtBootstrapAccountRecovery extends Component {
   }
 
   render() {
+    if (!this.isPassboltApp()) {
+      return null;
+    }
+
     return (
       <>
         <InsertAccountRecoveryIframe browserExtensionUrl={this.props.browserExtensionUrl}/>

package/src/react-extension/ExtBootstrapApp.js

@@ -54,6 +54,19 @@ class ExtBootstrapApp extends Component {
     this.getUserSettings();
   }
 
+  /**
+   * It returns true if the page is detected as a passbolt app.
+   * For that purpose, it simply checks if <html> has a class 'passbolt' set.
+   * @returns {boolean}
+   */
+  isPassboltApp() {
+    const rootNode = document.getRootNode();
+    const htmlTag = rootNode.lastChild;
+
+    return htmlTag?.tagName === "HTML"
+      && htmlTag.classList.contains('passbolt');
+  }
+
   /**
    * Get the list of user settings from local storage and set it in the state
    * Using UserSettings
@@ -100,6 +113,10 @@ class ExtBootstrapApp extends Component {
   }
 
   render() {
+    if (!this.isPassboltApp()) {
+      return null;
+    }
+
     return (
       <>
         {this.isReady &&

package/src/react-extension/ExtBootstrapLogin.js

@@ -27,6 +27,19 @@ class ExtBootstrapLogin extends Component {
     this.handleRemoveIframeRequested();
   }
 
+  /**
+   * It returns true if the page is detected as a passbolt app.
+   * For that purpose, it simply checks if <html> has a class 'passbolt' set.
+   * @returns {boolean}
+   */
+  isPassboltApp() {
+    const rootNode = document.getRootNode();
+    const htmlTag = rootNode.lastChild;
+
+    return htmlTag?.tagName === "HTML"
+      && htmlTag.classList.contains('passbolt');
+  }
+
   /**
    * Remove skeleton preloaded in html if any
    */
@@ -55,6 +68,10 @@ class ExtBootstrapLogin extends Component {
   }
 
   render() {
+    if (!this.isPassboltApp()) {
+      return null;
+    }
+
     return (
       <InsertLoginAuthenticationIframe browserExtensionUrl={this.props.browserExtensionUrl}/>
     );

package/src/react-extension/ExtBootstrapRecover.js

@@ -28,6 +28,19 @@ class ExtBootstrapRecover extends Component {
     this.handleRemoveIframeRequested();
   }
 
+  /**
+   * It returns true if the page is detected as a passbolt app.
+   * For that purpose, it simply checks if <html> has a class 'passbolt' set.
+   * @returns {boolean}
+   */
+  isPassboltApp() {
+    const rootNode = document.getRootNode();
+    const htmlTag = rootNode.lastChild;
+
+    return htmlTag?.tagName === "HTML"
+      && htmlTag.classList.contains('passbolt');
+  }
+
   /**
    * Remove skeleton preloaded in html if any
    */
@@ -56,6 +69,10 @@ class ExtBootstrapRecover extends Component {
   }
 
   render() {
+    if (!this.isPassboltApp()) {
+      return null;
+    }
+
     return (
       <>
         <InsertRecoverAuthenticationIframe browserExtensionUrl={this.props.browserExtensionUrl}/>

package/src/react-extension/ExtBootstrapSetup.js

@@ -28,6 +28,19 @@ class ExtBootstrapSetup extends Component {
     this.handleRemoveIframeRequested();
   }
 
+  /**
+   * It returns true if the page is detected as a passbolt app.
+   * For that purpose, it simply checks if <html> has a class 'passbolt' set.
+   * @returns {boolean}
+   */
+  isPassboltApp() {
+    const rootNode = document.getRootNode();
+    const htmlTag = rootNode.lastChild;
+
+    return htmlTag?.tagName === "HTML"
+      && htmlTag.classList.contains('passbolt');
+  }
+
   /**
    * Remove skeleton preloaded in html if any
    */
@@ -56,6 +69,10 @@ class ExtBootstrapSetup extends Component {
   }
 
   render() {
+    if (!this.isPassboltApp()) {
+      return null;
+    }
+
     return (
       <>
         <InsertSetupAuthenticationIframe browserExtensionUrl={this.props.browserExtensionUrl}/>

package/src/react-extension/components/AccountRecovery/AccountRecoveryInviteUserSettingPreferenceDialog/AccountRecoveryInviteUserSettingPreferenceDialog.test.stories.js

@@ -19,7 +19,7 @@ import MockTranslationProvider from "../../../test/mock/components/International
 import MockPort from "../../../test/mock/MockPort";
 
 export default {
-  title: 'Passbolt/AccountRecovery/AccountRecoveryInviteUserSettingPreferenceDialog',
+  title: 'Passbolt Component/AccountRecovery/AccountRecoveryInviteUserSettingPreferenceDialog',
   component: AccountRecoveryInviteUserSettingPreferenceDialog
 };
 

package/src/react-extension/components/AccountRecovery/HandleAccountRecoveryUserSettingsRoute/HandleAccountRecoveryUserSettingsRoute.js

@@ -58,7 +58,7 @@ class HandleAccountRecoveryUserSettingsRoute extends React.Component {
    * Notify the user that the enrollment has been done already.
    */
   async showAlreadyEnrolledFeedback() {
-    await this.props.actionFeedbackContext.displaySuccess(this.translate("You already enrolled to the account recovery program"));
+    await this.props.actionFeedbackContext.displaySuccess(this.props.t("You already enrolled to the account recovery program"));
   }
 
   /**
@@ -68,14 +68,6 @@ class HandleAccountRecoveryUserSettingsRoute extends React.Component {
     this.props.history.push("/app/settings/account-recovery");
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}

package/src/react-extension/components/AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow.js

@@ -134,7 +134,7 @@ export class HandleReviewAccountRecoveryRequestWorkflow extends React.Component
   async handleSave(privateGpgKeyDto) {
     try {
       await this.props.context.port.request('passbolt.account-recovery.review-request', this.state.accountRecoveryRequest.id, this.state.responseStatus, privateGpgKeyDto);
-      await this.props.actionFeedbackContext.displaySuccess(this.translate("The account recovery review has been saved successfully"));
+      await this.props.actionFeedbackContext.displaySuccess(this.props.t("The account recovery review has been saved successfully"));
       this.props.onStop();
     } catch (e) {
       if (e.name === "UserAbortsOperationError") {
@@ -160,14 +160,6 @@ export class HandleReviewAccountRecoveryRequestWorkflow extends React.Component
     this.props.dialogContext.close(this.state.currentOpenedDialog);
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Renders the component
    * @returns {JSX.Element}

package/src/react-extension/components/AccountRecovery/ManageAccountRecoveryUserSettings/ManageAccountRecoveryUserSettings.js

@@ -281,7 +281,7 @@ class ManageAccountRecoveryUserSettings extends Component {
               className={`button button-left ${this.isProcessing ? "disabled" : ""}`}
               type="button"
               disabled={this.isProcessing}>
-              {this.translate("Learn More")}
+              {this.translate("Learn more")}
             </button>
             <FormCancelButton
               disabled={this.isProcessing}

package/src/react-extension/components/AccountRecovery/ManageAccountRecoveryUserSettings/ManageAccountRecoveryUserSettings.test.stories.js

@@ -19,7 +19,7 @@ import MockTranslationProvider from "../../../test/mock/components/International
 
 
 export default {
-  title: 'Passbolt/AccountRecovery/ManageAccountRecoveryUserSettings',
+  title: 'Passbolt Component/AccountRecovery/ManageAccountRecoveryUserSettings',
   component: ManageAccountRecoveryUserSettings
 };
 

package/src/react-extension/components/AccountRecovery/ReviewAccountRecoveryRequest/ReviewAccountRecoveryRequest.js

@@ -251,7 +251,7 @@ class ReviewAccountRecoveryRequest extends Component {
               className={`button button-left ${this.isProcessing ? "disabled" : ""}`}
               type="button"
               disabled={this.isProcessing}>
-              {this.translate("Learn More")}
+              {this.translate("Learn more")}
             </button>
             <FormCancelButton
               disabled={this.isProcessing}

package/src/react-extension/components/AccountRecovery/ReviewAccountRecoveryRequest/ReviewAccountRecoveryRequest.test.stories.js

@@ -20,7 +20,7 @@ import {defaultProps} from "./ReviewAccountRecoveryRequest.test.data";
 
 
 export default {
-  title: 'Passbolt/AccountRecovery/ReviewAccountRecoveryRequest',
+  title: 'Passbolt Component/AccountRecovery/ReviewAccountRecoveryRequest',
   component: ReviewAccountRecoveryRequest
 };
 

package/src/react-extension/components/Administration/ConfirmSaveAccountRecoverySettings/ConfirmSaveAccountRecoverySettings.js

@@ -118,8 +118,11 @@ class ConfirmSaveAccountRecoverySettings extends Component {
    * @return {string}
    */
   formatDateTimeAgo(date) {
-    if (date === 'Never') {
-      return date;
+    if (date === null) {
+      return "n/a";
+    }
+    if (date === 'Infinity') {
+      return this.translate("Never");
     }
     const dateTime = DateTime.fromISO(date);
     const duration = dateTime.diffNow().toMillis();
@@ -223,7 +226,7 @@ class ConfirmSaveAccountRecoverySettings extends Component {
             <Trans>Warning, Please review carefully this configuration as it will not be trivial to change this later.</Trans>
           </div>
           <div className="submit-wrapper clearfix">
-            <button className={`button button-left ${this.isProcessing ? "disabled" : ''}`} type="button">{this.translate("Learn More")}</button>
+            <button className={`button button-left ${this.isProcessing ? "disabled" : ''}`} type="button">{this.translate("Learn more")}</button>
             <FormCancelButton
               onClick={this.handleClose}
               disabled={this.isProcessing}/>

package/src/react-extension/components/Administration/ConfirmSaveAccountRecoverySettings/ConfirmSaveAccountRecoverySettings.test.data.js

@@ -59,7 +59,7 @@ export function hasChangedPolicyProps(props = {}) {
       algorithm: "RSA",
       length: "4096",
       created: "2020-09-01T13:11:08+00:00",
-      expires: "Never"
+      expires: "Infinity"
     }
   };
   return defaultProps(Object.assign(_props, props));
@@ -71,12 +71,15 @@ export function hasChangedPolicyProps(props = {}) {
  * @return {string}
  */
 export function formatDateTimeAgo(date) {
-  if (date === 'Never') {
-    return date;
+  if (date === null) {
+    return "n/a";
+  }
+  if (date === 'Infinity') {
+    return "Never";
   }
   const dateTime = DateTime.fromISO(date);
   const duration = dateTime.diffNow().toMillis();
-  return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative();
+  return duration > -1000 && duration < 0 ? 'Just now' : dateTime.toRelative();
 }
 
 export function formatDate(date) {
@@ -108,7 +111,7 @@ export function mandatoryPolicyPropsWithOrganisationKey(props = {}) {
       algorithm: "RSA",
       length: "4096",
       created: "2020-09-01T13:11:08+00:00",
-      expires: "Never"
+      expires: "Infinity"
     }
   };
   return defaultProps(Object.assign(_props, props));
@@ -127,7 +130,7 @@ export function optInPolicyPropsWithOrganisationKey(props = {}) {
       algorithm: "RSA",
       length: "4096",
       created: "2020-09-01T13:11:08+00:00",
-      expires: "Never"
+      expires: "Infinity"
     }
   };
   return defaultProps(Object.assign(_props, props));
@@ -146,7 +149,7 @@ export function optOutPolicyPropsWithOrganisationKey(props = {}) {
       algorithm: "RSA",
       length: "4096",
       created: "2020-09-01T13:11:08+00:00",
-      expires: "Never"
+      expires: "Infinity"
     }
   };
   return defaultProps(Object.assign(_props, props));

package/src/react-extension/components/Administration/ConfirmSaveAccountRecoverySettings/ConfirmSaveAccountRecoverySettings.test.stories.js

@@ -21,7 +21,7 @@ import {
 
 
 export default {
-  title: 'Passbolt/Administration/ConfirmSaveAccountRecoverySettings',
+  title: 'Passbolt Component/Administration/ConfirmSaveAccountRecoverySettings',
   component: ConfirmSaveAccountRecoverySettings
 };
 

package/src/react-extension/components/Administration/DisplayAdministrationMenu/DisplayAdministrationMenu.js

@@ -19,9 +19,8 @@ import {
 } from "../../../contexts/AdministrationWorkspaceContext";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withRouter} from "react-router-dom";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
-import Tooltip from "../../Common/Tooltip/Tooltip";
 
 /**
  * This component allows to display the menu of the administration
@@ -183,14 +182,6 @@ class DisplayAdministrationMenu extends React.Component {
     return AdministrationWorkspaceMenuTypes.ACCOUNT_RECOVERY === this.props.administrationWorkspaceContext.selectedAdministration;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -259,9 +250,6 @@ class DisplayAdministrationMenu extends React.Component {
                 <div className="main-cell">
                   <a onClick={this.handleAccountRecoveryClick}>
                     <span><Trans>Account Recovery</Trans></span>
-                    <Tooltip message={<Trans>Account recovery is still in beta version. Use it with caution.</Trans>} direction="left">
-                      <span className="chips beta">BETA</span>
-                    </Tooltip>
                   </a>
                 </div>
               </div>
@@ -279,7 +267,6 @@ DisplayAdministrationMenu.propTypes = {
   administrationWorkspaceContext: PropTypes.object, // The administration workspace context
   history: PropTypes.object, // The router history
   navigationContext: PropTypes.any, // The application navigation context
-  t: PropTypes.func, // The translation function
 };
 
-export default withRouter(withAppContext(withNavigationContext(withAdministrationWorkspace(withTranslation('common')(DisplayAdministrationMenu)))));
+export default withRouter(withAppContext(withNavigationContext(withAdministrationWorkspace((DisplayAdministrationMenu)))));