passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayExpiredTokenError/DisplayExpiredTokenError.test.data.js

@@ -0,0 +1,36 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+/**
+ * Returns the default app context for the unit test
+ * @param {Object} appContext App context properties to override
+ * @returns {any}
+ */
+export function defaultAppContext(appContext = {}) {
+  const defaultAppContext = {
+    trustedDomain: "https://passbolt.local"
+  };
+  return Object.assign(defaultAppContext, appContext);
+}
+
+/**
+ * Default props
+ * @returns {Object} The props to override
+ */
+export function defaultProps(props = {}) {
+  const defaultProps = {
+    context: defaultAppContext(),
+  };
+  return Object.assign(defaultProps, props);
+}

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayExpiredTokenError/DisplayExpiredTokenError.test.js

@@ -0,0 +1,35 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import {defaultProps} from "./DisplayExpiredTokenError.test.data";
+import DisplayExpiredTokenErrorTestPage from "./DisplayExpiredTokenError.test.page";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("DisplayExpiredTokenError", () => {
+  let page, props;
+
+  beforeEach(() => {
+    props = defaultProps(); // The props to pass
+    page = new DisplayExpiredTokenErrorTestPage(props);
+  });
+
+  it('As AN I should be able to restart from scratch', async() => {
+    expect.assertions(1);
+    expect(page.restartFromScratchButton.getAttribute("href")).toEqual(`${props.context.trustedDomain}/users/recover`);
+  });
+});
+

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayExpiredTokenError/DisplayExpiredTokenError.test.page.js

@@ -0,0 +1,50 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import {fireEvent, render} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import DisplayExpiredTokenError from "./DisplayExpiredTokenError";
+
+/**
+ * The DisplayExpiredTokenError component represented as a page
+ */
+export default class DisplayExpiredTokenErrorTestPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <DisplayExpiredTokenError {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the restart from scratch button
+   */
+  get restartFromScratchButton() {
+    return this._page.container.querySelector('.button.primary');
+  }
+
+  /**
+   * restart from scratch
+   */
+  async restartFromScratch() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.restartFromScratchButton, leftClick);
+  }
+}

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

@@ -0,0 +1,41 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import DisplayExpiredTokenError from "./DisplayExpiredTokenError";
+import {defaultProps} from "./DisplayExpiredTokenError.test.data";
+
+export default {
+  title: 'Passbolt/AuthenticationAccountRecovery/DisplayExpiredTokenError',
+  component: DisplayExpiredTokenError
+};
+
+const Template = args =>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayExpiredTokenError {...args} {...routerProps}/>}/>
+        </MemoryRouter>
+      </div>
+    </div>
+  </div>;
+
+
+export const Initial = Template.bind({});
+Initial.args = defaultProps();
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayRestartFromScratchError/DisplayRestartFromScratchError.js

@@ -0,0 +1,42 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React, {Component} from "react";
+import {withAppContext} from "../../../contexts/AppContext";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+
+class DisplayRestartFromScratchError extends Component {
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="setup-error">
+        <h1><Trans>Sorry, wrong computer or browser...</Trans></h1>
+        <p><Trans>You need to finalize the account recovery process with the same computer you used for the account recovery request.</Trans><br/><br/>
+          <Trans>If you changed systems, or reinstalled passbolt web extension in the meantime, you will need to start the account recovery process from scratch.</Trans></p>
+        <div className="form-actions">
+          <a href={`${this.props.context.trustedDomain}/users/recover`} className="button primary big full-width" role="button"><Trans>Restart from scratch</Trans></a>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayRestartFromScratchError.propTypes = {
+  context: PropTypes.any, // The application context
+};
+export default withAppContext(withTranslation('common')(DisplayRestartFromScratchError));

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayRestartFromScratchError/DisplayRestartFromScratchError.test.js

@@ -0,0 +1,43 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+/**
+ * Unit tests on DisplayRestartFromScratchError in regard of specifications
+ */
+
+import DisplayRestartFromScratchPage from "./DisplayRestartFromScratchError.test.page";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("As AN I should see the account recovery restart from scratch", () => {
+  let page; // The page to test against
+
+  describe('As AN I should see a restart from scratch feedback if my request is valid but I\'m not completing the process on the right browser', () => {
+    beforeEach(() => {
+      page = new DisplayRestartFromScratchPage();
+    });
+
+    it('As AN I should see a restart from scratch feedback if my request is valid but I\'m not completing the process on the right browser', () => {
+      expect(page.exists()).toBeTruthy();
+      // title
+      expect(page.title).toBe("Sorry, wrong computer or browser...");
+      // message
+      expect(page.message).toBe('You need to finalize the account recovery process with the same computer you used for the account recovery request.If you changed systems, or reinstalled passbolt web extension in the meantime, you will need to start the account recovery process from scratch.');
+      // download
+      expect(page.linkToRestartFromScratch).toBe('Restart from scratch');
+    });
+  });
+});

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayRestartFromScratchError/DisplayRestartFromScratchError.test.page.js

@@ -0,0 +1,62 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import {render} from "@testing-library/react";
+import React from "react";
+import DisplayRestartFromScratchError from "./DisplayRestartFromScratchError";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The DisplayRestartFromScratchErrorPage component represented as a page
+ */
+export default class DisplayRestartFromScratchErrorPage {
+  /**
+   * Default constructor
+   */
+  constructor() {
+    this._page = render(
+      <MockTranslationProvider>
+        <DisplayRestartFromScratchError/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the title
+   */
+  get title() {
+    return this._page.container.querySelector('.setup-error h1').textContent;
+  }
+
+  /**
+   * Returns the message
+   */
+  get message() {
+    return this._page.container.querySelector('.setup-error p').textContent;
+  }
+
+  /**
+   * Restart from scratch link
+   */
+  get linkToRestartFromScratch() {
+    return this._page.container.querySelector('.setup-error .form-actions .button.primary.big').textContent;
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.title !== null;
+  }
+}

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayRestartFromScratchError/DisplayRestartFromScratchError.test.stories.js

@@ -0,0 +1,40 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import DisplayRequireInvitationError from "./DisplayRestartFromScratchError";
+import DisplayRestartFromScratchError from "./DisplayRestartFromScratchError";
+
+export default {
+  title: 'Passbolt/AuthenticationAccountRecovery/DisplayRestartFromScratchError',
+  component: DisplayRequireInvitationError
+};
+
+const Template = args =>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayRestartFromScratchError {...args} {...routerProps}/>}/>
+        </MemoryRouter>
+      </div>
+    </div>
+  </div>;
+
+
+export const Initial = Template.bind({});
+Initial.parameters = {
+  css: "ext_authentication"
+};

package/src/react-extension/components/AuthenticationAccountRecovery/OrchestrateAccountRecovery/InsertAccountRecoveryIframe.js

@@ -0,0 +1,64 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+
+class InsertAccountRecoveryIframe extends Component {
+  constructor(props) {
+    super(props);
+    this.createRefs();
+  }
+
+  /**
+   * ComponentDidMount
+   * Invoked immediately after component is inserted into the tree
+   * @return {void}
+   */
+  componentDidMount() {
+    this.loadIframe();
+  }
+
+  /**
+   * Create the iframe reference
+   */
+  createRefs() {
+    this.iframeRef = React.createRef();
+  }
+
+  /**
+   * Load the react app iframe
+   * @returns {void}
+   */
+  loadIframe() {
+    const iframeUrl = `${this.props.browserExtensionUrl}data/passbolt-iframe-account-recovery.html?passbolt=passbolt-iframe-account-recovery`;
+    this.iframeRef.current.contentWindow.location = iframeUrl;
+  }
+
+  /**
+   * Render the component
+   * @return {JSX}
+   */
+  render() {
+    return (
+      <iframe id="passbolt-iframe-account-recovery" ref={this.iframeRef} className="full-screen"/>
+    );
+  }
+}
+
+InsertAccountRecoveryIframe.propTypes = {
+  browserExtensionUrl: PropTypes.string, // The browser extension url
+};
+
+export default InsertAccountRecoveryIframe;

package/src/react-extension/components/AuthenticationAccountRecovery/OrchestrateAccountRecovery/OrchestrateAccountRecovery.js

@@ -0,0 +1,84 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
+import {
+  AuthenticationAccountRecoveryWorkflowStates,
+  withAuthenticationAccountRecoveryContext
+} from "../../../contexts/Authentication/AuthenticationAccountRecoveryContext";
+import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
+import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
+import Login, {LoginVariations} from "../../AuthenticationLogin/Login/Login";
+import RequestAccountRecovery, {RequestAccountRecoveryVariations} from "../../Authentication/RequestAccountRecovery/RequestAccountRecovery";
+import CheckMailBox from "../../Authentication/CheckMailBox/CheckMailBox";
+import DownloadRecoveryKit from "../../Authentication/DownloadRecoveryKit/DownloadRecoveryKit";
+
+/**
+ * The component orchestrates the recover authentication process
+ */
+class OrchestrateAccountRecovery extends Component {
+  /**
+   * Render the component
+   */
+  render() {
+    switch (this.props.authenticationAccountRecoveryContext.state) {
+      case AuthenticationAccountRecoveryWorkflowStates.VERIFY_PASSPHRASE:
+        return <Login
+          displayAs={LoginVariations.ACCOUNT_RECOVERY}
+          canRememberMe={this.props.context.siteSettings.hasRememberMeUntilILogoutOption}
+          account={this.props.authenticationAccountRecoveryContext.account}
+          onSignIn={this.props.authenticationAccountRecoveryContext.complete}
+          onCheckPassphrase={this.props.authenticationAccountRecoveryContext.verifyPassphrase}
+          onSecondaryActionClick={this.props.authenticationAccountRecoveryContext.needHelpCredentialsLost}
+        />;
+      case AuthenticationAccountRecoveryWorkflowStates.RECOVERING_ACCOUNT:
+        return <LoadingSpinner
+          title={<Trans>Recovering your account, please wait.</Trans>}
+        />;
+      case AuthenticationAccountRecoveryWorkflowStates.HELP_CREDENTIALS_LOST:
+        return <RequestAccountRecovery
+          displayAs={RequestAccountRecoveryVariations.ACCOUNT_RECOVERY}
+          onPrimaryActionClick={this.props.authenticationAccountRecoveryContext.requestHelpCredentialsLost}
+          onSecondaryActionClick={this.props.authenticationAccountRecoveryContext.goToValidatePassphrase}
+        />;
+      case AuthenticationAccountRecoveryWorkflowStates.DOWNLOAD_RECOVERY_KIT:
+        return <DownloadRecoveryKit
+          onDownload={this.props.authenticationAccountRecoveryContext.downloadRecoveryKit}
+          onComplete={this.props.authenticationAccountRecoveryContext.handleRecoveryKitDownloaded}
+        />;
+      case AuthenticationAccountRecoveryWorkflowStates.SIGNING_IN:
+        return <LoadingSpinner
+          title={<Trans>Signing in, please wait.</Trans>}
+        />;
+      case AuthenticationAccountRecoveryWorkflowStates.CHECK_MAILBOX:
+        return <CheckMailBox/>;
+      case AuthenticationAccountRecoveryWorkflowStates.UNEXPECTED_ERROR:
+        return <DisplayUnexpectedError
+          error={this.props.authenticationAccountRecoveryContext.error}
+        />;
+      case AuthenticationAccountRecoveryWorkflowStates.LOADING:
+        return <LoadingSpinner/>;
+    }
+  }
+}
+
+OrchestrateAccountRecovery.propTypes = {
+  context: PropTypes.any, // The application context
+  authenticationAccountRecoveryContext: PropTypes.any.isRequired, // The authentication account recovery context
+};
+
+export default withAppContext(withAuthenticationAccountRecoveryContext(withTranslation('common')(OrchestrateAccountRecovery)));

package/src/react-extension/components/AuthenticationAccountRecovery/OrchestrateApiAccountRecovery/OrchestrateApiAccountRecovery.js

@@ -0,0 +1,66 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {
+  ApiAccountRecoveryContextState,
+  withApiAccountRecoveryContext
+} from "../../../contexts/ApiAccountRecoveryContext";
+import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
+import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
+import DisplayRestartFromScratchError from "../DisplayRestartFromScratchError/DisplayRestartFromScratchError";
+import DisplayExpiredTokenError from "../DisplayExpiredTokenError/DisplayExpiredTokenError";
+
+/**
+ * The component orchestrates the api account recovery authentication workflow.
+ */
+class OrchestrateApiAccountRecovery extends Component {
+  /**
+   * Whenever the component is initialized
+   */
+  componentDidMount() {
+    this.initializeAccountRecovery();
+  }
+
+  /**
+   * Initialize the recover.
+   */
+  initializeAccountRecovery() {
+    setTimeout(() => this.props.apiAccountRecoveryContext.onInitializeAccountRecoveryRequested(), 1000);
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    switch (this.props.apiAccountRecoveryContext.state) {
+      case ApiAccountRecoveryContextState.RESTART_FROM_SCRATCH:
+        return <DisplayRestartFromScratchError/>;
+      case ApiAccountRecoveryContextState.TOKEN_EXPIRED_STATE:
+        return <DisplayExpiredTokenError/>;
+      case ApiAccountRecoveryContextState.ERROR_STATE:
+        return <DisplayUnexpectedError error={this.props.apiAccountRecoveryContext.error}/>;
+      default:
+        return <LoadingSpinner/>;
+    }
+  }
+}
+
+OrchestrateApiAccountRecovery.propTypes = {
+  apiAccountRecoveryContext: PropTypes.object, // The api account recovery context
+};
+
+export default withApiAccountRecoveryContext(OrchestrateApiAccountRecovery);

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.js

@@ -12,7 +12,6 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
 import {Trans, withTranslation} from "react-i18next";
 import PropTypes from "prop-types";
 
@@ -58,7 +57,7 @@ class AcceptLoginServerKeyChange extends Component {
    * @returns {Promise<void>}
    */
   async fetchServerKey() {
-    let {fingerprint} = await this.props.authenticationContext.onGetServerKeyRequested();
+    let {fingerprint} = await this.props.serverKey;
     fingerprint = fingerprint.replace(/.{4}/g, '$& ');
     fingerprint = <>{fingerprint.substr(0, 24)}<br/>{fingerprint.substr(25)}</>;
     this.setState({fingerprint});
@@ -110,7 +109,7 @@ class AcceptLoginServerKeyChange extends Component {
    * Accepts the new Gpg key
    */
   async accept() {
-    await this.props.authenticationContext.onAcceptLoginNewServerKeyRequested();
+    await this.props.onAccept();
   }
 
   /**
@@ -135,14 +134,6 @@ class AcceptLoginServerKeyChange extends Component {
     await this.setState({hasBeenValidated: true, errors: {}});
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
@@ -156,7 +147,7 @@ class AcceptLoginServerKeyChange extends Component {
         <form
           acceptCharset="utf-8"
           onSubmit={this.handleSubmit}>
-          <div className="input checkbox">
+          <div className={`input checkbox ${this.state.hasBeenValidated && this.state.errors.hasNotAccepted ? "error" : ""}`}>
             <input
               id="accept-new-key"
               type="checkbox"
@@ -166,15 +157,10 @@ class AcceptLoginServerKeyChange extends Component {
             <label htmlFor="accept-new-key">
               <Trans>Yes I checked and it is all fine.</Trans>
             </label>
-          </div>
-          {this.state.hasBeenValidated &&
-          <>
-            <br/>
-            {this.state.errors.hasNotAccepted &&
+            {this.state.hasBeenValidated && this.state.errors.hasNotAccepted &&
             <div className="has-not-accepted error-message"><Trans>You must accept the new server key</Trans></div>
             }
-          </>
-          }
+          </div>
           <div className="form-actions">
             <button
               type="submit"
@@ -191,8 +177,8 @@ class AcceptLoginServerKeyChange extends Component {
 }
 
 AcceptLoginServerKeyChange.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  t: PropTypes.func, // The translation function
+  serverKey: PropTypes.object.isRequired, // The server key
+  onAccept: PropTypes.func.isRequired, // Callback to trigger when the user accepts the new key
 };
 
-export default withAuthenticationContext(withTranslation('common')(AcceptLoginServerKeyChange));
+export default withTranslation('common')(AcceptLoginServerKeyChange);

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.test.data.js

@@ -0,0 +1,25 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 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)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.0.0
+ */
+
+/**
+ * Default props
+ * @returns {{}}
+ */
+export function defaultProps(props) {
+  const defaultProps = {
+    onAccept: jest.fn(() => Promise.resolve()),
+    serverKey: {"fingerprint": "0c1d1761110d1e33c9006d1a5b1b332ed06426d3"},
+  };
+  return Object.assign(defaultProps, props || {});
+}