passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -0,0 +1,67 @@
+/**
+ * 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 {LoginVariations} from "./Login";
+import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+
+/**
+ * Default props
+ * @params {Object} [props] Props to override
+ * @returns {Object}
+ */
+export function defaultProps(props = {}) {
+  const defaultProps = {
+    displayAs: LoginVariations.SIGN_IN,
+    userSettings: new UserSettings({
+      "user.settings.securityToken.code": "TST",
+      "user.settings.securityToken.color": "#f44336",
+      "user.settings.securityToken.textColor": "#ffffff",
+      "user.settings.trustedDomain": (new URL(window.location.href)).origin,
+      "user.id": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
+      "user.username": "admin@passbolt.com",
+      "user.firstname": "Admin",
+      "user.lastname": "User",
+      "user.settings.locale": "fr-FR"
+    }),
+    onSignIn: jest.fn(() => Promise.resolve()),
+    onCheckPassphrase: jest.fn(() => Promise.resolve()),
+    onSecondaryActionClick: jest.fn(() => Promise.resolve()),
+  };
+  return Object.assign(defaultProps, props);
+}
+
+/**
+ * Default props
+ * @params {Object} [props] Props to override
+ * @returns {Object}
+ */
+export function defaultPropsWithAccount(props = {}) {
+  const defaultProps = {
+    userSettings: null,
+    account: {
+      "domain": (new URL(window.location.href)).origin,
+      "user_id": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
+      "username": "admin@passbolt.com",
+      "first_name": "Admin",
+      "last_name": "User",
+      "locale": "fr-FR",
+      "security_token": {
+        "code": "HGA",
+        "color": "#8bc34a",
+        "textcolor": "#000000",
+      },
+    }
+  };
+  return Object.assign(defaultProps, props);
+}

package/src/react-extension/components/AuthenticationLogin/Login/Login.test.js

@@ -0,0 +1,157 @@
+/**
+ * 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.0.0
+ */
+
+/**
+ * Unit tests on Login in regard of specifications
+ */
+import each from "jest-each";
+import LoginPage from "./Login.test.page";
+import {LoginVariations} from "./Login";
+import {defaultProps} from "./Login.test.data";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("Login", () => {
+  each([
+    {displayAs: LoginVariations.SETUP}, // Login
+    {displayAs: LoginVariations.RECOVER}, // Account recovery check passphrase
+  ]).describe("Common behavior to all context", _props => {
+    it(`As AN I should be able to enter my secret key passphrase, scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps(_props);
+      const page = new LoginPage(props);
+
+      expect.assertions(2);
+      const expectedPassphrase = "some passphrase";
+      await page.fillPassphrase(expectedPassphrase);
+      expect(page.passphrase).toBe(expectedPassphrase);
+      await page.signIn();
+      expect(props.onSignIn).toHaveBeenCalledWith("some passphrase", false);
+    });
+
+    it(`As AN I should be able to remember my passphrase if the feature is disabled, scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps({..._props, canRememberMe: false});
+      const page = new LoginPage(props);
+
+      expect.assertions(2);
+      expect(page.canRememberMe).toBeFalsy();
+      const expectedPassphrase = "some passphrase";
+      await page.fillPassphrase(expectedPassphrase);
+      await page.signIn();
+      expect(props.onSignIn).toHaveBeenCalledWith("some passphrase", false);
+    });
+
+    it(`As AN I should be able to remember my passphrase if the feature is enabled, scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps({..._props, canRememberMe: true});
+      const page = new LoginPage(props);
+
+      expect.assertions(2);
+      expect(page.canRememberMe).toBeTruthy();
+      const expectedPassphrase = "some passphrase";
+      await page.fillPassphrase(expectedPassphrase);
+      await page.toggleRememberMe();
+      await page.signIn();
+      expect(props.onSignIn).toHaveBeenCalledWith("some passphrase", true);
+    });
+
+    it(`As AN I should be able to click on the secondary action, scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps({..._props});
+      const page = new LoginPage(props);
+
+      expect.assertions(1);
+      await page.clickSecondaryActionLink();
+      expect(props.onSecondaryActionClick).toHaveBeenCalled();
+    });
+
+    it(`As AN I cannot update the form fields while submitting the form, scenario: ${JSON.stringify(_props)}`, async() => {
+      let checkResolve = null;
+      const onSignIn = jest.fn(() => new Promise(resolve => checkResolve = resolve));
+      const props = defaultProps({..._props, onSignIn});
+      const page = new LoginPage(props);
+
+      expect.hasAssertions();
+      const inProgressFn = () => {
+        expect(page.canChange).toBeFalsy();
+        checkResolve();
+      };
+      await page.fillPassphrase('some passphrase');
+      await page.signIn(inProgressFn);
+      expect(props.onSignIn).toHaveBeenCalledWith("some passphrase", false);
+      expect(checkResolve).toBeDefined();
+    });
+
+    it(`As AN I should see a processing feedback while submitting the form, scenario: ${JSON.stringify(_props)}`, async() => {
+      let checkResolve = null;
+      const onSignIn = jest.fn(() => new Promise(resolve => checkResolve = resolve));
+      const props = defaultProps({..._props, onSignIn});
+      const page = new LoginPage(props);
+
+      expect.hasAssertions();
+      const inProgressFn = () => {
+        expect(page.isProcessing).toBeTruthy();
+        checkResolve();
+      };
+      await page.fillPassphrase('some passphrase');
+      await page.signIn(inProgressFn);
+      expect(props.onSignIn).toHaveBeenCalledWith("some passphrase", false);
+      expect(checkResolve).toBeDefined();
+    });
+
+    it(`As AN I should see an error if the passphrase is empty after submitting the form (first validation), scenario: ${JSON.stringify(_props)}`, async() => {
+      const props = defaultProps(_props);
+      const page = new LoginPage(props);
+
+      expect.assertions(1);
+      const emptyPassphrase = ' ';
+      await page.fillPassphrase(emptyPassphrase);
+      await page.signIn();
+      expect(page.hasEmptyPassphraseError).toBeTruthy();
+    });
+
+    it(`As AN I should see an error if the passphrase cannot decrypt the secret key, scenario: ${JSON.stringify(_props)}`, async() => {
+      const expectedError = {name: 'InvalidMasterPasswordError'};
+      const onCheckPassphrase = jest.fn(() => Promise.reject(expectedError));
+      const props = defaultProps({..._props, onCheckPassphrase});
+      const page = new LoginPage(props);
+
+      expect.assertions(1);
+      await page.fillPassphrase('some passphrase');
+      await page.signIn();
+      expect(page.hasInvalidPassphraseError).toBeTruthy();
+    });
+  });
+
+  describe('As AN on the Login workflow', () => {
+    it('As AN on the Login workflow I should be able to be prompted to enter a passphrase and sign in', async() => {
+      const props = defaultProps({displayAs: LoginVariations.SIGN_IN});
+      const page = new LoginPage(props);
+
+      expect.assertions(2);
+      expect(page.signInButton.textContent).toBe("Sign in");
+      expect(page.secondaryActionLink.textContent).toBe("Help, I lost my passphrase.");
+    });
+  });
+
+  describe('As AN on the Account Recovery workflow', () => {
+    it('As AN on the account recovery workflow I should be able to be prompted to enter a passphrase and complete the account recovery', async() => {
+      const props = defaultProps({displayAs: LoginVariations.ACCOUNT_RECOVERY});
+      const page = new LoginPage(props);
+
+      expect.assertions(2);
+      expect(page.signInButton.textContent).toBe("Complete recovery");
+      expect(page.secondaryActionLink.textContent).toBe("Help, I lost my passphrase.");
+    });
+  });
+});

package/src/react-extension/components/AuthenticationLogin/Login/Login.test.page.js

@@ -0,0 +1,155 @@
+/**
+ * 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 {fireEvent, render, waitFor} from "@testing-library/react";
+import {BrowserRouter as Router} from "react-router-dom";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import Login from "./Login";
+
+/**
+ * The Login component represented as a page
+ */
+export default class LoginPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <Router>
+          <Login {...props}/>
+        </Router>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the passphrase value
+   */
+  get passphrase() {
+    return this.passphraseInput.value;
+  }
+
+  /**
+   * REturns passphrase input
+   */
+  get passphraseInput() {
+    return  this._page.container.querySelector('#passphrase');
+  }
+
+  /**
+   * Returns the token code value
+   */
+  get rememberMe() {
+    return this.rememberMeInput.value;
+  }
+
+  /**
+   * Returns remember me input
+   */
+  get rememberMeInput() {
+    return  this._page.container.querySelector('#remember-me');
+  }
+
+  /**
+   * Return the can remember me element
+   * @returns {boolean}
+   */
+  get canRememberMe() {
+    return Boolean(this.rememberMeInput);
+  }
+
+  /**
+   * Returns the sign in button element
+   */
+  get signInButton() {
+    return this._page.container.querySelector('.button.primary');
+  }
+
+  /**
+   * Returns the secondary action link element
+   */
+  get secondaryActionLink() {
+    return this._page.container.querySelector('.form-actions a');
+  }
+
+  /**
+   * Returns true if the user can change something like the token code
+   */
+  get canChange() {
+    const cannotChangePassphrase = this.passphraseInput.hasAttribute('disabled');
+    const cannotChangeRememberMer = this.rememberMeInput?.hasAttribute('disabled');
+    return !cannotChangePassphrase && !cannotChangeRememberMer;
+  }
+
+  /**
+   * Returns true if one is processing
+   */
+  get isProcessing() {
+    return this.signInButton.getAttribute('class').indexOf('processing') > -1;
+  }
+
+  /**
+   * Returns true if the empty error message is displayed
+   */
+  get hasEmptyPassphraseError() {
+    return Boolean(this._page.container.querySelector('.empty-passphrase'));
+  }
+
+  /**
+   * Returns true if the invalid passphrase error is displayed
+   */
+  hasInvalidPassphraseError() {
+    return Boolean(this._page.container.querySelector('.invalid-passphrase'));
+  }
+
+  /**
+   * Toggle the remember me value
+   */
+  async toggleRememberMe() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.rememberMeInput, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Fill the passphrase with the given value
+   * @param passphrase A passphrase
+   */
+  async fillPassphrase(passphrase) {
+    fireEvent.change(this.passphraseInput, {target: {value: passphrase}});
+    await waitFor(() => {});
+  }
+
+  /**
+   * Sign in
+   * @param inProgressFn The function called while processing the operation
+   */
+  async signIn(inProgressFn = () => {}) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.signInButton, leftClick);
+    await waitFor(inProgressFn);
+  }
+
+  /**
+   * Click on the secondary action link.
+   */
+  async clickSecondaryActionLink(inProgressFn = () => {}) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.secondaryActionLink, leftClick);
+    await waitFor(inProgressFn);
+  }
+}

package/src/react-extension/components/AuthenticationLogin/Login/Login.test.stories.js

@@ -1,41 +1,46 @@
+/**
+ * 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
+ */
+
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
-import Login from "./Login";
-
+import Login, {LoginVariations} from "./Login";
+import {defaultProps, defaultPropsWithAccount} from "./Login.test.data";
 
 export default {
   title: 'Passbolt/AuthenticationLogin/Login',
   component: Login
 };
 
-const context = {
-  loginInfo: {
-    userSettings: {
-      getTrustedDomain: () => 'some url',
-      getSecurityTokenBackgroundColor: () => '#a85632',
-      getSecurityTokenTextColor: () => '#ffffff',
-      getSecurityTokenCode: () => "ABC"
-    }
-  }
-};
-
-
 const Template = args =>
-  <AuthenticationContext.Provider value={context}>
-    <div id="container" className="container page login">
-      <div className="content">
-        <div className="login-form">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <Login {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <Login {...args} {...routerProps}/>}/>
+        </MemoryRouter>
       </div>
     </div>
-  </AuthenticationContext.Provider>;
+  </div>;
 
-
-export const Initial = Template.bind({});
-Initial.parameters = {
+const defaultParameters = {
   css: "ext_authentication"
 };
+
+export const Initial = Template.bind({});
+Initial.args = defaultProps({displayAs: LoginVariations.SIGN_IN});
+Initial.parameters = defaultParameters;
+
+export const CompleteRecovery = Template.bind({});
+CompleteRecovery.args = defaultPropsWithAccount({displayAs: LoginVariations.ACCOUNT_RECOVERY});
+CompleteRecovery.parameters = defaultParameters;

package/src/react-extension/components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxFooter.js

@@ -0,0 +1,48 @@
+/**
+ * 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
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
+import {
+  AuthenticationLoginWorkflowStates,
+  withAuthenticationLoginContext
+} from "../../../contexts/Authentication/AuthenticationLoginContext";
+
+/**
+ * The component orchestrates the login authentication box footer.
+ */
+class OrchestrateLoginBoxFooter extends Component {
+  /**
+   * Render the component
+   */
+  render() {
+    switch (this.props.authenticationLoginContext.state) {
+      case AuthenticationLoginWorkflowStates.SIGN_IN:
+        return <div className="login-box-footer-actions">
+          <a onClick={this.props.authenticationLoginContext.handleSwitchAccount}>
+            <Trans>Or switch to another account.</Trans>
+          </a>
+        </div>;
+      default:
+        return <></>;
+    }
+  }
+}
+
+OrchestrateLoginBoxFooter.propTypes = {
+  context: PropTypes.any.isRequired, // The application context
+  authenticationLoginContext: PropTypes.any.isRequired, // The authentication login context
+};
+export default withAppContext(withAuthenticationLoginContext(withTranslation('common')(OrchestrateLoginBoxFooter)));

package/src/react-extension/components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxMain.js

@@ -0,0 +1,90 @@
+/**
+ * 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
+ */
+import React, {Component} from "react";
+import Login from "../Login/Login";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
+import {
+  AuthenticationLoginWorkflowStates,
+  withAuthenticationLoginContext
+} from "../../../contexts/Authentication/AuthenticationLoginContext";
+import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
+import AcceptLoginServerKeyChange from "../AcceptLoginServerKeyChange/AcceptLoginServerKeyChange";
+import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
+import RequestAccountRecovery, {RequestAccountRecoveryVariations} from "../../Authentication/RequestAccountRecovery/RequestAccountRecovery";
+import AskForAuthenticationHelp, {AskForAuthenticationHelpCredentialLostVariations} from "../../Authentication/AskForAuthenticationHelpCredentialLost/AskForAuthenticationHelpCredentialLost";
+import CheckMailBox from "../../Authentication/CheckMailBox/CheckMailBox";
+
+/**
+ * The component orchestrates the login authentication box main content.
+ */
+class OrchestrateLoginBoxMain extends Component {
+  /**
+   * Render the component
+   */
+  render() {
+    switch (this.props.authenticationLoginContext.state) {
+      case AuthenticationLoginWorkflowStates.SIGN_IN:
+        return <Login
+          canRememberMe={this.props.context.siteSettings.hasRememberMeUntilILogoutOption}
+          userSettings={this.props.context.userSettings}
+          onSignIn={this.props.authenticationLoginContext.signIn}
+          onCheckPassphrase={this.props.authenticationLoginContext.checkPassphrase}
+          onSecondaryActionClick={this.props.authenticationLoginContext.needHelpCredentialsLost}
+        />;
+      case AuthenticationLoginWorkflowStates.ACCEPT_NEW_SERVER_KEY:
+        return <AcceptLoginServerKeyChange
+          serverKey={this.props.authenticationLoginContext.serverKey}
+          onAccept={this.props.authenticationLoginContext.acceptNewServerKey}
+        />;
+      case AuthenticationLoginWorkflowStates.SIGNING_IN:
+        return <LoadingSpinner
+          title={<Trans>Signing in, please wait...</Trans>}
+        />;
+      case AuthenticationLoginWorkflowStates.SIGN_IN_ERROR:
+        return <DisplayUnexpectedError
+          title={<Trans>Sorry, you have not been signed in.</Trans>}
+          message={<Trans>Something went wrong, the sign in failed with the following error:</Trans>}
+          error={this.props.authenticationLoginContext.error}
+        />;
+      case AuthenticationLoginWorkflowStates.INITIATE_ACCOUNT_RECOVERY:
+        return <RequestAccountRecovery
+          displayAs={RequestAccountRecoveryVariations.SIGN_IN}
+          onPrimaryActionClick={this.props.authenticationLoginContext.requestHelpCredentialsLost.bind(this)}
+          onSecondaryActionClick={this.props.authenticationLoginContext.goToValidatePassphrase.bind(this)}
+        />;
+      case AuthenticationLoginWorkflowStates.HELP_CREDENTIALS_LOST:
+        return <AskForAuthenticationHelp
+          displayAs={AskForAuthenticationHelpCredentialLostVariations.SIGN_IN}
+          onPrimaryActionClick={this.props.authenticationLoginContext.requestHelpCredentialsLost.bind(this)}
+          onSecondaryActionClick={this.props.authenticationLoginContext.goToValidatePassphrase.bind(this)}
+        />;
+      case AuthenticationLoginWorkflowStates.CHECK_MAILBOX:
+        return <CheckMailBox/>;
+      case AuthenticationLoginWorkflowStates.UNEXPECTED_ERROR:
+        return <DisplayUnexpectedError
+          error={this.props.authenticationLoginContext.error}
+        />;
+      case AuthenticationLoginWorkflowStates.LOADING:
+        return <LoadingSpinner/>;
+    }
+  }
+}
+
+OrchestrateLoginBoxMain.propTypes = {
+  context: PropTypes.any.isRequired, // The application context
+  authenticationLoginContext: PropTypes.any.isRequired, // The authentication login context
+};
+export default withAppContext(withAuthenticationLoginContext(withTranslation('common')(OrchestrateLoginBoxMain)));

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.js

@@ -156,11 +156,20 @@ class InputPassphrase extends Component {
    * Handle invalid passphrase.
    */
   handleInvalidPassphrase() {
-    const attempt = this.state.attempt + 1;
+    const isPassphraseEmpty = this.state.passphrase === "";
+    const passphraseError = isPassphraseEmpty
+      ? this.translate("The passphrase should not be empty.")
+      : this.translate("This is not a valid passphrase.");
+
+    let attempt = this.state.attempt;
+    if (!isPassphraseEmpty) {
+      attempt++;
+    }
+
     this.setState({
       processing: false,
       attempt: attempt,
-      passphraseError: this.translate("This is not a valid passphrase.")
+      passphraseError: passphraseError
     });
     if (attempt < 3) {
       // Force the passphrase input focus. The autoFocus attribute only works during the first rendering.
@@ -322,7 +331,7 @@ class InputPassphrase extends Component {
                     type={this.state.isObfuscated ? "password" : "text"}
                     name="passphrase"
                     placeholder={this.translate("Passphrase")}
-                    required="required" ref={this.passphraseInputRef}
+                    ref={this.passphraseInputRef}
                     className={`required ${this.state.passphraseError ? "error" : ""}`}
                     value={this.state.passphrase}
                     autoFocus={true}

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.test.stories.js

@@ -11,7 +11,7 @@ export default {
 
 const context = {
   userSettings: {
-    getTrustedDomain: () => 'some url',
+    getTrustedDomain: () => (new URL(window.location.href)).origin,
     getSecurityTokenBackgroundColor: () => '#a85632',
     getSecurityTokenTextColor: () => '#ffffff',
     getSecurityTokenCode: () => "ABC",