passbolt-styleguide 3.5.3 → 3.6.0-beta1

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

@@ -0,0 +1,102 @@
+/**
+ * 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 {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import AppContext from "../../../contexts/AppContext";
+import PropTypes from "prop-types";
+import DisplayEmailNotificationsAdministration from "./DisplayEmailNotificationsAdministration";
+
+export default {
+  title: 'Passbolt/Administration/DisplayEmailNotificationsAdministration',
+  component: DisplayEmailNotificationsAdministration
+};
+
+const Template = ({context, ...args}) =>
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <div className="panel middle">
+        <div className="grid grid-responsive-12">
+          <Route component={routerProps => <DisplayEmailNotificationsAdministration {...args} {...routerProps}/>}></Route>
+        </div>
+      </div>
+    </MemoryRouter>
+  </AppContext.Provider>;
+
+Template.propTypes = {
+  context: PropTypes.object,
+};
+
+const administrationWorkspaceContext = {
+  onGetEmailNotificationsRequested: () => ({
+    body: {
+      sources_database: true,
+      sources_file: true,
+      send_password_create: true,
+      send_password_share: true,
+      send_password_update: true,
+      send_password_delete: true,
+      send_folder_create: true,
+      send_folder_update: true,
+      send_folder_delete: true,
+      send_folder_share: true,
+      send_comment_add: true,
+      send_group_delete: true,
+      send_group_user_add: true,
+      send_group_user_delete: true,
+      send_group_user_update: true,
+      send_group_manager_update: true,
+      send_user_create: true,
+      send_user_recover: true,
+      show_description: true,
+      show_secret: true,
+      show_uri: true,
+      show_username: true,
+      show_comment: true,
+      send_account_recovery_impossible_admin: true,
+      send_account_recovery_initiated: true,
+      send_account_recovery_processed: true,
+      send_account_recovery_policy_changed: true,
+      send_account_recovery_impossible_user: true,
+      send_account_recovery_approved: true,
+      send_account_recovery_rejected: true,
+    }
+  }),
+  must: {
+    save: true
+  },
+  can: {
+    save: true
+  }
+};
+
+export const AllNotifications = Template.bind({});
+AllNotifications.args = {
+  context: {
+    siteSettings: {
+      canIUse: () => true
+    }
+  },
+  administrationWorkspaceContext: administrationWorkspaceContext
+};
+
+export const AllNotificationsForCE = Template.bind({});
+AllNotificationsForCE.args = {
+  context: {
+    siteSettings: {
+      canIUse: () => false
+    }
+  },
+  administrationWorkspaceContext: administrationWorkspaceContext
+};

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

@@ -17,7 +17,8 @@ import {withActionFeedback} from "../../../../react-extension/contexts/ActionFee
 import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
 import {Trans, withTranslation} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
+import Select from "../../Common/Select/Select";
 
 /**
  * This component allows to display the internationalisation for the administration
@@ -172,7 +173,10 @@ class DisplayInternationalizationAdministration extends React.Component {
    * @returns {array}
    */
   get supportedLocales() {
-    return this.props.context.siteSettings.supportedLocales || [];
+    if (this.props.context.siteSettings.supportedLocales) {
+      return this.props.context.siteSettings.supportedLocales.map(supportedLocale => ({value: supportedLocale.locale, label: supportedLocale.label}));
+    }
+    return [];
   }
 
   /**
@@ -190,18 +194,12 @@ class DisplayInternationalizationAdministration extends React.Component {
   render() {
     return (
       <div className="row">
-        <div className="internationalisation-settings col7">
+        <div className="internationalisation-settings col7 main-column">
           <h3><Trans>Internationalisation</Trans></h3>
           <form className="form">
-            <div className="input select locale">
+            <div className="select-wrapper input">
               <label htmlFor="app-locale-input"><Trans>Language</Trans></label>
-              <select className="medium" id="locale-input" name="locale" value={this.state.locale} onChange={this.handleInputChange}>
-                {this.supportedLocales.map(supportedLocale =>
-                  <option key={supportedLocale.locale} value={supportedLocale.locale}>
-                    {supportedLocale.label}
-                  </option>
-                )}
-              </select>
+              <Select className="medium" id="locale-input" name="locale" items={this.supportedLocales} value={this.state.locale} onChange={this.handleInputChange}/>
               <p><Trans>The default language of the organisation.</Trans></p>
             </div>
           </form>

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

@@ -66,7 +66,7 @@ export default class DisplayInternationalizationAdministrationPage {
    * Returns the locale selected input element
    */
   get localeSelected() {
-    return this._page.container.querySelector('#locale-input').value;
+    return this._page.container.querySelector('#locale-input .value').textContent;
   }
 
   /**
@@ -76,16 +76,23 @@ export default class DisplayInternationalizationAdministrationPage {
     return this.internationalisationSettings !== null;
   }
 
-  /** change the value on the element */
-  async change(element, value) {
-    const data = {target: {value: value}};
-    fireEvent.change(element, data);
+  /**
+   * Returns the locale input element
+   */
+  getLocaleList(index) {
+    return this._page.container.querySelectorAll('#locale-input .option')[index - 1];
+  }
+
+  /** click on the element */
+  async click(element) {
+    fireEvent.click(element);
     await waitFor(() => {
     });
   }
 
-  /** select the french locale */
+  /** select the french language */
   async selectLanguageFr() {
-    await this.change(this.locale, 'fr-FR');
+    await this.click(this.locale);
+    await this.click(this.getLocaleList(2));
   }
 }

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

@@ -0,0 +1,67 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import DisplayInternationalizationAdministration from "./DisplayInternationalizationAdministration";
+
+export default {
+  title: 'Passbolt/Administration/DisplayInternationalizationAdministration',
+  component: DisplayInternationalizationAdministration
+};
+
+const Template = ({...args}) =>
+  <div className="panel middle">
+    <div className="grid grid-responsive-12">
+      <DisplayInternationalizationAdministration {...args}/>
+    </div>
+  </div>;
+
+Template.propTypes = {
+  context: PropTypes.object,
+};
+
+export const Initial = Template.bind({});
+Initial.args = {
+  context: {
+    siteSettings: {
+      canIUse: () => true,
+      locale: "en-UK",
+      supportedLocales: [
+        {
+          locale: "de-DE",
+          label: "Deutsch"
+        }, {
+          locale: "en-UK",
+          label: "English"
+        }, {
+          locale: "fr-FR",
+          "label": "Français"
+        }, {
+          locale: "ja-JP",
+          "label": "日本語"
+        }, {
+          locale: "nl-NL",
+          "label": "Nederlands"
+        }, {
+          locale: "pl-PL",
+          "label": "Polski"
+        }, {
+          locale: "sv-SE",
+          "label": "Svenska"
+        }
+      ]
+    }
+  }
+};

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

@@ -15,23 +15,70 @@ import React, {Component} from "react";
 import PropTypes from "prop-types";
 import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../shared/components/Icons/Icon";
 
 class DisplayLoadingDialog extends Component {
   /**
-   * Constructor
-   * @param {Object} props
+   * Default constructor
+   * @param props Component props
    */
   constructor(props) {
     super(props);
-    this.bindEventHandlers();
+    this.infiniteTimerUpdateIntervalId = null; // The infinite timer update interval ID
+    this.state = this.defaultState;
   }
 
   /**
-   * Bind event handlers
-   * @returns {void}
+   * Returns the component default state
+   * @return {object}
+   */
+  get defaultState() {
+    return {
+      infiniteTimer: 0, // The timer for the infinite calculation, used only if infinite progress mode.
+    };
+  }
+
+  /**
+   * Component did mount
+   */
+  componentDidMount() {
+    this.startInfiniteTimerUpdateProgress();
+  }
+
+  /**
+   * Component will unmount
    */
-  bindEventHandlers() {
-    this.handleClose = this.handleClose.bind(this);
+  componentWillUnmount() {
+    this.resetInterval();
+  }
+
+  /**
+   * Reset interval
+   */
+  resetInterval() {
+    if (this.infiniteTimerUpdateIntervalId) {
+      clearInterval(this.infiniteTimerUpdateIntervalId);
+      this.infiniteTimerUpdateIntervalId = null;
+    }
+  }
+
+  /**
+   * Start the infinite timer update.
+   * @return {void}
+   */
+  startInfiniteTimerUpdateProgress() {
+    this.infiniteTimerUpdateIntervalId = setInterval(() => {
+      const infiniteTimer = this.state.infiniteTimer + 2;
+      this.setState({infiniteTimer});
+    }, 500);
+  }
+
+  /**
+   * Calculate the infinite progress
+   * @return {number}
+   */
+  calculateInfiniteProgress() {
+    return 100 - (100 / Math.pow(1.1, this.state.infiniteTimer));
   }
 
   /**
@@ -55,17 +102,23 @@ class DisplayLoadingDialog extends Component {
    * @returns {JSX}
    */
   render() {
+    const progress = this.calculateInfiniteProgress();
+    const progressBarStyle = {width: `${progress}%`};
+
     return (
       <DialogWrapper className='loading-dialog' title={this.props.title}
-        onClose={this.handleClose} disabled={false}>
+        onClose={this.handleClose} disabled={true}>
         <div className="form-content">
           <label><Trans>Take a deep breath and enjoy being in the present moment...</Trans></label>
           <div className="progress-bar-wrapper">
-            <span style={{"width": `100%`}} className="progress-bar big infinite">
-              <span className="progress"></span>
+            <span className="progress-bar">
+              <span className={`progress ${progress === 100 ? 'completed' : ''}`} style={progressBarStyle}/>
             </span>
           </div>
         </div>
+        <div className="submit-wrapper clearfix">
+          <a className="button disabled processing">Submit<Icon name="spinner"/></a>
+        </div>
       </DialogWrapper>
     );
   }

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

@@ -15,7 +15,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import XRegExp from "xregexp";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
 import {Trans, withTranslation} from "react-i18next";
 
@@ -409,134 +409,121 @@ class DisplayMfaAdministration extends React.Component {
   render() {
     return (
       <div className="row">
-        <div className="mfa-settings col7">
-          <form className="form ready">
-            <div className="provider-section totp">
-              <h3>
-                <span className="input toggle-switch form-element ready">
-                  <input id="totp-provider-toggle-button" type="checkbox" className="toggle-switch-checkbox checkbox" name="totpProviderToggle"
-                    onChange={this.handleInputChange} checked={this.state.totpProviderToggle} disabled={this.hasAllInputDisabled()}/>
-                  <label className="toggle-switch-button" htmlFor="totp-provider-toggle-button"/>
-                </span>
-                <label><Trans>Time-based One Time Password</Trans></label>
-              </h3>
-              {!this.isOtpProviderChecked() &&
-              <p className="description">
-                <Trans>The Time-based One Time Password provider is disabled for all users.</Trans>
-              </p>
+        <div className="mfa-settings col7 main-column">
+          <h3>Multi Factor Authentication</h3>
+          <p><Trans>In this section you can choose which multi factor authentication will be available.</Trans></p>
+          <h4 className="no-border">
+            <span className="input toggle-switch form-element ready">
+              <input id="totp-provider-toggle-button" type="checkbox" className="toggle-switch-checkbox checkbox" name="totpProviderToggle"
+                onChange={this.handleInputChange} checked={this.state.totpProviderToggle} disabled={this.hasAllInputDisabled()}/>
+              <label htmlFor="totp-provider-toggle-button"><Trans>Time-based One Time Password</Trans></label>
+            </span>
+          </h4>
+          {!this.isOtpProviderChecked() &&
+          <p className="description">
+            <Trans>The Time-based One Time Password provider is disabled for all users.</Trans>
+          </p>
+          }
+          {this.isOtpProviderChecked() &&
+          <p className="description">
+            <Trans>The Time-based One Time Password provider is enabled for all users. They can setup this provider in their profile and use it as second factor authentication.</Trans>
+          </p>
+          }
+          <h4>
+            <span className="input toggle-switch form-element">
+              <input id="yubikey-provider-toggle-button" type="checkbox" className="toggle-switch-checkbox checkbox" name="yubikeyToggle"
+                onChange={this.handleInputChange} checked={this.state.yubikeyToggle} disabled={this.hasAllInputDisabled()}/>
+              <label htmlFor="yubikey-provider-toggle-button">Yubikey</label>
+            </span>
+          </h4>
+          {!this.isYubikeyChecked() &&
+          <p className="description">
+            <Trans>The Yubikey provider is disabled for all users.</Trans>
+          </p>
+          }
+          {this.isYubikeyChecked() &&
+          <>
+            <p className="description">
+              <Trans>The Yubikey provider is enabled for all users. They can setup this provider in their profile and use it as second factor authentication.</Trans>
+            </p>
+            <div className={`input text required ${this.state.yubikeyClientIdentifierError ? "error" : ""}`}>
+              <label><Trans>Client identifier</Trans></label>
+              <input id="yubikeyClientIdentifier" type="text" name="yubikeyClientIdentifier" required="required" className="required fluid form-element ready" placeholder="123456789"
+                onChange={this.handleInputChange} value={this.state.yubikeyClientIdentifier} disabled={this.hasAllInputDisabled()}/>
+              {this.state.yubikeyClientIdentifierError &&
+              <div className="yubikey_client_identifier error-message">{this.state.yubikeyClientIdentifierError}</div>
               }
-              {this.isOtpProviderChecked() &&
-              <p className="description">
-                <Trans>The Time-based One Time Password provider is enabled for all users. They can setup this provider in their profile and use it as second factor authentication.</Trans>
-              </p>
+            </div>
+            <div className={`input text required ${this.state.yubikeySecretKeyError ? "error" : ""}`}>
+              <label><Trans>Secret key</Trans></label>
+              <input id="yubikeySecretKey" name="yubikeySecretKey" required="required" className="required fluid form-element" placeholder="**********" type="password"
+                onChange={this.handleInputChange} value={this.state.yubikeySecretKey} disabled={this.hasAllInputDisabled()}/>
+              {this.state.yubikeySecretKeyError &&
+              <div className="yubikey_secret_key error-message">{this.state.yubikeySecretKeyError}</div>
               }
             </div>
-            <div className="provider-section yubikey">
-              <h3>
-                <span className="input toggle-switch form-element">
-                  <input id="yubikey-provider-toggle-button" type="checkbox" className="toggle-switch-checkbox checkbox" name="yubikeyToggle"
-                    onChange={this.handleInputChange} checked={this.state.yubikeyToggle} disabled={this.hasAllInputDisabled()}/>
-                  <label className="toggle-switch-button" htmlFor="yubikey-provider-toggle-button"/>
-                </span>
-                <label>Yubikey</label>
-              </h3>
-              {!this.isYubikeyChecked() &&
-              <p className="description">
-                <Trans>The Yubikey provider is disabled for all users.</Trans>
-              </p>
+          </>
+          }
+          <h4>
+            <span className="input toggle-switch form-element ready">
+              <input id="duo-provider-toggle-button" type="checkbox" className="toggle-switch-checkbox checkbox" name="duoToggle"
+                onChange={this.handleInputChange} checked={this.state.duoToggle} disabled={this.hasAllInputDisabled()}/>
+              <label htmlFor="duo-provider-toggle-button">Duo</label>
+            </span>
+          </h4>
+          {!this.isDuoChecked() &&
+          <p className="description">
+            <Trans>The Duo provider is disabled for all users.</Trans>
+          </p>
+          }
+          {this.isDuoChecked() &&
+          <>
+            <p className="description enabled">
+              <Trans>The Duo provider is enabled for all users. They can setup this provider in their profile and use it as second factor authentication.</Trans>
+            </p>
+            <div className={`input text required ${this.state.duoHostnameError ? "error" : ""}`}>
+              <label><Trans>Hostname</Trans></label>
+              <input id="duoHostname" type="text" name="duoHostname" required="required" className="required fluid form-element ready"
+                placeholder="api-24zlkn4.duosecurity.com" value={this.state.duoHostname}
+                onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
+              {this.state.duoHostnameError &&
+              <div className="duo_hostname error-message">{this.state.duoHostnameError}</div>
               }
-              {this.isYubikeyChecked() &&
-              <div>
-                <p className="description">
-                  <Trans>The Yubikey provider is enabled for all users. They can setup this provider in their profile and use it as second factor authentication.</Trans>
-                </p>
-                <div className="form-content">
-                  <div className={`input text required ${this.state.yubikeyClientIdentifierError ? "error" : ""}`}>
-                    <label><Trans>Client identifier</Trans></label>
-                    <input id="yubikeyClientIdentifier" type="text" name="yubikeyClientIdentifier" required="required" className="required fluid form-element ready" placeholder="123456789"
-                      onChange={this.handleInputChange} value={this.state.yubikeyClientIdentifier} disabled={this.hasAllInputDisabled()}/>
-                    {this.state.yubikeyClientIdentifierError &&
-                    <div className="yubikey_client_identifier error-message">{this.state.yubikeyClientIdentifierError}</div>
-                    }
-                  </div>
-                  <div className={`input text required ${this.state.yubikeySecretKeyError ? "error" : ""}`}>
-                    <label><Trans>Secret key</Trans></label>
-                    <input id="yubikeySecretKey" name="yubikeySecretKey" required="required" className="required fluid form-element" placeholder="**********" type="password"
-                      onChange={this.handleInputChange} value={this.state.yubikeySecretKey} disabled={this.hasAllInputDisabled()}/>
-                    {this.state.yubikeySecretKeyError &&
-                    <div className="yubikey_secret_key error-message">{this.state.yubikeySecretKeyError}</div>
-                    }
-                  </div>
-                </div>
-              </div>
+            </div>
+            <div className={`input text required ${this.state.duoIntegrationKeyError ? "error" : ""}`}>
+              <label><Trans>Integration key</Trans></label>
+              <input id="duoIntegrationKey" type="text" name="duoIntegrationKey" required="required" className="required fluid form-element ready"
+                placeholder="HASJKDSQJO213123KQSLDF" value={this.state.duoIntegrationKey}
+                onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
+              {this.state.duoIntegrationKeyError &&
+              <div className="duo_integration_key error-message">{this.state.duoIntegrationKeyError}</div>
               }
             </div>
-            <div className="provider-section duo">
-              <h3>
-                <span className="input toggle-switch form-element ready">
-                  <input id="duo-provider-toggle-button" type="checkbox" className="toggle-switch-checkbox checkbox" name="duoToggle"
-                    onChange={this.handleInputChange} checked={this.state.duoToggle} disabled={this.hasAllInputDisabled()}/>
-                  <label className="toggle-switch-button" htmlFor="duo-provider-toggle-button"/>
-                </span>
-                <label>Duo</label>
-              </h3>
-              {!this.isDuoChecked() &&
-              <p className="description">
-                <Trans>The Duo provider is disabled for all users.</Trans>
-              </p>
+            <div className={`input text required ${this.state.duoSaltError ? "error" : ""}`}>
+              <label><Trans>Salt</Trans></label>
+              <input id="duoSalt" name="duoSalt" required="required" className="required fluid form-element ready" placeholder="**********" type="password"
+                value={this.state.duoSalt} onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
+              {this.state.duoSaltError &&
+              <div className="duo_salt error-message">{this.state.duoSaltError}</div>
               }
-              {this.isDuoChecked() &&
-              <div>
-                <p className="description enabled">
-                  <Trans>The Duo provider is enabled for all users. They can setup this provider in their profile and use it as second factor authentication.</Trans>
-                </p>
-                <div className="form-content">
-                  <div className={`input text required ${this.state.duoHostnameError ? "error" : ""}`}>
-                    <label><Trans>Hostname</Trans></label>
-                    <input id="duoHostname" type="text" name="duoHostname" required="required" className="required fluid form-element ready"
-                      placeholder="api-24zlkn4.duosecurity.com" value={this.state.duoHostname}
-                      onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
-                    {this.state.duoHostnameError &&
-                    <div className="duo_hostname error-message">{this.state.duoHostnameError}</div>
-                    }
-                  </div>
-                  <div className={`input text required ${this.state.duoIntegrationKeyError ? "error" : ""}`}>
-                    <label><Trans>Integration key</Trans></label>
-                    <input id="duoIntegrationKey" type="text" name="duoIntegrationKey" required="required" className="required fluid form-element ready"
-                      placeholder="HASJKDSQJO213123KQSLDF" value={this.state.duoIntegrationKey}
-                      onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
-                    {this.state.duoIntegrationKeyError &&
-                    <div className="duo_integration_key error-message">{this.state.duoIntegrationKeyError}</div>
-                    }
-                  </div>
-                  <div className={`input text required ${this.state.duoSaltError ? "error" : ""}`}>
-                    <label><Trans>Salt</Trans></label>
-                    <input id="duoSalt" name="duoSalt" required="required" className="required fluid form-element ready" placeholder="**********" type="password"
-                      value={this.state.duoSalt} onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
-                    {this.state.duoSaltError &&
-                    <div className="duo_salt error-message">{this.state.duoSaltError}</div>
-                    }
-                  </div>
-                  <div className={`input text required ${this.state.duoSecretKeyError ? "error" : ""}`}>
-                    <label><Trans>Secret key</Trans></label>
-                    <input id="duoSecretKey" name="duoSecretKey" required="required" className="required fluid form-element ready" placeholder="**********" type="password"
-                      value={this.state.duoSecretKey} onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
-                    {this.state.duoSecretKeyError &&
-                    <div className="duo_secret_key error-message">{this.state.duoSecretKeyError}</div>
-                    }
-                  </div>
-                </div>
-              </div>
+            </div>
+            <div className={`input text required ${this.state.duoSecretKeyError ? "error" : ""}`}>
+              <label><Trans>Secret key</Trans></label>
+              <input id="duoSecretKey" name="duoSecretKey" required="required" className="required fluid form-element ready" placeholder="**********" type="password"
+                value={this.state.duoSecretKey} onChange={this.handleInputChange} disabled={this.hasAllInputDisabled()}/>
+              {this.state.duoSecretKeyError &&
+              <div className="duo_secret_key error-message">{this.state.duoSecretKeyError}</div>
               }
             </div>
-          </form>
+          </>
+          }
         </div>
         <div className="col4 last">
           <div className="sidebar-help">
             <h3><Trans>Need help?</Trans></h3>
             <p><Trans>Check out our Multi Factor Authentication configuration guide.</Trans></p>
             <a className="button" href="https://help.passbolt.com/configure" target="_blank" rel="noopener noreferrer">
-              <Icon name="life-ring"/>
+              <Icon name="document"/>
               <span><Trans>Read the documentation</Trans></span>
             </a>
           </div>

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

@@ -1,6 +1,4 @@
-import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
-import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DisplayMfaAdministration from "./DisplayMfaAdministration";
 
@@ -10,15 +8,10 @@ export default {
   component: DisplayMfaAdministration
 };
 
-const context = {};
-
-
 const Template = args =>
-  <AppContext.Provider value={context}>
-    <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <DisplayMfaAdministration {...args} {...routerProps}/>}></Route>
-    </MemoryRouter>
-  </AppContext.Provider>;
+  <div className="grid grid-responsive-12">
+    <DisplayMfaAdministration {...args}/>
+  </div>;
 
 Template.propTypes = {
   context: PropTypes.object,