passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/components/Administration/DisplaySynchronizeUserDirectoryAdministration/DisplaySynchronizeUserDirectoryAdministration.test.js

@@ -42,7 +42,7 @@ describe("See the synchronize user directory administration dialog", () => {
     it('As AD I should see The full report in the dialog for my synchronize report', async() => {
       expect(page.title.hyperlink.textContent).toBe("Synchronize report");
       expect(page.displaySynchronizeUserDirectoryAdministrationDialog.exists()).toBeTruthy();
-      expect(page.displaySynchronizeUserDirectoryAdministrationDialog.resourceSynchronize).toBe(' 2 user and 60 group have been synchronized. ');
+      expect(page.displaySynchronizeUserDirectoryAdministrationDialog.resourceSynchronize).toBe(' 2 users and 60 groups have been synchronized. ');
       expect(page.displaySynchronizeUserDirectoryAdministrationDialog.error).toBe('Some resources will not be synchronized and will require your attention, see the full report.');
       expect(page.displaySynchronizeUserDirectoryAdministrationDialog.noResource).toBeNull();
       await page.displaySynchronizeUserDirectoryAdministrationDialog.click(page.displaySynchronizeUserDirectoryAdministrationDialog.fullReport);

package/src/react-extension/components/Administration/DisplayTestUserDirectoryAdministration/DisplayTestUserDirectoryAdministration.test.js

@@ -46,7 +46,7 @@ describe("See the test user directory administration Dialog", () => {
     it('As AD I should see the number of user(s) and group(s) founds on the LDAP server in the dialog for my Test settings report', async() => {
       expect(page.title.hyperlink.textContent).toBe("Test settings report");
       expect(page.displayTestUserDirectoryAdministrationDialog.exists()).toBeTruthy();
-      expect(page.displayTestUserDirectoryAdministrationDialog.usersAndGroupsFound).toBe('12 user and 58 group have been found.');
+      expect(page.displayTestUserDirectoryAdministrationDialog.usersAndGroupsFound).toBe('12 users and 58 groups have been found.');
       await page.displayTestUserDirectoryAdministrationDialog.click(page.displayTestUserDirectoryAdministrationDialog.buttonOk);
       expect(props.onClose).toBeCalled();
     });
@@ -60,9 +60,8 @@ describe("See the test user directory administration Dialog", () => {
       expect(page.displayTestUserDirectoryAdministrationDialog.structureGroups.length).toBe(60);
       expect(page.displayTestUserDirectoryAdministrationDialog.structureUsers.length).toBe(25);
       await page.displayTestUserDirectoryAdministrationDialog.click(page.displayTestUserDirectoryAdministrationDialog.errorsList);
-      expect(page.displayTestUserDirectoryAdministrationDialog.errors).toBe('7 entry had errors and will be ignored during synchronization.');
+      expect(page.displayTestUserDirectoryAdministrationDialog.errors).toBe('7 entries had errors and will be ignored during synchronization.');
       expect(page.displayTestUserDirectoryAdministrationDialog.errorsTextarea).not.toBeNull();
-      expect(props.onClose).toBeCalled();
     });
   });
 });

package/src/react-extension/components/Administration/DisplayTestUserDirectoryAdministration/DisplayTestUserDirectoryAdministration.test.stories.js

@@ -3,7 +3,6 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DisplayTestUserDirectoryAdministration from "./DisplayTestUserDirectoryAdministration";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
 
 export default {
@@ -2717,17 +2716,14 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <DisplayTestUserDirectoryAdministration {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayTestUserDirectoryAdministration {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,
 };
 
 export const Initial = Template.bind({});
-

package/src/react-extension/components/Administration/DisplayUserDirectoryAdministration/DisplayUserDirectoryAdministration.js

@@ -798,7 +798,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
 
     return (
       <div className="row">
-        <div className="ldap-settings col8">
+        <div className="ldap-settings col7">
           <form className="form">
             <h3>
               <span className="input toggle-switch form-element">
@@ -845,11 +845,11 @@ class DisplayUserDirectoryAdministration extends React.Component {
                         </div>
                       </div>
                     </div>
-                    <div className="singleline connection_info protocol_host_port clearfix required ad openldap">
+                    <div className="clearfix required ad openldap">
                       <label><Trans>Server url</Trans></label>
-                      <div className="input text field_protocol_host ad openldap">
+                      <div className="input text singleline connection_info ad openldap">
                         <div onClick={this.handleConnectionTypeClicked} ref={this.connectionTypeRef}
-                          className={`chosen-container chosen-container-single connection-type ${this.hasAllInputDisabled() ? "chosen-disabled" : "chosen-container-active"} ${this.state.openConnectionType ? "chosen-with-drop" : ""}`}>
+                          className={`protocol chosen-container chosen-container-single connection-type ${this.hasAllInputDisabled() ? "chosen-disabled" : "chosen-container-active"} ${this.state.openConnectionType ? "chosen-with-drop" : ""}`}>
                           <a className="chosen-single">
                             <span id="connection-type-input">{this.connectionType[this.state.connectionType]}</span>
                             <div>
@@ -874,17 +874,17 @@ class DisplayUserDirectoryAdministration extends React.Component {
                             value={this.state.host} onChange={this.handleInputChange} onKeyUp={this.handleHostInputKeyUp}
                             placeholder={this.translate("host")} disabled={this.hasAllInputDisabled()}/>
                           {this.state.hostError &&
-                          <div id="server-input-feedback" className="message error">{this.state.hostError}</div>
+                          <div id="server-input-feedback" className="error-message">{this.state.hostError}</div>
+                          }
+                        </div>
+                        <div className="input text port ad openldap">
+                          <input id="port-input" type="number" className="required fluid form-element" name="port"
+                            value={this.state.port} onChange={this.handleInputChange} onKeyUp={this.handlePortInputKeyUp} placeholder={this.translate("port")}
+                            disabled={this.hasAllInputDisabled()}/>
+                          {this.state.portError &&
+                          <div id="port-input-feedback" className="error-message">{this.state.portError}</div>
                           }
                         </div>
-                      </div>
-                      <div className="input text port ad openldap">
-                        <input id="port-input" type="number" className="required fluid form-element" name="port"
-                          value={this.state.port} onChange={this.handleInputChange} onKeyUp={this.handlePortInputKeyUp} placeholder={this.translate("port")}
-                          disabled={this.hasAllInputDisabled()}/>
-                        {this.state.portError &&
-                        <div id="port-input-feedback" className="message error">{this.state.portError}</div>
-                        }
                       </div>
                     </div>
                     <div className="singleline clearfix">
@@ -907,7 +907,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                         onChange={this.handleInputChange} className="required fluid form-element" onKeyUp={this.handleDomainInputKeyUp}
                         placeholder="domain.ext" disabled={this.hasAllInputDisabled()}/>
                       {this.state.domainError &&
-                      <div id="domain-name-input-feedback" className="message error">{this.state.domainError}</div>
+                      <div id="domain-name-input-feedback" className="error-message">{this.state.domainError}</div>
                       }
                     </div>
                     <div className="input text ad openldap">
@@ -915,7 +915,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                       <input id="base-dn-input" type="text" name="baseDn" value={this.state.baseDn}
                         onChange={this.handleInputChange} className="fluid form-element" placeholder="OU=OrgUsers,DC=mydomain,DC=local"
                         disabled={this.hasAllInputDisabled()}/>
-                      <div className="message">
+                      <div className="help-message">
                         <Trans>The base DN (default naming context) for the domain.</Trans> <Trans>If this is empty then it will be queried from the RootDSE.</Trans>
                       </div>
                     </div>
@@ -936,7 +936,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                       <input id="group-path-input" type="text" name="groupPath" value={this.state.groupPath}
                         onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("Group Path")}
                         disabled={this.hasAllInputDisabled()}/>
-                      <div className="message">
+                      <div className="help-message">
                         <Trans>Group path is used in addition to the base DN while searching groups.</Trans> <Trans>Leave empty if users and groups are in the same DN.</Trans>
                       </div>
                     </div>
@@ -945,7 +945,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                       <input id="user-path-input" type="text" name="userPath" value={this.state.userPath}
                         onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("User Path")}
                         disabled={this.hasAllInputDisabled()}/>
-                      <div className="message"><Trans>User path is used in addition to base DN while searching users.</Trans></div>
+                      <div className="help-message"><Trans>User path is used in addition to base DN while searching users.</Trans></div>
                     </div>
                     {this.isOpenLdapChecked() &&
                     <div>
@@ -954,7 +954,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                         <input id="group-object-class-input" type="text" name="groupObjectClass"
                           value={this.state.groupObjectClass} onChange={this.handleInputChange} className="required fluid"
                           placeholder="GroupObjectClass" disabled={this.hasAllInputDisabled()}/>
-                        <div className="message">
+                        <div className="help-message">
                           <Trans>For Openldap only. Defines which group object to use.</Trans> (<Trans>Default</Trans>: posixGroup)
                         </div>
                       </div>
@@ -963,7 +963,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                         <input id="user-object-class-input" type="text" name="userObjectClass"
                           value={this.state.userObjectClass} onChange={this.handleInputChange} className="required fluid form-element"
                           placeholder="UserObjectClass" disabled={this.hasAllInputDisabled()}/>
-                        <div className="message"><Trans>For Openldap only. Defines which user object to use.</Trans> (<Trans>Default</Trans>: inetOrgPerson)
+                        <div className="help-message"><Trans>For Openldap only. Defines which user object to use.</Trans> (<Trans>Default</Trans>: inetOrgPerson)
                         </div>
                       </div>
                       <div className="input text openldap">
@@ -977,7 +977,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                             disabled={this.hasAllInputDisabled()}/>
                           <label className="toggle-switch-button" htmlFor="use-email-prefix-suffix-toggle-button"></label>
                         </div>
-                        <div className="message">
+                        <div className="help-message">
                           <Trans>Use this option when user entries do not include an email address by default</Trans>
                         </div>
                       </div>
@@ -988,7 +988,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                           <input id="email-prefix-input" type="text" name="emailPrefix" checked={this.state.emailPrefix}
                             onChange={this.handleInputChange} className="required fluid form-element" placeholder={this.translate("username")}
                             disabled={this.hasAllInputDisabled()}/>
-                          <div className="message">
+                          <div className="help-message">
                             <Trans>The attribute you would like to use for the first part of the email (usually username).</Trans>
                           </div>
                         </div>
@@ -997,7 +997,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                           <input id="email-suffix-input" type="text" name="emailSuffix" value={this.state.emailSuffix}
                             onChange={this.handleInputChange} className="required form-element"
                             placeholder={this.translate("@your-domain.com")} disabled={this.hasAllInputDisabled()}/>
-                          <div className="message">
+                          <div className="help-message">
                             <Trans>The domain name part of the email (@your-domain-name).</Trans>
                           </div>
                         </div>
@@ -1056,7 +1056,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                           </div>
                         </div>
                       </div>
-                      <div className="message">
+                      <div className="help-message">
                         <Trans>The default admin user is the user that will perform the operations for the the directory.</Trans>
                       </div>
                     </div>
@@ -1099,7 +1099,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                           </div>
                         </div>
                       </div>
-                      <div className="message">
+                      <div className="help-message">
                         <Trans>The default group manager is the user that will be the group manager of newly created groups.</Trans>
                       </div>
                     </div>
@@ -1108,7 +1108,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                       <input id="groups-parent-group-input" type="text" name="groupsParentGroup"
                         value={this.state.groupsParentGroup} onChange={this.handleInputChange} className="fluid form-element" placeholder={this.translate("Group name")}
                         disabled={this.hasAllInputDisabled()}/>
-                      <div className="message">
+                      <div className="help-message">
                         <Trans>Synchronize only the groups which are members of this group.</Trans>
                       </div>
                     </div>
@@ -1117,7 +1117,7 @@ class DisplayUserDirectoryAdministration extends React.Component {
                       <input id="users-parent-group-input" type="text" name="usersParentGroup"
                         value={this.state.usersParentGroup} onChange={this.handleInputChange} className="fluid form-element" placeholder={this.translate("Group name")}
                         disabled={this.hasAllInputDisabled()}/>
-                      <div className="message">
+                      <div className="help-message">
                         <Trans>Synchronize only the users which are members of this group.</Trans>
                       </div>
                     </div>
@@ -1183,12 +1183,14 @@ class DisplayUserDirectoryAdministration extends React.Component {
           </form>
         </div>
         <div className="col4 last">
-          <h2><Trans>Need help?</Trans></h2>
-          <p><Trans>Check out our ldap configuration guide.</Trans></p>
-          <a className="button" href="https://help.passbolt.com/configure/ldap" target="_blank" rel="noopener noreferrer">
-            <Icon name="life-ring"/>
-            <span><Trans>Read documentation</Trans></span>
-          </a>
+          <div className="sidebar-help">
+            <h3><Trans>Need help?</Trans></h3>
+            <p><Trans>Check out our ldap configuration guide.</Trans></p>
+            <a className="button" href="https://help.passbolt.com/configure/ldap" target="_blank" rel="noopener noreferrer">
+              <Icon name="life-ring"/>
+              <span><Trans>Read the documentation</Trans></span>
+            </a>
+          </div>
         </div>
       </div>
     );

package/src/react-extension/components/Administration/DisplayUserDirectoryAdministration/DisplayUserDirectoryAdministration.test.js

@@ -243,7 +243,7 @@ describe("As AD I should see the user directory settings", () => {
       await waitFor(() => {
         expect(page.userDirectory.getAttribute("disabled")).not.toBeNull();
         expect(page.activeDirectory.getAttribute("disabled")).not.toBeNull();
-        expect(page.connectionTypeSelect.className).toBe("chosen-container chosen-container-single connection-type chosen-disabled ");
+        expect(page.connectionTypeSelect.className).toBe("protocol chosen-container chosen-container-single connection-type chosen-disabled ");
         expect(page.serverHost.getAttribute("disabled")).not.toBeNull();
         expect(page.port.getAttribute("disabled")).not.toBeNull();
         expect(page.username.getAttribute("disabled")).not.toBeNull();

package/src/react-extension/components/Administration/DisplayUserDirectoryAdministration/DisplayUserDirectoryAdministration.test.stories.js

@@ -46,6 +46,3 @@ Initial.args = {
     open: () => {}
   }
 };
-
-
-

package/src/react-extension/components/Administration/EditSubscriptionKey/EditSubscriptionKey.js

@@ -308,7 +308,7 @@ class EditSubscriptionKey extends Component {
                   disabled={this.hasAllInputDisabled()}
                   onChange={this.handleSelectSubscriptionKeyFile}/>
                 {this.state.keyError &&
-                <div className="key error message">{this.state.keyError}</div>
+                <div className="key error-message">{this.state.keyError}</div>
                 }
               </div>
             </div>

package/src/react-extension/components/Administration/EditSubscriptionKey/EditSubscriptionKey.test.page.js

@@ -37,14 +37,14 @@ export default class EditSubscriptionKeyPage {
    * Returns true if a subscription key error appears
    */
   get hasSubscriptionKeyError() {
-    return Boolean(this._page.container.querySelector('.key.error.message'));
+    return Boolean(this._page.container.querySelector('.key.error-message'));
   }
 
   /**
    * Returns true if a subscription key error message
    */
   get subscriptionKeyErrorMessage() {
-    return this._page.container.querySelector('.key.error.message').textContent;
+    return this._page.container.querySelector('.key.error-message').textContent;
   }
 
 

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

@@ -68,7 +68,7 @@ class AskForAuthenticationHelp extends Component {
       <div className="ask-for-authentication-help">
         <h1><Trans>Sorry... maybe an administrator can help?</Trans></h1>
         <p>
-          <Trans>Both the private key and passphrase are required to perform an account recovery.</Trans> <Trans>If you do not access, you can request a new account to the administrator.</Trans>
+          <Trans>Both the private key and passphrase are required to perform an account recovery.</Trans> <Trans>If you do not have access, you can request a new account from the administrator.</Trans>
         </p>
         <div className="form-actions">
           <a

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

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import AskForAuthenticationHelp from "./AskForAuthenticationHelp";
 
@@ -14,23 +12,22 @@ export default {
 const context = {
 };
 
-
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <AskForAuthenticationHelp {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <AskForAuthenticationHelp {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
 
+Initial.parameters = {
+  css: "ext_authentication"
+};

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

@@ -34,8 +34,8 @@ class CheckMailBox extends Component {
         <div className="email-sent-bg">
         </div>
         <h1><Trans>Check your mailbox!</Trans></h1>
-        <p><Trans>We send you a link to verify your email.</Trans><br/>
-          <Trans>Check your spam folder if you do not see hear from us after a while.</Trans></p>
+        <p><Trans>We sent you a link to verify your email.</Trans><br/>
+          <Trans>Check your spam folder if you do not hear from us after a while.</Trans></p>
       </div>
     );
   }

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

@@ -40,7 +40,7 @@ describe("As AN I should see the check mail box", () => {
       // title
       expect(page.title).toBe("Check your mailbox!");
       // message
-      expect(page.message).toBe('We send you a link to verify your email.Check your spam folder if you do not see 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.stories.js

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import CheckMailBox from "./CheckMailBox";
 
@@ -16,21 +14,21 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <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>
+  <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>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
 
+Initial.parameters = {
+  css: "ext_authentication"
+};

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

@@ -254,7 +254,8 @@ class CheckPassphrase extends Component {
                 name="passphrase"
                 value={this.state.passphrase}
                 onChange={this.handleChangePassphrase}
-                disabled={!this.areActionsAllowed}/>
+                disabled={!this.areActionsAllowed}
+                autoComplete="off"/>
               <a
                 className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
                 role="button"

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

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import CheckPassphrase from "./CheckPassphrase";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <CheckPassphrase {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <CheckPassphrase {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

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

@@ -13,7 +13,6 @@
  */
 import React, {Component} from "react";
 import {CirclePicker} from "react-color";
-import Icon from "../../Common/Icons/Icon";
 import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withDialog} from "../../../contexts/DialogContext";
@@ -331,7 +330,7 @@ class ChooseSecurityToken extends Component {
                 className="randomize-button"
                 role="button"
                 onClick={this.handleRandomize}>
-                <Icon name="magic-wand"/> <Trans>Randomize</Trans>
+                <Trans>Randomize</Trans>
               </a>
             </div>
           </div>

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

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import ChooseSecurityToken from "./ChooseSecurityToken";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <ChooseSecurityToken {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <ChooseSecurityToken {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};

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

@@ -258,25 +258,15 @@ class CreateGpgKey extends Component {
             <Trans>This passphrase is the only passphrase you will need to remember from now on, choose wisely!</Trans>
           </p>
           <div className="input text password required">
-            {this.state.isObfuscated &&
-              <input
-                id="passphrase-input"
-                type="password"
-                ref={this.passphraseInput}
-                value={this.state.passphrase}
-                onChange={this.handlePassphraseChange}
-                disabled={!this.areActionsAllowed}
-                autoFocus={true}/>
-            }
-            {!this.state.isObfuscated &&
-              <input
-                id="passphrase-input"
-                type="text"
-                ref={this.passphraseInput}
-                value={this.state.passphrase}
-                onChange={this.handlePassphraseChange}
-                disabled={!this.areActionsAllowed}/>
-            }
+            <input
+              id="passphrase-input"
+              type={this.state.isObfuscated ? "password" : "text"}
+              ref={this.passphraseInput}
+              value={this.state.passphrase}
+              onChange={this.handlePassphraseChange}
+              disabled={!this.areActionsAllowed}
+              autoFocus={true}
+              autoComplete="off"/>
             <a
               className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
               role="button"

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

@@ -1,7 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_authentication.css";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
 import CreateGpgKey from "./CreateGpgKey";
 
@@ -16,21 +14,20 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AuthenticationContext.Provider value={context}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <MemoryRouter initialEntries={['/']}>
-              <Route component={routerProps => <CreateGpgKey {...args} {...routerProps}/>}></Route>
-            </MemoryRouter>
-          </div>
+  <AuthenticationContext.Provider value={context}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <CreateGpgKey {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
         </div>
       </div>
-    </AuthenticationContext.Provider>
-  </MockTranslationProvider>;
-
+    </div>
+  </AuthenticationContext.Provider>;
 
 
 export const Initial = Template.bind({});
-
+Initial.parameters = {
+  css: "ext_authentication"
+};