passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroup.test.page.js

@@ -107,6 +107,23 @@ export default class EditUserGroupTestPage {
     return ! this._page.container.querySelector('.cannot-add-user');
   }
 
+  /**
+   * Returns the username input
+   */
+  get usernameInput() {
+    return this._page.container.querySelector('#user-name-input');
+  }
+
+  /**
+   * Returns the nth items in the autocomplete list
+   * @param {integer} index
+   * @returns {HTMLElement}
+   */
+  getAutocompleteItem(index) {
+    const autocompleteItems = this._page.container.querySelectorAll('#autocomplete-item .row.selected .main-cell-wrapper .main-cell a');
+    return autocompleteItems[index];
+  }
+
   /**
    * Returns the i-th group member
    * @param index The rank of the group member
@@ -130,20 +147,6 @@ export default class EditUserGroupTestPage {
     };
   }
 
-  /**
-   * Add an user to the group
-   */
-  async addGroupMember(username) {
-    const element = this._page.container.querySelector('#user-name-input');
-    const inputEvent = {target: {value: username}};
-    fireEvent.change(element, inputEvent);
-    await waitFor(() => {});
-    const autocompleteElement = this._page.container.querySelector('#autocomplete-item .row.selected .main-cell-wrapper .main-cell a');
-    const leftClick = {button: 0};
-    fireEvent.click(autocompleteElement, leftClick);
-    await waitFor(() => {});
-  }
-
   /**
    * Removes the index-th member from the group
    */
@@ -188,4 +191,24 @@ export default class EditUserGroupTestPage {
     fireEvent.click(this.closeButton, leftClick);
     await waitFor(() => {});
   }
+
+  async type(text, element) {
+    fireEvent.input(element, {
+      target: {
+        value: text
+      }
+    });
+
+    await waitFor(() => {
+      if (element.value !== text) {
+        throw new Error("The field has not changed yet.");
+      }
+    });
+  }
+
+  async click(element) {
+    const event = {button: 0};
+    fireEvent.click(element, event);
+    await waitFor(() => {});
+  }
 }

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroup.test.stories.js

@@ -7,7 +7,7 @@ import EditUserGroup from "./EditUserGroup";
 
 
 export default {
-  title: 'Passbolt/UserGroup/EditUserGroup',
+  title: 'Passbolt Component/UserGroup/EditUserGroup',
   component: EditUserGroup
 };
 
@@ -20,7 +20,7 @@ const context = {
   },
   users: mockUsers,
   loggedInUser: {
-    id: "8e3874ae-4b40-590b-968a-418f704b9d9a",
+    id: "54c6278e-f824-5fda-91ff-3e946b18d994",
     profile: {
       id: "48bcd9ac-a520-53e0-b3a4-9da7e57b91aa",
       user_id: "640ebc06-5ec1-5322-a1ae-6120ed2f3a74",
@@ -51,3 +51,6 @@ Template.propTypes = {
 
 export const Initial = Template.bind({});
 Initial.args = defaultProps();
+
+export const Loading = Template.bind({});
+Loading.args = Object.assign(defaultProps(), {context: {...context, port: {}}});

package/src/react-extension/components/UserGroup/EditUserGroup/EditUserGroupItem.js

@@ -0,0 +1,209 @@
+/**
+ * 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.7.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {withAppContext} from "../../../contexts/AppContext";
+import UserAvatar from "../../Common/Avatar/UserAvatar";
+import Icon from "../../../../shared/components/Icons/Icon";
+import {Trans, withTranslation} from "react-i18next";
+import Tooltip from "../../Common/Tooltip/Tooltip";
+import Select from "../../Common/Select/Select";
+
+/**
+ * This component allows to edit an user group
+ */
+class EditUserGroupItem extends Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    return {
+      user: null,
+      fingerprint: null,
+    };
+  }
+
+  /**
+   * Whenever the component is mounted
+   */
+  async componentDidMount() {
+    await this.populate();
+  }
+
+  /**
+   * Populate the component with initial data
+   * @returns {Promise<void>}
+   */
+  async populate() {
+    const user = this.props.groupUser.user;
+    const fingerprint = await this.getFingerprintForUser(user.id);
+    this.setState({user, fingerprint});
+  }
+
+  /**
+   * Find a user gpg key
+   * @param {string} userId
+   * @returns {Promise<string>}
+   */
+  async getFingerprintForUser(userId) {
+    const keyInfo = await this.props.context.port.request('passbolt.keyring.get-public-key-info-by-user', userId);
+    return keyInfo.fingerprint;
+  }
+
+  /**
+   * Returns true if the comopinent is ready to be displayed with all information
+   * @returns {boolean}
+   */
+  get isReady() {
+    return this.state.user !== null && this.state.fingerprint !== null;
+  }
+
+  /**
+   * Format fingerprint
+   * @param {string} fingerprint An user finger print
+   * @returns {JSX.Element}
+   */
+  formatFingerprint(fingerprint) {
+    const result = fingerprint.toUpperCase().replace(/.{4}/g, '$& ');
+    return <>{result.substr(0, 24)}<br/>{result.substr(25)}</>;
+  }
+
+  /**
+   * Get a user full name
+   * @returns {string}
+   */
+  getUserFullname() {
+    const user = this.state.user;
+    return `${user.profile.first_name} ${user.profile.last_name}`;
+  }
+
+  /**
+   * Get the tooltip message
+   * @returns {JSX.Element}
+   */
+  getTooltipMessage() {
+    return <>
+      <div className="email"><strong>{this.state.user.username}</strong></div>
+      <div className="fingerprint">{this.formatFingerprint(this.state.fingerprint)}</div>
+    </>;
+  }
+
+  /**
+   * Get options for permission selection
+   * @returns {[{label: *, value: boolean}]}
+   */
+  get isManagerSelectOptions() {
+    return [
+      {value: false, label: (<Trans>Member</Trans>)},
+      {value: true, label: (<Trans>Group manager</Trans>)}
+    ];
+  }
+
+  /**
+   * Render the component
+   */
+  render() {
+    const isReady = this.isReady;
+    return (
+      <li
+        className={`row ${this.props.isMemberChanged ? 'permission-updated' : ''} ${!isReady ? "skeleton" : ""}`}
+      >
+        {isReady &&
+          <>
+            <UserAvatar
+              baseUrl={this.props.context.userSettings.getTrustedDomain()}
+              user={this.state.user}/>
+            <div className="aro">
+              <div className="aro-name">
+                <span className="ellipsis">{this.getUserFullname()}</span>
+                <Tooltip message={this.getTooltipMessage()}>
+                  <Icon name="info-circle"/>
+                </Tooltip>
+              </div>
+              <div className="permission_changes">
+                {this.props.isMemberAdded && <span><Trans>Will be added</Trans></span>}
+                {this.props.isMemberChanged && !this.props.isMemberAdded &&
+                  <span><Trans>Will be updated</Trans></span>}
+                {!this.props.isMemberChanged && !this.props.isMemberAdded && <span><Trans>Unchanged</Trans></span>}
+
+              </div>
+            </div>
+
+            <div className="rights">
+              <Select
+                className="permission inline"
+                value={this.props.groupUser.is_admin}
+                items={this.isManagerSelectOptions}
+                onChange={event => this.props.onMemberRoleChange(event, this.props.groupUser)}
+                disabled={!this.props.areActionsAllowed}
+                direction={this.props.isLastItemDisplayed ? "top" : "bottom"}/>
+            </div>
+
+            <div className="actions">
+              <a
+                title={this.props.t("Remove")}
+                className={`remove-item button button-transparent ${!this.props.areActionsAllowed ? "disabled" : ""}`}
+                onClick={event => this.props.onMemberRemoved(event, this.props.groupUser)}>
+                <Icon name="close"/>
+                <span className="visuallyhidden"><Trans>Remove</Trans></span>
+              </a>
+            </div>
+          </>
+        }
+        {!isReady &&
+          <>
+            <div className="avatar"></div>
+            <div className="aro">
+              <div className="aro-name"></div>
+              <div className="aro-details"></div>
+            </div>
+            <div className="select rights"></div>
+            <div className="actions"></div>
+            <div className="shimmer"></div>
+          </>
+        }
+      </li>
+    );
+  }
+}
+
+EditUserGroupItem.defaultProps = {
+  isMemberChanged: false,
+  isMemberAdded: false,
+  areActionsAllowed: false,
+  isLastItemDisplayed: false,
+};
+
+EditUserGroupItem.propTypes = {
+  context: PropTypes.any, // The application context
+  groupUser: PropTypes.object.isRequired,
+  onMemberRoleChange: PropTypes.func.isRequired,
+  onMemberRemoved: PropTypes.func.isRequired,
+  isMemberChanged: PropTypes.bool,
+  isMemberAdded: PropTypes.bool,
+  areActionsAllowed: PropTypes.bool,
+  isLastItemDisplayed: PropTypes.bool,
+  t: PropTypes.func, // The translation function
+};
+
+export default withAppContext(withTranslation('common')(EditUserGroupItem));

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/ConfirmPassphrase.js

@@ -182,7 +182,7 @@ class ConfirmPassphrase extends React.Component {
             <form className="enter-passphrase" onSubmit={this.handleSubmit}>
               <h3><Trans>Please enter your passphrase to continue</Trans></h3>
               <div className="form-content">
-                <div className={`input-password-wrapper input required ${this.state.passphraseError ? "error" : ""}`}>
+                <div className={`input-password-wrapper input required ${this.state.passphraseError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
                   <label htmlFor="passphrase-input"><Trans>Passphrase</Trans></label>
                   <Password
                     id="passphrase-input"

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/DisplayChangePassphraseIntroduction.js

@@ -16,7 +16,7 @@
 import React from 'react';
 import PropTypes from "prop-types";
 import {withUserSettings} from "../../../contexts/UserSettingsContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 /**
  * This component displays the user profile information
@@ -164,7 +164,6 @@ class DisplayChangePassphraseIntroduction extends React.Component {
 
 DisplayChangePassphraseIntroduction.propTypes = {
   userSettingsContext: PropTypes.object, // The user settings context
-  t: PropTypes.func, // The translation function
 };
 
-export default withUserSettings(withTranslation('common')(DisplayChangePassphraseIntroduction));
+export default withUserSettings(DisplayChangePassphraseIntroduction);

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/DownloadRecoveryKit.js

@@ -16,7 +16,7 @@
 import React from 'react';
 import PropTypes from "prop-types";
 import {withUserSettings} from "../../../contexts/UserSettingsContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import AnimatedFeedback from "../../../../shared/components/Icons/AnimatedFeedback";
 
 /**
@@ -78,4 +78,4 @@ DownloadRecoveryKit.propTypes = {
   userSettingsContext: PropTypes.object // The user settings context
 };
 
-export default withUserSettings(withTranslation('common')(DownloadRecoveryKit));
+export default withUserSettings(DownloadRecoveryKit);

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.js

@@ -41,6 +41,7 @@ class EnterNewPassphrase extends React.Component {
   constructor(props) {
     super(props);
     this.state = this.defaultState;
+    this.isPwndProcessingPromise = null;
     this.evaluatePassphraseIsInDictionaryDebounce = debounce(this.evaluatePassphraseIsInDictionary, 300);
     this.bindEventHandlers();
     this.createReferences();
@@ -54,7 +55,7 @@ class EnterNewPassphrase extends React.Component {
       passphrase: '', // The current passphrase
       passphraseEntropy: null,  // The current passphrase entropy
       actions: {
-        processing: false // True if one's processing passphrase
+        processing: false, // True if one's processing passphrase
       },
       hintClassNames: { // The class names for passphrase hints
         enoughLength: '',
@@ -142,7 +143,7 @@ class EnterNewPassphrase extends React.Component {
     if (passphrase.length) {
       passphraseEntropy = SecretGenerator.entropy(passphrase);
       hintClassNames = this.evaluatePassphraseHintClassNames(passphrase);
-      this.evaluatePassphraseIsInDictionaryDebounce();
+      this.isPwndProcessingPromise = this.evaluatePassphraseIsInDictionaryDebounce();
     }
 
     this.setState({passphrase, passphraseEntropy, hintClassNames});
@@ -212,11 +213,27 @@ class EnterNewPassphrase extends React.Component {
     });
   }
 
+  /**
+   * Await for isPwned service to finish its process and returns true if the current displayed passphrase is pwned.
+   * @return {Promise<boolean>}
+   */
+  async isCurrentPassphrasePwned() {
+    await this.isPwndProcessingPromise;
+    return this.state.hintClassNames.notInDictionary === "error";
+  }
+
   /**
    * Generate the Gpg key
+   * @return {Promise<void>}
    */
   async generateGpgKey() {
     await this.toggleProcessing();
+    const isPwned = await this.isCurrentPassphrasePwned();
+    if (isPwned) {
+      await this.toggleProcessing();
+      return;
+    }
+
     this.props.userSettingsContext.onUpdatePassphraseRequested(this.state.passphrase)
       .catch(this.onGpgKeyGeneratedFailure.bind(this));
   }
@@ -242,7 +259,11 @@ class EnterNewPassphrase extends React.Component {
    * Toggle the processing mode
    */
   async toggleProcessing() {
-    await this.setState({actions: {processing: !this.state.actions.processing}});
+    const actions = {
+      ...this.state.actions,
+      processing: !this.state.actions.processing
+    };
+    await this.setState({actions});
   }
 
   /**
@@ -252,14 +273,6 @@ class EnterNewPassphrase extends React.Component {
     this.setState({isObfuscated: !this.state.isObfuscated});
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   render() {
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
@@ -312,7 +325,7 @@ class EnterNewPassphrase extends React.Component {
                 <button className="button cancel" type="button" disabled={!this.areActionsAllowed} onClick={this.handleCancel}>
                   <Trans>Cancel</Trans>
                 </button>
-                <FormSubmitButton primary={true} disabled={this.mustBeDisabled} processing={this.isProcessing} value={this.translate('Update')}/>
+                <FormSubmitButton primary={true} disabled={this.mustBeDisabled} processing={this.isProcessing} value={this.props.t('Update')}/>
               </div>
             </form>
           </div>

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.test.js

@@ -171,7 +171,11 @@ describe("As LU I should see the user confirm passphrase page", () => {
       const mockReject = error => jest.fn(() => new Promise((resolve, reject) => reject(error)));
       jest.spyOn(props.userSettingsContext, 'onUpdatePassphraseRequested').mockImplementationOnce(mockReject(new PassboltApiFetchError("Jest simulate API error.")));
 
-      await page.update();
+      await page.update(() => {
+        if (!page.notInDictionaryHint.classList.contains("success")) {
+          throw new Error("The page state didn't change yet.");
+        }
+      });
       const ErrorDialogProps = {error: new Error("Jest simulate API error.")};
       expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, ErrorDialogProps);
     });

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.test.page.js

@@ -152,6 +152,13 @@ export default class EnterNewPassphrasePage {
     return !this.passphraseInput.hasAttribute('disabled');
   }
 
+  /**
+   * Returns the list item concerning the 'not in dictionnary" hints
+   */
+  get notInDictionaryHint() {
+    return this._page.container.querySelectorAll(".password-hints li")[4];
+  }
+
   /**
    * Returns true if the page object exists in the container
    */

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.js

@@ -205,7 +205,7 @@ class ChangeUserSecurityToken extends Component {
     };
     try {
       await this.props.userSettingsContext.onUpdateSecurityTokenRequested(securityTokenDto);
-      await this.props.actionFeedbackContext.displaySuccess(this.translate("The security token has been updated successfully"));
+      await this.props.actionFeedbackContext.displaySuccess(this.props.t("The security token has been updated successfully"));
       await this.toggleProcessing();
     } catch (error) {
       await this.onSaveFailure(error);
@@ -303,14 +303,6 @@ class ChangeUserSecurityToken extends Component {
         || this.state.errors.lengthCode);
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
@@ -322,7 +314,7 @@ class ChangeUserSecurityToken extends Component {
           <div className="col7 main-column">
             <form onSubmit={this.handleSubmit}>
               <h3><Trans>Update the Security Token</Trans></h3>
-              <div className={`input-security-token input required ${this.hasErrors ? "error" : ""}`}>
+              <div className={`input-security-token input required ${this.hasErrors ? "error" : ""} ${!this.areActionsAllowed ? 'disabled' : ''}`}>
                 <label htmlFor="security-token-text"><Trans>Security token</Trans></label>
                 <input
                   id="security-token-text"

package/src/react-extension/components/UserSetting/ChangeUserSecurityToken/ChangeUserSecurityToken.test.stories.js

@@ -6,7 +6,7 @@ import ChangeUserSecurityToken from "./ChangeUserSecurityToken";
 
 
 export default {
-  title: 'Passbolt/UserSetting/ChangeUserSecurityToken',
+  title: 'Passbolt Component/UserSetting/ChangeUserSecurityToken',
   component: ChangeUserSecurityToken
 };
 

package/src/react-extension/components/UserSetting/DisplayUserAccountRecovery/DisplayAccountRecoveryUserSettings.js

@@ -218,7 +218,7 @@ class DisplayAccountRecoveryUserSettings extends Component {
                 <p><Trans>For more information about account recovery, checkout the dedicated page on the help website.</Trans></p>
                 <a className="button" href="https://help.passbolt.com" target="_blank" rel="noopener noreferrer">
                   <Icon name="life-ring"/>
-                  <span><Trans>Read documentation</Trans></span>
+                  <span><Trans>Read the documentation</Trans></span>
                 </a>
               </div>
             </div>

package/src/react-extension/components/UserSetting/DisplayUserAccountRecovery/DisplayAccountRecoveryUserSettings.test.stories.js

@@ -18,7 +18,7 @@ import DisplayAccountRecoveryUserSettings from "./DisplayAccountRecoveryUserSett
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
 export default {
-  title: "Passbolt/UserSetting/DisplayAccountRecoveryUserSettings",
+  title: "Passbolt Component/UserSetting/DisplayAccountRecoveryUserSettings",
   component: DisplayAccountRecoveryUserSettings
 };
 

package/src/react-extension/components/UserSetting/DisplayUserGpgInformation/DisplayUserGpgInformation.js

@@ -97,7 +97,14 @@ class DisplayUserGpgInformation extends React.Component {
     const type = this.gpgkeyType[gpgkeyInfo.algorithm];
     const uIds = gpgkeyInfo.user_ids;
     const created = this.formatDate(gpgkeyInfo.created);
-    const expires = gpgkeyInfo.expires === "Never" ? "Never" : this.formatDate(gpgkeyInfo.expires);
+    let expires;
+    if (gpgkeyInfo.expires === null) {
+      expires = "n/a";
+    } else if (gpgkeyInfo.expires === "Infinity") {
+      expires = this.translate("Never");
+    } else {
+      expires = this.formatDate(gpgkeyInfo.expires);
+    }
     const armoredKey = gpgkeyInfo.armored_key;
     const fingerprint = gpgkeyInfo.fingerprint;
     const length = gpgkeyInfo.length;
@@ -224,7 +231,7 @@ class DisplayUserGpgInformation extends React.Component {
                   <td className="expires">{this.gpgKeyInfo.expires}</td>
                 </tr>
                 <tr>
-                  <td><Trans>Key Length</Trans></td>
+                  <td><Trans>Key length</Trans></td>
                   <td className="length">{this.gpgKeyInfo.length}</td>
                 </tr>
                 <tr>