passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/contexts/ResourcePasswordGeneratorContext.js

@@ -0,0 +1,144 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 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) 2020 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.3.0
+ */
+
+import * as React from "react";
+import {withAppContext} from "./AppContext";
+import PropTypes from "prop-types";
+
+/**
+ * Context related to resources ( filter, current selections, etc.)
+ */
+export const ResourcePasswordGeneratorContext = React.createContext({
+  settings: null, // The current settings of generators
+  lastGeneratedPassword: null, // The last password generated
+  onPasswordGenerated: () => {}, // Whenever the a password has been generated with the generator
+  onLastGeneratedPasswordCleared: () => {} // Whenever the last generated password must be cleared
+});
+
+/**
+ * The related context provider
+ */
+class ResourcePasswordGeneratorContextProvider extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    return {
+      settings: null, // The current settings of generators
+      lastGeneratedPassword: null, // The last password generated
+      onPasswordGenerated: this.onPasswordGenerated.bind(this), // Whenever the a password has been generated with the generator
+      onLastGeneratedPasswordCleared: this.onLastGeneratedPasswordCleared.bind(this) // Whenever the last generated password must be cleared
+    };
+  }
+
+  /**
+   * Whenever the component has been mounted
+   */
+  async componentDidMount() {
+    await this.initializePasswordGenerator();
+  }
+
+  /**
+   * Initialize the password generator
+   */
+  async initializePasswordGenerator() {
+    const generatorSettings = await this.props.context.port.request('passbolt.password-generator.settings');
+    this.setState({
+      settings: generatorSettings
+    });
+  }
+
+  /**
+   * Whenever a password has been generated with the generator
+   * @param password The generated password
+   */
+  async onPasswordGenerated(password, generator) {
+    await this.changeGenerator(generator);
+    await this.updateGeneratedPassword(password);
+  }
+
+  /**
+   * Whenever the last generated password must be cleared
+   */
+  onLastGeneratedPasswordCleared() {
+    this.setState({lastGeneratedPassword: {}});
+  }
+
+  /**
+   * Change the default password generator
+   * @param generator A generator
+   */
+  changeGenerator(generator) {
+    const settings = {... this.state.settings};
+    settings.default_generator = generator.type;
+    settings.generators = settings.generators.map(defaultGenerator => defaultGenerator.type === generator.type ? generator : defaultGenerator);
+    this.setState({settings});
+  }
+
+  /**
+   * Updates the last generated password
+   * @param lastGeneratedPassword The last generated password
+   */
+  async updateGeneratedPassword(lastGeneratedPassword) {
+    await this.setState({lastGeneratedPassword});
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <ResourcePasswordGeneratorContext.Provider value={this.state}>
+        {this.props.children}
+      </ResourcePasswordGeneratorContext.Provider>
+    );
+  }
+}
+
+ResourcePasswordGeneratorContextProvider.displayName = 'ResourcePasswordGeneratorContextProvider';
+ResourcePasswordGeneratorContextProvider.propTypes = {
+  context: PropTypes.any, // The application context
+  children: PropTypes.any,
+};
+
+
+export default withAppContext(ResourcePasswordGeneratorContextProvider);
+
+/**
+ * Resource Workspace Context Consumer HOC
+ * @param WrappedComponent
+ */
+export function withResourcePasswordGeneratorContext(WrappedComponent) {
+  return class WithResourcePasswordGenerator extends React.Component {
+    render() {
+      return (
+        <ResourcePasswordGeneratorContext.Consumer>
+          {
+            ResourcePasswordGeneratorContext => <WrappedComponent resourcePasswordGeneratorContext={ResourcePasswordGeneratorContext} {...this.props} />
+          }
+        </ResourcePasswordGeneratorContext.Consumer>
+      );
+    }
+  };
+}

package/src/react-extension/contexts/ResourceWorkspaceContext.js

@@ -72,7 +72,7 @@ export const ResourceWorkspaceContext = React.createContext({
   onResourceFileToImport: () => {}, // Whenever a resource file will be imported
   onResourceFileImportResult: () => {}, // Whenever the import result has been provided
   onResourcesToExport: () => {}, // Whenever resources and/or folder will be exported
-  onGoToResourceUriRequested: () => {} // Whenever the users wants to follow a resource uri
+  onGoToResourceUriRequested: () => {}, // Whenever the users wants to follow a resource uri
 });
 
 /**
@@ -136,7 +136,7 @@ export class ResourceWorkspaceContextProvider extends React.Component {
       onResourceFileToImport: this.handleResourceFileToImport.bind(this), // Whenever a resource file will be imported
       onResourceFileImportResult: this.handleResourceFileImportResult.bind(this), // Whenever the import result has been provided
       onResourcesToExport: this.handleResourcesToExportChange.bind(this), // Whenever resources and/or folder have to be exported
-      onGoToResourceUriRequested: this.onGoToResourceUriRequested.bind(this) // Whenever the users wants to follow a resource uri
+      onGoToResourceUriRequested: this.onGoToResourceUriRequested.bind(this), // Whenever the users wants to follow a resource uri
     };
   }
 
@@ -151,7 +151,7 @@ export class ResourceWorkspaceContextProvider extends React.Component {
   /**
    * Whenever the component is mounted
    */
-  componentDidMount() {
+  async componentDidMount() {
     this.populate();
     this.handleResourcesWaitedFor();
   }
@@ -178,7 +178,7 @@ export class ResourceWorkspaceContextProvider extends React.Component {
       // Avoid a side-effect whenever one inputs a specific resource url (it unselect the resource otherwise )
       const isNotNonePreviousFilter = previousFilter.type !== ResourceWorkspaceFilterTypes.NONE;
       if (isNotNonePreviousFilter) {
-        this.populate();
+        await this.populate();
         await this.unselectAll();
       }
     }
@@ -504,6 +504,7 @@ export class ResourceWorkspaceContextProvider extends React.Component {
     }
   }
 
+
   /**
    * Populate the context with initial data such as resources and folders
    */

package/src/react-extension/contexts/ResourceWorkspaceContext.test.data.js

@@ -24,7 +24,6 @@ export function defaultProps() {
   return {};
 }
 
-
 /**
  * Default resources
  */

package/src/react-extension/contexts/ResourceWorkspaceContext.test.page.js

@@ -236,7 +236,6 @@ export default class ResourceWorkspaceContextPage {
   setup(appContext, args = {}) {
     this._page = render(
       <AppContext.Provider value={appContext}>
-
         <Router history={createMemoryHistory({initialEntries: [
           "/app/folders/view/:filterByFolderId",
           "/app/passwords/view/:selectedResourceId",

package/src/react-extension/contexts/UserWorkspaceContext.js

@@ -22,6 +22,7 @@ import {withActionFeedback} from "./ActionFeedbackContext";
 import EditUserGroup from "../components/UserGroup/EditUserGroup/EditUserGroup";
 import {withDialog} from "./DialogContext";
 import {DateTime} from "luxon";
+import {withTranslation} from "react-i18next";
 
 /**
  * Context related to users ( filter, current selections, etc.)
@@ -90,6 +91,7 @@ class UserWorkspaceContextProvider extends React.Component {
         user: null // The user to scroll to
       },
       groupToEdit: null, // The group to edit
+      getTranslatedRoleName: this.getTranslatedRoleName.bind(this), // Tools to retrieve a user translated role name
       onUserScrolled: this.handleUserScrolled.bind(this), // Whenever one scrolled to a user
       onDetailsLocked: this.handleDetailsLocked.bind(this), // Lock or unlock detail  (hide or display the group or user details)
       onSorterChanged: this.handleSorterChange.bind(this), // Whenever the sorter changed
@@ -536,18 +538,22 @@ class UserWorkspaceContextProvider extends React.Component {
     const mfaSorter = (u1, u2) => (u2.is_mfa_enabled === u1.is_mfa_enabled) ? 0 : u2.is_mfa_enabled ? -1 : 1;
     const getUserFullName = user => `${user.profile.first_name} ${user.profile.last_name}`;
     const nameSorter = (u1, u2) => getUserFullName(u1).localeCompare(getUserFullName(u2));
-    const dateOrStringsorter = ['modified', 'last_logged_in'].includes(this.state.sorter.propertyName) ? dateSorter : stringSorter;
+    const roleNameSorter = (roleIdU1, roleIdU2) => this.getTranslatedRoleName(roleIdU1).localeCompare(this.getTranslatedRoleName(roleIdU2));
+    const dateOrStringSorter = ['modified', 'last_logged_in'].includes(this.state.sorter.propertyName) ? dateSorter : stringSorter;
 
     const isNameProperty = this.state.sorter.propertyName === 'name';
     const isMfaProperty = this.state.sorter.propertyName === 'is_mfa_enabled';
+    const isRoleNameProperty = this.state.sorter.propertyName === 'role.name';
 
     let propertySorter;
     if (isNameProperty) {
       propertySorter = plainObjectSorter(nameSorter);
     } else if (isMfaProperty) {
       propertySorter = plainObjectSorter(mfaSorter);
+    } else if (isRoleNameProperty) {
+      propertySorter = keySorter("role_id", roleNameSorter);
     } else {
-      propertySorter = keySorter(this.state.sorter.propertyName, dateOrStringsorter);
+      propertySorter = keySorter(this.state.sorter.propertyName, dateOrStringSorter);
     }
 
     await this.setState({filteredUsers: this.state.filteredUsers.sort(propertySorter)});
@@ -639,6 +645,26 @@ class UserWorkspaceContextProvider extends React.Component {
     await this.setState({groupToEdit});
   }
 
+  /** Common roles getters **/
+
+  /**
+   * Get the translated role name by role id
+   * @param {string} id The role id
+   * @return {string}
+   */
+  getTranslatedRoleName(id) {
+    if (this.props.context.roles) {
+      /*
+       * The i18n parser can't find the translation for passwordStrength.label
+       * To fix that we can use it in comment
+       * this.translate("admin")
+       * this.translate("user")
+       */
+      return this.props.t(this.props.context.roles.find(role => role.id === id).name);
+    }
+    return "";
+  }
+
   /**
    * Render the component
    * @returns {JSX}
@@ -661,10 +687,11 @@ UserWorkspaceContextProvider.propTypes = {
   history: PropTypes.object, // The router history
   actionFeedbackContext: PropTypes.object, // The action feedback context
   loadingContext: PropTypes.object, // The loading context
-  dialogContext: PropTypes.any // The dialog context
+  dialogContext: PropTypes.any, // The dialog context
+  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withRouter(withDialog(withActionFeedback(withLoading(UserWorkspaceContextProvider)))));
+export default withAppContext(withRouter(withDialog(withActionFeedback(withLoading(withTranslation('common')(UserWorkspaceContextProvider))))));
 
 /**
  * User Workspace Context Consumer HOC