passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

@@ -0,0 +1,253 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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.3.0
+ */
+
+import InFormCallToActionField from "./InFormCallToActionField";
+import InFormFieldSelector from "./InFormFieldSelector";
+import InFormMenuField from "./InformMenuField";
+import {fireEvent} from "@testing-library/dom/dist/events";
+import InFormCredentialsFormField from "./InFormCredentialsFormField";
+/**
+ * Manages the in-form web integration including call-to-action and menu
+ */
+class InFormManager {
+  /**
+   * Default constructor
+   */
+  constructor() {
+    /** In-form username and password callToActionFields in the target page*/
+    this.callToActionFields = [];
+    /** In-form menu menuField in the target page*/
+    this.menuField = null;
+    /** In-form form fields in the target page*/
+    this.credentialsFormFields = [];
+    /** Mutation observer to detect any change on the DOM */
+    this.mutationObserver = null;
+
+    this.bindCallbacks();
+  }
+
+  /**
+   * Initializes the in-form manager
+   */
+  initialize() {
+    this.findAndSetAuthenticationFields();
+    this.handleDomChange();
+    this.handleInformCallToActionRepositionEvent();
+    this.handlePortDisconnectEvent();
+    this.handleInFormMenuInsertionEvent();
+    this.handleInFormMenuRemoveEvent();
+    this.handleInformCallToActionClickEvent();
+    this.handleGetLastCallToActionClickedInput();
+    this.handleGetCurrentCredentials();
+    this.handleFillCredentials();
+    this.handleFillPassword();
+  }
+
+  /**
+   * Binds the callbacks
+   */
+  bindCallbacks() {
+    this.findAndSetAuthenticationFields = this.findAndSetAuthenticationFields.bind(this);
+    this.handleInformCallToActionClickEvent = this.handleInformCallToActionClickEvent.bind(this);
+    this.clean = this.clean.bind(this);
+    this.destroy = this.destroy.bind(this);
+  }
+
+  /**
+   * Find authentication fields in the document and set them as object properties
+   */
+  findAndSetAuthenticationFields() {
+    this.findAndSetUsernameAndPasswordFields();
+    this.findAndSetCredentialsFormFields();
+  }
+
+  /**
+   * Find authentication callToActionFields in the document and set them as object properties
+   */
+  findAndSetUsernameAndPasswordFields() {
+    /* We find the username / passwords DOM callToActionFields.
+     * If it was previously found, we reuse the same InformUsernameField, otherwise we create one
+     * Else we clean and reset callToActionFields
+     */
+    const newUsernameFields = InFormCallToActionField.findAll(InFormFieldSelector.USERNAME_FIELD_SELECTOR);
+    const newPasswordFields = InFormCallToActionField.findAll(InFormFieldSelector.PASSWORD_FIELD_SELECTOR);
+    const newFields = newUsernameFields.concat(newPasswordFields);
+    if (newFields.length > 0) {
+      this.callToActionFields = newFields.map(newField => {
+        const matchField = fieldToMatch => callToActionField => callToActionField.field === fieldToMatch;
+        const existingField = this.callToActionFields.find(matchField(newField));
+        const fieldType = newField.matches(InFormFieldSelector.USERNAME_FIELD_SELECTOR) ? 'username' : 'password';
+        return existingField || new InFormCallToActionField(newField, fieldType);
+      });
+    } else {
+      this.clean();
+      this.callToActionFields = [];
+    }
+  }
+
+  /**
+   * Find authentication formFields in the document and set them as object properties
+   */
+  findAndSetCredentialsFormFields() {
+   /* We find the form DOM formFields.
+    * 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);
+    });
+  }
+
+  /**
+   * Clean the DOM of in-form entities
+   */
+  clean() {
+    this.callToActionFields.forEach(field => field.removeCallToActionIframe());
+    this.menuField?.removeMenuIframe();
+  }
+
+  /**
+   * Whenever the DOM changes
+   */
+  handleDomChange() {
+    const updateAuthenticationFields = () => {
+      this.findAndSetAuthenticationFields();
+      this.handleInformCallToActionClickEvent();
+    }
+    // Search again for authentication callToActionFields to attach when the DOM changes
+    this.mutationObserver = new MutationObserver(updateAuthenticationFields);
+    this.mutationObserver.observe(document.body, { attributes: true, childList: true, subtree: true });
+  }
+
+  /**
+   * Whenever the username / password callToActionFields change its position, reposition the call-to-action
+   */
+  handleInformCallToActionRepositionEvent() {
+    window.addEventListener('resize', this.clean);
+  }
+
+  /**
+   * Whenever the user clicks on the in-form call-to-action, it inserts the in-form menu iframe
+   */
+  handleInFormMenuInsertionEvent() {
+    port.on('passbolt.in-form-menu.open', () => {
+      this.menuField = new InFormMenuField(this.lastCallToActionFieldClicked.field);
+    });
+  }
+
+  /**
+   * Whenever the user clicks on the in-form menu, it removes the in-form menu iframe
+   */
+  handleInFormMenuRemoveEvent() {
+    port.on('passbolt.in-form-menu.close', () => {
+      this.menuField.removeMenuIframe();
+    });
+  }
+
+  /**
+   * Handle the click on the in-form call-to-action (iframe)
+   */
+  handleInformCallToActionClickEvent() {
+    const setLastCallToActionFieldClicked = callToActionField => callToActionField.onClick(() => this.lastCallToActionFieldClicked = callToActionField);
+    this.callToActionFields.forEach(setLastCallToActionFieldClicked);
+  }
+
+  /** Whenever one requires to get the type and value of the input attached to the last call-to-action performed */
+  handleGetLastCallToActionClickedInput() {
+    port.on('passbolt.web-integration.last-performed-call-to-action-input', (requestId) => {
+      port.emit(requestId, 'SUCCESS', {type: this.lastCallToActionFieldClicked.fieldType, value: this.lastCallToActionFieldClicked.field.value})
+    });
+  }
+
+  /** Whenever one requires to get the current credentials */
+  handleGetCurrentCredentials() {
+    port.on('passbolt.web-integration.get-credentials', (requestId) => {
+      const currentFieldType = this.lastCallToActionFieldClicked?.fieldType;
+      const isUsernameType = currentFieldType === 'username';
+      const isPasswordType = currentFieldType === 'password';
+      let username = null;
+      let password = null;
+      if (!isUsernameType) {
+        username = this.callToActionFields.find(field => field.fieldType === 'username')?.field.value;
+        password = this.lastCallToActionFieldClicked?.field.value;
+      }
+      if (!isPasswordType) {
+        username = this.lastCallToActionFieldClicked?.field.value;
+        password = this.callToActionFields.find(field => field.fieldType === 'password')?.field.value;
+      }
+      port.emit(requestId, 'SUCCESS', {username, password});
+    });
+  }
+
+  /**
+   * Whenever one requests to fill the current page form with given credentials
+   */
+  handleFillCredentials() {
+    port.on('passbolt.web-integration.fill-credentials', ({username, password}) => {
+      const currentFieldType = this.lastCallToActionFieldClicked?.fieldType;
+      const isUsernameType = currentFieldType === 'username';
+      const isPasswordType = currentFieldType === 'password';
+      if (!isUsernameType) {
+        const usernameField = this.callToActionFields.find(field => field.fieldType === 'username')?.field;
+        fireEvent.input(usernameField, { target: { value: username } });
+        fireEvent.input( this.lastCallToActionFieldClicked.field, { target: { value: password } });
+      }
+      if (!isPasswordType) {
+        const passwordField = this.callToActionFields.find(field => field.fieldType === 'password')?.field;
+        fireEvent.input( this.lastCallToActionFieldClicked.field, { target: { value: username } });
+        fireEvent.input(passwordField, { target: { value: password } });
+      }
+    });
+  }
+
+  /**
+   * Whenever one requests to fill the current page form with a password
+   */
+  handleFillPassword() {
+    port.on('passbolt.web-integration.fill-password', password => {
+      this.callToActionFields
+        .filter(callToActionField => callToActionField.fieldType === 'password')
+        .forEach(callToActionField => fireEvent.input(callToActionField.field, { target: { value: password }}));
+      this.menuField.removeMenuIframe();
+      // Listen the auto-save on the appropriate form field
+      const formField = this.credentialsFormFields.find(formField => formField.field.contains(this.lastCallToActionFieldClicked.field));
+      formField?.handleAutoSaveEvent();
+    });
+  }
+
+  /**
+   * Remove all event, observer and iframe
+   */
+  destroy() {
+    this.mutationObserver.disconnect();
+    this.callToActionFields.forEach(field => field.destroy());
+    this.menuField?.destroy();
+    this.credentialsFormFields.forEach(field => field.destroy());
+    window.removeEventListener('resize', this.clean);
+  }
+
+  /**
+   * Whenever the port is disconnected due to an update of the extension
+   */
+  handlePortDisconnectEvent() {
+    port._port.onDisconnect.addListener(this.destroy)
+  }
+}
+
+export default new InFormManager();
+

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

@@ -0,0 +1,46 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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.3.0
+ */
+
+import MockPort from "../../../react-extension/test/mock/MockPort";
+
+/**
+ * Create a login form in DOM
+ * @type {string}
+ */
+export const domElementBasicLogin =
+  '<div>' +
+  '  <input type="text" id="username" name="usename" />' +
+  '  <input type="password" id="password" name="password" />' +
+  '</div>';
+
+/**
+ * Create a login form in DOM
+ * @type {string}
+ */
+export const domElementWithNoUsernamePassword =
+  '<div>' +
+  '  <input type="text" id="search" name="search" />' +
+  '</div>';
+
+/**
+ * Mock global variable in window
+ */
+export const initializeWindow = () => {
+  window.port = new MockPort();
+  window.port._port = {
+    onDisconnect: {
+      addListener: () => {}
+    }
+  };
+};

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

@@ -0,0 +1,82 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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.3.0
+ */
+
+/**
+ * Unit tests on InformManager in regard of specifications
+ */
+
+import {domElementBasicLogin, domElementWithNoUsernamePassword, initializeWindow} from "./InformManager.test.data";
+import InformManagerPage from "./InformManager.test.page";
+import InFormManager from "./InFormManager";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("InformManager", () => {
+  // mock port in window
+  initializeWindow();
+
+  afterEach(() => {
+    InFormManager.destroy();
+  });
+
+  it("As LU I should see the inform call to action", async() => {
+    // Set up document body
+    document.body.innerHTML = domElementBasicLogin; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnPassword();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnPassword();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnPassword();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnUsername();
+    expect(informManager.iframesLength).toBe(2);
+  });
+
+  it("As LU I should see the inform call to action when I clicked on it", async() => {
+    // Set up document body
+    document.body.innerHTML = domElementBasicLogin; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.clickOnInformCallToAction();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnUsername();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnPassword();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.clickOnInformCallToAction();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnPassword();
+    expect(informManager.iframesLength).toBe(0);
+  });
+
+  it("As LU I shouldn't see the inform call to action on a page with no login form", async() => {
+    // Set up document body
+    document.body.innerHTML = domElementWithNoUsernamePassword; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnSearch();
+    expect(informManager.iframesLength).toBe(0);
+  });
+});
+

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

@@ -0,0 +1,116 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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.3.0
+ */
+
+/**
+ * The InformManager component represented as a page
+ */
+
+import InFormManager from "./InFormManager";
+import {fireEvent, waitFor} from "@testing-library/react";
+
+export default class InformManagerPage {
+  /**
+   * Default constructor
+   */
+  constructor() {
+    InFormManager.initialize();
+  }
+
+  destroy() {
+    InFormManager.destroy();
+  }
+
+  /**
+   * Returns the username element
+   */
+  get username() {
+    return document.querySelector('#username');
+  }
+
+  /**
+   * Returns the password element
+   */
+  get password() {
+    return document.querySelector('#password');
+  }
+
+  /**
+   * Returns the search element
+   */
+  get search() {
+    return document.querySelector('#search');
+  }
+
+  /**
+   * Returns the iframe call to action
+   */
+  get iframesCallToAction() {
+    return document.querySelector('iframe');
+  }
+
+  /**
+   * Returns the iframe length
+   */
+  get iframesLength() {
+    return document.querySelectorAll('iframe').length;
+  }
+
+  /** Blur on the username element */
+  async blurOnUsername()  {
+    fireEvent.blur(this.username);
+    await waitFor(() => {});
+  }
+
+  /** Blur on the password element */
+  async blurOnPassword()  {
+    fireEvent.blur(this.password);
+    await waitFor(() => {});
+  }
+
+  /** Focus on the username element */
+  async focusOnUsername()  {
+    fireEvent.focus(this.username);
+    await waitFor(() => {});
+  }
+
+  /** Focus on the password element */
+  async focusOnPassword()  {
+    fireEvent.focus(this.password);
+    await waitFor(() => {});
+  }
+
+  /** Focus on the search element */
+  async focusOnSearch()  {
+    fireEvent.focus(this.search);
+    await waitFor(() => {});
+  }
+
+  /** Mouse over on the username element */
+  async mouseOverOnUsername()  {
+    fireEvent.mouseOver(this.username);
+    await waitFor(() => {});
+  }
+
+  /** Mouse over on the password element */
+  async mouseOverOnPassword()  {
+    fireEvent.mouseOver(this.password);
+    await waitFor(() => {});
+  }
+
+  async clickOnInformCallToAction() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.iframesCallToAction, leftClick);
+    await waitFor(() => {});
+  }
+}

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

@@ -0,0 +1,182 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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.3.0
+ */
+
+import {v4 as uuidv4} from "uuid";
+import browser from "webextension-polyfill";
+import DomUtils from "../Dom/DomUtils";
+
+/**
+ * An InFormMenuField is represented by a DOM element identified as a menu field
+ */
+class InFormMenuField {
+  /**
+   * Default constructor
+   * @param field
+   */
+  constructor(field) {
+    /** The field to which the in-form is attached */
+    this.field = field;
+    /** An unique identifier for the iframe */
+    this.iframeId = uuidv4();
+    /** Flag telling if the user is mousing over the menu (iframe) */
+    this.isMenuMousingOver = false;
+    /** In-form menu click watcher */
+    this.menuClickWatcher = null;
+    /** The scrollable field parent */
+    this.scrollableFieldParent = null;
+
+    this.bindCallbacks();
+    this.insertInformMenuIframe();
+    this.handleRemoveEvent();
+    this.handleScrollEvent();
+  }
+
+  /**
+   * Binds methods callbacks
+   */
+  bindCallbacks() {
+    this.removeInFormMenu = this.removeInFormMenu.bind(this);
+    this.removeMenuIframe = this.removeMenuIframe.bind(this);
+    this.destroy = this.destroy.bind(this);
+  }
+
+  /** MENU INSERTION */
+
+  /**
+   * Insert an in-form menu iframe
+   */
+  insertInformMenuIframe() {
+    const iframes = document.querySelectorAll('iframe');
+    // Use of Array prototype some method cause NodeList is not an array !
+    const iframeId =  this.iframeId;
+    const isIframeAlreadyInserted = Array.prototype.some.call(iframes, iframe => iframe.id === iframeId);
+    if (!isIframeAlreadyInserted) {
+      const iframe = this.createMenuIframe();
+      this.handleMenuClicked(iframe);
+    }
+  }
+
+  /**
+   * Create an iframe dedicated to the menu
+   * @return {HTMLIFrameElement} The created iframe
+   */
+  createMenuIframe() {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const browserExtensionUrl = browser.runtime.getURL("/");
+    const {top, left} = this.calculateIframePosition();
+    iframe.id = this.iframeId;
+    iframe.style.position = "fixed";
+    iframe.style.top = top + 'px'
+    iframe.style.left =  left + 'px';
+    iframe.style.border = 0;
+    iframe.style.width = '370px'; // width of the menu 350px + 20px to display shadows
+    iframe.style.height = '220px'; // For 3 items in a row to be display
+    iframe.style.zIndex = "1000";
+    iframe.contentWindow.location = `${browserExtensionUrl}data/passbolt-iframe-in-form-menu.html?passbolt=passbolt-iframe-in-form-menu`;
+    return iframe;
+  }
+
+  /**
+   * Calculates the position on the screen of the DOM field
+   * @return {{top: number, left: number}}
+   */
+  calculateIframePosition() {
+    let x = 0;
+    let y = 0;
+    let currentElement = this.field;
+    const {height, width} = this.field.getBoundingClientRect();
+    const {top: topBody, left: leftBody} = document.documentElement.getBoundingClientRect();
+    // We loop to calculate the cumulated position of the field
+    // from its ancestors and itself differential offset / scroll position
+    while( currentElement && !isNaN( currentElement.offsetLeft ) && !isNaN( currentElement.offsetTop ) ) {
+      x += currentElement.offsetLeft - currentElement.scrollLeft;
+      y += currentElement.offsetTop - currentElement.scrollTop;
+      currentElement = currentElement.offsetParent;
+    }
+    // Then we add the body offset (notably in case of window scroll) + some local adjustments (margin / vertical aligment ) to align with the call to action icon
+    x = x + leftBody + width - 367; // (-370 width of the iframe + 10 to adjust with the shadow) (-7 adjustment of the call to action menu (18-25))
+    y = y + topBody + height; // Calculate the middle position of the input, 8 is the half of the iframe height
+    return { top: y, left: x };
+  }
+
+  /**
+   * Whenever the user clicked on the call-to-action iframe
+   * @param iframe The menu iframe
+   */
+  handleMenuClicked(iframe) {
+    /* We need to know which iframe the user click on. We cannot add a listener on iframe
+     * since there are from different domains (target page vs extension pagemods)
+     */
+    iframe.addEventListener('mouseover', () => this.isMenuMousingOver = true);
+    iframe.addEventListener('mouseout', () => this.isMenuMousingOver = false);
+  }
+
+  /** MENU REMOVE */
+
+  /**
+   * Whenever the menu must be removed
+   */
+  handleRemoveEvent() {
+    this.field.addEventListener("blur",  this.removeInFormMenu);
+  }
+
+  /**
+   * Removes the in-form menu iframe from the field
+   */
+  removeInFormMenu() {
+    const isIframeMouseOver = this.isMenuMousingOver;
+    const isActiveElement = document.activeElement === this.field;
+    if (!isIframeMouseOver && !isActiveElement) {
+      this.removeMenuIframe();
+    }
+  }
+
+  /**
+   * Remove the menu (iframe)
+   */
+  removeMenuIframe() {
+    const iframes = document.querySelectorAll('iframe');
+    iframes.forEach(iframe => {
+      const identifierToMatch = this.iframeId
+      if (iframe.id === identifierToMatch) {
+        iframe.parentNode.removeChild(iframe);
+      }
+    });
+  }
+
+  /** SCROLL REPOSITION */
+
+  /**
+   * Whenever the user scrolls the page
+   */
+  handleScrollEvent() {
+    // Remove the in form menu
+    this.scrollableFieldParent = DomUtils.getScrollParent(this.field);
+    this.scrollableFieldParent.addEventListener('scroll', this.removeMenuIframe);
+  }
+
+  /** DESTROY */
+
+  /**
+   * Remove all listener and iframe to clean the page and avoid issue on extension update
+   */
+  destroy() {
+    this.field.removeEventListener("blur",  this.removeInFormMenu);
+    this.scrollableFieldParent.removeEventListener('scroll', this.removeMenuIframe);
+    this.removeMenuIframe();
+  }
+}
+
+export default InFormMenuField;