passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -13,186 +13,149 @@
  */
 
 import React from "react";
+import MockPort from "../../../react-extension/test/mock/MockPort";
 import DisplayInFormMenu from "./DisplayInFormMenu";
-import DisplayInFormMenuItem from "./DisplayInFormMenuItem";
 
 export default {
   title: 'Passbolt/WebIntegration/InFormMenu',
   component: DisplayInFormMenu
 };
 
+const suggestedResources = [
+  {
+    name: "Twitter (company account)",
+    username: "companyaccount@pasbolt.com",
+    key: 0
+  },
+  {
+    name: "Matching Credentials",
+    username: "john@pasbolt.com",
+    key: 1
+  },
+  {
+    name: "Matching Credentials 2",
+    username: "john2@pasbolt.com",
+    key: 2
+  }
+];
 
-const TemplateAllItemsMenu = () => {
-  const searchIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" aria-label="magnifying glass icon"><path id="search-icon" d="M15.781 13.844a.723.723 0 0 1 .219.531.723.723 0 0 1-.219.531l-.875.875a.723.723 0 0 1-.531.219.723.723 0 0 1-.531-.219l-3.125-3.125a.723.723 0 0 1-.219-.531v-.5C9.333 12.542 8 13 6.5 13a6.313 6.313 0 0 1-3.266-.875 6.567 6.567 0 0 1-2.359-2.36A6.313 6.313 0 0 1 0 6.5c0-1.187.292-2.276.875-3.266A6.567 6.567 0 0 1 3.235.875 6.313 6.313 0 0 1 6.5 0c1.187 0 2.276.292 3.266.875a6.567 6.567 0 0 1 2.359 2.36c.583.989.875 2.078.875 3.265 0 1.5-.458 2.833-1.375 4h.5c.208 0 .385.073.531.219l3.125 3.125zM6.5 10.5c.73 0 1.401-.177 2.016-.531a3.891 3.891 0 0 0 1.453-1.453A3.966 3.966 0 0 0 10.5 6.5c0-.73-.177-1.401-.531-2.016a3.891 3.891 0 0 0-1.453-1.453A3.966 3.966 0 0 0 6.5 2.5c-.73 0-1.401.177-2.016.531a3.891 3.891 0 0 0-1.453 1.453A3.966 3.966 0 0 0 2.5 6.5c0 .73.177 1.401.531 2.016a3.891 3.891 0 0 0 1.453 1.453A3.966 3.966 0 0 0 6.5 10.5z" fillRule="evenodd" /></svg>
-    </span>
-  );
-  const magicWandIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z" /></svg>
-    </span>
-  )
+const passwordGeneratorConfiguration = {
+  "default_generator": "passphrase",
+  "generators": [
+    {
+      "name": "Password",
+      "type": "password",
+      "default_options": {
+        "length": 18,
+        "look_alike": true,
+        "min_length": 8,
+        "max_length": 128,
+      },
+      "masks": [
+        {
+          "name": "upper",
+          "label": "A-Z",
+          "characters": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+        },
+        {
+          "name": "lower",
+          "label": "a-z",
+          "characters": "abcdefghijklmnopqrstuvwxyz",
+        },
+        {
+          "name": "digit",
+          "label": "0-9",
+          "characters": "0123456789",
+          "required": true,
+        },
+        {
+          "name": "parenthesis",
+          "label": "([|])",
+          "characters": "([|])",
+        },
+        {
+          "name": "TBD",
+          "label": "TBD",
+          "characters": ""
+        },
+      ],
+    },
+    {
+      "name": "Passphrase",
+      "type": "passphrase",
+      "default_options": {
+        "word_count": 8,
+        "word_case": "lowercase",
+        "min_word": 4,
+        "max_word": 40,
+        "separator": " "
+      }
+    }
+  ]
+};
 
-  const addIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas"
-           data-icon="plus-circle"  role="img" viewBox="0 0 512 512">
-        <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/>
-      </svg>
-    </span>
-  )
+const getResponse = (inputType, inputValue = "", suggestion = suggestedResources) => ({
+  inputType,
+  inputValue,
+  suggestedResources: suggestion,
+  secretGeneratorConfiguration: passwordGeneratorConfiguration
+});
 
-  const keyIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="key"
-           className="svg-inline--fa fa-key fa-w-16" role="img" viewBox="0 0 512 512">
-        <path d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"/>
-      </svg>
-    </span>
-  )
+const mockPortUsernameEmpty = new MockPort();
+mockPortUsernameEmpty.addRequestListener('passbolt.in-form-menu.init', () => getResponse("username"));
 
-  const reloadIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="reload"
-           className="svg-inline--fa fa-key fa-w-16" role="img" viewBox="0 0 512 512">
-       <path xmlns="http://www.w3.org/2000/svg" d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"/>
-      </svg>
-    </span>
-    )
+const mockPortUsernameFilled = new MockPort();
+mockPortUsernameFilled.addRequestListener('passbolt.in-form-menu.init', () => getResponse("username", "john@passbolt.com"));
 
-  return (
-    <div className="web-integration">
-      <DisplayInFormMenu>
-        <DisplayInFormMenuItem
-          title="Twitter (company account)"
-          description="companyaccount@pasbolt.com"
-          icon={keyIcon}/>
-        <DisplayInFormMenuItem
-          title="Create a new credential"
-          description="Create and customize it yourself"
-          icon={addIcon}/>
-        <DisplayInFormMenuItem
-          title="Save as new credential"
-          description="Save the data entered as a new credential"
-          icon={addIcon}/>
-        <DisplayInFormMenuItem
-          title="Save as a new password securely"
-          subtitle={<span>Strength: <span style={{color: 'green'}}>strong</span></span>}
-          description="Save the data entered as a new credential"
-          icon={magicWandIcon}/>
-        <DisplayInFormMenuItem
-          title="Browse credentials"
-          description="Search among available credentials"
-          icon={searchIcon}/>
-        <DisplayInFormMenuItem
-          title="Generate a new password securely"
-          subtitle={<span className="in-form-menu-item-content-subheader-password">Yfdfdlkrefkd,kfndjn"</span>}
-          description="You will be able to save it after submitting"
-          icon={magicWandIcon}/>
-        <DisplayInFormMenuItem
-          title="User previously generated password"
-          subtitle={<span className="in-form-menu-item-content-subheader-password">Yfdfdlkrefkd,kfndjn"</span>}
-          icon={reloadIcon}/>
-      </DisplayInFormMenu>
-    </div>
-  );
-}
+const mockPortPasswordNoSuggestion = new MockPort();
+mockPortPasswordNoSuggestion.addRequestListener('passbolt.in-form-menu.init', () => getResponse("password", "", null));
 
-const TemplateNoScroll = () => {
-  const searchIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" aria-label="magnifying glass icon"><path id="search-icon" d="M15.781 13.844a.723.723 0 0 1 .219.531.723.723 0 0 1-.219.531l-.875.875a.723.723 0 0 1-.531.219.723.723 0 0 1-.531-.219l-3.125-3.125a.723.723 0 0 1-.219-.531v-.5C9.333 12.542 8 13 6.5 13a6.313 6.313 0 0 1-3.266-.875 6.567 6.567 0 0 1-2.359-2.36A6.313 6.313 0 0 1 0 6.5c0-1.187.292-2.276.875-3.266A6.567 6.567 0 0 1 3.235.875 6.313 6.313 0 0 1 6.5 0c1.187 0 2.276.292 3.266.875a6.567 6.567 0 0 1 2.359 2.36c.583.989.875 2.078.875 3.265 0 1.5-.458 2.833-1.375 4h.5c.208 0 .385.073.531.219l3.125 3.125zM6.5 10.5c.73 0 1.401-.177 2.016-.531a3.891 3.891 0 0 0 1.453-1.453A3.966 3.966 0 0 0 10.5 6.5c0-.73-.177-1.401-.531-2.016a3.891 3.891 0 0 0-1.453-1.453A3.966 3.966 0 0 0 6.5 2.5c-.73 0-1.401.177-2.016.531a3.891 3.891 0 0 0-1.453 1.453A3.966 3.966 0 0 0 2.5 6.5c0 .73.177 1.401.531 2.016a3.891 3.891 0 0 0 1.453 1.453A3.966 3.966 0 0 0 6.5 10.5z" fillRule="evenodd" /></svg>
-    </span>
-  );
-  const magicWandIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z" /></svg>
-    </span>
-  )
+const mockPortPasswordEmpty = new MockPort();
+mockPortPasswordEmpty.addRequestListener('passbolt.in-form-menu.init', () => getResponse("password", ""));
 
-  const keyIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="key"
-           className="svg-inline--fa fa-key fa-w-16" role="img" viewBox="0 0 512 512">
-        <path d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"/>
-      </svg>
-    </span>
-  )
-  return (
-    <div className="quickaccess">
-      <DisplayInFormMenu>
-        <DisplayInFormMenuItem
-          title="Matching Credentials"
-          description="john@pasbolt.com"
-          icon={keyIcon}/>
-        <DisplayInFormMenuItem
-          title="Save as a new password securely"
-          subtitle={<span>Strength: <span style={{color: 'green'}}>strong</span></span>}
-          description="Save the data entered as a new credential"
-          icon={magicWandIcon}/>
-        <DisplayInFormMenuItem
-          title="Browse credentials"
-          description="Search among available credentials"
-          icon={searchIcon}/>
-      </DisplayInFormMenu>
-    </div>
-  );
-}
+const mockPortPasswordFilled = new MockPort();
+mockPortPasswordFilled.addRequestListener('passbolt.in-form-menu.init', () => getResponse("password", "test",));
 
-const TemplateWithScroll = () => {
-  const searchIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" aria-label="magnifying glass icon"><path id="search-icon" d="M15.781 13.844a.723.723 0 0 1 .219.531.723.723 0 0 1-.219.531l-.875.875a.723.723 0 0 1-.531.219.723.723 0 0 1-.531-.219l-3.125-3.125a.723.723 0 0 1-.219-.531v-.5C9.333 12.542 8 13 6.5 13a6.313 6.313 0 0 1-3.266-.875 6.567 6.567 0 0 1-2.359-2.36A6.313 6.313 0 0 1 0 6.5c0-1.187.292-2.276.875-3.266A6.567 6.567 0 0 1 3.235.875 6.313 6.313 0 0 1 6.5 0c1.187 0 2.276.292 3.266.875a6.567 6.567 0 0 1 2.359 2.36c.583.989.875 2.078.875 3.265 0 1.5-.458 2.833-1.375 4h.5c.208 0 .385.073.531.219l3.125 3.125zM6.5 10.5c.73 0 1.401-.177 2.016-.531a3.891 3.891 0 0 0 1.453-1.453A3.966 3.966 0 0 0 10.5 6.5c0-.73-.177-1.401-.531-2.016a3.891 3.891 0 0 0-1.453-1.453A3.966 3.966 0 0 0 6.5 2.5c-.73 0-1.401.177-2.016.531a3.891 3.891 0 0 0-1.453 1.453A3.966 3.966 0 0 0 2.5 6.5c0 .73.177 1.401.531 2.016a3.891 3.891 0 0 0 1.453 1.453A3.966 3.966 0 0 0 6.5 10.5z" fillRule="evenodd" /></svg>
-    </span>
-  );
-  const magicWandIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z" /></svg>
-    </span>
-  )
+const Template = (args) =>
+  <div className="web-integration">
+    <DisplayInFormMenu {...args}/>
+  </div>
 
-  const keyIcon = (
-    <span className="fa icon">
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="key"
-           className="svg-inline--fa fa-key fa-w-16" role="img" viewBox="0 0 512 512">
-        <path d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"/>
-      </svg>
-    </span>
-  )
-  return (
-    <div className="quickaccess">
-      <DisplayInFormMenu>
-        <DisplayInFormMenuItem
-          title="Matching Credentials"
-          description="john@pasbolt.com"
-          icon={keyIcon}/>
-        <DisplayInFormMenuItem
-          title="Matching Credentials 2"
-          description="john2@pasbolt.com"
-          icon={keyIcon}/>
-        <DisplayInFormMenuItem
-          title="Save as a new password securely"
-          subtitle={<span>Strength: <span style={{color: 'green'}}>strong</span></span>}
-          description="Save the data entered as a new credential"
-          icon={magicWandIcon}/>
-        <DisplayInFormMenuItem
-          title="Browse credentials"
-          description="Search among available credentials"
-          icon={searchIcon}/>
-      </DisplayInFormMenu>
-    </div>
-  );
-}
+export const OnUsernameFieldWithEmptyValue = Template.bind({});
+export const OnUsernameFieldWithValue = Template.bind({});
+export const OnPasswordFieldWithoutSuggestion = Template.bind({});
+export const OnPasswordFieldWithEmptyValue = Template.bind({});
+export const OnPasswordFieldWithValue = Template.bind({});
 
-const parameters = {
-  css: "ext_in_form_menu"
+OnUsernameFieldWithEmptyValue.args = {
+  context: {
+    port: mockPortUsernameEmpty
+  }
+};
+OnUsernameFieldWithValue.args = {
+  context: {
+    port: mockPortUsernameFilled
+  }
+};
+OnPasswordFieldWithoutSuggestion.args = {
+  context: {
+    port: mockPortPasswordNoSuggestion
+  }
+};
+OnPasswordFieldWithEmptyValue.args = {
+  context: {
+    port: mockPortPasswordEmpty
+  }
+};
+OnPasswordFieldWithValue.args = {
+  context: {
+    port: mockPortPasswordFilled
+  }
 };
 
-export const AllMenuItems = TemplateAllItemsMenu.bind({});
-export const NoScrollItems = TemplateNoScroll.bind({});
-export const ScrollableMenu = TemplateWithScroll.bind({});
-
-AllMenuItems.parameters = parameters;
-NoScrollItems.parameters = parameters;
-ScrollableMenu.parameters = parameters;
+const inFormMenuCss = {css: "ext_in_form_menu"};
+OnUsernameFieldWithEmptyValue.parameters = inFormMenuCss;
+OnUsernameFieldWithValue.parameters = inFormMenuCss;
+OnPasswordFieldWithoutSuggestion.parameters = inFormMenuCss;
+OnPasswordFieldWithEmptyValue.parameters = inFormMenuCss;
+OnPasswordFieldWithValue.parameters = inFormMenuCss;

package/src/react-web-integration/lib/Dom/DomUtils.js

@@ -85,10 +85,32 @@ class DomUtils {
       } else {
         return scrollParent(node.parentNode)
       }
-    }
+    };
     return scrollParent(node);
   }
 
+  /**
+   * Get the inFormCalToActionField with the lowest common ancestor of the callToActionClickedField
+   * @param {HTMLElement} callToActionClickedField
+   * @param {Array<InFormCallToActionField>} fields
+   * @returns {null|InFormCallToActionField}
+   */
+  static getFieldWithLowestCommonAncestor(callToActionClickedField, fields) {
+    if (fields.length === 0) {
+      return null;
+    } else if (fields.length === 1) {
+      return fields[0];
+    } else {
+      let parent = callToActionClickedField;
+      let field = null;
+      // We loop to find the field with the lowest common ancestors
+      while (parent && field === null) {
+        parent = parent.offsetParent || parent.parentElement;
+        field = fields.find(callToActionField => parent.contains(callToActionField.field));
+      }
+      return field;
+    }
+  }
 }
 
 export default DomUtils;

package/src/react-web-integration/lib/InForm/InFormFieldSelector.js

@@ -19,25 +19,31 @@ export default {
   /** Selectors to detect username inputs (input type text or not type with id or class or name contain user) */
   USERNAME_FIELD_SELECTOR: `input[type='text' i][name*='user' i]:not([hidden]):not([disabled]),
   input[type='text' i][name*='email' i]:not([hidden]):not([disabled]),
+  input[type='text' i][name*='login' i]:not([hidden]):not([disabled]),
   input[type='text' i][id*='user' i]:not([hidden]):not([disabled]),
   input[type='text' i][id*='email' i]:not([hidden]):not([disabled]),
+  input[type='text' i][id*='login' i]:not([hidden]):not([disabled]),
   input[type='text' i][class*='user' i]:not([hidden]):not([disabled]),
   input[type='text' i][class*='email' i]:not([hidden]):not([disabled]),
   input[type='text' i][autocomplete*='user' i]:not([hidden]):not([disabled]),
   input[type='text' i][autocomplete*='email' i]:not([hidden]):not([disabled]),
   input[type='text' i][placeholder*='user' i]:not([hidden]):not([disabled]),
   input[type='text' i][placeholder*='email' i]:not([hidden]):not([disabled]),
+  input[type='text' i][placeholder*='e-mail' i]:not([hidden]):not([disabled]),
   input[type='email' i]:not([hidden]):not([disabled]),
   input[name*='user' i]:not([type]):not([hidden]):not([disabled]),
   input[name*='email' i]:not([type]):not([hidden]):not([disabled]),
+  input[name*='login' i]:not([type]):not([hidden]):not([disabled]),
   input[id*='user' i]:not([type]):not([hidden]):not([disabled]),
   input[id*='email' i]:not([type]):not([hidden]):not([disabled]),
+  input[id*='login' i]:not([type]):not([hidden]):not([disabled]),
   input[class*='user' i]:not([type]):not([hidden]):not([disabled]),
   input[class*='email' i]:not([type]):not([hidden]):not([disabled]),
   input[autocomplete*='user' i]:not([type]):not([hidden]):not([disabled]),
   input[autocomplete*='email' i]:not([type]):not([hidden]):not([disabled]),
   input[placeholder*='user' i]:not([type]):not([hidden]):not([disabled]),
-  input[placeholder*='email' i]:not([type]):not([hidden]):not([disabled])`,
+  input[placeholder*='email' i]:not([type]):not([hidden]):not([disabled]),
+  input[placeholder*='e-mail' i]:not([type]):not([hidden]):not([disabled])`,
   /** Selectors to detect password inputs (input type password or type text with id or class or name contain password) */
   PASSWORD_FIELD_SELECTOR: `input[type='password' i]:not([hidden]):not([disabled]),
   input[type='text' i][name*='password' i]:not([hidden]):not([disabled]),

package/src/react-web-integration/lib/InForm/InFormManager.js

@@ -17,6 +17,7 @@ import InFormFieldSelector from "./InFormFieldSelector";
 import InFormMenuField from "./InformMenuField";
 import {fireEvent} from "@testing-library/dom/dist/events";
 import InFormCredentialsFormField from "./InFormCredentialsFormField";
+import DomUtils from "../Dom/DomUtils";
 
 /**
  * Manages the in-form web integration including call-to-action and menu
@@ -105,13 +106,17 @@ class InFormManager {
     * If it was previously found, we reuse the same InformFormField, otherwise we create one
     */
     const newCredentialsFormFields = InFormCredentialsFormField.findAll();
-    this.credentialsFormFields = newCredentialsFormFields.map(newField => {
-      const matchField = fieldToMatch => credentialsFormField => credentialsFormField.field === fieldToMatch;
-      const existingField = this.credentialsFormFields.find(matchField(newField));
-      const usernameField =  this.callToActionFields.find(callToActionField => callToActionField.fieldType === 'username' && newField.contains(callToActionField.field));
-      const passwordField =  this.callToActionFields.find(callToActionField => callToActionField.fieldType === 'password' && newField.contains(callToActionField.field));
-      return existingField || new InFormCredentialsFormField(newField, usernameField?.field, passwordField?.field);
-    });
+    if (newCredentialsFormFields.length > 0) {
+      this.credentialsFormFields = newCredentialsFormFields.map(newField => {
+        const matchField = fieldToMatch => credentialsFormField => credentialsFormField.field === fieldToMatch;
+        const existingField = this.credentialsFormFields.find(matchField(newField));
+        const usernameField =  this.callToActionFields.find(callToActionField => callToActionField.fieldType === 'username' && newField.contains(callToActionField.field));
+        const passwordField =  this.callToActionFields.find(callToActionField => callToActionField.fieldType === 'password' && newField.contains(callToActionField.field));
+        return existingField || new InFormCredentialsFormField(newField, usernameField?.field, passwordField?.field);
+      });
+    } else {
+      this.credentialsFormFields = [];
+    }
   }
 
   /**
@@ -230,17 +235,22 @@ class InFormManager {
       const isUsernameType = currentFieldType === 'username';
       const isPasswordType = currentFieldType === 'password';
       if (!isUsernameType) {
-        const usernameField = this.callToActionFields.find(field => field.fieldType === 'username')?.field;
-        fireEvent.input( this.lastCallToActionFieldClicked.field, { target: { value: password } });
+        fireEvent.input(this.lastCallToActionFieldClicked.field, { target: { value: password } });
+        // Get username fields and find the one with the lowest common ancestor
+        const usernameFields = this.callToActionFields
+          .filter(callToActionField => callToActionField.fieldType === 'username');
+        const usernameField = DomUtils.getFieldWithLowestCommonAncestor(this.lastCallToActionFieldClicked.field, usernameFields);
         if (usernameField) {
-          fireEvent.input(usernameField, { target: { value: username } });
+          fireEvent.input(usernameField.field, { target: { value: username } });
         }
-      }
-      if (!isPasswordType) {
-        const passwordField = this.callToActionFields.find(field => field.fieldType === 'password')?.field;
+      } else if (!isPasswordType) {
         fireEvent.input( this.lastCallToActionFieldClicked.field, { target: { value: username } });
+        // Get password fields and find the one with the lowest common ancestor
+        const passwordFields = this.callToActionFields
+          .filter(callToActionField => callToActionField.fieldType === 'password');
+        const passwordField = DomUtils.getFieldWithLowestCommonAncestor(this.lastCallToActionFieldClicked.field, passwordFields);
         if (passwordField) {
-          fireEvent.input(passwordField, { target: { value: password } });
+          fireEvent.input(passwordField.field, { target: { value: password } });
         }
       }
     });

package/src/react-web-integration/lib/InForm/InformManager.test.data.js

@@ -24,6 +24,24 @@ export const domElementLoginWithNameAttributeUsername =
   '  <input type="password"/>' +
   '</div>';
 
+/**
+ * Create a login form with multiple usernames and passwords in DOM
+ * @type {string}
+ */
+export const domElementWithMultipleLogin =
+  '<div>' +
+  '  <input type="text" name="username" id="username1"/>' +
+  '  <input type="password" id="password1"/>' +
+  '</div>' +
+  '<div>' +
+  '  <input type="text" name="username" id="username2"/>' +
+  '  <input type="password" id="password2"/>' +
+  '</div>' +
+  '<div>' +
+  '  <input type="text" name="username" id="username3"/>' +
+  '  <input type="password" id="password3"/>' +
+  '</div>';
+
 
 /**
  * Create a login form with only password in DOM
@@ -53,6 +71,16 @@ export const domElementLoginWithNameAttributeEmail =
   '  <input type="text" name="password"/>' +
   '</div>';
 
+/**
+ * Create a login form with name attribute login in DOM
+ * @type {string}
+ */
+export const domElementLoginWithNameAttributeLogin =
+  '<div>' +
+  '  <input type="text" name="form_login"/>' +
+  '  <input type="text" name="password"/>' +
+  '</div>';
+
 /**
  * Create a login form with no type and name attribute username in DOM
  * @type {string}
@@ -73,6 +101,16 @@ export const domElementLoginWithNoTypeAndNameAttributeEmail =
   '  <input type="password"/>' +
   '</div>';
 
+/**
+ * Create a login form with no type and name attribute login in DOM
+ * @type {string}
+ */
+export const domElementLoginWithNoTypeAndNameAttributeLogin =
+  '<div>' +
+  '  <input name="Login"/>' +
+  '  <input type="password"/>' +
+  '</div>';
+
 /**
  * Create a login form with class username in DOM
  * @type {string}
@@ -133,6 +171,16 @@ export const domElementLoginWithIdAttributeEmail =
   '  <input type="text" id="YahooPassword"/>' +
   '</div>';
 
+/**
+ * Create a login form with id attribute login in DOM
+ * @type {string}
+ */
+export const domElementLoginWithIdAttributeLogin =
+  '<div>' +
+  '  <input type="text" id="Test_Ploginutg"/>' +
+  '  <input type="text" id="YahooPassword"/>' +
+  '</div>';
+
 /**
  * Create a login form with no type and id attribute username in DOM
  * @type {string}
@@ -153,6 +201,16 @@ export const domElementLoginWithNoTypeAndIdAttributeEmail =
   '  <input type="text" id="password-Y"/>' +
   '</div>';
 
+/**
+ * Create a login form with no type and id attribute login in DOM
+ * @type {string}
+ */
+export const domElementLoginWithNoTypeAndIdAttributeLogin =
+  '<div>' +
+  '  <input id="login-Y"/>' +
+  '  <input type="text" id="password"/>' +
+  '</div>';
+
 /**
  * Create a login form with autocomplete attribute username in DOM
  * @type {string}
@@ -209,7 +267,17 @@ export const domElementLoginWithPlaceHolderAttributeUsername =
  */
 export const domElementLoginWithPlaceHolderAttributeEmail =
   '<div>' +
-  '  <input type="TEXT" autocomplete="email"/>' +
+  '  <input type="TEXT" placeholder="email"/>' +
+  '  <input type="password"/>' +
+  '</div>';
+
+/**
+ * Create a login form with placeholder attribute e-mail in DOM
+ * @type {string}
+ */
+export const domElementLoginWithPlaceHolderAttributeE_mail =
+  '<div>' +
+  '  <input type="Text" placeholder="e-mail"/>' +
   '  <input type="password"/>' +
   '</div>';
 
@@ -229,7 +297,17 @@ export const domElementLoginWithNoTypeAndPlaceHolderAttributeUsername =
  */
 export const domElementLoginWithNoTypeAndPlaceHolderAttributeEmail =
   '<div>' +
-  '  <input autocomplete="email"/>' +
+  '  <input placeholder="email"/>' +
+  '  <input type="password"/>' +
+  '</div>';
+
+/**
+ * Create a login form with no type and placeholder attribute e-mail in DOM
+ * @type {string}
+ */
+export const domElementLoginWithNoTypeAndPlaceHolderAttributeE_mail =
+  '<div>' +
+  '  <input placeholder="The-mailO"/>' +
   '  <input type="password"/>' +
   '</div>';