passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/UserDetails/DisplayUserDetailsPublicKey/DisplayUserDetailsPublicKey.js

@@ -20,6 +20,7 @@ import {withAppContext} from "../../../contexts/AppContext";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {DateTime} from "luxon";
 import {Trans, withTranslation} from "react-i18next";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 /**
  * This component displays the user details about public key
@@ -179,7 +180,7 @@ class DisplayUserDetailsPublicKey extends React.Component {
    */
   async handlePublicKeyCopy() {
     const armoredKey = this.state.gpgkeyInfo.armoredKey;
-    await navigator.clipboard.writeText(armoredKey);
+    await ClipBoard.copy(armoredKey, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The public key has been copied to clipboard"));
   }
 

package/src/react-extension/components/UserGroup/CreateUserGroup/CreateUserGroup.js

@@ -25,6 +25,9 @@ import {withDialog} from "../../../contexts/DialogContext";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {Trans, withTranslation} from "react-i18next";
 import EditUserGroupItem from "../EditUserGroup/EditUserGroupItem";
+import {maxSizeValidation} from '../../../lib/Error/InputValidator';
+import Icon from "../../../../shared/components/Icons/Icon";
+import {RESOURCE_GROUP_NAME_MAX_LENGTH} from '../../../../shared/constants/inputs.const';
 
 class CreateUserGroup extends Component {
   /**
@@ -51,6 +54,7 @@ class CreateUserGroup extends Component {
       // Input fields
       name: '',
       nameError: "",
+      nameWarning: "",
 
       // group users list
       groups_users: [],
@@ -143,6 +147,8 @@ class CreateUserGroup extends Component {
   handleNameInputKeyUp() {
     const state = this.validateNameInput();
     this.setState(state);
+    const nameWarning = maxSizeValidation(this.state.name, RESOURCE_GROUP_NAME_MAX_LENGTH, this.translate);
+    this.setState({nameWarning});
   }
 
   /**
@@ -520,13 +526,20 @@ class CreateUserGroup extends Component {
         <form className="group-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="group_name"><Trans>Group name</Trans></label>
+              <label htmlFor="group_name"><Trans>Group name</Trans>{this.state.nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="group-name-input" name="name" className="required" maxLength="50" type="text" placeholder={this.translate("group name")}
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}
                 disabled={this.hasAllInputDisabled()} ref={this.nameInputRef}/>
               {this.state.nameError &&
               <div className="name error-message">{this.state.nameError}</div>
               }
+              {this.state.nameWarning &&
+                (<div className="name warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.nameWarning}
+                </div>)
+              }
             </div>
 
             <div className="input required">
@@ -562,6 +575,11 @@ class CreateUserGroup extends Component {
               <span><Trans>You need to click save for the changes to take place.</Trans></span>
             </div>
             }
+            {this.state.nameWarning && (
+              <div className="message warning">
+                <strong><Trans>Warning:</Trans></strong> {this.state.nameWarning}
+              </div>
+            )}
             <div className="form-content permission-add">
               <Autocomplete
                 id="user-name-input"

package/src/react-extension/components/UserGroup/CreateUserGroup/CreateUserGroup.test.js

@@ -21,6 +21,8 @@ import {ActionFeedbackContext} from "../../../contexts/ActionFeedbackContext";
 import PassboltApiFetchError from "../../../../shared/lib/Error/PassboltApiFetchError";
 import {waitFor} from "@testing-library/react";
 
+const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
+
 describe("See the Create Dialog Group", () => {
   let page; // The page to test against
   const context = defaultAppContext(); // The applicative context
@@ -213,5 +215,12 @@ describe("See the Create Dialog Group", () => {
       // display groupname error message
       expect(page.createGroup.nameErrorMessage.textContent).toBe("The group name test already exists.");
     });
+
+    it("As an user I should see a feedback when name field content is truncated by a field limit", async() => {
+      expect.assertions(1);
+      page.createGroup.fillInput(page.createGroup.name, 'a'.repeat(255));
+      await page.createGroup.keyUpInput(page.createGroup.name);
+      expect(page.createGroup.nameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
   });
 });

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

@@ -249,6 +249,13 @@ class CreateGroupPageObject {
     return this._container.querySelector('.error-dialog .dialog .dialog-content .form-content');
   }
 
+  /**
+   * Returns the name warning mesage input element
+   */
+  get nameWarningMessage() {
+    return this._container.querySelector('.name.warning-message');
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -282,6 +289,11 @@ class CreateGroupPageObject {
     fireEvent.change(element, dataInputEvent);
   }
 
+  /** on keypup element */
+  keyUpInput(component)  {
+    fireEvent.keyUp(component, {keyCode: 38});
+  }
+
   /** select item */
   async selectFirstItem(index)  {
     await this.click(this.selectRights(index));

package/src/react-extension/components/UserGroup/DisplayUserGroupDetails/DisplayUserGroupDetails.js

@@ -22,6 +22,7 @@ import GroupAvatar from "../../Common/Avatar/GroupAvatar";
 import DisplayUserGroupDetailsMembers from "../DisplayUserGroupDetailsMembers/DisplayUserGroupDetailsMembers";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {Trans, withTranslation} from "react-i18next";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 /**
  * This component displays the details of a users group
@@ -64,7 +65,7 @@ class DisplayUserGroupDetails extends React.Component {
   async handlePermalinkClick() {
     const baseUrl = this.props.context.userSettings.getTrustedDomain();
     const permalink = `${baseUrl}/app/groups/view/${this.group.id}`;
-    await navigator.clipboard.writeText(permalink);
+    await ClipBoard.copy(permalink, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The permalink has been copied to clipboard"));
   }
 

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

@@ -27,6 +27,10 @@ import {withRouter} from "react-router-dom";
 import {Trans, withTranslation} from "react-i18next";
 import SharePermissionItemSkeleton from "../../Share/SharePermissionItemSkeleton";
 import EditUserGroupItem from "./EditUserGroupItem";
+import {maxSizeValidation} from '../../../lib/Error/InputValidator';
+import Icon from "../../../../shared/components/Icons/Icon";
+import {RESOURCE_GROUP_NAME_MAX_LENGTH} from "../../../../shared/constants/inputs.const";
+
 
 /**
  * This component allows to edit an user group
@@ -57,6 +61,7 @@ class EditUserGroup extends Component {
         loading: true // True if the component is in a loading mode
       },
       errors: {},
+      nameWarning: "",
       validation: {
         hasAlreadyBeenValidated: false // True when the form has already been submitted
       }
@@ -398,6 +403,9 @@ class EditUserGroup extends Component {
     this.setState({groupToEdit: Object.assign({}, this.state.groupToEdit, {name})});
     if (this.state.validation.hasAlreadyBeenValidated) {
       this.validateName();
+    } else {
+      const nameWarning = maxSizeValidation(name, RESOURCE_GROUP_NAME_MAX_LENGTH, this.translate);
+      this.setState({nameWarning});
     }
   }
 
@@ -745,10 +753,17 @@ class EditUserGroup extends Component {
                 <Trans>The group name already exists.</Trans>
               </div>
               }
+              {this.state.nameWarning &&
+                (<div className="name warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.nameWarning}
+                </div>)
+              }
             </div>
 
             <div className="input required">
-              <label><Trans>Group members</Trans></label>
+              <label><Trans>Group members</Trans>{this.state.nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
             </div>
           </div>
 

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

@@ -24,6 +24,7 @@ import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 beforeEach(() => {
   jest.resetModules();
 });
+const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
 
 describe("See the Edit User Group", () => {
   let page; // The page to test against
@@ -179,5 +180,12 @@ describe("See the Edit User Group", () => {
       await waitFor(() => {});
       expect(page.hasNoManager).toBeTruthy();
     });
+
+    it("As an user I should see a feedback when name field content is truncated by a field limit", async() => {
+      expect.assertions(1);
+      page.fillInput(page.name, 'a'.repeat(255));
+      await page.keyUpInput(page.name);
+      expect(page.nameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
   });
 });

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

@@ -44,11 +44,18 @@ export default class EditUserGroupTestPage {
     );
   }
 
+  /**
+   * Returns the name input element
+   */
+  get name() {
+    return this._page.container.querySelector('#group-name-input');
+  }
+
   /**
    * Return the group name input
    */
   get groupName() {
-    return this._page.container.querySelector('#group-name-input').value;
+    return this.name.value;
   }
 
   /**
@@ -107,6 +114,13 @@ export default class EditUserGroupTestPage {
     return ! this._page.container.querySelector('.cannot-add-user');
   }
 
+  /**
+   * Returns the name warning mesage input element
+   */
+  get nameWarningMessage() {
+    return this._page.container.querySelector('.name.warning-message');
+  }
+
   /**
    * Returns the username input
    */
@@ -206,6 +220,17 @@ export default class EditUserGroupTestPage {
     });
   }
 
+  /** fill the input element with data */
+  fillInput(element, data) {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(element, dataInputEvent);
+  }
+
+  /** on keypup element */
+  keyUpInput(component)  {
+    fireEvent.keyUp(component, {keyCode: 38});
+  }
+
   async click(element) {
     const event = {button: 0};
     fireEvent.click(element, event);

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

@@ -199,7 +199,7 @@ class ConfirmPassphrase extends React.Component {
                     <div className="error-message">{this.state.passphraseError}</div>
                   }
                   {!this.state.passphraseError &&
-                    <div className="help-message">You need to enter your current passphrase.</div>
+                    <div className="help-message"><Trans>You need to enter your current passphrase.</Trans></div>
                   }
                 </div>
               </div>

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

@@ -20,7 +20,6 @@ import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withDialog} from "../../../contexts/DialogContext";
 import debounce from "debounce-promise";
 import SecurityComplexity from "../../../../shared/lib/Secret/SecretComplexity";
-import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {Trans, withTranslation} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
 import Password from "../../../../shared/components/Password/Password";
@@ -29,6 +28,7 @@ import PasswordComplexity from "../../../../shared/components/PasswordComplexity
 import ExternalServiceUnavailableError from "../../../../shared/lib/Error/ExternalServiceUnavailableError";
 import Tooltip from "../../Common/Tooltip/Tooltip";
 import ExternalServiceError from "../../../../shared/lib/Error/ExternalServiceError";
+import PownedService from '../../../../shared/services/api/secrets/pownedService';
 
 /**
  * This component displays the user choose passphrase information
@@ -121,6 +121,7 @@ class EnterNewPassphrase extends React.Component {
    * Whenever the component is mounted
    */
   componentDidMount() {
+    this.pownedService = new PownedService(this.props.context.port);
     this.focusOnPassphrase();
   }
 
@@ -139,7 +140,6 @@ class EnterNewPassphrase extends React.Component {
     const passphrase = event.target.value;
     let hintClassNames = {};
     let passphraseEntropy = null;
-
     if (passphrase.length) {
       passphraseEntropy = SecretGenerator.entropy(passphrase);
       hintClassNames = this.evaluatePassphraseHintClassNames(passphrase);
@@ -191,8 +191,10 @@ class EnterNewPassphrase extends React.Component {
       notInDictionaryHint = "error";
     } else {
       try {
-        const isPwned = await SecretComplexity.ispwned(passphrase);
-        notInDictionaryHint = isPwned ? "error" : "success";
+        const result =  await this.pownedService.evaluateSecret(this.state.passphrase);
+        const isPwned = result.inDictionary;
+        isPwnedServiceAvailable = result.isPwnedServiceAvailable;
+        notInDictionaryHint =  isPwnedServiceAvailable ? (isPwned ? "error" : "success") : "unavailable";
       } catch (error) {
         // If the service is unavailable don't block the user journey.
         if (error instanceof ExternalServiceUnavailableError || error instanceof ExternalServiceError) {

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

@@ -8,7 +8,10 @@ import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 export function defaultProps() {
   const props = {
     context: {
-      userSettings: new UserSettings(userSettingsFixture)
+      userSettings: new UserSettings(userSettingsFixture),
+      port: {
+        request: () => Promise.resolve(0)
+      }
     },
     userSettingsContext: {
       onUpdatePassphraseRequested: jest.fn(),

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

@@ -20,21 +20,23 @@ import {defaultProps} from "./EnterNewPassphrase.test.data";
 import {waitFor} from "@testing-library/react";
 import PassboltApiFetchError from "../../../../shared/lib/Error/PassboltApiFetchError";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
-import PwnedPasswords from "../../../../shared/lib/Secret/PwnedPasswords";
 
 jest.mock("../../../../shared/lib/Secret/PwnedPasswords");
 
-beforeEach(() => {
-  jest.useFakeTimers();
-  jest.resetModules();
-  jest.clearAllMocks();
-  PwnedPasswords.pwnedPasswords.mockResolvedValue(false);
-});
-
 describe("As LU I should see the user confirm passphrase page", () => {
   let page; // The page to test against
   const props = defaultProps();
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.resetModules();
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   describe('As LU I can start confirm my passphrase', () => {
     /**
      * Given the user settings passphrase
@@ -71,7 +73,7 @@ describe("As LU I should see the user confirm passphrase page", () => {
     });
 
     it('As LU I should see the passphrase very weak strength updated on change', async() => {
-      const veryWeakPassphrase = 'blabla';
+      const veryWeakPassphrase = 'blablabla';
       await page.insertPassphrase(veryWeakPassphrase);
       await waitFor(() => expect(page.isVeryWeakPassphrase).toBeTruthy());
     });
@@ -166,11 +168,11 @@ describe("As LU I should see the user confirm passphrase page", () => {
       expect(page.updateButton.className).toBe('button primary disabled');
 
       // Fill the form
-      page.insertPassphrase("passphrase");
+      await page.insertPassphrase("passphrase");
+
       await waitFor(() => expect(page.canUpdate).toBeTruthy());
       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(() => {
         if (!page.notInDictionaryHint.classList.contains("success")) {
           throw new Error("The page state didn't change yet.");
@@ -179,5 +181,13 @@ describe("As LU I should see the user confirm passphrase page", () => {
       const ErrorDialogProps = {error: new Error("Jest simulate API error.")};
       expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, ErrorDialogProps);
     });
+
+    it('As LU I should be inform about ExternalServiceUnavailableError for powned password service', async() => {
+      jest.spyOn(props.context.port, "request").mockImplementationOnce(() => Promise.reject());
+      expect.assertions(2);
+      await page.insertPassphrase("Service is unavailable");
+      expect(page.notInDictionaryHint.classList.contains("unavailable")).toBeTruthy();
+      expect(page.tootltip.textContent).toBe("The pwnedpasswords service is unavailable, your passphrase might be part of an exposed data breach");
+    });
   });
 });

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

@@ -159,6 +159,13 @@ export default class EnterNewPassphrasePage {
     return this._page.container.querySelectorAll(".password-hints li")[4];
   }
 
+  /**
+   * Returns the tooltip for service unavailable for powned password
+   */
+  get tootltip() {
+    return this._page.container.querySelector(".password-hints .unavailable .tooltip .tooltip-text");
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -186,8 +193,10 @@ export default class EnterNewPassphrasePage {
   }
 
   /** fill the passphrase input element with data */
-  insertPassphrase(data)  {
+  async insertPassphrase(data)  {
     this.fillInput(this.passphraseInput, data);
+    jest.runAllTimers();
+    await waitFor(() => {});
   }
 
   /** click update */

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

@@ -153,6 +153,8 @@ export class AdminSmtpSettingsContextProvider extends React.Component {
         delete dto.provider;
         await this.smtpSettingsModel.saveSmtpSettings(dto);
         this.props.actionFeedbackContext.displaySuccess(this.props.t("The SMTP settings have been saved successfully"));
+        const newSettings = Object.assign({}, this.state.currentSmtpSettings, {"source": "db"});
+        this.setState({currentSmtpSettings: newSettings});
       } catch (e) {
         this.handleError(e);
       }

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

@@ -74,3 +74,16 @@ export function withAwsSesSmtpSettings(data = {}) {
     ...data
   });
 }
+
+export function withNoAuthenticationMethod(data = {}) {
+  const settings = withExistingSmtpSettings(data);
+  settings.username = null;
+  settings.password = null;
+  return settings;
+}
+
+export function withUsernameAuthenticationMethod(data = {}) {
+  const settings = withExistingSmtpSettings(data);
+  settings.password = null;
+  return settings;
+}

package/src/react-extension/contexts/AdminSmtpSettingsContext.test.js

@@ -78,7 +78,7 @@ describe("AdminSmtpSettingsContext", () => {
 
   describe("AdminSmtpSettingsContextProvider::saveSettings()", () => {
     it("should get the current SMTP settings and store them in its state with the corresponding provider", async() => {
-      expect.assertions(2);
+      expect.assertions(3);
 
       const currentSmtpSettings = {
         id: uuid(),
@@ -126,9 +126,11 @@ describe("AdminSmtpSettingsContext", () => {
       }
 
       await adminSmtpContext.saveSmtpSettings();
+      const settings = await adminSmtpContext.getCurrentSmtpSettings();
 
       // 1 call is a GET, the other is the POST
       expect(smtpSettingsCallMock).toHaveBeenCalledTimes(2);
+      expect(settings.source).toEqual("db");
     });
   });
 });