passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-quickaccess/components/PassphraseDialog/PassphraseDialog.test.stories.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import PassphraseDialog from "./PassphraseDialog";
 import {defaultAppContext} from "./PassphraseDialog.test.data";
+import MockPort from "../../../react-extension/test/mock/MockPort";
 
 export default {
   title: 'Passbolt/QuickAccess/PassphraseDialog',
@@ -34,10 +35,11 @@ Initial.args = {
 };
 Initial.parameters = parameters;
 
+const mockedPort = new MockPort();
+mockedPort.addRequestListener("passbolt.keyring.private.checkpassphrase", () => {throw new Error();} );
+
 const contextRequestError = {
-  port: {
-    request: () => {throw new Error()}
-  }
+  port: mockedPort
 };
 export const ErrorPassphrase = Template.bind({});
 ErrorPassphrase.args = {

package/src/react-quickaccess/components/ResourceAutoSave/SaveResource.js

@@ -76,6 +76,27 @@ class ResourceCreatePage extends React.Component {
     window.close();
   }
 
+  validateFields() {
+    const state = {
+      nameError: "",
+      passwordError: ""
+    };
+    let isValid = true;
+
+    if (this.state.name === "") {
+      state.nameError = this.translate("A name is required.");
+      isValid = false;
+    }
+
+    if (this.state.password === "") {
+      state.passwordError = this.translate("A password is required.");
+      isValid = false;
+    }
+
+    this.setState(state);
+    return isValid;
+  }
+
   async handleFormSubmit(event) {
     event.preventDefault();
     this.setState({
@@ -86,6 +107,11 @@ class ResourceCreatePage extends React.Component {
       uriError: "",
     });
 
+    if (!this.validateFields()) {
+      this.setState({processing: false});
+      return;
+    }
+
     const resourceDto = {
       name: this.state.name,
       username: this.state.username,
@@ -167,7 +193,7 @@ class ResourceCreatePage extends React.Component {
               <div className={`input text required ${this.state.nameError ? "error" : ""}`}>
                 <label htmlFor="name"><Trans>Name</Trans></label>
                 <input name="name" value={this.state.name} onChange={this.handleInputChange} disabled={this.state.processing}
-                  className="required fluid" maxLength="255" type="text" id="name" required="required" autoComplete="off" />
+                  className="required fluid" maxLength="255" type="text" id="name" autoComplete="off" />
                 {this.state.nameError &&
                 <div className="error-message">{this.state.nameError}</div>
                 }
@@ -193,7 +219,7 @@ class ResourceCreatePage extends React.Component {
                 <div className="password-management">
                   <div className="flex-row">
                     <input name="password" maxLength="4096" value={this.state.password} onChange={this.handlePasswordChange} disabled={this.state.processing}
-                      type={this.state.viewPassword ? "text" : "password"} className="required" placeholder={this.translate('Password')} id="password" required="required"
+                      type={this.state.viewPassword ? "text" : "password"} className="required" placeholder={this.translate('Password')} id="password"
                       autoComplete="new-password"/>
                     <a onClick={this.handleViewPasswordButtonClick} className={`password-view button button-icon button-toggle ${this.state.viewPassword ? "selected" : ""}`}>
                       <span className="fa icon">
@@ -202,6 +228,9 @@ class ResourceCreatePage extends React.Component {
                       <span className="visually-hidden"><Trans>view</Trans></span>
                     </a>
                   </div>
+                    {this.state.passwordError &&
+                      <div className="error-message">{this.state.passwordError}</div>
+                    }
                   <div className="password-strength flex-row">
                     <span className="password-strength-bar"><span className={`password-strength-bar-value ${this.state.strengthClass}`}/></span>
                     <span className="password-strength-label"><Trans>Strength:</Trans></span>

package/src/react-quickaccess/components/ResourceAutoSave/SaveResource.test.data.js

@@ -23,6 +23,6 @@ const mockTabInfo = {
 };
 
 export const mockResults = {
-  "passbolt.resource.prepare-autosave": mockTabInfo,
+  "passbolt.quickaccess.prepare-autosave": mockTabInfo,
   "passbolt.resources.create": {}
 };

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.js

@@ -175,6 +175,27 @@ class ResourceCreatePage extends React.Component {
     this.props.history.goBack();
   }
 
+  validateFields() {
+    const state = {
+      nameError: "",
+      passwordError: ""
+    };
+    let isValid = true;
+
+    if (this.state.name === "") {
+      state.nameError = this.translate("A name is required.");
+      isValid = false;
+    }
+
+    if (this.state.password === "") {
+      state.passwordError = this.translate("A password is required.");
+      isValid = false;
+    }
+
+    this.setState(state);
+    return isValid;
+  }
+
   /*
    * =============================================================
    *  Form submit
@@ -190,6 +211,11 @@ class ResourceCreatePage extends React.Component {
       uriError: "",
     });
 
+    if (!this.validateFields()) {
+      this.setState({processing: false});
+      return;
+    }
+
     const resourceDto = {
       name: this.state.name,
       username: this.state.username,
@@ -329,7 +355,7 @@ class ResourceCreatePage extends React.Component {
               <div className={`input text required ${this.state.nameError ? "error" : ""}`}>
                 <label htmlFor="name"><Trans>Name</Trans></label>
                 <input name="name" value={this.state.name} onChange={this.handleInputChange} disabled={this.state.processing}
-                  ref={this.nameInputRef} className="required fluid" maxLength="255" type="text" id="name" required="required" autoComplete="off" />
+                  ref={this.nameInputRef} className="required fluid" maxLength="255" type="text" id="name" autoComplete="off" />
                 {this.state.nameError &&
                 <div className="error-message">{this.state.nameError}</div>
                 }
@@ -350,13 +376,13 @@ class ResourceCreatePage extends React.Component {
                 <div className="error-message">{this.state.usernameError}</div>
                 }
               </div>
-              <div className="input text password required">
+              <div className={`input password required ${this.state.passwordError ? "error" : ""}`}>
                 <label htmlFor="password"><Trans>Password</Trans></label>
                   <div className="flex-row">
                     <div className="password-management">
                       <div className="flex-row">
                         <input name="password" maxLength="4096" value={this.state.password} onChange={this.handlePasswordChange} disabled={this.state.processing}
-                               ref={this.passwordInputRef} type={this.state.viewPassword ? "text" : "password"} className="required" placeholder={this.translate('Password')} autoComplete="new-password" id="password" required="required" />
+                               ref={this.passwordInputRef} type={this.state.viewPassword ? "text" : "password"} className="required" placeholder={this.translate('Password')} autoComplete="new-password" id="password"/>
                         <a onClick={this.handleViewPasswordButtonClick} className={`password-view button button-icon button-toggle ${this.state.viewPassword ? "selected" : ""}`}>
                       <span className="fa icon">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M569.354 231.631C512.969 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-75.162 0-136-60.827-136-136 0-75.162 60.826-136 136-136 75.162 0 136 60.826 136 136 0 75.162-60.826 136-136 136zm104-136c0 57.438-46.562 104-104 104s-104-46.562-104-104c0-17.708 4.431-34.379 12.236-48.973l-.001.032c0 23.651 19.173 42.823 42.824 42.823s42.824-19.173 42.824-42.823c0-23.651-19.173-42.824-42.824-42.824l-.032.001C253.621 156.431 270.292 152 288 152c57.438 0 104 46.562 104 104z" /></svg>
@@ -364,6 +390,9 @@ class ResourceCreatePage extends React.Component {
                           <span className="visually-hidden"><Trans>view</Trans></span>
                         </a>
                       </div>
+                    {this.state.passwordError &&
+                      <div className="error-message">{this.state.passwordError}</div>
+                    }
                     <div className="password-strength flex-row">
                       <span className="password-strength-bar"><span className={`password-strength-bar-value ${this.state.strengthClass}`}/></span>
                       <span className="password-strength-label"><Trans>Strength:</Trans></span>

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.test.data.js

@@ -28,7 +28,7 @@ export function defaultProps() {
       getSettings: () => settingsPasswordGenerator,
       settings: settingsPasswordGenerator,
       getPreparedResource: jest.fn(),
-      getLastGeneratedPassword: () => "Password"
+      getLastGeneratedPassword: jest.fn(() => "AAAAAAAAAAAAAAAAAA")
     }
   };
 }
@@ -123,10 +123,13 @@ const settingsPasswordGenerator = {
 
 const mockTabInfo = {
   title: "test",
-  url: "www.test.com"
+  uri: "www.test.com",
+  name: "Tab test",
+  username: "test@passbolt.com",
+  secret_clear: "password test"
 };
 
 export const mockResults = {
-  "passbolt.resources.prepare-resource": mockTabInfo,
+  "passbolt.quickaccess.prepare-resource": mockTabInfo,
   "passbolt.resources.create": {}
 };

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.test.js

@@ -39,7 +39,6 @@ describe("ResourceCreatePage", () => {
       };
       const props = defaultProps();
 
-      jest.useFakeTimers();
       const component = render(
         <MockTranslationProvider>
           <StaticRouter context={context}>
@@ -49,10 +48,14 @@ describe("ResourceCreatePage", () => {
       );
 
       // Wait the passbolt.request executed in the ComponentDidMount is resolved.
-      await waitFor(() => {});
-      jest.runAllTimers();
+      await waitFor(() => {
+        if (props.prepareResourceContext.getLastGeneratedPassword.mock.calls.length === 0) {
+          throw new Error("Component didn't finish mounting yet.");
+        }
+      });
 
       // Assert the form.
+      expect.assertions(4);
       const nameInput = component.container.querySelector('[name="name"]');
       expect(nameInput.value).toBe("Passbolt Browser Extension Test");
       const uriInput = component.container.querySelector('[name="uri"]');
@@ -79,7 +82,6 @@ describe("ResourceCreatePage", () => {
       const context = defaultAppContext();
       const props = defaultProps();
 
-      jest.useFakeTimers();
       const component = render(
         <MockTranslationProvider>
           <StaticRouter context={context}>
@@ -89,10 +91,14 @@ describe("ResourceCreatePage", () => {
       );
 
       // Wait the passbolt.request executed in the ComponentDidMount is resolved.
-      await waitFor(() => {});
-      jest.runAllTimers();
+      await waitFor(() => {
+        if (props.prepareResourceContext.getLastGeneratedPassword.mock.calls.length === 0) {
+          throw new Error("Component didn't finish mounting yet.");
+        }
+      });
 
       // Assert the form.
+      expect.assertions(2);
       const nameInput = component.container.querySelector('[name="name"]');
       expect(nameInput.value).toBe("");
       const uriInput = component.container.querySelector('[name="uri"]');
@@ -112,37 +118,38 @@ describe("ResourceCreatePage", () => {
         })
       };
 
-      jest.useFakeTimers();
       const context = defaultAppContext();
+      const props = defaultProps();
+
       const component = render(
         <MockTranslationProvider>
           <StaticRouter context={context}>
-            <ResourceCreatePage context={context} debug />
+            <ResourceCreatePage context={context} prepareResourceContext={props.prepareResourceContext} debug />
           </StaticRouter>
         </MockTranslationProvider>
       );
 
       // Wait the passbolt.request executed in the ComponentDidMount is resolved.
-      await waitFor(() => {});
-      jest.runAllTimers();
+      await waitFor(() => {
+        if (props.prepareResourceContext.getLastGeneratedPassword.mock.calls.length === 0) {
+          throw new Error("Component didn't finish mounting yet.");
+        }
+      });
 
       // Assert the form.
+      expect.assertions(2);
       const nameInput = component.container.querySelector('[name="name"]');
       expect(nameInput.value).toBe("");
       const uriInput = component.container.querySelector('[name="uri"]');
       expect(uriInput.value).toBe("");
     });
-
-  });
-
-  describe("Form validation", () => {
-
   });
 
   describe("Form submition", () => {
     it("should create a new password on submit", async () => {
       const createPasswordEventMockCallback = jest.fn();
       const context = defaultAppContext();
+      const props = defaultProps();
       // Mock the passbolt messaging layer.
       context.port = {
         request: function(event) {
@@ -163,18 +170,20 @@ describe("ResourceCreatePage", () => {
         }
       };
 
-      jest.useFakeTimers();
       const component = render(
         <MockTranslationProvider>
           <StaticRouter context={context}>
-            <ResourceCreatePage context={context} debug />
+            <ResourceCreatePage context={context} prepareResourceContext={props.prepareResourceContext} debug />
           </StaticRouter>
         </MockTranslationProvider>
       );
 
       // Wait the passbolt.request executed in the ComponentDidMount is resolved.
-      await waitFor(() => {});
-      jest.runAllTimers();
+      await waitFor(() => {
+        if (props.prepareResourceContext.getLastGeneratedPassword.mock.calls.length === 0) {
+          throw new Error("Component didn't finish mounting yet.");
+        }
+      });
 
       // Fill the form empty fields
       const usernameInput = component.container.querySelector('[name="username"]');
@@ -197,6 +206,7 @@ describe("ResourceCreatePage", () => {
         uri: "https://passbolt-browser-extension/test",
         username: "test@passbolt.com"
       };
+      expect.assertions(1);
       expect(createPasswordEventMockCallback).toHaveBeenCalledWith(resourceMeta, "P4ssb0lt");
     });
   });

package/src/react-quickaccess/components/ResourceViewPage/ResourceViewPage.test.data.js

@@ -5,6 +5,8 @@
  */
 import UserSettings from "../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../../react-extension/test/fixture/Settings/userSettings";
+import SiteSettings from "../../../shared/lib/Settings/SiteSettings";
+import siteSettingsFixture from "../../../react-extension/test/fixture/Settings/siteSettings";
 
 export function defaultAppContext(appContext) {
   const defaultAppContext = {

package/src/react-web-integration/components/AskInFormMenuDisplay/AskInFormMenuDisplay.test.stories.js

@@ -16,6 +16,7 @@ import React, {useEffect} from "react";
 import AskInFormMenuDisplay from "./AskInFormMenuDisplay";
 import ReactDOM from "react-dom";
 import AppContext from "../../contexts/AppContext";
+import MockPort from "../../../react-extension/test/mock/MockPort";
 
 export default {
   title: 'Passbolt/WebIntegration/AskInFormMenuDisplay',
@@ -60,32 +61,34 @@ const parameters = {
   css: "ext_in_form_cta"
 };
 
+const inactiveMockedPort = new MockPort();
+inactiveMockedPort.addRequestListener('passbolt.in-form-cta.check-status', () => ({isAuthenticated: false, isMfaRequired: false}));
 export const Inactive = Template.bind({});
 Inactive.args = {
   context: {
-    port: {
-      request: () => {throw {data: {code: 401}}}
-    }
+    port: inactiveMockedPort
   }
 };
 Inactive.parameters = parameters;
 
+const activeWithNoSuggestionMockedPort = new MockPort();
+activeWithNoSuggestionMockedPort.addRequestListener('passbolt.in-form-cta.check-status', () => ({isAuthenticated: true, isMfaRequired: false}));
+activeWithNoSuggestionMockedPort.addRequestListener('passbolt.in-form-cta.suggested-resources', () => 0);
 export const ActiveWithNoSuggestion = Template.bind({});
 ActiveWithNoSuggestion.args = {
   context: {
-    port: {
-      request: () => ({isActive: true, suggestedResourcesCount: 0})
-    }
+    port: activeWithNoSuggestionMockedPort
   }
 };
 ActiveWithNoSuggestion.parameters = parameters;
 
+const activeWithOneSuggestionMockedPort = new MockPort();
+activeWithOneSuggestionMockedPort.addRequestListener('passbolt.in-form-cta.check-status', () => ({isAuthenticated: true, isMfaRequired: false}));
+activeWithOneSuggestionMockedPort.addRequestListener('passbolt.in-form-cta.suggested-resources', () => 1);
 export const ActiveWithOneSuggestion = Template.bind({});
 ActiveWithOneSuggestion.args = {
   context: {
-    port: {
-      request: () => ({isActive: true, suggestedResourcesCount: 1})
-    }
+    port: activeWithOneSuggestionMockedPort
   }
 };
 ActiveWithOneSuggestion.parameters = parameters;

package/src/react-web-integration/components/DisplayInFormMenu/DisplayInFormMenu.js

@@ -322,7 +322,7 @@ class DisplayInFormMenu extends React.Component {
     try {
       await this.props.context.port.request('passbolt.in-form-menu.use-suggested-resource', resourceId);
     } catch (error) {
-      console.log(error)
+      console.error(error)
     }
     await this.setState({resourceIdProcessing: null});
   }