passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -0,0 +1,55 @@
+/**
+ * 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 CheckMailBox from "./CheckAccountRecoveryEmail";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+
+/**
+ * The CheckAccountRecoveryEmail component represented as a page
+ */
+export default class CheckAccountRecoveryEmailTestPage {
+  /**
+   * Default constructor
+   */
+  constructor() {
+    this._page = render(
+      <MockTranslationProvider>
+        <CheckMailBox/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the title
+   */
+  get title() {
+    return this._page.container.querySelector('.email-sent-instructions h1').textContent;
+  }
+
+  /**
+   * Returns the message
+   */
+  get message() {
+    return this._page.container.querySelector('.email-sent-instructions p').textContent;
+  }
+
+  /**
+   * Returns true if the page object exists in the container
+   */
+  exists() {
+    return this.title !== null;
+  }
+}

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

@@ -0,0 +1,39 @@
+/**
+ * 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 CheckAccountRecoveryEmail from "./CheckAccountRecoveryEmail";
+
+export default {
+  title: 'Passbolt/Authentication/CheckAccountRecoveryEmail',
+  component: CheckAccountRecoveryEmail
+};
+
+const Template = args =>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <CheckAccountRecoveryEmail {...args} {...routerProps}/>}/>
+        </MemoryRouter>
+      </div>
+    </div>
+  </div>;
+
+export const Initial = Template.bind({});
+
+Initial.parameters = {
+  css: "ext_authentication"
+};

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

@@ -25,7 +25,7 @@ beforeEach(() => {
 describe("As AN I should see the check mail box", () => {
   let page; // The page to test against
 
-  describe('As AN I should be notified that an email has been sent to me with a new registration link', () => {
+  describe("As AN I should be notified that an email has been sent to me with a new registration link", () => {
     /**
      * Given a AN
      * Then I should see the check mail box message
@@ -35,12 +35,12 @@ describe("As AN I should see the check mail box", () => {
       page = new CheckMailBoxTestPage();
     });
 
-    it('As AN I should see that an email has been sent', () => {
+    it("As AN I should see that an email has been sent", () => {
       expect(page.exists()).toBeTruthy();
       // title
       expect(page.title).toBe("Check your mailbox!");
       // message
-      expect(page.message).toBe('We sent you a link to verify your email.Check your spam folder if you do not hear from us after a while.');
+      expect(page.message).toBe("We sent you a link to verify your email.Check your spam folder if you do not hear from us after a while.");
     });
   });
 });

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

@@ -1,4 +1,3 @@
-
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)

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

@@ -1,30 +1,36 @@
+/**
+ * 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         2.11.0
+ */
+
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import CheckMailBox from "./CheckMailBox";
 
-
 export default {
   title: 'Passbolt/Authentication/CheckMailBox',
   component: CheckMailBox
 };
 
-const context = {
-};
-
-
 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 => <CheckMailBox {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <div id="container" className="container page login">
+    <div className="content">
+      <div className="login-form">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <CheckMailBox {...args} {...routerProps}/>}/>
+        </MemoryRouter>
       </div>
     </div>
-  </AuthenticationContext.Provider>;
+  </div>;
 
 
 export const Initial = Template.bind({});

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

@@ -12,12 +12,18 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import NotifyError from "../../Common/Error/NotifyError/NotifyError";
-import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
 import PropTypes from "prop-types";
-import {withDialog} from "../../../contexts/DialogContext";
-import Icon from "../../Common/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../Common/Icons/Icon";
+
+/**
+ * The component display variations.
+ * @type {Object}
+ */
+export const CheckPassphraseVariations = {
+  SETUP: 'Setup',
+  RECOVER: 'Recover'
+};
 
 /**
  * This component checks the passphrase of an user gpg key
@@ -34,7 +40,6 @@ class CheckPassphrase extends Component {
     this.createReferences();
   }
 
-
   /**
    * Returns the default state
    */
@@ -97,7 +102,6 @@ class CheckPassphrase extends Component {
     this.handleChangePassphrase = this.handleChangePassphrase.bind(this);
     this.handleToggleRememberMe = this.handleToggleRememberMe.bind(this);
     this.handleToggleObfuscate = this.handleToggleObfuscate.bind(this);
-    this.onPassphraseLost = this.onPassphraseLost.bind(this);
   }
 
   /**
@@ -147,24 +151,18 @@ class CheckPassphrase extends Component {
     this.toggleObfuscate();
   }
 
-  /**
-   * Whenever the user needs help because he lost his passphrase
-   */
-  async onPassphraseLost() {
-    await this.props.authenticationContext.onPassphraseLost();
-  }
-
   /**
    * Check the private gpg key passphrase
    */
   async check() {
-    await this.props.authenticationContext.onCheckImportedGpgKeyPassphraseRequested(this.state.passphrase, this.state.rememberMe)
+    await this.props.onComplete(this.state.passphrase, this.state.rememberMe)
       .catch(this.onCheckFailure.bind(this));
   }
 
   /**
    * Whenever the gpg key import failed
-   * @param error The error
+   * @param {Error} error The error
+   * @throw {Error} If an unexpected errors hits the component. Errors not of type: InvalidMasterPasswordError.
    */
   onCheckFailure(error) {
     // Whenever the passphrase is invalid.
@@ -172,8 +170,7 @@ class CheckPassphrase extends Component {
     if (error.name === "InvalidMasterPasswordError") {
       this.setState({errors: {invalidPassphrase: true}});
     } else {
-      const ErrorDialogProps = {message: error.message};
-      this.props.dialogContext.open(NotifyError, ErrorDialogProps);
+      throw error;
     }
   }
 
@@ -212,7 +209,6 @@ class CheckPassphrase extends Component {
     await this.setState({actions: {processing: !this.state.actions.processing}});
   }
 
-
   /**
    * Toggle the obfuscate mode of the passphrase view
    */
@@ -297,7 +293,14 @@ class CheckPassphrase extends Component {
               disabled={this.isProcessing}>
               <Trans>Verify</Trans>
             </button>
-            {this.props.secondaryAction}
+            {this.props.onSecondaryActionClick &&
+            <a onClick={this.props.onSecondaryActionClick}>
+              {{
+                [CheckPassphraseVariations.SETUP]: <Trans>I lost my passphrase, generate a new private key.</Trans>,
+                [CheckPassphraseVariations.RECOVER]: <Trans>Help, I lost my passphrase.</Trans>,
+              }[this.props.displayAs]}
+            </a>
+            }
           </div>
         </form>
       </div>
@@ -305,11 +308,18 @@ class CheckPassphrase extends Component {
   }
 }
 
+CheckPassphrase.defaultProps = {
+  displayAs: CheckPassphraseVariations.SETUP,
+};
+
 CheckPassphrase.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
+  onComplete: PropTypes.func.isRequired, // The callback to trigger when the user wants to verify its passphrase
+  displayAs: PropTypes.PropTypes.oneOf([
+    CheckPassphraseVariations.SETUP,
+    CheckPassphraseVariations.RECOVER
+  ]), // Defines how the form should be displayed and behaves
   canRememberMe: PropTypes.bool, // True if the remember me flag must be displayed
-  dialogContext: PropTypes.any, // The dialog context
-  secondaryAction: PropTypes.any, // Secondary action to display
+  onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
   t: PropTypes.func, // The translation function
 };
-export default withAuthenticationContext(withDialog(withTranslation('common')(CheckPassphrase)));
+export default withTranslation('common')(CheckPassphrase);

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

@@ -1,41 +1,29 @@
-import MockPort from "../../../test/mock/MockPort";
-
-/**
- * Returns the default app context for the unit test
- * @param appContext An existing app context
- * @returns {any}
- */
-export function defaultAppContext(appContext) {
-  const defaultAppContext = {
-    port: new MockPort(),
-    onCheckImportedGpgKeyPassphraseRequested: jest.fn()
-  };
-  return Object.assign(defaultAppContext, appContext || {});
-}
-
 /**
- * Default props
- * @returns {{}}
+ * 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
  */
-export function defaultProps() {
-  return {
-    canRememberMe: true,
-    dialogContext: {
-      open: jest.fn()
-    }
-  };
-}
 
+import {CheckPassphraseVariations} from "./CheckPassphrase";
 
 /**
  * Default props
  * @returns {{}}
  */
-export function propsWithCannotRememberMe() {
-  return {
+export function defaultProps(props) {
+  const defaultProps = {
+    displayAs: CheckPassphraseVariations.SETUP,
     canRememberMe: false,
-    dialogContext: {
-      open: jest.fn()
-    }
+    onComplete: jest.fn(() => Promise.resolve()),
+    onSecondaryActionClick: jest.fn(() => Promise.resolve()),
   };
+  return Object.assign(defaultProps, props || {});
 }

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

@@ -1,103 +1,166 @@
 /**
- * Unit tests on CreateGpgKey in regard of specifications
+ * 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
  */
-import {defaultAppContext, defaultProps, propsWithCannotRememberMe} from "./CheckPassphrase.test.data";
-import NotifyError from "../../Common/Error/NotifyError/NotifyError";
-import CheckPassphrasePage from "./CheckPassphrase.test.page";
 
+/**
+ * Unit tests on CheckPassphrase in regard of specifications
+ */
+import {defaultProps} from "./CheckPassphrase.test.data";
+import CheckPassphrasePage from "./CheckPassphrase.test.page";
+import each from "jest-each";
+import {CheckPassphraseVariations} from "./CheckPassphrase";
 
 beforeEach(() => {
   jest.resetModules();
 });
 
 describe("Check passphrase", () => {
-  let page, // The page to test against
-    context; // The context
-  const props = defaultProps(); // The props to pass
-
-  describe('Check passphrase with Can Remember Me option', () => {
-    beforeEach(() => {
-      context = defaultAppContext(); // The context
-      page = new CheckPassphrasePage(context, props);
-    });
-
-    it('As AN I should be able to enter my secret key passphrase', async() => {
+  let page, // The page to test against.
+    props; // The component props
+
+  each([
+    {displayAs: CheckPassphraseVariations.SETUP, canRememberMe: true}, // Setup with remember me enabled
+    {displayAs: CheckPassphraseVariations.SETUP, canRememberMe: false}, // Setup with remember me disabled
+    {displayAs: CheckPassphraseVariations.RECOVER, canRememberMe: true}, // Recover with remember me enabled
+    {displayAs: CheckPassphraseVariations.RECOVER, canRememberMe: false}, // Recover with remember me disabled
+  ]).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() => {
+      props = defaultProps(_props);
+      page = new CheckPassphrasePage(props);
+
+      expect.assertions(1);
       const expectedPassphrase = "some passphrase";
       await page.fillPassphrase(expectedPassphrase);
       expect(page.passphrase).toBe(expectedPassphrase);
     });
 
-    it('As AN I should be able to ask to remember my passphrase', async() => {
-      expect(page.rememberMe).toBe("false");
-      await page.toggleRememberMe();
-      expect(page.rememberMe).toBe("true");
-    });
-
-
-    it('As AN I cannot update the form fields while submitting the form', async() => {
+    it(`As AN I cannot update the form fields while submitting the form , scenario: ${JSON.stringify(_props)}`, async() => {
       let checkResolve = null;
-      const requestMockImpl = jest.fn(() => new Promise(resolve => checkResolve = resolve));
-      jest.spyOn(context, 'onCheckImportedGpgKeyPassphraseRequested').mockImplementationOnce(requestMockImpl);
+      const onComplete = jest.fn(() => new Promise(resolve => checkResolve = resolve));
+      props = defaultProps({..._props, onComplete});
+      page = new CheckPassphrasePage(props);
+
+      expect.hasAssertions();
       const inProgressFn = () => {
         expect(page.canChange).toBeFalsy();
         checkResolve();
       };
       await page.fillPassphrase('some passphrase');
       await page.verify(inProgressFn);
-      expect(context.onCheckImportedGpgKeyPassphraseRequested).toHaveBeenCalledWith("some passphrase", false);
+      expect(props.onComplete).toHaveBeenCalledWith("some passphrase", false);
       expect(checkResolve).toBeDefined();
     });
 
-    it('As AN I should see a processing feedback while submitting the form', async() => {
+    it(`As AN I should see a processing feedback while submitting the form , scenario: ${JSON.stringify(_props)}`, async() => {
       let checkResolve = null;
-      const requestMockImpl = jest.fn(() => new Promise(resolve => checkResolve = resolve));
-      jest.spyOn(context, 'onCheckImportedGpgKeyPassphraseRequested').mockImplementationOnce(requestMockImpl);
+      const onComplete = jest.fn(() => new Promise(resolve => checkResolve = resolve));
+      props = defaultProps({..._props, onComplete});
+      page = new CheckPassphrasePage(props);
+
+      expect.hasAssertions();
       const inProgressFn = () => {
         expect(page.isProcessing).toBeTruthy();
         checkResolve();
       };
       await page.fillPassphrase('some passphrase');
-      await page.toggleRememberMe();
       await page.verify(inProgressFn);
-      expect(context.onCheckImportedGpgKeyPassphraseRequested).toHaveBeenCalledWith("some passphrase", true);
+      expect(props.onComplete).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)', async() => {
+    it(`As AN I should see an error if the passphrase is empty after submitting the form (first validation) , scenario: ${JSON.stringify(_props)}`, async() => {
+      props = defaultProps(_props);
+      page = new CheckPassphrasePage(props);
+
+      expect.assertions(1);
       const emptyPassphrase = ' ';
       await page.fillPassphrase(emptyPassphrase);
       await page.verify();
       expect(page.hasEmptyPassphraseError).toBeTruthy();
     });
 
-    it('As AN I should see an error if f the passphrase cannot decrypt the secret key', async() => {
+    it(`As AN I should see an error if f the passphrase cannot decrypt the secret key , scenario: ${JSON.stringify(_props)}`, async() => {
       const expectedError = {name: 'InvalidMasterPasswordError'};
-      jest.spyOn(context, 'onCheckImportedGpgKeyPassphraseRequested').mockImplementationOnce(() => Promise.reject(expectedError));
+      const onComplete = jest.fn(() => Promise.reject(expectedError));
+      props = defaultProps({..._props, onComplete});
+      page = new CheckPassphrasePage(props);
+
+      expect.assertions(1);
+      await page.fillPassphrase('some passphrase');
+      await page.verify();
+      expect(page.hasInvalidPassphraseError).toBeTruthy();
+    });
+  });
+
+  describe("Check Passphrase and remember me", () => {
+    it("As AN I should not see the remember me option if I enable it through the props", async() => {
+      expect.assertions(1);
+      props = defaultProps({canRememberMe: true});
+      page = new CheckPassphrasePage(props);
+      expect(page.canRememberMe).toBeTruthy();
+    });
+
+    it("As AN I should not see the remember me option if I disable it through the props", async() => {
+      expect.assertions(1);
+      props = defaultProps({canRememberMe: false});
+      page = new CheckPassphrasePage(props);
+      expect(page.canRememberMe).toBeFalsy();
+    });
+
+    it("As AN I should be able to ask to remember my passphrase", async() => {
+      props = defaultProps({canRememberMe: true});
+      page = new CheckPassphrasePage(props);
+
+      expect.assertions(3);
+      expect(page.rememberMe).toBe("false");
+      await page.toggleRememberMe();
+      expect(page.rememberMe).toBe("true");
       await page.fillPassphrase('some passphrase');
       await page.verify();
-      expect(page.hasInvalidPassphraseError);
+      expect(props.onComplete).toHaveBeenCalledWith("some passphrase", true);
     });
 
-    it('As AN I should see an error if the submission failed for an unexpected reason', async() => {
-      const expectedError = {message: 'Some error'};
-      jest.spyOn(context, 'onCheckImportedGpgKeyPassphraseRequested').mockImplementationOnce(() => Promise.reject(expectedError));
-      jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn());
+    it("As AN I should be able to ask to not remember my passphrase", async() => {
+      props = defaultProps({canRememberMe: true});
+      page = new CheckPassphrasePage(props);
+
+      expect.assertions(2);
+      expect(page.rememberMe).toBe("false");
       await page.fillPassphrase('some passphrase');
       await page.verify();
-      expect(props.dialogContext.open).toBeCalledWith(NotifyError, expectedError);
+      expect(props.onComplete).toHaveBeenCalledWith("some passphrase", false);
     });
   });
 
+  describe("Check passphrase and secondary action", () => {
+    it("As AN completing the setup I should be able to go to the generate key screen from the check passphrase state.", async() => {
+      props = defaultProps({displayAs: CheckPassphraseVariations.SETUP});
+      page = new CheckPassphrasePage(props);
 
-  describe('Check passphrase without Remember Me option', () => {
-    beforeEach(() => {
-      context = defaultAppContext(); // The context
-      page = new CheckPassphrasePage(context, propsWithCannotRememberMe());
+      expect.assertions(2);
+      expect(page.secondaryActionLink.textContent).toContain("I lost my passphrase, generate a new private key.");
+      await page.clickSecondaryActionLink();
+      expect(props.onSecondaryActionClick).toHaveBeenCalled();
     });
 
-    it('As AN I should not see the remember me option if flagged as false from site settings', () => {
-      expect(page.canRememberMe).toBeFalsy();
+    it("As AN completing the recover I should be able to request some help if I lost my credentials.", async() => {
+      props = defaultProps({displayAs: CheckPassphraseVariations.RECOVER});
+      page = new CheckPassphrasePage(props);
+
+      expect.assertions(2);
+      expect(page.secondaryActionLink.textContent).toContain("Help, I lost my passphrase.");
+      await page.clickSecondaryActionLink();
+      expect(props.onSecondaryActionClick).toHaveBeenCalled();
     });
   });
 });
-

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

@@ -1,6 +1,19 @@
+/**
+ * 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 {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
-import AuthenticationContextProvider from "../../../contexts/AuthenticationContext";
 import CheckPassphrase from "./CheckPassphrase";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
@@ -10,15 +23,12 @@ import MockTranslationProvider from "../../../test/mock/components/International
 export default class CheckPassphrasePage {
   /**
    * Default constructor
-   * @param context Context value
    * @param props Props to attach
    */
-  constructor(context, props) {
+  constructor(props) {
     this._page = render(
       <MockTranslationProvider>
-        <AuthenticationContextProvider value={context}>
-          <CheckPassphrase {...props}/>
-        </AuthenticationContextProvider>
+        <CheckPassphrase {...props}/>
       </MockTranslationProvider>
     );
   }
@@ -62,14 +72,20 @@ export default class CheckPassphrasePage {
     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;
+    const cannotChangeRememberMe = this.rememberMeInput?.hasAttribute('disabled');
+    return !cannotChangePassphrase && !cannotChangeRememberMe;
   }
 
   /**
@@ -95,7 +111,6 @@ export default class CheckPassphrasePage {
 
   /**
    * Toggle the remember me value
-   * @param color A token color
    */
   async toggleRememberMe() {
     const leftClick = {button: 0};
@@ -112,7 +127,6 @@ export default class CheckPassphrasePage {
     await waitFor(() => {});
   }
 
-
   /**
    * Verify the passphrase validity
    * @param inProgressFn The function called while saving
@@ -122,4 +136,13 @@ export default class CheckPassphrasePage {
     fireEvent.click(this.verifyButton, 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);
+  }
 }