passbolt-styleguide 3.3.3 → 3.4.0-alpha2

package/src/react-extension/components/ResourceComment/AddResourceComment/AddResourceComment.js

@@ -216,7 +216,7 @@ class AddResourceComment extends React.Component {
                   onKeyDown={this.handleEscapeKeyPressed}
                   disabled={this.state.actions.processing}>
                 </textarea>
-                <div className="message error">
+                <div className="error-message">
                   {this.state.errors.isEmpty && this.translate("A comment is required.")}
                   {this.state.errors.isTooLong && this.translate("A comment must be less than 256 characters")}
                   {this.state.errors.technicalError}

package/src/react-extension/components/ResourceComment/AddResourceComment/AddResourceComment.test.page.object.js

@@ -59,7 +59,7 @@ export default class AddResourceCommentPageObject {
    * Returns the error message element
    */
   get errorMessage() {
-    return this.form.querySelector('.message.error');
+    return this.form.querySelector('.error-message');
   }
 
   /**

package/src/react-extension/components/ResourceComment/AddResourceComment/AddResourceComment.test.stories.js

@@ -1,8 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import AddResourceComment from "./AddResourceComment";
 
 
@@ -24,19 +22,15 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <div className="panel aside">
-          <div className="comments">
-            <Route component={routerProps => <AddResourceComment {...args} {...routerProps}/>}></Route>
-          </div>
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <div className="panel aside">
+        <div className="comments">
+          <Route component={routerProps => <AddResourceComment {...args} {...routerProps}/>}></Route>
         </div>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+      </div>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
-

package/src/react-extension/components/ResourceComment/ConfirmResourceCommentDeletion/ConfirmResourceCommentDeletion.test.stories.js

@@ -1,8 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import ConfirmResourceCommentDeletion from "./ConfirmResourceCommentDeletion";
 
 
@@ -24,15 +22,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <ConfirmResourceCommentDeletion {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ConfirmResourceCommentDeletion {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
-

package/src/react-extension/components/ResourceComment/DisplayResourceCommentList/DisplayResourceCommentList.test.stories.js

@@ -1,8 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayResourceCommentList from "./DisplayResourceCommentList";
 
 
@@ -120,18 +118,15 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <div className="panel aside">
-          <div className="comments">
-            <Route component={routerProps => <DisplayResourceCommentList {...args} {...routerProps}/>}></Route>
-          </div>
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <div className="panel aside">
+        <div className="comments">
+          <Route component={routerProps => <DisplayResourceCommentList {...args} {...routerProps}/>}></Route>
         </div>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+      </div>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
@@ -141,4 +136,3 @@ Initial.args = {
   },
   onFetch: () => {}
 };
-

package/src/react-extension/components/ResourceDescription/EditResourceDescription/EditResourceDescription.js

@@ -152,7 +152,7 @@ class EditResourceDescription extends React.Component {
       await this.updateResource();
       await this.props.actionFeedbackContext.displaySuccess(this.translate("The description has been updated successfully"));
       await this.props.resourceWorkspaceContext.onResourceDescriptionEdited();
-      this.close();
+      this.close(this.state.description);
     } catch (error) {
       // It can happen when the user has closed the passphrase entry dialog by instance.
       if (error.name === "UserAbortsOperationError") {
@@ -225,10 +225,11 @@ class EditResourceDescription extends React.Component {
    */
   /**
    * Toggle the editor back to display mode
-   * @returns {string} send back the updated description and plaintextDto to avoid potential unnecessary decrypt round
+   * @param description The description to display
+   * @returns {string} Send back the updated description and plaintextDto to avoid potential unnecessary decrypt round
    */
-  close() {
-    return this.props.onClose(this.description, this.plaintextDto);
+  close(description) {
+    return this.props.onClose(description, this.plaintextDto);
   }
 
   /**
@@ -269,7 +270,7 @@ class EditResourceDescription extends React.Component {
     if (this.elementRef.current.contains(event.target) || this.state.processing) {
       return;
     }
-    this.close();
+    this.close(this.props.description);
   }
 
   /**
@@ -289,7 +290,7 @@ class EditResourceDescription extends React.Component {
     if (event.keyCode === 27) {
       // Stop the event propagation in order to avoid a parent component to react to this ESC event.
       event.stopPropagation();
-      this.close();
+      this.close(this.props.description);
     }
   }
 
@@ -297,7 +298,7 @@ class EditResourceDescription extends React.Component {
    * On cancel button click
    */
   handleCancel() {
-    this.close();
+    this.close(this.props.description);
   }
 
   /**
@@ -379,7 +380,7 @@ class EditResourceDescription extends React.Component {
               disabled={this.hasAllInputDisabled()} autoComplete="off"/>
           </div>
           {this.state.error &&
-          <div className="feedbacks message error">{this.state.error}</div>
+          <div className="feedbacks error-message">{this.state.error}</div>
           }
           <div className="actions">
             <a className={`button description-editor-submit ${this.hasAllInputDisabled() ? "primary processing disabled" : ""}`}

package/src/react-extension/components/ResourceDescription/EditResourceDescription/EditResourceDescription.test.page.js

@@ -42,7 +42,7 @@ export default class EditResourceDescriptionPageObject {
    * Returns the error message content
    */
   get errorMessage() {
-    return this._container.querySelector('.feedbacks.message.error').textContent;
+    return this._container.querySelector('.feedbacks.error-message').textContent;
   }
 
   /**

package/src/react-extension/components/ResourceDescription/EditResourceDescription/EditResourceDescription.test.stories.js

@@ -1,8 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import EditResourceDescription from "./EditResourceDescription";
 import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
 import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
@@ -32,18 +30,15 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <div className="panel aside">
-          <div className="comments">
-            <Route component={routerProps => <EditResourceDescription {...args} {...routerProps}/>}></Route>
-          </div>
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <div className="panel aside">
+        <div className="comments">
+          <Route component={routerProps => <EditResourceDescription {...args} {...routerProps}/>}></Route>
         </div>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+      </div>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
@@ -52,5 +47,3 @@ Initial.args = {
     "resource_type_id": "669f8c64-242a-59fb-92fc-81f660975fd3"
   }
 };
-
-

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsActivity.test.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
-import "../../../../css/themes/default/ext_app.css";
 import UserSettings from "../../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 import DisplayResourceDetailsActivity from "./DisplayResourceDetailsActivity";

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsDescription.js

@@ -82,7 +82,7 @@ class DisplayResourceDetailsDescription extends React.Component {
     if (this.isResourceDescriptionEncrypted()) {
       this.decryptSecret();
     } else {
-      this.setState({description: this.resource.description});
+      this.setState({description: this.resource.description, error: false});
     }
   }
 

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsDescription.test.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
-import "../../../../css/themes/default/ext_app.css";
 import UserSettings from "../../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 import DisplayResourceDetailsDescription from "./DisplayResourceDetailsDescription";

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsTag.test.js

@@ -246,7 +246,7 @@ describe("See tags", () => {
       await page.passwordSidebarTagSection.input(page.tagEditor.component, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
 
       await page.passwordSidebarTagSection.click(page.tagEditor.saveButton);
-      expect(page.tagEditor.errorMessage).toBe("This tag can't be added, the length cannot exceeds 128");
+      expect(page.tagEditor.errorMessage).toBe("This tag can't be added, the length cannot exceed 128");
     });
 
     it('Trim tag', async() => {

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsTag.test.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
-import "../../../../css/themes/default/ext_app.css";
 import UserSettings from "../../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 import DisplayResourceDetailsTag from "./DisplayResourceDetailsTag";

package/src/react-extension/components/ResourceFolder/CreateResourceFolder/CreateResourceFolder.js

@@ -290,7 +290,7 @@ class CreateResourceFolder extends Component {
         onClose={this.handleClose} disabled={this.hasAllInputDisabled()}>
         <form className="folder-create-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
-            <div className="input text required">
+            <div className={`input text required ${this.state.nameError ? "error" : ""}`}>
               <label htmlFor="folder-name-input"><Trans>Name</Trans></label>
               <input id="folder-name-input" name="name"
                 ref={this.nameRef}
@@ -301,7 +301,7 @@ class CreateResourceFolder extends Component {
                 autoComplete='off' autoFocus={true}
               />
               {this.state.nameError &&
-              <div className="error message">{this.state.nameError}</div>
+              <div className="error-message">{this.state.nameError}</div>
               }
             </div>
           </div>

package/src/react-extension/components/ResourceFolder/CreateResourceFolder/CreateResourceFolder.test.page.js

@@ -47,7 +47,7 @@ export default class CreateResourceFolderPage {
    * Returns true it the folder name is invalid
    */
   get hasInvalidName() {
-    return Boolean(this._page.container.querySelector('.error.message'));
+    return Boolean(this._page.container.querySelector('.error-message'));
   }
 
   /**

package/src/react-extension/components/ResourceFolder/CreateResourceFolder/CreateResourceFolder.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import CreateResourceFolder from "./CreateResourceFolder";
 
 
@@ -15,5 +14,3 @@ const Template = args =>
   </MemoryRouter>;
 
 export const Initial = Template.bind({});
-
-

package/src/react-extension/components/ResourceFolder/DefineResourceFolderMoveStrategy/DefineResourceFolderMoveStrategy.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DefineResourceFolderMoveStrategy from "./DefineResourceFolderMoveStrategy";
@@ -47,8 +46,3 @@ Initial.argTypes = {
     }
   }
 };
-
-
-
-
-

package/src/react-extension/components/ResourceFolder/DeleteResourceFolder/DeleteResourceFolder.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteResourceFolder from "./DeleteResourceFolder";
@@ -42,7 +41,3 @@ Initial.argTypes = {
     }
   }
 };
-
-
-
-

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.js

@@ -331,7 +331,7 @@ class RenameResourceFolder extends Component {
                 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>

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.test.page.js

@@ -51,7 +51,7 @@ export default class RenameResourceFolderPage {
    * Returns true it the folder name is invalid
    */
   get hasInvalidName() {
-    return Boolean(this._page.container.querySelector('.error.message'));
+    return Boolean(this._page.container.querySelector('.error-message'));
   }
 
   /**

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import RenameResourceFolder from "./RenameResourceFolder";
@@ -30,7 +29,6 @@ Template.propTypes = {
 };
 
 
-
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultContext
@@ -43,8 +41,3 @@ Initial.argTypes = {
     }
   }
 };
-
-
-
-
-

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsActivity.test.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
-import "../../../../css/themes/default/ext_app.css";
 import UserSettings from "../../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 import DisplayResourceFolderDetailsActivity from "./DisplayResourceFolderDetailsActivity";
@@ -67,4 +66,3 @@ Initial.args = {
     }
   }
 };
-

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsInformation.test.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
-import "../../../../css/themes/default/ext_app.css";
 import DisplayResourceFolderDetailsInformation from "./DisplayResourceFolderDetailsInformation";
 
 
@@ -50,4 +49,3 @@ Initial.args = {
     }
   }
 };
-

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsPermissions.test.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
-import "../../../../css/themes/default/ext_app.css";
 import UserSettings from "../../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 import DisplayResourceFolderDetailsPermissions from "./DisplayResourceFolderDetailsPermissions";
@@ -72,4 +71,3 @@ Initial.args = {
     }
   }
 };
-

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

@@ -0,0 +1,150 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 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) 2020 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 React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+
+class ConfigurePassphraseGenerator extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getDefaultState(props);
+    this.initEventHandlers();
+  }
+
+  getDefaultState(props) {
+    return {
+      configuration: JSON.parse(JSON.stringify(props.configuration)),
+    };
+  }
+
+  initEventHandlers() {
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleWordCountChange = this.handleWordCountChange.bind(this);
+  }
+
+  /**
+   * Handle form input change.
+   * @params {ReactEvent} The react event.
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+    const configuration = {...this.state.configuration};
+    configuration.default_options[name] = value;
+
+    this.setState({configuration});
+    this.props.onChanged(configuration);
+  }
+
+  /**
+   * Handle form word count input change.
+   * @params {ReactEvent} The react event.
+   */
+  handleWordCountChange(event) {
+    const configuration = {...this.state.configuration};
+    configuration.default_options.word_count = event.target.value;
+
+    this.setState({configuration});
+    this.props.onChanged(configuration);
+  }
+
+  /**
+   * Returns the current number of words option
+   * @return {{default: number, min: number, max: number}}
+   */
+  get numberOfWords() {
+    const {default_options} = this.state.configuration;
+    return {
+      default: default_options.word_count,
+      min: default_options.min_word,
+      max: default_options.max_word,
+    };
+  }
+
+  /**
+   * Returns the current separator option
+   * @returns {string}
+   */
+  get separator() {
+    return this.state.configuration.default_options.separator;
+  }
+
+  /**
+   * Returns the current word case option
+   * @returns {string}
+   */
+  get wordCase() {
+    return this.state.configuration.default_options.word_case;
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <>
+        <div className="input text">
+          <label htmlFor="configure-passphrase-generator-form-word-count"><Trans>Number of words</Trans></label>
+          <div className="slider">
+            <input
+              name="word_count"
+              min={this.numberOfWords.min}
+              max={this.numberOfWords.max}
+              value={this.numberOfWords.default}
+              type="range"
+              onChange={this.handleInputChange}/>
+            <input
+              type="number"
+              id="configure-passphrase-generator-form-word-count"
+              name="word_count"
+              min={this.numberOfWords.min} max={this.numberOfWords.max}
+              value={this.numberOfWords.default}
+              onChange={this.handleWordCountChange}/>
+          </div>
+        </div>
+        <div className="input text">
+          <label htmlFor="configure-passphrase-generator-form-words-separator"><Trans>Words separator</Trans></label>
+          <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">
+          <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>
+        </div>
+      </>
+    );
+  }
+}
+
+ConfigurePassphraseGenerator.propTypes = {
+  configuration: PropTypes.object, // The default generator configuration
+  onChanged: PropTypes.func, // Called whenever the generator configuration changed
+  t: PropTypes.func, // The translation function
+};
+
+export default withTranslation('common')(ConfigurePassphraseGenerator);

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

@@ -0,0 +1,30 @@
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import ConfigurePassphraseGenerator from "./ConfigurePassphraseGenerator";
+
+
+export default {
+  title: 'Passbolt/ResourcePassword/ConfigurePassphraseGenerator',
+  component: ConfigurePassphraseGenerator
+};
+
+
+const Template = args =>
+  <MemoryRouter initialEntries={['/']}>
+    <Route component={routerProps => <ConfigurePassphraseGenerator {...args} {...routerProps}/>}></Route>
+  </MemoryRouter>;
+
+export const Initial = Template.bind({});
+Initial.args = {
+  configuration: {
+    name: "Passphrase",
+    type: "passphrase",
+    default_options: {
+      word_count: 8,
+      word_case: "lowercase",
+      min_word: 4,
+      max_word: 40,
+      separator: " "
+    },
+  }
+};