passbolt-styleguide 3.6.0 → 3.7.0-alpha1

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

@@ -1,12 +1,12 @@
 /**
  * Passbolt ~ Open source password manager for teams
- * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * 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) 2020 Passbolt SA (https://www.passbolt.com)
+ * @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
@@ -14,12 +14,15 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import debounce from "debounce-promise";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import SecurityComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import Password from "../../../../shared/components/Password/Password";
 import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
 import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
+import ExternalServiceUnavailableError from "../../../../shared/lib/Error/ExternalServiceUnavailableError";
+import Tooltip from "../../Common/Tooltip/Tooltip";
+import ExternalServiceError from "../../../../shared/lib/Error/ExternalServiceError";
 
 /**
  * The component display variations.
@@ -41,6 +44,7 @@ class CreateGpgKey extends Component {
   constructor(props) {
     super(props);
     this.state = this.defaultState;
+    this.isPwndProcessingPromise = null;
     this.evaluatePassphraseIsInDictionaryDebounce = debounce(this.evaluatePassphraseIsInDictionary, 300);
     this.bindEventHandlers();
     this.createReferences();
@@ -54,7 +58,7 @@ class CreateGpgKey extends Component {
       passphrase: '', // The current passphrase
       passphraseEntropy: null,  // The current passphrase entropy
       actions: {
-        processing: false // True if one's processing passphrase
+        processing: false, // True if one's processing passphrase
       },
       hintClassNames: { // The class names for passphrase hints
         enoughLength: '',
@@ -62,7 +66,8 @@ class CreateGpgKey extends Component {
         alphanumeric: '',
         specialCharacters: '',
         notInDictionary: ''
-      }
+      },
+      isPwnedServiceAvailable: true // True if the isPwned service can be reached
     };
   }
 
@@ -80,7 +85,7 @@ class CreateGpgKey extends Component {
     const validation = {
       enoughLength: this.state.hintClassNames.enoughLength === "success",
       enoughEntropy: this.state.passphraseEntropy && this.state.passphraseEntropy !== 0,
-      notInDictionary: this.state.hintClassNames.notInDictionary === "success"
+      notInDictionary: this.state.hintClassNames.notInDictionary !== "error"
     };
     return Object.values(validation).every(value => value);
   }
@@ -104,7 +109,6 @@ class CreateGpgKey extends Component {
    */
   bindEventHandlers() {
     this.handlePassphraseChange = this.handlePassphraseChange.bind(this);
-    this.handleImportGpgKey = this.handleImportGpgKey.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
@@ -131,45 +135,20 @@ class CreateGpgKey extends Component {
 
   /**
    * Whenever the passphrase change
-   * @param event The input event
+   * @param {Event} event The input event
    */
   async handlePassphraseChange(event) {
     const passphrase = event.target.value;
-    this.setState({passphrase});
-    const passphraseEntropy = passphrase ? SecretGenerator.entropy(passphrase) : null;
-    const hintClassNames = await this.evaluatePassphraseHintClassNames(passphrase);
-    this.setState({passphraseEntropy, hintClassNames});
-    await this.checkPassphraseIsInDictionary(passphrase, hintClassNames);
-  }
-
-  /**
-   * check if the passphrase is in dictionary
-   * @returns {Promise<void>}
-   */
-  async checkPassphraseIsInDictionary() {
-    const hintClassName = condition => condition ? 'success' : 'error';
-
-    // debounce only to check the passphrase is in dictionary
-    const isPwned = await this.evaluatePassphraseIsInDictionaryDebounce(this.state.passphrase).catch(() => null);
-    const notInDictionary = isPwned !== null ? hintClassName(!isPwned) : null;
-
-    // if the passphrase is in dictionary, force the complexity to n/a
-    const passphraseEntropy = Boolean(this.state.passphrase) && isPwned ? 0 : this.state.passphraseEntropy;
+    let hintClassNames = {};
+    let passphraseEntropy = null;
 
-    this.setState({
-      hintClassNames: {
-        ...this.state.hintClassNames,
-        notInDictionary
-      },
-      passphraseEntropy
-    });
-  }
+    if (passphrase.length) {
+      passphraseEntropy = SecretGenerator.entropy(passphrase);
+      hintClassNames = this.evaluatePassphraseHintClassNames(passphrase);
+      this.isPwndProcessingPromise = this.evaluatePassphraseIsInDictionaryDebounce();
+    }
 
-  /**
-   * Whenever the user wants to import his gpg key manually
-   */
-  handleImportGpgKey() {
-    this.importGpgKey();
+    this.setState({passphrase, passphraseEntropy, hintClassNames});
   }
 
   /**
@@ -183,30 +162,67 @@ class CreateGpgKey extends Component {
 
   /**
    * Evaluate the passphrase hints classnames
-   * @param passphrase The passphrase to evaluate
+   * @param {string} passphrase The passphrase to evaluate
+   * @return {object}
    */
   evaluatePassphraseHintClassNames(passphrase) {
     const masks = SecurityComplexity.matchMasks(passphrase);
-    const hintClassName = condition => condition ? 'success' : 'error';
+    const hintClassName = condition => condition ? "success" : "warning";
     return {
-      enoughLength:  hintClassName(passphrase.length >= 8),
+      enoughLength:  passphrase.length >= 8 ? "success" : "error",
       uppercase: hintClassName(masks.uppercase),
       alphanumeric: hintClassName(masks.alpha && masks.digit),
       specialCharacters: hintClassName(masks.special),
-      notInDictionary: this.state.hintClassNames.notInDictionary || 'error'
+      notInDictionary: this.state.hintClassNames.notInDictionary
     };
   }
 
   /**
    * Evaluate if the passphrase is in dictionary
-   * @param passphrase The passphrase to evaluate
-   * @return {Promise<boolean>} Return true if the password is part of a dictionary, false otherwise
+   * @return {Promise<void>}
    */
-  async evaluatePassphraseIsInDictionary(passphrase) {
-    if (passphrase.length >= 8) {
-      return SecretComplexity.ispwned(passphrase);
+  async evaluatePassphraseIsInDictionary() {
+    let isPwnedServiceAvailable = this.state.isPwnedServiceAvailable;
+    if (!isPwnedServiceAvailable) {
+      return;
     }
-    return true;
+
+    const passphrase = this.state.passphrase;
+    let notInDictionaryHint = "success";
+
+    if (passphrase.length < 8) {
+      notInDictionaryHint = "error";
+    } else {
+      try {
+        const isPwned = await SecretComplexity.ispwned(passphrase);
+        notInDictionaryHint = isPwned ? "error" : "success";
+      } catch (error) {
+        // If the service is unavailable don't block the user journey.
+        if (error instanceof ExternalServiceUnavailableError || error instanceof ExternalServiceError) {
+          isPwnedServiceAvailable = false;
+          notInDictionaryHint = "unavailable";
+        } else {
+          throw error;
+        }
+      }
+    }
+
+    this.setState({
+      isPwnedServiceAvailable,
+      hintClassNames: {
+        ...this.state.hintClassNames,
+        notInDictionary: notInDictionaryHint
+      }
+    });
+  }
+
+  /**
+   * Await for isPwned service to finish its process and returns true if the current displayed passphrase is pwned.
+   * @return {Promise<boolean>}
+   */
+  async isCurrentPassphrasePwned() {
+    await this.isPwndProcessingPromise;
+    return this.state.hintClassNames.notInDictionary === "error";
   }
 
   /**
@@ -214,6 +230,11 @@ class CreateGpgKey extends Component {
    */
   async generateGpgKey() {
     await this.toggleProcessing();
+    const isPwned = await this.isCurrentPassphrasePwned();
+    if (isPwned) {
+      await this.toggleProcessing();
+      return;
+    }
     this.props.onComplete(this.state.passphrase);
   }
 
@@ -221,15 +242,11 @@ class CreateGpgKey extends Component {
    * Toggle the processing mode
    */
   async toggleProcessing() {
-    await this.setState({actions: {processing: !this.state.actions.processing}});
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
+    const actions = {
+      ...this.state.actions,
+      processing: !this.state.actions.processing
+    };
+    await this.setState({actions});
   }
 
   /**
@@ -279,7 +296,15 @@ class CreateGpgKey extends Component {
                 <Trans>It contains special characters (like / or * or %)</Trans>
               </li>
               <li className={this.state.hintClassNames.notInDictionary}>
+                {this.state.isPwnedServiceAvailable &&
                 <Trans>It is not part of an exposed data breach</Trans>
+                }
+                {!this.state.isPwnedServiceAvailable &&
+                <Tooltip message={<Trans>The pwnedpasswords service is unavailable, your passphrase might be part of an exposed data breach</Trans>}
+                  direction="bottom">
+                  <Trans>It is not part of an exposed data breach</Trans>
+                </Tooltip>
+                }
               </li>
             </ul>
           </div>
@@ -317,7 +342,6 @@ CreateGpgKey.propTypes = {
     CreateGpgKeyVariation.GENERATE_ACCOUNT_RECOVERY_GPG_KEY
   ]), // Defines how the form should be displayed and behaves
   onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
-  t: PropTypes.func.isRequired, // The translation function
 };
 
-export default withTranslation('common')(CreateGpgKey);
+export default CreateGpgKey;

package/src/react-extension/components/Authentication/CreateGpgKey/CreateGpgKey.test.js

@@ -161,7 +161,7 @@ describe("CreateGpgKey", () => {
       };
       await waitFor(() => expect(page.canGoToNextStep).toBeTruthy());
       await page.generateKey(inProgressFn);
-      expect(onComplete).toHaveBeenCalled();
+      await waitFor(() =>  expect(onComplete).toHaveBeenCalled());
       expect(generateResolve).toBeDefined();
     });
 
@@ -179,7 +179,7 @@ describe("CreateGpgKey", () => {
       await page.fill(veryStrongPassphrase);
       await waitFor(() => expect(page.canGoToNextStep).toBeTruthy());
       await page.generateKey(inProgressFn);
-      expect(onComplete).toHaveBeenCalled();
+      await waitFor(() =>  expect(onComplete).toHaveBeenCalled());
       expect(generateResolve).toBeDefined();
     });
   });

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

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

package/src/react-extension/components/Authentication/DisplayAlreadyLoggedInError/DisplayAlreadyLoggedInError.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";
 
 /**
  * The component display variations.
@@ -57,4 +57,4 @@ DisplayAlreadyLoggedInError.propTypes = {
   ]).isRequired, // Defines how the disalog should be displayed
   onLogoutButtonClick: PropTypes.func.isRequired, // The callback function that should trigger a log out of the current user
 };
-export default withTranslation('common')(DisplayAlreadyLoggedInError);
+export default DisplayAlreadyLoggedInError;

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

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

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

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 const DOWNLOAD_FIREFOX_URL = "https://www.mozilla.org/firefox/download/thanks/";
 const DOWNLOAD_CHROME_URL = "https://www.google.com/chrome/";
@@ -60,4 +60,4 @@ class DisplayBrowserNotSupported extends Component {
 DisplayBrowserNotSupported.propTypes = {
   context: PropTypes.any, // The application context
 };
-export default withAppContext(withTranslation('common')(DisplayBrowserNotSupported));
+export default withAppContext(DisplayBrowserNotSupported);

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

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

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

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import {withAppContext} from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayExpiredTokenError extends Component {
   /**
@@ -42,4 +42,4 @@ class DisplayExpiredTokenError extends Component {
 DisplayExpiredTokenError.propTypes = {
   context: PropTypes.any, // The application context
 };
-export default withAppContext(withTranslation('common')(DisplayExpiredTokenError));
+export default withAppContext(DisplayExpiredTokenError);

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

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

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

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import {withAppContext} from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayRequireInvitationError extends Component {
   /**
@@ -42,4 +42,4 @@ class DisplayRequireInvitationError extends Component {
 DisplayRequireInvitationError.propTypes = {
   context: PropTypes.any, // The application context
 };
-export default withAppContext(withTranslation('common')(DisplayRequireInvitationError));
+export default withAppContext(DisplayRequireInvitationError);

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

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

package/src/react-extension/components/Authentication/DisplayUnexpectedError/DisplayUnexpectedError.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 Icon from "../../../../shared/components/Icons/Icon";
 
 class DisplayUnexpectedError extends Component {
@@ -119,7 +119,7 @@ class DisplayUnexpectedError extends Component {
 }
 
 DisplayUnexpectedError.defaultProps = {
-  title: <Trans>Something went wrong.</Trans>,
+  title: <Trans>Something went wrong!</Trans>,
   message: <Trans>The operation failed with the following error:</Trans>,
 };
 
@@ -136,4 +136,4 @@ DisplayUnexpectedError.propTypes = {
   ]),
   error: PropTypes.any, // The error to display
 };
-export default withTranslation('common')(DisplayUnexpectedError);
+export default DisplayUnexpectedError;

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

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

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

@@ -12,7 +12,7 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import PropTypes from "prop-types";
 
 class DownloadRecoveryKit extends Component {
@@ -75,4 +75,4 @@ DownloadRecoveryKit.propTypes = {
   onComplete: PropTypes.func.isRequired, // Callback to trigger when the step is completed.
 };
 
-export default withTranslation('common')(DownloadRecoveryKit);
+export default DownloadRecoveryKit;

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

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

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

@@ -225,20 +225,20 @@ class EnterNameForm extends Component {
       <div className="enter-name">
         <h1><Trans>New here? Enter your name to get started.</Trans></h1>
         <form acceptCharset="utf-8" onSubmit={this.handleFormSubmit} noValidate>
-          <div className={`input text required ${this.state.firstnameError ? "error" : ""}`}>
-            <label htmlFor="firstname"><Trans>First Name</Trans></label>
+          <div className={`input text required ${this.state.firstnameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+            <label htmlFor="firstname"><Trans>First name</Trans></label>
             <input id="firstname-input" type="text" name="firstname" ref={this.firstnameRef} value={this.state.firstname}
               onKeyUp={this.handleFirstnameInputOnKeyUp} onChange={this.handleInputChange}
-              disabled={this.hasAllInputDisabled()} placeholder={this.translate("first name")} required="required"/>
+              disabled={this.hasAllInputDisabled()} placeholder={this.translate("First name")} required="required"/>
             {this.state.firstnameError &&
             <div className="error-message">{this.state.firstnameError}</div>
             }
           </div>
-          <div className={`input text required ${this.state.lastnameError ? "error" : ""}`}>
-            <label htmlFor="lastname"><Trans>Last Name</Trans></label>
+          <div className={`input text required ${this.state.lastnameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+            <label htmlFor="lastname"><Trans>Last name</Trans></label>
             <input id="lastname-input" type="text" name="lastname" ref={this.lastnameRef} value={this.state.lastname}
               onKeyUp={this.handleLastnameInputOnKeyUp} onChange={this.handleInputChange}
-              disabled={this.hasAllInputDisabled()} placeholder={this.translate("last name")} required="required"/>
+              disabled={this.hasAllInputDisabled()} placeholder={this.translate("Last name")} required="required"/>
             {this.state.lastnameError &&
             <div className="error-message">{this.state.lastnameError}</div>
             }

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

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

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

@@ -280,7 +280,7 @@ class EnterUsernameForm extends Component {
       <div className="enter-username">
         <h1><Trans>Please enter your email to continue.</Trans></h1>
         <form acceptCharset="utf-8" onSubmit={this.handleFormSubmit} noValidate>
-          <div className={`input text required ${this.state.usernameError ? "error" : ""}`}>
+          <div className={`input text required ${this.state.usernameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
             <label htmlFor="username"><Trans>Email</Trans></label>
             <input id="username-input" type="text" ref={this.usernameRef} name="username" value={this.state.username}
               onKeyUp={this.handleUsernameInputOnKeyUp} onChange={this.handleInputChange} placeholder={this.translate("you@organization.com")}

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

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

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

@@ -55,7 +55,8 @@ class ImportGpgKey extends Component {
         emptyPrivateKey: false, // True if the private key is empty
         invalidPrivateKey: false, // True if the private key is invalid
       },
-      errorMessage: '' // The error messag if required
+      errorMessage: '', // The error message if isRequired
+      keyHasAnExpirationDate: false, // True if the key being imported has an expiration date
     };
   }
 
@@ -95,6 +96,7 @@ class ImportGpgKey extends Component {
     this.handleChangePrivateKey = this.handleChangePrivateKey.bind(this);
     this.handleSelectPrivateKeyFile = this.handleSelectPrivateKeyFile.bind(this);
     this.handleSelectFile = this.handleSelectFile.bind(this);
+    this.checkExpiryDate = this.checkExpiryDate.bind(this);
   }
 
   /**
@@ -114,11 +116,26 @@ class ImportGpgKey extends Component {
     await this.validate();
 
     if (this.isValid) {
-      await this.toggleProcessing();
+      this.toggleProcessing();
       await this.save();
     }
   }
 
+  /**
+   * Check the expiration date of the given private key.
+   * If the key has an expiry date, it shows a warning to the user.
+   * @param {string} privateKey
+   */
+  async checkExpiryDate(privateKey) {
+    if (!this.props.hasKeyExpirationDate) {
+      return;
+    }
+
+    // we do not display the warning message if the key can't be read.
+    const keyHasAnExpirationDate = await this.props.hasKeyExpirationDate(privateKey).catch(() => false);
+    this.setState({keyHasAnExpirationDate});
+  }
+
   /**
    * Whenever the user changes the private key
    * @param event An input event
@@ -126,6 +143,8 @@ class ImportGpgKey extends Component {
   async handleChangePrivateKey(event) {
     const privateKey = event.target.value;
     this.setState({privateKey});
+    await this.checkExpiryDate(privateKey);
+
     if (this.state.hasBeenValidated) {
       await this.validate();
     }
@@ -152,6 +171,7 @@ class ImportGpgKey extends Component {
   async handleSelectPrivateKeyFile(event) {
     const [privateKeyFile] = event.target.files;
     const privateKey = await this.readPrivateKeyFile(privateKeyFile);
+    await this.checkExpiryDate(privateKey);
     this.setState({privateKey, selectedFile: privateKeyFile});
     if (this.state.hasBeenValidated) {
       await this.validate();
@@ -171,9 +191,9 @@ class ImportGpgKey extends Component {
    * @param {Error} error The error
    * @throw {Error} If an unexpected errors hits the component. Errors not of type: InvalidMasterPasswordError.
    */
-  async onSaveFailure(error) {
+  onSaveFailure(error) {
     // It can happen when some key validation went wrong.
-    await this.toggleProcessing();
+    this.toggleProcessing();
     if (error.name === "GpgKeyError") {
       this.setState({errors: {invalidPrivateKey: true}, errorMessage: error.message});
     } else {
@@ -224,8 +244,8 @@ class ImportGpgKey extends Component {
   /**
    * Toggle the processing mode
    */
-  async toggleProcessing() {
-    await this.setState({actions: {processing: !this.state.actions.processing}});
+  toggleProcessing() {
+    this.setState({actions: {processing: !this.state.actions.processing}});
   }
 
   /**
@@ -252,7 +272,7 @@ class ImportGpgKey extends Component {
         <form
           acceptCharset="utf-8"
           onSubmit={this.handleSubmit}>
-          <div className={`input textarea required openpgp-key ${this.hasErrors ? "error" : ""}`}>
+          <div className={`input textarea required openpgp-key ${this.hasErrors ? "error" : ""} ${!this.areActionsAllowed ? 'disabled' : ''}`}>
             <label htmlFor="private-key"><Trans>Private key</Trans></label>
             <textarea
               name="private-key"
@@ -275,6 +295,12 @@ class ImportGpgKey extends Component {
                 <span><Trans>Choose a file</Trans></span>
               </button>
             </div>
+            {this.state.keyHasAnExpirationDate &&
+              <div className="warning-message">
+                <Trans>The private key should not have an expiry date.</Trans>&nbsp;
+                <Trans>Once expired you will not be able to connect to your account.</Trans>
+              </div>
+            }
             {this.state.hasBeenValidated &&
               <>
                 {this.state.errors.emptyPrivateKey &&
@@ -323,5 +349,6 @@ ImportGpgKey.propTypes = {
   onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
   t: PropTypes.func, // The translation function
   validatePrivateGpgKey: PropTypes.func, // The callback to check the validity of the gpg key
+  hasKeyExpirationDate: PropTypes.func, // The callback to check if the key has an expiration date
 };
 export default withAppContext(withTranslation('common')(ImportGpgKey));

package/src/react-extension/components/Authentication/ImportGpgKey/ImportGpgKey.test.data.js

@@ -28,7 +28,8 @@ export function defaultProps(props) {
         request: jest.fn(async() => ({}))
       }
     },
-    validatePrivateGpgKey: jest.fn()
+    validatePrivateGpgKey: jest.fn(),
+    shouldShowExpiryDateWarning: jest.fn(() => Promise.resolve(false))
   };
   return Object.assign(defaultProps, props || {});
 }