passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/Administration/SelectAccountRecoveryOrganizationKey/GenerateOrganizationKey.test.js

@@ -55,12 +55,17 @@ describe('As AD I can generate an ORK', () => {
    * And    I see an “Generate & Apply” button
    */
   it("As a logged in administrator on the account recovery settings in the administration workspace, I can open a dialog to generate an Organization Recovery Key", async() => {
+    expect.assertions(12);
     const page = new SelectAccountRecoveryOrganizationKeyPage(defaultProps());
     await waitFor(() => { });
     // Dialog title exists and correct
     expect(page.exists()).toBeTruthy();
 
-    await page.clickOnGenerateTab(() => expect(page.isGenerateTabSeletect()).toBe(true));
+    await page.clickOnGenerateTab(() => {
+      if (!page.isGenerateTabSeletect()) {
+        throw new Error("Changes are not available yet");
+      }
+    });
 
     expect(page.isFieldRequired(page.nameField)).toBe(true);
     expect(page.isFieldRequired(page.emailField)).toBe(true);
@@ -91,12 +96,17 @@ describe('As AD I can generate an ORK', () => {
    * And    I see a tooltip telling me that this setting is disable and safe
    */
   it("As a logged in administrator in the administration workspace, I can not select the algorithm type of the Organization Recovery Key generator", async() => {
+    expect.assertions(5);
     const page = new SelectAccountRecoveryOrganizationKeyPage(defaultProps());
     await waitFor(() => { });
     // Dialog title exists and correct
     expect(page.exists()).toBeTruthy();
 
-    await page.clickOnGenerateTab(() => expect(page.isGenerateTabSeletect()).toBe(true));
+    await page.clickOnGenerateTab(() => {
+      if (!page.isGenerateTabSeletect()) {
+        throw new Error("Changes are not available yet");
+      }
+    });
 
     const tooltipText = "Algorithm and key size cannot be changed at the moment. These are secure default";
     expect(page.algorithmTooltip).not.toBeNull();
@@ -118,18 +128,34 @@ describe('As AD I can generate an ORK', () => {
    * Then   the characters are replaced with symbols
    */
   it("As a logged in administrator in the administration workspace, I can show or hide the content of the “Organization key passphrase” text field in the Organization Recovery Key dialog", async() => {
+    expect.assertions(4);
     const page = new SelectAccountRecoveryOrganizationKeyPage(defaultProps());
-    await waitFor(() => { });
+    await waitFor(() => {});
     // Dialog title exists and correct
     expect(page.exists()).toBeTruthy();
 
-    await page.clickOnGenerateTab(() => expect(page.isGenerateTabSeletect()).toBe(true));
+    await page.clickOnGenerateTab(() => {
+      if (!page.isGenerateTabSeletect()) {
+        throw new Error("Changes are not available yet");
+      }
+    });
 
     page.passphraseField.value = "dummy-passphrase";
     expect(page.passphraseField.getAttribute("type")).toBe("password");
 
-    await page.toggleShowPassword(() => expect(page.passphraseField.getAttribute("type")).toBe("text"));
-    await page.toggleShowPassword(() => expect(page.passphraseField.getAttribute("type")).toBe("password"));
+    await page.toggleShowPassword(() => {
+      if (page.passphraseField.getAttribute("type") !== "text") {
+        throw new Error("Changes are not available yet");
+      }
+    });
+    expect(page.passphraseField.getAttribute("type")).toBe("text");
+
+    await page.toggleShowPassword(() => {
+      if (page.passphraseField.getAttribute("type") !== "password") {
+        throw new Error("Changes are not available yet");
+      }
+    });
+    expect(page.passphraseField.getAttribute("type")).toBe("password");
   });
 
   /**
@@ -141,13 +167,22 @@ describe('As AD I can generate an ORK', () => {
    * And    I see the empty mandatory field label in @red
    */
   it("As a logged in administrator in the administration workspace, I cannot generate OpenPGP Public key in the Organization Recovery Key settings without a valid email and name", async() => {
+    expect.assertions(4);
     const page = new SelectAccountRecoveryOrganizationKeyPage(defaultProps());
     await waitFor(() => { });
     // Dialog title exists and correct
     expect(page.exists()).toBeTruthy();
-    await page.clickOnGenerateTab(() => expect(page.isGenerateTabSeletect()).toBe(true));
-
-    await page.clickOnGenerateButton(() => expect(page.nameError).not.toBeNull());
+    await page.clickOnGenerateTab(() => {
+      if (!page.isGenerateTabSeletect()) {
+        throw new Error("Changes are not available yet");
+      }
+    });
+
+    await page.clickOnGenerateButton(() => {
+      if (page.nameError === null) {
+        throw new Error("Changes are not available yet");
+      }
+    });
 
     expect(page.nameFieldError).not.toBeNull();
     expect(page.emailFieldError).not.toBeNull();
@@ -163,17 +198,26 @@ describe('As AD I can generate an ORK', () => {
    * Then   I see an error message below the passphrase telling me to use a strong passphrase instead
    */
   it("As a logged in administrator in the administration workspace, I cannot generate OpenPGP Public key in the Organization Recovery Key settings without a strong passphrase", async() => {
+    expect.assertions(3);
     const page = new SelectAccountRecoveryOrganizationKeyPage(defaultProps());
-    await waitFor(() => { });
+    await waitFor(() => {});
     // Dialog title exists and correct
     expect(page.exists()).toBeTruthy();
-    await page.clickOnGenerateTab(() => expect(page.isGenerateTabSeletect()).toBe(true));
-
-    page.nameField.value = "test";
-    page.emailField.value = "test@passbolt.com";
-    page.passphraseField.value = "almost fair passw";
-
-    await page.clickOnGenerateButton(() => expect(page.nameError).not.toBeNull());
+    await page.clickOnGenerateTab(() => {
+      if (!page.isGenerateTabSeletect()) {
+        throw new Error("Changes are not available yet");
+      }
+    });
+
+    await page.type("test", page.nameField);
+    await page.type("test@passbolt.com", page.emailField);
+    await page.type("almost fair passw", page.passphraseField);
+
+    await page.clickOnGenerateButton(() => {
+      if (page.passphraseFieldError === null) {
+        throw new Error("Changes are not available yet");
+      }
+    });
 
     expect(page.passphraseFieldError).not.toBeNull();
     expect(page.passphraseFieldError.textContent).toBe(`A strong passphrase is required. The minimum complexity must be 'fair'`);

package/src/react-extension/components/Administration/SelectAccountRecoveryOrganizationKey/ImportOrganizationKey.js

@@ -232,7 +232,7 @@ class ImportOrganizationKey extends React.Component {
             <textarea id="organization-recover-form-key" name="key" value={this.state.key}
               onKeyUp={this.handleKeyInputKeyUp} onChange={this.handleInputChange}
               disabled={this.hasAllInputDisabled()} ref={this.keyInputRef} className="required"
-              placeholder='Add Open PGP Public key' required="required" autoComplete="off" autoFocus={true} />
+              placeholder={this.translate('Add Open PGP Public key')} required="required" autoComplete="off" autoFocus={true} />
           </div>
           <div className="input file">
             <input

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

@@ -68,14 +68,6 @@ class SelectAccountRecoveryOrganizationKey extends React.Component {
     this.props.handleUpdateOrganizationKey(public_key, private_key);
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -83,7 +75,7 @@ class SelectAccountRecoveryOrganizationKey extends React.Component {
   render() {
     return (
       <DialogWrapper
-        title={this.translate("Organization Recovery Key")}
+        title={this.props.t("Organization Recovery Key")}
         onClose={this.handleCloseClick}
         disabled={this.state.processing}
         className="organization-recover-key-dialog">

package/src/react-extension/components/Administration/SelectAccountRecoveryOrganizationKey/SelectAccountRecoveryOrganizationKey.test.page.js

@@ -259,4 +259,18 @@ export default class SelectAccountRecoveryOrganizationKeyPage {
 
     await waitFor(waitForCallback);
   }
+
+  async type(text, element) {
+    fireEvent.input(element, {
+      target: {
+        value: text
+      }
+    });
+
+    await waitFor(() => {
+      if (element.value !== text) {
+        throw new Error("The field has not changed yet.");
+      }
+    });
+  }
 }

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

@@ -22,7 +22,7 @@ import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 
 
 export default {
-  title: 'Passbolt/Administration/SelectAccountRecoveryOrganizationKey',
+  title: 'Passbolt Component/Administration/SelectAccountRecoveryOrganizationKey',
   component: SelectAccountRecoveryOrganizationKey
 };
 

package/src/react-extension/components/Announcement/AnnouncementWrapper/AnnouncementWrapper.js

@@ -12,6 +12,7 @@
  * @since         3.2.0
  */
 import React, {Component} from "react";
+import {Trans} from "react-i18next";
 import PropTypes from "prop-types";
 import Icon from "../../../../shared/components/Icons/Icon";
 
@@ -49,9 +50,9 @@ class AnnouncementWrapper extends Component {
       <div className={`${this.props.className} announcement`}>
         <div className="announcement-content">
           {this.props.canClose &&
-          <a className="announcement-close" onClick={this.handleClose} role="button">
+          <a className="announcement-close dialog-close button button-transparent" onClick={this.handleClose} role="button">
             <Icon name='close'/>
-            <span className="visually-hidden">Close</span>
+            <span className="visually-hidden"><Trans>Close</Trans></span>
           </a>
           }
           {this.props.children}

package/src/react-extension/components/Announcement/HandleSubscriptionAnnouncement/DisplayExpiredSubscriptionAnnouncement.js

@@ -16,7 +16,7 @@ import PropTypes from "prop-types";
 import AnnouncementWrapper
   from "../AnnouncementWrapper/AnnouncementWrapper";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withAnnouncement} from "../../../contexts/AnnouncementContext";
 
 /**
@@ -31,7 +31,7 @@ class DisplayExpiredSubscriptionAnnouncement extends React.Component {
     return (
       <AnnouncementWrapper className="subscription" onClose={this.props.onClose} canClose={false}>
         <p>
-          <Trans>Warning: </Trans>
+          <Trans>Warning:</Trans>&nbsp;
           <Trans>your subscription key has expired. The stability of the application is at risk.</Trans>
           <a onClick={this.props.navigationContext.onGoToAdministrationSubscriptionRequested}>
             <Trans>Manage Subscription</Trans>
@@ -48,4 +48,4 @@ DisplayExpiredSubscriptionAnnouncement.propTypes = {
   i18n: PropTypes.any
 };
 
-export default withNavigationContext(withAnnouncement(withTranslation('common')(DisplayExpiredSubscriptionAnnouncement)));
+export default withNavigationContext(withAnnouncement(DisplayExpiredSubscriptionAnnouncement));

package/src/react-extension/components/Announcement/HandleSubscriptionAnnouncement/DisplayGoingToExpireSubscriptionAnnouncement.js

@@ -33,7 +33,7 @@ class DisplayGoingToExpireSubscriptionAnnouncement extends React.Component {
   formatDateTimeAgo(date) {
     const dateTime = DateTime.fromISO(date);
     const duration = dateTime.diffNow().toMillis();
-    return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative({locale: this.props.context.locale});
+    return duration > -1000 && duration < 0 ? this.props.t('Just now') : dateTime.toRelative({locale: this.props.context.locale});
   }
 
   /**
@@ -44,7 +44,7 @@ class DisplayGoingToExpireSubscriptionAnnouncement extends React.Component {
     return (
       <AnnouncementWrapper className="subscription" onClose={this.props.onClose} canClose={true}>
         <p>
-          <Trans>Warning: </Trans>
+          <Trans>Warning:</Trans>&nbsp;
           <Trans>your subscription key will expire</Trans> {this.formatDateTimeAgo(this.props.expiry)}.
           <a onClick={this.props.navigationContext.onGoToAdministrationSubscriptionRequested}>
             <Trans>Manage Subscription</Trans>
@@ -60,6 +60,7 @@ DisplayGoingToExpireSubscriptionAnnouncement.propTypes = {
   expiry: PropTypes.string, // The subscription expiry date
   navigationContext: PropTypes.any, // The application navigation context
   onClose: PropTypes.func, // The close function
+  t: PropTypes.func, // The translation function
 };
 
 export default withAppContext(withNavigationContext(withAnnouncement(withTranslation('common')(DisplayGoingToExpireSubscriptionAnnouncement))));

package/src/react-extension/components/Announcement/HandleSubscriptionAnnouncement/DisplayInvalidSubscriptionAnnouncement.js

@@ -16,7 +16,7 @@ import PropTypes from "prop-types";
 import AnnouncementWrapper
   from "../AnnouncementWrapper/AnnouncementWrapper";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withAnnouncement} from "../../../contexts/AnnouncementContext";
 
 /**
@@ -31,7 +31,7 @@ class DisplayInvalidSubscriptionAnnouncement extends React.Component {
     return (
       <AnnouncementWrapper className="subscription" onClose={this.props.onClose} canClose={false}>
         <p>
-          <Trans>Warning: </Trans>
+          <Trans>Warning:</Trans>&nbsp;
           <Trans>your subscription key is not valid. The stability of the application is at risk.</Trans>
           <a onClick={this.props.navigationContext.onGoToAdministrationSubscriptionRequested}>
             <Trans>Manage Subscription</Trans>
@@ -48,4 +48,4 @@ DisplayInvalidSubscriptionAnnouncement.propTypes = {
   i18n: PropTypes.any
 };
 
-export default withNavigationContext(withAnnouncement(withTranslation('common')(DisplayInvalidSubscriptionAnnouncement)));
+export default withNavigationContext(withAnnouncement(DisplayInvalidSubscriptionAnnouncement));

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

@@ -13,7 +13,7 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
 
 /**
@@ -88,4 +88,4 @@ AskForAuthenticationHelpCredentialLost.propTypes = {
   canRequestHelp: PropTypes.bool, // Can the user request administrator help. @deprecated since v3.6 the request help feature was added with v3.6
 };
 
-export default withAppContext(withTranslation('common')(AskForAuthenticationHelpCredentialLost));
+export default withAppContext(AskForAuthenticationHelpCredentialLost);

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

@@ -18,7 +18,7 @@ import AskForAuthenticationHelpCredentialLost from "./AskForAuthenticationHelpCr
 import {defaultProps} from "./AskForAuthenticationHelpCredentialLost.test.data";
 
 export default {
-  title: 'Passbolt/Authentication/AskForAuthenticationHelpCredentialLost',
+  title: 'Passbolt Component/Authentication/AskForAuthenticationHelpCredentialLost',
   component: AskForAuthenticationHelpCredentialLost
 };
 

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

@@ -12,7 +12,7 @@
  * @since         3.6.0
  */
 import React, {Component} from "react";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class CheckAccountRecoveryEmail extends Component {
   /**
@@ -33,4 +33,4 @@ class CheckAccountRecoveryEmail extends Component {
   }
 }
 
-export default withTranslation('common')(CheckAccountRecoveryEmail);
+export default CheckAccountRecoveryEmail;

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

@@ -17,7 +17,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import CheckAccountRecoveryEmail from "./CheckAccountRecoveryEmail";
 
 export default {
-  title: 'Passbolt/Authentication/CheckAccountRecoveryEmail',
+  title: 'Passbolt Component/Authentication/CheckAccountRecoveryEmail',
   component: CheckAccountRecoveryEmail
 };
 

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

@@ -12,18 +12,9 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import {Trans, withTranslation} from "react-i18next";
-import PropTypes from "prop-types";
+import {Trans} from "react-i18next";
 
 class CheckMailBox extends Component {
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -42,7 +33,6 @@ class CheckMailBox extends Component {
 }
 
 CheckMailBox.propTypes = {
-  t: PropTypes.func, // The translation function
 };
 
-export default withTranslation('common')(CheckMailBox);
+export default CheckMailBox;

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

@@ -17,7 +17,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import CheckMailBox from "./CheckMailBox";
 
 export default {
-  title: 'Passbolt/Authentication/CheckMailBox',
+  title: 'Passbolt Component/Authentication/CheckMailBox',
   component: CheckMailBox
 };
 

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

@@ -13,8 +13,14 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import debounce from "debounce-promise";
+import {Trans} from "react-i18next";
 import Password from "../../../../shared/components/Password/Password";
+import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
+import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
+import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
+import ExternalServiceError from "../../../../shared/lib/Error/ExternalServiceError";
+import ExternalServiceUnavailableError from "../../../../shared/lib/Error/ExternalServiceUnavailableError";
 
 /**
  * The component display variations.
@@ -36,6 +42,8 @@ class CheckPassphrase extends Component {
   constructor(props) {
     super(props);
     this.state = this.defaultState;
+    this.isPwndProcessingPromise = null;
+    this.evaluatePassphraseIsInDictionaryDebounce = debounce(this.evaluatePassphraseIsInDictionary, 300);
     this.bindEventHandlers();
     this.createReferences();
   }
@@ -55,7 +63,9 @@ class CheckPassphrase extends Component {
       errors: {
         emptyPassphrase: false, // True if the passphrase is empty
         invalidPassphrase: false, // True if the passphrase is invalid
-      }
+      },
+      passphraseInDictionnary: false, // True if the passphrase is part of a data breach
+      isPwnedServiceAvailable: true // True if the isPwned service can be reached
     };
   }
 
@@ -116,31 +126,74 @@ class CheckPassphrase extends Component {
    */
   async handleSubmit(event) {
     event.preventDefault();
-    await this.validate();
+    this.validate();
 
     if (this.isValid) {
-      await this.toggleProcessing();
+      this.toggleProcessing();
       await this.check();
     }
   }
 
+  /**
+   * Evaluate if the passphrase is in dictionary
+   * @return {Promise<void>}
+   */
+  async evaluatePassphraseIsInDictionary() {
+    let isPwnedServiceAvailable = this.state.isPwnedServiceAvailable;
+    if (!isPwnedServiceAvailable) {
+      return;
+    }
+
+    const passphrase = this.state.passphrase;
+    let passphraseInDictionnary = false;
+    let passphraseEntropy = this.state.passphraseEntropy;
+
+    try {
+      passphraseInDictionnary = await SecretComplexity.ispwned(passphrase);
+      if (passphraseInDictionnary) {
+        passphraseEntropy = 0;
+      }
+    } catch (error) {
+      // If the service is unavailable don't block the user journey.
+      if (error instanceof ExternalServiceUnavailableError || error instanceof ExternalServiceError) {
+        isPwnedServiceAvailable = false;
+        passphraseInDictionnary = false;
+      } else {
+        throw error;
+      }
+    }
+
+    this.setState({
+      isPwnedServiceAvailable,
+      passphraseEntropy,
+      passphraseInDictionnary,
+    });
+  }
+
   /**
    * Whenever the user changes the private key
    * @param event An input event
    */
-  async handleChangePassphrase(event) {
+  handleChangePassphrase(event) {
     const passphrase = event.target.value;
-    await this.fillPassphrase(passphrase);
+    let passphraseEntropy = null;
+    if (passphrase.length) {
+      passphraseEntropy = SecretGenerator.entropy(passphrase);
+      this.isPwndProcessingPromise = this.evaluatePassphraseIsInDictionaryDebounce();
+    }
+
+    this.setState({passphrase, passphraseEntropy});
+
     if (this.state.hasBeenValidated) {
-      await this.validate();
+      this.validate();
     }
   }
 
   /**
    * Whenever the user toggles the remember me flag
    */
-  async handleToggleRememberMe() {
-    await this.toggleRemmemberMe();
+  handleToggleRememberMe() {
+    this.toggleRemmemberMe();
   }
 
   /**
@@ -160,45 +213,36 @@ class CheckPassphrase extends Component {
     // Whenever the passphrase is invalid.
     this.toggleProcessing();
     if (error.name === "InvalidMasterPasswordError") {
-      this.setState({errors: {invalidPassphrase: true}});
+      this.setState({errors: {...this.state.errors, invalidPassphrase: true}});
     } else {
       throw error;
     }
   }
 
-  /**
-   * Fill the passphrase
-   * @param passphrase A passphrase
-   */
-  async fillPassphrase(passphrase) {
-    await this.setState({passphrase});
-  }
-
   /**
    * Toggle the remember me flag value
    */
-  async toggleRemmemberMe() {
-    await this.setState({rememberMe: !this.state.rememberMe});
+  toggleRemmemberMe() {
+    this.setState({rememberMe: !this.state.rememberMe});
   }
 
   /**
    * Validate the security token data
    */
-  async validate() {
+  validate() {
     const {passphrase} = this.state;
-    const emptyPassphrase = passphrase.trim() === '';
-    if (emptyPassphrase) {
-      await this.setState({hasBeenValidated: true, errors: {emptyPassphrase}});
-      return;
-    }
-    await this.setState({hasBeenValidated: true, errors: {}});
+    const errors = {
+      emptyPassphrase: passphrase.trim() === '',
+      invalidPassphrase: false,
+    };
+    this.setState({hasBeenValidated: true, errors});
   }
 
   /**
    * Toggle the processing mode
    */
-  async toggleProcessing() {
-    await this.setState({actions: {processing: !this.state.actions.processing}});
+  toggleProcessing() {
+    this.setState({actions: {processing: !this.state.actions.processing}});
   }
 
   /**
@@ -208,25 +252,18 @@ class CheckPassphrase extends Component {
     this.passphraseInputRef.current.focus();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
   render() {
     const processingClassName = this.isProcessing ? 'processing' : '';
+    const entropy = this.state.passphrase?.length ? this.state.passphraseEntropy : null;
     return (
       <div className="check-passphrase">
         <h1><Trans>Please enter your passphrase to continue.</Trans></h1>
         <form acceptCharset="utf-8" onSubmit={this.handleSubmit} className="enter-passphrase">
           <div className="form-content">
-            <div className={`input-password-wrapper input required ${this.hasErrors ? "error" : ""}`}>
+            <div className={`input-password-wrapper input required ${this.hasErrors ? "error" : ""} ${!this.areActionsAllowed ? 'disabled' : ''}`}>
               <label htmlFor="passphrase"><Trans>Passphrase</Trans></label>
               <Password
                 id="passphrase"
@@ -237,16 +274,27 @@ class CheckPassphrase extends Component {
                 preview={true}
                 onChange={this.handleChangePassphrase}
                 disabled={!this.areActionsAllowed}/>
+              <PasswordComplexity entropy={entropy}/>
               {this.state.hasBeenValidated &&
               <>
                 {this.state.errors.emptyPassphrase &&
                   <div className="empty-passphrase error-message"><Trans>The passphrase should not be empty.</Trans></div>
                 }
                 {this.state.errors.invalidPassphrase &&
-                <div className="invalid-passphrase error-message"><Trans>The passphrase is invalid.</Trans></div>
+                  <div className="invalid-passphrase error-message"><Trans>The passphrase is invalid.</Trans></div>
                 }
               </>
               }
+              {this.state.passphrase?.length > 0 &&
+                <>
+                  {!this.state.isPwnedServiceAvailable &&
+                    <div className="invalid-passphrase warning-message"><Trans>The pwnedpasswords service is unavailable, your passphrase might be part of an exposed data breach</Trans></div>
+                  }
+                  {this.state.passphraseInDictionnary &&
+                    <div className="invalid-passphrase warning-message"><Trans>The passphrase is part of an exposed data breach.</Trans></div>
+                  }
+                </>
+              }
             </div>
             {this.props.canRememberMe &&
               <div className="input checkbox">
@@ -298,6 +346,5 @@ CheckPassphrase.propTypes = {
   ]), // Defines how the form should be displayed and behaves
   canRememberMe: PropTypes.bool, // True if the remember me flag must be displayed
   onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
-  t: PropTypes.func, // The translation function
 };
-export default withTranslation('common')(CheckPassphrase);
+export default CheckPassphrase;

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

@@ -18,7 +18,7 @@ import CheckPassphrase, {CheckPassphraseVariations} from "./CheckPassphrase";
 import {defaultProps} from "./CheckPassphrase.test.data";
 
 export default {
-  title: 'Passbolt/Authentication/CheckPassphrase',
+  title: 'Passbolt Component/Authentication/CheckPassphrase',
   component: CheckPassphrase
 };
 

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

@@ -14,7 +14,7 @@
 
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class ChooseAccountRecoveryPreference extends Component {
   /**
@@ -188,4 +188,4 @@ ChooseAccountRecoveryPreference.propTypes = {
   canGenerateNewKeyInstead: PropTypes.bool, // Can generate new key
   onGenerateNewKeyInstead: PropTypes.func, // Callback to trigger when the user wants to generate a new key instead.
 };
-export default withTranslation("common")(ChooseAccountRecoveryPreference);
+export default ChooseAccountRecoveryPreference;