passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Authentication/CreateGpgKey/CreateGpgKey.test.page.js

@@ -151,13 +151,29 @@ export default class CreateGpgKeyPage {
     return Boolean(this._page.container.querySelector('#import-key-link'));
   }
 
+
+  /**
+   * Returns the list item concerning the 'not in dictionnary" hints
+   */
+  get notInDictionaryHint() {
+    return this._page.container.querySelectorAll(".password-hints li")[4];
+  }
+
+  /**
+   * Returns the tooltip for service unavailable for powned password
+   */
+  get tootltip() {
+    return this._page.container.querySelector(".password-hints .unavailable .tooltip .tooltip-text");
+  }
+
   /**
    * Change the passphrase input value
    * @param passphrase The new passphrase
    */
   async fill(passphrase) {
     fireEvent.change(this.passphraseInput, {target: {value: passphrase}});
-    await waitFor(async() => {});
+    jest.runAllTimers();
+    await waitFor(() => {});
   }
 
   /**

package/src/react-extension/components/AuthenticationLogin/Login/Login.js

@@ -57,7 +57,9 @@ class Login extends Component {
         emptyPassphrase: false, // True if the passphrase is empty
         invalidPassphrase: false, // True if the passphrase is invalid
         invalidGpgKey: false, // True if the gpg key is invalid
-      }
+      },
+      isSsoAvailable: false, // true if the current user has an SSO kit built locally
+      displaySso: false, // true if the UI should display the SSO login button
     };
   }
 
@@ -123,6 +125,9 @@ class Login extends Component {
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleChangePassphrase = this.handleChangePassphrase.bind(this);
     this.handleToggleRememberMe = this.handleToggleRememberMe.bind(this);
+    this.handleSwitchToSso = this.handleSwitchToSso.bind(this);
+    this.handleSwitchToPassphrase = this.handleSwitchToPassphrase.bind(this);
+    this.handleSignInWithSso = this.handleSignInWithSso.bind(this);
   }
 
   /**
@@ -136,7 +141,14 @@ class Login extends Component {
    * Whenever the component is mounted
    */
   componentDidMount() {
-    this.focusOnPassphrase();
+    const isSsoAvailable = Boolean(this.ssoProviderData);
+    this.setState({
+      isSsoAvailable: isSsoAvailable,
+      displaySso: isSsoAvailable,
+    });
+    if (!isSsoAvailable) {
+      this.focusOnPassphrase();
+    }
   }
 
   /**
@@ -251,8 +263,47 @@ class Login extends Component {
   /**
    * Toggle the processing mode
    */
-  async toggleProcessing() {
-    await this.setState({actions: {processing: true}});
+  toggleProcessing() {
+    this.setState({actions: {processing: !this.state.actions.processing}});
+  }
+
+  /**
+   * Switches the UI to the SSO mode.
+   */
+  handleSwitchToSso(event) {
+    event.preventDefault();
+    this.setState({displaySso: true});
+  }
+
+  /**
+   * 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({actions: {
+      processing: true
+    }});
+    try {
+      await this.props.onSsoSignIn();
+    } catch (e) {
+      this.setState({
+        displaySso: false
+      });
+    }
+    this.setState({
+      actions: {
+        processing: false
+      }
+    });
   }
 
   /**
@@ -267,12 +318,29 @@ class Login extends Component {
     };
   }
 
+  /**
+   * Returns true if SSO is enabled and configured for Azure.
+   * @return {bool}
+   */
+  get isAzureSsoEnabled() {
+    return this.ssoProviderData?.id === "azure";
+  }
+
+  /**
+   * Returns the provider information of the current SSO provider configured.
+   * @return {object}
+   */
+  get ssoProviderData() {
+    return this.props.ssoProvider;
+  }
+
   /**
    * Render the component
    */
   render() {
     const processingClassName = this.isProcessing ? 'processing' : '';
     const securityToken = this.securityToken;
+    const ssoProviderData = this.ssoProviderData;
 
     return (
       <div className="login">
@@ -281,68 +349,95 @@ class Login extends Component {
           <p className="login-user-name">{this.fullname}</p>
           <p className="login-user-email">{this.username}</p>
         </div>
+        {!this.state.displaySso &&
+          <form acceptCharset="utf-8" onSubmit={this.handleSubmit} className="enter-passphrase">
+            <div className={`input-password-wrapper input required ${this.hasErrors ? "error" : ""}`}>
+              <label htmlFor="passphrase">
+                <Trans>Passphrase</Trans>
+              </label>
+              <Password
+                id="passphrase"
+                autoComplete="off"
+                inputRef={this.passphraseInputRef}
+                name="passphrase"
+                placeholder={this.props.t('Passphrase')}
+                value={this.state.passphrase}
+                onChange={this.handleChangePassphrase}
+                disabled={!this.areActionsAllowed}
+                preview={true}
+                securityToken={securityToken}/>
+              {this.state.hasBeenValidated &&
+              <>
+                {this.state.errors.emptyPassphrase &&
+                <div className="empty-passphrase error-message"><Trans>The passphrase should not be empty.</Trans></div>
+                }
+                {this.state.errors.invalidPassphrase &&
+                <div className="invalid-passphrase error-message">
+                  <Trans>The passphrase is invalid.</Trans> {this.state.isSsoAvailable && <a onClick={this.props.onSecondaryActionClick}><Trans>Do you need help?</Trans></a>}
+                </div>
+                }
+                {this.state.errors.invalidGpgKey &&
+                <div className="invalid-gpg-key error-message"><Trans>The private key is invalid.</Trans></div>
+                }
+              </>
+              }
+            </div>
+            {this.props.canRememberMe &&
+              <div className="input checkbox">
+                <input
+                  id="remember-me"
+                  type="checkbox"
+                  name="remember-me"
+                  value={this.state.rememberMe}
+                  onChange={this.handleToggleRememberMe}
+                  disabled={!this.areActionsAllowed}/>
+                <label htmlFor="remember-me">
+                  <Trans>Remember until signed out.</Trans>
+                </label>
+              </div>
+            }
 
-        <form acceptCharset="utf-8" onSubmit={this.handleSubmit} className="enter-passphrase">
-          <div className={`input-password-wrapper input required ${this.hasErrors ? "error" : ""}`}>
-            <label htmlFor="passphrase">
-              <Trans>Passphrase</Trans>
-            </label>
-            <Password
-              id="passphrase"
-              autoComplete="off"
-              inputRef={this.passphraseInputRef}
-              name="passphrase"
-              placeholder={this.props.t('Passphrase')}
-              value={this.state.passphrase}
-              onChange={this.handleChangePassphrase}
-              disabled={!this.areActionsAllowed}
-              preview={true}
-              securityToken={securityToken}/>
-            {this.state.hasBeenValidated &&
-            <>
-              {this.state.errors.emptyPassphrase &&
-              <div className="empty-passphrase error-message"><Trans>The passphrase should not be empty.</Trans></div>
+            <div className="form-actions">
+              <button
+                type="submit"
+                className={`button primary big full-width ${processingClassName}`}
+                role="button"
+                disabled={this.isProcessing}>
+                {{
+                  [LoginVariations.SIGN_IN]: <Trans>Sign in</Trans>,
+                  [LoginVariations.ACCOUNT_RECOVERY]: <Trans>Complete recovery</Trans>,
+                }[this.props.displayAs]}
+              </button>
+              {this.state.isSsoAvailable &&
+                <a className="switchToSso" onClick={this.handleSwitchToSso}>
+                  <Trans>Sign in with Single Sign-On.</Trans>
+                </a>
               }
-              {this.state.errors.invalidPassphrase &&
-              <div className="invalid-passphrase error-message"><Trans>The passphrase is invalid.</Trans></div>
+              {!this.state.isSsoAvailable &&
+                <a onClick={this.props.onSecondaryActionClick}>
+                  <Trans>Help, I lost my passphrase.</Trans>
+                </a>
               }
-              {this.state.errors.invalidGpgKey &&
-              <div className="invalid-gpg-key error-message"><Trans>The private key is invalid.</Trans></div>
+            </div>
+          </form>
+        }
+        {this.state.displaySso &&
+          <>
+            <div className="form-actions sso-login-form">
+              {this.isAzureSsoEnabled &&
+                <a className={`button sso-login-button ${this.isProcessing ? "disabled" : ""} ${ssoProviderData.id}`} onClick={this.handleSignInWithSso} disabled={this.isProcessing} >
+                  <span className="provider-logo">
+                    {ssoProviderData.icon}
+                  </span>
+                  {this.props.t(`Sign in with {{providerName}}`, {providerName: ssoProviderData.name})}
+                </a>
               }
-            </>
-            }
-          </div>
-          {this.props.canRememberMe &&
-            <div className="input checkbox">
-              <input
-                id="remember-me"
-                type="checkbox"
-                name="remember-me"
-                value={this.state.rememberMe}
-                onChange={this.handleToggleRememberMe}
-                disabled={!this.areActionsAllowed}/>
-              <label htmlFor="remember-me">
-                <Trans>Remember until signed out.</Trans>
-              </label>
+              <a onClick={this.handleSwitchToPassphrase}>
+                <Trans>Sign in with my passphrase.</Trans>
+              </a>
             </div>
-          }
-
-          <div className="form-actions">
-            <button
-              type="submit"
-              className={`button primary big full-width ${processingClassName}`}
-              role="button"
-              disabled={this.isProcessing}>
-              {{
-                [LoginVariations.SIGN_IN]: <Trans>Sign in</Trans>,
-                [LoginVariations.ACCOUNT_RECOVERY]: <Trans>Complete recovery</Trans>,
-              }[this.props.displayAs]}
-            </button>
-            <a onClick={this.props.onSecondaryActionClick}>
-              <Trans>Help, I lost my passphrase.</Trans>
-            </a>
-          </div>
-        </form>
+          </>
+        }
       </div>
     );
   }
@@ -358,12 +453,15 @@ Login.propTypes = {
     LoginVariations.ACCOUNT_RECOVERY,
   ]), // Defines how the form should be displayed and behaves
   context: PropTypes.any, // The application context
+  ssoContext: PropTypes.object, // The SSO context
   account: PropTypes.object, // The user account
   userSettings: PropTypes.object, // The user settings
   canRememberMe: PropTypes.bool, // True if the remember me flag must be displayed
   onSignIn: PropTypes.func.isRequired, // Callback to trigger whenever the user wants to sign-in
   onCheckPassphrase: PropTypes.func.isRequired, // Callback to trigger whenever the user wants to check the passphrase
+  onSsoSignIn: PropTypes.func, // Callback to trigger whenever the user wants to sign-in using SSO
   onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
+  ssoProvider: PropTypes.object, // The SSO provider if any
   t: PropTypes.func, // The translation function
 };
 export default withAppContext(withTranslation('common')(Login));

package/src/react-extension/components/AuthenticationLogin/Login/Login.test.data.js

@@ -14,6 +14,7 @@
 
 import {LoginVariations} from "./Login";
 import UserSettings from "../../../../shared/lib/Settings/UserSettings";
+import {defaultAppContext} from "../../../contexts/ExtAppContext.test.data";
 
 /**
  * Default props
@@ -21,19 +22,21 @@ import UserSettings from "../../../../shared/lib/Settings/UserSettings";
  * @returns {Object}
  */
 export function defaultProps(props = {}) {
+  const userSettings = new UserSettings({
+    "user.settings.securityToken.code": "TST",
+    "user.settings.securityToken.color": "#f44336",
+    "user.settings.securityToken.textColor": "#ffffff",
+    "user.settings.trustedDomain": (new URL(window.location.href)).origin,
+    "user.id": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
+    "user.username": "admin@passbolt.com",
+    "user.firstname": "Admin",
+    "user.lastname": "User",
+    "user.settings.locale": "fr-FR"
+  });
   const defaultProps = {
     displayAs: LoginVariations.SIGN_IN,
-    userSettings: new UserSettings({
-      "user.settings.securityToken.code": "TST",
-      "user.settings.securityToken.color": "#f44336",
-      "user.settings.securityToken.textColor": "#ffffff",
-      "user.settings.trustedDomain": (new URL(window.location.href)).origin,
-      "user.id": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
-      "user.username": "admin@passbolt.com",
-      "user.firstname": "Admin",
-      "user.lastname": "User",
-      "user.settings.locale": "fr-FR"
-    }),
+    context: defaultAppContext({userSettings}),
+    userSettings: userSettings,
     onSignIn: jest.fn(() => Promise.resolve()),
     onCheckPassphrase: jest.fn(() => Promise.resolve()),
     onSecondaryActionClick: jest.fn(() => Promise.resolve()),

package/src/react-extension/components/AuthenticationLogin/Login/Login.test.js

@@ -19,6 +19,8 @@ import each from "jest-each";
 import LoginPage from "./Login.test.page";
 import {LoginVariations} from "./Login";
 import {defaultProps} from "./Login.test.data";
+import {waitFor} from "@testing-library/dom";
+import SsoProviders from "../../Administration/ManageSsoSettings/SsoProviders.data";
 
 beforeEach(() => {
   jest.resetModules();
@@ -33,6 +35,8 @@ describe("Login", () => {
       const props = defaultProps(_props);
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.assertions(2);
       const expectedPassphrase = "some passphrase";
       await page.fillPassphrase(expectedPassphrase);
@@ -45,6 +49,8 @@ describe("Login", () => {
       const props = defaultProps({..._props, canRememberMe: false});
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.assertions(2);
       expect(page.canRememberMe).toBeFalsy();
       const expectedPassphrase = "some passphrase";
@@ -57,6 +63,8 @@ describe("Login", () => {
       const props = defaultProps({..._props, canRememberMe: true});
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.assertions(2);
       expect(page.canRememberMe).toBeTruthy();
       const expectedPassphrase = "some passphrase";
@@ -70,6 +78,8 @@ describe("Login", () => {
       const props = defaultProps({..._props});
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.assertions(1);
       await page.clickSecondaryActionLink();
       expect(props.onSecondaryActionClick).toHaveBeenCalled();
@@ -81,6 +91,8 @@ describe("Login", () => {
       const props = defaultProps({..._props, onSignIn});
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.hasAssertions();
       const inProgressFn = () => {
         expect(page.canChange).toBeFalsy();
@@ -98,6 +110,8 @@ describe("Login", () => {
       const props = defaultProps({..._props, onSignIn});
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.hasAssertions();
       const inProgressFn = () => {
         expect(page.isProcessing).toBeTruthy();
@@ -113,6 +127,8 @@ describe("Login", () => {
       const props = defaultProps(_props);
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.assertions(1);
       const emptyPassphrase = ' ';
       await page.fillPassphrase(emptyPassphrase);
@@ -126,6 +142,8 @@ describe("Login", () => {
       const props = defaultProps({..._props, onCheckPassphrase});
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.assertions(1);
       await page.fillPassphrase('some passphrase');
       await page.signIn();
@@ -138,6 +156,8 @@ describe("Login", () => {
       const props = defaultProps({displayAs: LoginVariations.SIGN_IN});
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.assertions(2);
       expect(page.signInButton.textContent).toBe("Sign in");
       expect(page.secondaryActionLink.textContent).toBe("Help, I lost my passphrase.");
@@ -149,9 +169,68 @@ describe("Login", () => {
       const props = defaultProps({displayAs: LoginVariations.ACCOUNT_RECOVERY});
       const page = new LoginPage(props);
 
+      await waitFor(() => {});
+
       expect.assertions(2);
       expect(page.signInButton.textContent).toBe("Complete recovery");
       expect(page.secondaryActionLink.textContent).toBe("Help, I lost my passphrase.");
     });
   });
+
+  describe("As a registered user I can use the SSO feature to sign in to passbolt", () => {
+    const ssoProvider = SsoProviders.find(provider => provider.id === "azure");
+
+    it('As AN I cannot see the SSO login button if I do not have an SSO kit set on my browser profile', async() => {
+      expect.assertions(1);
+      const props = defaultProps({
+        displayAs: LoginVariations.SIGN_IN,
+        ssoProvider: null,
+      });
+
+      const page = new LoginPage(props);
+      await waitFor(() => {});
+
+      expect(page.secondaryActionLink.textContent).toStrictEqual("Help, I lost my passphrase.");
+    });
+
+    it('As AN I can see the SSO login button if I have an SSO kit set on my browser profile', async() => {
+      expect.assertions(1);
+      const props = defaultProps({
+        displayAs: LoginVariations.SIGN_IN,
+        ssoProvider,
+      });
+
+      const page = new LoginPage(props);
+      await waitFor(() => {});
+
+      expect(page.azureLoginButton).toBeTruthy();
+    });
+
+    it('As AN I can use the SSO login feature to sign in to Passbolt', async() => {
+      expect.assertions(4);
+
+      let signInPromiseResolver = null;
+      const props = defaultProps({
+        displayAs: LoginVariations.SIGN_IN,
+        onSsoSignIn: jest.fn().mockImplementation(() => new Promise(resolve => {
+          signInPromiseResolver = resolve;
+        })),
+        ssoProvider,
+      });
+
+      const page = new LoginPage(props);
+      await waitFor(() => {});
+
+      expect(page.azureLoginButton).toBeTruthy();
+
+      await page.clickOnSsoLogin();
+      expect(page.azureLoginButton.classList.contains('disabled')).toBeTruthy();
+
+      expect(props.onSsoSignIn).toHaveBeenCalledTimes(1);
+
+      await signInPromiseResolver();
+
+      expect(page.azureLoginButton.classList.contains('disabled')).toBeFalsy();
+    });
+  });
 });

package/src/react-extension/components/AuthenticationLogin/Login/Login.test.page.js

@@ -86,6 +86,13 @@ export default class LoginPage {
     return this._page.container.querySelector('.form-actions a');
   }
 
+  /**
+   * Returns the Azure SSO login button element
+   */
+  get azureLoginButton() {
+    return this._page.container.querySelector('.sso-login-form .sso-login-button');
+  }
+
   /**
    * Returns true if the user can change something like the token code
    */
@@ -152,4 +159,13 @@ export default class LoginPage {
     fireEvent.click(this.secondaryActionLink, leftClick);
     await waitFor(inProgressFn);
   }
+
+  /**
+   * Click on the secondary action link.
+   */
+  async clickOnSsoLogin(inProgressFn = () => {}) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.azureLoginButton, leftClick);
+    await waitFor(inProgressFn);
+  }
 }

package/src/react-extension/components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxMain.js

@@ -43,6 +43,8 @@ class OrchestrateLoginBoxMain extends Component {
           onSignIn={this.props.authenticationLoginContext.signIn}
           onCheckPassphrase={this.props.authenticationLoginContext.checkPassphrase}
           onSecondaryActionClick={this.props.authenticationLoginContext.needHelpCredentialsLost}
+          onSsoSignIn={this.props.authenticationLoginContext.handleSsoSignIn}
+          ssoProvider={this.props.authenticationLoginContext.getSsoProvider()}
         />;
       case AuthenticationLoginWorkflowStates.ACCEPT_NEW_SERVER_KEY:
         return <AcceptLoginServerKeyChange

package/src/react-extension/components/AuthenticationSetup/SetupAuthentication/SetupAuthentication.js

@@ -79,6 +79,10 @@ class SetupAuthentication extends Component {
         return <ChooseSecurityToken
           onComplete={this.props.authenticationSetupContext.chooseSecurityToken}
         />;
+      case AuthenticationSetupWorkflowStates.CONFIGURING_SSO:
+        return <LoadingSpinner
+          title={<Trans>Configuring SSO access, please wait...</Trans>}
+        />;
       case AuthenticationSetupWorkflowStates.COMPLETING_SETUP:
         return <LoadingSpinner
           title={<Trans>Completing setup, please wait...</Trans>}

package/src/react-extension/components/Common/Error/ApiError/ApiError.js

@@ -0,0 +1,119 @@
+/**
+ * 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.9.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import AnimatedFeedback from "../../../../../shared/components/Icons/AnimatedFeedback";
+import Icon from "../../../../../shared/components/Icons/Icon";
+
+class ApiError extends Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindCallbacks();
+  }
+
+  get defaultState() {
+    return {
+      isReady: false,
+      displayLogs: false,
+      errorDetails: "",
+    };
+  }
+
+  /**
+   * Bind callbacks methods
+   * @return {void}
+   */
+  bindCallbacks() {
+    this.handleDisplayLogsClick = this.handleDisplayLogsClick.bind(this);
+  }
+
+  /**
+   * ComponentDidMount
+   * Invoked immediately after component is inserted into the tree
+   * @return {void}
+   */
+  componentDidMount() {
+    const errorDetailNode = document.getElementById("api-error-details");
+    const state = {
+      isReady: true,
+      errorDetails: errorDetailNode?.textContent
+    };
+
+    this.setState(state);
+  }
+
+  /**
+   * Handles the click on the display logs button.
+   */
+  handleDisplayLogsClick() {
+    this.setState({displayLogs: !this.state.displayLogs});
+  }
+
+  /**
+   * Returns true after the initial load of the page
+   * @returns {boolean}
+   */
+  isReady() {
+    return this.state.isReady;
+  }
+
+  /**
+   * Render the component
+   * @return {JSX}
+   */
+  render() {
+    return (
+      <div id="container" className="container api-error page">
+        <div className="content">
+          <div className="header">
+            <div className="logo"><span className="visually-hidden">Passbolt</span></div>
+          </div>
+          <div className="api-error-card">
+            {this.isReady() &&
+              <>
+                <AnimatedFeedback name="attention"/>
+                <p>
+                  <Trans>Something went wrong!</Trans><br/>
+                  <Trans>Please try again later or contact your administrator.</Trans>
+                </p>
+                <div className="accordion-header">
+                  <a onClick={this.handleDisplayLogsClick}>
+                    <Icon name={this.state.displayLogs ? "caret-down" : "caret-right"}/> <Trans>Logs</Trans>
+                  </a>
+                </div>
+                {this.state.displayLogs &&
+                  <div className="accordion-content">
+                    <textarea readOnly={true} value={this.state.errorDetails}/>
+                  </div>
+                }
+              </>
+            }
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ApiError.propTypes = {
+  t: PropTypes.func // the translation function
+};
+
+export default withTranslation("common")(ApiError);