passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

@@ -0,0 +1,68 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 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) 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.4.0
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import AppContext from "../../../contexts/AppContext";
+import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
+
+class DisplayDragResource extends React.Component {
+  /**
+   * the resource selected
+   * @returns {*}
+   */
+  get selectedResources() {
+    return this.props.resourceWorkspaceContext.selectedResources;
+  }
+
+  /**
+   * is multiple resources selected
+   * @returns {boolean}
+   */
+  isMultipleSelected() {
+    return this.props.resourceWorkspaceContext.selectedResources.length > 1;
+  }
+
+  /**
+   * Get the number of resources
+   * @returns {string|*}
+   */
+  get numberOfResources() {
+    return this.props.resourceWorkspaceContext.selectedResources.length > 99 ? '99+' : this.props.resourceWorkspaceContext.selectedResources.length;
+  }
+
+  /**
+   * Render the component.
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className={`${this.isMultipleSelected() ? "drag-and-drop-multiple" : "drag-and-drop"}`}>
+        {this.selectedResources[0].name}
+        {this.isMultipleSelected() &&
+        <span className="count">
+          {this.numberOfResources}
+        </span>
+        }
+      </div>
+    );
+  }
+}
+
+DisplayDragResource.contextType = AppContext;
+
+DisplayDragResource.propTypes = {
+  resourceWorkspaceContext: PropTypes.any
+};
+
+export default withResourceWorkspace(DisplayDragResource);

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

@@ -29,6 +29,8 @@ import {withContextualMenu} from "../../../contexts/ContextualMenuContext";
 import sanitizeUrl, {urlProtocols} from "../../../lib/Sanitize/sanitizeUrl";
 import {Trans, withTranslation} from "react-i18next";
 import {DateTime} from "luxon";
+import {withDrag} from "../../../contexts/DragContext";
+import DisplayDragResource from "./DisplayDragResource";
 
 /**
  * This component allows to display the filtered resources into a grid
@@ -53,7 +55,6 @@ class DisplayResourcesList extends React.Component {
     return {
       resources: [], // The current list of resources to display
       selectStrategy: "",
-      previewedPassword: null, // The previewed password.
     };
   }
 
@@ -109,7 +110,6 @@ class DisplayResourcesList extends React.Component {
    */
   createRefs() {
     this.listRef = React.createRef();
-    this.dragFeedbackElement = React.createRef();
   }
 
   /**
@@ -130,7 +130,6 @@ class DisplayResourcesList extends React.Component {
   async handleResourceSelected(event, resource) {
     event.preventDefault();
     event.stopPropagation();
-
     await this.selectResource(resource, event);
   }
 
@@ -164,6 +163,8 @@ class DisplayResourcesList extends React.Component {
   }
 
   async handleCheckboxWrapperClick(event, resource) {
+    // Prevent event fired twice due to the input + label
+    event.preventDefault();
     /*
      * We want the td to extend the clickable area of the checkbox.
      * If we propagate the event, the tr will listen to the click and select only the clicked row.
@@ -216,7 +217,7 @@ class DisplayResourcesList extends React.Component {
    * @param resource A resource
    */
   isResourceSelected(resource) {
-    return this.props.resourceWorkspaceContext.selectedResources.some(selectedResource => resource.id === selectedResource.id);
+    return this.selectedResources.some(selectedResource => resource.id === selectedResource.id);
   }
 
   async handleCopyUsernameClick(ev, resource) {
@@ -377,17 +378,15 @@ class DisplayResourcesList extends React.Component {
     if (!this.isResourceSelected(resource)) {
       await this.props.resourceWorkspaceContext.onResourceSelected.single(resource);
     }
-    event.dataTransfer.setDragImage(this.dragFeedbackElement.current, 5, 5);
     const draggedItems = {resources:  this.props.resourceWorkspaceContext.selectedResources, folders: []};
-    const triggerEvent = document.createEvent("CustomEvent");
-    triggerEvent.initCustomEvent("passbolt.resources.drag-start", true, true, draggedItems);
-    document.dispatchEvent(triggerEvent);
+    this.props.dragContext.onDragStart(event, DisplayDragResource, draggedItems);
   }
 
+  /**
+   * Handle when the user stop dragging content.
+   */
   handleDragEndEvent() {
-    const trigerEvent = document.createEvent("CustomEvent");
-    trigerEvent.initCustomEvent("passbolt.resources.drag-end", true, true);
-    document.dispatchEvent(trigerEvent);
+    this.props.dragContext.onDragEnd();
   }
 
   /**
@@ -549,7 +548,9 @@ class DisplayResourcesList extends React.Component {
           <div className="ready">
             <div className="input checkbox">
               <input type="checkbox" id={`checkbox_multiple_select_checkbox_${resource.id}`} checked={isSelected} readOnly={true}/>
-              <label htmlFor={`checkbox_multiple_select_checkbox_${resource.id}`}></label>
+              <label htmlFor={`checkbox_multiple_select_checkbox_${resource.id}`}>
+                <span className="visually-hidden"><Trans>Select resource</Trans></span>
+              </label>
             </div>
           </div>
         </td>
@@ -608,37 +609,6 @@ class DisplayResourcesList extends React.Component {
     );
   }
 
-  /**
-   * Render the drag tooltip of the selected resources
-   * @returns {JSX.Element}
-   */
-  renderDragFeedback() {
-    const isSelected = this.props.resourceWorkspaceContext.selectedResources.length > 0;
-    const isMultipleSelected = this.props.resourceWorkspaceContext.selectedResources.length > 1;
-    let dragFeedbackText = "";
-    let dragElementClassname = "";
-
-    if (isSelected) {
-      const isSelected = resource => resource.id === this.props.resourceWorkspaceContext.selectedResources[0].id;
-      const firstSelectedResource = this.resources.find(isSelected);
-      if (firstSelectedResource) {
-        dragElementClassname = isMultipleSelected ? "drag-and-drop-multiple" : "drag-and-drop";
-        dragFeedbackText = firstSelectedResource.name;
-      }
-    }
-
-    return (
-      <div ref={this.dragFeedbackElement} className={dragElementClassname}>
-        {dragFeedbackText}
-        {isMultipleSelected &&
-        <span className="count">
-          {this.props.resourceWorkspaceContext.selectedResources.length}
-        </span>
-        }
-      </div>
-    );
-  }
-
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -674,7 +644,7 @@ class DisplayResourcesList extends React.Component {
             <p><Trans>Share a password with this group or wait for a team member to share one with this group.</Trans></p>
           </div>
           }
-          {isEmpty && filterType === ResourceWorkspaceFilterTypes.FOLDER &&
+          {isEmpty && (filterType === ResourceWorkspaceFilterTypes.FOLDER || filterType === ResourceWorkspaceFilterTypes.ROOT_FOLDER) &&
           <div className="empty-content">
             <h2><Trans>No passwords in this folder yet.</Trans></h2>
             <p><Trans>It does feel a bit empty here.</Trans></p>
@@ -706,7 +676,6 @@ class DisplayResourcesList extends React.Component {
           }
           {!isEmpty &&
           <React.Fragment>
-            {this.renderDragFeedback()}
             <div className="tableview-header">
               <table>
                 <thead>
@@ -714,11 +683,14 @@ class DisplayResourcesList extends React.Component {
                     <th className="cell-multiple-select selections s-cell">
                       <div className="input checkbox">
                         <input
+                          id="passwords-select-all"
                           type="checkbox"
                           name="select all"
                           checked={selectAll}
                           onChange={this.handleSelectAllChange}/>
-                        <label htmlFor="js-passwords-select-all">select all</label>
+                        <label htmlFor="passwords-select-all">
+                          <span className="visually-hidden">select all</span>
+                        </label>
                       </div>
                     </th>
                     <th className="cell-favorite selections s-cell sortable">
@@ -840,7 +812,8 @@ DisplayResourcesList.propTypes = {
   actionFeedbackContext: PropTypes.any, // The action feedback context
   contextualMenuContext: PropTypes.any, // The contextual menu context
   history: PropTypes.any,
+  dragContext: PropTypes.any,
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withRouter(withActionFeedback(withContextualMenu(withResourceWorkspace(withTranslation('common')(DisplayResourcesList))))));
+export default withAppContext(withRouter(withActionFeedback(withContextualMenu(withResourceWorkspace(withDrag(withTranslation('common')(DisplayResourcesList)))))));

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

@@ -20,6 +20,7 @@ import AppContext from "../../../contexts/AppContext";
 import {BrowserRouter as Router} from "react-router-dom";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayResourcesList from "./DisplayResourcesList";
+import {DragContext} from "../../../contexts/DragContext";
 
 /**
  * The DisplayResourcesListPage component represented as a page
@@ -35,7 +36,9 @@ export default class DisplayResourcesListPage {
       <MockTranslationProvider>
         <AppContext.Provider value={appContext}>
           <Router>
-            <DisplayResourcesList {...props}/>
+            <DragContext.Provider value={props.dragContext}>
+              <DisplayResourcesList {...props}/>
+            </DragContext.Provider>
           </Router>
         </AppContext.Provider>
       </MockTranslationProvider>

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

@@ -292,7 +292,7 @@ class DisplayResourcesWorkspaceMenu extends React.Component {
    * Returns true if the user can export
    */
   canExport() {
-    return this.hasResourceSelected() && this.props.context.siteSettings.settings.passbolt.plugins.export;
+    return this.hasResourceSelected() && this.props.context.siteSettings.canIUse("export");
   }
 
   /**
@@ -457,7 +457,7 @@ class DisplayResourcesWorkspaceMenu extends React.Component {
             <li>
               <a className={`button button-toggle info ${this.hasLockDetail() ? "selected" : ""}`}
                 onClick={this.handleViewDetailClickEvent}>
-                <Icon name="info-circle"/>
+                <Icon name="info-circle" big={true}/>
                 <span className="visuallyhidden"><Trans>View detail</Trans></span>
               </a>
             </li>

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

@@ -12,13 +12,7 @@ export function defaultAppContext(appContext) {
     port: new MockPort(),
     userSettings: new UserSettings(userSettingsFixture),
     siteSettings: {
-      settings: {
-        passbolt: {
-          plugins: {
-            export: 'something'
-          }
-        }
-      }
+      canIUse: () => true
     }
   };
   return Object.assign(defaultAppContext, appContext || {});

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

@@ -16,7 +16,6 @@ import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import Icon from "../../Common/Icons/Icon";
 import Tooltip from "../../Common/Tooltip/Tooltip";
-import SecretComplexity from "../../../../shared/lib/Secret/SecretComplexity";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
@@ -25,6 +24,10 @@ import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitBut
 import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
 import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import {Trans, withTranslation} from "react-i18next";
+import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
+import GenerateResourcePassword from "../../ResourcePassword/GenerateResourcePassword/GenerateResourcePassword";
+import {withResourcePasswordGeneratorContext} from "../../../contexts/ResourcePasswordGeneratorContext";
+import {SecretGeneratorComplexity} from "../../../../shared/lib/SecretGenerator/SecretGeneratorComplexity";
 
 /** Resource password max length */
 const RESOURCE_PASSWORD_MAX_LENGTH = 4096;
@@ -74,6 +77,7 @@ class EditResource extends Component {
     this.handleNameInputKeyUp = this.handleNameInputKeyUp.bind(this);
     this.handlePasswordInputKeyUp = this.handlePasswordInputKeyUp.bind(this);
     this.handleViewPasswordButtonClick = this.handleViewPasswordButtonClick.bind(this);
+    this.handleOpenGenerator = this.handleOpenGenerator.bind(this);
     this.handleGeneratePasswordButtonClick = this.handleGeneratePasswordButtonClick.bind(this);
     this.handleDescriptionInputFocus = this.handleDescriptionInputFocus.bind(this);
     this.handleDescriptionInputBlur = this.handleDescriptionInputBlur.bind(this);
@@ -90,10 +94,21 @@ class EditResource extends Component {
     this.descriptionInputRef = React.createRef();
   }
 
+  /**
+   * Whenever the component has been mounted
+   */
   componentDidMount() {
     this.initialize();
   }
 
+  /**
+   * Whenever the component has been changed (props)
+   * @param prevProps The previous component props
+   */
+  componentDidUpdate(prevProps) {
+    this.handleLastGeneratedPasswordChanged(prevProps.resourcePasswordGeneratorContext.lastGeneratedPassword);
+  }
+
   async initialize() {
     const isDecrypted = await this.decryptSecret();
     if (isDecrypted) {
@@ -102,6 +117,28 @@ class EditResource extends Component {
     }
   }
 
+  /*
+   * =============================================================
+   *  Resource password generator
+   * =============================================================
+   */
+  get currentGeneratorConfiguration() {
+    const type = this.props.resourcePasswordGeneratorContext.settings.default_generator;
+    return this.props.resourcePasswordGeneratorContext.settings.generators.find(generator => generator.type === type);
+  }
+
+  /**
+   * Whenever a new password has been generated through the generator
+   * @param previousLastGeneratedPassword The previous last generated password value
+   */
+  handleLastGeneratedPasswordChanged(previousLastGeneratedPassword) {
+    const currentLastGeneratedPassword = this.props.resourcePasswordGeneratorContext.lastGeneratedPassword;
+    const hasLastGeneratedPasswordChanged = previousLastGeneratedPassword !== currentLastGeneratedPassword;
+    if (hasLastGeneratedPasswordChanged) {
+      this.setState({password: currentLastGeneratedPassword});
+    }
+  }
+
   /*
    * =============================================================
    *  Resource type helpers
@@ -457,10 +494,17 @@ class EditResource extends Component {
     if (this.hasAllInputDisabled()) {
       return;
     }
-    const password = SecretComplexity.generate();
+    const password = SecretGenerator.generate(this.currentGeneratorConfiguration);
     this.setState({password: password});
   }
 
+  /**
+   * Whenever the user wants to open the password generator
+   */
+  handleOpenGenerator() {
+    this.props.dialogContext.open(GenerateResourcePassword);
+  }
+
   /**
    * Handle close button click.
    */
@@ -539,52 +583,7 @@ class EditResource extends Component {
     return plaintext;
   }
 
-  /*
-   * =============================================================
-   *  Security token style
-   * =============================================================
-   */
-  /**
-   * Get the password input style.
-   * @return {Object}
-   */
-  getPasswordInputStyle() {
-    if (this.state.passwordInputHasFocus) {
-      const backgroundColor = this.props.context.userSettings.getSecurityTokenBackgroundColor();
-      const textColor = this.props.context.userSettings.getSecurityTokenTextColor();
 
-      return {
-        background: backgroundColor,
-        color: textColor
-      };
-    }
-
-    return {
-      background: "",
-      color: "",
-    };
-  }
-
-  /**
-   * Get the security token style.
-   * @return {Object}
-   */
-  getSecurityTokenStyle() {
-    const backgroundColor = this.props.context.userSettings.getSecurityTokenBackgroundColor();
-    const textColor = this.props.context.userSettings.getSecurityTokenTextColor();
-
-    if (this.state.passwordInputHasFocus) {
-      return {
-        background: textColor,
-        color: backgroundColor,
-      };
-    }
-
-    return {
-      background: backgroundColor,
-      color: textColor,
-    };
-  }
 
   /*
    * =============================================================
@@ -638,6 +637,14 @@ class EditResource extends Component {
     return (this.state.isSecretDecrypting && this.mustEncryptDescription());
   }
 
+  /**
+   * Returns true if the logged in user can use the password generator capability.
+   * @returns {boolean}
+   */
+  get canUsePasswordGenerator() {
+    return this.props.context.siteSettings.canIUse('passwordGenerator');
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -652,10 +659,8 @@ class EditResource extends Component {
    * =============================================================
    */
   render() {
-    const passwordInputStyle = this.getPasswordInputStyle();
-    const securityTokenStyle = this.getSecurityTokenStyle();
-    const securityTokenCode = this.props.context.userSettings.getSecurityTokenCode();
-    const passwordStrength = SecretComplexity.getStrength(this.state.password);
+    const passwordEntropy = SecretGenerator.entropy(this.state.password);
+    const passwordStrength = SecretGeneratorComplexity.strength(passwordEntropy);
     const passwordPlaceholder = this.getPasswordInputPlaceholder();
     /*
      * The parser can't find the translation for passwordStrength.label
@@ -680,7 +685,7 @@ class EditResource extends Component {
                 disabled={this.hasAllInputDisabled()} ref={this.nameInputRef} className="required fluid" maxLength="64"
                 required="required" autoComplete="off" autoFocus={true}/>
               {this.state.nameError &&
-              <div className="name error message">{this.state.nameError}</div>
+              <div className="name error-message">{this.state.nameError}</div>
               }
             </div>
             <div className={`input text ${this.state.uriError ? "error" : ""}`}>
@@ -689,7 +694,7 @@ class EditResource extends Component {
                 autoComplete="off" value={this.state.uri} onChange={this.handleInputChange} placeholder={this.translate("URI")}
                 disabled={this.hasAllInputDisabled()}/>
               {this.state.uriError &&
-              <div className="error message">{this.state.uriError}</div>
+              <div className="error-message">{this.state.uriError}</div>
               }
             </div>
             <div className={`input text ${this.state.usernameError ? "error" : ""}`}>
@@ -698,7 +703,7 @@ class EditResource extends Component {
                 autoComplete="off" value={this.state.username} onChange={this.handleInputChange} placeholder={this.translate("Username")}
                 disabled={this.hasAllInputDisabled()}/>
               {this.state.usernameError &&
-              <div className="error message">{this.state.usernameError}</div>
+              <div className="error-message">{this.state.usernameError}</div>
               }
             </div>
             <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""}`}>
@@ -709,18 +714,16 @@ class EditResource extends Component {
                   onKeyUp={this.handlePasswordInputKeyUp} value={this.state.password}
                   placeholder={passwordPlaceholder} onFocus={this.handlePasswordInputFocus}
                   onBlur={this.handlePasswordInputBlur} onChange={this.handleInputChange}
-                  disabled={this.hasAllInputDisabled() || this.isPasswordDisabled()} style={passwordInputStyle} ref={this.passwordInputRef}/>
-                <div className="security-token"
-                  style={securityTokenStyle}>{securityTokenCode}</div>
+                  disabled={this.hasAllInputDisabled() || this.isPasswordDisabled()}
+                  autoComplete="new-password"
+                  ref={this.passwordInputRef}/>
+                <a onClick={this.handleViewPasswordButtonClick}
+                  className={`password-view button button-icon toggle ${this.state.viewPassword ? "selected" : ""}`}>
+                  <Icon name='eye-open' big={true}/>
+                  <span className="visually-hidden">view</span>
+                </a>
               </div>
               <ul className="actions inline">
-                <li>
-                  <a onClick={this.handleViewPasswordButtonClick}
-                    className={`password-view button button-icon toggle ${this.state.viewPassword ? "selected" : ""} ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
-                    <Icon name='eye-open' big={true}/>
-                    <span className="visually-hidden">view</span>
-                  </a>
-                </li>
                 <li>
                   <a onClick={this.handleGeneratePasswordButtonClick}
                     className={`password-generate button-icon button ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
@@ -728,16 +731,32 @@ class EditResource extends Component {
                     <span className="visually-hidden">generate</span>
                   </a>
                 </li>
+                {this.canUsePasswordGenerator &&
+                <li>
+                  <a onClick={this.handleOpenGenerator}
+                    className="password-generator button-icon button">
+                    <Icon name='cog' big={true}/>
+                    <span className="visually-hidden">open generator</span>
+                  </a>
+                </li>
+                }
               </ul>
               <div className={`password-complexity ${passwordStrength.id}`}>
                 <span className="progress">
                   <span className={`progress-bar ${passwordStrength.id}`}/>
                 </span>
-                <span className="complexity-text"><Trans>complexity:</Trans> <strong>{this.translate(passwordStrength.label)}</strong></span>
+                <span className="complexity-text">
+                  <div>
+                    <Trans>Complexity:</Trans> <strong>{this.translate(passwordStrength.label)}</strong>
+                  </div>
+                  <div>
+                    <Trans>Entropy:</Trans> <strong>{passwordEntropy.toFixed(1)} bits</strong>
+                  </div>
+                </span>
               </div>
               {this.state.passwordError &&
               <div className="input text">
-                <div className="password message error">{this.state.passwordError}</div>
+                <div className="password error-message">{this.state.passwordError}</div>
               </div>
               }
               {this.state.passwordWarning &&
@@ -770,7 +789,7 @@ class EditResource extends Component {
                 onKeyUp={this.handleDescriptionInputKeyUp}>
               </textarea>
               {this.state.descriptionError &&
-              <div className="error message">{this.state.descriptionError}</div>
+              <div className="error-message">{this.state.descriptionError}</div>
               }
               {this.state.descriptionWarning &&
               <div className="warning message">{this.state.descriptionWarning}</div>
@@ -790,10 +809,16 @@ class EditResource extends Component {
 EditResource.propTypes = {
   context: PropTypes.any, // The application context
   onClose: PropTypes.func,
+  resourcePasswordGeneratorContext: PropTypes.any, // The resource password generator context
   resourceWorkspaceContext: PropTypes.any, // The resource workspace context
   actionFeedbackContext: PropTypes.any, // The action feedback context
   dialogContext: PropTypes.any, // The dialog context,
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withResourceWorkspace(withActionFeedback(withDialog(withTranslation('common')(EditResource)))));
+export default withAppContext(
+  withResourceWorkspace(
+    withResourcePasswordGeneratorContext(
+      withActionFeedback(
+        withDialog(
+          withTranslation('common')(EditResource))))));

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

@@ -33,7 +33,86 @@ export function defaultProps() {
         id: mockResource.id
       }
     },
-    onClose: jest.fn()
+    resourcePasswordGeneratorContext: {
+      settings: {
+        "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": "special_char1",
+                "label": "# $ % & @ ^ ~",
+                "characters": "#$%&@^~"
+              },
+              {
+                "name": "special_char2",
+                "label": ". , : ;",
+                "characters": ".,:;"
+              },
+              {
+                "name": "special_char5",
+                "label": "< * + ! ? =",
+                "characters": "<*+!?="
+              },
+              {
+                "name": "emoji",
+                "label": "😘",
+                "characters": "😀😃😄😁😆😅😂🤣🥲☺️😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓😎🥸🤩🥳😏😒😞😔😟😕🙁☹️😣😖😫😩🥺😢😭😤😠😡🤬🤯😳🥵🥶😱😨😰😥😓🤗🤔🤭🤫🤥😶😐😑😬🙄😯😦😧😮😲🥱😴🤤😪😵🤐🥴🤢🤮🤧😷🤒🤕🤑🤠😈👿👹👺🤡💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾"
+              },
+              {
+                "name": "ascii",
+                "label": "ascii",
+                "characters": "%&¡¢£¤¥¦§¨©ª«¬®¯°±²³µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿŒœŠšŸƒ—„†‡•…‰€™"
+              }
+            ],
+          },
+          {
+            "name": "Passphrase",
+            "type": "passphrase",
+            "default_options": {
+              "word_count": 8,
+              "word_case": "lowercase",
+              "min_word": 4,
+              "max_word": 40,
+              "separator": " "
+            },
+          }
+        ]
+      }
+    },
+    onClose: jest.fn(),
+    dialogContext: {
+      open: jest.fn()
+    }
   };
 }