passbolt-styleguide/src/react-extension/contexts/UserSettingsContext.js

Passbolt styleguide contains common styling assets used by the different sites, plugin, etc.

/**
 * 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.1.0
 */
import React from "react";
import PropTypes from "prop-types";
import { withAppContext } from "../../shared/context/AppContext/AppContext";

export const UserSettingsContext = React.createContext({
  state: null, // The state in the user settings process
  oldPassphrase: null, // The old passphrase to update
  onIntroductionPassphraseRequested: () => {}, // Whenever the introduction of the passphrase is requested
  onProvidePassphraseRequested: () => {}, // Whenever the provide passphrase is requested
  onCheckProvidePassphraseRequested: () => {}, // Whenever the check provide passphrase is requested
  onUpdatePassphraseRequested: () => {}, // Whenever the user wants to update the passphrase
  onGoToIntroductionPassphraseRequested: () => {}, // Whenever the user wants to go back to the passphrase introduction
  onDownloadRecoveryKitRequested: () => {}, // Whenever the user wants download the recovery kit.
  onUpdateSecurityTokenRequested: () => {}, // Whenever the user wants update the security token.
  onUpdateLocaleUserRequested: () => {}, // Whenever the update of the locale is requested.
});

/**
 * The related context provider
 */
export class UserSettingsContextProvider extends React.Component {
  /**
   * Default constructor
   * @param props The component props
   */
  constructor(props) {
    super(props);
    this.state = this.defaultState;
  }

  /**
   * Returns the default component state
   */
  get defaultState() {
    return {
      state: UserSettingsContextState.INITIAL_STATE,
      oldPassphrase: null,
      onIntroductionPassphraseRequested: this.onIntroductionPassphraseRequested.bind(this),
      onProvidePassphraseRequested: this.onProvidePassphraseRequested.bind(this),
      onCheckProvidePassphraseRequested: this.onCheckProvidePassphraseRequested.bind(this),
      onUpdatePassphraseRequested: this.onUpdatePassphraseRequested.bind(this),
      onGoToIntroductionPassphraseRequested: this.onGoToIntroductionPassphraseRequested.bind(this),
      onDownloadRecoveryKitRequested: this.onDownloadRecoveryKitRequested.bind(this),
      onUpdateSecurityTokenRequested: this.onUpdateSecurityTokenRequested.bind(this),
      onUpdateLocaleUserRequested: this.handleUpdateLocaleUserRequested.bind(this),
    };
  }

  /**
   * Whenever the introduction passphrase is requested
   */
  onIntroductionPassphraseRequested() {
    this.setState({ state: UserSettingsContextState.PASSPHRASE_INTRODUCTION });
  }

  /**
   * Whenever the provide passphrase is requested
   */
  onProvidePassphraseRequested() {
    this.setState({ state: UserSettingsContextState.PASSPHRASE_TO_PROVIDE_REQUESTED });
  }

  /**
   * Whenever the check provide passphrase is requested
   * @param passphrase A passphrase
   */
  async onCheckProvidePassphraseRequested(passphrase) {
    await this.props.context.port.request("passbolt.auth.verify-passphrase", passphrase);
    this.setState({ state: UserSettingsContextState.PASSPHRASE_TO_PROVIDE_CHECKED, oldPassphrase: passphrase });
  }

  /**
   * Whenever the user wants to go back to the passphrase introduction
   */
  onGoToIntroductionPassphraseRequested() {
    this.setState({ state: UserSettingsContextState.PASSPHRASE_INTRODUCTION, oldPassphrase: null });
  }

  /**
   * Whenever the update passphrase is requested
   * @param {string} passphrase The new passphrase
   */
  async onUpdatePassphraseRequested(passphrase) {
    await this.props.context.port.request("passbolt.user.update-private-key", this.state.oldPassphrase, passphrase);
    this.setState({ state: UserSettingsContextState.PASSPHRASE_UPDATED, oldPassphrase: null });
  }

  /**
   * Whenever the download of the recovery kit is requested
   */
  async onDownloadRecoveryKitRequested() {
    await this.props.context.port.request("passbolt.keyring.download-my-private-key");
  }

  /**
   * Whenever the update security token is requested
   * @param securityTokenDto The security token DTO
   */
  async onUpdateSecurityTokenRequested(securityTokenDto) {
    await this.props.context.port.request("passbolt.users.update-security-token", securityTokenDto);
  }

  /**
   * Whenever the update of the locale is requested
   * @param localeDto The locale DTO
   */
  async handleUpdateLocaleUserRequested(localeDto) {
    await this.props.context.port.request("passbolt.locale.update-user-locale", localeDto);
  }

  /**
   * Render the component
   * @returns {JSX}
   */
  render() {
    return <UserSettingsContext.Provider value={this.state}>{this.props.children}</UserSettingsContext.Provider>;
  }
}

UserSettingsContextProvider.propTypes = {
  context: PropTypes.any, // The application context
  children: PropTypes.any, // The children components
};
export default withAppContext(UserSettingsContextProvider);

/**
 * UserSettings Context Consumer HOC
 * @param WrappedComponent
 */
export function withUserSettings(WrappedComponent) {
  return class withUserSettings extends React.Component {
    render() {
      return (
        <UserSettingsContext.Consumer>
          {(userSettingsContext) => <WrappedComponent userSettingsContext={userSettingsContext} {...this.props} />}
        </UserSettingsContext.Consumer>
      );
    }
  };
}

/**
 * The authentication types of state
 */
export const UserSettingsContextState = {
  INITIAL_STATE: "Initial State",
  PASSPHRASE_INTRODUCTION: "Passphrase Introduction",
  PASSPHRASE_TO_PROVIDE_REQUESTED: "Passphrase To Provide Requested",
  PASSPHRASE_TO_PROVIDE_CHECKED: "Passphrase To Provide Checked",
  PASSPHRASE_UPDATED: "Passphrase Updated",
};