passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -0,0 +1,52 @@
+/**
+ * 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
+ */
+
+/**
+ * Unit tests on AcceptLoginServerKeyChange in regard of specifications
+ */
+import AcceptLoginServerKeyChangePage from "./AcceptLoginServerKeyChange.test.page";
+import {defaultProps} from "./AcceptLoginServerKeyChange.test.data";
+
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("AcceptLoginServerKeyChange", () => {
+  let page, props;
+
+  beforeEach(() => {
+    props = defaultProps(); // The props to pass
+    page = new AcceptLoginServerKeyChangePage(props);
+  });
+
+  it('As AN I should be aware to identify the new server key by its fingerprint', async() => {
+    expect.assertions(1);
+    expect(page.serverKeyFingerprint.length).toBeGreaterThan(0);
+  });
+
+  it('As AN I should be able to accept a new server key change', async() => {
+    expect.assertions(1);
+    await page.toggleChecked();
+    await page.accept();
+    expect(props.onAccept).toHaveBeenCalled();
+  });
+
+  it('As AN I should be not able to accept a new server key change without checking it before', async() => {
+    expect.assertions(2);
+    await page.accept();
+    expect(props.onAccept).not.toHaveBeenCalled();
+    expect(page.checkedInputErrorMessage).toBe("You must accept the new server key");
+  });
+});

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

@@ -0,0 +1,82 @@
+/**
+ * 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.6.0
+ */
+
+import {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import AcceptLoginServerKeyChange from "./AcceptLoginServerKeyChange";
+
+/**
+ * The AcceptLoginServerKeyChange component represented as a page
+ */
+export default class AcceptLoginServerKeyChangePage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <MockTranslationProvider>
+        <AcceptLoginServerKeyChange {...props}/>
+      </MockTranslationProvider>
+    );
+  }
+
+  /**
+   * Returns the check input
+   */
+  get serverKeyFingerprint() {
+    return this._page.container.querySelector('pre')?.textContent;
+  }
+
+  /**
+   * Returns the check input
+   */
+  get checkedInput() {
+    return this._page.container.querySelector('#accept-new-key');
+  }
+
+  /**
+   * Returns the checked input error message
+   */
+  get checkedInputErrorMessage() {
+    return this._page.container.querySelector(".has-not-accepted.error-message")?.textContent;
+  }
+
+  /**
+   * Returns the accept button element
+   */
+  get acceptButton() {
+    return this._page.container.querySelector('.button.primary');
+  }
+
+  /**
+   * Toggle the checked flag value
+   */
+  async toggleChecked() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.checkedInput, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Accept the new key
+   * @param inProgressFn The function called while saving
+   */
+  async accept(inProgressFn = () => {}) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.acceptButton, leftClick);
+    await waitFor(inProgressFn);
+  }
+}

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.test.stories.js

@@ -1,34 +1,41 @@
+/**
+ * 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 from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AcceptLoginServerKeyChange from "./AcceptLoginServerKeyChange";
-import {AuthenticationContext} from "../../../contexts/AuthenticationContext";
-
+import {defaultProps} from "./AcceptLoginServerKeyChange.test.data";
 
 export default {
   title: 'Passbolt/AuthenticationLogin/AcceptLoginServerKeyChange',
   component: AcceptLoginServerKeyChange
 };
 
-const context = {
-  onGetServerKeyRequested: () => ({fingerprint: "0c1d1761110d1e33c9006d1a5b1b332ed06426d3"})
-};
-
-
 const Template = args =>
-  <AuthenticationContext.Provider value={context}>
-    <MemoryRouter initialEntries={['/']}>
-      <div id="container" className="container page login">
-        <div className="content">
-          <div className="login-form">
-            <Route component={routerProps => <AcceptLoginServerKeyChange {...args} {...routerProps}/>}></Route>
-          </div>
+  <MemoryRouter initialEntries={['/']}>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <Route component={routerProps => <AcceptLoginServerKeyChange {...args} {...routerProps}/>}/>
         </div>
       </div>
-    </MemoryRouter>
-  </AuthenticationContext.Provider>;
+    </div>
+  </MemoryRouter>;
 
 
 export const Initial = Template.bind({});
+Initial.args = defaultProps();
 Initial.parameters = {
   css: "ext_authentication"
 };

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

@@ -12,16 +12,21 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import NotifyError from "../../Common/Error/NotifyError/NotifyError";
-import {withAuthenticationContext} from "../../../contexts/AuthenticationContext";
 import PropTypes from "prop-types";
-import {withDialog} from "../../../contexts/DialogContext";
 import UserAvatar from "../../Common/Avatar/UserAvatar";
-import {Link} from "react-router-dom";
 import {Trans, withTranslation} from "react-i18next";
 import Icon from "../../Common/Icons/Icon";
 import {withAppContext} from "../../../contexts/AppContext";
 
+/**
+ * The component display variations.
+ * @type {Object}
+ */
+export const LoginVariations = {
+  SIGN_IN: 'Sign in',
+  ACCOUNT_RECOVERY: 'Account recovery'
+};
+
 /**
  * This component allows the user to log in with his account
  */
@@ -37,7 +42,6 @@ class Login extends Component {
     this.createReferences();
   }
 
-
   /**
    * Returns the default state
    */
@@ -59,14 +63,6 @@ class Login extends Component {
     };
   }
 
-  /**
-   * Returns true if there is data enough to be rendered
-   * @returns {boolean}
-   */
-  get isReady() {
-    return Boolean(this.props.authenticationContext.loginInfo);
-  }
-
   /**
    * Returns true if the user can perform actions on the component
    * @returns {boolean}
@@ -103,30 +99,49 @@ class Login extends Component {
    * Returns the user full name
    */
   get fullname() {
-    return this.props.authenticationContext.loginInfo.userSettings.fullName;
+    return this.props.userSettings?.fullName
+      || `${this.props.account?.first_name} ${this.props.account?.last_name}`;
   }
 
   /**
    * Returns the username
    */
   get username() {
-    return this.props.authenticationContext.loginInfo.userSettings.username;
+    return this.props.userSettings?.username || this.props.account?.username;
   }
 
   /**
    * Returns the security token code of the suer
    */
   get securityTokenCode() {
-    return this.props.authenticationContext.loginInfo.userSettings.getSecurityTokenCode();
+    return this.props.userSettings?.getSecurityTokenCode()
+      ||  this.props.account?.security_token?.code;
+  }
+
+  /**
+   * Get security token color
+   * @return {string}
+   */
+  get securityTokenColor() {
+    return this.props.userSettings?.getSecurityTokenBackgroundColor()
+      || this.props.account?.security_token?.color;
+  }
+
+  /**
+   * Get security token text color
+   * @return {string}
+   */
+  get securityTokenTextColor() {
+    return this.props.userSettings?.getSecurityTokenTextColor()
+      || this.props.account?.security_token?.textcolor;
   }
 
   /**
    * Returns the style of the security token (color and text color)
    */
   get securityTokenStyle() {
-    const {userSettings} = this.props.authenticationContext.loginInfo;
-    const inverseStyle =  {background: userSettings.getSecurityTokenTextColor(), color: userSettings.getSecurityTokenBackgroundColor()};
-    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    const inverseStyle =  {background: this.securityTokenTextColor, color: this.securityTokenColor};
+    const fullStyle =  {background: this.securityTokenColor, color: this.securityTokenTextColor};
     return this.state.hasPassphraseFocus ? inverseStyle : fullStyle;
   }
 
@@ -135,9 +150,8 @@ class Login extends Component {
    * @return {Object}
    */
   get passphraseInputStyle() {
-    const {userSettings} = this.props.authenticationContext.loginInfo;
     const emptyStyle =  {background: "", color: ""};
-    const fullStyle =  {background: userSettings.getSecurityTokenBackgroundColor(), color: userSettings.getSecurityTokenTextColor()};
+    const fullStyle =  {background: this.securityTokenColor, color: this.securityTokenTextColor};
     return this.state.hasPassphraseFocus ? fullStyle : emptyStyle;
   }
 
@@ -145,7 +159,8 @@ class Login extends Component {
    * Returns the trusted domain
    */
   get trustedDomain() {
-    return this.props.authenticationContext.loginInfo.userSettings.getTrustedDomain();
+    return this.props.userSettings?.getTrustedDomain()
+      || this.props.account?.domain;
   }
 
   /**
@@ -169,7 +184,7 @@ class Login extends Component {
 
   /**
    * Whenever the users submits his passphrase
-   * @param event Dom event
+   * @param {Event} event Dom event
    */
   async handleSubmit(event) {
     event.preventDefault();
@@ -177,8 +192,9 @@ class Login extends Component {
 
     if (this.isValid) {
       await this.toggleProcessing();
-      await this.check()
-        .then(this.login.bind(this));
+      if (await this.checkPassphrase()) {
+        await this.login();
+      }
     }
   }
 
@@ -212,7 +228,7 @@ class Login extends Component {
    * Whenever the user tosggles the remember me flag
    */
   async handleToggleRememberMe() {
-    await this.toggleRemmemberMe();
+    await this.toggleRememberMe();
   }
 
   /**
@@ -222,55 +238,43 @@ class Login extends Component {
     this.toggleObfuscate();
   }
 
-  /**
-   * Whenever the user needs help because he lost his passphrase
-   */
-  async onPassphraseLost() {
-    await this.props.authenticationContext.onPassphraseLost();
-  }
-
   /**
    * Check the private gpg key passphrase
-   */
-  async check() {
-    await this.props.authenticationContext.onCheckLoginPassphraseRequested(this.state.passphrase)
-      .catch(this.onCheckFailure.bind(this));
+   * @returns {Promise<boolean>}
+   */
+  async checkPassphrase() {
+    try {
+      await this.props.onCheckPassphrase(this.state.passphrase);
+      return true;
+    } catch (error) {
+      await this.onCheckPassphraseFailure(error);
+      return false;
+    }
   }
 
   /**
    * Whenever the passphrase check failed
-   * @param error The error
+   * @param {Error} error The error
+   * @throw {Error} If an unexpected errors hits the component. Errors not of type: InvalidMasterPasswordError, GpgKeyError.
    */
-  onCheckFailure(error) {
+  onCheckPassphraseFailure(error) {
     // It can happen when the user has entered the wrong passphrase.
     if (error.name === "InvalidMasterPasswordError") {
       this.setState({actions: {processing: false}, errors: {invalidPassphrase: true}});
     } else if (error.name === 'GpgKeyError') {
       this.setState({actions: {processing: false}, errors: {invalidGpgKey: true}});
     } else {
-      this.setState({actions: {processing: false}});
-      const ErrorDialogProps = {message: error.message};
-      this.props.dialogContext.open(NotifyError, ErrorDialogProps);
+      // Only controlled errors should hit the component.
+      throw error;
     }
-    return Promise.reject(error);
   }
 
   /**
-   * Logs the user
+   * Sign in the user
    * @returns {Promise<void>}
    */
   async login() {
-    await this.props.authenticationContext.onLoginRequested(this.state.passphrase, this.state.rememberMe);
-  }
-
-  /**
-   * Whenever the login failed
-   * @param error The error
-   */
-  onLoginFailure(error) {
-    const ErrorDialogProps = {message: error.message};
-    this.props.dialogContext.open(NotifyError, ErrorDialogProps);
-    return Promise.reject(error);
+    await this.props.onSignIn(this.state.passphrase, this.state.rememberMe);
   }
 
   /**
@@ -284,7 +288,7 @@ class Login extends Component {
   /**
    * Toggle the remember me flag value
    */
-  async toggleRemmemberMe() {
+  async toggleRememberMe() {
     await this.setState({rememberMe: !this.state.rememberMe});
   }
 
@@ -329,104 +333,111 @@ class Login extends Component {
   render() {
     const processingClassName = this.isProcessing ? 'processing' : '';
     return (
-      <>
-        {this.isReady &&
-          <div className="login">
-            <div className="login-user">
-              <UserAvatar baseUrl={this.trustedDomain} className="big avatar user-avatar"/>
-              <p className="login-user-name">{this.fullname}</p>
-              <p className="login-user-email">{this.username}</p>
+      <div className="login">
+        <div className="login-user">
+          <UserAvatar user={this.props.account?.user} baseUrl={this.trustedDomain} className="big avatar user-avatar"/>
+          <p className="login-user-name">{this.fullname}</p>
+          <p className="login-user-email">{this.username}</p>
+        </div>
+
+        <form acceptCharset="utf-8" onSubmit={this.handleSubmit} className="enter-passphrase">
+          <div className={`input text required ${this.hasErrors ? "error" : ""}`}>
+            <label htmlFor="passphrase">
+              <Trans>Passphrase</Trans>
+            </label>
+            <div className="password with-token">
+              <input
+                id="passphrase"
+                ref={this.passphraseInputRef}
+                type={this.state.isObfuscated ? "password" : "text"}
+                name="passphrase"
+                placeholder={this.translate('Passphrase')}
+                className="login-passphrase-input"
+                style={this.passphraseInputStyle}
+                value={this.state.passphrase}
+                onChange={this.handleChangePassphrase}
+                onFocus={this.handleFocusPassphrase}
+                onBlur={this.handleBlurPassphrase}
+                disabled={!this.areActionsAllowed}
+                autoFocus={true}
+                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.securityTokenStyle}>
+                {this.securityTokenCode}
+              </span>
             </div>
-
-            <form acceptCharset="utf-8" onSubmit={this.handleSubmit} className="enter-passphrase">
-              <div className={`input text required ${this.hasErrors ? "error" : ""}`}>
-                <label htmlFor="passphrase">
-                  <Trans>Passphrase</Trans>
-                </label>
-                <div className="password with-token">
-                  <input
-                    id="passphrase"
-                    ref={this.passphraseInputRef}
-                    type={this.state.isObfuscated ? "password" : "text"}
-                    name="passphrase"
-                    placeholder={this.translate('Passphrase')}
-                    className="login-passphrase-input"
-                    style={this.passphraseInputStyle}
-                    value={this.state.passphrase}
-                    onChange={this.handleChangePassphrase}
-                    onFocus={this.handleFocusPassphrase}
-                    onBlur={this.handleBlurPassphrase}
-                    disabled={!this.areActionsAllowed}
-                    autoFocus={true}
-                    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.securityTokenStyle}>
-                    {this.securityTokenCode}
-                  </span>
-                </div>
-                {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></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>
+            {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}>
-                  <Trans>Sign in</Trans>
-                </button>
-                <Link
-                  to={{pathname: `${this.trustedDomain}/users/recover?locale=${this.props.context.locale}`}}
-                  target="_parent"
-                  rel="noopener noreferrer">
-                  <Trans>Or switch to another account.</Trans>
-                </Link>
-              </div>
-            </form>
+              {this.state.errors.invalidPassphrase &&
+              <div className="invalid-passphrase error-message"><Trans>The passphrase is invalid.</Trans></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>
+          }
+
+          <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>
     );
   }
 }
 
+Login.defaultProps = {
+  displayAs: LoginVariations.SIGN_IN,
+};
+
 Login.propTypes = {
+  displayAs: PropTypes.oneOf([
+    LoginVariations.SIGN_IN,
+    LoginVariations.ACCOUNT_RECOVERY,
+  ]), // Defines how the form should be displayed and behaves
   context: PropTypes.any, // The application context
-  authenticationContext: PropTypes.any, // The authentication 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
-  dialogContext: PropTypes.any, // The dialog context
+  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
+  onSecondaryActionClick: PropTypes.func, // Callback to trigger when the user clicks on the secondary action link.
   t: PropTypes.func, // The translation function
 };
-export default withAppContext(withAuthenticationContext(withDialog(withTranslation('common')(Login))));
+export default withAppContext(withTranslation('common')(Login));