passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/lib/Error/InputValidator.js

@@ -0,0 +1,24 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.9.0
+ */
+
+export function maxSizeValidation(value, maxLength, translate) {
+  /*
+   * The parser can't find the translation for warningMessage variable
+   * To fix that we can use it in comment
+   * this.translate("this is the maximum size for this field, make sure your data was not truncated")
+   */
+  const sizeExceeded = value.length >= maxLength;
+  const warningMessage =  translate("this is the maximum size for this field, make sure your data was not truncated");
+  return sizeExceeded ? warningMessage : "";
+}

package/src/react-extension/lib/Map/DynamicRef.js

@@ -0,0 +1,49 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.9.0
+ */
+
+import * as React from "react";
+
+/**
+ * Dynamic ref is used to generate ref automaticly, like we can do with a hook.
+ * Use this when we do not have the control of elements: like during a generation of inputs, buttons, ...
+ */
+
+const map = new Map();
+
+/**
+ * set a new ref to map
+ */
+function setRef(key) {
+  if (typeof key !== "string") { return console.warn(`useDynamicRefs: Cannot set ref without key`); }
+  const ref = React.createRef();
+  map.set(key, ref);
+  return ref;
+}
+
+/**
+ * get input ref
+ */
+function getRef(key) {
+  if (!key) { return console.warn(`useDynamicRefs: Cannot get ref without key`); }
+  return map.get(key);
+}
+
+/**
+ * return the dynamic object
+ */
+function useDynamicRefs() {
+  return {getRef, setRef};
+}
+
+export default useDynamicRefs;

package/src/react-extension/lib/Map/DynamicRef.test.js

@@ -0,0 +1,56 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.9.0
+ */
+
+import useDynamicRefs from './DynamicRef';
+
+describe("DynamicRef", () => {
+  const dynamicRefs = useDynamicRefs();
+
+  describe("DynamicRef::setRef", () => {
+    it("should set value if valid key provided", () => {
+      expect.assertions(2);
+
+      const key = "test";
+      dynamicRefs.setRef(key);
+      expect(dynamicRefs.getRef(key)).not.toBeNull();
+      expect(dynamicRefs.getRef(key)).toBeDefined();
+    });
+
+    it("should not set value if key does not exist", () => {
+      expect.assertions(1);
+
+      console.warn = jest.fn();
+      dynamicRefs.setRef();
+      expect(console.warn.mock.calls[0][0]).toBe("useDynamicRefs: Cannot set ref without key");
+    });
+
+    it("should not set value if key is not a string", () => {
+      expect.assertions(1);
+
+      console.warn = jest.fn();
+      dynamicRefs.setRef(null);
+      expect(console.warn.mock.calls[0][0]).toBe("useDynamicRefs: Cannot set ref without key");
+    });
+  });
+
+  describe("DynamicRef::getRef", () => {
+    it("should not set value if key does not exist", () => {
+      expect.assertions(1);
+
+      console.warn = jest.fn();
+      dynamicRefs.getRef();
+      expect(console.warn.mock.calls[0][0]).toBe("useDynamicRefs: Cannot get ref without key");
+    });
+  });
+});

package/src/react-extension/lib/Map/MapObject.js

@@ -0,0 +1,48 @@
+
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.8.3
+ */
+
+/**
+ * This util is used to generalise map method
+ */
+class MapObject {
+  /**
+   * clone a map object
+   * @param {any} object
+   * @returns clone of object
+   */
+  static clone(object) {
+    return new Map(JSON.parse(JSON.stringify(Array.from(object))));
+  }
+
+  /**
+   * return map iteration
+   * @param {any} object
+   * @returns iterations
+   */
+  static iterators(object) {
+    return [...object.keys()];
+  }
+
+  /**
+   * return values array
+   * @param {any} object
+   * @returns iterations
+   */
+  static listValues(object) {
+    return [...object.values()];
+  }
+}
+
+export default MapObject;

package/src/react-extension/lib/Map/MapObject.test.js

@@ -0,0 +1,43 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.8.3
+ */
+
+import MapObject from './MapObject';
+
+describe("MapObject", () => {
+  describe("MapObject::clone", () => {
+    it("should clone map object", () => {
+      expect.assertions(2);
+
+      const map1 = new Map();
+      map1.set('a', 1);
+      const clonedMap = MapObject.clone(map1);
+      clonedMap.set('a', 2);
+
+      expect(clonedMap.get("a")).toEqual(2);
+      expect(map1.get("a")).toEqual(1);
+    });
+  });
+
+  describe("MapObject::iterators", () => {
+    it("should return an array of keys", () => {
+      expect.assertions(1);
+
+      const map1 = new Map();
+      map1.set('a', 1);
+      map1.set('b', 2);
+
+      expect(MapObject.iterators(map1)).toEqual(["a", "b"]);
+    });
+  });
+});

package/src/react-quickaccess/ExtQuickAccess.js

@@ -30,6 +30,7 @@ import SaveResource from "./components/ResourceAutoSave/SaveResource";
 import GeneratePasswordPage from "./components/GeneratePasswordPage/GeneratePasswordPage";
 import PrepareResourceContextProvider from "./contexts/PrepareResourceContext";
 import Icon from "../shared/components/Icons/Icon";
+import SsoContextProvider from "./contexts/SsoContext";
 
 const SEARCH_VISIBLE_ROUTES = [
   '/webAccessibleResources/quickaccess.html',
@@ -272,10 +273,12 @@ class ExtQuickAccess extends React.Component {
                   <PrepareResourceContextProvider>
                     <AnimatedSwitch>
                       <Route path="/webAccessibleResources/quickaccess/login" render={() => (
-                        <LoginPage
-                          loginSuccessCallback={this.loginSuccessCallback}
-                          mfaRequiredCallback={this.mfaRequiredCallback}
-                          canRememberMe={this.canRememberMe}/>
+                        <SsoContextProvider>
+                          <LoginPage
+                            loginSuccessCallback={this.loginSuccessCallback}
+                            mfaRequiredCallback={this.mfaRequiredCallback}
+                            canRememberMe={this.canRememberMe}/>
+                        </SsoContextProvider>
                       )}/>
                       <PrivateRoute exact path="/webAccessibleResources/quickaccess/resources/group" component={FilterResourcesByGroupPage}/>
                       <PrivateRoute path="/webAccessibleResources/quickaccess/resources/group/:id" component={FilterResourcesByGroupPage}/>

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

@@ -12,6 +12,7 @@ import Transition from "react-transition-group/cjs/Transition";
 import Icon from "../../../shared/components/Icons/Icon";
 import Password from "../../../shared/components/Password/Password";
 import PasswordComplexity from "../../../shared/components/PasswordComplexity/PasswordComplexity";
+import ClipBoard from '../../../shared/lib/Browser/clipBoard';
 
 class GeneratePasswordPage extends React.Component {
   constructor(props) {
@@ -115,7 +116,7 @@ class GeneratePasswordPage extends React.Component {
    */
   async handleCopyPassword() {
     this.setState({copySecretState: 'processing'});
-    await navigator.clipboard.writeText(this.state.password);
+    await ClipBoard.copy(this.state.password, this.props.context.port);
     this.setState({copySecretState: 'done'});
     setTimeout(() => {
       this.setState({copySecretState: 'default'});
@@ -255,6 +256,7 @@ class GeneratePasswordPage extends React.Component {
 }
 
 GeneratePasswordPage.propTypes = {
+  context: PropTypes.any, // The application context
   prepareResourceContext: PropTypes.any, // The password generator context
   history: PropTypes.any, // The history router
   t: PropTypes.func, // The translation function

package/src/react-quickaccess/components/GeneratePasswordPage/GeneratePasswordPage.test.data.js

@@ -2,8 +2,12 @@
  * Default props
  * @returns {*}
  */
+
+import {defaultAppContext} from "../../contexts/AppContext.test.data";
+
 export function defaultProps() {
   return {
+    context: defaultAppContext(),
     prepareResourceContext: {
       settings: {
         default_generator: "passphrase",

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

@@ -5,6 +5,8 @@ import {withAppContext} from "../../contexts/AppContext";
 import {Trans, withTranslation} from "react-i18next";
 import Icon from "../../../shared/components/Icons/Icon";
 import Password from "../../../shared/components/Password/Password";
+import SsoProviders from "../../../react-extension/components/Administration/ManageSsoSettings/SsoProviders.data";
+import {withSso} from "../../contexts/SsoContext";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -17,22 +19,35 @@ class LoginPage extends React.Component {
   initEventHandlers() {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSwitchToPassphrase = this.handleSwitchToPassphrase.bind(this);
+    this.handleSwitchToSso = this.handleSwitchToSso.bind(this);
+    this.handleSignInWithSso = this.handleSignInWithSso.bind(this);
   }
 
   initState() {
     return {
       error: "",
+      ssoError: null,
       processing: false,
       passphrase: "",
       rememberMe: false,
+      displaySso: false,
+      isSsoAvailable: false,
+      isReady: false,
     };
   }
 
   /**
    * Whenever the component is mounted
    */
-  componentDidMount() {
-    this.focusOnPassphrase();
+  async componentDidMount() {
+    await this.props.ssoContext.loadSsoConfiguration();
+    if (this.props.ssoContext.hasUserAnSsoKit()) {
+      this.setState({isSsoAvailable: true, displaySso: true, isReady: true});
+    } else {
+      this.setState({isReady: true});
+      this.focusOnPassphrase();
+    }
   }
 
   /**
@@ -60,8 +75,11 @@ class LoginPage extends React.Component {
 
   async login() {
     await this.props.context.port.request("passbolt.auth.login", this.state.passphrase, this.state.rememberMe);
-    const isMfaRequired = await this.props.context.port.request("passbolt.auth.is-mfa-required");
+    await this.handleLoginSuccess();
+  }
 
+  async handleLoginSuccess() {
+    const isMfaRequired = await this.props.context.port.request("passbolt.auth.is-mfa-required");
     if (!isMfaRequired) {
       this.props.loginSuccessCallback();
       this.props.history.push("/webAccessibleResources/quickaccess.html");
@@ -80,10 +98,73 @@ class LoginPage extends React.Component {
     });
   }
 
+  /**
+   * Switches the UI to the SSO mode.
+   */
+  handleSwitchToSso(event) {
+    event.preventDefault();
+    this.setState({displaySso: true, ssoError: null});
+  }
+
+  /**
+   * Switches the UI to the passphrase mode.
+   */
+  handleSwitchToPassphrase(event) {
+    event.preventDefault();
+    this.setState({displaySso: false});
+  }
+
+  /**
+   * Handle the click on the SSO login button.
+   * @returns {Promise<void>}
+   */
+  async handleSignInWithSso(event) {
+    event.preventDefault();
+    this.setState({processing: true, ssoError: ""});
+    try {
+      await this.props.ssoContext.runSignInProcess();
+      await this.handleLoginSuccess();
+    } catch (e) {
+      if (e.name === "UserClosedSsoPopUpError") {
+        this.setState({
+          displaySso: false
+        });
+      } else {
+        this.setState({ssoError: e.message});
+      }
+    }
+    this.setState({
+      processing: false
+    });
+  }
+
+  /**
+   * Returns true if SSO is enabled and configured for Azure.
+   * @return {bool}
+   */
+  get isAzureSsoEnabled() {
+    const ssoProvider = this.props.ssoContext.getProvider();
+    return ssoProvider === "azure";
+  }
+
+  /**
+   * Returns the provider information of the current SSO provider configured.
+   * @return {object}
+   */
+  get ssoProviderData() {
+    const ssoProvider = this.props.ssoContext.getProvider();
+    if (!ssoProvider) {
+      return null;
+    }
+    return SsoProviders.find(provider => provider.id === ssoProvider);
+  }
+
   render() {
+    const ssoProviderData = this.ssoProviderData;
     return (
       <div className="quickaccess-login">
         <div className="login-form">
+          {!this.state.displaySso && this.state.isReady &&
           <form onSubmit={this.handleFormSubmit}>
             <div className="form-container">
               <div className="input text required">
@@ -122,8 +203,37 @@ class LoginPage extends React.Component {
                   <Icon name="spinner"/>
                 }
               </button>
+              {this.state.isSsoAvailable &&
+                <a onClick={this.handleSwitchToSso}>
+                  <Trans>Sign in with Single Sign-On.</Trans>
+                </a>
+              }
             </div>
           </form>
+          }
+          {this.state.displaySso && this.state.isReady &&
+          <>
+            <div className="form-actions sso-login-form">
+              {this.isAzureSsoEnabled &&
+                <a className={`button sso-login-button ${this.state.processing ? "disabled" : ""} ${ssoProviderData.id}`} onClick={this.handleSignInWithSso} disabled={this.state.processing} >
+                  <span className="provider-logo">
+                    {ssoProviderData.icon}
+                  </span>
+                  {this.props.t(`Sign in with {{providerName}}`, {providerName: ssoProviderData.name})}
+                </a>
+              }
+              <a onClick={this.handleSwitchToPassphrase}>
+                <Trans>Sign in with my passphrase.</Trans>
+              </a>
+              {this.state.ssoError &&
+                <div className="error-message">
+                  <Trans>An error occured during the sign-in via SSO.</Trans><br/>
+                  {this.state.ssoError}
+                </div>
+              }
+            </div>
+          </>
+          }
         </div>
       </div>
     );
@@ -132,6 +242,7 @@ class LoginPage extends React.Component {
 
 LoginPage.propTypes = {
   context: PropTypes.any, // The application context
+  ssoContext: PropTypes.object, // The SSO context
   canRememberMe: PropTypes.bool, // True if the remember me flag must be displayed
   loginSuccessCallback: PropTypes.func,
   mfaRequiredCallback: PropTypes.func,
@@ -142,4 +253,4 @@ LoginPage.propTypes = {
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withRouter(withTranslation('common')(LoginPage)));
+export default withAppContext(withRouter(withSso(withTranslation('common')(LoginPage))));

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

@@ -18,3 +18,13 @@ export function defaultAppContext(appContext) {
   };
   return Object.assign(defaultAppContext, appContext || {});
 }
+
+export function defaultSsoContext(ssoContext) {
+  const defaultSsoContext = {
+    loadSsoConfiguration: () => Promise.resolve(),
+    hasUserAnSsoKit: () => true,
+    getProvider: () => "azure",
+    runSignInProcess: () => Promise.resolve()
+  };
+  return Object.assign(defaultSsoContext, ssoContext || {});
+}

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

@@ -3,7 +3,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import PropTypes from "prop-types";
 import AppContext from "../../contexts/AppContext";
 import LoginPage from "./LoginPage";
-import {defaultAppContext} from "./LoginPage.test.data";
+import {defaultAppContext, defaultSsoContext} from "./LoginPage.test.data";
 
 export default {
   title: 'Components/QuickAccess/Login',
@@ -13,18 +13,21 @@ export default {
 const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <div className="container quickaccess"><LoginPage {...args} {...routerProps}/></div>}/>
+      <Route component={routerProps => <div className="container quickaccess">
+        <LoginPage {...args} {...routerProps}/>
+      </div>}/>
     </MemoryRouter>
   </AppContext.Provider>;
 
 Template.propTypes = {
   context: PropTypes.object,
+  ssoContext: PropTypes.object,
 };
 
-
 export const Initial = Template.bind({});
 Initial.args = {
   context: defaultAppContext(),
+  ssoContext: defaultSsoContext({hasUserAnSsoKit: () => false}),
   loginSuccessCallback: () => {},
   mfaRequiredCallback: () => {},
   canRememberMe: true,
@@ -32,3 +35,27 @@ Initial.args = {
 Initial.parameters = {
   css: "ext_quickaccess"
 };
+
+export const WithSsoAvailable = Template.bind({});
+WithSsoAvailable.args = {
+  context: defaultAppContext(),
+  ssoContext: defaultSsoContext(),
+  loginSuccessCallback: () => {},
+  mfaRequiredCallback: () => {},
+  canRememberMe: true,
+};
+WithSsoAvailable.parameters = {
+  css: "ext_quickaccess"
+};
+
+export const WithSsoLoginError = Template.bind({});
+WithSsoLoginError.args = {
+  context: defaultAppContext(),
+  ssoContext: defaultSsoContext({runSignInProcess: () => { throw new Error("Unable to decrypt the private key's with the given passphrase"); }}),
+  loginSuccessCallback: () => {},
+  mfaRequiredCallback: () => {},
+  canRememberMe: true,
+};
+WithSsoLoginError.parameters = {
+  css: "ext_quickaccess"
+};

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

@@ -21,16 +21,22 @@ import Icon from "../../../shared/components/Icons/Icon";
 import Password from "../../../shared/components/Password/Password";
 import {SecretGenerator} from "../../../shared/lib/SecretGenerator/SecretGenerator";
 import PasswordComplexity from "../../../shared/components/PasswordComplexity/PasswordComplexity";
+import debounce from "debounce-promise";
+import PownedService from '../../../shared/services/api/secrets/pownedService';
 
 class SaveResource extends React.Component {
   constructor(props) {
     super(props);
     this.initEventHandlers();
     this.state = this.getDefaultState();
+    this.isPwndProcessingPromise = null;
+    this.evaluatePasswordIsInDictionaryDebounce = debounce(this.evaluatePasswordIsInDictionaryDebounce, 300);
   }
 
   componentDidMount() {
+    this.pownedService = new PownedService(this.props.context.port);
     this.loadPasswordMetaFromTabForm();
+    this.evaluatePasswordIsInDictionaryDebounce();
   }
 
   initEventHandlers() {
@@ -53,6 +59,8 @@ class SaveResource extends React.Component {
       password: "",
       passwordError: "",
       passwordEntropy: null,
+      isPwnedServiceAvailable: true,
+      passwordInDictionary: false
     };
   }
 
@@ -154,6 +162,9 @@ class SaveResource extends React.Component {
   }
 
   handlePasswordChange(event) {
+    if (event.target.value.length) {
+      this.isPwndProcessingPromise = this.evaluatePasswordIsInDictionaryDebounce();
+    }
     this.loadPassword(event.target.value);
   }
 
@@ -172,6 +183,17 @@ class SaveResource extends React.Component {
     this.setState({password, passwordEntropy});
   }
 
+  /**
+   * Evaluate to check if password is in a dictionary.
+   * @return {Promise}
+   */
+  async evaluatePasswordIsInDictionaryDebounce() {
+    if (this.state.isPwnedServiceAvailable) {
+      const result = await this.pownedService.evaluateSecret(this.state.password);
+      this.setState({isPwnedServiceAvailable: result.isPwnedServiceAvailable, passwordInDictionary: result.inDictionary});
+    }
+  }
+
   render() {
     return (
       <div className="resource-auto-save">
@@ -204,7 +226,10 @@ class SaveResource extends React.Component {
                 }
               </div>
               <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""}`}>
-                <label htmlFor="password"><Trans>Password</Trans></label>
+                <label htmlFor="password"><Trans>Password</Trans>
+                  {(this.state.passwordInDictionary || !this.state.isPwnedServiceAvailable)  &&
+                  <Icon name="exclamation"/>
+                  }</label>
                 <div className="password-button-inline">
                   <Password name="password" value={this.state.password} preview={true} onChange={this.handlePasswordChange} disabled={this.state.processing}
                     placeholder={this.translate('Password')} id="password" autoComplete="new-password"/>
@@ -213,6 +238,13 @@ class SaveResource extends React.Component {
                 {this.state.passwordError &&
                   <div className="error-message">{this.state.passwordError}</div>
                 }
+                {!this.state.isPwnedServiceAvailable &&
+                    <div className="pwned-password warning-message"><Trans>The pwnedpasswords service is unavailable, your password might be part of an exposed data breach</Trans></div>
+                }
+                {this.state.passwordInDictionary &&
+                    <div className="pwned-password warning-message"><Trans>The password is part of an exposed data breach.</Trans></div>
+                }
+
               </div>
             </div>
           </div>

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

@@ -26,3 +26,28 @@ export const mockResults = {
   "passbolt.quickaccess.prepare-autosave": mockTabInfo,
   "passbolt.resources.create": {}
 };
+
+export function mockExtensionCall(context) {
+  context.port = {
+    request: function(event, value) {
+      return new Promise((resolve, reject) => {
+        if (event === "passbolt.quickaccess.prepare-autosave") {
+          resolve({
+            name: "Passbolt Browser Extension Test",
+            uri: "https://passbolt-browser-extension/test",
+            username: "passbolt.com",
+            secret_clear: "p@ssw0rd00"
+          });
+        } else if (event === "passbolt.secrets.powned-password") {
+          if (value === "hello-world") {
+            resolve(3);
+          } else if (value === "unavailable") {
+            reject();
+          } else {
+            resolve(0);
+          }
+        }
+      });
+    }
+  };
+}