passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/UserSetting/DisplayUserAccountRecovery/DisplayAccountRecoveryUserSettings.test.js

@@ -0,0 +1,110 @@
+/**
+ * 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
+ */
+
+/**
+ * Unit tests on EnterNewPassphrase in regard of specifications
+ */
+import DisplayAccountRecoveryUserSettingsPage from "./DisplayAccountRecoveryUserSettings.test.page";
+import {defaultProps, mockedData, getAccountRecoveryUserService} from "./DisplayAccountRecoveryUserSettings.test.data";
+import {waitFor} from "@testing-library/react";
+import {DateTime} from "luxon";
+import ManageAccountRecoveryUserSettings from "../../AccountRecovery/ManageAccountRecoveryUserSettings/ManageAccountRecoveryUserSettings";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+const formatDateTimeAgo = (date, locale) => DateTime.fromISO(date).toRelative({locale});
+
+describe("DisplayAccountRecoveryUserSettings", () => {
+  /**
+   * Given that I am a logged in user
+   * And	the account recovery organization policy is enabled
+   * When	I navigate to the user account recovery settings in the user settings workspace
+   * Then	I see my current account recovery settings
+   */
+  it('As a logged in user I can see my account recovery settings', async() => {
+    const mockedAccountRecoveryUserService = getAccountRecoveryUserService(mockedData);
+    const props = defaultProps({status: "pending"});
+    const page = new DisplayAccountRecoveryUserSettingsPage(props, mockedAccountRecoveryUserService);
+    await waitFor(() => {});
+
+    expect(page.exists()).toBeTruthy();
+    expect(page.status.textContent).toBe("pending");
+    expect(page.requestorName.textContent).toBe("Ada Lovelace (admin)");
+    expect(page.requestDate.textContent).toBe(formatDateTimeAgo(mockedData.modified, props.context.locale));
+    expect(page.fingerprint).toBe("848E 95CC 7493 129A D862 5831 29B8 1CA8 9360 23DD");
+  });
+
+  /**
+   * Given that I am a logged in user
+   * And  the account recovery organization policy is disabled
+   * When I navigate to the user settings workspace
+   * Then I can’t see the account recovery section on the left sidebar
+   */
+  it('As a logged in user I cannot see my account recovery settings if the account recovery organization policy is disabled', async() => {
+    const mockedAccountRecoveryUserService = getAccountRecoveryUserService({policy: "disabled"});
+    const props = defaultProps({status: "disabled"});
+    const page = new DisplayAccountRecoveryUserSettingsPage(props, mockedAccountRecoveryUserService);
+    await waitFor(() => {});
+
+    expect(page.exists()).toBeTruthy();
+    expect(page.description.textContent).toBe("Please contact your administrator to enable the account recovery feature.");
+  });
+
+  /**
+   * Given that I am a logged in user
+   * And	the account recovery organization policy is enabled
+   * And	I rejected the account recovery program
+   * When	I navigate on the user account recovery settings in the user settings workspace
+   * Then	I see a “Review” button
+   * When	I click on the “Review” button
+   * Then	I see the account recovery dialog prompt
+   */
+  it('As a logged in user who has rejected the account recovery program, I can change my choice from my settings workspace', async() => {
+    const mockedAccountRecoveryUserService = getAccountRecoveryUserService(mockedData);
+    const props = defaultProps({status: "disabled"});
+    const page = new DisplayAccountRecoveryUserSettingsPage(props, mockedAccountRecoveryUserService);
+    await waitFor(() => {});
+
+    expect(page.exists()).toBeTruthy();
+    expect(page.reviewButton).not.toBeNull();
+    await page.clickOnReview();
+  });
+
+  /**
+   * Given that I am a logged in user
+   * And   my account was created before the account recovery policy was enabled
+   * And   I previously closed or cancel the “Recovery (Optional)” and “Recovery (Mandatory)” dialog or the account recovery policy is “Optional, Opt-in”
+   * When  I am on the Account recovery settings in the profile workspace
+   * Then  I see a breadcrumb saying “All users > Username > Account recovery”
+   * And   I see the Account recovery title with a description telling me the purpose of the feature
+   * And   I see a section with the account recovery status, a “Review” button
+   * When	 I click on the “Review” button
+   * Then	 I see the “Recovery (Optional)” or “Recovery (Mandatory)” dialog
+   */
+  it('As a logged in user I can update my account recovery choice when my review is pending for the Opt-in, Mandatory and Opt-out policies', async() => {
+    const mockedAccountRecoveryUserService = getAccountRecoveryUserService(mockedData);
+    const props = defaultProps({status: "disabled"});
+    const page = new DisplayAccountRecoveryUserSettingsPage(props, mockedAccountRecoveryUserService);
+    await waitFor(() => {});
+
+    expect(page.exists()).toBeTruthy();
+    await page.clickOnReview();
+
+    expect(props.dialogContext.open).toHaveBeenCalledWith(ManageAccountRecoveryUserSettings, {
+      organizationPolicy: mockedData
+    });
+  });
+});

package/src/react-extension/components/UserSetting/DisplayUserAccountRecovery/DisplayAccountRecoveryUserSettings.test.page.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.6.0
+ */
+
+import {render, fireEvent} from "@testing-library/react";
+import React from "react";
+import {BrowserRouter as Router} from "react-router-dom";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import DisplayAccountRecoveryUserSettings from "./DisplayAccountRecoveryUserSettings";
+import AccountRecoveryUserContextProvider from "../../../contexts/AccountRecoveryUserContext";
+/**
+ * The DisplayAccountRecoveryUserSettingsPage component represented as a page
+ */
+export default class DisplayAccountRecoveryUserSettingsPage {
+  /**
+   * Default constructor
+   * @param context Context value
+   * @param props Props to attach
+   */
+  constructor(props, mockedAccountRecoveryUserService) {
+    this._page = render(
+      <AccountRecoveryUserContextProvider accountRecoveryUserService={mockedAccountRecoveryUserService} context={props.context}>
+        <MockTranslationProvider>
+          <Router>
+            <DisplayAccountRecoveryUserSettings {...props}/>
+          </Router>
+        </MockTranslationProvider>
+      </AccountRecoveryUserContextProvider>
+    );
+  }
+
+  selector(selection) {
+    return this._page.container.querySelector(selection);
+  }
+
+  exists() {
+    return this.title !== null;
+  }
+
+  get title() {
+    return this.selector('.account-recovery-profile h3');
+  }
+
+  get status() {
+    return this.selector('.account-recovery-profile .account-recovery-status .status-wrapper .status');
+  }
+
+  get requestorName() {
+    return this.selector('.account-recovery-profile .account-recovery-status ul li .name-with-tooltip');
+  }
+
+  get requestDate() {
+    return this.selector('.account-recovery-profile .account-recovery-status ul li .subinfo');
+  }
+
+  get fingerprint() {
+    return this.selector('.account-recovery-profile .account-recovery-status ul li .tooltip').dataset.tooltip;
+  }
+
+  get description() {
+    return this.selector('.account-recovery-profile p');
+  }
+
+  get reviewButton() {
+    return this.selector('.account-recovery-profile .account-recovery-status button');
+  }
+
+  isPopupPresent() {
+    return this.modalTitle !== null;
+  }
+
+  async clickOnReview() {
+    fireEvent.click(this.reviewButton, {button: 0});
+  }
+}

package/src/react-extension/components/UserSetting/DisplayUserAccountRecovery/DisplayAccountRecoveryUserSettings.test.stories.js

@@ -0,0 +1,65 @@
+/**
+ * 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 DisplayAccountRecoveryUserSettings from "./DisplayAccountRecoveryUserSettings";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+export default {
+  title: "Passbolt/UserSetting/DisplayAccountRecoveryUserSettings",
+  component: DisplayAccountRecoveryUserSettings
+};
+
+
+const Template = args =>
+  <MockTranslationProvider>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayAccountRecoveryUserSettings {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </MockTranslationProvider>;
+
+
+const getTemplateArgs = () => ({
+  context: {
+    locale: "en-US",
+    userSettings: {
+      getTrustedDomain: () => new URL(window.location).origin
+    }
+  },
+  accountRecovery: {
+    status: "enabled",
+    requestor: {
+      profile: {
+        first_name: "Ada",
+        last_name: "Lovelace"
+      },
+      gpgkey: {
+        fingerprint: "848E95CC7493129AD862583129B81CA8936023DD"
+      }
+    },
+    requestedDate: "2021-05-25T09:08:34.123"
+  }
+});
+
+export const Enabled = Template.bind({});
+Enabled.args = getTemplateArgs();
+
+export const Pending = Template.bind({});
+Pending.args = getTemplateArgs();
+Pending.args.accountRecovery.status = "pending";
+
+export const Disabled = Template.bind({});
+Disabled.args = getTemplateArgs();
+Disabled.args.accountRecovery.status = "disabled";

package/src/react-extension/components/UserSetting/DisplayUserGpgInformation/DisplayUserGpgInformation.js

@@ -90,14 +90,13 @@ class DisplayUserGpgInformation extends React.Component {
    */
   async fetchGpgkeyInfo() {
     const gpgkeyInfo = await this.props.context.port.request('passbolt.keyring.get-public-key-info-by-user', this.user.id);
-
     // format the gpgkey info.
-    const keyId = gpgkeyInfo.keyId;
+    const keyId = gpgkeyInfo.key_id;
     const type = this.gpgkeyType[gpgkeyInfo.algorithm];
-    const uIds = gpgkeyInfo.userIds;
+    const uIds = gpgkeyInfo.user_ids;
     const created = this.formatDate(gpgkeyInfo.created);
     const expires = gpgkeyInfo.expires === "Never" ? "Never" : this.formatDate(gpgkeyInfo.expires);
-    const armoredKey = gpgkeyInfo.key;
+    const armoredKey = gpgkeyInfo.armored_key;
     const fingerprint = gpgkeyInfo.fingerprint;
     const length = gpgkeyInfo.length;
 

package/src/react-extension/components/UserSetting/DisplayUserGpgInformation/DisplayUserGpgInformation.test.stories.js

@@ -20,7 +20,7 @@ const context = {
       "id": "91d8a7fd-3ab3-5e98-a4a5-0d8694ff23b9",
       "keyId": "91d8a7fd-3ab3-5e98-a4a5-0d8694ff23b9",
       "user_id": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
-      "key": "-----BEGIN PGP PUBLIC KEY BLOCK-----\n\nmQINBFY06pcBEADjYRuq05Zatu4qYtXmexbrwtUdakNJJHPlWxcusohdTLUmSXrt\n7LegXBE3OjvV9HbdBQfbpjitFp8eJw5krYQmh1+w\/UYjb5Jy\/A7ma3oawzbVwNpL\nwuAafYma5LLLloZD\/OpYKprhWfW9FHKyq6t+AcH5CFs\/HvixdrdbAO7K1\/z6mgWc\nT6HBP5\/dGTseAlrvUDTsW1kzo6qsrOWoUunrqm31umsvcfNROtDKM16zgZl+GlYY\n1BxNcRKr1\/AcZUrp4zdSSc6IXrYjJ+1kgHz\/ZoSrKn5QiqEn7wQEveJu+jNGSv8j\nMvQgjq+AmzveJ\/4f+RQirbe9JOeDgzX7NqloRil3I0FPFoivbRU0PHi4N2q7sN8e\nYpXxXzuL+OEq1GQe5fTsSotQTRZUJxbdUS8DfPckQaK79HoybTQAgA6mgQf\/C+U0\nX2TiBUzgBuhayiW12kHmKyK02htDeRNOYs4bBMdeZhAFm+5C74LJ3FGQOHe+\/o2o\nBktk0rAZScjizijzNzJviRB\/3nAJSBW6NSNYcbnosk0ET2osg2tLvzegRI6+NQJE\nb0EpByTMypUDhCNKgg5aEDUVWcq4iucps\/1e6\/2vg2XVB7xdphT4\/K44ZeBHdFuf\nhGQvs8rkAPzpkpsEWKgpTR+hdhbMmNiL984Ywk98nNuzgfkgpcP57xawNwARAQAB\ntCtQYXNzYm9sdCBEZWZhdWx0IEFkbWluIDxhZG1pbkBwYXNzYm9sdC5jb20+iQJO\nBBMBCgA4AhsDBQsJCAcDBRUKCQgLBRYCAwEAAh4BAheAFiEEDB0XYRENHjPJAG0a\nWxszLtBkJtMFAl0bmoYACgkQWxszLtBkJtPnxg\/\/Q9WOWUGf7VOnfbaIix3NGAON\nI7rgXuLFc1E0vG20XWT2+C6xGskFwjoJbiyDrbMYnILGn7vDIn3MSoITemLjtt97\n\/lEXK7AgbJEWQWF1lxpXm0nCvjJ6h+qatGK96ncjcua6ecUut10A\/CACpuqxfKOh\nD6CaM5l\/ksEDtwvrv2MIaVajuCvwg+yUx0I0rfAQv0YTXbJ5MRn1pvOo3c6n5Q0z\n5eu\/iiG0UNNIE3Tk5KpT02MTMv5ullpt3mtNjMHH0\/TdPxCtUKVh4q34x3syiYLe\npaddf5Ctv9CL52VWfsG3qFPHp7euOFY8lfzuemoqD9jcE7QIJnkCmwtLXLQrE0O2\nRW\/y\/oXqrETXu2sFyHMr1Xw\/\/QeJgIv63LBGmcPOj93VyHIlcUDarM2oq2+DXKxr\nDs2xfnFKVCZwpSvecIfKXUKsnX3AGrpetoZdfw0jAUVI3nt6YCu8KvczXxetfjOV\n3HHXa40gtOZk5OoKbfuTjzQlpc1oaDyLH8PT1GYsN3wWoDs4zulh6uKDpSt+4z58\nH1BfPFlrO2uhZSfk3E83uBQXZcABeXNxCdrTCJm8P90sbjLu1TlaeOnrWwVT7Yq8\ni8LE7lbAXnT1HjQlDi8GB2+2EnZZmOX+Z84a16jDElZazUNsE8zT7OmyjuB7GGDb\nQEFYzkb9dr1j1sukzty5Ag0EVjTqlwEQAJ37C9s4pq4jvcEF3bJgL+q3SBolgBIp\nN1g1\/woi9vEiOh+7e08Kr8mEhF04cpRDbhY6dcZ8OIXIQ99fgdNXfehlAWnI56NE\n\/FOIyif8TvGBfO6yE35fKSskwGNdUZWIZ0U0pxSXQvB+KEGWlq2c3Uf\/jhTZDnLN\nvfDjnYmn5ycp5sVWhtAmKFha9NJ6LGA0D1MC+jcCJCKtQRGgVvlqOESFDmQ7Pu8\/\nayr2BO0URHJ0Ob30lHluCnoKIv50qGpL9BYuGAdCfLBHXzRQhHIbfc\/cTPkK1kTX\nX5x\/MkiEl88TeGN+yjNVS7qqdxYgs+QYnDDZqevhWEvVyXVQjcCWSIHfjL1x5Ndq\nYL6+ci\/OxyIFoPs4K2umN3JPmpFi+fIPh2CexKy6BnyE8oAgNvgdDb6ZOfAtvShZ\nPM7QG4LZal2+nYp4n7gJRh6kepTQT\/4Bua0xOtRQhgcI4nGtcCxEDRMMzjqbGYlc\nnciMjsiMg9LPpWPDA+xKrRZKYwVFy8vLx\/alOz\/h1BZjx2u7YmuaGENxE62Lfyh0\nxeoCBDTdnWEOQTH6LVsomVtUO1FVap1t5jkYSdpxBuHf8\/2Ye7N3FTMRKe9n4e75\nsAJ00utnMl6P2Zca9mM4T29PK+LPFx2G2h35DQ7MbEid1cAZ8QVR3UyoiR8+u9jM\nek+9uFCm+nAxABEBAAGJAjYEGAEKACACGwwWIQQMHRdhEQ0eM8kAbRpbGzMu0GQm\n0wUCXRuamQAKCRBbGzMu0GQm004PD\/9sFmFkdoSqwU\/En77+h0gt4knlgZbgj0iR\nromnknIwLKBbJJXksHmMPXJB9b3WZ\/gGV3pPVtDWDKg3NZW4HLK13w3s3wQ2ViVV\nA6FzABDSkI3YBqkkasLRZU7oN9XajdFfph5wLhDSgTCjSncGfcjVzPugWKLqPPih\nZO6mpqxSFYEhx+p\/O80Tlj90UsOFRdot7cqn5wOhXZtKsQ0RwaA\/uq\/sFe6UNKHG\n2RBgQfoj5JbazJbvlgMiWxhBalwZKQWs8IBh\/4ag8AFwwoJN+gOtNM9C4UCHu+yt\n0Tv2\/Tu+Apcj0oyFaKJD4uQUmChQ2fDRysqJEIhee+yL29mrdcB4jG7Q2rt8HbhY\nwlsHKgas0YIHdR6dUOCiyw72i0khwrd2PDgxKRu5+cob6wMSqXbIIxFLLLACHy2s\nKd6fQcg8FxoivEiF0lRfMi32A\/YWGJ\/k1OoFCzW55KFXqqBMptYZWh2Jezhttmid\nYHPc7jas7HEPnw3SvVM0gYAcmEVWWvjKfUpOhSYYkk\/B71w9RuIpPyyI7G2XI8Db\nG2ttngDIOL8njS6ybU9Og6yTNUoHL1wWEZN1b3fznKHcC9lyr8MIg00QNeDItt9i\nILCOkjoEdUdauqlRIa+EmUu+AL+JobrlQTzyrCIm7aaT3Hp9EyaEx5xvJDWtmjgf\nFYNCFtV1fw==\n=amwR\n-----END PGP PUBLIC KEY BLOCK-----",
+      "armored_key": "-----BEGIN PGP PUBLIC KEY BLOCK-----\n\nmQINBFY06pcBEADjYRuq05Zatu4qYtXmexbrwtUdakNJJHPlWxcusohdTLUmSXrt\n7LegXBE3OjvV9HbdBQfbpjitFp8eJw5krYQmh1+w\/UYjb5Jy\/A7ma3oawzbVwNpL\nwuAafYma5LLLloZD\/OpYKprhWfW9FHKyq6t+AcH5CFs\/HvixdrdbAO7K1\/z6mgWc\nT6HBP5\/dGTseAlrvUDTsW1kzo6qsrOWoUunrqm31umsvcfNROtDKM16zgZl+GlYY\n1BxNcRKr1\/AcZUrp4zdSSc6IXrYjJ+1kgHz\/ZoSrKn5QiqEn7wQEveJu+jNGSv8j\nMvQgjq+AmzveJ\/4f+RQirbe9JOeDgzX7NqloRil3I0FPFoivbRU0PHi4N2q7sN8e\nYpXxXzuL+OEq1GQe5fTsSotQTRZUJxbdUS8DfPckQaK79HoybTQAgA6mgQf\/C+U0\nX2TiBUzgBuhayiW12kHmKyK02htDeRNOYs4bBMdeZhAFm+5C74LJ3FGQOHe+\/o2o\nBktk0rAZScjizijzNzJviRB\/3nAJSBW6NSNYcbnosk0ET2osg2tLvzegRI6+NQJE\nb0EpByTMypUDhCNKgg5aEDUVWcq4iucps\/1e6\/2vg2XVB7xdphT4\/K44ZeBHdFuf\nhGQvs8rkAPzpkpsEWKgpTR+hdhbMmNiL984Ywk98nNuzgfkgpcP57xawNwARAQAB\ntCtQYXNzYm9sdCBEZWZhdWx0IEFkbWluIDxhZG1pbkBwYXNzYm9sdC5jb20+iQJO\nBBMBCgA4AhsDBQsJCAcDBRUKCQgLBRYCAwEAAh4BAheAFiEEDB0XYRENHjPJAG0a\nWxszLtBkJtMFAl0bmoYACgkQWxszLtBkJtPnxg\/\/Q9WOWUGf7VOnfbaIix3NGAON\nI7rgXuLFc1E0vG20XWT2+C6xGskFwjoJbiyDrbMYnILGn7vDIn3MSoITemLjtt97\n\/lEXK7AgbJEWQWF1lxpXm0nCvjJ6h+qatGK96ncjcua6ecUut10A\/CACpuqxfKOh\nD6CaM5l\/ksEDtwvrv2MIaVajuCvwg+yUx0I0rfAQv0YTXbJ5MRn1pvOo3c6n5Q0z\n5eu\/iiG0UNNIE3Tk5KpT02MTMv5ullpt3mtNjMHH0\/TdPxCtUKVh4q34x3syiYLe\npaddf5Ctv9CL52VWfsG3qFPHp7euOFY8lfzuemoqD9jcE7QIJnkCmwtLXLQrE0O2\nRW\/y\/oXqrETXu2sFyHMr1Xw\/\/QeJgIv63LBGmcPOj93VyHIlcUDarM2oq2+DXKxr\nDs2xfnFKVCZwpSvecIfKXUKsnX3AGrpetoZdfw0jAUVI3nt6YCu8KvczXxetfjOV\n3HHXa40gtOZk5OoKbfuTjzQlpc1oaDyLH8PT1GYsN3wWoDs4zulh6uKDpSt+4z58\nH1BfPFlrO2uhZSfk3E83uBQXZcABeXNxCdrTCJm8P90sbjLu1TlaeOnrWwVT7Yq8\ni8LE7lbAXnT1HjQlDi8GB2+2EnZZmOX+Z84a16jDElZazUNsE8zT7OmyjuB7GGDb\nQEFYzkb9dr1j1sukzty5Ag0EVjTqlwEQAJ37C9s4pq4jvcEF3bJgL+q3SBolgBIp\nN1g1\/woi9vEiOh+7e08Kr8mEhF04cpRDbhY6dcZ8OIXIQ99fgdNXfehlAWnI56NE\n\/FOIyif8TvGBfO6yE35fKSskwGNdUZWIZ0U0pxSXQvB+KEGWlq2c3Uf\/jhTZDnLN\nvfDjnYmn5ycp5sVWhtAmKFha9NJ6LGA0D1MC+jcCJCKtQRGgVvlqOESFDmQ7Pu8\/\nayr2BO0URHJ0Ob30lHluCnoKIv50qGpL9BYuGAdCfLBHXzRQhHIbfc\/cTPkK1kTX\nX5x\/MkiEl88TeGN+yjNVS7qqdxYgs+QYnDDZqevhWEvVyXVQjcCWSIHfjL1x5Ndq\nYL6+ci\/OxyIFoPs4K2umN3JPmpFi+fIPh2CexKy6BnyE8oAgNvgdDb6ZOfAtvShZ\nPM7QG4LZal2+nYp4n7gJRh6kepTQT\/4Bua0xOtRQhgcI4nGtcCxEDRMMzjqbGYlc\nnciMjsiMg9LPpWPDA+xKrRZKYwVFy8vLx\/alOz\/h1BZjx2u7YmuaGENxE62Lfyh0\nxeoCBDTdnWEOQTH6LVsomVtUO1FVap1t5jkYSdpxBuHf8\/2Ye7N3FTMRKe9n4e75\nsAJ00utnMl6P2Zca9mM4T29PK+LPFx2G2h35DQ7MbEid1cAZ8QVR3UyoiR8+u9jM\nek+9uFCm+nAxABEBAAGJAjYEGAEKACACGwwWIQQMHRdhEQ0eM8kAbRpbGzMu0GQm\n0wUCXRuamQAKCRBbGzMu0GQm004PD\/9sFmFkdoSqwU\/En77+h0gt4knlgZbgj0iR\nromnknIwLKBbJJXksHmMPXJB9b3WZ\/gGV3pPVtDWDKg3NZW4HLK13w3s3wQ2ViVV\nA6FzABDSkI3YBqkkasLRZU7oN9XajdFfph5wLhDSgTCjSncGfcjVzPugWKLqPPih\nZO6mpqxSFYEhx+p\/O80Tlj90UsOFRdot7cqn5wOhXZtKsQ0RwaA\/uq\/sFe6UNKHG\n2RBgQfoj5JbazJbvlgMiWxhBalwZKQWs8IBh\/4ag8AFwwoJN+gOtNM9C4UCHu+yt\n0Tv2\/Tu+Apcj0oyFaKJD4uQUmChQ2fDRysqJEIhee+yL29mrdcB4jG7Q2rt8HbhY\nwlsHKgas0YIHdR6dUOCiyw72i0khwrd2PDgxKRu5+cob6wMSqXbIIxFLLLACHy2s\nKd6fQcg8FxoivEiF0lRfMi32A\/YWGJ\/k1OoFCzW55KFXqqBMptYZWh2Jezhttmid\nYHPc7jas7HEPnw3SvVM0gYAcmEVWWvjKfUpOhSYYkk\/B71w9RuIpPyyI7G2XI8Db\nG2ttngDIOL8njS6ybU9Og6yTNUoHL1wWEZN1b3fznKHcC9lyr8MIg00QNeDItt9i\nILCOkjoEdUdauqlRIa+EmUu+AL+JobrlQTzyrCIm7aaT3Hp9EyaEx5xvJDWtmjgf\nFYNCFtV1fw==\n=amwR\n-----END PGP PUBLIC KEY BLOCK-----",
       "bits": 4096,
       "uid": "Passbolt Default Admin \u003Cadmin@passbolt.com\u003E",
       "key_id": "D06426D3",

package/src/react-extension/components/UserSetting/DisplayUserProfile/DisplayUserProfile.test.stories.js

@@ -12,7 +12,7 @@ export default {
 
 const context = {
   userSettings: {
-    getTrustedDomain: () => "some url"
+    getTrustedDomain: () => (new URL(window.location.href)).origin
   },
   siteSettings: {
     canIUse: () => true

package/src/react-extension/components/UserSetting/DisplayUserSettingsWorkspace/DisplayUserSettingsWorkspace.js

@@ -31,6 +31,8 @@ import SearchBar from "../../Common/Navigation/Search/SearchBar";
 import DisplayUserPassphrase from "../ChangeUserPassphrase/ChangeUserPassphrase";
 import DisplayUserChooseSecurityToken from "../ChangeUserSecurityToken/ChangeUserSecurityToken";
 import TransferToMobile from "../TransferToMobile/TransferToMobile";
+import DisplayAccountRecoveryUserSettings from '../DisplayUserAccountRecovery/DisplayAccountRecoveryUserSettings';
+import {withAccountRecovery} from "../../../contexts/AccountRecoveryUserContext";
 
 /**
  * This component is a container for all the user settings workspace features
@@ -52,6 +54,14 @@ class DisplayUserSettingsWorkspace extends React.Component {
     return this.props.context.siteSettings && this.props.context.siteSettings.canIUse('mobile');
   }
 
+  /**
+   * Can the user access the account recovery capability.
+   * @returns {bool}
+   */
+  get canIUseAccountRecoveryCapability() {
+    return this.props.context.siteSettings && this.props.context.siteSettings.canIUse('accountRecovery');
+  }
+
   /**
    * Render the component
    * @return {JSX}
@@ -70,7 +80,7 @@ class DisplayUserSettingsWorkspace extends React.Component {
         </div>
         <div className="panel main">
           <div className="panel left">
-            <NavigateIntoUserSettingsWorkspace/>
+            <NavigateIntoUserSettingsWorkspace hasPendingAccountRecoveryChoice={this.props.accountRecoveryContext.isAccountRecoveryChoiceRequired()}/>
           </div>
           <div className="panel middle">
             <DisplayUserSettingsWorkspaceBreadcrumb/>
@@ -83,6 +93,9 @@ class DisplayUserSettingsWorkspace extends React.Component {
             {this.canIUseMobileTransferCapability &&
             <Route path={`${path}/mobile`} component={TransferToMobile}></Route>
             }
+            {this.canIUseAccountRecoveryCapability &&
+            <Route path={`${path}/account-recovery`} component={DisplayAccountRecoveryUserSettings}></Route>
+            }
             <Route path={`${path}/keys`} component={DisplayUserGpgInformation}></Route>
           </div>
         </div>
@@ -94,6 +107,7 @@ class DisplayUserSettingsWorkspace extends React.Component {
 DisplayUserSettingsWorkspace.propTypes = {
   context: PropTypes.any, // The application context
   match: PropTypes.any,
+  accountRecoveryContext: PropTypes.object, // The account recovery context
 };
 
-export default withAppContext(withRouter(DisplayUserSettingsWorkspace));
+export default withAppContext(withAccountRecovery(withRouter(DisplayUserSettingsWorkspace)));

package/src/react-extension/components/UserSetting/DisplayUserSettingsWorkspaceBreadcrumb/DisplayUserSettingsWorkspaceBreadcrumb.js

@@ -57,7 +57,8 @@ class DisplayUserSettingsWorkspaceBreadcrumb extends Component {
       theme: this.translate("Theme"),
       mfa: this.translate("Multi Factor Authentication"),
       keys: this.translate("Keys inspector"),
-      mobile: this.translate("Mobile transfer")
+      mobile: this.translate("Mobile transfer"),
+      'account-recovery': this.translate("Account recovery"),
     };
     const matchedKey = Object.keys(names).find(matchPathSuffix);
     return names[matchedKey];

package/src/react-extension/components/UserSetting/DisplayUserTheme/DisplayUserTheme.js

@@ -108,11 +108,9 @@ class DisplayUserTheme extends React.Component {
   async onSelectFailure(error) {
     await this.props.loadingContext.remove();
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**

package/src/react-extension/components/UserSetting/DisplayUserTheme/DisplayUserTheme.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DisplayUserTheme from "./DisplayUserTheme";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -10,22 +11,27 @@ export default {
   component: DisplayUserTheme
 };
 
+const themes = [
+  {
+    id:  'default',
+    name: 'default',
+    preview: 'img/themes/default.png'
+  },
+  {
+    id:  'midgar',
+    name: 'midgar',
+    preview: 'img/themes/midgar.png'
+  }
+];
+
+const mockedPort = new MockPort();
+mockedPort.addRequestListener("passbolt.themes.find-all", () => themes);
+
 const context = {
   userSettings: {
     getTheme: () => ({name: 'toto', preview: 'ttoo'})
   },
-  port: {
-    request: () => ([
-      {
-        name: 'default',
-        preview: 'ttoo'
-      },
-      {
-        name: 'midgar',
-        preview: 'ttoo'
-      }
-    ])
-  }
+  port: mockedPort
 };
 
 

package/src/react-extension/components/UserSetting/EditUserProfile/EditUserProfile.js

@@ -212,11 +212,9 @@ class EditUserProfile extends Component {
   async onSaveError(error) {
     await this.toggleProcessing();
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**

package/src/react-extension/components/UserSetting/EditUserProfile/EditUserProfile.test.stories.js

@@ -12,10 +12,20 @@ export default {
 
 const context = {
   userSettings: {
-    getTrustedDomain: () => "some url"
+    getTrustedDomain: () => (new URL(window.location.href)).origin
   },
   siteSettings: {
-    canIUse: () => true
+    canIUse: () => true,
+    supportedLocales: [
+      {
+        locale: "fr-FR",
+        label: "French"
+      },
+      {
+        locale: "en-UK",
+        label: "English"
+      }
+    ]
   },
   loggedInUser:  {
     "id": "f848277c-5398-58f8-a82a-72397af2d450",
@@ -44,7 +54,8 @@ const context = {
     },
     "is_mfa_enabled": false,
     "last_logged_in": null
-  }
+  },
+  setContext: () => {},
 };
 
 
@@ -60,3 +71,6 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  onClose: () => {}
+};

package/src/react-extension/components/UserSetting/NavigateIntoUserSettingsWorkspace/NavigateIntoUserSettingsWorkspace.js

@@ -18,6 +18,7 @@ import {withRouter} from "react-router-dom";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../Common/Icons/Icon";
 
 /**
  * This component allows to navigate throught the differents sections of the user settings workspace
@@ -54,6 +55,14 @@ class NavigateIntoUserSettingsWorkspace extends React.Component {
     return this.props.context.siteSettings && this.props.context.siteSettings.canIUse('mobile');
   }
 
+  /**
+   * Can the user access the account recovery feature.
+   * @return {bool} true if the plugin is enabled and if an admin enabled the feature.
+   */
+  get canIUseAccountRecoveryCapability() {
+    return this.props.context.siteSettings && this.props.context.siteSettings.canIUse('accountRecovery');
+  }
+
   /**
    * Render the component
    */
@@ -138,6 +147,25 @@ class NavigateIntoUserSettingsWorkspace extends React.Component {
               </div>
             </li>
           }
+          {this.canIUseAccountRecoveryCapability &&
+          <li>
+            <div
+              className={`row ${isSelected('account-recovery') ? 'selected' : ''}`}>
+              <div className="main-cell-wrapper">
+                <div className="main-cell">
+                  <a onClick={this.props.navigationContext.onGoToUserSettingsAccountRecoveryRequested}>
+                    <span>
+                      <Trans>Account Recovery</Trans>
+                      {this.props.hasPendingAccountRecoveryChoice &&
+                      <Icon name="exclamation"/>
+                      }
+                    </span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </li>
+          }
           {this.canIUseMobileCapability &&
           <li>
             <div
@@ -163,6 +191,7 @@ NavigateIntoUserSettingsWorkspace.propTypes = {
   navigationContext: PropTypes.any, // The application navigation context
   history: PropTypes.object,
   location: PropTypes.object,
+  hasPendingAccountRecoveryChoice: PropTypes.bool,
   t: PropTypes.func, // The translation function
 };
 

package/src/react-extension/components/UserSetting/NavigateIntoUserSettingsWorkspace/NavigateIntoUserSettingsWorkspace.test.stories.js

@@ -31,3 +31,8 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+
+export const PendingAccountRecovery = Template.bind({});
+PendingAccountRecovery.args = {
+  pendingAccountRecovery: true
+};

package/src/react-extension/components/UserSetting/UploadUserProfileAvatar/UploadUserProfileAvatar.js

@@ -222,11 +222,9 @@ class UploadUserProfileAvatar extends React.Component {
       this.setState({errors: {message: error.data.body.profile.avatar.file.validMimeType}});
     } else {
       const errorDialogProps = {
-        title: this.translate("There was an unexpected error..."),
-        message: error.message
+        error: error
       };
-      this.props.context.setContext({errorDialogProps});
-      this.props.dialogContext.open(NotifyError);
+      this.props.dialogContext.open(NotifyError, errorDialogProps);
     }
   }
 

package/src/react-extension/components/UserSetting/UploadUserProfileAvatar/UploadUserProfileAvatar.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import UploadUserProfileAvatar from "./UploadUserProfileAvatar";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -12,7 +13,7 @@ export default {
 
 const context = {
   userSettings: {
-    getTrustedDomain: () => "some url"
+    getTrustedDomain: () => (new URL(window.location.href)).origin
   },
   loggedInUser:  {
     "id": "f848277c-5398-58f8-a82a-72397af2d450",
@@ -41,11 +42,13 @@ const context = {
     },
     "is_mfa_enabled": false,
     "last_logged_in": null
-  }
+  },
+  port: new MockPort(),
+  setContext: () => {}
 };
 
 
-const Template = args =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <UploadUserProfileAvatar {...args} {...routerProps}/>}></Route>
@@ -57,3 +60,7 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};