passbolt-styleguide 3.3.2 → 3.4.0-alpha1

package/src/react-quickaccess/components/FilterResourcesByTagPage/FilterResourcesByTagPage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import FilterResourcesByTagPage from "./FilterResourcesByTagPage";
 import AppContext from "../../contexts/AppContext";
@@ -24,13 +23,16 @@ Template.propTypes = {
   initialEntries: PropTypes.array
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const InitialLoad = Template.bind({});
 InitialLoad.args = {
   context: defaultAppContext(),
   initialEntries: ['/']
 };
+InitialLoad.parameters = parameters;
 
 const contextNoTag = {
   port: {
@@ -42,6 +44,7 @@ NoTags.args = {
   context: defaultAppContext(contextNoTag),
   initialEntries: ['/']
 };
+NoTags.parameters = parameters;
 
 const contextResourcesTags = {
   port: {
@@ -52,4 +55,5 @@ export const TagsResourcesMatched = Template.bind({});
 TagsResourcesMatched.args = {
   context: defaultAppContext(contextResourcesTags),
   initialEntries: ['/']
-};
+};
+TagsResourcesMatched.parameters = parameters;

package/src/react-quickaccess/components/Header/Header.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import Header from "./Header";
 import AppContext from "../../contexts/AppContext";
@@ -23,14 +22,12 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
-
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
   logoutSuccessCallback: () => {}
 };
 
-
-
-
+Initial.parameters = {
+  css: "ext_quickaccess"
+};

package/src/react-quickaccess/components/HomePage/HomePage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import HomePage from "./HomePage";
 import AppContext from "../../contexts/AppContext";
@@ -23,10 +22,15 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
+const parameters = {
+  css: "ext_quickaccess"
+};
+
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext()
 };
+Initial.parameters = parameters;
 
 const contextNoResource = {
   storage: {
@@ -38,10 +42,11 @@ const contextNoResource = {
     }
   },
 };
-export const noResource = Template.bind({});
-noResource.args = {
+export const NoResource = Template.bind({});
+NoResource.args = {
   context: defaultAppContext(contextNoResource)
 };
+NoResource.parameters = parameters;
 
 const contextSearchNotFoundResource = {
   storage: {
@@ -54,10 +59,11 @@ const contextSearchNotFoundResource = {
   },
   search: "apache",
 };
-export const noFoundResource = Template.bind({});
-noFoundResource.args = {
+export const NoFoundResource = Template.bind({});
+NoFoundResource.args = {
   context: defaultAppContext(contextSearchNotFoundResource)
 };
+NoFoundResource.parameters = parameters;
 
 const contextSearchResources = {
   storage: {
@@ -74,6 +80,7 @@ export const SearchResources = Template.bind({});
 SearchResources.args = {
   context: defaultAppContext(contextSearchResources)
 };
+SearchResources.parameters = parameters;
 
 const contextResources = {
   storage: {
@@ -89,7 +96,4 @@ export const SuggestedResources = Template.bind({});
 SuggestedResources.args = {
   context: defaultAppContext(contextResources)
 };
-
-
-
-
+SuggestedResources.parameters = parameters;

package/src/react-quickaccess/components/LoginPage/LoginPage.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import {withRouter} from "react-router-dom";
 import {withAppContext} from "../../contexts/AppContext";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../react-extension/components/Common/Icons/Icon";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -19,6 +20,7 @@ class LoginPage extends React.Component {
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleInputFocus = this.handleInputFocus.bind(this);
     this.handleInputBlur = this.handleInputBlur.bind(this);
+    this.handleToggleObfuscate = this.handleToggleObfuscate.bind(this);
   }
 
   initState() {
@@ -28,7 +30,8 @@ class LoginPage extends React.Component {
       passphrase: "",
       rememberMe: false,
       passphraseStyle: {},
-      securityTokenStyle: {}
+      securityTokenStyle: {},
+      isObfuscated: true, // True if the passphrase should not be visible
     };
   }
 
@@ -105,6 +108,20 @@ class LoginPage extends React.Component {
     });
   }
 
+  /**
+   * Whenever one wants to toggle the obfuscated mode
+   */
+  handleToggleObfuscate() {
+    this.toggleObfuscate();
+  }
+
+  /**
+   * Toggle the obfuscate mode of the passphrase view
+   */
+  toggleObfuscate() {
+    this.setState({isObfuscated: !this.state.isObfuscated});
+  }
+
   render() {
     return (
       <div className="quickaccess-login">
@@ -117,10 +134,29 @@ class LoginPage extends React.Component {
               </div>
               <div className="input text passphrase required">
                 <label htmlFor="passphrase"><Trans>Passphrase</Trans></label>
-                <input type="password" name="passphrase" placeholder={this.translate('passphrase')} id="passphrase" autoFocus ref={this.passphraseInputRef}
-                  value={this.state.passphrase} onChange={this.handleInputChange} onFocus={this.handleInputFocus} onBlur={this.handleInputBlur}
-                  disabled={this.state.processing} style={this.state.passphraseStyle} autoComplete="off"/>
-                <span className="security-token" style={this.state.securityTokenStyle}>{this.props.context.userSettings.getSecurityTokenCode()}</span>
+                <div className="password with-token">
+                  <input
+                    type={this.state.isObfuscated ? "password" : "text"}
+                    name="passphrase" placeholder={this.translate('passphrase')}
+                    id="passphrase"
+                    autoFocus
+                    ref={this.passphraseInputRef}
+                    value={this.state.passphrase}
+                    onChange={this.handleInputChange}
+                    onFocus={this.handleInputFocus}
+                    onBlur={this.handleInputBlur}
+                    disabled={this.state.processing}
+                    style={this.state.passphraseStyle}
+                    autoComplete="off"/>
+                  <a
+                    className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
+                    role="button"
+                    onClick={this.handleToggleObfuscate}>
+                    <Icon name="eye-open"/>
+                    <span className="visually-hidden">view</span>
+                  </a>
+                  <span className="security-token" style={this.state.securityTokenStyle}>{this.props.context.userSettings.getSecurityTokenCode()}</span>
+                </div>
                 {this.state.error &&
                 <div className="error-message">{this.state.error}</div>
                 }

package/src/react-quickaccess/components/LoginPage/LoginPage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import LoginPage from "./LoginPage";
@@ -23,13 +22,12 @@ Template.propTypes = {
 };
 
 
-
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
   loginSuccessCallback: () => {},
   canRememberMe: true,
 };
-
-
-
+Initial.parameters = {
+  css: "ext_quickaccess"
+};

package/src/react-quickaccess/components/MoreFiltersPage/MoreFiltersPage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import MoreFiltersPage from "./MoreFiltersPage";
 
 export default {
@@ -14,10 +13,9 @@ const Template = () =>
   </MemoryRouter>;
 
 
-
 export const Initial = Template.bind({});
 Initial.args = {
 };
-
-
-
+Initial.parameters = {
+  css: "ext_quickaccess"
+};

package/src/react-quickaccess/components/PassphraseDialog/PassphraseDialog.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import PassphraseDialog from "./PassphraseDialog";
@@ -22,7 +21,9 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const Initial = Template.bind({});
 Initial.args = {
@@ -31,6 +32,7 @@ Initial.args = {
   classname: "",
   onComplete: () => {},
 };
+Initial.parameters = parameters;
 
 const contextRequestError = {
   port: {
@@ -44,6 +46,4 @@ ErrorPassphrase.args = {
   classname: "",
   onComplete: () => {},
 };
-
-
-
+ErrorPassphrase.parameters = parameters;

package/src/react-quickaccess/components/ResourceAutoSave/SaveResource.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import SaveResource from "./SaveResource";
@@ -23,12 +22,15 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
 };
+Initial.parameters = parameters;
 
 const contextMock = {
   port: {
@@ -39,6 +41,4 @@ export const SaveResourceFromTab = Template.bind({});
 SaveResourceFromTab.args = {
   context: defaultAppContext(contextMock)
 };
-
-
-
+SaveResourceFromTab.parameters = parameters;

package/src/react-quickaccess/components/ResourceCreatePage/ResourceCreatePage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import ResourceCreatePage from "./ResourceCreatePage";
@@ -22,12 +21,15 @@ Template.propTypes = {
   context: PropTypes.object,
 };
 
-
+const parameters = {
+  css: "ext_quickaccess"
+};
 
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
 };
+Initial.parameters = parameters;
 
 const contextMock = {
   port: {
@@ -38,6 +40,4 @@ export const CreateResourceFromTab = Template.bind({});
 CreateResourceFromTab.args = {
   context: defaultAppContext(contextMock)
 };
-
-
-
+CreateResourceFromTab.parameters = parameters;

package/src/react-quickaccess/components/ResourceViewPage/ResourceViewPage.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import ResourceViewPage from "./ResourceViewPage";
 import AppContext from "../../contexts/AppContext";
@@ -27,4 +26,7 @@ export const ResourceView = Template.bind({});
 ResourceView.args = {
   context: defaultAppContext(),
   initialEntries: ['/8e3874ae-4b40-590b-968a-418f704b9d9a']
-};
+};
+ResourceView.parameters = {
+  css: "ext_quickaccess"
+};

package/src/react-quickaccess/components/Search/Search.test.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../css/themes/default/ext_quickaccess.css";
 import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import Search from "./Search";
@@ -23,11 +22,10 @@ Template.propTypes = {
 };
 
 
-
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
 };
-
-
-
+Initial.parameters = {
+  css: "ext_quickaccess"
+};

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

@@ -15,7 +15,6 @@
 import React, {useEffect} from "react";
 import AskInFormMenuDisplay from "./AskInFormMenuDisplay";
 import ReactDOM from "react-dom";
-import "../../../css/themes/default/ext_in_form_cta.css";
 import AppContext from "../../contexts/AppContext";
 
 export default {
@@ -57,7 +56,9 @@ const Template = ({context}) =>
     <InFormAnchor context={context}/>
   </div>;
 
-
+const parameters = {
+  css: "ext_in_form_cta"
+};
 
 export const Inactive = Template.bind({});
 Inactive.args = {
@@ -67,6 +68,7 @@ Inactive.args = {
     }
   }
 };
+Inactive.parameters = parameters;
 
 export const ActiveWithNoSuggestion = Template.bind({});
 ActiveWithNoSuggestion.args = {
@@ -76,6 +78,7 @@ ActiveWithNoSuggestion.args = {
     }
   }
 };
+ActiveWithNoSuggestion.parameters = parameters;
 
 export const ActiveWithOneSuggestion = Template.bind({});
 ActiveWithOneSuggestion.args = {
@@ -85,3 +88,4 @@ ActiveWithOneSuggestion.args = {
     }
   }
 };
+ActiveWithOneSuggestion.parameters = parameters;

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

@@ -15,7 +15,6 @@
 import React from "react";
 import DisplayInFormMenu from "./DisplayInFormMenu";
 import DisplayInFormMenuItem from "./DisplayInFormMenuItem";
-import "../../../css/themes/default/ext_in_form_menu.css";
 
 export default {
   title: 'Passbolt/WebIntegration/InFormMenu',
@@ -186,6 +185,14 @@ const TemplateWithScroll = () => {
   );
 }
 
+const parameters = {
+  css: "ext_in_form_menu"
+};
+
 export const AllMenuItems = TemplateAllItemsMenu.bind({});
 export const NoScrollItems = TemplateNoScroll.bind({});
-export const ScrollableMenu = TemplateWithScroll.bind({});
+export const ScrollableMenu = TemplateWithScroll.bind({});
+
+AllMenuItems.parameters = parameters;
+NoScrollItems.parameters = parameters;
+ScrollableMenu.parameters = parameters;

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

@@ -146,10 +146,10 @@ class InFormCallToActionField {
     let y = 0;
     let currentElement = this.field;
     const {height, width} = this.field.getBoundingClientRect();
-    const {top: topBody, left: leftBody} = document.body.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 ) ) {
+    while(currentElement && !isNaN(currentElement.offsetLeft) && !isNaN(currentElement.offsetTop)) {
       x += currentElement.offsetLeft - currentElement.scrollLeft;
       y += currentElement.offsetTop - currentElement.scrollTop;
       currentElement = currentElement.offsetParent;
@@ -157,7 +157,7 @@ class InFormCallToActionField {
     // Then we add the body offset (notably in case of window scroll) + some local adjustments (margin / vertical aligment )
     x = x + leftBody + width - 25;
     y = y + topBody + Math.floor(height / 2) - 9; // Calculate the middle position of the input, 9 is the half of the iframe height
-    return { top: y, left: x };
+    return {top: y, left: x};
   }
 
 

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

@@ -78,16 +78,22 @@ class InFormManager {
   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);
-    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);
-    });
+    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 = [];
+    }
   }
 
   /**

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

@@ -97,7 +97,7 @@ class InFormMenuField {
     let y = 0;
     let currentElement = this.field;
     const {height, width} = this.field.getBoundingClientRect();
-    const {top: topBody, left: leftBody} = document.body.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 ) ) {

package/src/shared/lib/Browser/detectBrowserName.js

@@ -44,9 +44,10 @@ export function detectBrowserName() {
   } else if (userAgent.indexOf("trident") > -1) {
     browserName = BROWSER_NAMES.INTERNET_EXPLORER;
     // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
-  } else if (userAgent.indexOf("edge") > -1) {
+  } else if (userAgent.indexOf("edg") > -1) {
     browserName = BROWSER_NAMES.EDGE;
     // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+    // 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34'
   } else if (userAgent.indexOf("chrome") > -1) {
     browserName = BROWSER_NAMES.CHROME;
     // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"