passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/ExtApp.js

@@ -23,6 +23,7 @@ import DisplayActionFeedbacks from "./components/Common/ActionFeedback/DisplayAc
 import DialogContextProvider from "./contexts/DialogContext";
 import ManageDialogs from "./components/Common/Dialog/ManageDialogs/ManageDialogs";
 import ResourceWorkspaceContextProvider from "./contexts/ResourceWorkspaceContext";
+import ResourcePasswordGeneratorContextProvider from "./contexts/ResourcePasswordGeneratorContext";
 import UserWorkspaceContextProvider from "./contexts/UserWorkspaceContext";
 import ContextualMenuContextProvider from "./contexts/ContextualMenuContext";
 import ManageContextualMenu from "./components/Common/ContextualMenu/ManageContextualMenu";
@@ -54,6 +55,7 @@ import HandleFolderMoveStrategyEvents
 import HandleProgressEvents from "./components/Common/Progress/HandleProgressEvents/HandleProgressEvents";
 import HandleErrorEvents from "./components/Common/Error/HandleErrorEvents/HandleErrorEvents";
 import DisplayResourcesWorkspace from "./components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspace";
+import DragContextProvider from "./contexts/DragContext";
 
 /**
  * The passbolt application served by the browser extension.
@@ -114,17 +116,21 @@ class ExtApp extends Component {
                                 "/app/passwords",
                               ]}>
                                 <ResourceWorkspaceContextProvider>
-                                  <ManageDialogs/>
-                                  <ManageContextualMenu/>
-                                  <ManageAnnouncements/>
-                                  <div id="container" className="page password">
-                                    <div id="app" className="app ready" tabIndex="1000">
-                                      <div className="header first">
-                                        <DisplayMainMenu/>
+                                  <ResourcePasswordGeneratorContextProvider>
+                                    <ManageDialogs/>
+                                    <ManageContextualMenu/>
+                                    <ManageAnnouncements/>
+                                    <DragContextProvider>
+                                      <div id="container" className="page password">
+                                        <div id="app" className="app ready" tabIndex="1000">
+                                          <div className="header first">
+                                            <DisplayMainMenu/>
+                                          </div>
+                                          <DisplayResourcesWorkspace onMenuItemClick={this.handleWorkspaceSelect}/>
+                                        </div>
                                       </div>
-                                      <DisplayResourcesWorkspace onMenuItemClick={this.handleWorkspaceSelect}/>
-                                    </div>
-                                  </div>
+                                    </DragContextProvider>
+                                  </ResourcePasswordGeneratorContextProvider>
                                 </ResourceWorkspaceContextProvider>
                               </Route>
                               {/* Users workspace */}

package/src/react-extension/ExtBootstrapApp.js

@@ -131,6 +131,7 @@ class ExtBootstrapApp extends Component {
               "/app/settings/profile",
               "/app/settings/passphrase",
               "/app/settings/security-token",
+              "/app/settings/mobile",
               "/app/settings/theme",
               "/app/users/view/:selectedUserId",
               "/app/users",

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

@@ -171,7 +171,7 @@ class DisplayAdministrationMenu extends React.Component {
    */
   render() {
     return (
-      <div className="navigation first">
+      <div className="navigation-secondary navigation-administration">
         <ul id="administration_menu" className="clearfix menu ready">
           {this.isMfaEnabled &&
             <li id="mfa_menu">
@@ -209,7 +209,7 @@ class DisplayAdministrationMenu extends React.Component {
             <div className={`row  ${this.isInternationalizationSelected() ? "selected" : ""}`}>
               <div className="main-cell-wrapper">
                 <div className="main-cell">
-                  <a onClick={this.handleInternationalizationClick}><span><Trans>Internationalization</Trans></span></a>
+                  <a onClick={this.handleInternationalizationClick}><span><Trans>Internationalisation</Trans></span></a>
                 </div>
               </div>
             </div>

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

@@ -69,12 +69,12 @@ describe("As AD I can see the administration menu", () => {
     expect(props.navigationContext.onGoToAdministrationSubscriptionRequested).toHaveBeenCalled();
   });
 
-  it('As AD I should be able to go to internationalization', async() => {
+  it('As AD I should be able to go to internationalisation', async() => {
     const props = defaultProps(AdministrationWorkspaceMenuTypes.INTERNATIONALIZATION); // The props to pass
     page = new DisplayAdministrationMenuPage(context, props);
     expect(page.exists()).toBeTruthy();
     await page.goToInternationalization();
-    expect(page.menuSelected).toBe('Internationalization');
+    expect(page.menuSelected).toBe('Internationalisation');
     expect(props.navigationContext.onGoToAdministrationInternationalizationRequested).toHaveBeenCalled();
   });
 });

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

@@ -58,7 +58,7 @@ class DisplayAdministrationWorkspaceBreadcrumb extends Component {
       case AdministrationWorkspaceMenuTypes.SUBSCRIPTION:
         return this.translate("Subscription");
       case AdministrationWorkspaceMenuTypes.INTERNATIONALIZATION:
-        return this.translate("Internationalization");
+        return this.translate("Internationalisation");
       default:
         return "";
     }

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

@@ -81,7 +81,7 @@ describe("As AD I can see a Breadcrumb", () => {
     page = new DisplayAdministrationWorkspaceBreadcrumbPage(context, props);
     expect(page.count).toBe(3);
     expect(page.item(1)).toBe("Administration");
-    expect(page.item(2)).toBe("Internationalization");
+    expect(page.item(2)).toBe("Internationalisation");
     expect(page.item(3)).toBe("Settings");
   });
 });

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

@@ -17,6 +17,7 @@ import {withActionFeedback} from "../../../../react-extension/contexts/ActionFee
 import Icon from "../../Common/Icons/Icon";
 import {withAdministrationWorkspace} from "../../../contexts/AdministrationWorkspaceContext";
 import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 
 /**
  * This component allows to display the email notifications for the administration
@@ -321,6 +322,14 @@ class DisplayEmailNotificationsAdministration extends React.Component {
     return this.state.hasFileConfigSetting;
   }
 
+  /**
+   * Can use folders
+   * @returns {*}
+   */
+  canUseFolders() {
+    return this.props.context.siteSettings.canIUse("folders");
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -384,6 +393,7 @@ class DisplayEmailNotificationsAdministration extends React.Component {
                   <label className="toggle-switch-button" htmlFor="send-password-share-toggle-button"/>
                 </span>
               </div>
+              {this.canUseFolders() &&
               <div className="col6 last">
                 <label><Trans>Folders</Trans></label>
                 <span className="input toggle-switch form-element">
@@ -411,6 +421,7 @@ class DisplayEmailNotificationsAdministration extends React.Component {
                   <label className="toggle-switch-button" htmlFor="send-folder-share-toggle-button"/>
                 </span>
               </div>
+              }
               <div className="row">
               </div>
               <div className="col6 last">
@@ -427,7 +438,7 @@ class DisplayEmailNotificationsAdministration extends React.Component {
               <div className="col6">
                 <label><Trans>Group membership</Trans></label>
                 <span className="input toggle-switch form-element">
-                  <label htmlFor="send-group-delete-toggle-button"><Trans>When a group is deleted, notify the users who were member of it.</Trans></label>
+                  <label htmlFor="send-group-delete-toggle-button"><Trans>When a group is deleted, notify the users who were members of it.</Trans></label>
                   <input type="checkbox" className="toggle-switch-checkbox checkbox" name="groupDelete" disabled={this.hasAllInputDisabled()}
                     onChange={this.handleInputChange} checked={this.state.groupDelete} id="send-group-delete-toggle-button"/>
                   <label className="toggle-switch-button" htmlFor="send-group-delete-toggle-button"/>
@@ -517,12 +528,14 @@ class DisplayEmailNotificationsAdministration extends React.Component {
           </form>
         </div>
         <div className="col4 last">
-          <h3><Trans>Need some help?</Trans></h3>
-          <p><Trans>For more information about email notification, checkout the dedicated page on the help website.</Trans></p>
-          <a className="button" href="https://help.passbolt.com/configure/notification/email" target="_blank" rel="noopener noreferrer">
-            <Icon name="life-ring"/>
-            <span><Trans>Read documentation</Trans></span>
-          </a>
+          <div className="sidebar-help">
+            <h3><Trans>Need some help?</Trans></h3>
+            <p><Trans>For more information about email notification, checkout the dedicated page on the help website.</Trans></p>
+            <a className="button" href="https://help.passbolt.com/configure/notification/email" target="_blank" rel="noopener noreferrer">
+              <Icon name="life-ring"/>
+              <span><Trans>Read the documentation</Trans></span>
+            </a>
+          </div>
         </div>
       </div>
     );
@@ -530,9 +543,10 @@ class DisplayEmailNotificationsAdministration extends React.Component {
 }
 
 DisplayEmailNotificationsAdministration.propTypes = {
+  context: PropTypes.any, // The application context
   administrationWorkspaceContext: PropTypes.object, // The administration workspace context
   actionFeedbackContext: PropTypes.any, // The action feedback context
   t: PropTypes.func, // The translation function
 };
 
-export default withActionFeedback(withAdministrationWorkspace(withTranslation('common')(DisplayEmailNotificationsAdministration)));
+export default withAppContext(withActionFeedback(withAdministrationWorkspace(withTranslation('common')(DisplayEmailNotificationsAdministration))));

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

@@ -1,3 +1,5 @@
+import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
+import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
 
 /**
  * Returns the default app context for the unit test
@@ -6,6 +8,7 @@
  */
 export function defaultAppContext(appContext) {
   const defaultAppContext = {
+    siteSettings: new SiteSettings(siteSettingsFixture)
   };
   return Object.assign(defaultAppContext, appContext || {});
 }

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

@@ -190,12 +190,12 @@ class DisplayInternationalizationAdministration extends React.Component {
   render() {
     return (
       <div className="row">
-        <div className="internationalisation-settings col8">
+        <div className="internationalisation-settings col7">
           <h3><Trans>Internationalisation</Trans></h3>
           <form className="form">
             <div className="input select locale">
               <label htmlFor="app-locale-input"><Trans>Language</Trans></label>
-              <select className="large" id="locale-input" name="locale" value={this.state.locale} onChange={this.handleInputChange}>
+              <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}
@@ -207,12 +207,14 @@ class DisplayInternationalizationAdministration extends React.Component {
           </form>
         </div>
         <div className="col4 last">
-          <h3><Trans>Want to contribute?</Trans></h3>
-          <p><Trans>Your language is missing or you discovered an error in the translation, help us to improve passbolt.</Trans></p>
-          <a className="button" href="https://help.passbolt.com/contribute/translation" target="_blank" rel="noopener noreferrer">
-            <Icon name="heart-o"/>
-            <span><Trans>Contribute</Trans></span>
-          </a>
+          <div className="sidebar-help">
+            <h3><Trans>Want to contribute?</Trans></h3>
+            <p><Trans>Your language is missing or you discovered an error in the translation, help us to improve passbolt.</Trans></p>
+            <a className="button" href="https://help.passbolt.com/contribute/translation" target="_blank" rel="noopener noreferrer">
+              <Icon name="heart-o"/>
+              <span><Trans>Contribute</Trans></span>
+            </a>
+          </div>
         </div>
       </div>
     );

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

@@ -409,7 +409,7 @@ class DisplayMfaAdministration extends React.Component {
   render() {
     return (
       <div className="row">
-        <div className="mfa-settings col8">
+        <div className="mfa-settings col7">
           <form className="form ready">
             <div className="provider-section totp">
               <h3>
@@ -451,20 +451,20 @@ class DisplayMfaAdministration extends React.Component {
                   <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">
+                  <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 message error">{this.state.yubikeyClientIdentifierError}</div>
+                    <div className="yubikey_client_identifier error-message">{this.state.yubikeyClientIdentifierError}</div>
                     }
                   </div>
-                  <div className="input text required">
+                  <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 message error">{this.state.yubikeySecretKeyError}</div>
+                    <div className="yubikey_secret_key error-message">{this.state.yubikeySecretKeyError}</div>
                     }
                   </div>
                 </div>
@@ -491,38 +491,38 @@ class DisplayMfaAdministration extends React.Component {
                   <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">
+                  <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 message error">{this.state.duoHostnameError}</div>
+                    <div className="duo_hostname error-message">{this.state.duoHostnameError}</div>
                     }
                   </div>
-                  <div className="input text required">
+                  <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 message error">{this.state.duoIntegrationKeyError}</div>
+                    <div className="duo_integration_key error-message">{this.state.duoIntegrationKeyError}</div>
                     }
                   </div>
-                  <div className="input text required">
+                  <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 message error">{this.state.duoSaltError}</div>
+                    <div className="duo_salt error-message">{this.state.duoSaltError}</div>
                     }
                   </div>
-                  <div className="input text required">
+                  <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 message error">{this.state.duoSecretKeyError}</div>
+                    <div className="duo_secret_key error-message">{this.state.duoSecretKeyError}</div>
                     }
                   </div>
                 </div>
@@ -532,12 +532,14 @@ class DisplayMfaAdministration extends React.Component {
           </form>
         </div>
         <div className="col4 last">
-          <h2><Trans>Need help?</Trans></h2>
-          <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"/>
-            <span><Trans>Read documentation</Trans></span>
-          </a>
+          <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"/>
+              <span><Trans>Read the documentation</Trans></span>
+            </a>
+          </div>
         </div>
       </div>
     );

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

@@ -120,42 +120,42 @@ export default class DisplayMfaAdministrationPage {
    * Returns the yubikey client identifier error mesage input element
    */
   get yubikeyClientIdentifierErrorMessage() {
-    return this._page.container.querySelector('.yubikey_client_identifier.error.message').textContent;
+    return this._page.container.querySelector('.yubikey_client_identifier.error-message').textContent;
   }
 
   /**
    * Returns the yubikey client identifier error mesage input element
    */
   get yubikeySecretKeyErrorMessage() {
-    return this._page.container.querySelector('.yubikey_secret_key.error.message').textContent;
+    return this._page.container.querySelector('.yubikey_secret_key.error-message').textContent;
   }
 
   /**
    * Returns the duo hostname error mesage input element
    */
   get duoHostnameErrorMessage() {
-    return this._page.container.querySelector('.duo_hostname.error.message').textContent;
+    return this._page.container.querySelector('.duo_hostname.error-message').textContent;
   }
 
   /**
    * Returns the duo integration key error mesage input element
    */
   get duoIntegrationKeyErrorMessage() {
-    return this._page.container.querySelector('.duo_integration_key.error.message').textContent;
+    return this._page.container.querySelector('.duo_integration_key.error-message').textContent;
   }
 
   /**
    * Returns the duo salt error mesage input element
    */
   get duoSaltErrorMessage() {
-    return this._page.container.querySelector('.duo_salt.error.message').textContent;
+    return this._page.container.querySelector('.duo_salt.error-message').textContent;
   }
 
   /**
    * Returns the duo secret key error mesage input element
    */
   get duoSecretKeyErrorMessage() {
-    return this._page.container.querySelector('.duo_secret_key.error.message').textContent;
+    return this._page.container.querySelector('.duo_secret_key.error-message').textContent;
   }
 
   /**

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

@@ -34,4 +34,3 @@ Initial.args = {
     })
   }
 };
-

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

@@ -289,7 +289,7 @@ class DisplaySimulateSynchronizeUserDirectoryAdministration extends Component {
           onClose={this.handleClose} disabled={this.isLoading()}>
           <div className="form-content" onSubmit={this.handleFormSubmit}>
             <p>
-              <strong><Trans>The operation was successfull.</Trans></strong>
+              <strong><Trans>The operation was successful.</Trans></strong>
             </p>
             <p></p>
             {this.hasSuccessResource() &&

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

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

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

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

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

@@ -21,6 +21,7 @@ import {withDialog} from "../../../../react-extension/contexts/DialogContext";
 import EditSubscriptionKey from "../EditSubscriptionKey/EditSubscriptionKey";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
 import Icon from "../../Common/Icons/Icon";
+import AnimatedFeedback from "../../Common/Icons/AnimatedFeedback";
 
 /**
  * This component allows to display the subscription key for the administration
@@ -316,37 +317,16 @@ class DisplaySubscriptionKey extends React.Component {
         {!this.isLoading() &&
         <div className="subscription-key col8">
           <h3><Trans>Subscription key details</Trans></h3>
-          <div className="message animated">
-            <div className="illustration">
-              {this.hasValidSubscription() && !this.hasSubscriptionKeyGoingToExpire() &&
-              <svg id="successAnimation" className="animated" xmlns="http://www.w3.org/2000/svg" width="170"
-                height="170" viewBox="0 0 70 70">
-                <circle id="successAnimationCircle" cx="35" cy="35" r="24" stroke="#000000" strokeWidth="3"
-                  strokeLinecap="round" fill="transparent"/>
-                <polyline id="successAnimationCheck" stroke="#000000" strokeWidth="3" points="23 34 34 43 47 27"
-                  linecap="round" fill="transparent"/>
-              </svg>
-              }
-              {this.hasInvalidSubscription() &&
-              <svg id="errorAnimation" className="animated" xmlns="http://www.w3.org/2000/svg" width="170"
-                height="170" viewBox="0 0 70 70">
-                <circle id="errorAnimationCircle" cx="35" cy="35" r="24" stroke="#000000" strokeWidth="3"
-                  strokeLinecap="round" fill="transparent"/>
-                <polyline id="errorAnimationCross" stroke="#000000" strokeWidth="3" points="26 26 44 44"
-                  linecap="round" fill="transparent"/>
-                <polyline id="errorAnimationCross" stroke="#000000" strokeWidth="3" points="44 26 26 44"
-                  linecap="round" fill="transparent"/>
-              </svg>
-              }
-              {this.hasValidSubscription() && this.hasSubscriptionKeyGoingToExpire() &&
-              <svg id="warningAnimation" className="animated" xmlns="http://www.w3.org/2000/svg" width="170"
-                height="170" viewBox="0 0 70 70">
-                <polyline id="warningAnimation" className="round" stroke="#000000" strokeWidth="3" points="35 9 10 55 60 55 35 9" linecap="round" fill="transparent"></polyline>
-                <polyline id="warningAnimation" stroke="#000000" strokeWidth="3" points="35 23 35 42" linecap="square" fill="transparent"></polyline>
-                <polyline id="warningAnimation" stroke="#000000" strokeWidth="3" points="35 50 35 50" linecap="square" fill="transparent"></polyline>
-              </svg>
-              }
-            </div>
+          <div className="feedback-card">
+            {this.hasValidSubscription() && !this.hasSubscriptionKeyGoingToExpire() &&
+            <AnimatedFeedback name="success" />
+            }
+            {this.hasInvalidSubscription() &&
+            <AnimatedFeedback name="warning" />
+            }
+            {this.hasValidSubscription() && this.hasSubscriptionKeyGoingToExpire() &&
+            <AnimatedFeedback name="error" />
+            }
             <div className="subscription-information">
               {!this.hasSubscriptionKey() &&
               <>
@@ -383,7 +363,7 @@ class DisplaySubscriptionKey extends React.Component {
                   <span
                     className={`label ${this.hasLimitUsersExceeded() ? "error" : ""}`}><Trans>Users limit:</Trans></span>
                   <span
-                    className={`value ${this.hasLimitUsersExceeded() ? "error" : ""}`}>{this.state.users} (<Trans>curently:</Trans> {this.state.activeUsers})</span>
+                    className={`value ${this.hasLimitUsersExceeded() ? "error" : ""}`}>{this.state.users} (<Trans>currently:</Trans> {this.state.activeUsers})</span>
                 </li>
                 <li className="created">
                   <span className="label"><Trans>Valid from:</Trans></span>
@@ -418,12 +398,14 @@ class DisplaySubscriptionKey extends React.Component {
         }
         {!this.isLoading() &&
         <div className="col4 last">
-          <h2><Trans>Need help?</Trans></h2>
-          <p><Trans>For any change or question related to your passbolt subscription, kindly contact our sales team.</Trans></p>
-          <a className="button" target="_blank" rel="noopener noreferrer" href="https://www.passbolt.com/contact">
-            <Icon name="envelope"/>
-            <span><Trans>Contact Sales</Trans></span>
-          </a>
+          <div className="sidebar-help">
+            <h3><Trans>Need help?</Trans></h3>
+            <p><Trans>For any change or question related to your passbolt subscription, kindly contact our sales team.</Trans></p>
+            <a className="button" target="_blank" rel="noopener noreferrer" href="https://www.passbolt.com/contact">
+              <Icon name="envelope"/>
+              <span><Trans>Contact Sales</Trans></span>
+            </a>
+          </div>
         </div>
         }
       </div>

package/src/react-extension/components/Administration/DisplaySubscriptionKey/DisplaySubscriptionKey.test.data.js

@@ -40,13 +40,16 @@ export function formatDate(date) {
   }
 }
 
+const expiredDate = new Date();
+expiredDate.setMonth(expiredDate.getMonth() + 3);
+
 export const mockSubscription = {
   "customer_id": "1n6BPvHRWfizhmARz",
   "subscription_id": "1n6BPvHRWfizhmARz",
   "users": 5,
   "email": "ada@passbolt.com",
   "created": "2020-12-01",
-  "expiry": "2021-12-01",
+  "expiry": formatDate(expiredDate.toISOString()),
   "data": "data"
 };
 

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

@@ -61,7 +61,7 @@ describe("As AD I should see the subscription", () => {
       expect(page.customerId).toBe(mockSubscription.customer_id);
       expect(page.subscriptionId).toBe(mockSubscription.subscription_id);
       expect(page.email).toBe(mockSubscription.email);
-      expect(page.users).toBe(`${mockSubscription.users} (curently: ${mockUsers.length})`);
+      expect(page.users).toBe(`${mockSubscription.users} (currently: ${mockUsers.length})`);
       expect(page.created).toBe(`${formatDate(mockSubscription.created)}`);
       expect(page.expiry).toBe(`${formatDate(mockSubscription.expiry)} (${DateTime.fromISO(mockSubscription.expiry).toRelative()})`);
       expect(page.help).toBeTruthy();
@@ -81,7 +81,7 @@ describe("As AD I should see the subscription", () => {
       expect(page.customerId).toBe(mockSubscriptionUsersExceeded.customer_id);
       expect(page.subscriptionId).toBe(mockSubscriptionUsersExceeded.subscription_id);
       expect(page.email).toBe(mockSubscriptionUsersExceeded.email);
-      expect(page.users).toBe(`${mockSubscriptionUsersExceeded.users} (curently: ${mockUsers.length})`);
+      expect(page.users).toBe(`${mockSubscriptionUsersExceeded.users} (currently: ${mockUsers.length})`);
       expect(page.created).toBe(`${formatDate(mockSubscriptionUsersExceeded.created)}`);
       expect(page.expiry).toBe(`${formatDate(mockSubscriptionUsersExceeded.expiry)} (${DateTime.fromISO(mockSubscriptionUsersExceeded.expiry).toRelative()})`);
 
@@ -102,7 +102,7 @@ describe("As AD I should see the subscription", () => {
       expect(page.customerId).toBe(mockSubscriptionExpired.customer_id);
       expect(page.subscriptionId).toBe(mockSubscriptionExpired.subscription_id);
       expect(page.email).toBe(mockSubscriptionExpired.email);
-      expect(page.users).toBe(`${mockSubscriptionExpired.users} (curently: ${mockUsers.length})`);
+      expect(page.users).toBe(`${mockSubscriptionExpired.users} (currently: ${mockUsers.length})`);
       expect(page.created).toBe(`${formatDate(mockSubscriptionExpired.created)}`);
       expect(page.expiry).toBe(`${formatDate(mockSubscriptionExpired.expiry)} (expired ${DateTime.fromISO(mockSubscriptionExpired.expiry).toRelative()})`);
 
@@ -183,7 +183,7 @@ describe("As AD I should see the subscription", () => {
       expect(page.customerId).toBe(mockSubscriptionUpdated.customer_id);
       expect(page.subscriptionId).toBe(mockSubscriptionUpdated.subscription_id);
       expect(page.email).toBe(mockSubscriptionUpdated.email);
-      expect(page.users).toBe(`${mockSubscriptionUpdated.users} (curently: ${mockUsers.length})`);
+      expect(page.users).toBe(`${mockSubscriptionUpdated.users} (currently: ${mockUsers.length})`);
       expect(page.created).toBe(`${formatDate(mockSubscriptionUpdated.created)}`);
       expect(page.expiry).toBe(`${formatDate(mockSubscriptionUpdated.expiry)} (${DateTime.fromISO(mockSubscriptionUpdated.expiry).toRelative()})`);
       expect(propsUpdated.administrationWorkspaceContext.onResetActionsSettings).toHaveBeenCalled();

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

@@ -287,7 +287,7 @@ class DisplaySynchronizeUserDirectoryAdministration extends Component {
           onClose={this.handleClose} disabled={this.isLoading()}>
           <div className="form-content" onSubmit={this.handleFormSubmit}>
             <p>
-              <strong><Trans>The operation was successfull.</Trans></strong>
+              <strong><Trans>The operation was successful.</Trans></strong>
             </p>
             <p></p>
             {this.hasSuccessResource() &&