passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/AuthenticationRecover/RecoverAuthentication/RecoverAuthentication.js

@@ -1,105 +1,118 @@
+/**
+ * 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.0.0
+ */
 import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 import {
-  AuthenticationContextState,
-  withAuthenticationContext
-} from "../../../contexts/AuthenticationContext";
-import ImportGpgKey from "../../Authentication/ImportGpgKey/ImportGpgKey";
-import CheckPassphrase from "../../Authentication/CheckPassphrase/CheckPassphrase";
+  AuthenticationRecoverWorkflowStates,
+  withAuthenticationRecoverContext
+} from "../../../contexts/Authentication/AuthenticationRecoverContext";
+import ImportGpgKey, {ImportGpgKeyVariations} from "../../Authentication/ImportGpgKey/ImportGpgKey";
+import CheckPassphrase, {CheckPassphraseVariations} from "../../Authentication/CheckPassphrase/CheckPassphrase";
 import ChooseSecurityToken from "../../Authentication/ChooseSecurityToken/ChooseSecurityToken";
-import AskForAuthenticationHelp from "../../Authentication/AskForAuthenticationHelp/AskForAuthenticationHelp";
+import AskForAuthenticationHelpCredentialLost, {AskForAuthenticationHelpCredentialLostVariations} from "../../Authentication/AskForAuthenticationHelpCredentialLost/AskForAuthenticationHelpCredentialLost";
 import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
-import PropTypes from "prop-types";
-import HelpOnPrivateKeyLostSecondaryAction from "../../Authentication/CheckPassphrase/HelpOnPrivateKeyLostSecondaryAction";
-import HelpOnPassphraseLostSecondaryAction
-  from "../../Authentication/CheckPassphrase/HelpOnPassphraseLostSecondaryAction";
 import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
-import DisplayLoginInProgress from "../../AuthenticationLogin/DisplayLoginInProgress/DisplayLoginInProgress";
-import {withTranslation} from "react-i18next";
-import IntroduceSetupExtension from "../../Authentication/IntroduceSetupExtension/IntroduceSetupExtension";
+import IntroduceExtension from "../../Authentication/IntroduceExtension/IntroduceExtension";
+import RequestAccountRecovery, {RequestAccountRecoveryVariations} from "../../Authentication/RequestAccountRecovery/RequestAccountRecovery";
+import CreateGpgKey, {CreateGpgKeyVariation} from "../../Authentication/CreateGpgKey/CreateGpgKey";
+import CheckAccountRecoveryEmail from "../../Authentication/CheckAccountRecoveryEmail/CheckAccountRecoveryEmail";
+import CheckMailBox from "../../Authentication/CheckMailBox/CheckMailBox";
 
 /**
  * The component orchestrates the recover authentication process
  */
 class RecoverAuthentication extends Component {
-  /**
-   * Whenever the component is mounted
-   */
-  componentDidMount() {
-    this.initializeRecover();
-  }
-
-  /**
-   * Whenever the component is updated
-   */
-  componentDidUpdate() {
-    this.handleSecurityTokenSaved();
-  }
-
-  /**
-   * Can the user use the remember until I logout option
-   * @return {boolean}
-   */
-  get canRememberMe() {
-    return this.props.siteSettings.hasRememberMeUntilILogoutOption;
-  }
-
-
-  /**
-   * Whenever the security token has been saved
-   */
-  handleSecurityTokenSaved() {
-    if (this.props.authenticationContext.state === AuthenticationContextState.SECURITY_TOKEN_SAVED) {
-      this.props.authenticationContext.onCompleteRecoverRequested();
-    }
-  }
-
-  /**
-   * Initialize the authentication recover process
-   */
-  initializeRecover() {
-    this.props.authenticationContext.onInitializeRecoverRequested();
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
   render() {
-    switch (this.props.authenticationContext.state)  {
-      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED:
-        return <IntroduceSetupExtension/>;
-      case AuthenticationContextState.RECOVER_INITIALIZED:
-      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED:
+    switch (this.props.authenticationRecoverContext.state) {
+      case AuthenticationRecoverWorkflowStates.INTRODUCE_EXTENSION:
+        return <IntroduceExtension
+          onComplete={this.props.authenticationRecoverContext.goToImportGpgKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.IMPORT_GPG_KEY:
         return <ImportGpgKey
-          title={this.translate("Welcome back, please enter your private key to begin the recovery process.")}
-          secondaryAction={<HelpOnPrivateKeyLostSecondaryAction/>}/>;
-      case AuthenticationContextState.GPG_KEY_VALIDATED:
-        return <CheckPassphrase canRememberMe={this.canRememberMe} secondaryAction={<HelpOnPassphraseLostSecondaryAction/>}/>;
-      case AuthenticationContextState.GPG_KEY_IMPORTED:
-        return <ChooseSecurityToken/>;
-      case AuthenticationContextState.PASSPHRASE_LOST:
-        return <AskForAuthenticationHelp/>;
-      case  AuthenticationContextState.RECOVER_COMPLETED:
-        return <DisplayLoginInProgress/>;
-      case AuthenticationContextState.UNEXPECTED_ERROR:
-        return <DisplayUnexpectedError error={this.props.authenticationContext.error}/>;
-      default:
+          displayAs={ImportGpgKeyVariations.RECOVER}
+          onComplete={this.props.authenticationRecoverContext.importGpgKey.bind(this)}
+          onSecondaryActionClick={this.props.authenticationRecoverContext.needHelpCredentialsLost.bind(this)}
+          validatePrivateGpgKey={this.props.authenticationRecoverContext.validatePrivateKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.VALIDATE_PASSPHRASE:
+        return <CheckPassphrase
+          displayAs={CheckPassphraseVariations.RECOVER}
+          canRememberMe={this.props.context.siteSettings.hasRememberMeUntilILogoutOption}
+          onComplete={this.props.authenticationRecoverContext.checkPassphrase.bind(this)}
+          onSecondaryActionClick={this.props.authenticationRecoverContext.needHelpCredentialsLost.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.CHOOSE_SECURITY_TOKEN:
+        return <ChooseSecurityToken
+          onComplete={this.props.authenticationRecoverContext.chooseSecurityToken.bind(this)}
+        />;
+      case  AuthenticationRecoverWorkflowStates.SIGNING_IN:
+        return <LoadingSpinner
+          title={<Trans>Signing in, please wait...</Trans>}
+        />;
+      case AuthenticationRecoverWorkflowStates.COMPLETING_RECOVER:
+        return <LoadingSpinner
+          title={<Trans>Completing recover. Please wait...</Trans>}
+        />;
+      case AuthenticationRecoverWorkflowStates.HELP_CREDENTIALS_LOST:
+        return <AskForAuthenticationHelpCredentialLost
+          displayAs={AskForAuthenticationHelpCredentialLostVariations.RECOVER}
+          onPrimaryActionClick={this.props.authenticationRecoverContext.requestHelpCredentialsLost.bind(this)}
+          onSecondaryActionClick={this.props.authenticationRecoverContext.goToImportGpgKey.bind(this)}
+          canRequestHelp={this.props.context.siteSettings.canIUse('accountRecoveryRequestHelp')}
+        />;
+      case AuthenticationRecoverWorkflowStates.INITIATE_ACCOUNT_RECOVERY:
+        return <RequestAccountRecovery
+          displayAs={RequestAccountRecoveryVariations.RECOVER}
+          onPrimaryActionClick={this.props.authenticationRecoverContext.initiateAccountRecovery.bind(this)}
+          onSecondaryActionClick={this.props.authenticationRecoverContext.goToImportGpgKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.GENERATE_ACCOUNT_RECOVERY_GPG_KEY:
+        return <CreateGpgKey
+          displayAs={CreateGpgKeyVariation.GENERATE_ACCOUNT_RECOVERY_GPG_KEY}
+          onComplete={this.props.authenticationRecoverContext.generateAccountRecoveryGpgKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.CHOOSE_ACCOUNT_RECOVERY_SECURITY_TOKEN:
+        return <ChooseSecurityToken
+          onComplete={this.props.authenticationRecoverContext.chooseAccountRecoverySecurityToken.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.REQUESTING_ACCOUNT_RECOVERY:
+        return <LoadingSpinner
+          title={<Trans>Requesting administrator approval. Please wait...</Trans>}
+        />;
+      case AuthenticationRecoverWorkflowStates.CHECK_ACCOUNT_RECOVERY_EMAIL:
+        return <CheckAccountRecoveryEmail/>;
+      case AuthenticationRecoverWorkflowStates.CHECK_MAILBOX:
+        return <CheckMailBox/>;
+      case AuthenticationRecoverWorkflowStates.UNEXPECTED_ERROR:
+        return <DisplayUnexpectedError
+          error={this.props.authenticationRecoverContext.error}
+        />;
+      case AuthenticationRecoverWorkflowStates.LOADING:
         return <LoadingSpinner/>;
     }
   }
 }
 
 RecoverAuthentication.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  siteSettings: PropTypes.object, // The site settings
-  t: PropTypes.func, // The translation function
+  context: PropTypes.any, // The application context
+  authenticationRecoverContext: PropTypes.any.isRequired, // The authentication recover context
 };
 
-export default withAuthenticationContext(withTranslation('common')(RecoverAuthentication));
+export default withAppContext(withAuthenticationRecoverContext(withTranslation('common')(RecoverAuthentication)));

package/src/react-extension/components/AuthenticationSetup/OrchestrateApiSetup/OrchestrateApiSetup.js

@@ -19,6 +19,8 @@ import InstallExtension from "../../Authentication/InstallExtension/InstallExten
 import DisplayBrowserNotSupported from "../../Authentication/DisplayBrowserNotSupported/DisplayBrowserNotSupported";
 import DisplayRequireInvitationError from "../../Authentication/DisplayRequireInvitationError/DisplayRequireInvitationError";
 import DisplayExpiredTokenError from "../../Authentication/DisplayExpiredTokenError/DisplayExpiredTokenError";
+import DisplayAlreadyLoggedInError, {DisplayAlreadyLoggedInErrorVariations} from "../../Authentication/DisplayAlreadyLoggedInError/DisplayAlreadyLoggedInError";
+import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
 
 /**
  * The component orchestrates the api setup authentication workflow.
@@ -50,8 +52,17 @@ class OrchestrateApiSetup extends Component {
         return <DisplayBrowserNotSupported/>;
       case ApiSetupContextState.TOKEN_EXPIRED_STATE:
         return <DisplayExpiredTokenError/>;
-      case ApiSetupContextState.ERROR_STATE:
+      case ApiSetupContextState.ERROR_ALREADY_SIGNED_IN_STATE:
+        return <DisplayAlreadyLoggedInError
+          onLogoutButtonClick={this.props.apiSetupContext.logoutUserAndRefresh}
+          displayAs={DisplayAlreadyLoggedInErrorVariations.SETUP}
+        />;
+      case ApiSetupContextState.REQUEST_INVITATION_ERROR:
         return <DisplayRequireInvitationError/>;
+      case ApiSetupContextState.UNEXPECTED_ERROR_STATE:
+        return <DisplayUnexpectedError
+          error={this.props.apiSetupContext.unexpectedError}
+        />;
       default:
         return <LoadingSpinner/>;
     }

package/src/react-extension/components/AuthenticationSetup/SetupAuthentication/SetupAuthentication.js

@@ -1,108 +1,105 @@
+/**
+ * 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.0.0
+ */
 import React, {Component} from "react";
-import CreateGpgKey from "../../Authentication/CreateGpgKey/CreateGpgKey";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 import {
-  AuthenticationContextState,
-  withAuthenticationContext
-} from "../../../contexts/AuthenticationContext";
-import DownloadRecoveryKit from "../../Authentication/DownloadRecoveryKit/DownloadRecoveryKit";
+  AuthenticationSetupWorkflowStates,
+  withAuthenticationSetupContext
+} from "../../../contexts/Authentication/AuthenticationSetupContext";
+import CheckPassphrase, {CheckPassphraseVariations} from "../../Authentication/CheckPassphrase/CheckPassphrase";
+import ChooseAccountRecoveryPreference
+  from "../../Authentication/ChooseAccountRecoveryPreference/ChooseAccountRecoveryPreference";
 import ChooseSecurityToken from "../../Authentication/ChooseSecurityToken/ChooseSecurityToken";
-import ImportGpgKey from "../../Authentication/ImportGpgKey/ImportGpgKey";
-import CheckPassphrase from "../../Authentication/CheckPassphrase/CheckPassphrase";
-import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
-import PropTypes from "prop-types";
-import GenerateKeyOnPassphraseLostSecondaryAction
-  from "../../Authentication/CheckPassphrase/GenerateKeyOnPassphraseLostSecondaryAction";
-import GenerateKeySecondaryAction
-  from "../../Authentication/ImportGpgKey/GenerateKeySecondaryAction";
+import CreateGpgKey, {CreateGpgKeyVariation} from "../../Authentication/CreateGpgKey/CreateGpgKey";
 import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
-import DisplayLoginInProgress from "../../AuthenticationLogin/DisplayLoginInProgress/DisplayLoginInProgress";
-import {withTranslation} from "react-i18next";
-import IntroduceSetupExtension from "../../Authentication/IntroduceSetupExtension/IntroduceSetupExtension";
+import DownloadRecoveryKit from "../../Authentication/DownloadRecoveryKit/DownloadRecoveryKit";
+import ImportGpgKey, {ImportGpgKeyVariations} from "../../Authentication/ImportGpgKey/ImportGpgKey";
+import IntroduceExtension from "../../Authentication/IntroduceExtension/IntroduceExtension";
+import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
 
 /**
  * The component orchestrates the setup authentication process
  */
 class SetupAuthentication extends Component {
-  /**
-   * Whenever the component is mounted
-   */
-  componentDidMount() {
-    this.initializeSetup();
-  }
-
-  /**
-   * Whenever the component is updated
-   */
-  componentDidUpdate() {
-    this.handleSecurityTokenSaved();
-  }
-
-  /**
-   * Can the user use the remember until I logout option
-   * @return {boolean}
-   */
-  get canRememberMe() {
-    return this.props.siteSettings.hasRememberMeUntilILogoutOption;
-  }
-
-  /**
-   * Whenever the security token has been saved
-   */
-  handleSecurityTokenSaved() {
-    if (this.props.authenticationContext.state === AuthenticationContextState.SECURITY_TOKEN_SAVED) {
-      this.props.authenticationContext.onCompleteSetupRequested();
-    }
-  }
-
-  /**
-   * Initialize the authentication setup process
-   */
-  initializeSetup() {
-    this.props.authenticationContext.onInitializeSetupRequested();
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
   render() {
-    switch (this.props.authenticationContext.state)  {
-      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED:
-        return <IntroduceSetupExtension/>;
-      case AuthenticationContextState.SETUP_INITIALIZED:
-      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED:
-        return <CreateGpgKey/>;
-      case AuthenticationContextState.GPG_KEY_GENERATED:
-        return <DownloadRecoveryKit/>;
-      case AuthenticationContextState.RECOVERY_KIT_DOWNLOADED:
-      case AuthenticationContextState.GPG_KEY_IMPORTED:
-        return <ChooseSecurityToken/>;
-      case AuthenticationContextState.GPG_KEY_TO_IMPORT_REQUESTED:
+    switch (this.props.authenticationSetupContext.state)  {
+      case AuthenticationSetupWorkflowStates.INTRODUCE_EXTENSION:
+        return <IntroduceExtension
+          onComplete={this.props.authenticationSetupContext.goToGenerateGpgKey}
+        />;
+      case AuthenticationSetupWorkflowStates.GENERATE_GPG_KEY:
+        return <CreateGpgKey
+          displayAs={CreateGpgKeyVariation.SETUP}
+          onComplete={this.props.authenticationSetupContext.generateGpgKey}
+          onSecondaryActionClick={this.props.authenticationSetupContext.goToImportGpgKey}
+        />;
+      case AuthenticationSetupWorkflowStates.DOWNLOAD_RECOVERY_KIT:
+        return <DownloadRecoveryKit
+          onDownload={this.props.authenticationSetupContext.downloadRecoveryKit}
+          onComplete={this.props.authenticationSetupContext.handleRecoveryKitDownloaded}
+        />;
+      case AuthenticationSetupWorkflowStates.IMPORT_GPG_KEY:
         return <ImportGpgKey
-          title={this.translate("Welcome, please enter your private key to continue.")}
-          secondaryAction={<GenerateKeySecondaryAction/>}/>;
-      case AuthenticationContextState.GPG_KEY_VALIDATED:
-        return <CheckPassphrase canRememberMe={this.canRememberMe} secondaryAction={<GenerateKeyOnPassphraseLostSecondaryAction/>}/>;
-      case  AuthenticationContextState.SETUP_COMPLETED:
-        return <DisplayLoginInProgress/>;
-      case AuthenticationContextState.UNEXPECTED_ERROR:
-        return <DisplayUnexpectedError error={this.props.authenticationContext.error}/>;
-      default:
+          displayAs={ImportGpgKeyVariations.SETUP}
+          onComplete={this.props.authenticationSetupContext.importGpgKey}
+          onSecondaryActionClick={this.props.authenticationSetupContext.goToGenerateGpgKey}
+          validatePrivateGpgKey={this.props.authenticationSetupContext.validatePrivateKey}
+        />;
+      case AuthenticationSetupWorkflowStates.VALIDATE_PASSPHRASE:
+        return <CheckPassphrase
+          displayAs={CheckPassphraseVariations.SETUP}
+          canRememberMe={this.props.context.siteSettings.hasRememberMeUntilILogoutOption}
+          onComplete={this.props.authenticationSetupContext.checkPassphrase}
+          onSecondaryActionClick={this.props.authenticationSetupContext.goToGenerateGpgKey}
+        />;
+      case AuthenticationSetupWorkflowStates.CHOOSE_ACCOUNT_RECOVERY_PREFERENCE:
+        return <ChooseAccountRecoveryPreference
+          policy={this.props.authenticationSetupContext.accountRecoveryOrganizationPolicy?.policy}
+          onComplete={this.props.authenticationSetupContext.chooseAccountRecoveryPreference}
+          canGenerateNewKeyInstead={!this.props.authenticationSetupContext.gpgKeyGenerated}
+          onGenerateNewKeyInstead={this.props.authenticationSetupContext.goToGenerateGpgKey}
+        />;
+      case AuthenticationSetupWorkflowStates.CHOOSE_SECURITY_TOKEN:
+        return <ChooseSecurityToken
+          onComplete={this.props.authenticationSetupContext.chooseSecurityToken}
+        />;
+      case AuthenticationSetupWorkflowStates.COMPLETING_SETUP:
+        return <LoadingSpinner
+          title={<Trans>Completing setup, please wait...</Trans>}
+        />;
+      case AuthenticationSetupWorkflowStates.SIGNING_IN:
+        return <LoadingSpinner
+          title={<Trans>Signing in, please wait...</Trans>}
+        />;
+      case AuthenticationSetupWorkflowStates.UNEXPECTED_ERROR:
+        return <DisplayUnexpectedError
+          error={this.props.authenticationSetupContext.error}
+        />;
+      case AuthenticationSetupWorkflowStates.LOADING:
         return <LoadingSpinner/>;
     }
   }
 }
 
 SetupAuthentication.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  siteSettings: PropTypes.object, // The site settings
-  t: PropTypes.func, // The translation function
+  context: PropTypes.any, // The application context
+  authenticationSetupContext: PropTypes.any.isRequired, // The authentication setup context
 };
-export default withAuthenticationContext(withTranslation('common')(SetupAuthentication));
+
+export default withAppContext(withAuthenticationSetupContext(withTranslation('common')(SetupAuthentication)));

package/src/react-extension/components/Common/ActionFeedback/DisplayActionFeedbacks.test.data.js

@@ -17,7 +17,8 @@
  */
 export const propsWithOneSuccessMessage = {
   actionFeedbackContext: {
-    feedbacks: [{type: 'success', message: "The comment has been added successfully"}]
+    feedbacks: [{type: 'success', message: "The comment has been added successfully"}],
+    remove: () => {}
   }
 };
 
@@ -26,7 +27,8 @@ export const propsWithOneSuccessMessage = {
  */
 export const propsWithOneErrorMessage = {
   actionFeedbackContext: {
-    feedbacks: [{type: 'error', message: "An error occurred during the operation"}]
+    feedbacks: [{type: 'error', message: "An error occurred during the operation"}],
+    remove: () => {}
   }
 };
 

package/src/react-extension/components/Common/ActionFeedback/DisplayActionFeedbacks.test.js

@@ -44,6 +44,7 @@ describe("Share Action Feedbacks", () => {
       });
 
       it('I should see “Success: The comment has been added successfully"', () => {
+        expect.assertions(1);
         expect(page.message(1)).toBe('Success: The comment has been added successfully');
       });
     });
@@ -60,6 +61,7 @@ describe("Share Action Feedbacks", () => {
       });
 
       it('I should see “Error: An error occurred during the operation”', () => {
+        expect.assertions(1);
         expect(page.message(1)).toBe('Error: An error occurred during the operation');
       });
     });
@@ -77,10 +79,11 @@ describe("Share Action Feedbacks", () => {
 
       it('I should not see the feedback message after 5 seconds', () => {
         jest.spyOn(propsForDisplayTime.actionFeedbackContext, 'remove').mockImplementation(() => {});
-        const oneSecondAfterExpectedRemoval = 6000;
+        const sixSecondAfterExpectedRemoval = 6000;
+        expect.assertions(1);
         setTimeout(() => {
           expect(propsForDisplayTime.actionFeedbackContext.remove).toHaveBeenCalled();
-        }, oneSecondAfterExpectedRemoval);
+        }, sixSecondAfterExpectedRemoval);
         jest.runAllTimers();
       });
     });
@@ -102,6 +105,7 @@ describe("Share Action Feedbacks", () => {
         await page.persist(1);
 
         const oneSecondAfterExpectedRemoval = 1000;
+        expect.assertions(2);
         setTimeout(() => {
           expect(propsForDisplayTime.actionFeedbackContext.remove).not.toHaveBeenCalled();
           expect(page.message(1)).toBe('Success: The comment has been added successfully');
@@ -125,7 +129,8 @@ describe("Share Action Feedbacks", () => {
       it('I should not see the feedback message anymore', async() => {
         jest.spyOn(propsForDisplayTime.actionFeedbackContext, 'remove').mockImplementation(() => {}).mockClear();
 
-        const twoSecondsAfterExpectedRemoval = 500;
+        const twoSecondsAfterExpectedRemoval = 2000;
+        expect.assertions(1);
         setTimeout(() => {
           const firstFeedback = propsWithOneSuccessMessage.actionFeedbackContext.feedbacks[0];
           expect(propsForDisplayTime.actionFeedbackContext.remove).toHaveBeenCalledWith(firstFeedback);

package/src/react-extension/components/Common/ActionFeedback/DisplayActionFeedbacks.test.stories.js

@@ -0,0 +1,30 @@
+/**
+ * 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 {propsWithOneErrorMessage, propsWithOneSuccessMessage} from "./DisplayActionFeedbacks.test.data";
+import DisplayActionFeedbacks from "./DisplayActionFeedbacks";
+
+export default {
+  title: 'Passbolt/Common/ActionFeedback',
+  component: "DisplayActionFeedbacks"
+};
+
+
+const Template = args => <DisplayActionFeedbacks {...args}/>;
+
+export const Success = Template.bind({});
+Success.args = propsWithOneSuccessMessage;
+
+export const Error = Template.bind({});
+Error.args = propsWithOneErrorMessage;

package/src/react-extension/components/Common/ActionFeedback/ShareActionFeedback.js

@@ -147,7 +147,7 @@ class ShareActionFeedback extends React.Component {
           onMouseOver={this.persist}
           onMouseLeave={this.displayWithTimer}
           onClick={this.close}>
-          <div className={`message animated ${this.state.shouldRender ? 'fadeInUp' : 'fadeOutUp'} warning`}>
+          <div className={`message animated ${this.state.shouldRender ? 'fadeInUp' : 'fadeOutUp'} ${this.props.feedback.type}`}>
             <span className="content">
               <strong>
                 {this.props.feedback.type === "success" && <><Trans>Success</Trans>: </>}

package/src/react-extension/components/Common/Avatar/UserAvatar.js

@@ -13,6 +13,7 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
+import Icon from "../../../../shared/components/Icons/Icon";
 
 class UserAvatar extends Component {
   /**
@@ -124,13 +125,16 @@ class UserAvatar extends Component {
    */
   render() {
     return (
-      <div className={this.props.className}>
+      <div className={`${this.props.className} ${this.props.attentionRequired ? 'attention-required' : ''}`}>
         {!this.state.error &&
         <img src={this.getAvatarSrc()} onError={this.handleError} alt={this.getAltText()}/>
         }
         {this.state.error &&
         <img src={this.getDefaultAvatarUrl()} alt={this.getAltText()}/>
         }
+        {this.props.attentionRequired &&
+        <Icon name="exclamation"/>
+        }
       </div>
     );
   }
@@ -143,6 +147,7 @@ UserAvatar.defaultProps = {
 UserAvatar.propTypes = {
   baseUrl: PropTypes.string,
   user: PropTypes.object,
+  attentionRequired: PropTypes.bool,
   className: PropTypes.string
 };
 

package/src/react-extension/components/Common/Avatar/UserAvatar.test.data.js

@@ -0,0 +1,27 @@
+/**
+ * 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 {{baseUrl: string, user: {last_name: string, first_name: string}}}
+ */
+export function defaultProps() {
+  return {
+    user: {
+      "first_name": "Dame Steve",
+      "last_name": "Shirley",
+    },
+    baseUrl: (new URL(window.location.href)).origin,
+  };
+}

package/src/react-extension/components/Common/Avatar/UserAvatar.test.stories.js

@@ -0,0 +1,54 @@
+/**
+ * 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
+ */
+
+/**
+ * Storybook tests on UserAvatar in regard of specifications
+ */
+import React from "react";
+import UserAvatar from "./UserAvatar";
+import {defaultProps} from "./UserAvatar.test.data";
+
+export default {
+  title: 'Passbolt/Common/UserAvatar',
+  component: UserAvatar
+};
+
+
+
+const Template = args =>
+  <div style={{display: "flex", flexWrap: "wrap"}}>
+    <div style={{width: "50%"}}>
+      <UserAvatar {...args}/>
+    </div>
+    <div style={{width: "50%"}}>
+      <UserAvatar {...args} attentionRequired={true}/>
+    </div>
+    <div className="avatar-with-name" style={{width: "50%", marginTop: "2.3rem"}}>
+      <UserAvatar {...args}/>
+      <div className="details center-cell">
+        <span className="name">Name</span>
+        <span className="email">name@passbolt.com</span>
+      </div>
+    </div>
+    <div className="avatar-with-name" style={{width: "50%", marginTop: "2.3rem"}}>
+      <UserAvatar {...args} attentionRequired={true}/>
+      <div className="details center-cell">
+        <span className="name">Name</span>
+        <span className="email">name@passbolt.com</span>
+      </div>
+    </div>
+  </div>;
+
+export const Initial = Template.bind({});
+Initial.args = defaultProps();