passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePassphraseGenerator.js

@@ -14,6 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
+import Select from "../../Common/Select/Select";
 
 class ConfigurePassphraseGenerator extends Component {
   constructor(props) {
@@ -89,6 +90,18 @@ class ConfigurePassphraseGenerator extends Component {
     return this.state.configuration.default_options.word_case;
   }
 
+  /**
+   * Get word case list
+   * @returns {[{label: string, value: string},{label: string, value: string},{label: string, value: string}]}
+   */
+  get wordCaseList() {
+    return [
+      {value: "lowercase", label: this.translate("Lower case")},
+      {value: "uppercase", label: this.translate("Upper case")},
+      {value: "camelcase", label: this.translate("Camel case")}
+    ];
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -128,13 +141,9 @@ class ConfigurePassphraseGenerator extends Component {
           <input type="text" id="configure-passphrase-generator-form-words-separator" name="separator" value={this.separator} onChange={this.handleInputChange}
             placeholder={this.translate("Type one or more characters")}/>
         </div>
-        <div className="input select">
+        <div className="select-wrapper input">
           <label htmlFor="configure-passphrase-generator-form-words-case"><Trans>Words case</Trans></label>
-          <select id="configure-passphrase-generator-form-words-case" name="word_case" value={this.word_case} onChange={this.handleInputChange}>
-            <option key="lowercase" value="lowercase">{this.translate("Lower case")}</option>
-            <option key="uppercase" value="uppercase">{this.translate("Upper case")}</option>
-            <option key="camelcase" value="camelcase">{this.translate("Camel case")}</option>
-          </select>
+          <Select id="configure-passphrase-generator-form-words-case" name="word_case" items={this.wordCaseList} value={this.wordCase} onChange={this.handleInputChange}/>
         </div>
       </>
     );

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePassphraseGenerator.test.stories.js

@@ -26,5 +26,6 @@ Initial.args = {
       max_word: 40,
       separator: " "
     },
-  }
+  },
+  onChanged: () => {}
 };

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePasswordGenerator.js

@@ -121,7 +121,7 @@ class ConfigurePasswordGenerator extends React.Component {
   render() {
     return (
       <>
-        <div>
+        <div className="input text">
           <label htmlFor="configure-password-generator-form-length">
             <Trans>Length</Trans>
           </label>
@@ -144,7 +144,7 @@ class ConfigurePasswordGenerator extends React.Component {
           </div>
         </div>
 
-        <div>
+        <div className="input text">
           <label htmlFor="configure-password-generator-form-masks">
             <Trans>Character Types</Trans>
           </label>
@@ -153,7 +153,7 @@ class ConfigurePasswordGenerator extends React.Component {
               this.masks.map(mask => (
                 <button
                   key={mask.name}
-                  className={`button button-toggle ${(mask.active ? 'selected' : '')}`}
+                  className={`button button-toggle ${(mask.active || mask.required ? 'selected' : '')}`}
                   onClick={event => this.handleMaskToggled(mask.name, event)}>
                   {mask.label}
                 </button>
@@ -162,19 +162,16 @@ class ConfigurePasswordGenerator extends React.Component {
           </div>
         </div>
 
-        <div>
-          <label/>
-          <div className="input checkbox">
-            <input
-              id="configure-password-generator-form-exclude-look-alike"
-              type="checkbox"
-              name="exclude-look-alike"
-              checked={this.isExcludeLookAlikeCharacters}
-              onChange={this.handleExcludeLookAlikeCharactersToggled}/>
-            <label htmlFor="configure-password-generator-form-exclude-look-alike">
-              <Trans>Exclude look-alike characters</Trans>
-            </label>
-          </div>
+        <div className="input checkbox">
+          <input
+            id="configure-password-generator-form-exclude-look-alike"
+            type="checkbox"
+            name="exclude-look-alike"
+            checked={this.isExcludeLookAlikeCharacters}
+            onChange={this.handleExcludeLookAlikeCharactersToggled}/>
+          <label htmlFor="configure-password-generator-form-exclude-look-alike">
+            <Trans>Exclude look-alike characters</Trans>
+          </label>
         </div>
 
       </>

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePasswordGenerator.test.stories.js

@@ -49,13 +49,12 @@ Initial.args = {
       {
         "name": "lower",
         "label": "a-z",
-        "characters": "abcdefghijklmnopqrstuvwxyz",
+        "characters": "abcdefghijklmnopqrstuvwxyz"
       },
       {
         "name": "digit",
         "label": "0-9",
-        "characters": "0123456789",
-        "required": true,
+        "characters": "0123456789"
       },
       {
         "name": "parenthesis",

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/GenerateResourcePassword.js

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
 import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
 import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
@@ -26,7 +26,8 @@ import ConfigurePasswordGenerator from "./ConfigurePasswordGenerator";
 import {SecretGenerator} from "../../../../shared/lib/SecretGenerator/SecretGenerator";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withResourcePasswordGeneratorContext} from "../../../contexts/ResourcePasswordGeneratorContext";
-import {SecretGeneratorComplexity} from "../../../../shared/lib/SecretGenerator/SecretGeneratorComplexity";
+import Password from "../../../../shared/components/Password/Password";
+import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
 
 /**
  * This component generate password or passphrase following configuration
@@ -171,22 +172,6 @@ class GenerateResourcePassword extends Component {
    */
   render() {
     const passwordEntropy = SecretGenerator.entropy(this.state.password);
-    const passwordStrength = SecretGeneratorComplexity.strength(passwordEntropy);
-    /*
-     * The parser can't find the translation for passwordStrength.label
-     * To fix that we can use it in comment
-     * this.translate("n/a")
-     * this.translate("very weak")
-     * this.translate("weak")
-     * this.translate("fair")
-     * this.translate("strong")
-     * this.translate("very strong")
-     *
-     * The parser can't find the translation for generator.name
-     * To fix that we can use it in comment
-     * this.translate("Password")
-     * this.translate("Passphrase")
-     */
     return (
       <>
         {!this.state.loading &&
@@ -199,59 +184,30 @@ class GenerateResourcePassword extends Component {
             <div className="form-content">
               <div className="input-password-wrapper input">
                 <label htmlFor="generate-resource-password-form-password"><Trans>Password</Trans></label>
-                <div className="input text password">
-                  <input
+                <div className="password-button-inline">
+                  <Password
                     id="generate-resource-password-form-password"
                     name="password"
-                    readOnly="readOnly"
-                    className="required"
+                    autoComplete="off"
+                    readOnly={true}
                     placeholder={this.translate("Password")}
-                    type={this.state.isObfuscated ? "password" : "text"}
+                    preview={true}
                     value={this.state.password}
                     onChange={this.handleInputChange}
-                    disabled={this.state.processing}
-                    autoComplete="off"/>
-                  <a
-                    onClick={this.handleViewPasswordToggle}
-                    className={`password-view button button-icon toggle ${this.state.isObfuscated ? "" : "selected"}`}>
-                    <Icon name='eye-open' big={true}/>
+                    disabled={this.state.processing}/>
+                  <a onClick={this.handleGeneratePassword} className="password-generate button-icon button">
+                    <Icon name='dice' big={true}/>
+                    <span className="visually-hidden">generate</span>
+                  </a>
+                  <a onClick={this.handleCopyPassword}
+                    className={`copy-to-clipboard button button-icon`}>
+                    <Icon name='copy-to-clipboard' big={true}/>
                     <span className="visually-hidden">view</span>
                   </a>
                 </div>
-                <ul className="actions inline">
-                  <li>
-                    <a onClick={this.handleGeneratePassword} className="password-generate button-icon button">
-                      <Icon name='magic-wand' big={true}/>
-                      <span className="visually-hidden">generate</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      onClick={this.handleCopyPassword}
-                      className={`copy-to-clipboard button button-icon`}>
-                      <Icon name='copy-to-clipboard' big={true}/>
-                      <span className="visually-hidden">view</span>
-                    </a>
-                  </li>
-                </ul>
-                <div className={`password-complexity ${passwordStrength.id}`}>
-                  <span className="progress">
-                    <span className={`progress-bar ${passwordStrength.id}`} />
-                  </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>
+                <PasswordComplexity entropy={passwordEntropy}/>
               </div>
 
-              <br/>
-
               <Tabs activeTabName={this.state.generator.name}>
                 {this.generators.map(generator =>
                   <Tab
@@ -274,8 +230,8 @@ class GenerateResourcePassword extends Component {
               </Tabs>
             </div>
             <div className="submit-wrapper clearfix">
-              <FormSubmitButton value={this.translate("Apply")} disabled={this.state.processing || this.isPasswordEmpty()} processing={this.state.processing}/>
               <FormCancelButton disabled={this.state.processing} onClick={this.handleClose}/>
+              <FormSubmitButton value={this.translate("Apply")} disabled={this.state.processing || this.isPasswordEmpty()} processing={this.state.processing}/>
             </div>
           </form>
         </DialogWrapper>

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/GenerateResourcePassword.test.stories.js

@@ -16,6 +16,7 @@ import AppContext from "../../../contexts/AppContext";
 import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import GenerateResourcePassword from "./GenerateResourcePassword";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -55,13 +56,12 @@ Initial.args = {
             {
               "name": "lower",
               "label": "a-z",
-              "characters": "abcdefghijklmnopqrstuvwxyz",
+              "characters": "abcdefghijklmnopqrstuvwxyz"
             },
             {
               "name": "digit",
               "label": "0-9",
-              "characters": "0123456789",
-              "required": true,
+              "characters": "0123456789"
             },
             {
               "name": "parenthesis",
@@ -87,11 +87,6 @@ Initial.args = {
               "name": "emoji",
               "label": "😘",
               "characters": "😀😃😄😁😆😅😂🤣🥲☺️😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓😎🥸🤩🥳😏😒😞😔😟😕🙁☹️😣😖😫😩🥺😢😭😤😠😡🤬🤯😳🥵🥶😱😨😰😥😓🤗🤔🤭🤫🤥😶😐😑😬🙄😯😦😧😮😲🥱😴🤤😪😵🤐🥴🤢🤮🤧😷🤒🤕🤑🤠😈👿👹👺🤡💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾"
-            },
-            {
-              "name": "ascii",
-              "label": "ascii",
-              "characters": "%&¡¢£¤¥¦§¨©ª«¬®¯°±²³µ¶·¸¹º»¼½¾¿ÀÁ ÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿŒœŠšŸƒ—„†‡•…‰€™"
             }
           ],
         },
@@ -108,5 +103,9 @@ Initial.args = {
         }
       ]
     }
+  },
+  onClose: () => {},
+  context: {
+    port: new MockPort()
   }
 };

package/src/react-extension/components/ResourceTag/DeleteResourceTag/DeleteResourceTag.js

@@ -94,11 +94,9 @@ class DeleteResourceTag extends Component {
 
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -134,8 +132,8 @@ class DeleteResourceTag extends Component {
             <p><Trans>Warning: Once the tag is deleted, it’ll be removed permanently and will not be recoverable.</Trans></p>
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Delete")} warning={true}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick}/>
+            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Delete")} warning={true}/>
           </div>
         </form>
       </DialogWrapper>

package/src/react-extension/components/ResourceTag/DeleteResourceTag/DeleteResourceTag.test.js

@@ -58,7 +58,7 @@ describe("See the Delete Tag Dialog", () => {
       expect(page.tagDelete.tagName.textContent).toBe(context.tagToDelete.slug);
 
       // Save button exists
-      expect(page.tagDelete.saveButton.value).toBe("Delete");
+      expect(page.tagDelete.saveButton.textContent).toBe("Delete");
 
       // Cancel button exists
       expect(page.tagDelete.cancelButton.textContent).toBe("Cancel");

package/src/react-extension/components/ResourceTag/DeleteResourceTag/DeleteResourceTag.test.page.js

@@ -122,14 +122,14 @@ class TagDeletePageObject {
    * Returns the save button element
    */
   get saveButton() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**
    * Returns the save button processing element
    */
   get saveButtonProcessing() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"].processing');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"].processing');
   }
 
   /**

package/src/react-extension/components/ResourceTag/DeleteResourceTag/DeleteResourceTag.test.stories.js

@@ -3,6 +3,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteResourceTag from "./DeleteResourceTag";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -14,7 +15,9 @@ const defaultContext = {
   tagToDelete: {
     id: 1,
     slug: "apache"
-  }
+  },
+  port: new MockPort(),
+  setContext: () => {}
 };
 
 
@@ -40,5 +43,6 @@ Initial.argTypes = {
     control: {
       type: 'object'
     }
-  }
+  },
+  onClose: () => {}
 };

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.js

@@ -191,11 +191,9 @@ class EditResourceTag extends Component {
       // Unexpected error occurred.
       console.error(error);
       const errorDialogProps = {
-        title: this.translate("There was an unexpected error..."),
-        message: error.message
+        error: error
       };
-      this.props.context.setContext({errorDialogProps});
-      this.props.dialogContext.open(NotifyError);
+      this.props.dialogContext.open(NotifyError, errorDialogProps);
     }
   }
 
@@ -279,8 +277,8 @@ class EditResourceTag extends Component {
             </div>
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick} />
+            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
           </div>
         </form>
       </DialogWrapper>

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.test.js

@@ -58,7 +58,7 @@ describe("See the Edit Tag Dialog", () => {
       expect(page.tagEdit.tagName.value).toBe(context.tagToEdit.slug);
 
       // Save button exists
-      expect(page.tagEdit.saveButton.value).toBe("Save");
+      expect(page.tagEdit.saveButton.textContent).toBe("Save");
 
       // Cancel button exists
       expect(page.tagEdit.cancelButton.textContent).toBe("Cancel");

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.test.page.js

@@ -129,14 +129,14 @@ class TagEditPageObject {
    * Returns the save button element
    */
   get saveButton() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**
    * Returns the save button processing element
    */
   get saveButtonProcessing() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"].processing');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"].processing');
   }
 
   /**

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.test.stories.js

@@ -3,6 +3,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import EditResourceTag from "./EditResourceTag";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -14,7 +15,9 @@ const defaultContext = {
   tagToEdit: {
     id: 1,
     slug: "apache"
-  }
+  },
+  setContext: () => {},
+  port: new MockPort()
 };
 
 
@@ -32,7 +35,8 @@ Template.propTypes = {
 
 export const Initial = Template.bind({});
 Initial.args = {
-  context: defaultContext
+  context: defaultContext,
+  onClose: () => {}
 };
 
 Initial.argTypes = {

package/src/react-extension/components/ResourceTag/EditResourceTags/EditResourceTags.js

@@ -13,7 +13,7 @@
  */
 import React from "react";
 import PropTypes from "prop-types";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withAppContext} from "../../../contexts/AppContext";
 import Autocomplete from "../../Common/Autocomplete/Autocomplete";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
@@ -528,24 +528,23 @@ class EditResourceTags extends React.Component {
             />
             }
           </div>
-          {!this.state.errorMessage && this.props.isOwner &&
-          <div className="message notice">
-            <Icon baseline={true} name="info-circle"/>
-            <strong><Trans>Pro tip</Trans>:</strong> <Trans>Tags starting with # are shared with all users who have access. Separate tags using commas.</Trans>
-          </div>
-          }
           {this.state.errorMessage &&
           <div className="error-message">{this.state.errorMessage}</div>
           }
         </div>
         <div className="actions">
-          <a className={`button tag-editor-submit ${this.hasAllInputDisabled() ? "primary processing disabled" : ""}`}
+          <a className={`button cancel tag-editor-cancel ${this.hasAllInputDisabled() ? "disabled" : ""}`} role="button"
+            onClick={this.props.toggleInputTagEditor}><span><Trans>Cancel</Trans></span></a>
+          <a className={`button primary tag-editor-submit ${this.hasAllInputDisabled() ? "processing disabled" : ""}`}
             onClick={this.handleOnSubmit}>
             <span><Trans>Save</Trans></span>
           </a>
-          <a className={`button cancel tag-editor-cancel ${this.hasAllInputDisabled() ? "disabled" : ""}`} role="button"
-            onClick={this.props.toggleInputTagEditor}><span><Trans>Cancel</Trans></span></a>
         </div>
+        {!this.state.errorMessage && this.props.isOwner &&
+          <div className="message notice">
+            <strong><Trans>Pro tip</Trans>:</strong> <Trans>Tags starting with # are shared with all users who have access. Separate tags using commas.</Trans>
+          </div>
+        }
       </div>
     );
   }

package/src/react-extension/components/ResourceTag/EditResourceTags/EditResourceTagsItemViewer.js

@@ -16,6 +16,7 @@ import PropTypes from "prop-types";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import {withRouter} from "react-router-dom";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../shared/components/Icons/Icon";
 
 class EditResourceTagsItemViewer extends React.Component {
   /**
@@ -75,12 +76,13 @@ class EditResourceTagsItemViewer extends React.Component {
       <div>
         {isLoading &&
         <div className="processing-wrapper">
+          <Icon name="spinner"/>
           <span className="processing-text"><Trans>Retrieving tags</Trans></span>
         </div>
         }
         {!isLoading && this.props.tags.length === 0 &&
-        <em className="empty-content"
-          onClick={this.props.toggleInputTagEditor}><Trans>There is no tag, click here to add one</Trans></em>
+        <span className="empty-content"
+          onClick={this.props.toggleInputTagEditor}><Trans>There is no tag, click here to add one</Trans></span>
         }
         {!isLoading && this.props.tags.length > 0 &&
         <ul className="tags tags-list" onClick={this.props.toggleInputTagEditor}>

package/src/react-extension/components/Share/ShareDialog.js

@@ -184,11 +184,9 @@ class ShareDialog extends Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -491,8 +489,8 @@ class ShareDialog extends Component {
             />
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton disabled={this.hasSubmitDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleClose} />
+            <FormSubmitButton disabled={this.hasSubmitDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
           </div>
         </form>
       </DialogWrapper>