passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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";
@@ -15,7 +14,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><Header {...args} {...routerProps}/></div>}></Route>
+      <Route component={routerProps => <div className="container quickaccess"><Header {...args} {...routerProps}/></div>}></Route>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -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.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {Link} from "react-router-dom";
+import {Link, withRouter} from "react-router-dom";
 import {withAppContext} from "../../contexts/AppContext";
 import SimpleBar from "../SimpleBar/SimpleBar";
 import canSuggestUrl from "./canSuggestUrl";
@@ -28,12 +28,14 @@ class HomePage extends React.Component {
   initEventHandlers() {
     this.handleStorageChange = this.handleStorageChange.bind(this);
     this.props.context.storage.onChanged.addListener(this.handleStorageChange);
+    this.handleUseOnThisTabClick = this.handleUseOnThisTabClick.bind(this);
   }
 
   initState() {
     return {
       resources: null,
-      activeTabUrl: null
+      activeTabUrl: null,
+      usingOnThisTab: false
     };
   }
 
@@ -83,7 +85,7 @@ class HomePage extends React.Component {
 
   async getActiveTabUrl() {
     try {
-      const activeTabUrl = await this.props.context.port.request("passbolt.active-tab.get-url");
+      const activeTabUrl = await this.props.context.port.request("passbolt.active-tab.get-url", this.props.context.tabId);
       this.setState({activeTabUrl});
     } catch (error) {
       console.error(error);
@@ -176,6 +178,24 @@ class HomePage extends React.Component {
     return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   }
 
+  async handleUseOnThisTabClick(resource) {
+    this.setState({usingOnThisTab: true});
+    try {
+      await this.props.context.port.request('passbolt.quickaccess.use-resource-on-current-tab', resource.id, this.props.context.tabId);
+      window.close();
+    } catch (error) {
+      if (error && error.name === "UserAbortsOperationError") {
+        this.setState({usingOnThisTab: false});
+      } else {
+        console.error('An error occured', error);
+        this.setState({
+          usingOnThisTab: false,
+          useOnThisTabError: "Unable to use the password on this page. Copy and paste the information instead."
+        });
+      }
+    }
+  }
+
   render() {
     const isReady = this.state.resources !== null;
     const showSuggestedSection = !this.props.context.search.length;
@@ -214,11 +234,13 @@ class HomePage extends React.Component {
                 }
                 {(isReady && suggestedResources.length > 0) &&
                   suggestedResources.map(resource => (
-                    <li className="resource-entry" key={resource.id}>
-                      <Link to={`/data/quickaccess/resources/view/${resource.id}`}>
+                    <li className="suggested-resource-entry" key={resource.id}>
+                      <a role="button" className="resource-details" onClick={() => this.handleUseOnThisTabClick(resource)}>
                         <span className="title">{resource.name}</span>
                         <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
                         <span className="url">{resource.uri}</span>
+                      </a>
+                      <Link className="chevron-right" to={`/data/quickaccess/resources/view/${resource.id}`}>
                       </Link>
                     </li>
                   ))}
@@ -244,11 +266,15 @@ class HomePage extends React.Component {
                   }
                   {(isReady && browsedResources.length > 0) &&
                     browsedResources.map(resource => (
-                      <li className="resource-entry" key={resource.id}>
+                      <li className="browse-resource-entry" key={resource.id}>
                         <Link to={`/data/quickaccess/resources/view/${resource.id}`}>
-                          <span className="title">{resource.name}</span>
-                          <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
-                          <span className="url">{resource.uri}</span>
+                          <div className="inline-resource-entry">
+                            <div className='inline-resource-name'>
+                              <span className="title">{resource.name}</span>
+                              <span className="username"> {resource.username ? `(${resource.username})` : ""}</span>
+                            </div>
+                            <span className="url">{resource.uri}</span>
+                          </div>
                         </Link>
                       </li>
                     ))}
@@ -292,10 +318,13 @@ class HomePage extends React.Component {
             </div>
           }
         </SimpleBar>
-        <div className="submit-wrapper">
+        <div className="submit-wrapper button-after-list">
           <Link to={`/data/quickaccess/resources/create`} id="popupAction" className="button primary big full-width" role="button">
             <Trans>Create new</Trans>
           </Link>
+          {this.state.useOnThisTabError &&
+          <div className="error-message">{this.state.useOnThisTabError}</div>
+          }
         </div>
       </div>
     );
@@ -307,4 +336,4 @@ HomePage.propTypes = {
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withTranslation('common')(HomePage));
+export default withAppContext(withRouter(withTranslation('common')(HomePage)));

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";
@@ -15,7 +14,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><HomePage {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><HomePage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -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/HomePage/canSuggestUrl.js

@@ -30,8 +30,13 @@ export default function (url, suggestedUrl) {
 
   const suggestedUrlObject = parseSuggestedUrl(suggestedUrl);
 
-  // Unable to parse the suggested url.
-  if (!suggestedUrlObject) {
+  // Unable to parse the hostname of the url
+  if (!urlObject || !urlObject.hostname) {
+    return false;
+  }
+
+  // Unable to parse the suggested url or the suggested url has no hostname.
+  if (!suggestedUrlObject || !suggestedUrlObject.hostname) {
     return false;
   }
 
@@ -49,7 +54,7 @@ export default function (url, suggestedUrl) {
     }
   }
 
-  // Perfect match.
+  // Check the hostname, if the suggest url has defined it. Perfect match
   if (urlObject.hostname === suggestedUrlObject.hostname) {
     return true;
   }

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

@@ -139,4 +139,10 @@ describe("canSuggestUrl", () => {
     expect(canSuggestUrl("http://127.0.0.1", "127.0.0.1:80")).toBe(false);
     expect(canSuggestUrl("https://www.passbolt.com", "www.passbolt.com:443")).toBe(false);
   });
+
+  it("shouldn't suggest urls with no hostname to url with no hostname", () => {
+    expect(canSuggestUrl("https://no%20identified%20domain%20url.com", "no%20identified%20domain%20url")).toBe(false);
+    expect(canSuggestUrl("about:addons", "about:addons")).toBe(false);
+    expect(canSuggestUrl("about:addons", "no%20identified%20domain%20url")).toBe(false);
+  });
 });

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,29 +108,66 @@ 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">
         <div className="login-form">
           <form onSubmit={this.handleFormSubmit}>
-            <div className="input text required">
-              <label htmlFor="username"><Trans>Username</Trans></label>
-              <input className="required" maxLength="50" type="text" id="username" required="required" value={this.props.context.userSettings.username} disabled="disabled" />
-            </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} />
-              <span className="security-token" style={this.state.securityTokenStyle}>{this.props.context.userSettings.getSecurityTokenCode()}</span>
-              <div className="error-message">{this.state.error}</div>
-            </div>
-            {this.props.canRememberMe &&
-              <div className="input checkbox small">
-                <input type="checkbox" name="rememberMe" id="remember-me" checked={this.state.rememberMe} onChange={this.handleInputChange} disabled={this.state.processing} />
-                <label htmlFor="remember-me"><Trans>Remember until I log out.</Trans></label>
+            <div className="form-container">
+              <div className="input text required">
+                <label htmlFor="username"><Trans>Username</Trans></label>
+                <input className="required" maxLength="50" type="text" id="username" required="required" value={this.props.context.userSettings.username} disabled="disabled" />
+              </div>
+              <div className="input text passphrase required">
+                <label htmlFor="passphrase"><Trans>Passphrase</Trans></label>
+                <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>
+                }
               </div>
-            }
+              {this.props.canRememberMe &&
+                <div className="input checkbox small">
+                  <input type="checkbox" name="rememberMe" id="remember-me" checked={this.state.rememberMe} onChange={this.handleInputChange} disabled={this.state.processing} />
+                  <label htmlFor="remember-me"><Trans>Remember until I log out.</Trans></label>
+                </div>
+              }
+            </div>
             <div className="submit-wrapper">
               <input type="submit" className={`button primary big full-width ${this.state.processing ? "processing" : ""}`} role="button" value={this.translate('login')} disabled={this.state.processing} />
             </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";
@@ -14,7 +13,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><LoginPage {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><LoginPage {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -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/ManageQuickAccessMode/ManageQuickAccessMode.js

@@ -0,0 +1,103 @@
+/**
+ * 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.0.0
+ */
+import React, {Component} from "react";
+import {withRouter} from "react-router-dom";
+import PropTypes from "prop-types";
+import {withAppContext} from "../../contexts/AppContext";
+
+class ManageQuickAccessMode extends Component {
+  /**
+   * Default constructor
+   */
+  constructor(props) {
+    super(props);
+  }
+
+  /**
+   * Whenever the component is mounted
+   */
+  componentDidMount() {
+    this.handleCloseOutsideWindowEvent();
+    this.redirectFromFeatureParams();
+    this.handleResizeWindow();
+  }
+
+  /**
+   * Get the query parameters from the url
+   * @returns {URLSearchParams}
+   */
+  get queryParameters() {
+    return new URLSearchParams(this.props.location.search);
+  }
+
+  /**
+   * Handle close outside window event
+   */
+  handleCloseOutsideWindowEvent() {
+    const mustCloseWindow = this.queryParameters.get("uiMode") === "detached"
+      && this.queryParameters.get("feature") !== null;
+    if (mustCloseWindow) {
+      const closeWindow = () => window.close();
+      window.addEventListener("blur", closeWindow);
+    }
+  }
+
+  /**
+   * Redirect on the right page according to the feature
+   */
+  redirectFromFeatureParams() {
+    switch (this.queryParameters.get("feature")) {
+      case "create-new-credentials":
+      case "save-credentials":
+        this.props.history.push({pathname: "/data/quickaccess/resources/create"});
+        break;
+      case "autosave-credentials":
+        this.props.history.push({pathname: "/data/quickaccess/resources/autosave"});
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Handle resize window.
+   * When the quick access is in detached mode, request the BP to resize it when its height change to mimic the
+   * native behaviour of the quickaccess opened from the toolbar.
+   */
+  handleResizeWindow() {
+    const detachedMode = this.queryParameters.get("uiMode") === "detached";
+    if (detachedMode) {
+      const handleWindowResized = entries => this.props.context.port.emit("passbolt.quickaccess.update-window-height", entries[0].target.clientHeight);
+      const resizeObserver = new ResizeObserver(handleWindowResized);
+      resizeObserver.observe(document.body);
+    }
+  }
+  /**
+   * Render the component
+   * @return {JSX}
+   */
+  render() {
+    return (
+      <></>
+    );
+  }
+}
+
+ManageQuickAccessMode.propTypes = {
+  history: PropTypes.any, // The router history
+  location: PropTypes.any, // The router location
+  context: PropTypes.any, // The application context
+};
+
+export default withAppContext(withRouter(ManageQuickAccessMode));

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

@@ -1,5 +1,5 @@
 import React from "react";
-import {Link} from "react-router-dom";
+import {Link, withRouter} from "react-router-dom";
 import PropTypes from "prop-types";
 import {Trans, withTranslation} from "react-i18next";
 
@@ -96,4 +96,4 @@ MoreFiltersPage.propTypes = {
   t: PropTypes.func, // The translation function
 };
 
-export default withTranslation('common')(MoreFiltersPage);
+export default withRouter(withTranslation('common')(MoreFiltersPage));

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 {
@@ -10,14 +9,13 @@ export default {
 
 const Template = () =>
   <MemoryRouter initialEntries={['/']}>
-    <Route component={routerProps => <div className="container page quickaccess"><MoreFiltersPage {...routerProps}/></div>}/>
+    <Route component={routerProps => <div className="container quickaccess"><MoreFiltersPage {...routerProps}/></div>}/>
   </MemoryRouter>;
 
 
-
 export const Initial = Template.bind({});
 Initial.args = {
 };
-
-
-
+Initial.parameters = {
+  css: "ext_quickaccess"
+};

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

@@ -128,7 +128,7 @@ class PassphraseDialog extends React.Component {
 
   render() {
     return (
-      <div className="passphrase shake" onKeyDown={this.handleKeyDown}>
+      <div className="passphrase" onKeyDown={this.handleKeyDown}>
         <div className="back-link">
           <a className="primary-action">
             <span className="primary-action-title"><Trans>Passphrase required</Trans></span>
@@ -147,9 +147,11 @@ class PassphraseDialog extends React.Component {
                 <label htmlFor="passphrase"><Trans>Please enter your 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} />
+                  disabled={this.state.processing} style={this.state.passphraseStyle} autoComplete="off"/>
                 <span className="security-token" style={this.state.securityTokenStyle}>{this.props.context.userSettings.getSecurityTokenCode()}</span>
+                {this.state.passphraseError &&
                 <div className="error-message">{this.state.passphraseError}</div>
+                }
               </div>
               <div className="input checkbox small">
                 <input type="checkbox" name="rememberMe" id="remember-me" checked={this.state.rememberMe} onChange={this.handleInputChange} />
@@ -168,7 +170,7 @@ class PassphraseDialog extends React.Component {
               <Trans>Your passphrase is wrong!</Trans> <Trans>The operation has been aborted.</Trans>
             </div>
             <div className="submit-wrapper">
-              <a className="button primary big full-width" role="button" autoFocus onClick={this.handleCloseButtonClick}>
+              <a className="button primary big full-width" role="button" onClick={this.handleCloseButtonClick}>
                 <Trans>close</Trans>
               </a>
             </div>

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";
@@ -14,7 +13,7 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container page quickaccess"><PassphraseDialog {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess"><PassphraseDialog {...args} {...routerProps}/></div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -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/PrivateRoute/PrivateRoute.js

@@ -22,6 +22,7 @@ class PrivateRoute extends Component {
               <Redirect
                 to={{
                   pathname: "/data/quickaccess/login",
+                  search: props.location.search,
                   state: {from: props.location}
                 }}
               />