passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/ApiAccountRecovery.js

@@ -0,0 +1,233 @@
+/**
+ * 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 AppContext from "./contexts/AppContext";
+import ApiAccountRecoveryContextProvider from "./contexts/ApiAccountRecoveryContext";
+import {ApiClientOptions} from "../shared/lib/apiClient/apiClientOptions";
+import Footer from "./components/Common/Footer/Footer";
+import {ApiClient} from "../shared/lib/apiClient/apiClient";
+import SiteSettings from "../shared/lib/Settings/SiteSettings";
+import TranslationProvider from "./components/Common/Internationalisation/TranslationProvider";
+import ChangeApiRecoverLocale from "./components/Internationalisation/ChangeLocale/ChangeApiRecoverLocale";
+import OrchestrateApiAccountRecovery
+  from "./components/AuthenticationAccountRecovery/OrchestrateApiAccountRecovery/OrchestrateApiAccountRecovery";
+
+/**
+ * The recover application served by the API.
+ */
+class ApiAccountRecovery extends Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.userId = null; // The recover user id
+    this.authenticationToken = null; // The authentication token
+    this.initializeProperties();
+  }
+
+  /**
+   * Returns the component default state
+   * @return {object}
+   */
+  get defaultState() {
+    return {
+      siteSettings: null, // The site settings
+      trustedDomain: this.baseUrl, // The site domain (use trusted domain for compatibility with browser extension applications)
+      getApiClientOptions: this.getApiClientOptions.bind(this), // Get the api client options
+      locale: null, // The locale
+
+      // Locale
+      onUpdateLocaleRequested: this.onUpdateLocaleRequested.bind(this),
+    };
+  }
+
+  /**
+   * ComponentDidMount
+   * Invoked immediately after component is inserted into the tree
+   * @return {void}
+   */
+  async componentDidMount() {
+    await this.getSiteSettings();
+    this.initLocale();
+  }
+
+  /**
+   * Initialize properties
+   */
+  initializeProperties() {
+    const uuidRegex = "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[0-5][a-fA-F0-9]{3}-[089aAbB][a-fA-F0-9]{3}-[a-fA-F0-9]{12}";
+    const recoverBootstrapRegex = `account-recovery\/requests\/(${uuidRegex})\/(${uuidRegex})$`;
+    const regex = new RegExp(recoverBootstrapRegex);
+    const match = window.location.pathname.match(regex);
+    if (!match) {
+      console.error("Unable to parse the url.");
+      return;
+    }
+    this.userId = match[1];
+    this.authenticationToken = match[2];
+  }
+
+  /**
+   * Get the application base url
+   * @return {string}
+   */
+  get baseUrl() {
+    const baseElement = document.getElementsByTagName('base') && document.getElementsByTagName('base')[0];
+    if (baseElement) {
+      return baseElement.attributes.href.value.replace(/\/*$/g, '');
+    }
+    console.error("Unable to retrieve the page base tag");
+    return "";
+  }
+
+  /**
+   * Get the API client options
+   * @returns {ApiClientOptions}
+   */
+  getApiClientOptions() {
+    return new ApiClientOptions()
+      .setBaseUrl(this.state.trustedDomain);
+  }
+
+  /**
+   * Retrieve the site settings
+   * @returns {Promise<SiteSettings>}
+   */
+  async getSiteSettings() {
+    const apiClientOptions = this.getApiClientOptions()
+      .setResourceName("settings");
+    const apiClient = new ApiClient(apiClientOptions);
+    const {body} = await apiClient.findAll();
+    const siteSettings = new SiteSettings(body);
+    await this.setState({siteSettings});
+  }
+
+  /**
+   * Init the locale following this priority:
+   * 1. The browser url locale if passed in argument;
+   *    It allows us to offer a consistent experience when the browser page is reloaded to detect the browser extension
+   *    but this one is not yet installed.
+   * 2. The browser locale if supported;
+   * 3. The browser similar locale;
+   * 4. The organization locale;
+   * @warning Require the site settings to be fetch to work.
+   */
+  initLocale() {
+    const locale = this.getUrlLocale()
+      || this.getBrowserLocale()
+      || this.getBrowserSimilarLocale()
+      || this.state.siteSettings.locale;
+    this.setState({locale});
+  }
+
+  /**
+   * Get the locale from the url i.e. ?locale=en-UK
+   * @returns {string}
+   */
+  getUrlLocale() {
+    const url = new URL(window.location.href);
+    const locale = url.searchParams.get('locale');
+    if (locale) {
+      const urlLocale = this.state.siteSettings.supportedLocales.find(supportedLocale => locale === supportedLocale.locale);
+      if (urlLocale) {
+        return urlLocale.locale;
+      }
+    }
+  }
+
+  /**
+   * Get the browser locale if supported.
+   * @returns {string}
+   */
+  getBrowserLocale() {
+    const browserSupportedLocale = this.state.siteSettings.supportedLocales.find(supportedLocale => navigator.language === supportedLocale.locale);
+    if (browserSupportedLocale) {
+      return browserSupportedLocale.locale;
+    }
+  }
+
+  /**
+   * Get the browser similar locale if supported.
+   * @returns {string}
+   */
+  getBrowserSimilarLocale() {
+    const nonExplicitLanguage = navigator.language.split('-')[0];
+    const similarSupportedLocale = this.state.siteSettings.supportedLocales.find(supportedLocale => nonExplicitLanguage === supportedLocale.locale.split('-')[0]);
+    if (similarSupportedLocale) {
+      return similarSupportedLocale.locale;
+    }
+  }
+
+  /**
+   * Whenever the update of the locale is requested
+   * @param {string} locale The locale identifier
+   */
+  async onUpdateLocaleRequested(locale) {
+    await this.setState({locale});
+    this.setUrlLocale(locale);
+  }
+
+  /**
+   * Update the locale url parameter.
+   * @param locale
+   */
+  setUrlLocale(locale) {
+    const url = new URL(window.location.href);
+    url.searchParams.set('locale', locale);
+    window.history.replaceState(null, null, url);
+  }
+
+  /**
+   * Is the application ready to render.
+   * @returns {boolean}
+   */
+  isReady() {
+    return this.state.siteSettings !== null && this.state.locale !== null;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <AppContext.Provider value={this.state}>
+        {this.isReady() &&
+        <TranslationProvider loadingPath={`${this.state.trustedDomain}/locales/{{lng}}/{{ns}}.json`}>
+          <ApiAccountRecoveryContextProvider value={{userId: this.userId, authenticationToken: this.authenticationToken}}>
+            <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">
+                  <OrchestrateApiAccountRecovery/>
+                </div>
+                <ChangeApiRecoverLocale/>
+              </div>
+            </div>
+            <Footer/>
+          </ApiAccountRecoveryContextProvider>
+        </TranslationProvider>
+        }
+      </AppContext.Provider>
+    );
+  }
+}
+
+export default ApiAccountRecovery;

package/src/react-extension/ApiApp.js

@@ -33,6 +33,8 @@ import ManageAnnouncements from "./components/Announcement/ManageAnnouncements/M
 import ApiAppContextProvider from "./contexts/ApiAppContext";
 import TranslationProvider from "./components/Common/Internationalisation/TranslationProvider";
 import AppContext from "./contexts/AppContext";
+import AccountRecoveryUserContextProvider from "./contexts/AccountRecoveryUserContext";
+import ApiAppAccountRecoveryUserService from "../shared/services/accountRecovery/ApiAppAccountRecoveryUserService";
 
 /**
  * The passbolt application served by the API.
@@ -43,60 +45,65 @@ import AppContext from "./contexts/AppContext";
  */
 class ApiApp extends Component {
   render() {
+    const accountRecoveryUserService = new ApiAppAccountRecoveryUserService();
     return (
       <ApiAppContextProvider>
         <AppContext.Consumer>
           {appContext =>
             <TranslationProvider loadingPath={`${appContext.trustedDomain}/locales/{{lng}}/{{ns}}.json`}>
-              <ActionFeedbackContextProvider>
-                <DialogContextProvider>
-                  <AnnouncementContextProvider>
-                    <ContextualMenuContextProvider>
-                      { /* Action Feedback Management */}
-                      <DisplayActionFeedbacks/>
-                      { /* Session expired handler */}
-                      <HandleSessionExpired/>
-                      { /* Announcement Management */}
-                      {appContext.loggedInUser && appContext.loggedInUser.role.name === "admin"
-                      && appContext.siteSettings.canIUse('ee')
-                      && <HandleSubscriptionAnnouncement/>}
+              <AccountRecoveryUserContextProvider accountRecoveryUserService={accountRecoveryUserService}>
+                <ActionFeedbackContextProvider>
+                  <DialogContextProvider>
+                    <AnnouncementContextProvider>
+                      <ContextualMenuContextProvider>
+                        { /* Action Feedback Management */}
+                        <DisplayActionFeedbacks/>
+                        { /* Session expired handler */}
+                        <HandleSessionExpired/>
 
-                      <Router basename={appContext.basename}>
-                        <NavigationContextProvider>
-                          <Switch>
-                            { /* The following routes are not handled by the browser extension application. */}
-                            <Route exact path={[
-                              "/app/administration/subscription"
-                            ]}/>
-                            <Route path="/app/administration">
-                              <AdministrationWorkspaceContextProvider>
+                        { /* Announcement Management */}
+                        {appContext.loggedInUser && appContext.loggedInUser.role.name === "admin"
+                        && appContext.siteSettings.canIUse('ee')
+                        && <HandleSubscriptionAnnouncement/>}
+
+                        <Router basename={appContext.basename}>
+                          <NavigationContextProvider>
+                            <Switch>
+                              { /* The following routes are not handled by the browser extension application. */}
+                              <Route exact path={[
+                                "/app/administration/subscription",
+                                "/app/administration/account-recovery"
+                              ]}/>
+                              <Route path="/app/administration">
+                                <AdministrationWorkspaceContextProvider>
+                                  <ManageDialogs/>
+                                  <ManageContextualMenu/>
+                                  <ManageAnnouncements/>
+                                  <AdministrationWorkspace/>
+                                </AdministrationWorkspaceContextProvider>
+                              </Route>
+                              <Route path="/app/settings/mfa">
                                 <ManageDialogs/>
                                 <ManageContextualMenu/>
                                 <ManageAnnouncements/>
-                                <AdministrationWorkspace/>
-                              </AdministrationWorkspaceContextProvider>
-                            </Route>
-                            <Route path="/app/settings/mfa">
-                              <ManageDialogs/>
-                              <ManageContextualMenu/>
-                              <ManageAnnouncements/>
-                              <div id="container" className="page settings">
-                                <div id="app" className="app" tabIndex="1000">
-                                  <div className="header first">
-                                    <DisplayMainMenu/>
+                                <div id="container" className="page settings">
+                                  <div id="app" className="app" tabIndex="1000">
+                                    <div className="header first">
+                                      <DisplayMainMenu/>
+                                    </div>
+                                    <DisplayApiUserSettingsWorkspace/>
                                   </div>
-                                  <DisplayApiUserSettingsWorkspace/>
                                 </div>
-                              </div>
-                            </Route>
-                          </Switch>
-                        </NavigationContextProvider>
-                      </Router>
-                      <Footer/>
-                    </ContextualMenuContextProvider>
-                  </AnnouncementContextProvider>
-                </DialogContextProvider>
-              </ActionFeedbackContextProvider>
+                              </Route>
+                            </Switch>
+                          </NavigationContextProvider>
+                        </Router>
+                        <Footer/>
+                      </ContextualMenuContextProvider>
+                    </AnnouncementContextProvider>
+                  </DialogContextProvider>
+                </ActionFeedbackContextProvider>
+              </AccountRecoveryUserContextProvider>
             </TranslationProvider>
           }
         </AppContext.Consumer>

package/src/react-extension/ExtApp.js

@@ -12,8 +12,6 @@
  * @since         2.12.0
  */
 
-/* eslint-disable no-unused-vars */
-/* eslint-enable no-unused-vars */
 import React, {Component} from "react";
 import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
 import PropTypes from "prop-types";
@@ -56,6 +54,13 @@ import HandleProgressEvents from "./components/Common/Progress/HandleProgressEve
 import HandleErrorEvents from "./components/Common/Error/HandleErrorEvents/HandleErrorEvents";
 import DisplayResourcesWorkspace from "./components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspace";
 import DragContextProvider from "./contexts/DragContext";
+import AccountRecoveryUserContextProvider from "./contexts/AccountRecoveryUserContext";
+import ExtAppAccountRecoveryUserService from "../shared/services/accountRecovery/ExtAppAccountRecoveryUserService";
+import HandleAccountRecoveryStatusCheck from "./components/AccountRecovery/HandleAccountRecoveryStatusCheck/HandleAccountRecoveryStatusCheck";
+import WorkflowContextProvider from "./contexts/WorkflowContext";
+import ManageWorkflows from "./components/Common/Workflow/ManageWorkflows/ManageWorkflows";
+import AdminAccountRecoveryContextProvider from "./contexts/AdminAccountRecoveryContext";
+import HandleApplicationFirstLoadRoute from "./components/Common/Route/HandleApplicationFirstLoadRoute";
 
 /**
  * The passbolt application served by the browser extension.
@@ -71,125 +76,144 @@ class ExtApp extends Component {
    * =============================================================
    */
   render() {
+    const accountRecoveryUserService = new ExtAppAccountRecoveryUserService(this.props.port);
     return (
       <ExtAppContextProvider port={this.props.port} storage={this.props.storage}>
         <AppContext.Consumer>
           {appContext =>
             <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
-              <ActionFeedbackContextProvider>
-                <DialogContextProvider>
-                  <AnnouncementContextProvider>
-                    <ContextualMenuContextProvider>
-                      <LoadingContextProvider>
+              <AccountRecoveryUserContextProvider accountRecoveryUserService={accountRecoveryUserService}>
+                <WorkflowContextProvider>
+                  <ActionFeedbackContextProvider>
+                    <DialogContextProvider>
+                      <AnnouncementContextProvider>
+                        <ContextualMenuContextProvider>
+                          <LoadingContextProvider>
 
-                        { /* Action Feedback Management */}
-                        <DisplayActionFeedbacks/>
+                            { /* Action Feedback Management */}
+                            <DisplayActionFeedbacks/>
 
-                        { /* Dialogs Management */}
-                        <HandlePassphraseEntryEvents/>
-                        <HandleFolderMoveStrategyEvents/>
-                        <HandleProgressEvents/>
-                        <HandleErrorEvents/>
-                        <HandleSessionExpired/>
+                            { /* Dialogs Management */}
+                            <HandlePassphraseEntryEvents/>
+                            <HandleFolderMoveStrategyEvents/>
+                            <HandleProgressEvents/>
+                            <HandleErrorEvents/>
+                            <HandleSessionExpired/>
 
-                        { /* Announcement Management */}
-                        {appContext.loggedInUser && appContext.loggedInUser.role.name === "admin"
-                          && appContext.siteSettings.canIUse('ee')
-                          && <HandleSubscriptionAnnouncement/>}
+                            { /* Announcement Management */}
+                            {appContext.loggedInUser && appContext.loggedInUser.role.name === "admin"
+                              && appContext.siteSettings.canIUse('ee')
+                              && <HandleSubscriptionAnnouncement/>}
 
-                        <Router>
-                          <NavigationContextProvider>
-                            <HandleExtAppRouteChanged/>
-                            <Switch>
-                              { /* The following routes are not handled by the browser extension application. */}
-                              <Route exact path={[
-                                "/app/administration",
-                                "/app/administration/mfa",
-                                "/app/administration/users-directory",
-                                "/app/administration/email-notification",
-                                "/app/settings/mfa"
-                              ]}/>
-                              {/* Passwords workspace */}
-                              <Route path={[
-                                "/app/folders/view/:filterByFolderId",
-                                "/app/passwords/view/:selectedResourceId",
-                                "/app/passwords",
-                              ]}>
-                                <ResourceWorkspaceContextProvider>
-                                  <ResourcePasswordGeneratorContextProvider>
-                                    <ManageDialogs/>
-                                    <ManageContextualMenu/>
-                                    <ManageAnnouncements/>
-                                    <DragContextProvider>
-                                      <div id="container" className="page password">
+                            <Router>
+                              { /* Account Recovery Management */}
+                              {appContext.loggedInUser && appContext.siteSettings.canIUse('accountRecovery')
+                                && <HandleAccountRecoveryStatusCheck/>}
+
+                              <NavigationContextProvider>
+                                <HandleExtAppRouteChanged/>
+                                <Switch>
+                                  { /* The application first load route points to an html document */ }
+                                  <Route path="/data/passbolt-iframe-app.html" component={HandleApplicationFirstLoadRoute} />
+                                  { /* The following routes are not handled by the browser extension application. */}
+                                  <Route exact path={[
+                                    "/app/administration",
+                                    "/app/administration/mfa",
+                                    "/app/administration/users-directory",
+                                    "/app/administration/email-notification",
+                                    "/app/settings/mfa"
+                                  ]}/>
+                                  {/* Passwords workspace */}
+                                  <Route path={[
+                                    "/app/folders/view/:filterByFolderId",
+                                    "/app/passwords/view/:selectedResourceId",
+                                    "/app/passwords",
+                                  ]}>
+                                    <ResourceWorkspaceContextProvider>
+                                      <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>
+                                        </DragContextProvider>
+                                      </ResourcePasswordGeneratorContextProvider>
+                                    </ResourceWorkspaceContextProvider>
+                                  </Route>
+                                  {/* Users workspace */}
+                                  <Route path={[
+                                    "/app/account-recovery/requests/review/:accountRecoveryRequestId",
+                                    "/app/groups/view/:selectedGroupId",
+                                    "/app/groups/edit/:selectedGroupId",
+                                    "/app/users/view/:selectedUserId",
+                                    "/app/users",
+                                  ]}>
+                                    <UserWorkspaceContextProvider>
+                                      <ManageDialogs/>
+                                      <ManageWorkflows/>
+                                      <ManageContextualMenu/>
+                                      <ManageAnnouncements/>
+                                      <div id="container" className="page user">
                                         <div id="app" className="app ready" tabIndex="1000">
                                           <div className="header first">
                                             <DisplayMainMenu/>
                                           </div>
-                                          <DisplayResourcesWorkspace onMenuItemClick={this.handleWorkspaceSelect}/>
+                                          <DisplayUserWorkspace/>
                                         </div>
                                       </div>
-                                    </DragContextProvider>
-                                  </ResourcePasswordGeneratorContextProvider>
-                                </ResourceWorkspaceContextProvider>
-                              </Route>
-                              {/* Users workspace */}
-                              <Route path={[
-                                "/app/groups/view/:selectedGroupId",
-                                "/app/groups/edit/:selectedGroupId",
-                                "/app/users/view/:selectedUserId",
-                                "/app/users",
-                              ]}>
-                                <UserWorkspaceContextProvider>
-                                  <ManageDialogs/>
-                                  <ManageContextualMenu/>
-                                  <ManageAnnouncements/>
-                                  <div id="container" className="page user">
-                                    <div id="app" className="app ready" tabIndex="1000">
-                                      <div className="header first">
-                                        <DisplayMainMenu/>
-                                      </div>
-                                      <DisplayUserWorkspace/>
-                                    </div>
-                                  </div>
-                                </UserWorkspaceContextProvider>
-                              </Route>
-                              {/* User settings workspace */}
-                              <Route path={"/app/settings"}>
-                                <UserSettingsContextProvider>
-                                  <ManageDialogs/>
-                                  <ManageAnnouncements/>
-                                  <div id="container" className="page settings">
-                                    <div id="app" className="app ready" tabIndex="1000">
-                                      <div className="header first">
-                                        <DisplayMainMenu/>
+                                    </UserWorkspaceContextProvider>
+                                  </Route>
+                                  {/* User settings workspace */}
+                                  <Route path={"/app/settings"}>
+                                    <UserSettingsContextProvider>
+                                      <ManageDialogs/>
+                                      <ManageAnnouncements/>
+                                      <div id="container" className="page settings">
+                                        <div id="app" className="app ready" tabIndex="1000">
+                                          <div className="header first">
+                                            <DisplayMainMenu/>
+                                          </div>
+                                          <DisplayUserSettingsWorkspace/>
+                                        </div>
                                       </div>
-                                      <DisplayUserSettingsWorkspace/>
-                                    </div>
-                                  </div>
-                                </UserSettingsContextProvider>
-                              </Route>
-                              {/* Subscription settings */}
-                              <Route exact path={"/app/administration/subscription"}>
-                                <AdministrationWorkspaceContextProvider>
-                                  <ManageDialogs/>
-                                  <AdministrationWorkspace/>
-                                </AdministrationWorkspaceContextProvider>
-                              </Route>
-                              {/* Fallback */}
-                              <Route path="/">
-                                <HandleRouteFallback/>
-                              </Route>
-                            </Switch>
-                          </NavigationContextProvider>
-                        </Router>
-                        <ManageLoading/>
-                        <Footer/>
-                      </LoadingContextProvider>
-                    </ContextualMenuContextProvider>
-                  </AnnouncementContextProvider>
-                </DialogContextProvider>
-              </ActionFeedbackContextProvider>
+                                    </UserSettingsContextProvider>
+                                  </Route>
+                                  {/* Subscription and Account Recovery settings */}
+                                  <Route exact path={[
+                                    "/app/administration/subscription",
+                                    "/app/administration/account-recovery"
+                                  ]}>
+                                    <AdministrationWorkspaceContextProvider>
+                                      <AdminAccountRecoveryContextProvider>
+                                        <ManageDialogs/>
+                                        <ManageWorkflows/>
+                                        <AdministrationWorkspace/>
+                                      </AdminAccountRecoveryContextProvider>
+                                    </AdministrationWorkspaceContextProvider>
+                                  </Route>
+                                  {/* Fallback */}
+                                  <Route path="/">
+                                    <HandleRouteFallback/>
+                                  </Route>
+                                </Switch>
+                              </NavigationContextProvider>
+                            </Router>
+                            <ManageLoading/>
+                            <Footer/>
+                          </LoadingContextProvider>
+                        </ContextualMenuContextProvider>
+                      </AnnouncementContextProvider>
+                    </DialogContextProvider>
+                  </ActionFeedbackContextProvider>
+                </WorkflowContextProvider>
+              </AccountRecoveryUserContextProvider>
             </TranslationProvider>
           }
         </AppContext.Consumer>