passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/Authentication/{IntroduceSetupExtension/IntroduceSetupExtension.js → IntroduceExtension/IntroduceExtension.js}

@@ -12,13 +12,11 @@
  * @since         3.3.0
  */
 import React, {Component} from "react";
-import {detectBrowserName} from "../../../../shared/lib/Browser/detectBrowserName";
-import {withAppContext} from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
-import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
+import {detectBrowserName} from "../../../../shared/lib/Browser/detectBrowserName";
 
-class IntroduceSetupExtension extends Component {
+class IntroduceExtension extends Component {
   constructor(props) {
     super(props);
     this.state = this.getDefaultState();
@@ -63,15 +61,7 @@ class IntroduceSetupExtension extends Component {
   async handleSubmit(event) {
     event.preventDefault();
     await this.toggleProcessing();
-    this.props.authenticationContext.onCompleteIntroduceSetupExtension();
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
+    this.props.onComplete();
   }
 
   /**
@@ -83,8 +73,8 @@ class IntroduceSetupExtension extends Component {
       <div className="introduce-setup-extension">
         <h1><Trans>Congratulation! Passbolt extension has been installed.</Trans></h1>
         <form onSubmit={this.handleSubmit}>
-          <div className={`animated-setup-introduction ${this.state.browserName}`}></div>
-          <div className="arrow"></div>
+          <div className={`animated-setup-introduction ${this.state.browserName}`}/>
+          <div className="arrow"/>
           <div className="form-actions">
             <button
               type="submit"
@@ -100,8 +90,7 @@ class IntroduceSetupExtension extends Component {
   }
 }
 
-IntroduceSetupExtension.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  t: PropTypes.func, // The translation function
+IntroduceExtension.propTypes = {
+  onComplete: PropTypes.func.isRequired, // The callback to trigger when the user complete the step.
 };
-export default withAppContext(withAuthenticationContext(withTranslation('common')(IntroduceSetupExtension)));
+export default withTranslation('common')(IntroduceExtension);

package/src/react-extension/components/Authentication/IntroduceExtension/IntroduceExtension.test.data.js

@@ -0,0 +1,24 @@
+/**
+ * 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
+ */
+
+/**
+ * Default props
+ * @returns {{}}
+ */
+export function defaultProps(props) {
+  const defaultProps = {
+    onComplete: jest.fn(() => Promise.resolve()),
+  };
+  return Object.assign(defaultProps, props || {});
+}

package/src/react-extension/components/Authentication/{IntroduceSetupExtension/IntroduceSetupExtension.test.js → IntroduceExtension/IntroduceExtension.test.js}

@@ -16,8 +16,8 @@
  * Unit tests on  InstallExtension in regard of specifications
  */
 
-import IntroduceSetupExtensionTestPage from "./IntroduceSetupExtension.test.page";
-import {defaultProps} from "./IntroduceSetupExtension.test.data";
+import IntroduceExtensionTestPage from "./IntroduceExtension.test.page";
+import {defaultProps} from "./IntroduceExtension.test.data";
 
 beforeEach(() => {
   jest.resetModules();
@@ -38,7 +38,7 @@ describe("As AN I should see setup extension page", () => {
         writable: true
       });
       window.chrome = {runtime: "true"};
-      page = new IntroduceSetupExtensionTestPage(props);
+      page = new IntroduceExtensionTestPage(props);
       expect(page.exists()).toBeTruthy();
       // title
       expect(page.title).toBe("Congratulation! Passbolt extension has been installed.");
@@ -51,15 +51,25 @@ describe("As AN I should see setup extension page", () => {
         value: {userAgent: "Firefox"},
         writable: true
       });
-      page = new IntroduceSetupExtensionTestPage(props);
+      page = new IntroduceExtensionTestPage(props);
       // browser image
       expect(page.browser.className).toBe("animated-setup-introduction firefox");
     });
 
+    it('As AN I should see the setup extension for edge', () => {
+      Object.defineProperty(window, "navigator", {
+        value: {userAgent: "Edg"},
+        writable: true
+      });
+      page = new IntroduceExtensionTestPage(props);
+      // browser image
+      expect(page.browser.className).toBe("animated-setup-introduction edge");
+    });
+
     it('As AN I should be able to click next on the page', async() => {
-      page = new IntroduceSetupExtensionTestPage(props);
+      page = new IntroduceExtensionTestPage(props);
       await page.next();
-      expect(props.authenticationContext.onCompleteIntroduceSetupExtension).toHaveBeenCalled();
+      expect(props.onComplete).toHaveBeenCalled();
     });
   });
 });

package/src/react-extension/components/Authentication/{IntroduceSetupExtension/IntroduceSetupExtension.test.page.js → IntroduceExtension/IntroduceExtension.test.page.js}

@@ -1,4 +1,3 @@
-
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
@@ -15,13 +14,13 @@
 
 import {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
-import SetupExtension from "./IntroduceSetupExtension";
+import IntroduceExtension from "./IntroduceExtension";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
 /**
  * The SetupExtension component represented as a page
  */
-export default class IntroduceSetupExtensionTestPage {
+export default class IntroduceExtensionTestPage {
   /**
    * Default constructor
    * @param props Props to attach
@@ -29,7 +28,7 @@ export default class IntroduceSetupExtensionTestPage {
   constructor(props) {
     this._page = render(
       <MockTranslationProvider>
-        <SetupExtension {...props}/>
+        <IntroduceExtension {...props}/>
       </MockTranslationProvider>
     );
   }

package/src/react-extension/components/Authentication/IntroduceExtension/IntroduceExtension.test.stories.js

@@ -0,0 +1,39 @@
+/**
+ * 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.6.0
+ */
+
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import IntroduceExtension from "./IntroduceExtension";
+
+export default {
+  title: 'Passbolt/Authentication/IntroduceExtension',
+  component: IntroduceExtension
+};
+
+const Template = args =>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <IntroduceExtension {...args} {...routerProps}/>}/>
+        </MemoryRouter>
+      </div>
+    </div>
+  </div>;
+
+
+export const Initial = Template.bind({});
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/Authentication/NotifyExpiredSession/NotifyExpiredSession.test.data.js

@@ -1,21 +1,39 @@
+/**
+ * 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         2.14.0
+ */
+
+import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 
 /**
- * Returns the default app context for the unit test
- * @param appContext An existing app context
- * @returns {any}
+ * Default props
+ * @returns {{}}
  */
-export function defaultAppContext(appContext) {
-  const defaultAppContext = {
+export function defaultAppContext(context) {
+  const defaultContext = {
+    userSettings: new UserSettings(userSettingsFixture),
   };
-  return Object.assign(defaultAppContext, appContext || {});
+  return Object.assign(defaultContext, context || {});
 }
 
 /**
  * Default props
- * @returns {}
+ * @returns {{}}
  */
-export function defaultProps() {
-  return {
+export function defaultProps(props) {
+  const defaultProps = {
+    context: defaultAppContext,
     onClose: jest.fn()
   };
+  return Object.assign(defaultProps, props || {});
 }

package/src/react-extension/components/Authentication/NotifyExpiredSession/NotifyExpiredSession.test.js

@@ -16,9 +16,7 @@
  * Unit tests on SessionExpired in regard of specifications
  */
 import NotifyExpiredSessionPage from "./NotifyExpiredSession.test.page";
-import {defaultAppContext, defaultProps} from "./NotifyExpiredSession.test.data";
-import UserSettings from "../../../../shared/lib/Settings/UserSettings";
-import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
+import {defaultProps} from "./NotifyExpiredSession.test.data";
 
 beforeEach(() => {
   jest.resetModules();
@@ -26,10 +24,6 @@ beforeEach(() => {
 
 describe("As LU I should see the session expired dialog", () => {
   let page; // The page to test against
-  const appContext = {
-    userSettings: new UserSettings(userSettingsFixture),
-  };
-  const context = defaultAppContext(appContext); // The applicative context
   const props = defaultProps(); // The props to pass
 
   describe('As LU I can start go to login', () => {
@@ -37,7 +31,7 @@ describe("As LU I should see the session expired dialog", () => {
      * I should see the session expired dialog
      */
     beforeEach(() => {
-      page = new NotifyExpiredSessionPage(context, props);
+      page = new NotifyExpiredSessionPage(props);
     });
 
     it('matches the styleguide', async() => {

package/src/react-extension/components/Authentication/NotifyExpiredSession/NotifyExpiredSession.test.page.js

@@ -1,4 +1,3 @@
-
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
@@ -13,7 +12,6 @@
  * @since         2.11.0
  */
 import {fireEvent, render, waitFor} from "@testing-library/react";
-import AppContext from "../../../contexts/AppContext";
 import React from "react";
 import {BrowserRouter as Router} from "react-router-dom";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
@@ -25,17 +23,14 @@ import NotifyExpiredSession from "./NotifyExpiredSession";
 export default class NotifyExpiredSessionPage {
   /**
    * Default constructor
-   * @param appContext An app context
    * @param props Props to attach
    */
-  constructor(appContext, props) {
+  constructor(props) {
     this._page = render(
       <MockTranslationProvider>
-        <AppContext.Provider value={appContext}>
-          <Router>
-            <NotifyExpiredSession {...props}/>
-          </Router>
-        </AppContext.Provider>
+        <Router>
+          <NotifyExpiredSession {...props}/>
+        </Router>
       </MockTranslationProvider>
     );
   }

package/src/react-extension/components/Authentication/NotifyExpiredSession/NotifyExpiredSession.test.stories.js

@@ -1,27 +1,36 @@
+/**
+ * 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         2.14.0
+ */
+
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import NotifyExpiredSession from "./NotifyExpiredSession";
-
+import {defaultProps} from "./NotifyExpiredSession.test.data";
 
 export default {
   title: 'Passbolt/Authentication/NotifyExpiredSession',
   component: NotifyExpiredSession
 };
 
-const context = {
-};
-
-
 const Template = args =>
-  <AuthenticationContext.Provider value={context}>
-    <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <NotifyExpiredSession {...args} {...routerProps}/>}></Route>
-    </MemoryRouter>
-  </AuthenticationContext.Provider>;
+  <MemoryRouter initialEntries={['/']}>
+    <Route component={routerProps => <NotifyExpiredSession {...args} {...routerProps}/>}/>
+  </MemoryRouter>;
 
-
-export const Initial = Template.bind({});
-Initial.parameters = {
+const defaultParameters =  {
   css: "ext_authentication"
 };
+
+export const Initial = Template.bind({});
+Initial.args = defaultProps();
+Initial.parameters = defaultParameters;

package/src/react-extension/components/Authentication/RequestAccountRecovery/RequestAccountRecovery.js

@@ -0,0 +1,70 @@
+/**
+ * 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.6.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+
+/**
+ * The component display variations.
+ * @type {Object}
+ */
+export const RequestAccountRecoveryVariations = {
+  SIGN_IN: 'Sign-in',
+  RECOVER: 'Recover',
+  ACCOUNT_RECOVERY: 'Account recovery'
+};
+
+class RequestAccountRecovery extends Component {
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="initiate-recover-account">
+        <h1><Trans>Request account recovery</Trans></h1>
+        <p>
+          {{
+            [RequestAccountRecoveryVariations.SIGN_IN]: <><Trans>Your passphrase is required to sign-in.</Trans> <Trans>If you do not have access, you can request an account recovery to an administrator.</Trans></>,
+            [RequestAccountRecoveryVariations.RECOVER]: <><Trans>Both the private key and passphrase are required to recover your account.</Trans> <Trans>If you do not have access, you can request an account recovery to an administrator.</Trans></>,
+            [RequestAccountRecoveryVariations.ACCOUNT_RECOVERY]: <><Trans>The passphrase you defined when initiating the account recovery is required to complete the operation.</Trans> <Trans>If you do not have access, you can request a new account recovery to an administrator.</Trans></>,
+          }[this.props.displayAs]}
+        </p>
+        <div className="form-actions">
+          <button
+            type="button"
+            className={`button primary big full-width ${this.isProcessing ? "processing" : ""}`}
+            role="button"
+            onClick={this.props.onPrimaryActionClick}>
+            <Trans>Request account recovery</Trans>
+          </button>
+          <a onClick={this.props.onSecondaryActionClick}>
+            <Trans>I want to try again.</Trans>
+          </a>
+        </div>
+      </div>
+    );
+  }
+}
+
+RequestAccountRecovery.propTypes = {
+  displayAs: PropTypes.oneOf([
+    RequestAccountRecoveryVariations.SIGN_IN,
+    RequestAccountRecoveryVariations.RECOVER,
+    RequestAccountRecoveryVariations.ACCOUNT_RECOVERY,
+  ]).isRequired, // Defines how the form should be displayed and behaves
+  onPrimaryActionClick: PropTypes.func.isRequired, // The callback to trigger clicks on the primary action
+  onSecondaryActionClick: PropTypes.func.isRequired, // The callback to trigger clicks on the secondary action
+};
+export default withTranslation('common')(RequestAccountRecovery);

package/src/react-extension/components/Authentication/RequestAccountRecovery/RequestAccountRecovery.test.data.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.6.0
+ */
+
+/**
+ * Default props
+ * @returns {{}}
+ */
+export function defaultProps(props) {
+  const defaultProps = {
+    onPrimaryActionClick: jest.fn(() => Promise.resolve()),
+    onSecondaryActionClick: jest.fn(() => Promise.resolve()),
+  };
+  return Object.assign(defaultProps, props || {});
+}

package/src/react-extension/components/Authentication/RequestAccountRecovery/RequestAccountRecovery.test.js

@@ -0,0 +1,49 @@
+/**
+ * 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.6.0
+ */
+
+import RequestAccountRecoveryPage from "./RequestAccountRecovery.test.page";
+import {defaultProps} from "./RequestAccountRecovery.test.data";
+import each from "jest-each";
+import {RequestAccountRecoveryVariations} from "./RequestAccountRecovery";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("RequestAccountRecoveryPage", () => {
+  each([
+    {displayAs: RequestAccountRecoveryVariations.SETUP}, // Login
+    {displayAs: RequestAccountRecoveryVariations.RECOVER}, // recover account
+    {displayAs: RequestAccountRecoveryVariations.ACCOUNT_RECOVERY}, // account recovery
+  ]).describe("Common behavior to all context", _props => {
+    let page, props;
+
+    beforeEach(() => {
+      props = defaultProps(_props); // The props to pass
+      page = new RequestAccountRecoveryPage(props);
+    });
+
+    it('As AN I should be able to request an account recovery', async() => {
+      expect.assertions(1);
+      await page.requestAccountRecovery();
+      expect(props.onPrimaryActionClick).toHaveBeenCalled();
+    });
+
+    it('As AN I should be able to try again', async() => {
+      expect.assertions(1);
+      await page.clickSecondaryActionLink();
+      expect(props.onSecondaryActionClick).toHaveBeenCalled();
+    });
+  });
+});

package/src/react-extension/components/Authentication/RequestAccountRecovery/RequestAccountRecovery.test.page.js

@@ -0,0 +1,74 @@
+/**
+ * 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.6.0
+ */
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import RequestAccountRecovery from "./RequestAccountRecovery";
+
+/**
+ * The CreateGpgKeyPage component represented as a page
+ */
+export default class RequestAccountRecoveryPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <RequestAccountRecovery {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the title
+   */
+  get title() {
+    return this._page.container.querySelector('h1').textContent;
+  }
+
+  /**
+   * Returns the request account recovery element
+   */
+  get requestAccountRecoveryButton() {
+    return this._page.container.querySelector('.button.primary');
+  }
+
+  /**
+   * Returns the secondary action link element
+   */
+  get secondaryActionLink() {
+    return this._page.container.querySelector('.form-actions a');
+  }
+
+  /**
+   * Request account recovery
+   * @param inProgressFn Function called while the generation
+   */
+  async requestAccountRecovery(inProgressFn = () => {}) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.requestAccountRecoveryButton, leftClick);
+    await waitFor(inProgressFn);
+  }
+
+  /**
+   * Click on the secondary action link.
+   */
+  async clickSecondaryActionLink(inProgressFn = () => {}) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.secondaryActionLink, leftClick);
+    await waitFor(inProgressFn);
+  }
+}

package/src/react-extension/components/Authentication/RequestAccountRecovery/RequestAccountRecovery.test.stories.js

@@ -0,0 +1,40 @@
+/**
+ * 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.6.0
+ */
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import "../../../../css/themes/default/ext_authentication.css";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import RequestAccountRecovery from "./RequestAccountRecovery";
+import {defaultProps} from "./RequestAccountRecovery.test.data";
+
+export default {
+  title: 'Passbolt/Authentication/InitiateRecoverAccount',
+  component: RequestAccountRecovery
+};
+
+const Template = args =>
+  <MockTranslationProvider>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <RequestAccountRecovery {...args} {...routerProps}/>}/>
+          </MemoryRouter>
+        </div>
+      </div>
+    </div>
+  </MockTranslationProvider>;
+
+export const Initial = Template.bind({});
+Initial.args = defaultProps();

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayExpiredTokenError/DisplayExpiredTokenError.js

@@ -0,0 +1,41 @@
+/**
+ * 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.6.0
+ */
+
+import React, {Component} from "react";
+import {withAppContext} from "../../../contexts/AppContext";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+
+class DisplayExpiredTokenError extends Component {
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="setup-error">
+        <h1><Trans>The request is expired.</Trans></h1>
+        <p><Trans>You can initiate a new account recovery by clicking on the button bellow.</Trans></p>
+        <div className="form-actions">
+          <a href={`${this.props.context.trustedDomain}/users/recover`} className="button primary big full-width" role="button"><Trans>Restart from scratch</Trans></a>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayExpiredTokenError.propTypes = {
+  context: PropTypes.any, // The application context
+};
+export default withAppContext(withTranslation('common')(DisplayExpiredTokenError));