passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Common/Error/ApiError/ApiError.test.js

@@ -0,0 +1,43 @@
+/**
+ * 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.9.0
+ */
+import ApiErrorPage from "./ApiError.test.page";
+import {waitFor} from "@testing-library/dom";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("ApiError", () => {
+  it('Should display the given error log message from the content of the page', async() => {
+    expect.assertions(6);
+    const props = {
+      errorDetails: "This is an error message to be displayed in the log details"
+    };
+    const page = new ApiErrorPage(props);
+    await waitFor(() => {});
+
+    expect(page.exists()).toBeTruthy();
+    expect(page.logToggle).toBeTruthy();
+    expect(page.logDetails).toBeFalsy();
+
+    await page.clickOnLogToggle();
+
+    expect(page.logDetails).toBeTruthy();
+    expect(page.logDetails.value).toStrictEqual(props.errorDetails);
+
+    await page.clickOnLogToggle();
+
+    expect(page.logDetails).toBeFalsy();
+  });
+});

package/src/react-extension/components/Common/Error/ApiError/ApiError.test.page.js

@@ -0,0 +1,108 @@
+/**
+ * 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.9.0
+ */
+
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import ApiError from "./ApiError";
+
+/**
+ * The ApiErrorPage component represented as a page
+ */
+export default class ApiErrorPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor({errorDetails, ...props}) {
+    this._page = render(
+      <MockTranslationProvider>
+        <>
+          <ApiError {...props}/>
+          <div id="api-error-details" className="visually-hidden">
+            {errorDetails}
+          </div>
+        </>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Shortcut method for the container querySelector.
+   * @param {string} stringSelector
+   * @returns {HTMLElement}
+   */
+  select(stringSelector) {
+    return this._page.container.querySelector(stringSelector);
+  }
+
+  /**
+   * Returns true if the page exists.
+   * This means that it's loaded and the title text content is non empty.
+   * @returns {boolean}
+   */
+  exists() {
+    return this.panel !== null;
+  }
+
+  /**
+   * Simulates a click on the given HTML element.
+   * The clicks is consider done when the callback returns {true}.
+   * @param {HTMLElement} element The HTML element onto simulate the click
+   * @param {function} callback The callback to be used in the waitFor method to ensure the click is done (returns true when it's done)
+   * @returns {Promise<void>}
+   */
+  async clickOn(element, callback) {
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {
+      if (!callback()) {
+        throw new Error("Page didn't react yet on the event.");
+      }
+    });
+  }
+
+  /**
+   * Returns the main panel
+   * @return {HTMLElement}
+   */
+  get panel() {
+    return this.select('.api-error-card');
+  }
+
+  /**
+   * Returns the main panel
+   * @return {HTMLElement}
+   */
+  get logToggle() {
+    return this.select('.api-error-card .accordion-header a');
+  }
+
+  /**
+   * Returns the textarea containing the log details
+   * @return {HTMLElement}
+   */
+  get logDetails() {
+    return this.select('.api-error-card .accordion-content textarea');
+  }
+
+  /**
+   * Simulates a click on the Log button toggle
+   * @return {Promise<void>}
+   */
+  clickOnLogToggle() {
+    const isLogDetailsPresent = Boolean(this.logDetails);
+    return this.clickOn(this.logToggle, () => isLogDetailsPresent !== Boolean(this.logDetails));
+  }
+}

package/src/react-extension/components/Common/Error/ApiError/ApiError.test.stories.js

@@ -0,0 +1,39 @@
+/**
+ * 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.9.0
+ */
+
+import React from "react";
+import ApiError from "./ApiError";
+
+export default {
+  title: 'Components/Common/Error/ApiError',
+  component: ApiError
+};
+
+const Template = args =>
+  <div id="root">
+    <ApiError {...args}/>
+    <div id="api-error-details" className="visually-hidden">
+      {args.errorDetails}
+    </div>
+  </div>;
+
+const parameters = {
+  css: "api_main"
+};
+
+export const ErrorFeedback = Template.bind({});
+ErrorFeedback.args = {
+  errorDetails: "AADSTS70011: The provided value for the input parameter 'scope' isn't valid. The scope https://example.contoso.com/activity.read isn't valid.\r\nTrace ID: 255d1aef-8c98-452f-ac51-23d051240864\r\nCorrelation ID: fb3d2015-bc17-4bb9-bb85-30c5cf1aaaa7\r\nTimestamp: 2016-01-09 02:02:12Z",
+};
+ErrorFeedback.parameters = parameters;

package/src/react-extension/components/Common/Inputs/Autocomplete/Autocomplete.test.js

@@ -15,6 +15,7 @@
 /**
  * Unit tests on Autocomplete in regard of specifications
  */
+import {groups} from "../../../UserDetails/DisplayUserDetails/DisplayUserDetails.test.data";
 import {defaultProps} from "./Autocomplete.test.data";
 import AutocompletePage from "./Autocomplete.test.page";
 
@@ -73,6 +74,17 @@ describe("See the Autocomplete", () => {
       expect(props.onClose).toHaveBeenCalled();
     });
 
+    it('As LU I should see an item with the number of user into the group', async() => {
+      expect.assertions(1);
+      const items = [
+        {name: "group", groups_users: groups}
+      ];
+      const requestMockImpl = jest.fn(() => items);
+      jest.spyOn(props, 'searchCallback').mockImplementation(requestMockImpl);
+      await page.fillInput("at");
+      expect(page.getAutocompleteItemDetails(1)).toBe("10 group members");
+    });
+
     it('As LU I should see autocomplete empty', async() => {
       expect.assertions(3);
       const requestMockImpl = jest.fn(() => []);

package/src/react-extension/components/Common/Inputs/Autocomplete/AutocompleteItem.js

@@ -55,8 +55,8 @@ class AutocompleteItem extends Component {
       const longId = this.props.user.gpgkey.fingerprint.substr(this.props.user.gpgkey.fingerprint.length - 16);
       return longId.replace(/(.{4})/g, "$1 ");
     } else {
-      if (this.props.group.user_count > 1) {
-        return `${this.props.group.user_count} group members`;
+      if (this.props.group?.groups_users?.length > 1) {
+        return `${this.props.group.groups_users.length} group members`;
       } else {
         return `One group member`;
       }

package/src/react-extension/components/Common/Legacy/HandleLegacyAppjs.js

@@ -83,7 +83,7 @@ class HandleLegacyAppjs extends Component {
       "/app/administration/users-directory",
       "/app/administration/email-notification",
       "/app/administration/internationalisation",
-      "/app/settings/mfa"
+      "/app/settings/mfa",
     ];
     return apiPaths.some(apiPath => path.endsWith(apiPath));
   }

package/src/react-extension/components/Common/Navigation/Header/Logo.js

@@ -21,7 +21,19 @@ class Logo extends Component {
   render() {
     return (
       <div className="col1">
-        <div className="logo no-img">
+        <div className="logo-svg no-img">
+          <svg height="25px" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 30 450 20">
+            <g clipPath="url(#clip0)">
+              <path d="M12.1114 26.4938V52.609h7.4182c4.9203 0 8.3266-1.0597 10.3704-3.1035 2.0438-2.0438 3.0278-5.5258 3.0278-10.2947 0-4.6175-.9083-7.8724-2.8007-9.7648-1.8924-2.0438-5.0717-2.9522-9.6891-2.9522h-8.3266zM0 16.5776h23.3144c7.0398 0 12.4899 2.0438 16.4261 6.2071 3.9362 4.1633 5.9043 9.9162 5.9043 17.2588 0 3.0278-.3785 5.8286-1.2111 8.3265-.8327 2.498-2.0438 4.8446-3.7091 6.8884-1.9681 2.498-4.3904 4.3147-7.1155 5.4501-2.8007 1.0598-6.4342 1.5896-11.0516 1.5896H12.1114v16.5775H0v-62.298zM70.0188 53.1389H85.158v-9.462H70.9272c-2.8008 0-4.7689.3785-5.8287 1.1354-1.0597.757-1.5896 2.1195-1.5896 4.0119 0 1.5896.4542 2.7251 1.2869 3.4063.8326.6056 2.5736.9084 5.223.9084zM53.9712 16.5776h24.7527c6.2827 0 10.9759 1.4383 14.1551 4.3147 3.1793 2.8765 4.7689 7.1155 4.7689 12.7927v28.6888H65.0985c-4.5417 0-8.0994-1.1354-10.5217-3.4063s-3.6334-5.5258-3.6334-9.7648c0-5.223 1.3625-8.9322 4.1633-11.203 2.8007-2.2709 7.4939-3.4064 14.0794-3.4064h15.8962v-1.1354c0-2.7251-.8326-4.6175-2.4222-5.7529-1.5897-1.1355-4.3904-1.6653-8.5537-1.6653H53.9712v-9.4621zM107.488 52.8356h25.51c2.271 0 3.936-.3784 4.92-1.0597 1.06-.6813 1.59-1.8167 1.59-3.4063 0-1.5897-.53-2.7251-1.59-3.4064-1.059-.7569-2.725-1.1354-4.92-1.1354h-10.446c-6.207 0-10.37-.9841-12.566-2.8765-2.195-1.8924-3.255-5.2987-3.255-10.0676 0-4.9202 1.287-8.5536 3.937-10.9002 2.649-2.3466 6.737-3.482 12.187-3.482h25.964v9.5377h-21.347c-3.482 0-5.753.3028-6.812.9083-1.06.6056-1.59 1.6654-1.59 3.255 0 1.4382.454 2.498 1.362 3.1035.909.6813 2.423.9841 4.391.9841h10.976c4.996 0 8.856 1.2111 11.43 3.5577 2.649 2.3466 3.936 5.6772 3.936 10.0676 0 4.239-1.211 7.721-3.558 10.3704-2.346 2.6493-5.298 4.0119-9.007 4.0119h-31.112v-9.4621zM159.113 52.8356h25.51c2.271 0 3.936-.3784 4.92-1.0597 1.06-.6813 1.59-1.8167 1.59-3.4063 0-1.5897-.53-2.7251-1.59-3.4064-1.059-.7569-2.725-1.1354-4.92-1.1354h-10.446c-6.207 0-10.37-.9841-12.566-2.8765-2.195-1.8924-3.255-5.2987-3.255-10.0676 0-4.9202 1.287-8.5536 3.937-10.9002 2.649-2.3466 6.737-3.482 12.187-3.482h25.964v9.5377h-21.347c-3.482 0-5.753.3028-6.812.9083-1.06.6056-1.59 1.6654-1.59 3.255 0 1.4382.454 2.498 1.362 3.1035.909.6813 2.423.9841 4.391.9841h10.976c4.996 0 8.856 1.2111 11.43 3.5577 2.649 2.3466 3.936 5.6772 3.936 10.0676 0 4.239-1.211 7.721-3.558 10.3704-2.346 2.6493-5.298 4.0119-9.007 4.0119h-31.263v-9.4621h.151zM223.607 0v16.5775h10.37c4.617 0 8.251.5298 11.052 1.6653 2.8 1.0597 5.147 2.8764 7.115 5.3744 1.665 2.1195 2.876 4.3904 3.709 6.9641.833 2.4979 1.211 5.2987 1.211 8.3265 0 7.3426-1.968 13.0955-5.904 17.2588-3.936 4.1633-9.386 6.2071-16.426 6.2071h-23.315V0h12.188zm7.342 26.4937h-7.418v26.1152h8.326c4.618 0 7.873-.9841 9.69-2.8765 1.892-1.9681 2.8-5.223 2.8-9.9162 0-4.7689-1.059-8.1752-3.103-10.219-1.968-2.1195-5.45-3.1035-10.295-3.1035zM274.172 39.5132c0 4.3904.984 7.721 3.027 10.219 2.044 2.4223 4.845 3.6334 8.554 3.6334 3.633 0 6.434-1.2111 8.554-3.6334 2.044-2.4223 3.103-5.8286 3.103-10.219s-1.059-7.721-3.103-10.1433c-2.044-2.4222-4.845-3.6334-8.554-3.6334-3.633 0-6.434 1.2112-8.554 3.6334-2.043 2.4223-3.027 5.8286-3.027 10.1433zm35.88 0c0 7.1912-2.196 12.9441-6.586 17.2588-4.39 4.2389-10.219 6.4341-17.637 6.4341-7.418 0-13.323-2.1195-17.713-6.4341-4.391-4.3147-6.586-9.9919-6.586-17.1831 0-7.1911 2.195-12.944 6.586-17.2587 4.39-4.3147 10.295-6.5099 17.713-6.5099 7.342 0 13.247 2.1952 17.637 6.5099 4.39 4.239 6.586 9.9919 6.586 17.183zM329.884 62.3737h-12.565V0h12.565v62.3737zM335.712 16.5775h8.554V0h12.111v16.5775h12.793v9.1592h-12.793v18.4699c0 3.4063.606 5.7529 1.742 7.1154 1.135 1.2869 3.179 1.9681 6.055 1.9681h4.996v9.1593h-11.127c-4.466 0-7.873-1.2112-10.295-3.7091-2.346-2.498-3.558-6.0557-3.558-10.6732V25.7367h-8.553v-9.1592h.075z" fill="var(--icon-color)"></path>
+              <path d="M446.532 30.884L419.433 5.52579c-2.347-2.19519-6.056-2.19519-8.478 0L393.923 21.4977c4.466 1.6653 7.948 5.3744 9.235 9.9919h23.012c1.211 0 2.119.984 2.119 2.1195v3.482c0 1.2111-.984 2.1195-2.119 2.1195h-2.649v4.9202c0 1.2112-.985 2.1195-2.12 2.1195h-5.829c-1.211 0-2.119-.984-2.119-2.1195v-4.9202h-10.219c-1.287 4.6932-4.769 8.478-9.311 10.0676l17.108 15.9719c2.346 2.1952 6.055 2.1952 8.478 0l27.023-25.3582c2.574-2.4223 2.574-6.5099 0-9.0079z" fill="#E10600"></path>
+              <path d="M388.927 28.3862c-1.135 0-2.195.3028-3.179.757-2.271 1.1354-3.86 3.482-3.86 6.2071 0 2.6493 1.438 4.9202 3.633 6.1314.984.5298 2.12.8326 3.331.8326 3.86 0 6.964-3.1035 6.964-6.964.151-3.7848-3.028-6.9641-6.889-6.9641z" fill="#E10600"></path>
+            </g>
+            <defs>
+              <clipPath id="clip0">
+                <path fill="#fff" d="M0 0h448.5v78.9511H0z"></path>
+              </clipPath>
+            </defs>
+          </svg>
           <h1><span>Passbolt</span></h1>
         </div>
       </div>

package/src/react-extension/components/Resource/CreateResource/CreateResource.js

@@ -31,13 +31,15 @@ import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGene
 import {withResourcePasswordGeneratorContext} from "../../../contexts/ResourcePasswordGeneratorContext";
 import Password from "../../../../shared/components/Password/Password";
 import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
-
-
-/** Resource password max length */
-const RESOURCE_PASSWORD_MAX_LENGTH = 4096;
-
-/** Resource description max length */
-const RESOURCE_DESCRIPTION_MAX_LENGTH = 10000;
+import {maxSizeValidation} from "../../../lib/Error/InputValidator";
+import {
+  RESOURCE_NAME_MAX_LENGTH,
+  RESOURCE_PASSWORD_MAX_LENGTH,
+  RESOURCE_URI_MAX_LENGTH,
+  RESOURCE_DESCRIPTION_MAX_LENGTH,
+} from "../../../../shared/constants/inputs.const";
+import debounce from "debounce-promise";
+import PownedService from "../../../../shared/services/api/secrets/pownedService";
 
 class CreateResource extends Component {
   constructor() {
@@ -45,16 +47,21 @@ class CreateResource extends Component {
     this.state = this.getDefaultState();
     this.initEventHandlers();
     this.createInputRef();
+    this.isPwndProcessingPromise = null;
+    this.evaluatePasswordIsInDictionaryDebounce = debounce(this.evaluatePasswordIsInDictionaryDebounce, 300);
   }
 
   getDefaultState() {
     return {
       name: "",
       nameError: "",
+      nameWarning: "",
       username: "",
       usernameError: "",
+      usernameWarning: "",
       uri: "",
       uriError: "",
+      uriWarning: "",
       password: "",
       passwordError: "",
       passwordWarning: "",
@@ -62,7 +69,9 @@ class CreateResource extends Component {
       descriptionError: "",
       descriptionWarning: "",
       encryptDescription: false,
-      hasAlreadyBeenValidated: false // True if the form has already been submitted once
+      hasAlreadyBeenValidated: false, // True if the form has already been submitted once
+      isPwnedServiceAvailable: true,
+      passwordInDictionary: false
     };
   }
 
@@ -75,6 +84,8 @@ class CreateResource extends Component {
     this.handleGeneratePasswordButtonClick = this.handleGeneratePasswordButtonClick.bind(this);
     this.handleDescriptionToggle = this.handleDescriptionToggle.bind(this);
     this.handleDescriptionInputKeyUp = this.handleDescriptionInputKeyUp.bind(this);
+    this.handleUriInputKeyUp = this.handleUriInputKeyUp.bind(this);
+    this.handleUsernameInputKeyUp = this.handleUsernameInputKeyUp.bind(this);
     this.handleOpenGenerator = this.handleOpenGenerator.bind(this);
     this.handleLastGeneratedPasswordChanged = this.handleLastGeneratedPasswordChanged.bind(this);
   }
@@ -91,6 +102,7 @@ class CreateResource extends Component {
    * Whenever the component has been mounted
    */
   componentDidMount() {
+    this.pownedService = new PownedService(this.props.context.port);
     if (this.isEncryptedDescriptionEnabled()) {
       this.setState({encryptDescription: true});
     }
@@ -101,7 +113,9 @@ class CreateResource extends Component {
    * @param prevProps The previous component props
    */
   componentDidUpdate(prevProps) {
-    this.handleLastGeneratedPasswordChanged(prevProps.resourcePasswordGeneratorContext.lastGeneratedPassword);
+    this.handleLastGeneratedPasswordChanged(
+      prevProps.resourcePasswordGeneratorContext.lastGeneratedPassword
+    );
   }
 
   /*
@@ -111,7 +125,9 @@ class CreateResource extends Component {
    */
   get currentGeneratorConfiguration() {
     const type = this.props.resourcePasswordGeneratorContext.settings.default_generator;
-    return this.props.resourcePasswordGeneratorContext.settings.generators.find(generator => generator.type === type);
+    return this.props.resourcePasswordGeneratorContext.settings.generators.find(
+      generator => generator.type === type
+    );
   }
 
   /**
@@ -155,7 +171,6 @@ class CreateResource extends Component {
    */
   async handleFormSubmit(event) {
     event.preventDefault();
-
     if (this.state.processing) {
       return;
     }
@@ -205,7 +220,7 @@ class CreateResource extends Component {
       uriError: "",
       usernameError: "",
       passwordError: "",
-      descriptionError: ""
+      descriptionError: "",
     });
 
     // Validate the form inputs.
@@ -249,6 +264,17 @@ class CreateResource extends Component {
     });
   }
 
+  /**
+   * Evaluate to check if password is in a dictionary.
+   * @return {Promise}
+   */
+  async evaluatePasswordIsInDictionaryDebounce() {
+    if (this.state.isPwnedServiceAvailable) {
+      const result = await this.pownedService.evaluateSecret(this.state.password);
+      this.setState({isPwnedServiceAvailable: result.isPwnedServiceAvailable, passwordInDictionary: result.inDictionary});
+    }
+  }
+
   /*
    * =============================================================
    *  Create resource
@@ -263,7 +289,7 @@ class CreateResource extends Component {
       name: this.state.name,
       username: this.state.username,
       uri: this.state.uri,
-      folder_parent_id: this.props.context.resourceCreateDialogProps.folderParentId
+      folder_parent_id: this.props.context.resourceCreateDialogProps.folderParentId,
     };
 
     // No resource types, legacy case
@@ -369,7 +395,7 @@ class CreateResource extends Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      error: error
+      error: error,
     };
     this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
@@ -420,8 +446,14 @@ class CreateResource extends Component {
     const target = event.target;
     const value = target.value;
     const name = target.name;
+
+    if (name === "password") {
+      if (value.length) {
+        this.isPwndProcessingPromise = this.evaluatePasswordIsInDictionaryDebounce();
+      }
+    }
     this.setState({
-      [name]: value
+      [name]: value,
     });
   }
 
@@ -432,6 +464,9 @@ class CreateResource extends Component {
     if (this.state.hasAlreadyBeenValidated) {
       const state = this.validateNameInput();
       this.setState(state);
+    } else {
+      const nameWarning = maxSizeValidation(this.state.name, RESOURCE_NAME_MAX_LENGTH, this.translate);
+      this.setState({nameWarning});
     }
   }
 
@@ -443,9 +478,7 @@ class CreateResource extends Component {
       const state = this.validatePasswordInput();
       this.setState(state);
     } else {
-      const hasResourcePasswordMaxLength = this.state.password.length >= RESOURCE_PASSWORD_MAX_LENGTH;
-      const warningMessage = this.translate("this is the maximum size for this field, make sure your data was not truncated");
-      const passwordWarning = hasResourcePasswordMaxLength ? warningMessage : '';
+      const passwordWarning = maxSizeValidation(this.state.password, RESOURCE_PASSWORD_MAX_LENGTH, this.translate);
       this.setState({passwordWarning});
     }
   }
@@ -459,9 +492,10 @@ class CreateResource extends Component {
     }
 
     const password = SecretGenerator.generate(this.currentGeneratorConfiguration);
+
     this.setState({
       password: password,
-      passwordError: ""
+      passwordError: "",
     });
   }
 
@@ -498,20 +532,37 @@ class CreateResource extends Component {
    */
   handleDescriptionInputKeyUp() {
     if (!this.state.hasAlreadyBeenValidated) {
-      const hasResourceDescriptionMaxLength = this.state.description.length >= RESOURCE_DESCRIPTION_MAX_LENGTH;
-
-      const warningMessage = this.translate("this is the maximum size for this field, make sure your data was not truncated");
-      const descriptionWarning = hasResourceDescriptionMaxLength ? warningMessage : '';
+      const descriptionWarning = maxSizeValidation(this.state.description, RESOURCE_DESCRIPTION_MAX_LENGTH, this.translate);
       this.setState({descriptionWarning});
     }
   }
 
+  /**
+   * Whenever the user input keys in the name area
+   */
+  handleUriInputKeyUp() {
+    if (!this.state.hasAlreadyBeenValidated) {
+      const uriWarning = maxSizeValidation(this.state.uri, RESOURCE_URI_MAX_LENGTH, this.translate);
+      this.setState({uriWarning});
+    }
+  }
+
+  /**
+   * Whenever the user input keys in the username area
+   */
+  handleUsernameInputKeyUp() {
+    if (!this.state.hasAlreadyBeenValidated) {
+      const usernameWarning = maxSizeValidation(this.state.username, RESOURCE_NAME_MAX_LENGTH, this.translate);
+      this.setState({usernameWarning});
+    }
+  }
+
   /**
    * Returns true if the logged in user can use the password generator capability.
    * @returns {boolean}
    */
   get canUsePasswordGenerator() {
-    return this.props.context.siteSettings.canIUse('passwordGenerator');
+    return this.props.context.siteSettings.canIUse("passwordGenerator");
   }
 
   /**
@@ -536,7 +587,7 @@ class CreateResource extends Component {
         <form onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.state.processing ? 'disabled' : ''}`}>
-              <label htmlFor="create-password-form-name"><Trans>Name</Trans></label>
+              <label htmlFor="create-password-form-name"><Trans>Name</Trans>{this.state.nameWarning && <Icon name="exclamation" />}</label>
               <input id="create-password-form-name" name="name" type="text" value={this.state.name}
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}
                 disabled={this.state.processing} ref={this.nameInputRef} className="required fluid" maxLength="255"
@@ -544,29 +595,44 @@ class CreateResource extends Component {
               {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 text ${this.state.uriError ? "error" : ""} ${this.state.processing ? 'disabled' : ''}`}>
-              <label htmlFor="create-password-form-uri"><Trans>URI</Trans></label>
-              <input id="create-password-form-uri" name="uri" className="fluid" maxLength="1024" type="text"
+              <label htmlFor="create-password-form-uri"><Trans>URI</Trans>{this.state.uriWarning && <Icon name="exclamation" />}</label>
+              <input id="create-password-form-uri" name="uri" className="fluid" maxLength="1024" type="text" onKeyUp={this.handleUriInputKeyUp}
                 autoComplete="off" value={this.state.uri} onChange={this.handleInputChange} placeholder={this.translate("URI")}
                 disabled={this.state.processing}/>
               {this.state.uriError &&
               <div className="error-message">{this.state.uriError}</div>
               }
+              {this.state.uriWarning && (
+                <div className="uri warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.uriWarning}
+                </div>
+              )}
             </div>
             <div className={`input text ${this.state.usernameError ? "error" : ""} ${this.state.processing ? 'disabled' : ''}`}>
-              <label htmlFor="create-password-form-username"><Trans>Username</Trans></label>
-              <input id="create-password-form-username" name="username" type="text" className="fluid" maxLength="255"
+              <label htmlFor="create-password-form-username"><Trans>Username</Trans>{this.state.usernameWarning && <Icon name="exclamation" />}</label>
+              <input id="create-password-form-username" name="username" type="text" className="fluid" maxLength="255"   onKeyUp={this.handleUsernameInputKeyUp}
                 autoComplete="off" value={this.state.username} onChange={this.handleInputChange} placeholder={this.translate("Username")}
                 disabled={this.state.processing}/>
               {this.state.usernameError &&
               <div className="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-password-wrapper input required ${this.state.passwordError ? "error" : ""} ${this.state.processing ? 'disabled' : ''}`}>
               <label htmlFor="create-password-form-password">
                 <Trans>Password</Trans>
-                {this.state.passwordWarning &&
+                {(this.state.passwordWarning || this.state.passwordInDictionary || !this.state.isPwnedServiceAvailable) &&
                   <Icon name="exclamation"/>
                 }
               </label>
@@ -601,6 +667,12 @@ class CreateResource extends Component {
               {this.state.passwordWarning &&
                 <div className="password warning-message"><strong><Trans>Warning:</Trans></strong> {this.state.passwordWarning}</div>
               }
+              {!this.state.isPwnedServiceAvailable &&
+                    <div className="pwned-password warning-message"><Trans>The pwnedpasswords service is unavailable, your password might be part of an exposed data breach</Trans></div>
+              }
+              {this.state.passwordInDictionary &&
+                    <div className="pwned-password warning-message"><Trans>The password is part of an exposed data breach.</Trans></div>
+              }
             </div>
             <div className={`input textarea ${this.state.processing ? 'disabled' : ''}`}>
               <label htmlFor="create-password-form-description"><Trans>Description</Trans>
@@ -660,3 +732,4 @@ CreateResource.propTypes = {
 };
 
 export default  withResourcePasswordGeneratorContext(withAppContext(withActionFeedback(withRouter(withDialog(withTranslation('common')(CreateResource))))));
+