passbolt-styleguide 3.6.2 → 3.7.0-alpha1

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

@@ -24,7 +24,7 @@ import {
 
 
 export default {
-  title: 'Passbolt/Authentication/ChooseAccountRecoveryPreference',
+  title: 'Passbolt Component/Authentication/ChooseAccountRecoveryPreference',
   component: ChooseAccountRecoveryPreference
 };
 
@@ -41,20 +41,30 @@ const Template = args =>
     </div>
   </MockTranslationProvider>;
 
+const defaultParameters = {
+  css: "ext_authentication"
+};
+
 export const MandatoryWithLink = Template.bind({});
 MandatoryWithLink.args = mandatoryPolicyPropsWithImportedKey();
+MandatoryWithLink.parameters = defaultParameters;
 
 export const OptOutWithLink = Template.bind({});
 OptOutWithLink.args = optOutPolicyPropsWithImportedKey();
+OptOutWithLink.parameters = defaultParameters;
 
 export const OptInWithLink = Template.bind({});
 OptInWithLink.args = optInPolicyPropsWithImportedKey();
+OptInWithLink.parameters = defaultParameters;
 
 export const Mandatory = Template.bind({});
 Mandatory.args = mandatoryPolicyProps();
+Mandatory.parameters = defaultParameters;
 
 export const OptOut = Template.bind({});
 OptOut.args = optOutPolicyProps();
+OptOut.parameters = defaultParameters;
 
 export const OptIn = Template.bind({});
 OptIn.args = optInPolicyProps();
+OptIn.parameters = defaultParameters;

package/src/react-extension/components/Authentication/ChooseSecurityToken/ChooseSecurityToken.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 {CirclePicker} from "react-color";
 import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 
@@ -349,4 +349,4 @@ ChooseSecurityToken.propTypes = {
   onComplete: PropTypes.func.isRequired, // The callback function to call when the form is submitted
 };
 
-export default withTranslation('common')(ChooseSecurityToken);
+export default ChooseSecurityToken;

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

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

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

@@ -14,7 +14,7 @@
 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";
@@ -44,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();
@@ -57,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: '',
@@ -108,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);
   }
 
@@ -145,19 +145,12 @@ class CreateGpgKey extends Component {
     if (passphrase.length) {
       passphraseEntropy = SecretGenerator.entropy(passphrase);
       hintClassNames = this.evaluatePassphraseHintClassNames(passphrase);
-      this.evaluatePassphraseIsInDictionaryDebounce();
+      this.isPwndProcessingPromise = this.evaluatePassphraseIsInDictionaryDebounce();
     }
 
     this.setState({passphrase, passphraseEntropy, hintClassNames});
   }
 
-  /**
-   * Whenever the user wants to import his gpg key manually
-   */
-  handleImportGpgKey() {
-    this.importGpgKey();
-  }
-
   /**
    * Whenever the user submits the passphrase
    * @param event A form submit event
@@ -223,11 +216,25 @@ class CreateGpgKey extends Component {
     });
   }
 
+  /**
+   * 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";
+  }
+
   /**
    * Generate the Gpg key
    */
   async generateGpgKey() {
     await this.toggleProcessing();
+    const isPwned = await this.isCurrentPassphrasePwned();
+    if (isPwned) {
+      await this.toggleProcessing();
+      return;
+    }
     this.props.onComplete(this.state.passphrase);
   }
 
@@ -235,7 +242,11 @@ class CreateGpgKey extends Component {
    * Toggle the processing mode
    */
   async toggleProcessing() {
-    await this.setState({actions: {processing: !this.state.actions.processing}});
+    const actions = {
+      ...this.state.actions,
+      processing: !this.state.actions.processing
+    };
+    await this.setState({actions});
   }
 
   /**
@@ -331,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 || {});
 }

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

@@ -125,7 +125,7 @@ describe("ImportGpgKey", () => {
         validatePrivateGpgKey: jest.fn(() => { throw new Error("The private key should not be revoked."); })
       });
       props.context.port.request.mockImplementation(() => ({
-        expires: "Never",
+        expires: "Infinity",
         revoked: true
       }));
       const page = new ImportGpgKeyPage(props);
@@ -223,5 +223,24 @@ describe("ImportGpgKey", () => {
       await page.verifyKey();
       expect(page.hasInvalidPrivateKeyError).toBeFalsy();
     });
+
+    it("As AN I should see a warning if the private key has an expiration date", async() => {
+      const props = defaultProps({
+        validatePrivateGpgKey: jest.fn(() => { throw new Error("The private key should be a valid armored GPG key."); }),
+        hasKeyExpirationDate: jest.fn(() => Promise.resolve(true))
+      });
+      props.context.port.request.mockImplementation(() => ({
+        expires: "2100-01-01 00:00:00.000",
+        revoked: false
+      }));
+      const page = new ImportGpgKeyPage(props);
+
+      expect.assertions(3);
+      await page.fill('Some private key');
+      await page.verifyKey();
+      expect(page.hasInvalidPrivateKeyError).toBeTruthy();
+      expect(page.warningMessage).toContain("The private key should not have an expiry date.");
+      expect(page.warningMessage).toContain("Once expired you will not be able to connect to your account.");
+    });
   });
 });

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

@@ -109,6 +109,10 @@ export default class ImportGpgKeyPage {
     return !this.privateKeyInput.hasAttribute('disabled');
   }
 
+  get warningMessage() {
+    return this._page.container.querySelector('.warning-message').textContent;
+  }
+
   /**
    * Change the private key input value
    * @param privateKey The new passphrase

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

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

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

@@ -15,7 +15,7 @@ import React, {Component} from "react";
 import {BROWSER_NAMES, detectBrowserName} from "../../../../shared/lib/Browser/detectBrowserName";
 import {withAppContext} from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 const CHROME_STORE_BROWSER_EXTENSION_URL = "https://chrome.google.com/webstore/detail/passbolt-extension/didegimhafipceonhjepacocaffmoppf";
 const FIREFOX_STORE_BROWSER_EXTENSION_URL = "https://addons.mozilla.org/firefox/addon/passbolt";
@@ -127,4 +127,4 @@ class InstallExtension extends Component {
 InstallExtension.propTypes = {
   context: PropTypes.any, // The application context
 };
-export default withAppContext(withTranslation('common')(InstallExtension));
+export default withAppContext(InstallExtension);

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

@@ -16,7 +16,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import InstallExtension from "./InstallExtension";
 
 export default {
-  title: 'Passbolt/Authentication/InstallExtension',
+  title: 'Passbolt Component/Authentication/InstallExtension',
   component: InstallExtension
 };
 
@@ -55,6 +55,7 @@ Chrome.loaders = [
     });
   },
 ];
+Chrome.parameters = defaultParameters;
 
 export const Edge = Template.bind({});
 Edge.loaders = [
@@ -65,6 +66,7 @@ Edge.loaders = [
     });
   },
 ];
+Edge.parameters = defaultParameters;
 
 export const UnsupportedBrowser = Template.bind({});
 UnsupportedBrowser.loaders = [
@@ -75,3 +77,4 @@ UnsupportedBrowser.loaders = [
     });
   },
 ];
+UnsupportedBrowser.parameters = defaultParameters;