passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/components/UserDetails/DisplayUserDetailsGroups/DisplayUserDetailsGroups.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import MockPort from "../../../test/mock/MockPort";
 import DisplayUserDetailsGroups from "./DisplayUserDetailsGroups";
 
@@ -1362,17 +1361,15 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <div className="panel aside">
-        <div className="detailed-information">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <DisplayUserDetailsGroups {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <AppContext.Provider value={context}>
+    <div className="panel aside">
+      <div className="detailed-information">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUserDetailsGroups {...args} {...routerProps}/>}></Route>
+        </MemoryRouter>
       </div>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+    </div>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserDetails/DisplayUserDetailsInformation/DisplayUserDetailsInformation.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserDetailsInformation from "./DisplayUserDetailsInformation";
 import MockPort from "../../../test/mock/MockPort";
 
@@ -31,17 +30,15 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <div className="panel aside">
-        <div className="detailed-information">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <DisplayUserDetailsInformation {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <AppContext.Provider value={context}>
+    <div className="panel aside">
+      <div className="detailed-information">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUserDetailsInformation {...args} {...routerProps}/>}></Route>
+        </MemoryRouter>
       </div>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+    </div>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserDetails/DisplayUserDetailsPublicKey/DisplayUserDetailsPublicKey.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserDetailsPublicKey from "./DisplayUserDetailsPublicKey";
 
 
@@ -35,19 +34,16 @@ const context = {
 };
 
 
-
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <div className="panel aside">
-        <div className="detailed-information">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <DisplayUserDetailsPublicKey {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <AppContext.Provider value={context}>
+    <div className="panel aside">
+      <div className="detailed-information">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUserDetailsPublicKey {...args} {...routerProps}/>}></Route>
+        </MemoryRouter>
       </div>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+    </div>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserGroup/CreateUserGroup/CreateUserGroup.js

@@ -453,7 +453,7 @@ class CreateUserGroup extends Component {
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}
                 disabled={this.state.processing} ref={this.nameInputRef}/>
               {this.state.nameError &&
-              <div className="name error message">{this.state.nameError}</div>
+              <div className="name error-message">{this.state.nameError}</div>
               }
             </div>
 

package/src/react-extension/components/UserGroup/CreateUserGroup/CreateUserGroup.test.page.js

@@ -119,7 +119,7 @@ class CreateGroupPageObject {
    * Returns the name error mesage input element
    */
   get nameErrorMessage() {
-    return this._container.querySelector('.name.error.message');
+    return this._container.querySelector('.name.error-message');
   }
 
   /**
@@ -140,7 +140,7 @@ class CreateGroupPageObject {
    * Returns the error message element
    */
   get errorMessage() {
-    return this._container.querySelector('.message.error').textContent;
+    return this._container.querySelector('.error-message').textContent;
   }
 
   /**

package/src/react-extension/components/UserGroup/CreateUserGroup/CreateUserGroup.test.stories.js

@@ -4,7 +4,6 @@ import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import CreateUserGroup from "./CreateUserGroup";
 import {mockGpgKey, mockUsers} from "./CreateUserGroup.test.data";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
 
 export default {
@@ -33,13 +32,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <CreateUserGroup {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <CreateUserGroup {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserGroup/DeleteUserGroup/DeleteUserGroup.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DeleteUserGroup from "./DeleteUserGroup";
 
 
@@ -21,13 +20,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DeleteUserGroup {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DeleteUserGroup {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserGroup/DeleteUserGroup/DeleteUserGroupWithConflicts.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DeleteUserGroupWithConflicts from "./DeleteUserGroupWithConflicts";
 import {mockGroups, mockResources, mockUsers} from "./DeleteUserGroupWithConflicts.test.data";
 
@@ -29,13 +28,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DeleteUserGroupWithConflicts {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DeleteUserGroupWithConflicts {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserGroup/DisplayUserGroupDetailsInformation/DisplayUserGroupDetailsInformation.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayUserGroupDetailsInformation from "./DisplayUserGroupDetailsInformation";
 import {defaultAppContext} from "./DisplayUserGroupDetailsInformation.test.data";
 
@@ -18,17 +17,15 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <div className="panel aside">
-        <div className="detailed-information">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <DisplayUserGroupDetailsInformation {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <AppContext.Provider value={context}>
+    <div className="panel aside">
+      <div className="detailed-information">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUserGroupDetailsInformation {...args} {...routerProps}/>}></Route>
+        </MemoryRouter>
       </div>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+    </div>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserGroup/DisplayUserGroupDetailsMembers/DisplayUserGroupDetailsMembers.test.stories.js

@@ -2,7 +2,6 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {defaultAppContext} from "./DisplayUserGroupDetailsMembers.test.data";
 import DisplayUserGroupDetailsMembers from "./DisplayUserGroupDetailsMembers";
 
@@ -15,17 +14,15 @@ export default {
 const context = defaultAppContext();
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <div className="panel aside">
-        <div className="detailed-information">
-          <MemoryRouter initialEntries={['/']}>
-            <Route component={routerProps => <DisplayUserGroupDetailsMembers {...args} {...routerProps}/>}></Route>
-          </MemoryRouter>
-        </div>
+  <AppContext.Provider value={context}>
+    <div className="panel aside">
+      <div className="detailed-information">
+        <MemoryRouter initialEntries={['/']}>
+          <Route component={routerProps => <DisplayUserGroupDetailsMembers {...args} {...routerProps}/>}></Route>
+        </MemoryRouter>
       </div>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+    </div>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroup.js

@@ -199,6 +199,14 @@ class EditUserGroup extends Component {
     return !this.isProcessing;
   }
 
+  /**
+   * Is the logged in user admin
+   * @returns {boolean}
+   */
+  isLoggedInUserAdmin() {
+    return this.props.context.loggedInUser && this.props.context.loggedInUser.role.name === 'admin';
+  }
+
   /**
    * Returns true if there are some changes on the group members
    * @type {boolean}
@@ -694,14 +702,14 @@ class EditUserGroup extends Component {
                   type="text"
                   placeholder={this.translate("group name")}
                   onChange={this.handleNameChange}
-                  disabled={!this.areActionsAllowed}/>
+                  disabled={!this.areActionsAllowed || !this.isLoggedInUserAdmin()}/>
                 {this.hasErrors("name", "empty") &&
-                <div className="name error message">
+                <div className="name error-message">
                   <Trans>A name is required.</Trans>
                 </div>
                 }
                 {this.hasErrors("name", "alreadyExists") &&
-                <div className="name error message">
+                <div className="name error-message">
                   <Trans>The group name already exists.</Trans>
                 </div>
                 }

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroup.test.data.js

@@ -74,6 +74,13 @@ export function defaultProps() {
 export const mockUsers = [{
   "id": "8e3874ae-4b40-590b-968a-418f704b9d9a",
   "role_id": "a58de6d3-f52c-5080-b79b-a601a647ac85",
+  "role": {
+    "created": "2012-07-04T13:39:25+00:00",
+    "description": "Logged in user",
+    "id": "a58de6d3-f52c-5080-b79b-a601a647ac85",
+    "modified": "2012-07-04T13:39:25+00:00",
+    "name": "admin"
+  },
   "username": "carol@passbolt.com",
   "active": true,
   "deleted": false,

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroup.test.page.js

@@ -65,7 +65,7 @@ export default class EditUserGroupTestPage {
    * Returns the group name error message if exists
    */
   get groupNameErrorMessage() {
-    return this._page.container.querySelector('.name.error.message').textContent;
+    return this._page.container.querySelector('.name.error-message').textContent;
   }
 
   get hasNoManager() {

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroup.test.stories.js

@@ -3,7 +3,6 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import {defaultProps, mockGpgKey, mockUsers} from "./EditUserGroup.test.data";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import EditUserGroup from "./EditUserGroup";
 
 
@@ -27,19 +26,24 @@ const context = {
       user_id: "640ebc06-5ec1-5322-a1ae-6120ed2f3a74",
       first_name: "Carol",
       last_name: "Shaw"
+    },
+    role: {
+      created: "2012-07-04T13:39:25+00:00",
+      description: "Logged in user",
+      id: "a58de6d3-f52c-5080-b79b-a601a647ac85",
+      modified: "2012-07-04T13:39:25+00:00",
+      name: "admin"
     }
   }
 };
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <EditUserGroup {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <EditUserGroup {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/ConfirmPassphrase.js

@@ -21,6 +21,7 @@ import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withDialog} from "../../../contexts/DialogContext";
 import Icon from "../../Common/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 
 /**
  * This component displays the user confirm passphrase information
@@ -46,6 +47,7 @@ class ConfirmPassphrase extends React.Component {
       passphrase: "", // The passphrase input
       passphraseError: null, // The passphrase error input
       isObfuscated: true, // True if the passphrase should not be visible
+      hasPassphraseFocus: false, // The password input has focus
     };
   }
 
@@ -55,6 +57,8 @@ class ConfirmPassphrase extends React.Component {
   bindCallbacks() {
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleToggleObfuscate = this.handleToggleObfuscate.bind(this);
+    this.handleFocusPassphrase = this.handleFocusPassphrase.bind(this);
+    this.handleBlurPassphrase = this.handleBlurPassphrase.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
   }
@@ -99,6 +103,48 @@ class ConfirmPassphrase extends React.Component {
     this.setState({isObfuscated: !this.state.isObfuscated});
   }
 
+  /**
+   * Returns the security token code of the suer
+   */
+  get securityTokenCode() {
+    return this.props.context.userSettings.getSecurityTokenCode();
+  }
+
+  /**
+   * Returns the style of the security token (color and text color)
+   */
+  get securityTokenStyle() {
+    const {userSettings} = this.props.context;
+    const inverseStyle =  {background: userSettings.getSecurityTokenTextColor(), color: userSettings.getSecurityTokenBackgroundColor()};
+    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    return this.state.hasPassphraseFocus ? inverseStyle : fullStyle;
+  }
+
+  /**
+   * Get the passphrase input style.
+   * @return {Object}
+   */
+  get passphraseInputStyle() {
+    const {userSettings} = this.props.context;
+    const emptyStyle =  {background: "", color: ""};
+    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    return this.state.hasPassphraseFocus ? fullStyle : emptyStyle;
+  }
+
+  /**
+   * Whenever the user focus on the passphrase input
+   */
+  handleFocusPassphrase() {
+    this.setState({hasPassphraseFocus: true});
+  }
+
+  /**
+   * Whenever the user blurs on the passphrase input
+   */
+  handleBlurPassphrase() {
+    this.setState({hasPassphraseFocus: false});
+  }
+
   /**
    * Whenever the user submits the passphrase
    * @param event A form submit event
@@ -149,10 +195,7 @@ class ConfirmPassphrase extends React.Component {
    */
   IsValidPassphrase() {
     const passphrase = this.state.passphrase;
-    if (passphrase.trim() === '') {
-      return false;
-    }
-    return true;
+    return passphrase.trim() !== '';
   }
 
   /**
@@ -182,43 +225,70 @@ class ConfirmPassphrase extends React.Component {
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
         <div className="row">
-          <div className="col6">
+          <div className="col7">
             <form className="enter-passphrase" onSubmit={this.handleSubmit}>
               <h3><Trans>Please enter your passphrase to continue</Trans></h3>
               <div className="form-content">
                 <div className={`input text password required ${this.state.passphraseError ? "error" : ""}`}>
                   <label htmlFor="passphrase-input"><Trans>Passphrase</Trans></label>
-                  <input id="passphrase-input" type={`${this.state.isObfuscated ? "password" : "text"}`} name="passphrase" placeholder={this.translate('Passphrase')} required="required"
-                    ref={this.passphraseInputRef} className={`required ${this.state.passphraseError ? "error" : ""}`} autoFocus={true}
-                    value={this.state.passphrase} onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()} />
+                  <input
+                    id="passphrase-input"
+                    type={`${this.state.isObfuscated ? "password" : "text"}`}
+                    name="passphrase" placeholder={this.translate('Passphrase')}
+                    required="required"
+                    ref={this.passphraseInputRef}
+                    className={`required ${this.state.passphraseError ? "error" : ""}`}
+                    autoFocus={true}
+                    value={this.state.passphrase}
+                    style={this.passphraseInputStyle}
+                    onChange={this.handleInputChange}
+                    onFocus={this.handleFocusPassphrase}
+                    onBlur={this.handleBlurPassphrase}
+                    disabled={this.hasAllInputDisabled()}
+                    autoComplete="off"
+                  />
                   <a
                     className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
                     role="button"
                     onClick={this.handleToggleObfuscate}>
                     <Icon name="eye-open"/>
-                    <span className="visually-hidden">view</span>
+                    <span className="visually-hidden"><Trans>View</Trans></span>
                   </a>
+                  <span className="security-token" style={this.securityTokenStyle}>
+                    {this.securityTokenCode}
+                  </span>
                   {this.state.passphraseError &&
-                  <div className="input text">
-                    <div className="message error">{this.state.passphraseError}</div>
-                  </div>
+                    <div className="error-message">{this.state.passphraseError}</div>
+                  }
+                  {!this.state.passphraseError &&
+                    <div className="help-message">You need to enter your current passphrase.</div>
                   }
                 </div>
               </div>
               <div className="submit-wrapper">
-                <button className="button big" type="button" disabled={this.hasAllInputDisabled()} onClick={this.handleCancel}>
+                <button
+                  className="button cancel medium"
+                  type="button"
+                  disabled={this.hasAllInputDisabled()}
+                  onClick={this.handleCancel}>
                   <Trans>Cancel</Trans>
                 </button>
-                <FormSubmitButton big={true} disabled={this.mustBeDisabled()} processing={this.state.processing} value={this.translate('Verify')}/>
+                <FormSubmitButton
+                  primary={true} medium={true}
+                  disabled={this.mustBeDisabled()}
+                  processing={this.state.processing}
+                  value={this.translate('Verify')}/>
               </div>
             </form>
           </div>
-          <div className="col4 last passphrase-help">
-            <h3><Trans>What if I forgot my passphrase?</Trans></h3>
-            <p><Trans>Unfortunately you need your passphrase in order to continue. If you forgot it, please contact your administrator.</Trans></p>
-            <a className="button big" href="https://help.passbolt.com/faq/start/passphrase-recovery" target="_blank" rel="noopener noreferrer">
-              <span><Trans>Learn more</Trans></span>
-            </a>
+          <div className="col4 last">
+            <div className="sidebar-help">
+              <h3><Trans>What if I forgot my passphrase?</Trans></h3>
+              <p><Trans>Unfortunately you need your passphrase in order to continue. If you forgot it, please contact your administrator.</Trans></p>
+              <a className="button" href="https://help.passbolt.com/faq/start/passphrase-recovery" target="_blank" rel="noopener noreferrer">
+                <span><Trans>Learn more</Trans></span>
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -227,9 +297,10 @@ class ConfirmPassphrase extends React.Component {
 }
 
 ConfirmPassphrase.propTypes = {
+  context: PropTypes.any, // The application context
   userSettingsContext: PropTypes.object, // The user settings context
   dialogContext: PropTypes.any, // The dialog context
   t: PropTypes.func, // The translation function
 };
 
-export default withDialog(withUserSettings(withTranslation('common')(ConfirmPassphrase)));
+export default withAppContext(withDialog(withUserSettings(withTranslation('common')(ConfirmPassphrase))));

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/ConfirmPassphrase.test.data.js

@@ -1,9 +1,15 @@
+import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
+
 /**
  * Default props
  * @returns {object}
  */
 export function defaultProps() {
   const props = {
+    context: {
+      userSettings: new UserSettings(userSettingsFixture)
+    },
     userSettingsContext: {
       onCheckProvidePassphraseRequested: jest.fn(),
       onGoToIntroductionPassphraseRequested: jest.fn()

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/ConfirmPassphrase.test.js

@@ -71,14 +71,14 @@ describe("As LU I should see the user confirm passphrase page", () => {
       await waitFor(() => {
         expect(page.passphrase.getAttribute("disabled")).not.toBeNull();
         expect(page.verifyButton.getAttribute("disabled")).not.toBeNull();
-        expect(page.verifyButton.className).toBe('button primary disabled processing big');
+        expect(page.verifyButton.className).toBe('button primary disabled processing medium');
         expect(page.cancelButton.getAttribute("disabled")).not.toBeNull();
       });
     });
 
     it('As LU I shouldn’t be able to submit the form if there is an invalid field', async() => {
       expect(page.verifyButton.getAttribute("disabled")).not.toBeNull();
-      expect(page.verifyButton.className).toBe('button primary disabled big');
+      expect(page.verifyButton.className).toBe('button primary disabled medium');
 
       // Fill the form
       page.insertPassphrase("passphrase");

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/ConfirmPassphrase.test.page.js

@@ -55,7 +55,7 @@ export default class ConfirmPassphrasePage {
    * Returns the passphrase error message element
    */
   get passphraseErrorMessage() {
-    return this._page.container.querySelector('.message.error').innerHTML;
+    return this._page.container.querySelector('.error-message').innerHTML;
   }
 
   /**