passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/Share/ShareDialog.test.data.js

@@ -1,7 +1,7 @@
 import UserSettings from "../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../test/fixture/Settings/userSettings";
+import {users, groups} from "../../contexts/UserWorkspaceContext.test.data";
 import MockPort from "../../test/mock/MockPort";
-
 /**
  * Returns the default app context for the unit test
  * @param appContext An existing app context
@@ -14,6 +14,8 @@ export function defaultAppContext(appContext) {
   const defaultAppContext = {
     userSettings,
     port,
+    users,
+    groups,
     setContext: function(newContext) {
       // In this scope this reference the object context.
       Object.assign(this, newContext);
@@ -35,6 +37,10 @@ export function defaultProps() {
   };
 }
 
+const gpgKey = {
+  "fingerprint": "0C1D1761110D1E33C9006D1A5B1B332ED06426D3"
+};
+
 /**
  * Default resources
  */
@@ -1702,3 +1708,21 @@ export const autocompleteResult = [
     "last_logged_in": ""
   }
 ];
+
+export const mockResultsResources = {
+  'passbolt.share.get-resources': resources,
+  'passbolt.keyring.get-public-key-info-by-user': gpgKey,
+  "passbolt.share.resources.save": true,
+};
+
+export const mockResultsFolders = {
+  'passbolt.share.get-folders': folders,
+  'passbolt.keyring.get-public-key-info-by-user': gpgKey,
+  "passbolt.share.folders.save": true,
+};
+
+export const mockResultsResourcesAndFolders = {
+  'passbolt.share.get-resources': resources,
+  'passbolt.share.get-folders': folders,
+  'passbolt.keyring.get-public-key-info-by-user': gpgKey,
+};

package/src/react-extension/components/Share/ShareDialog.test.js

@@ -16,14 +16,29 @@
  * Unit tests on ShareDialog in regard of specifications
  */
 import ShareDialogPage from "./ShareDialog.test.page";
-import {autocompleteResult, defaultAppContext, defaultProps, folders, resources} from "./ShareDialog.test.data";
+import {
+  autocompleteResult,
+  defaultAppContext,
+  defaultProps, folders,
+  mockResultsFolders,
+  mockResultsResources, mockResultsResourcesAndFolders, resources
+} from "./ShareDialog.test.data";
 import {ActionFeedbackContext} from "../../contexts/ActionFeedbackContext";
 import PassboltApiFetchError from "../../../shared/lib/Error/PassboltApiFetchError";
 import {waitFor} from "@testing-library/react";
 import NotifyError from "../Common/Error/NotifyError/NotifyError";
 
+beforeAll(() => {
+  global.scrollTo = jest.fn();
+});
+
 beforeEach(() => {
   jest.resetModules();
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.clearAllTimers();
 });
 
 describe("As Lu I should see the share dialog", () => {
@@ -41,23 +56,31 @@ describe("As Lu I should see the share dialog", () => {
      * I should see the share dialog
      */
     beforeEach(async() => {
-      const requestResourcesMockImpl = jest.fn(() => resources);
+      const requestResourcesMockImpl = path => mockResultsResources[path];
       mockContextRequest(requestResourcesMockImpl);
       context.setContext({shareDialogProps});
       page = new ShareDialogPage(context, props);
     });
 
     it('As LU I see a success toaster message after sharing resources to users and groups with success', async() => {
-      expect.assertions(19);
+      expect.assertions(18);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-resources', shareDialogProps.resourcesIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share 3 resources');
       expect(page.count).toBe(11);
 
-      const requestAutocompleteResultMockImpl = jest.fn(() => autocompleteResult);
-      mockContextRequest(requestAutocompleteResultMockImpl);
+      const requestKeyInfoMockImpl = () => ({
+        fingerprint: "079D6F4FDA3BFDC2D8E562D8AA44B1DA4BFB36B6"
+      });
+
+      mockContextRequest(requestKeyInfoMockImpl);
       await page.searchName("adm");
-      expect(context.port.request).toHaveBeenCalledWith('passbolt.share.search-aros', 'adm', shareDialogProps.resourcesIds);
+      jest.runOnlyPendingTimers();
+      await waitFor(() => {
+        if (!page.userOrGroupAutocomplete(1)) {
+          throw new Error("Page is not ready yet.");
+        }
+      });
       await page.selectUserOrGroup(1);
 
       expect(page.warningMessage).toBe('Click save to apply your pending changes.');
@@ -69,8 +92,8 @@ describe("As Lu I should see the share dialog", () => {
       expect(page.aroDetails(2)).toBe('betty@passbolt.com');
       expect(page.aroName(3)).toBe('Board');
       expect(page.aroDetails(3)).toBe('Group');
-      expect(page.aroName(12)).toBe('Administrator');
-      expect(page.aroDetails(12)).toBe('Group');
+      expect(page.aroName(12)).toBe('Admin User');
+      expect(page.aroDetails(12)).toBe('admin@passbolt.com');
       expect(page.selectRights(12).textContent).toBe('can read');
 
       const requestMockImpl = jest.fn();
@@ -79,10 +102,10 @@ describe("As Lu I should see the share dialog", () => {
 
       await page.savePermissions();
 
-      const permissionDto = [{"aco": "Resource", "aco_foreign_key": shareDialogProps.resourcesIds[0], "aro": "Group", "aro_foreign_key": "469edf9d-ca1e-5003-91d6-3a46755d5a50", "is_new": true, "type": 1},
-        {"aco": "Resource", "aco_foreign_key": shareDialogProps.resourcesIds[1], "aro": "Group", "aro_foreign_key": "469edf9d-ca1e-5003-91d6-3a46755d5a50", "is_new": true, "type": 1},
-        {"aco": "Resource", "aco_foreign_key": "690b6e40-f371-579c-b0c6-86e8ef383adc", "aro": "Group", "aro_foreign_key": "469edf9d-ca1e-5003-91d6-3a46755d5a50", "is_new": true, "type": 1},
-        {"aco": "Resource", "aco_foreign_key": "ecf0ed85-3bfc-5f45-b11d-74e9a86aa313", "aro": "Group", "aro_foreign_key": "469edf9d-ca1e-5003-91d6-3a46755d5a50", "is_new": true, "type": 1}];
+      const permissionDto = [{"aco": "Resource", "aco_foreign_key": shareDialogProps.resourcesIds[0], "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1},
+        {"aco": "Resource", "aco_foreign_key": shareDialogProps.resourcesIds[1], "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1},
+        {"aco": "Resource", "aco_foreign_key": "690b6e40-f371-579c-b0c6-86e8ef383adc", "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1},
+        {"aco": "Resource", "aco_foreign_key": "ecf0ed85-3bfc-5f45-b11d-74e9a86aa313", "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1}];
 
       expect(context.port.request).toHaveBeenCalledWith("passbolt.share.resources.save", resources, permissionDto);
       expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalledWith('The permissions have been changed successfully.');
@@ -100,7 +123,12 @@ describe("As Lu I should see the share dialog", () => {
       const requestAutocompleteResultMockImpl = jest.fn(() => autocompleteResult);
       mockContextRequest(requestAutocompleteResultMockImpl);
       await page.searchName("adm");
-      expect(context.port.request).toHaveBeenCalledWith('passbolt.share.search-aros', 'adm', shareDialogProps.resourcesIds);
+      jest.runOnlyPendingTimers();
+      await waitFor(() => {
+        if (!page.userOrGroupAutocomplete(1)) {
+          throw new Error("Page is not ready yet.");
+        }
+      });
       await page.selectUserOrGroup(1);
 
       // Mock the request function to make it the expected result
@@ -153,11 +181,16 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I should see an error dialog if the submit operation fails for an unexpected reason', async() => {
-      expect.assertions(2);
+      expect.assertions(1);
       const requestAutocompleteResultMockImpl = jest.fn(() => autocompleteResult);
       mockContextRequest(requestAutocompleteResultMockImpl);
       await page.searchName("adm");
-      expect(context.port.request).toHaveBeenCalledWith('passbolt.share.search-aros', 'adm', shareDialogProps.resourcesIds);
+      jest.runOnlyPendingTimers();
+      await waitFor(() => {
+        if (!page.userOrGroupAutocomplete(1)) {
+          throw new Error("Page is not ready yet.");
+        }
+      });
       await page.selectUserOrGroup(1);
 
       // Mock the request function to make it return an error.
@@ -181,14 +214,14 @@ describe("As Lu I should see the share dialog", () => {
      * I should see the share dialog
      */
     beforeEach(async() => {
-      const requestResourcesMockImpl = jest.fn(() => resources);
+      const requestResourcesMockImpl = path => mockResultsResources[path];
       mockContextRequest(requestResourcesMockImpl);
       context.setContext({shareDialogProps});
       page = new ShareDialogPage(context, props);
     });
 
     it('As LU I see a success toaster message after sharing one resource to users and groups with success', async() => {
-      expect.assertions(13);
+      expect.assertions(12);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-resources', shareDialogProps.resourcesIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share resource');
@@ -198,12 +231,17 @@ describe("As Lu I should see the share dialog", () => {
       const requestAutocompleteResultMockImpl = jest.fn(() => autocompleteResult);
       mockContextRequest(requestAutocompleteResultMockImpl);
       await page.searchName("adm");
-      expect(context.port.request).toHaveBeenCalledWith('passbolt.share.search-aros', 'adm', shareDialogProps.resourcesIds);
+      jest.runOnlyPendingTimers();
+      await waitFor(() => {
+        if (!page.userOrGroupAutocomplete(1)) {
+          throw new Error("Page is not ready yet.");
+        }
+      });
       await page.selectUserOrGroup(1);
 
       expect(page.count).toBe(12);
-      expect(page.aroName(12)).toBe('Administrator');
-      expect(page.aroDetails(12)).toBe('Group');
+      expect(page.aroName(12)).toBe('Admin User');
+      expect(page.aroDetails(12)).toBe('admin@passbolt.com');
       expect(page.selectRights(12).textContent).toBe('can read');
 
       const requestMockImpl = jest.fn();
@@ -212,10 +250,10 @@ describe("As Lu I should see the share dialog", () => {
 
       await page.savePermissions();
 
-      const permissionDto = [{"aco": "Resource", "aco_foreign_key": shareDialogProps.resourcesIds[0], "aro": "Group", "aro_foreign_key": "469edf9d-ca1e-5003-91d6-3a46755d5a50", "is_new": true, "type": 1},
-        {"aco": "Resource", "aco_foreign_key": "daaf057e-7fc3-5537-a8a9-e8c151890878", "aro": "Group", "aro_foreign_key": "469edf9d-ca1e-5003-91d6-3a46755d5a50", "is_new": true, "type": 1},
-        {"aco": "Resource", "aco_foreign_key": "690b6e40-f371-579c-b0c6-86e8ef383adc", "aro": "Group", "aro_foreign_key": "469edf9d-ca1e-5003-91d6-3a46755d5a50", "is_new": true, "type": 1},
-        {"aco": "Resource", "aco_foreign_key": "ecf0ed85-3bfc-5f45-b11d-74e9a86aa313", "aro": "Group", "aro_foreign_key": "469edf9d-ca1e-5003-91d6-3a46755d5a50", "is_new": true, "type": 1}];
+      const permissionDto = [{"aco": "Resource", "aco_foreign_key": shareDialogProps.resourcesIds[0], "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1},
+        {"aco": "Resource", "aco_foreign_key": "daaf057e-7fc3-5537-a8a9-e8c151890878", "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1},
+        {"aco": "Resource", "aco_foreign_key": "690b6e40-f371-579c-b0c6-86e8ef383adc", "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1},
+        {"aco": "Resource", "aco_foreign_key": "ecf0ed85-3bfc-5f45-b11d-74e9a86aa313", "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1}];
 
       expect(context.port.request).toHaveBeenCalledWith("passbolt.share.resources.save", resources, permissionDto);
       expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalledWith('The permissions have been changed successfully.');
@@ -231,29 +269,37 @@ describe("As Lu I should see the share dialog", () => {
      * I should see the share dialog
      */
     beforeEach(async() => {
-      const requestResourcesMockImpl = jest.fn(() => folders);
+      const requestResourcesMockImpl = path => mockResultsFolders[path];
       mockContextRequest(requestResourcesMockImpl);
       context.setContext({shareDialogProps});
       page = new ShareDialogPage(context, props);
     });
 
     it('As LU I see a success toaster message after sharing one folder to users and groups with success', async() => {
-      expect.assertions(13);
+      expect.assertions(12);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-folders', shareDialogProps.foldersIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share folder');
       expect(page.subtitle).toBe('apache');
       expect(page.count).toBe(2);
 
-      const requestAutocompleteResultMockImpl = jest.fn(() => autocompleteResult);
-      mockContextRequest(requestAutocompleteResultMockImpl);
-      await page.searchName("adm");
-      expect(context.port.request).toHaveBeenCalledWith('passbolt.share.search-aros', 'adm', shareDialogProps.foldersIds);
+      const requestKeyInfoMockImpl = () => ({
+        fingerprint: "079D6F4FDA3BFDC2D8E562D8AA44B1DA4BFB36B6"
+      });
+      mockContextRequest(requestKeyInfoMockImpl);
+
+      await page.searchName("ad");
+      jest.runOnlyPendingTimers();
+      await waitFor(() => {
+        if (!page.userOrGroupAutocomplete(2)) {
+          throw new Error("Page is not ready yet.");
+        }
+      });
       await page.selectUserOrGroup(2);
 
       expect(page.count).toBe(3);
-      expect(page.aroName(3)).toBe('Admin User');
-      expect(page.aroDetails(3)).toBe('admin@passbolt.com');
+      expect(page.aroName(3)).toBe('Adele Goldstine');
+      expect(page.aroDetails(3)).toBe('adele@passbolt.com');
       expect(page.selectRights(3).textContent).toBe('can read');
 
       const requestMockImpl = jest.fn();
@@ -262,7 +308,7 @@ describe("As Lu I should see the share dialog", () => {
 
       await page.savePermissions();
 
-      const permissionDto = [{"aco": "Folder", "aco_foreign_key": shareDialogProps.foldersIds[0], "aro": "User", "aro_foreign_key": "d57c10f5-639d-5160-9c81-8a0c6c4ec856", "is_new": true, "type": 1}];
+      const permissionDto = [{"aco": "Folder", "aco_foreign_key": shareDialogProps.foldersIds[0], "aro": "User", "aro_foreign_key": "af5e1f70-a0ee-5b76-935b-c846f8a6a190", "is_new": true, "type": 1}];
 
       expect(context.port.request).toHaveBeenCalledWith("passbolt.share.folders.save", folders, permissionDto);
       expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalledWith('The permissions have been changed successfully.');
@@ -279,21 +325,26 @@ describe("As Lu I should see the share dialog", () => {
      * I should see the share dialog
      */
     beforeEach(async() => {
-      const requestResourcesMockImpl = jest.fn(() => folders);
+      const requestResourcesMockImpl = path => mockResultsResourcesAndFolders[path];
       mockContextRequest(requestResourcesMockImpl);
       context.setContext({shareDialogProps});
       page = new ShareDialogPage(context, props);
     });
 
     it('As LU I see a error dialog message after try to sharing folders and resources at the same time', async() => {
-      expect.assertions(4);
+      expect.assertions(3);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share 2 items');
 
       const requestAutocompleteResultMockImpl = jest.fn(() => autocompleteResult);
       mockContextRequest(requestAutocompleteResultMockImpl);
       await page.searchName("adm");
-      expect(context.port.request).toHaveBeenCalledWith('passbolt.share.search-aros', 'adm', shareDialogProps.resourcesIds);
+      jest.runOnlyPendingTimers();
+      await waitFor(() => {
+        if (!page.userOrGroupAutocomplete(1)) {
+          throw new Error("Page is not ready yet.");
+        }
+      });
       await page.selectUserOrGroup(1);
 
       await page.savePermissions();

package/src/react-extension/components/Share/ShareDialog.test.page.js

@@ -31,7 +31,7 @@ export default class ShareDialogPage {
     this._page = render(
       <MockTranslationProvider>
         <AppContext.Provider value={appContext}>
-          <ShareDialog {...props}/>
+          <ShareDialog {...props} listMinSize={20}/>
         </AppContext.Provider>
       </MockTranslationProvider>
     );

package/src/react-extension/components/Share/ShareDialog.test.stories.js

@@ -6,7 +6,7 @@ import {autocompleteResult, resources} from "./ShareDialog.test.data";
 
 
 export default {
-  title: 'Passbolt/Share/ShareDialog',
+  title: 'Passbolt Component/Share/ShareDialog',
   component: ShareDialog
 };
 

package/src/react-extension/components/Share/SharePermissionDeleteButton.js

@@ -12,6 +12,7 @@
  * @since         2.13.0
  */
 import React, {Component} from "react";
+import {Trans} from "react-i18next";
 import PropTypes from "prop-types";
 
 import Icon from "../../../shared/components/Icons/Icon";
@@ -33,7 +34,7 @@ class SharePermissionDeleteButton extends Component {
     return (
       <a className={this.getClassName()} onClick={this.handleCloseClick.bind(this)} role="button">
         <Icon name='close' />
-        <span className="visually-hidden">Remove</span>
+        <span className="visually-hidden"><Trans>Remove</Trans></span>
       </a>
     );
   }

package/src/react-extension/components/Share/SharePermissionItem.js

@@ -39,6 +39,17 @@ class SharePermissionItem extends Component {
     this.bindEventHandlers();
   }
 
+  /**
+   * Component did mount
+   * @returns {Promise<void>}
+   */
+  async componentDidMount() {
+    if (this.isUser()) {
+      const gpgKey = await this.findUserGpgKey(this.props.aro.profile.user_id);
+      this.setState({gpgKey});
+    }
+  }
+
   /**
    *  Invoked immediately after updating occurs. This method is not called for the initial render.
    * @param prevProps
@@ -54,6 +65,15 @@ class SharePermissionItem extends Component {
     this.handleDelete = this.handleDelete.bind(this);
   }
 
+  /**
+   * Find a user gpg key
+   * @param {string} userId
+   * @returns {Promise<object>}
+   */
+  async findUserGpgKey(userId) {
+    return await this.props.context.port.request('passbolt.keyring.get-public-key-info-by-user', userId);
+  }
+
   /**
    * R
    * @returns {string} Group or User name
@@ -86,6 +106,27 @@ class SharePermissionItem extends Component {
     }
   }
 
+  /**
+   * Get the tooltip message
+   * @returns {JSX.Element}
+   */
+  get tooltipMessage() {
+    return <>
+      <div className="email"><strong>{this.props.aro.username}</strong></div>
+      <div className="fingerprint">{this.formatFingerprint(this.state.gpgKey.fingerprint)}</div>
+    </>;
+  }
+
+  /**
+   * Format fingerprint
+   * @param {string} fingerprint An user finger print
+   * @returns {JSX.Element}
+   */
+  formatFingerprint(fingerprint) {
+    const result = fingerprint.toUpperCase().replace(/.{4}/g, '$& ');
+    return <>{result.substr(0, 24)}<br/>{result.substr(25)}</>;
+  }
+
   /**
    * Return true if aro in props is a user
    * @returns {boolean}
@@ -102,6 +143,14 @@ class SharePermissionItem extends Component {
     return !(this.props.aro && this.props.aro.profile);
   }
 
+  /**
+   * Has a gpg key fingerprint
+   * @returns {*}
+   */
+  hasGpgKey() {
+    return this.state.gpgKey && this.state.gpgKey.fingerprint;
+  }
+
   getClassName() {
     let className = 'row';
     if (this.props.updated) {
@@ -156,6 +205,11 @@ class SharePermissionItem extends Component {
         <div className="aro">
           <div className="aro-name">
             <span className="ellipsis">{this.getAroName()}</span>
+            {this.hasGpgKey() &&
+              <Tooltip message={this.tooltipMessage}>
+                <Icon name="info-circle"/>
+              </Tooltip>
+            }
           </div>
           <div className="aro-details">
             <span className="ellipsis">{this.getAroDetails()}</span>
@@ -175,6 +229,7 @@ class SharePermissionItem extends Component {
             value={this.state.permissionType.toString()}
             disabled={this.isInputDisabled()}
             onChange={this.handleUpdate}
+            direction={this.props.isLastItemDisplayed ? "top" : "bottom"}
           />
         </div>
 
@@ -196,6 +251,7 @@ SharePermissionItem.propTypes = {
   onUpdate: PropTypes.func,
   onDelete: PropTypes.func,
   permissionType: PropTypes.number,
+  isLastItemDisplayed: PropTypes.bool,
   t: PropTypes.func, // The translation function
 };
 

package/src/react-extension/components/Share/ShareVariesDetails.js

@@ -13,17 +13,9 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class ShareVariesDetails extends Component {
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   render() {
     return (
       <span className="share-varies-details">
@@ -46,7 +38,6 @@ class ShareVariesDetails extends Component {
 
 ShareVariesDetails.propTypes = {
   variesDetails: PropTypes.object,
-  t: PropTypes.func, // The translation function
 };
 
-export default withTranslation('common')(ShareVariesDetails);
+export default ShareVariesDetails;

package/src/react-extension/components/User/ConfirmDisableUserMFA/ConfirmDisableUserMFA.js

@@ -156,7 +156,7 @@ class ConfirmDisableUserMFA extends Component {
                 You are about to disable second-factor authentication (MFA) for the user <strong>{{name}} ({{username}})</strong>.
               </Trans>
             </p>
-            <p><Trans>Warning: Existing settings will be lost. This action cannot be undone.</Trans></p>
+            <p><Trans>Existing settings will be lost. This action cannot be undone.</Trans></p>
           </div>
 
           <div className="submit-wrapper clearfix">

package/src/react-extension/components/User/ConfirmDisableUserMFA/ConfirmDisableUserMFA.test.stories.js

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/User/ConfirmDisableUserMFA',
+  title: 'Passbolt Component/User/ConfirmDisableUserMFA',
   component: ConfirmDisableUserMFA
 };
 

package/src/react-extension/components/User/CreateUser/CreateUser.js

@@ -370,11 +370,11 @@ class CreateUser extends Component {
         onClose={this.handleClose} disabled={this.hasAllInputDisabled()}>
         <form className="user-create-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
-            <div className={`input text required ${this.state.first_nameError ? "error" : ""}`}>
-              <label htmlFor="user-first-name-input"><Trans>First Name</Trans></label>
+            <div className={`input text required ${this.state.first_nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+              <label htmlFor="user-first-name-input"><Trans>First name</Trans></label>
               <input id="user-first-name-input" name="first_name"
                 ref={this.firstNameRef}
-                type="text" value={this.state.first_name} placeholder={this.translate("first name")}
+                type="text" value={this.state.first_name} placeholder={this.translate("First name")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleFirstNameInputKeyUp} onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}
@@ -383,11 +383,11 @@ class CreateUser extends Component {
               <div className="first_name error-message">{this.state.first_nameError}</div>
               }
             </div>
-            <div className={`input text required ${this.state.last_nameError ? "error" : ""}`}>
-              <label htmlFor="user-last-name-input"><Trans>Last Name</Trans></label>
+            <div className={`input text required ${this.state.last_nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+              <label htmlFor="user-last-name-input"><Trans>Last name</Trans></label>
               <input id="user-last-name-input" name="last_name"
                 ref={this.lastNameRef}
-                type="text" value={this.state.last_name} placeholder={this.translate("last name")}
+                type="text" value={this.state.last_name} placeholder={this.translate("Last name")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleLastNameInputOnKeyUp} onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}
@@ -396,10 +396,10 @@ class CreateUser extends Component {
               <div className="last_name error-message">{this.state.last_nameError}</div>
               }
             </div>
-            <div className={`input text required ${this.state.usernameError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.usernameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="user-username-input"><Trans>Username / Email</Trans></label>
               <input id="user-username-input" name="username"
-                ref={this.usernameRef} type="text" value={this.state.username} placeholder={this.translate("email")}
+                ref={this.usernameRef} type="text" value={this.state.username} placeholder={this.translate("Email")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleUsernameInputOnKeyUp} onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}
@@ -408,7 +408,7 @@ class CreateUser extends Component {
               <div className="username error-message">{this.state.usernameError}</div>
               }
             </div>
-            <div className="input checkbox-wrapper">
+            <div className={`input checkbox-wrapper ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="is_admin_checkbox"><Trans>Role</Trans></label>
               <div className="input checkbox">
                 <input id="is_admin_checkbox" name="is_admin" onChange={this.handleCheckboxClick}

package/src/react-extension/components/User/CreateUser/CreateUser.test.stories.js

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/User/CreateUser',
+  title: 'Passbolt Component/User/CreateUser',
   component: CreateUser
 };
 

package/src/react-extension/components/User/DeleteUser/DeleteUser.js

@@ -140,7 +140,7 @@ class DeleteUser extends Component {
                 Are you sure you want to delete <strong>{{user: this.getUser()}}</strong>?
               </Trans>
             </p>
-            <p><Trans>Warning: This action can’t be undone. All the data associated with this user will be permanently deleted.</Trans></p>
+            <p><Trans>This action can’t be undone. All the data associated with this user will be permanently deleted.</Trans></p>
           </div>
           <div className="submit-wrapper clearfix">
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick}/>

package/src/react-extension/components/User/DeleteUser/DeleteUser.test.stories.js

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/User/DeleteUser',
+  title: 'Passbolt Component/User/DeleteUser',
   component: DeleteUser
 };
 

package/src/react-extension/components/User/DeleteUser/DeleteUserWithConflicts.js

@@ -513,7 +513,7 @@ class DeleteUserWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.foldersErrors.map(folderError =>
                   <li key={folderError.id}>
-                    <div className="select-wrapper input required">
+                    <div className={`select-wrapper input required ${this.state.processing ? 'disabled' : ''}`}>
                       <label htmlFor="transfer_folder_owner">{folderError.name} (<Trans>Folder</Trans>) <Trans>new owner</Trans>:</label>
                       <Select className="form-element" value={this.state.owners[folderError.id]} items={this.getAcoPermissionsList(folderError.id)} onChange={event => this.handleOnChangeOwner(event, folderError.id)}/>
                     </div>
@@ -528,7 +528,7 @@ class DeleteUserWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.resourcesErrors.map(resourceError =>
                   <li key={resourceError.id}>
-                    <div className="select-wrapper input required">
+                    <div className={`select-wrapper input required ${this.state.processing ? 'disabled' : ''}`}>
                       <label htmlFor="transfer_resource_owner">{resourceError.name} (<Trans>Password</Trans>) <Trans>new owner</Trans>:</label>
                       <Select className="form-element" value={this.state.owners[resourceError.id]} items={this.getAcoPermissionsList(resourceError.id)} onChange={event => this.handleOnChangeOwner(event, resourceError.id)}/>
                     </div>
@@ -543,7 +543,7 @@ class DeleteUserWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.groupsErrors.map(groupError =>
                   <li key={groupError.id}>
-                    <div className="select-wrapper input required">
+                    <div className={`select-wrapper input required ${this.state.processing ? 'disabled' : ''}`}>
                       <label htmlFor="transfer_group_manager">{groupError.name} (<Trans>Group</Trans>) <Trans>new manager</Trans>:</label>
                       <Select className="form-element" value={this.state.managers[groupError.id]} items={this.getGroupUsersList(groupError.id)} onChange={event => this.handleOnChangeManager(event, groupError.id)}/>
                     </div>

package/src/react-extension/components/User/DeleteUser/DeleteUserWithConflicts.test.stories.js

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/User/DeleteUserWithConflicts',
+  title: 'Passbolt Component/User/DeleteUserWithConflicts',
   component: DeleteUserWithConflicts
 };
 

package/src/react-extension/components/User/DisplayExpiredAccountRecovery/DisplayExpiredAccountRecovery.js

@@ -40,21 +40,13 @@ class DisplayExpiredAccountRecovery extends Component {
     this.props.onClose();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
    */
   render() {
     return (
-      <DialogWrapper className="expired-account-recover-dialog" title={this.translate("Account recovery error")}
+      <DialogWrapper className="expired-account-recover-dialog" title={this.props.t("Account recovery error")}
         onClose={this.handleClose}>
         <div className="form-content">
           <p>