passbolt-styleguide 3.8.4 → 3.9.0-alpha2

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

@@ -37,7 +37,7 @@ describe("See the Create Resource", () => {
     folderParentId: null
   };
 
-  const mockContextRequest = implementation => jest.spyOn(context.port, 'request').mockImplementation(implementation);
+  const mockContextRequest = implementation => jest.spyOn(context.port, 'request').mockImplementationOnce(implementation);
   const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
   describe('As LU I can start adding a password', () => {
     /**
@@ -46,6 +46,11 @@ describe("See the Create Resource", () => {
     beforeEach(() => {
       context.setContext({resourceCreateDialogProps});
       page = new CreateResourcePage(context, props);
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
     });
 
     it('matches the styleguide', () => {
@@ -102,8 +107,10 @@ describe("See the Create Resource", () => {
 
     it('views password when clicking on the view button.', async() => {
       expect.assertions(8);
+      mockContextRequest(() => Promise(0));
       const passwordValue = "secret-decrypted";
-      page.passwordCreate.fillInput(page.passwordCreate.password, passwordValue);
+      await page.passwordCreate.fillInputPassword(passwordValue);
+
       // View password
       await page.passwordCreate.click(page.passwordCreate.passwordViewButton);
       expect(page.passwordCreate.password.value).toBe(passwordValue);
@@ -137,7 +144,8 @@ describe("See the Create Resource", () => {
       page.passwordCreate.fillInput(page.passwordCreate.name, resourceMeta.name);
       page.passwordCreate.fillInput(page.passwordCreate.uri, resourceMeta.uri);
       page.passwordCreate.fillInput(page.passwordCreate.username, resourceMeta.username);
-      page.passwordCreate.fillInput(page.passwordCreate.password, resourceMeta.password);
+      await page.passwordCreate.fillInputPassword(resourceMeta.password);
+
       expect(page.passwordCreate.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
       expect(page.passwordCreate.progressBar.classList.contains("not_available")).toBe(false);
       page.passwordCreate.fillInput(page.passwordCreate.description, resourceMeta.description);
@@ -180,7 +188,7 @@ describe("See the Create Resource", () => {
       page.passwordCreate.fillInput(page.passwordCreate.name, resourceMeta.name);
       page.passwordCreate.fillInput(page.passwordCreate.uri, resourceMeta.uri);
       page.passwordCreate.fillInput(page.passwordCreate.username, resourceMeta.username);
-      page.passwordCreate.fillInput(page.passwordCreate.password, resourceMeta.password);
+      await page.passwordCreate.fillInputPassword(resourceMeta.password);
       expect(page.passwordCreate.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
       expect(page.passwordCreate.progressBar.classList.contains("not_available")).toBe(false);
       page.passwordCreate.fillInput(page.passwordCreate.description, resourceMeta.description);
@@ -235,7 +243,7 @@ describe("See the Create Resource", () => {
       }));
 
       page.passwordCreate.fillInput(page.passwordCreate.name, "name");
-      page.passwordCreate.fillInput(page.passwordCreate.password, "password");
+      await page.passwordCreate.fillInputPassword("password");
 
       // Mock the request function to make it the expected result
       mockContextRequest(requestMockImpl);
@@ -271,7 +279,7 @@ describe("See the Create Resource", () => {
       expect.assertions(1);
       // Mock the request function to make it return an error.
       page.passwordCreate.fillInput(page.passwordCreate.name, "name");
-      page.passwordCreate.fillInput(page.passwordCreate.password, "password");
+      await page.passwordCreate.fillInputPassword("password");
 
       const error = new PassboltApiFetchError("Jest simulate API error.");
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => {
@@ -298,14 +306,40 @@ describe("See the Create Resource", () => {
       expect(page.passwordCreate.passwordGeneratorDialog).not.toBeNull();
     });
 
-    it("As a user I should see a feedback when the password or descriptions fields content is truncated by a field limit", async() => {
-      expect.assertions(2);
+    it("As a user I should see a feedback when the password, descriptions, name, username or uri fields content is truncated by a field limit", async() => {
+      expect.assertions(5);
       page.passwordCreate.fillInput(page.passwordCreate.password, 'a'.repeat(4097));
       page.passwordCreate.fillInput(page.passwordCreate.description, 'a'.repeat(10000));
-      page.passwordCreate.keyUpInput(page.passwordCreate.password);
-      page.passwordCreate.keyUpInput(page.passwordCreate.description);
+      page.passwordCreate.fillInput(page.passwordCreate.name, 'a'.repeat(256));
+      page.passwordCreate.fillInput(page.passwordCreate.username, 'a'.repeat(255));
+      page.passwordCreate.fillInput(page.passwordCreate.uri, 'a'.repeat(1025));
+
+      await page.passwordCreate.keyUpInput(page.passwordCreate.password);
+      await page.passwordCreate.keyUpInput(page.passwordCreate.description);
+      await page.passwordCreate.keyUpInput(page.passwordCreate.username);
+      await page.passwordCreate.keyUpInput(page.passwordCreate.name);
+      await page.passwordCreate.keyUpInput(page.passwordCreate.uri);
+
       expect(page.passwordCreate.passwordWarningMessage.textContent).toEqual(truncatedWarningMessage);
       expect(page.passwordCreate.descriptionWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.passwordCreate.nameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.passwordCreate.uriWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.passwordCreate.usernameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
+
+    it("As a signed-in user creating a password on the application, I should get warn when I enter a pwned password and not be blocked", async() => {
+      expect.assertions(2);
+
+      mockContextRequest(() => Promise.resolve(2));
+      await page.passwordCreate.fillInputPassword('hello-world');
+      // we expect a warning to inform about powned password
+      await waitFor(() => {});
+      expect(page.passwordCreate.pwnedWarningMessage.textContent).toEqual("The password is part of an exposed data breach.");
+      mockContextRequest(() => Promise.reject());
+      await page.passwordCreate.fillInputPassword('another test');
+      // we expect a warning to inform about a network issue
+      await waitFor(() => {});
+      expect(page.passwordCreate.pwnedWarningMessage.textContent).toEqual("The pwnedpasswords service is unavailable, your password might be part of an exposed data breach");
     });
   });
 });

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

@@ -20,7 +20,6 @@ import DialogContextProvider from "../../../contexts/DialogContext";
 import {MemoryRouter} from "react-router-dom";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import CreateResource from "./CreateResource";
-
 /**
  * The PasswordCreateDialog component represented as a page
  */
@@ -136,6 +135,13 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.name.error-message');
   }
 
+  /**
+   * Returns the name warning mesage input element
+   */
+  get nameWarningMessage() {
+    return this._container.querySelector('.name.warning-message');
+  }
+
   /**
    * Returns the uri input element
    */
@@ -143,6 +149,13 @@ class PasswordCreatePageObject {
     return this._container.querySelector('#create-password-form-uri');
   }
 
+  /**
+   * Returns the uri warning mesage input element
+   */
+  get uriWarningMessage() {
+    return this._container.querySelector('.uri.warning-message');
+  }
+
   /**
    * Returns the username / email input element
    */
@@ -150,6 +163,13 @@ class PasswordCreatePageObject {
     return this._container.querySelector('#create-password-form-username');
   }
 
+  /**
+   * Returns the username warning mesage input element
+   */
+  get usernameWarningMessage() {
+    return this._container.querySelector('.username.warning-message');
+  }
+
   /**
    * Returns the password input element
    */
@@ -171,6 +191,13 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.password.warning-message');
   }
 
+  /**
+   * Returns the pwned warning message
+   */
+  get pwnedWarningMessage() {
+    return this._container.querySelector('.pwned-password.warning-message');
+  }
+
   /**
    * Returns the complexity text input element
    */
@@ -228,8 +255,6 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.password-generator');
   }
 
-
-
   /**
    * Returns the save button element
    */
@@ -237,8 +262,6 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
-
-
   /**
    * Returns the cancel button element
    */
@@ -254,8 +277,6 @@ class PasswordCreatePageObject {
     return this._container.querySelector('.error-dialog .dialog .dialog-content .form-content');
   }
 
-
-
   /**
    * Returns true if the page object exists in the container
    */
@@ -289,6 +310,13 @@ class PasswordCreatePageObject {
     fireEvent.change(element, dataInputEvent);
   }
 
+  /** fill the input password with data */
+  async fillInputPassword(data)  {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.password, dataInputEvent);
+    jest.runAllTimers();
+  }
+
   /** focus the input element with data */
   focusInput(element)  {
     fireEvent.focus(element);

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

@@ -31,6 +31,7 @@ import {Trans, withTranslation} from "react-i18next";
 import {DateTime} from "luxon";
 import {withDrag} from "../../../contexts/DragContext";
 import DisplayDragResource from "./DisplayDragResource";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 /**
  * This component allows to display the filtered resources into a grid
@@ -221,8 +222,7 @@ class DisplayResourcesList extends React.Component {
   async handleCopyUsernameClick(ev, resource) {
     // Avoid the grid to select the resource while copying a resource username.
     ev.stopPropagation();
-
-    await navigator.clipboard.writeText(resource.username);
+    await ClipBoard.copy(resource.username, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The username has been copied to clipboard"));
   }
 
@@ -288,7 +288,7 @@ class DisplayResourcesList extends React.Component {
         return;
       }
     }
-    await navigator.clipboard.writeText(password);
+    await ClipBoard.copy(password, this.props.context.port);
     await this.props.resourceWorkspaceContext.onResourceCopied();
     await this.props.actionFeedbackContext.displaySuccess(this.translate("The secret has been copied to clipboard"));
   }

package/src/react-extension/components/Resource/DisplayResourcesList/DisplayResourcesListContextualMenu.js

@@ -26,6 +26,7 @@ import {
 } from "../../../contexts/ResourceWorkspaceContext";
 import sanitizeUrl, {urlProtocols} from "../../../lib/Sanitize/sanitizeUrl";
 import {Trans, withTranslation} from "react-i18next";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 class DisplayResourcesListContextualMenu extends React.Component {
   /**
@@ -77,7 +78,7 @@ class DisplayResourcesListContextualMenu extends React.Component {
    * handle username resource
    */
   async handleUsernameClickEvent() {
-    await navigator.clipboard.writeText(this.resource.username);
+    await ClipBoard.copy(this.resource.username, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The username has been copied to clipboard"));
     this.props.hide();
   }
@@ -86,7 +87,7 @@ class DisplayResourcesListContextualMenu extends React.Component {
    * handle uri resource
    */
   async handleUriClickEvent() {
-    await navigator.clipboard.writeText(this.resource.uri);
+    await ClipBoard.copy(this.resource.uri, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The uri has been copied to clipboard"));
     this.props.hide();
   }
@@ -97,7 +98,7 @@ class DisplayResourcesListContextualMenu extends React.Component {
   async handlePermalinkClickEvent() {
     const baseUrl = this.props.context.userSettings.getTrustedDomain();
     const permalink = `${baseUrl}/app/passwords/view/${this.resource.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();
   }
@@ -114,11 +115,11 @@ class DisplayResourcesListContextualMenu extends React.Component {
       throw new TypeError(this.translate("The password is empty."));
     }
     if (typeof plaintextDto === 'string') {
-      await navigator.clipboard.writeText(plaintextDto);
+      await ClipBoard.copy(plaintextDto, this.props.context.port);
       this.props.resourceWorkspaceContext.onResourceCopied();
     } else {
       if (Object.prototype.hasOwnProperty.call(plaintextDto, 'password')) {
-        await navigator.clipboard.writeText(plaintextDto.password);
+        await ClipBoard.copy(plaintextDto.password, this.props.context.port);
         this.props.resourceWorkspaceContext.onResourceCopied();
       } else {
         throw new TypeError(this.translate("The password field is not defined."));

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMenu.js

@@ -24,6 +24,7 @@ import EditResource from "../EditResource/EditResource";
 import ShareDialog from "../../Share/ShareDialog";
 import ExportResources from "../ExportResources/ExportResources";
 import {Trans, withTranslation} from "react-i18next";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 /**
  * This component allows the current user to add a new comment on a resource
@@ -165,7 +166,7 @@ class DisplayResourcesWorkspaceMenu extends React.Component {
     this.handleCloseMoreMenu();
     const baseUrl = this.props.context.userSettings.getTrustedDomain();
     const permalink = `${baseUrl}/app/passwords/view/${this.selectedResources[0].id}`;
-    await navigator.clipboard.writeText(permalink);
+    await ClipBoard.copy(permalink, this.props.context.port);
     this.displaySuccessNotification(this.translate("The permalink has been copied to clipboard"));
   }
 
@@ -174,7 +175,7 @@ class DisplayResourcesWorkspaceMenu extends React.Component {
    */
   async handleCopyUsernameClickEvent() {
     this.handleCloseMoreMenu();
-    await navigator.clipboard.writeText(this.selectedResources[0].username);
+    await ClipBoard.copy(this.selectedResources[0].username, this.props.context.port);
     this.displaySuccessNotification(this.translate("The username has been copied to clipboard"));
   }
 
@@ -190,10 +191,10 @@ class DisplayResourcesWorkspaceMenu extends React.Component {
       throw new TypeError(this.translate("The password is empty."));
     }
     if (typeof plaintextDto === 'string') {
-      await navigator.clipboard.writeText(plaintextDto);
+      await ClipBoard.copy(plaintextDto, this.props.context.port);
     } else {
       if (Object.prototype.hasOwnProperty.call(plaintextDto, 'password')) {
-        await navigator.clipboard.writeText(plaintextDto.password);
+        await ClipBoard.copy(plaintextDto.password, this.props.context.port);
       } else {
         throw new TypeError(this.translate("The password field is not defined."));
       }

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

@@ -29,12 +29,11 @@ import GenerateResourcePassword from "../../ResourcePassword/GenerateResourcePas
 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_PASSWORD_MAX_LENGTH} from '../../../../shared/constants/inputs.const';
+import {RESOURCE_NAME_MAX_LENGTH, RESOURCE_DESCRIPTION_MAX_LENGTH, RESOURCE_URI_MAX_LENGTH} from '../../../../shared/constants/inputs.const';
+import debounce  from 'debounce-promise';
+import PownedService from '../../../../shared/services/api/secrets/pownedService';
 
 class EditResource extends Component {
   constructor(props) {
@@ -42,6 +41,8 @@ class EditResource extends Component {
     this.state = this.defaultState;
     this.initEventHandlers();
     this.createInputRef();
+    this.isPwndProcessingPromise = null;
+    this.evaluatePasswordIsInDictionaryDebounce = debounce(this.evaluatePasswordIsInDictionary, 300);
   }
 
   get defaultState() {
@@ -51,10 +52,13 @@ class EditResource extends Component {
       nameOriginal: resource.name || "",
       name: resource.name || "",
       nameError: "",
+      nameWarning: "",
       username: resource.username || "",
       usernameError: "",
+      usernameWarning: "",
       uri: resource.uri || "",
       uriError: "",
+      uriWarning: "",
       password: "",
       passwordError: "",
       passwordWarning: "",
@@ -63,7 +67,9 @@ class EditResource extends Component {
       descriptionWarning: "",
       isSecretDecrypting: true,
       encryptDescription: null,
-      resourceTypeId: resource.resource_type_id || ""
+      resourceTypeId: resource.resource_type_id || "",
+      isPwnedServiceAvailable: true,
+      passwordInDictionary: false
     };
   }
 
@@ -71,7 +77,6 @@ class EditResource extends Component {
     this.handleClose = this.handleClose.bind(this);
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleNameInputKeyUp = this.handleNameInputKeyUp.bind(this);
     this.handlePasswordInputKeyUp = this.handlePasswordInputKeyUp.bind(this);
     this.handleOpenGenerator = this.handleOpenGenerator.bind(this);
     this.handleGeneratePasswordButtonClick = this.handleGeneratePasswordButtonClick.bind(this);
@@ -79,6 +84,9 @@ class EditResource extends Component {
     this.handleDescriptionInputBlur = this.handleDescriptionInputBlur.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.handleNameInputKeyUp = this.handleNameInputKeyUp.bind(this);
   }
 
   /**
@@ -94,6 +102,7 @@ class EditResource extends Component {
    * Whenever the component has been mounted
    */
   componentDidMount() {
+    this.pownedService = new PownedService(this.props.context.port);
     this.initialize();
   }
 
@@ -111,6 +120,7 @@ class EditResource extends Component {
       const encrypt = this.mustEncryptDescription();
       this.setState({encryptDescription: encrypt});
     }
+    this.evaluatePasswordIsInDictionary();
   }
 
   /*
@@ -263,6 +273,17 @@ class EditResource extends Component {
     });
   }
 
+  /**
+   * Evaluate to check if password is in a dictionary.
+   * @return {Promise}
+   */
+  async evaluatePasswordIsInDictionary() {
+    if (this.state.isPwnedServiceAvailable) {
+      const result = await this.pownedService.evaluateSecret(this.state.password, this.state.isPwnedServiceAvailable);
+      this.setState({isPwnedServiceAvailable: result.isPwnedServiceAvailable, passwordInDictionary: result.inDictionary});
+    }
+  }
+
   /*
    * =============================================================
    *  Update resource
@@ -415,6 +436,13 @@ class EditResource 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
     });
@@ -439,19 +467,18 @@ class EditResource extends Component {
   /**
    * Handle name input keyUp event.
    */
-  handleNameInputKeyUp() {
-    const state = this.validateNameInput();
-    this.setState(state);
+  async handleNameInputKeyUp() {
+    await this.validateNameInput();
+    const nameWarning = maxSizeValidation(this.state.name, RESOURCE_NAME_MAX_LENGTH, this.translate);
+    this.setState({nameWarning});
   }
 
   /**
    * Handle password input keyUp event.
    */
   async handlePasswordInputKeyUp() {
-    const hasResourcePasswordMaxLength = this.state.password.length >= RESOURCE_PASSWORD_MAX_LENGTH;
     await this.validatePasswordInput();
-    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});
   }
 
@@ -501,13 +528,28 @@ class EditResource extends Component {
    * Whenever the user input keys in the description area
    */
   handleDescriptionInputKeyUp() {
-    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() {
+    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() {
+    const usernameWarning = maxSizeValidation(this.state.username, RESOURCE_NAME_MAX_LENGTH, this.translate);
+    this.setState({usernameWarning});
+  }
+
+
   /*
    * =============================================================
    *  Decryption
@@ -636,7 +678,9 @@ class EditResource extends Component {
         <form onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="edit-password-form-name"><Trans>Name</Trans></label>
+              <label htmlFor="edit-password-form-name"><Trans>Name</Trans>{this.state.nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="edit-password-form-name" name="name" type="text" value={this.state.name}
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}
                 disabled={this.hasAllInputDisabled()} ref={this.nameInputRef} className="required fluid" maxLength="255"
@@ -644,29 +688,51 @@ class EditResource 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.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="edit-password-form-uri"><Trans>URI</Trans></label>
+              <label htmlFor="edit-password-form-uri"><Trans>URI</Trans>{this.state.uriWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="edit-password-form-uri" name="uri" className="fluid" maxLength="1024" type="text"
                 autoComplete="off" value={this.state.uri} onChange={this.handleInputChange} placeholder={this.translate("URI")}
+                onKeyUp={this.handleUriInputKeyUp}
                 disabled={this.hasAllInputDisabled()}/>
               {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.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="edit-password-form-username"><Trans>Username</Trans></label>
+              <label htmlFor="edit-password-form-username"><Trans>Username</Trans>{this.state.usernameWarning &&
+                <Icon name="exclamation"/>
+              }</label>
               <input id="edit-password-form-username" name="username" type="text" className="fluid" maxLength="255"
-                autoComplete="off" value={this.state.username} onChange={this.handleInputChange} placeholder={this.translate("Username")}
+                autoComplete="off" value={this.state.username} onChange={this.handleInputChange}
+                onKeyUp={this.handleUsernameInputKeyUp}
+                placeholder={this.translate("Username")}
                 disabled={this.hasAllInputDisabled()}/>
               {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.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="edit-password-form-password">
                 <Trans>Password</Trans>
-                {this.state.passwordWarning &&
+                {(this.state.passwordWarning || this.state.passwordInDictionary || !this.state.isPwnedServiceAvailable)  &&
                   <Icon name="exclamation"/>
                 }
               </label>
@@ -696,6 +762,12 @@ class EditResource 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 invalid-passphrase 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 invalid-passphrase warning-message"><Trans>The password is part of an exposed data breach.</Trans></div>
+              }
             </div>
             <div className={`input textarea ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="edit-password-form-description"><Trans>Description</Trans>