passbolt-styleguide 3.6.2 → 3.7.0-alpha1

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

@@ -102,12 +102,12 @@ class DisplayUserDirectoryAdministration extends React.Component {
   }
 
   async componentDidMount() {
-    document.addEventListener('click', this.handleUserDirectoryClickEvent);
+    document.addEventListener('click', this.handleUserDirectoryClickEvent, {capture: true});
     this.findAllUserDirectorySettings();
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleUserDirectoryClickEvent);
+    document.removeEventListener('click', this.handleUserDirectoryClickEvent, {capture: true});
   }
 
   /**
@@ -768,7 +768,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                     </div>
                   </div>
                 </div>
-                <div className="input text required ad openldap">
+                <div className={`input text required ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Server url</Trans></label>
                   <div className={`input text singleline connection_info ad openldap ${this.state.hasFieldFocus ? "no-focus" : ""}`}>
                     <input id="server-input" type="text" className="required host ad openldap form-element" name="host"
@@ -791,20 +791,20 @@ class DisplayUserDirectoryAdministration extends React.Component {
                   }
                 </div>
                 <div className="singleline clearfix">
-                  <div className="input text first-field ad openldap">
+                  <div className={`input text first-field ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                     <label><Trans>Username</Trans></label>
                     <input id="username-input" type="text" className="fluid form-element" name="username"
-                      value={this.state.username} onChange={this.handleInputChange} placeholder={this.translate("username")}
+                      value={this.state.username} onChange={this.handleInputChange} placeholder={this.translate("Username")}
                       disabled={this.hasAllInputDisabled()}/>
                   </div>
-                  <div className="input text last-field ad openldap">
+                  <div className={`input text last-field ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                     <label><Trans>Password</Trans></label>
                     <input id="password-input" className="fluid form-element" name="password"
-                      value={this.state.password} onChange={this.handleInputChange} placeholder={this.translate("password")} type="password"
+                      value={this.state.password} onChange={this.handleInputChange} placeholder={this.translate("Password")} type="password"
                       disabled={this.hasAllInputDisabled()}/>
                   </div>
                 </div>
-                <div className="input text required ad openldap">
+                <div className={`input text required ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Domain</Trans></label>
                   <input id="domain-name-input" type="text" name="domain" value={this.state.domain}
                     onChange={this.handleInputChange} className="required fluid form-element" onKeyUp={this.handleDomainInputKeyUp}
@@ -813,7 +813,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                   <div id="domain-name-input-feedback" className="error-message">{this.state.domainError}</div>
                   }
                 </div>
-                <div className="input text ad openldap">
+                <div className={`input text ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Base DN</Trans></label>
                   <input id="base-dn-input" type="text" name="baseDn" value={this.state.baseDn}
                     onChange={this.handleInputChange} className="fluid form-element" placeholder="OU=OrgUsers,DC=mydomain,DC=local"
@@ -834,25 +834,25 @@ class DisplayUserDirectoryAdministration extends React.Component {
                 </a>
               </h4>
               <div className="accordion-content">
-                <div className="input text ad openldap">
+                <div className={`input text ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Group path</Trans></label>
                   <input id="group-path-input" type="text" name="groupPath" value={this.state.groupPath}
-                    onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("Group Path")}
+                    onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("Group path")}
                     disabled={this.hasAllInputDisabled()}/>
                   <div className="help-message">
                     <Trans>Group path is used in addition to the base DN while searching groups.</Trans> <Trans>Leave empty if users and groups are in the same DN.</Trans>
                   </div>
                 </div>
-                <div className="input text ad openldap">
+                <div className={`input text ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>User path</Trans></label>
                   <input id="user-path-input" type="text" name="userPath" value={this.state.userPath}
-                    onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("User Path")}
+                    onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("User path")}
                     disabled={this.hasAllInputDisabled()}/>
                   <div className="help-message"><Trans>User path is used in addition to base DN while searching users.</Trans></div>
                 </div>
                 {this.isOpenLdapChecked() &&
                 <div>
-                  <div className="input text openldap">
+                  <div className={`input text ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                     <label><Trans>Group object class</Trans></label>
                     <input id="group-object-class-input" type="text" name="groupObjectClass"
                       value={this.state.groupObjectClass} onChange={this.handleInputChange} className="required fluid"
@@ -861,7 +861,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                       <Trans>For Openldap only. Defines which group object to use.</Trans> (<Trans>Default</Trans>: posixGroup)
                     </div>
                   </div>
-                  <div className="input text openldap">
+                  <div className={`input text ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                     <label><Trans>User object class</Trans></label>
                     <input id="user-object-class-input" type="text" name="userObjectClass"
                       value={this.state.userObjectClass} onChange={this.handleInputChange} className="required fluid form-element"
@@ -869,7 +869,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                     <div className="help-message"><Trans>For Openldap only. Defines which user object to use.</Trans> (<Trans>Default</Trans>: inetOrgPerson)
                     </div>
                   </div>
-                  <div className="input text openldap">
+                  <div className={`input text openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                     <label><Trans>Use email prefix / suffix?</Trans></label>
                     <div className="input toggle-switch openldap form-element">
                       <input type="checkbox" className="toggle-switch-checkbox checkbox" name="useEmailPrefix"
@@ -885,16 +885,16 @@ class DisplayUserDirectoryAdministration extends React.Component {
                   </div>
                   {this.isUseEmailPrefixChecked() &&
                   <div className="singleline clearfix" id="use-email-prefix-suffix-options">
-                    <div className="input text first-field openldap">
+                    <div className={`input text first-field openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                       <label><Trans>Email prefix</Trans></label>
                       <input id="email-prefix-input" type="text" name="emailPrefix" checked={this.state.emailPrefix}
-                        onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("username")}
+                        onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("Username")}
                         disabled={this.hasAllInputDisabled()}/>
                       <div className="help-message">
                         <Trans>The attribute you would like to use for the first part of the email (usually username).</Trans>
                       </div>
                     </div>
-                    <div className="input text last-field openldap">
+                    <div className={`input text last-field openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                       <label><Trans>Email suffix</Trans></label>
                       <input id="email-suffix-input" type="text" name="emailSuffix" value={this.state.emailSuffix}
                         onChange={this.handleInputChange} className="required form-element"
@@ -919,7 +919,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                 </a>
               </h4>
               <div className="accordion-content">
-                <div className="select-wrapper input required ad openldap">
+                <div className={`select-wrapper input required ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Default admin</Trans></label>
                   <Select items={this.getUsersAllowedToBeDefaultAdmin()}
                     id="default-user-select"
@@ -932,7 +932,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                     <Trans>The default admin user is the user that will perform the operations for the the directory.</Trans>
                   </div>
                 </div>
-                <div className="select-wrapper input required ad openldap">
+                <div className={`select-wrapper input required ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Default group admin</Trans></label>
                   <Select items={this.getUsersAllowedToBeDefaultGroupAdmin()}
                     id="default-group-admin-user-select"
@@ -945,7 +945,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                     <Trans>The default group manager is the user that will be the group manager of newly created groups.</Trans>
                   </div>
                 </div>
-                <div className="input text ad openldap">
+                <div className={`input text ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Groups parent group</Trans></label>
                   <input id="groups-parent-group-input" type="text" name="groupsParentGroup"
                     value={this.state.groupsParentGroup} onChange={this.handleInputChange} className="fluid form-element" placeholder={this.translate("Group name")}
@@ -954,7 +954,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                     <Trans>Synchronize only the groups which are members of this group.</Trans>
                   </div>
                 </div>
-                <div className="input text ad openldap">
+                <div className={`input text ad openldap ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Users parent group</Trans></label>
                   <input id="users-parent-group-input" type="text" name="usersParentGroup"
                     value={this.state.usersParentGroup} onChange={this.handleInputChange} className="fluid form-element" placeholder={this.translate("Group name")}
@@ -964,7 +964,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                   </div>
                 </div>
                 {this.isActiveDirectoryChecked() &&
-                <div className="input text clearfix ad">
+                <div className={`input text clearfix ad ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label><Trans>Enabled users only</Trans></label>
                   <div className="input toggle-switch ad form-element">
                     <input type="checkbox" className="toggle-switch-checkbox checkbox" name="enabledUsersOnly"

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

@@ -5,7 +5,7 @@ import {mockUserDirectorySettings, mockUsers} from "./DisplayUserDirectoryAdmini
 
 
 export default {
-  title: 'Passbolt/Administration/DisplayUserDirectoryAdministration',
+  title: 'Passbolt Component/Administration/DisplayUserDirectoryAdministration',
   component: DisplayUserDirectoryAdministration
 };
 

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

@@ -299,7 +299,7 @@ class EditSubscriptionKey extends Component {
         className="edit-subscription-dialog">
         <form onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
-            <div className={`input textarea required ${this.state.keyError ? "error" : ""}`}>
+            <div className={`input textarea required ${this.state.keyError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="edit-tag-form-name"><Trans>Subscription key</Trans></label>
               <textarea id="edit-subscription-form-key" name="key" value={this.state.key}
                 onKeyUp={this.handleKeyInputKeyUp} onChange={this.handleInputChange}

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

@@ -17,7 +17,7 @@ import EditSubscriptionKey from "./EditSubscriptionKey";
 import {defaultProps} from "./EditSubscriptionKey.test.data";
 
 export default {
-  title: 'Passbolt/Administration/EditSubscriptionKey',
+  title: 'Passbolt Component/Administration/EditSubscriptionKey',
   component: EditSubscriptionKey
 };
 

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

@@ -218,8 +218,11 @@ class ManageAccountRecoveryAdministrationSettings extends React.Component {
    * @return {string}
    */
   formatDateTimeAgo(date) {
-    if (date === 'Never') {
-      return date;
+    if (date === null) {
+      return "n/a";
+    }
+    if (date === 'Infinity') {
+      return this.translate("Never");
     }
     const dateTime = DateTime.fromISO(date);
     const duration = dateTime.diffNow().toMillis();
@@ -248,7 +251,7 @@ class ManageAccountRecoveryAdministrationSettings extends React.Component {
     if (!user_ids) {
       return null;
     }
-    return user_ids.map((user, id) => <Fragment key={id}>{user.name}&lt;{user.email}&gt;<br/></Fragment>);
+    return user_ids.map((user, id) => <Fragment key={id}>{user.name} &lt;{user.email}&gt;<br/></Fragment>);
   }
 
   /**

package/src/react-extension/components/Administration/ManageAccountRecoveryAdministrationSettings/ManageAccountRecoveryAdministrationSettings.test.data.js

@@ -46,12 +46,23 @@ export function hasChangedPolicyProps(props = {}) {
       policyChanges: {
         policy: "mandatory",
         publicKey: "new-public-key"
-      }
+      },
+      getKeyInfo: () => defaultKeyInfo
     }
   };
   return defaultProps(Object.assign(_props, props));
 }
 
+const defaultKeyInfo = {
+  user_ids: [{name: "Test Test", email: "test@passbolt.com"}],
+  armored_key: "new-public-key",
+  fingerprint: "848E95CC7493129AD862583129B81CA8936023DD",
+  algorithm: "RSA",
+  length: "4096",
+  created: "2022-05-01T13:11:08+00:00",
+  expires: "2024-05-01T13:11:08+00:00",
+};
+
 /**
  * Disabled policy props.
  * @param {Object} props The props to override
@@ -63,7 +74,8 @@ export function disabledPolicyPropsWithOrganisationKey(props = {}) {
       policyChanges: {
         policy: "disabled",
         publicKey: "new-public-key"
-      }
+      },
+      getKeyInfo: () => defaultKeyInfo
     }
   };
   return defaultProps(Object.assign(_props, props));
@@ -80,7 +92,8 @@ export function mandatoryPolicyPropsWithOrganisationKey(props = {}) {
       policyChanges: {
         policy: "mandatory",
         publicKey: "new-public-key"
-      }
+      },
+      getKeyInfo: () => defaultKeyInfo
     }
   };
   return defaultProps(Object.assign(_props, props));
@@ -97,7 +110,8 @@ export function optInPolicyPropsWithOrganisationKey(props = {}) {
       policyChanges: {
         policy: "opt-in",
         publicKey: "new-public-key"
-      }
+      },
+      getKeyInfo: () => defaultKeyInfo
     }
   };
   return defaultProps(Object.assign(_props, props));
@@ -114,7 +128,8 @@ export function optOutPolicyPropsWithOrganisationKey(props = {}) {
       policyChanges: {
         policy: "opt-out",
         publicKey: "new-public-key"
-      }
+      },
+      getKeyInfo: () => defaultKeyInfo
     }
   };
   return defaultProps(Object.assign(_props, props));

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

@@ -22,7 +22,7 @@ import {
 } from "./ManageAccountRecoveryAdministrationSettings.test.data";
 
 export default {
-  title: 'Passbolt/Administration/ManageAccountRecoveryAdministrationSettings',
+  title: 'Passbolt Component/Administration/ManageAccountRecoveryAdministrationSettings',
   component: ManageAccountRecoveryAdministrationSettings
 };
 

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

@@ -368,16 +368,6 @@ class ProvideAccountRecoveryOrganizationKey extends React.Component {
    * @returns {JSX}
    */
   render() {
-    /*
-     * The parser can't find the translation for passwordStrength.label
-     * To fix that we can use it in comment
-     * this.translate("n/a")
-     * this.translate("very weak")
-     * this.translate("weak")
-     * this.translate("fair")
-     * this.translate("strong")
-     * this.translate("very strong")
-     */
     return (
       <DialogWrapper
         title={this.translate("Organization Recovery Key")}
@@ -391,7 +381,7 @@ class ProvideAccountRecoveryOrganizationKey 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='Paste the OpenPGP Private key here' required="required" autoComplete="off" autoFocus={true}/>
+                placeholder={this.translate('Paste the OpenPGP Private key here')} required="required" autoComplete="off" autoFocus={true}/>
             </div>
             <div className="input file">
               <input

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

@@ -19,7 +19,7 @@ import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 import UserSettings from "../../../../shared/lib/Settings/UserSettings";
 
 export default {
-  title: 'Passbolt/Administration/ProvideAccountRecoveryOrganizationKey',
+  title: 'Passbolt Component/Administration/ProvideAccountRecoveryOrganizationKey',
   component: ProvideAccountRecoveryOrganizationKey
 };
 

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

@@ -55,14 +55,6 @@ class DownloadOrganizationKey extends React.Component {
     this.props.onClose();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -70,7 +62,7 @@ class DownloadOrganizationKey extends React.Component {
   render() {
     return (
       <DialogWrapper
-        title={this.translate("Confirm Organization Recovery Key download")}
+        title={this.props.t("Confirm Organization Recovery Key download")}
         onClose={this.handleCloseClick}
         disabled={false}
         className="organization-recover-key-download-dialog">

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

@@ -21,7 +21,7 @@ import UserSettings from "../../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 
 export default {
-  title: 'Passbolt/Administration/DownloadOrganizationKey',
+  title: 'Passbolt Component/Administration/DownloadOrganizationKey',
   component: DownloadOrganizationKey
 };
 

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

@@ -15,6 +15,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import XRegExp from "xregexp";
+import debounce from "debounce-promise";
 import Icon from "../../../../shared/components/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
 import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
@@ -25,6 +26,9 @@ import {withAppContext} from "../../../contexts/AppContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import Password from "../../../../shared/components/Password/Password";
 import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
+import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
+import ExternalServiceUnavailableError from "../../../../shared/lib/Error/ExternalServiceUnavailableError";
+import ExternalServiceError from "../../../../shared/lib/Error/ExternalServiceError";
 
 /** Resource password max length */
 const RESOURCE_PASSWORD_MAX_LENGTH = 4096;
@@ -40,6 +44,7 @@ class GenerateOrganizationKey extends React.Component {
   constructor(props) {
     super(props);
     this.state = this.defaultState;
+    this.evaluatePassphraseIsInDictionaryDebounce = debounce(this.evaluatePassphraseIsInDictionary, 300);
     this.bindCallbacks();
     this.createInputRef();
   }
@@ -56,10 +61,13 @@ class GenerateOrganizationKey extends React.Component {
       emailError: "",
       algorithm: "RSA",
       keySize: 4096,
-      password: "",
-      passwordError: "",
-      passwordWarning: "",
-      hasAlreadyBeenValidated: false // True if the form has already been submitted once
+      passphrase: "",
+      passphraseError: "",
+      passphraseWarning: "",
+      passphraseEntropy: null,
+      hasAlreadyBeenValidated: false, // True if the form has already been submitted once
+      isPwned: false,
+      isPwnedServiceAvailable: true // True if the isPwned service can be reached
     };
   }
 
@@ -71,7 +79,7 @@ class GenerateOrganizationKey extends React.Component {
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleNameInputKeyUp = this.handleNameInputKeyUp.bind(this);
     this.handleEmailInputKeyUp = this.handleEmailInputKeyUp.bind(this);
-    this.handlePasswordInputKeyUp = this.handlePasswordInputKeyUp.bind(this);
+    this.handlePassphraseChange = this.handlePassphraseChange.bind(this);
   }
 
   /**
@@ -80,7 +88,7 @@ class GenerateOrganizationKey extends React.Component {
   createInputRef() {
     this.nameInputRef = React.createRef();
     this.emailInputRef = React.createRef();
-    this.passwordInputRef = React.createRef();
+    this.passphraseInputRef = React.createRef();
   }
 
   /**
@@ -143,36 +151,77 @@ class GenerateOrganizationKey extends React.Component {
   }
 
   /**
-   * Handle password input keyUp event.
+   * Handle passphrase input keyUp event.
+   * @param {ReactEvent} event The react event.
    */
-  handlePasswordInputKeyUp() {
+  async handlePassphraseChange(event) {
+    const passphrase = event.target.value;
+    const passphraseEntropy = passphrase?.length
+      ? SecretGenerator.entropy(passphrase)
+      : null;
+    this.setState({passphrase, passphraseEntropy});
+
     if (this.state.hasAlreadyBeenValidated) {
-      this.validatePasswordInput();
+      await this.validatePassphraseInput(passphrase, passphraseEntropy);
     } else {
-      const hasResourcePasswordMaxLength = this.state.password.length >= RESOURCE_PASSWORD_MAX_LENGTH;
+      const hasResourcePassphraseMaxLength = passphrase.length >= RESOURCE_PASSWORD_MAX_LENGTH;
       const warningMessage = this.translate("this is the maximum size for this field, make sure your data was not truncated");
-      const passwordWarning = hasResourcePasswordMaxLength ? warningMessage : '';
-      this.setState({passwordWarning});
+      const passphraseWarning = hasResourcePassphraseMaxLength ? warningMessage : '';
+      this.setState({passphraseWarning});
     }
   }
 
   /**
-   * Validate the password input.
-   * @return {Promise}
+   * Validate the passphrase.
+   * @param {string} passphrase the passphrase to validate
+   * @param {integer|null} passphraseEntropy the entropy of the given passphrase
+   * @return {Promise<void>}
+   */
+  async validatePassphraseInput(passphrase, passphraseEntropy) {
+    let passphraseError = null;
+    if (!passphrase?.length) {
+      passphraseError = this.translate("A passphrase is required.");
+    } else if (passphraseEntropy < FAIR_STRENGTH_ENTROPY) {
+      passphraseError = this.translate(`A strong passphrase is required. The minimum complexity must be 'fair'`);
+    } else {
+      this.evaluatePassphraseIsInDictionaryDebounce();
+    }
+
+    this.setState({passphraseError});
+  }
+
+  /**
+   * Evaluate if the passphrase is in dictionary
+   * @return {Promise<void>} Return true if the passphrase is part of a dictionary, false otherwise
    */
-  validatePasswordInput() {
-    const password = this.state.password;
-    let passwordError = null;
-    if (!password.length) {
-      passwordError = this.translate("A passphrase is required.");
+  async evaluatePassphraseIsInDictionary() {
+    if (!this.state.isPwnedServiceAvailable) {
+      return false;
     }
 
-    if (SecretGenerator.entropy(this.state.password) < FAIR_STRENGTH_ENTROPY) {
-      passwordError = this.translate(`A strong passphrase is required. The minimum complexity must be 'fair'`);
+    let isPwned;
+    try {
+      isPwned = await SecretComplexity.ispwned(this.state.passphrase);
+    } catch (error) {
+      // If the service is unavailable don't block the user journey.
+      if (error instanceof ExternalServiceUnavailableError || error instanceof ExternalServiceError) {
+        this.setState({
+          isPwnedServiceAvailable: false
+        });
+        return;
+      } else {
+        throw error;
+      }
     }
 
-    this.setState({passwordError});
-    return passwordError === null;
+    let passphraseError = this.state.passphraseError;
+    let passphraseEntropy = this.state.passphraseEntropy;
+    if (isPwned) {
+      passphraseError = this.translate("The passphrase should not be part of an exposed data breach.");
+      passphraseEntropy = 0;
+    }
+
+    this.setState({isPwned, passphraseEntropy, passphraseError});
   }
 
   /**
@@ -201,8 +250,8 @@ class GenerateOrganizationKey extends React.Component {
       this.nameInputRef.current.focus();
     } else if (this.state.emailError) {
       this.emailInputRef.current.focus();
-    } else if (this.state.passwordError) {
-      this.passwordInputRef.current.focus();
+    } else if (this.state.passphraseError) {
+      this.passphraseInputRef.current.focus();
     }
   }
 
@@ -241,19 +290,12 @@ class GenerateOrganizationKey extends React.Component {
    * @return {Promise<boolean>}
    */
   async validate() {
-    // Reset the form errors.
-    this.setState({
-      nameError: "",
-      emailError: "",
-      passwordError: "",
-    });
-
     // Validate the form inputs.
     const isNameValid = this.validateNameInput();
     const isEmailValid = this.validateEmailInput();
-    const isPasswordValid = this.validatePasswordInput();
+    const isPassphraseValid = this.validatePassphraseInput(this.state.passphrase, this.state.passphraseEntropy);
 
-    return isNameValid && isEmailValid && isPasswordValid;
+    return isNameValid && isEmailValid && isPassphraseValid;
   }
 
   async generateKey() {
@@ -262,7 +304,7 @@ class GenerateOrganizationKey extends React.Component {
       email: this.state.email,
       algorithm: this.state.algorithm,
       keySize: this.state.keySize,
-      passphrase: this.state.password,
+      passphrase: this.state.passphrase,
     };
 
     return await this.props.context.port.request("passbolt.account-recovery.generate-organization-key", generateGpgKeyDto);
@@ -296,7 +338,6 @@ class GenerateOrganizationKey extends React.Component {
    * @returns {JSX}
    */
   render() {
-    const passwordEntropy = this.state.password ? SecretGenerator.entropy(this.state.password) : null;
     return (
       <form onSubmit={this.handleFormSubmit} noValidate>
         <div className="form-content generate-organization-key">
@@ -341,25 +382,28 @@ class GenerateOrganizationKey extends React.Component {
               className="fluid" type="text"
               autoComplete="off" disabled={true} />
           </div>
-          <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""}`}>
+          <div className={`input-password-wrapper input required ${this.state.passphraseError ? "error" : ""}`}>
             <label htmlFor="generate-organization-key-form-password">
               <Trans>Organization key passphrase</Trans>
-              {this.state.passwordWarning &&
+              {this.state.passphraseWarning &&
                 <Icon name="exclamation"/>
               }
             </label>
             <Password id="generate-organization-key-form-password" name="password"
               placeholder={this.translate("Passphrase")} autoComplete="new-password" preview={true}
               securityToken={this.props.context.userSettings.getSecurityToken()}
-              onKeyUp={this.handlePasswordInputKeyUp} value={this.state.password}
-              onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}
-              inputRef={this.passwordInputRef}/>
-            <PasswordComplexity entropy={passwordEntropy} error={Boolean(this.state.passwordError)}/>
-            {this.state.passwordError &&
-                <div className="password error-message">{this.state.passwordError}</div>
+              value={this.state.passphrase}
+              onChange={this.handlePassphraseChange} disabled={this.hasAllInputDisabled()}
+              inputRef={this.passphraseInputRef}/>
+            <PasswordComplexity entropy={this.state.passphraseEntropy}/>
+            {this.state.passphraseError &&
+              <div className="password error-message">{this.state.passphraseError}</div>
+            }
+            {this.state.passphraseWarning &&
+              <div className="password warning-message"><strong><Trans>Warning:</Trans></strong> {this.state.passphraseWarning}</div>
             }
-            {this.state.passwordWarning &&
-                <div className="password warning-message"><strong><Trans>Warning:</Trans></strong> {this.state.passwordWarning}</div>
+            {!this.state.isPwnedServiceAvailable &&
+              <div className="password warning-message"><strong><Trans>Warning:</Trans></strong> <Trans>The pwnedpasswords service is unavailable, your passphrase might be part of an exposed data breach</Trans></div>
             }
           </div>
         </div>