passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/contexts/UserWorkspaceContext.js

@@ -98,7 +98,8 @@ class UserWorkspaceContextProvider extends React.Component {
       onUserSelected: {
         single: this.handleUserSelected.bind(this)// Whenever a single user has been selected
       },
-      onGroupToEdit: this.handleGroupToEdit.bind(this) // Whenever a group will be edited
+      onGroupToEdit: this.handleGroupToEdit.bind(this), // Whenever a group will be edited
+      isAttentionRequired: this.isAttentionRequired.bind(this), // Whenever a user needs attention
     };
   }
 
@@ -108,6 +109,7 @@ class UserWorkspaceContextProvider extends React.Component {
   initializeProperties() {
     this.users = null; // A cache of the last known list of users from the App context
     this.groups = []; // A cache of the last known list of groups from the App context
+    this.routeLocationKey = null; // The current route location key being resolved, it will be used to avoid double execution of the route change handler.
   }
 
   /**
@@ -175,9 +177,17 @@ class UserWorkspaceContextProvider extends React.Component {
    * @param previousLocation Previous router location
    */
   async handleRouteChange(previousLocation) {
-    const hasLocationChanged = this.props.location.key !== previousLocation.key;
+    const hasLocationChanged = this.props.location.key !== previousLocation.key; // Did the route change as per react-dom-router
+    /*
+     * Multiple componentDidUpdate can be triggered with the same route change.
+     * Avoid this by storing and checking the last route key change resolved by the component.
+     * @deprecated to removed with react-router-dom v6.1.0 @see https://github.com/supasate/connected-react-router/issues/129#issuecomment-446212160
+     */
+    const hasLocationChangedRouter5 = this.props.location.key !== this.routeLocationKey;
+    this.routeLocationKey = this.props.location.key;
     const isAppFirstLoad = this.state.filter.type === UserWorkspaceFilterTypes.NONE;
-    if (hasLocationChanged || isAppFirstLoad) {
+
+    if ((hasLocationChanged && hasLocationChangedRouter5) || isAppFirstLoad) {
       await this.handleGroupRouteChange();
       await this.handleUserRouteChange();
     }
@@ -214,10 +224,12 @@ class UserWorkspaceContextProvider extends React.Component {
    * Handle the user view route change
    */
   async handleUserRouteChange() {
-    const isUserLocation = this.props.location.pathname.includes('users');
-    const userId = this.props.match.params.selectedUserId;
+    const isUserLocation = this.props.location.pathname.includes('users')
+      || this.props.location.pathname.includes('account-recovery-requests/review');
+
     if (isUserLocation) {
-      if (userId) { // Case of password view
+      const userId = this.props.match.params.selectedUserId;
+      if (userId) { // Case of user view
         await this.handleSingleUserRouteChange(userId);
       } else { // Case of all and applied filters
         await this.handleAllUserRouteChange();
@@ -234,7 +246,7 @@ class UserWorkspaceContextProvider extends React.Component {
     if (hasUsers) {
       const user = this.users.find(user => user.id === userId);
       const hasNoneFilter = this.state.filter.type === UserWorkspaceFilterTypes.NONE;
-      if (hasNoneFilter) { // Case of password view by url bar inputting
+      if (hasNoneFilter) { // Case of user view by url bar inputting
         await this.search({type: UserWorkspaceFilterTypes.ALL});
       }
       // If the user does not exist, it should display an error
@@ -255,7 +267,7 @@ class UserWorkspaceContextProvider extends React.Component {
   async handleAllUserRouteChange() {
     const hasUsers = this.users !== null;
     if (hasUsers) {
-      const filter = (this.props.location.state && this.props.location.state.filter) || {type: UserWorkspaceFilterTypes.ALL};
+      const filter = this.props.location.state?.filter || {type: UserWorkspaceFilterTypes.ALL};
       await this.search(filter);
       await this.detailNothing();
     }
@@ -273,7 +285,7 @@ class UserWorkspaceContextProvider extends React.Component {
    */
   handleUnknownUser() {
     this.props.actionFeedbackContext.displayError("The user does not exist");
-    this.props.history.push({pathname: `/app/users`});
+    this.props.history.push({pathname: "/app/users"});
   }
 
   /**
@@ -281,7 +293,7 @@ class UserWorkspaceContextProvider extends React.Component {
    */
   handleUnknownGroup() {
     this.props.actionFeedbackContext.displayError("The group does not exist");
-    this.props.history.push({pathname: `/app/users`});
+    this.props.history.push({pathname: "/app/users"});
   }
 
   /**
@@ -335,6 +347,15 @@ class UserWorkspaceContextProvider extends React.Component {
     }
   }
 
+  /**
+   * Returns true if the given user requires attention from an admin.
+   * @param {User} user
+   * @returns {Boolean}
+   */
+  isAttentionRequired(user) {
+    return Boolean(user.pending_account_recovery_request);
+  }
+
   /**
    * Populate the context with initial data such as users and groups
    */
@@ -540,16 +561,20 @@ class UserWorkspaceContextProvider extends React.Component {
     const nameSorter = (u1, u2) => getUserFullName(u1).localeCompare(getUserFullName(u2));
     const roleNameSorter = (roleIdU1, roleIdU2) => this.getTranslatedRoleName(roleIdU1).localeCompare(this.getTranslatedRoleName(roleIdU2));
     const dateOrStringSorter = ['modified', 'last_logged_in'].includes(this.state.sorter.propertyName) ? dateSorter : stringSorter;
+    const attentionRequireSorter = (u1, u2) => (this.isAttentionRequired(u2) === this.isAttentionRequired(u1)) ? 0 : this.isAttentionRequired(u2) ? 1 : -1;
 
     const isNameProperty = this.state.sorter.propertyName === 'name';
     const isMfaProperty = this.state.sorter.propertyName === 'is_mfa_enabled';
     const isRoleNameProperty = this.state.sorter.propertyName === 'role.name';
+    const isAttentionRequiredProperty = this.state.sorter.propertyName === 'attentionRequired';
 
     let propertySorter;
     if (isNameProperty) {
       propertySorter = plainObjectSorter(nameSorter);
     } else if (isMfaProperty) {
       propertySorter = plainObjectSorter(mfaSorter);
+    } else if (isAttentionRequiredProperty) {
+      propertySorter = plainObjectSorter(attentionRequireSorter);
     } else if (isRoleNameProperty) {
       propertySorter = keySorter("role_id", roleNameSorter);
     } else {

package/src/react-extension/contexts/UserWorkspaceContext.test.data.js

@@ -25,6 +25,19 @@ export function defaultProps() {
   return {};
 }
 
+/**
+ * Default user workspace context
+ * @param {Object} data Context properties to override
+ * @return {Object}
+ */
+export function defaultUserWorkspaceContext(data = {}) {
+  const _default = {
+    onUserSelected: {
+      single: jest.fn()
+    }
+  };
+  return Object.assign(_default, data);
+}
 
 /**
  * Default users

package/src/react-extension/contexts/UserWorkspaceContext.test.page.js

@@ -109,10 +109,15 @@ export default class UserWorkspaceContextPage {
    * @ linkCssSelector The CSS link selector
    */
   async goToLink(linkCssSelector) {
+    const oldFilter = this.filter;
     const element = this._page.container.querySelector(linkCssSelector);
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
-    await waitFor(() => {});
+    await waitFor(() => {
+      if (oldFilter == this.filter) {
+        throw new Error("Context didn't change yet.");
+      }
+    });
   }
 
   /**

package/src/react-extension/contexts/WorkflowContext.js

@@ -0,0 +1,89 @@
+/**
+ * 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) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://startsource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import {v4 as uuidv4} from "uuid";
+
+/**
+ * The workflow context
+ */
+export const WorkflowContext = React.createContext({
+  workflows: [], // The current of displayed workflows
+  start: () => {}, // Start a workflow
+  stop: () => {} // Stop a workflow
+});
+
+/**
+ * The related context provider
+ */
+export default class WorkflowContextProvider extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    return {
+      workflows: [],
+      start: (Workflow, workflowProps) => {
+        const workflowKey = uuidv4();
+        this.setState({workflows: [...this.state.workflows, {key: workflowKey, Workflow, workflowProps}]});
+        return workflowKey;
+      },
+      stop: async workflowKey => await this.setState({workflows: this.state.workflows.filter(workflow => workflowKey !== workflow.key)})
+    };
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <WorkflowContext.Provider value={this.state}>
+        {this.props.children}
+      </WorkflowContext.Provider>
+    );
+  }
+}
+WorkflowContextProvider.displayName = 'WorkflowContextProvider';
+WorkflowContextProvider.propTypes = {
+  children: PropTypes.any
+};
+
+/**
+ * Workflow Context Consumer HOC
+ * @param WrappedComponent
+ */
+export function withWorkflow(WrappedComponent) {
+  return class WithWorkflow extends React.Component {
+    render() {
+      return (
+        <WorkflowContext.Consumer>
+          {
+            workflowContext => <WrappedComponent workflowContext={workflowContext} {...this.props} />
+          }
+        </WorkflowContext.Consumer>
+      );
+    }
+  };
+}

package/src/react-extension/contexts/WorkflowContext.test.data.js

@@ -0,0 +1,27 @@
+/**
+ * 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
+ */
+
+/**
+ * Default context
+ * @param {Object} context The override
+ * @returns {object}
+ */
+export function defaultWorkflowContext(context = {}) {
+  const defaultContext = {
+    workflows: [],
+    start: jest.fn(),
+    stop: jest.fn()
+  };
+  return Object.assign(defaultContext, context);
+}

package/src/react-extension/lib/Error/GpgKeyError.js

@@ -0,0 +1,22 @@
+/**
+ * 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
+ */
+
+class GpgKeyError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'GpgKeyError';
+  }
+}
+
+export default GpgKeyError;

package/src/react-extension/lib/Error/InvalidMasterPasswordError.js

@@ -0,0 +1,23 @@
+/**
+ * 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
+ */
+
+class InvalidMasterPasswordError extends Error {
+  constructor(message) {
+    message = message || 'This is not a valid passphrase';
+    super(message);
+    this.name = 'InvalidMasterPasswordError';
+  }
+}
+
+export default InvalidMasterPasswordError;

package/src/react-extension/lib/Error/ServerKeyChangedError.js

@@ -0,0 +1,22 @@
+/**
+ * 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
+ */
+
+class ServerKeyChangedError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'ServerKeyChangedError';
+  }
+}
+
+export default ServerKeyChangedError;

package/src/react-extension/test/fixture/Settings/siteSettings.js

@@ -24,6 +24,10 @@ export default {
     },
     "edition": "pro",
     "plugins": {
+      "accountRecovery": {
+        "version": "1.0.0",
+        "enabled": true,
+      },
       "import": {
         "version": "2.0.1",
         "config": {

package/src/react-extension/test/fixture/Settings/userSettings.js

@@ -1,5 +1,5 @@
 export default {
-  "user.settings.trustedDomain": "http://localhost:3001",
+  "user.settings.trustedDomain": (new URL(window.location.href)).origin,
   "user.firstname": "Ada",
   "user.id": "f848277c-5398-58f8-a82a-72397af2d450",
   "user.lastname": "Lovelace",

package/src/react-extension/test/mock/MockPort.js

@@ -39,11 +39,11 @@ class MockPort {
     let result;
 
     if (this.requestListeners[name]) {
-      const listenerArguments = Array.prototype.slice.call(arguments, 1);
+      const listenerArguments = Array.prototype.slice.call(arguments, 1, arguments.length);
       console.debug('listenerArguments', listenerArguments);
       listenerArguments.push(this.storage);
       console.debug('listenerArguments', listenerArguments);
-      result = await this.requestListeners[name].apply(null, listenerArguments);
+      result = await this.requestListeners[name](...listenerArguments);
       console.debug(`response: `, result);
     } else {
       console.debug(`The request ${name} has not been mocked`);

package/src/react-extension/test/mock/MockStorage.js

@@ -5,7 +5,6 @@ class LocalStorage {
   }
 
   get(keys) {
-    console.debug("STORAGE GET:", keys);
     return keys.reduce((accumulator, key) => {
       if (this.storage[key]) {
         accumulator[key] = this.storage[key];
@@ -15,7 +14,6 @@ class LocalStorage {
   }
 
   set(data) {
-    console.debug("STORAGE SET:", data);
     const storageChangeEventValue = {};
     Object.keys(data).forEach(key => {
       this.storage[key] = data[key];

package/src/react-extension/test/mock/components/Internationalisation/MockTranslationProvider.js

@@ -71,7 +71,8 @@ class MockTranslationProvider extends Component {
         defaultNS: 'common',
         keySeparator: false, // don't use the dot for separator of nested json object
         nsSeparator: false, // allowed ':' in key to avoid namespace separator
-        debug: false
+        debug: false,
+        compatibilityJSON: "v3"
       });
   }
 

package/src/react-extension/test/mock/components/React/mockSetState.js

@@ -0,0 +1,22 @@
+/**
+ * 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
+ */
+
+/**
+ * Mock the context provider setState in order to be able to access the provider state in the test.
+ * @param {React.Component} contextProvider The component to mock.
+ */
+export default contextProvider => {
+  const setStateMock = state => contextProvider.state = Object.assign(contextProvider.state, state);
+  jest.spyOn(contextProvider, 'setState').mockImplementation(setStateMock);
+};

package/src/react-quickaccess/ExtQuickAccess.js

@@ -67,6 +67,7 @@ class ExtQuickAccess extends React.Component {
     this.handlePassphraseDialogCompleted = this.handlePassphraseDialogCompleted.bind(this);
     this.loginSuccessCallback = this.loginSuccessCallback.bind(this);
     this.logoutSuccessCallback = this.logoutSuccessCallback.bind(this);
+    this.mfaRequiredCallback = this.mfaRequiredCallback.bind(this);
   }
 
   async componentDidMount() {
@@ -190,6 +191,11 @@ class ExtQuickAccess extends React.Component {
     this.setState({isAuthenticated: false});
   }
 
+  mfaRequiredCallback(url) {
+    browser.tabs.create({url});
+    window.close();
+  }
+
   handleKeyDown(event) {
     // Close the quickaccess popup when the user presses the "ESC" key.
     if (event.keyCode === 27) {
@@ -250,7 +256,10 @@ class ExtQuickAccess extends React.Component {
                   <PrepareResourceContextProvider>
                     <AnimatedSwitch>
                       <Route path="/data/quickaccess/login" render={() => (
-                        <LoginPage loginSuccessCallback={this.loginSuccessCallback} canRememberMe={this.canRememberMe}/>
+                        <LoginPage 
+                          loginSuccessCallback={this.loginSuccessCallback}
+                          mfaRequiredCallback={this.mfaRequiredCallback} 
+                          canRememberMe={this.canRememberMe}/>
                       )}/>
                       <PrivateRoute exact path="/data/quickaccess/resources/group" component={FilterResourcesByGroupPage}/>
                       <PrivateRoute path="/data/quickaccess/resources/group/:id" component={FilterResourcesByGroupPage}/>

package/src/react-quickaccess/components/FilterResourcesByGroupPage/FilterResourcesByGroupPage.js

@@ -230,7 +230,7 @@ class FilterResourcesByGroupPage extends React.Component {
 
   isReady() {
     return this.state.groups !== null
-      || this.state.resources != null;
+      || this.state.resources !== null;
   }
 
   render() {

package/src/react-quickaccess/components/FilterResourcesByGroupPage/FilterResourcesByGroupPage.test.stories.js

@@ -10,11 +10,10 @@ export default {
   component: FilterResourcesByGroupPage
 };
 
-const Template = ({context, initialEntries, ...args}) =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
-    <MemoryRouter initialEntries={initialEntries}>
-      <Route exact path="/" component={routerProps => <div className="container quickaccess"><FilterResourcesByGroupPage {...args} {...routerProps}/></div>}/>
-      <Route path="/:id" component={routerProps => <div className="container quickaccess"><FilterResourcesByGroupPage {...args} {...routerProps}/></div>}/>
+    <MemoryRouter initialEntries={['/']}>
+      <Route path={["/", "/:id"]} component={routerProps => <div className="container quickaccess"><FilterResourcesByGroupPage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -29,8 +28,7 @@ const parameters = {
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
-  context: defaultAppContext(),
-  initialEntries: ['/']
+  context: defaultAppContext()
 };
 InitialLoad.parameters = parameters;
 
@@ -41,8 +39,7 @@ const contextNoGroup = {
 };
 export const NoGroups = Template.bind({});
 NoGroups.args = {
-  context: defaultAppContext(contextNoGroup),
-  initialEntries: ['/']
+  context: defaultAppContext(contextNoGroup)
 };
 NoGroups.parameters = parameters;
 
@@ -53,7 +50,6 @@ const contextGroupsAndResources = {
 };
 export const GroupsResourcesMatched = Template.bind({});
 GroupsResourcesMatched.args = {
-  context: defaultAppContext(contextGroupsAndResources),
-  initialEntries: ['/']
+  context: defaultAppContext(contextGroupsAndResources)
 };
 GroupsResourcesMatched.parameters = parameters;

package/src/react-quickaccess/components/FilterResourcesByTagPage/FilterResourcesByTagPage.test.stories.js

@@ -10,11 +10,10 @@ export default {
   component: FilterResourcesByTagPage
 };
 
-const Template = ({context, initialEntries, ...args}) =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
-    <MemoryRouter initialEntries={initialEntries}>
-      <Route exact path="/" component={routerProps => <div className="container quickaccess"><FilterResourcesByTagPage {...args} {...routerProps}/></div>}/>
-      <Route path="/:id" component={routerProps => <div className="container quickaccess"><FilterResourcesByTagPage {...args} {...routerProps}/></div>}/>
+    <MemoryRouter initialEntries={['/']}>
+      <Route path={["/", "/:id"]} component={routerProps => <div className="container quickaccess"><FilterResourcesByTagPage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -29,8 +28,7 @@ const parameters = {
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
-  context: defaultAppContext(),
-  initialEntries: ['/']
+  context: defaultAppContext()
 };
 InitialLoad.parameters = parameters;
 
@@ -41,8 +39,7 @@ const contextNoTag = {
 };
 export const NoTags = Template.bind({});
 NoTags.args = {
-  context: defaultAppContext(contextNoTag),
-  initialEntries: ['/']
+  context: defaultAppContext(contextNoTag)
 };
 NoTags.parameters = parameters;
 
@@ -53,7 +50,6 @@ const contextResourcesTags = {
 };
 export const TagsResourcesMatched = Template.bind({});
 TagsResourcesMatched.args = {
-  context: defaultAppContext(contextResourcesTags),
-  initialEntries: ['/']
+  context: defaultAppContext(contextResourcesTags)
 };
 TagsResourcesMatched.parameters = parameters;

package/src/react-quickaccess/components/LoginPage/LoginPage.js

@@ -1,5 +1,3 @@
-
-import browser from "webextension-polyfill";
 import React from "react";
 import PropTypes from "prop-types";
 import {withRouter} from "react-router-dom";
@@ -67,8 +65,7 @@ class LoginPage extends React.Component {
       this.props.loginSuccessCallback();
       this.props.history.push("/data/quickaccess.html");
     } else {
-      browser.tabs.create({url: this.props.context.userSettings.getTrustedDomain()});
-      window.close();
+      this.props.mfaRequiredCallback(this.props.context.userSettings.getTrustedDomain());
     }
   }
 
@@ -182,6 +179,7 @@ LoginPage.propTypes = {
   context: PropTypes.any, // The application context
   canRememberMe: PropTypes.bool, // True if the remember me flag must be displayed
   loginSuccessCallback: PropTypes.func,
+  mfaRequiredCallback: PropTypes.func,
   // Match, location and history props are injected by the withRouter decoration call.
   match: PropTypes.object,
   location: PropTypes.object,
@@ -190,5 +188,3 @@ LoginPage.propTypes = {
 };
 
 export default withAppContext(withRouter(withTranslation('common')(LoginPage)));
-
-

package/src/react-quickaccess/components/LoginPage/LoginPage.test.stories.js

@@ -26,6 +26,7 @@ export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
   loginSuccessCallback: () => {},
+  mfaRequiredCallback: () => {},
   canRememberMe: true,
 };
 Initial.parameters = {

package/src/react-quickaccess/components/PassphraseDialog/PassphraseDialog.js

@@ -45,6 +45,11 @@ class PassphraseDialog extends React.Component {
     event.preventDefault();
     this.setState({processing: true});
 
+    if (this.state.passphrase === "") {
+      this.handlePassphraseError();
+      return;
+    }
+
     try {
       await this.props.context.port.request('passbolt.keyring.private.checkpassphrase', this.state.passphrase);
       this.handlePassphraseSuccess();
@@ -63,11 +68,20 @@ class PassphraseDialog extends React.Component {
   }
 
   handlePassphraseError() {
-    const attempt = this.state.attempt + 1;
+    const isPassphraseEmpty = this.state.passphrase === "";
+    const errorMessage = 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 is not a valid passphrase"
+      passphraseError: errorMessage
     });
     if (attempt < 3) {
       // Force the passphrase input focus. The autoFocus attribute only works during the first rendering.
@@ -154,7 +168,7 @@ class PassphraseDialog extends React.Component {
                 }
               </div>
               <div className="input checkbox small">
-                <input type="checkbox" name="rememberMe" id="remember-me" checked={this.state.rememberMe} onChange={this.handleInputChange} />
+                <input type="checkbox" name="rememberMe" id="remember-me" checked={this.state.rememberMe} onChange={this.handleInputChange} disabled={this.state.processing}/>
                 <label htmlFor="remember-me"><Trans>Remember until I log out.</Trans></label>
               </div>
             </div>