passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/User/CreateUser/CreateUser.js

@@ -22,6 +22,9 @@ import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelBut
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import {Trans, withTranslation} from "react-i18next";
+import {maxSizeValidation} from "../../../lib/Error/InputValidator";
+import Icon from "../../../../shared/components/Icons/Icon";
+import {USER_INPUT_MAX_LENGTH} from "../../../../shared/constants/inputs.const";
 
 class CreateUser extends Component {
   /**
@@ -59,10 +62,13 @@ class CreateUser extends Component {
       // Fields and errors
       first_name: "",
       first_nameError: null,
+      first_nameWarning: "",
       last_name: "",
       last_nameError: null,
+      last_nameWarning: "",
       username: "",
       usernameError: null,
+      usernameWarning: "",
       is_admin: false,
       hasAlreadyBeenValidated: false // True if the form has already been submitted once
     };
@@ -131,6 +137,9 @@ class CreateUser extends Component {
     if (this.state.hasAlreadyBeenValidated) {
       const state = this.validateFirstNameInput();
       this.setState(state);
+    } else {
+      const first_nameWarning = maxSizeValidation(this.state.first_name, USER_INPUT_MAX_LENGTH, this.translate);
+      this.setState({first_nameWarning});
     }
   }
 
@@ -141,6 +150,9 @@ class CreateUser extends Component {
     if (this.state.hasAlreadyBeenValidated) {
       const state = this.validateLastNameInput();
       this.setState(state);
+    } else {
+      const last_nameWarning = maxSizeValidation(this.state.last_name, USER_INPUT_MAX_LENGTH, this.translate);
+      this.setState({last_nameWarning});
     }
   }
 
@@ -151,6 +163,9 @@ class CreateUser extends Component {
     if (this.state.hasAlreadyBeenValidated) {
       const state = this.validateUsernameInput();
       this.setState(state);
+    } else {
+      const usernameWarning = maxSizeValidation(this.state.username, USER_INPUT_MAX_LENGTH, this.translate);
+      this.setState({usernameWarning});
     }
   }
 
@@ -371,22 +386,33 @@ class CreateUser extends Component {
         <form className="user-create-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             <div className={`input text required ${this.state.first_nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="user-first-name-input"><Trans>First name</Trans></label>
+              <label htmlFor="user-first-name-input"><Trans>First name</Trans>{this.state.first_nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="user-first-name-input" name="first_name"
                 ref={this.firstNameRef}
                 type="text" value={this.state.first_name} placeholder={this.translate("First name")}
                 required="required" disabled={this.hasAllInputDisabled()}
+                maxLength="128"
                 onKeyUp={this.handleFirstNameInputKeyUp} onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}
               />
               {this.state.first_nameError &&
               <div className="first_name error-message">{this.state.first_nameError}</div>
               }
+              {this.state.first_nameWarning && (
+                <div className="firstname warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.first_nameWarning}
+                </div>
+              )}
             </div>
             <div className={`input text required ${this.state.last_nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="user-last-name-input"><Trans>Last name</Trans></label>
+              <label htmlFor="user-last-name-input"><Trans>Last name</Trans>{this.state.last_nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="user-last-name-input" name="last_name"
                 ref={this.lastNameRef}
+                maxLength="128"
                 type="text" value={this.state.last_name} placeholder={this.translate("Last name")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleLastNameInputOnKeyUp} onChange={this.handleInputChange}
@@ -395,10 +421,18 @@ class CreateUser extends Component {
               {this.state.last_nameError &&
               <div className="last_name error-message">{this.state.last_nameError}</div>
               }
+              {this.state.last_nameWarning && (
+                <div className="lastname warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.last_nameWarning}
+                </div>
+              )}
             </div>
             <div className={`input text required ${this.state.usernameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="user-username-input"><Trans>Username / Email</Trans></label>
+              <label htmlFor="user-username-input"><Trans>Username / Email</Trans>{this.state.usernameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="user-username-input" name="username"
+                maxLength="128"
                 ref={this.usernameRef} type="text" value={this.state.username} placeholder={this.translate("Email")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleUsernameInputOnKeyUp} onChange={this.handleInputChange}
@@ -407,6 +441,11 @@ class CreateUser extends Component {
               {this.state.usernameError &&
               <div className="username error-message">{this.state.usernameError}</div>
               }
+              {this.state.usernameWarning && (
+                <div className="username warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.usernameWarning}
+                </div>
+              )}
             </div>
             <div className={`input checkbox-wrapper ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="is_admin_checkbox"><Trans>Role</Trans></label>

package/src/react-extension/components/User/CreateUser/CreateUser.test.js

@@ -24,6 +24,7 @@ import {waitFor} from "@testing-library/react";
 beforeEach(() => {
   jest.resetModules();
 });
+const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
 
 describe("See the Create Dialog User", () => {
   let page; // The page to test against
@@ -176,5 +177,20 @@ describe("See the Create Dialog User", () => {
       // display username error message
       expect(page.createUser.usernameErrorMessage.textContent).toBe("This username is already in use.");
     });
+
+    it("As a user I should see a feedback when firstname, username or lastname field content is truncated by a field limit", async() => {
+      expect.assertions(3);
+      page.createUser.fillInput(page.createUser.firstName, 'a'.repeat(128));
+      page.createUser.fillInput(page.createUser.username, 'a'.repeat(128));
+      page.createUser.fillInput(page.createUser.lastName, 'a'.repeat(128));
+
+      await page.createUser.keyUpInput(page.createUser.firstName);
+      await page.createUser.keyUpInput(page.createUser.username);
+      await page.createUser.keyUpInput(page.createUser.lastName);
+
+      expect(page.createUser.usernameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.createUser.firstnameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.createUser.lastnameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
   });
 });

package/src/react-extension/components/User/CreateUser/CreateUser.test.page.js

@@ -186,6 +186,27 @@ class CreateUserPageObject {
     return this._container.querySelector('.error-dialog .dialog .dialog-content .form-content');
   }
 
+  /**
+   * Returns the username warning mesage input element
+   */
+  get usernameWarningMessage() {
+    return this._container.querySelector('.username.warning-message');
+  }
+
+  /**
+   * Returns the first name warning mesage input element
+   */
+  get firstnameWarningMessage() {
+    return this._container.querySelector('.firstname.warning-message');
+  }
+
+  /**
+   * Returns the last name warning mesage input element
+   */
+  get lastnameWarningMessage() {
+    return this._container.querySelector('.lastname.warning-message');
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -218,6 +239,11 @@ class CreateUserPageObject {
     const dataInputEvent = {target: {value: data}};
     fireEvent.change(element, dataInputEvent);
   }
+
+  /** on keypup element */
+  keyUpInput(component)  {
+    fireEvent.keyUp(component, {keyCode: 38});
+  }
 }
 
 

package/src/react-extension/components/User/DisplayUserWorkspaceActions/DisplayUserWorkspaceActions.js

@@ -28,6 +28,7 @@ import {Trans, withTranslation} from "react-i18next";
 import HandleReviewAccountRecoveryRequestWorkflow
   from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
 import {withWorkflow} from "../../../contexts/WorkflowContext";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 /**
  * This component is a container of multiple actions applicable on user
@@ -344,7 +345,7 @@ class DisplayUserWorkspaceActions extends React.Component {
     this.closeMoreMenu();
     const baseUrl = this.props.context.userSettings.getTrustedDomain();
     const permalink = `${baseUrl}/app/users/view/${this.selectedUser.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/User/DisplayUsersContextualMenu/DisplayUsersContextualMenu.js

@@ -24,8 +24,8 @@ import DeleteUser from "../DeleteUser/DeleteUser";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {Trans, withTranslation} from "react-i18next";
 import {withWorkflow} from "../../../contexts/WorkflowContext";
-import HandleReviewAccountRecoveryRequestWorkflow
-  from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
+import HandleReviewAccountRecoveryRequestWorkflow from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 class DisplayUsersContextualMenu extends React.Component {
   /**
@@ -93,7 +93,7 @@ class DisplayUsersContextualMenu extends React.Component {
   async handlePermalinkCopy() {
     const baseUrl = this.props.context.userSettings.getTrustedDomain();
     const permalink = `${baseUrl}/app/users/view/${this.user.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"));
     this.props.hide();
   }
@@ -103,7 +103,7 @@ class DisplayUsersContextualMenu extends React.Component {
    */
   async handleUsernameCopy() {
     const username = `${this.user.username}`;
-    await navigator.clipboard.writeText(username);
+    await ClipBoard.copy(username, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The email has been copied to clipboard"));
     this.props.hide();
   }
@@ -113,7 +113,7 @@ class DisplayUsersContextualMenu extends React.Component {
    */
   async handlePublicKeyCopy() {
     const gpgkeyInfo = await this.props.context.port.request('passbolt.keyring.get-public-key-info-by-user', this.user.id);
-    await navigator.clipboard.writeText(gpgkeyInfo.armored_key);
+    await ClipBoard.copy(gpgkeyInfo.armored_key, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The public key has been copied to clipboard"));
     this.props.hide();
   }

package/src/react-extension/components/User/EditUser/EditUser.js

@@ -21,6 +21,9 @@ import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelBut
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import {Trans, withTranslation} from "react-i18next";
+import {maxSizeValidation} from '../../../lib/Error/InputValidator';
+import Icon from "../../../../shared/components/Icons/Icon";
+import {USER_INPUT_MAX_LENGTH} from '../../../../shared/constants/inputs.const';
 
 class EditUser extends Component {
   /**
@@ -49,8 +52,10 @@ class EditUser extends Component {
       // Fields and errors
       first_name: user.profile.first_name,
       first_nameError: null,
+      first_nameWarning: "",
       last_name: user.profile.last_name,
       last_nameError: null,
+      last_nameWarning: "",
       username: user.username,
       is_admin: role.name === 'admin',
       hasAlreadyBeenValidated: false // True if the form has alreadt been submitted once
@@ -139,6 +144,9 @@ class EditUser extends Component {
     if (this.state.hasAlreadyBeenValidated) {
       const state = this.validateFirstNameInput();
       this.setState(state);
+    } else {
+      const first_nameWarning = maxSizeValidation(this.state.first_name, USER_INPUT_MAX_LENGTH, this.translate);
+      this.setState({first_nameWarning});
     }
   }
 
@@ -149,6 +157,9 @@ class EditUser extends Component {
     if (this.state.hasAlreadyBeenValidated) {
       const state = this.validateLastNameInput();
       this.setState(state);
+    } else {
+      const last_nameWarning = maxSizeValidation(this.state.last_name, USER_INPUT_MAX_LENGTH, this.translate);
+      this.setState({last_nameWarning});
     }
   }
 
@@ -343,7 +354,9 @@ class EditUser extends Component {
         <form className="user-edit-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             <div className={`input text required ${this.state.first_nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="user-first-name-input"><Trans>First name</Trans></label>
+              <label htmlFor="user-first-name-input"><Trans>First name</Trans>{this.state.first_nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="user-first-name-input" name="first_name"
                 ref={this.firstNameRef} type="text" value={this.state.first_name} placeholder={this.translate("First name")}
                 required="required" disabled={this.hasAllInputDisabled()}
@@ -353,10 +366,16 @@ class EditUser extends Component {
               {this.state.first_nameError &&
               <div className="first_name error-message">{this.state.first_nameError}</div>
               }
+              {this.state.first_nameWarning && (
+                <div className="firstname warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.first_nameWarning}
+                </div>
+              )}
             </div>
             <div className={`input text required ${this.state.last_nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="user-last-name-input"><Trans>Last name</Trans></label>
               <input id="user-last-name-input" name="last_name"
+                maxLength="128"
                 ref={this.lastNameRef} type="text" value={this.state.last_name} placeholder={this.translate("Last name")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleLastNameInputOnKeyUp} onChange={this.handleInputChange}
@@ -365,10 +384,18 @@ class EditUser extends Component {
               {this.state.last_nameError &&
               <div className="last_name error-message">{this.state.last_nameError}</div>
               }
+              {this.state.last_nameWarning && (
+                <div className="lastname warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.last_nameWarning}
+                </div>
+              )}
             </div>
             <div className="input text required disabled">
-              <label htmlFor="user-username-input"><Trans>Username / Email</Trans></label>
+              <label htmlFor="user-username-input"><Trans>Username / Email</Trans>{this.state.last_nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="user-username-input" name="username"
+                maxLength="128"
                 type="text" value={this.state.username} placeholder={this.translate("Username")}
                 required="required" disabled={true}
                 autoComplete='off' autoFocus={true}

package/src/react-extension/components/User/EditUser/EditUser.test.js

@@ -24,6 +24,7 @@ import {defaultAppContext, defaultProps} from "./EditUser.test.data";
 beforeEach(() => {
   jest.resetModules();
 });
+const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
 
 describe("See the Create Dialog User", () => {
   let page; // The page to test against
@@ -148,5 +149,16 @@ describe("See the Create Dialog User", () => {
       expect(page.editUser.errorDialog).not.toBeNull();
       expect(page.editUser.errorDialogMessage).not.toBeNull();
     });
+    it("As a user I should see a feedback when firstname or lastname field content is truncated by a field limit", async() => {
+      expect.assertions(2);
+      page.editUser.fillInput(page.editUser.firstName, 'a'.repeat(128));
+      page.editUser.fillInput(page.editUser.lastName, 'a'.repeat(128));
+
+      await page.editUser.keyUpInput(page.editUser.firstName);
+      await page.editUser.keyUpInput(page.editUser.lastName);
+
+      expect(page.editUser.firstnameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.editUser.lastnameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
   });
 });

package/src/react-extension/components/User/EditUser/EditUser.test.page.js

@@ -179,6 +179,27 @@ class EditUserPageObject {
     return this._container.querySelector('.error-dialog .dialog .dialog-content .form-content');
   }
 
+  /**
+   * Returns the username warning mesage input element
+   */
+  get usernameWarningMessage() {
+    return this._container.querySelector('.username.warning-message');
+  }
+
+  /**
+   * Returns the first name warning mesage input element
+   */
+  get firstnameWarningMessage() {
+    return this._container.querySelector('.firstname.warning-message');
+  }
+
+  /**
+   * Returns the last name warning mesage input element
+   */
+  get lastnameWarningMessage() {
+    return this._container.querySelector('.lastname.warning-message');
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -211,4 +232,9 @@ class EditUserPageObject {
     const dataInputEvent = {target: {value: data}};
     fireEvent.change(element, dataInputEvent);
   }
+
+  /** on keypup element */
+  keyUpInput(component)  {
+    fireEvent.keyUp(component, {keyCode: 38});
+  }
 }

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

@@ -24,6 +24,7 @@ import DisplayUserDetailsPublicKey from "../DisplayUserDetailsPublicKey/DisplayU
 import UserAvatar from "../../Common/Avatar/UserAvatar";
 import {withTranslation, Trans} from "react-i18next";
 import DisplayUserDetailsAccountRecovery from "../DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 class DisplayUserDetails extends React.Component {
   /**
@@ -67,7 +68,7 @@ class DisplayUserDetails extends React.Component {
   async handlePermalinkClick() {
     const baseUrl = this.props.context.userSettings.getTrustedDomain();
     const permalink = `${baseUrl}/app/users/view/${this.user.id}`;
-    await navigator.clipboard.writeText(permalink);
+    await ClipBoard.copy(permalink, this.props.context.port);
     await this.props.actionFeedbackContext.displaySuccess(this.translate("The permalink has been copied to clipboard"));
   }