passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/ExtAuthenticationAccountRecovery.js

@@ -0,0 +1,173 @@
+/**
+ * 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, {Component} from "react";
+import PropTypes from "prop-types";
+import AppContext from "./contexts/AppContext";
+import TranslationProvider from "./components/Common/Internationalisation/TranslationProvider";
+import SiteSettings from "../shared/lib/Settings/SiteSettings";
+import Footer from "./components/Common/Footer/Footer";
+import ChangeLocale from "./components/Internationalisation/ChangeLocale/ChangeLocale";
+import AuthenticationAccountRecoveryContextProvider from "./contexts/Authentication/AuthenticationAccountRecoveryContext";
+import OrchestrateAccountRecovery
+  from "./components/AuthenticationAccountRecovery/OrchestrateAccountRecovery/OrchestrateAccountRecovery";
+
+/**
+ * The account recovery application served by the browser extension.
+ */
+class ExtAuthenticationAccountRecovery extends Component {
+  /**
+   * Default constructor
+   * @param {object} props Component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState(props);
+  }
+
+  /**
+   * Returns the component default state
+   * @param {object} props The component props
+   */
+  defaultState(props) {
+    return {
+      port: props.port, // The background page communication port.
+      siteSettings: null, // The site settings
+      extensionVersion: null, // The extension version
+
+      // Locale
+      locale: null, // The locale
+      onUpdateLocaleRequested: this.onUpdateLocaleRequested.bind(this),
+      onRefreshLocaleRequested: this.onRefreshLocaleRequested.bind(this),
+    };
+  }
+
+  /**
+   * Returns the component default state
+   */
+  get defaultContextValue() {
+    return {
+      port: this.props.port,
+      storage: this.props.storage,
+      trustedDomain: null, // The site domain (use trusted domain for compatibility with browser extension applications)
+    };
+  }
+
+  /**
+   * Whenever the component is mounted
+   */
+  async componentDidMount() {
+    this.removeSkeleton();
+    await this.getSiteSettings();
+    await this.getExtensionVersion();
+    this.initLocale();
+  }
+
+  /**
+   * Remove skeleton preloaded in html if any
+   */
+  removeSkeleton() {
+    const skeleton = document.getElementById("temporary-skeleton");
+    if (skeleton) {
+      skeleton.remove();
+    }
+  }
+
+  /**
+   * Si the component ready
+   * @returns {boolean}
+   */
+  isReady() {
+    return this.state.siteSettings !== null && this.state.locale !== null;
+  }
+
+  /**
+   * Get the list of site settings from background page and set it in the state
+   * Using SiteSettings
+   */
+  async getSiteSettings() {
+    const settings = await this.props.port.request("passbolt.organization-settings.get");
+    const siteSettings = new SiteSettings(settings);
+    const trustedDomain = siteSettings.url;
+    this.setState({siteSettings, trustedDomain});
+  }
+
+  /**
+   * Get extension version
+   */
+  async getExtensionVersion() {
+    const extensionVersion = await this.props.port.request('passbolt.addon.get-version');
+    this.setState({extensionVersion});
+  }
+
+  /**
+   * Init the locale
+   */
+  async initLocale() {
+    const {locale} = await this.props.port.request("passbolt.locale.get");
+    this.setState({locale});
+  }
+
+  /**
+   * Whenever the update of the locale is requested
+   * @param {string} locale The locale identifier
+   */
+  async onUpdateLocaleRequested(locale) {
+    const localeDto = {locale};
+    await this.props.port.request("passbolt.locale.update-user-locale", localeDto);
+    this.onRefreshLocaleRequested(locale);
+  }
+
+  /**
+   * Whenever the refresh of the locale is requested
+   */
+  async onRefreshLocaleRequested() {
+    const {locale} = await this.props.port.request("passbolt.locale.get");
+    this.setState({locale});
+  }
+
+  /**
+   * Renders the component
+   */
+  render() {
+    return (
+      <AppContext.Provider value={this.state}>
+        {this.isReady() &&
+        <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
+          <AuthenticationAccountRecoveryContextProvider>
+            <div id="container" className="container page login">
+              <div className="content">
+                <div className="header">
+                  <div className="logo"><span className="visually-hidden">Passbolt</span></div>
+                </div>
+                <div className="login-form">
+                  <OrchestrateAccountRecovery/>
+                </div>
+                <ChangeLocale/>
+              </div>
+            </div>
+            <Footer/>
+          </AuthenticationAccountRecoveryContextProvider>
+        </TranslationProvider>
+        }
+      </AppContext.Provider>
+    );
+  }
+}
+
+ExtAuthenticationAccountRecovery.propTypes = {
+  port: PropTypes.object,
+  storage: PropTypes.object,
+};
+export default ExtAuthenticationAccountRecovery;

package/src/react-extension/ExtAuthenticationLogin.js

@@ -13,15 +13,15 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import AuthenticationContextProvider, {AuthenticationContext} from "./contexts/AuthenticationContext";
-import ManageDialogs from "./components/Common/Dialog/ManageDialogs/ManageDialogs";
-import DialogContextProvider from "./contexts/DialogContext";
 import {BrowserRouter as Router} from "react-router-dom";
-import OrchestrateLogin from "./components/AuthenticationLogin/OrchestrateLogin/OrchestrateLogin";
+import AppContext from "./contexts/AppContext";
+import TranslationProvider from "./components/Common/Internationalisation/TranslationProvider";
+import AuthenticationLoginContextProvider from "./contexts/Authentication/AuthenticationLoginContext";
 import SiteSettings from "../shared/lib/Settings/SiteSettings";
+import UserSettings from "../shared/lib/Settings/UserSettings";
+import OrchestrateLoginBoxMain from "./components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxMain";
 import Footer from "./components/Common/Footer/Footer";
-import TranslationProvider from "./components/Common/Internationalisation/TranslationProvider";
-import AppContext from "./contexts/AppContext";
+import OrchestrateLoginBoxFooter from "./components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxFooter";
 
 /**
  * The login application served by the browser extension.
@@ -33,11 +33,12 @@ class ExtAuthenticationLogin extends Component {
    */
   constructor(props) {
     super(props);
-    this.state = this.defaultState;
+    this.state = this.defaultState(props);
   }
 
   async componentDidMount() {
     this.removeSkeleton();
+    await this.initializeUserSettings();
     await this.getSiteSettings();
     await this.getExtensionVersion();
     this.initLocale();
@@ -56,8 +57,10 @@ class ExtAuthenticationLogin extends Component {
   /**
    * Returns the component default state
    */
-  get defaultState() {
+  defaultState(props) {
     return {
+      port: props.port, // The background page communication port
+      storage: props.storage, // The storage
       siteSettings: null, // The site settings
       extensionVersion: null, // The extension version
       locale: null, // The locale
@@ -67,20 +70,20 @@ class ExtAuthenticationLogin extends Component {
     };
   }
 
-  /**
-   * Returns the component default state
-   */
-  get defaultContextValue() {
-    return {
-      port: this.props.port,
-      storage: this.props.storage,
-    };
-  }
-
   isReady() {
     return this.state.siteSettings !== null && this.state.locale !== null;
   }
 
+  /**
+   * Initialize the user settings.
+   * @returns {Promise<void>}
+   */
+  async initializeUserSettings() {
+    const storageData = await this.props.storage.local.get(["_passbolt_data"]);
+    const userSettings = new UserSettings(storageData._passbolt_data.config);
+    await this.setState({userSettings});
+  }
+
   /**
    * Get the list of site settings from background page and set it in the state
    * Using SiteSettings
@@ -124,22 +127,22 @@ class ExtAuthenticationLogin extends Component {
         {this.isReady() &&
         <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
           <Router>
-            <AuthenticationContextProvider value={this.defaultContextValue}>
-              <DialogContextProvider>
-                <div id="container" className="container page login">
-                  <ManageDialogs/>
-                  <div className="content">
-                    <div className="header">
-                      <div className="logo"><span className="visually-hidden">Passbolt</span></div>
-                    </div>
-                    <div className="login-form">
-                      <OrchestrateLogin/>
-                    </div>
+            <AuthenticationLoginContextProvider>
+              <div id="container" className="container page login">
+                <div className="content">
+                  <div className="header">
+                    <div className="logo"><span className="visually-hidden">Passbolt</span></div>
+                  </div>
+                  <div className="login-form">
+                    <OrchestrateLoginBoxMain/>
+                  </div>
+                  <div className="login-box-footer">
+                    <OrchestrateLoginBoxFooter/>
                   </div>
                 </div>
-                <Footer/>
-              </DialogContextProvider>
-            </AuthenticationContextProvider>
+              </div>
+              <Footer/>
+            </AuthenticationLoginContextProvider>
           </Router>
         </TranslationProvider>
         }
@@ -148,7 +151,6 @@ class ExtAuthenticationLogin extends Component {
   }
 }
 
-ExtAuthenticationLogin.contextType = AuthenticationContext;
 ExtAuthenticationLogin.propTypes = {
   port: PropTypes.object,
   storage: PropTypes.object,

package/src/react-extension/ExtAuthenticationRecover.js

@@ -14,14 +14,12 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import AppContext from "./contexts/AppContext";
-import AuthenticationContextProvider, {AuthenticationContext} from "./contexts/AuthenticationContext";
-import ManageDialogs from "./components/Common/Dialog/ManageDialogs/ManageDialogs";
-import DialogContextProvider from "./contexts/DialogContext";
+import TranslationProvider from "./components/Common/Internationalisation/TranslationProvider";
+import AuthenticationRecoverContextProvider from "./contexts/Authentication/AuthenticationRecoverContext";
 import RecoverAuthentication from "./components/AuthenticationRecover/RecoverAuthentication/RecoverAuthentication";
 import SiteSettings from "../shared/lib/Settings/SiteSettings";
 import Footer from "./components/Common/Footer/Footer";
-import TranslationProvider from "./components/Common/Internationalisation/TranslationProvider";
-import ChangeExtAuthenticationLocale from "./components/Internationalisation/ChangeLocale/ChangeExtAuthenticationLocale";
+import ChangeLocale from "./components/Internationalisation/ChangeLocale/ChangeLocale";
 
 /**
  * The recover application served by the browser extension.
@@ -29,25 +27,27 @@ import ChangeExtAuthenticationLocale from "./components/Internationalisation/Cha
 class ExtAuthenticationRecover extends Component {
   /**
    * Default constructor
-   * @param props Component props
+   * @param {object} props Component props
    */
   constructor(props) {
     super(props);
-    this.state = this.defaultState;
+    this.state = this.defaultState(props);
   }
 
   /**
    * Returns the component default state
+   * @param {object} props The component props
    */
-  get defaultState() {
+  defaultState(props) {
     return {
+      port: props.port, // The background page communication port.
       siteSettings: null, // The site settings
       extensionVersion: null, // The extension version
-      locale: null, // The locale
 
       // Locale
+      locale: null, // The locale
       onUpdateLocaleRequested: this.onUpdateLocaleRequested.bind(this),
-      onRefreshLocaleRequested: this.onRefreshLocaleRequested.bind(this),
+      initLocale: this.initLocale.bind(this), // Recover require to re-init the locale after the recover start retrieved the user locale.
     };
   }
 
@@ -69,7 +69,7 @@ class ExtAuthenticationRecover extends Component {
     this.removeSkeleton();
     await this.getSiteSettings();
     await this.getExtensionVersion();
-    this.initLocale();
+    await this.initLocale();
   }
 
   /**
@@ -120,14 +120,6 @@ class ExtAuthenticationRecover extends Component {
   async onUpdateLocaleRequested(locale) {
     const localeDto = {locale};
     await this.props.port.request("passbolt.locale.update-user-locale", localeDto);
-    this.onRefreshLocaleRequested(locale);
-  }
-
-  /**
-   * Whenever the refresh of the locale is requested
-   */
-  async onRefreshLocaleRequested() {
-    const {locale} = await this.props.port.request("passbolt.locale.get");
     this.setState({locale});
   }
 
@@ -139,23 +131,20 @@ class ExtAuthenticationRecover extends Component {
       <AppContext.Provider value={this.state}>
         {this.isReady() &&
         <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
-          <AuthenticationContextProvider value={this.defaultContextValue}>
-            <DialogContextProvider>
-              <div id="container" className="container page login">
-                <ManageDialogs/>
-                <div className="content">
-                  <div className="header">
-                    <div className="logo"><span className="visually-hidden">Passbolt</span></div>
-                  </div>
-                  <div className="login-form">
-                    <RecoverAuthentication siteSettings={this.state.siteSettings}/>
-                  </div>
-                  <ChangeExtAuthenticationLocale/>
+          <AuthenticationRecoverContextProvider>
+            <div id="container" className="container page login">
+              <div className="content">
+                <div className="header">
+                  <div className="logo"><span className="visually-hidden">Passbolt</span></div>
+                </div>
+                <div className="login-form">
+                  <RecoverAuthentication/>
                 </div>
+                <ChangeLocale/>
               </div>
-              <Footer/>
-            </DialogContextProvider>
-          </AuthenticationContextProvider>
+            </div>
+            <Footer/>
+          </AuthenticationRecoverContextProvider>
         </TranslationProvider>
         }
       </AppContext.Provider>
@@ -163,7 +152,6 @@ class ExtAuthenticationRecover extends Component {
   }
 }
 
-ExtAuthenticationRecover.contextType = AuthenticationContext;
 ExtAuthenticationRecover.propTypes = {
   port: PropTypes.object,
   storage: PropTypes.object,

package/src/react-extension/ExtAuthenticationSetup.js

@@ -13,15 +13,13 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import AuthenticationContextProvider from "./contexts/AuthenticationContext";
-import ManageDialogs from "./components/Common/Dialog/ManageDialogs/ManageDialogs";
-import DialogContextProvider from "./contexts/DialogContext";
-import SetupAuthentication from "./components/AuthenticationSetup/SetupAuthentication/SetupAuthentication";
-import SiteSettings from "../shared/lib/Settings/SiteSettings";
-import Footer from "./components/Common/Footer/Footer";
 import AppContext from "./contexts/AppContext";
 import TranslationProvider from "./components/Common/Internationalisation/TranslationProvider";
-import ChangeAuthenticationLocale from "./components/Internationalisation/ChangeLocale/ChangeExtAuthenticationLocale";
+import AuthenticationSetupContextProvider from "./contexts/Authentication/AuthenticationSetupContext";
+import SiteSettings from "../shared/lib/Settings/SiteSettings";
+import SetupAuthentication from "./components/AuthenticationSetup/SetupAuthentication/SetupAuthentication";
+import Footer from "./components/Common/Footer/Footer";
+import ChangeLocale from "./components/Internationalisation/ChangeLocale/ChangeLocale";
 
 /**
  * The setup application served by the browser extension.
@@ -33,32 +31,22 @@ class ExtAuthenticationSetup extends Component {
    */
   constructor(props) {
     super(props);
-    this.state = this.defaultState;
+    this.state = this.defaultState(props);
   }
 
   /**
    * Returns the component default state
+   * @param {object} props The component props
    */
-  get defaultState() {
+  defaultState(props) {
     return {
+      port: props.port, // The background page communication port.
       siteSettings: null, // The site settings
       extensionVersion: null, // The extension version
-      locale: null, // The locale
 
       // Locale
+      locale: null, // The locale
       onUpdateLocaleRequested: this.onUpdateLocaleRequested.bind(this),
-      onRefreshLocaleRequested: this.onRefreshLocaleRequested.bind(this),
-    };
-  }
-
-  /**
-   * Returns the component default state
-   */
-  get defaultContextValue() {
-    return {
-      port: this.props.port,
-      storage: this.props.storage,
-      trustedDomain: null, // The site domain (use trusted domain for compatibility with browser extension applications)
     };
   }
 
@@ -108,7 +96,7 @@ class ExtAuthenticationSetup extends Component {
    * Init the locale
    */
   async initLocale() {
-    const {locale} = await this.props.port.request("passbolt.locale.get");
+    const {locale} = await this.props.port.request("passbolt.setup.get-and-init-locale");
     this.setState({locale});
   }
 
@@ -118,14 +106,7 @@ class ExtAuthenticationSetup extends Component {
    */
   async onUpdateLocaleRequested(locale) {
     const localeDto = {locale};
-    await this.props.port.request("passbolt.locale.update-user-locale", localeDto);
-    this.onRefreshLocaleRequested(locale);
-  }
-
-  /**
-   * Whenever the refresh of the locale is requested
-   */
-  onRefreshLocaleRequested(locale) {
+    await this.props.port.request("passbolt.setup.update-locale", localeDto);
     this.setState({locale});
   }
 
@@ -137,23 +118,20 @@ class ExtAuthenticationSetup extends Component {
       <AppContext.Provider value={this.state}>
         {this.isReady() &&
         <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
-          <AuthenticationContextProvider value={this.defaultContextValue}>
-            <DialogContextProvider>
-              <div id="container" className="container page login">
-                <ManageDialogs/>
-                <div className="content">
-                  <div className="header">
-                    <div className="logo"><span className="visually-hidden">Passbolt</span></div>
-                  </div>
-                  <div className="login-form">
-                    <SetupAuthentication siteSettings={this.state.siteSettings}/>
-                  </div>
-                  <ChangeAuthenticationLocale/>
+          <AuthenticationSetupContextProvider>
+            <div id="container" className="container page login">
+              <div className="content">
+                <div className="header">
+                  <div className="logo"><span className="visually-hidden">Passbolt</span></div>
+                </div>
+                <div className="login-form">
+                  <SetupAuthentication/>
                 </div>
+                <ChangeLocale/>
               </div>
-              <Footer/>
-            </DialogContextProvider>
-          </AuthenticationContextProvider>
+            </div>
+            <Footer/>
+          </AuthenticationSetupContextProvider>
         </TranslationProvider>
         }
       </AppContext.Provider>

package/src/react-extension/ExtBootstrapAccountRecovery.js

@@ -0,0 +1,75 @@
+/**
+ * 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, {Component} from "react";
+import PropTypes from "prop-types";
+import InsertAccountRecoveryIframe
+  from "./components/AuthenticationAccountRecovery/OrchestrateAccountRecovery/InsertAccountRecoveryIframe";
+import InsertFileIframe from "./components/InsertFileIframe";
+
+/**
+ * The bootstrap of the account recovery application served by the browser extension.
+ * This application is inserted in the page served by the API and inject the iframe that will contain the recover application.
+ */
+class ExtBootstrapAccountRecovery extends Component {
+  /**
+   * Whenever the component is mounted
+   */
+  componentDidMount() {
+    this.removeSkeleton();
+    this.handleRemoveIframeRequested();
+  }
+
+  /**
+   * Remove skeleton preloaded in html if any
+   */
+  removeSkeleton() {
+    const skeleton = document.getElementById("temporary-skeleton");
+    if (skeleton) {
+      skeleton.remove();
+    }
+  }
+
+  /**
+   * Whenever the background page request the recover iframe to be removed.
+   */
+  handleRemoveIframeRequested() {
+    this.props.port.on("passbolt.account-recovery-bootstrap.remove-iframe", this.removeAccountRecoveryIframe.bind(this));
+  }
+
+  /**
+   * Remove the iframe
+   */
+  removeAccountRecoveryIframe() {
+    const iframe = document.getElementById("passbolt-iframe-account-recovery");
+    if (iframe) {
+      iframe.remove();
+    }
+  }
+
+  render() {
+    return (
+      <>
+        <InsertAccountRecoveryIframe browserExtensionUrl={this.props.browserExtensionUrl}/>
+        <InsertFileIframe browserExtensionUrl={this.props.browserExtensionUrl}/>
+      </>
+    );
+  }
+}
+ExtBootstrapAccountRecovery.propTypes = {
+  browserExtensionUrl: PropTypes.string, // The browser extension url
+  port: PropTypes.object, // The communication port
+};
+
+export default ExtBootstrapAccountRecovery;

package/src/react-extension/ExtBootstrapApp.js

@@ -120,7 +120,9 @@ class ExtBootstrapApp extends Component {
               </>
             </Route>
             <Route exact path={[
+              "/app/account-recovery/requests/review/:accountRecoveryRequestId",
               "/app/administration/subscription",
+              "/app/administration/account-recovery",
               "/app/folders/view/:filterByFolderId",
               "/app/groups/view/:selectedGroupId",
               "/app/groups/edit/:selectedGroupId",
@@ -132,6 +134,8 @@ class ExtBootstrapApp extends Component {
               "/app/settings/passphrase",
               "/app/settings/security-token",
               "/app/settings/mobile",
+              "/app/settings/account-recovery",
+              "/app/settings/account-recovery/edit",
               "/app/settings/theme",
               "/app/users/view/:selectedUserId",
               "/app/users",