passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/contexts/Administration/AdministrationInternationalizationContext/AdministrationInternationalizationContext.js

@@ -0,0 +1,194 @@
+/**
+ * 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.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import {withAppContext} from "../../AppContext";
+import InternationalisationService from '../../../../shared/services/api/Internationalisation/InternationalisationService';
+
+/**
+ * The Administration Internationalization Context
+ * @type {React.Context<Object>}
+ */
+export const AdminInternationalizationContext = React.createContext({
+  getCurrentLocale: () => {}, // Returns settings saved
+  getLocale: () => {}, // Returns settings for UI changes
+  supportedLocales: () => {}, // Return supported locales
+  setLocale: () => {}, // Set the settings object with changes
+  hasLocaleChanges: () => {}, // Check if the settings has changes
+  findLocale: () => {}, // Find the current Internalisation settings and store it in the state
+  save: () => {}, // Save settings
+  setProcessing: () => {}, //Update processing object
+  isProcessing: () => {}, // returns true if a process is running and the UI must be disabled
+  clearContext: () => {}, // put the data to its default state value
+});
+
+/**
+ * The Administration Internationalization context provider
+ */
+export class AdminInternationalizationContextProvider extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    const apiClientOptions = props.context.getApiClientOptions();
+    this.internalisationService = new InternationalisationService(apiClientOptions);
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    return {
+      currentLocale: null, // The current locale
+      locale: "en-UK", // Change done to the current
+      processing: true, // Context is processing data
+      getCurrentLocale: this.getCurrentLocale.bind(this), // Returns locale saved
+      getLocale: this.getLocale.bind(this), // Returns locale for UI changes
+      setLocale: this.setLocale.bind(this),  // Set the locale with changes
+      findLocale: this.findLocale.bind(this), // Find the current settings and store it in the state
+      hasLocaleChanges: this.hasLocaleChanges.bind(this), // Check if locale has changes
+      isProcessing: this.isProcessing.bind(this), // returns true if a process is running and the UI must be disabled
+      setProcessing: this.setProcessing.bind(this),
+      save: this.save.bind(this), // Save the policy changes
+      clearContext: this.clearContext.bind(this), // put the data to its default state value
+    };
+  }
+
+  /**
+   * Find locale from API
+   * @returns {string}
+   */
+  findLocale() {
+    this.setProcessing(true);
+    const result = this.props.context.siteSettings.locale;
+    //Init saved locale
+    this.setState({currentLocale: result});
+    //Init locale which will interact with UI
+    this.setState({locale: result});
+
+    this.setProcessing(false);
+  }
+
+  /**
+   * Returns the locale actually saved
+   * @returns {object}
+   */
+  getCurrentLocale() {
+    return this.state.currentLocale;
+  }
+
+  /**
+   * Returns the locale that have been fetch previously.
+   * @returns {object}
+   */
+  getLocale() {
+    return this.state.locale;
+  }
+
+  /**
+   * Handle locale changes.
+   * @params {ReactEvent} The react event
+   * @returns {void}
+   */
+  async setLocale(locale) {
+    await this.setState({locale});
+  }
+
+  /**
+   * Returns true when the data is under processing
+   * @returns {boolean}
+   *
+   */
+  isProcessing() {
+    return this.state.processing;
+  }
+
+  /**
+   * Handle processing change.
+   * @params {Boolean} processing value
+   * @returns {void}
+   */
+  setProcessing(processing) {
+    this.setState({processing});
+  }
+
+  /**
+   * Check if there are changes to apply
+   * @returns {Boolean}
+   */
+  hasLocaleChanges() {
+    return this.state.locale !== this.state.currentLocale;
+  }
+
+  /**
+   * Puts the state to its default in order to avoid keeping the data users didn't want to save.
+   */
+  clearContext() {
+    const {currentLocale, locale, processing} = this.defaultState;
+    this.setState({
+      currentLocale, locale, processing
+    });
+  }
+
+  /**
+   * Whenever the save has been requested
+   */
+  async save() {
+    this.setProcessing(true);
+    await this.internalisationService.save({value: this.state.locale});
+    this.props.context.onRefreshLocaleRequested(this.state.locale);
+    this.findLocale();
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <AdminInternationalizationContext.Provider value={this.state}>
+        {this.props.children}
+      </AdminInternationalizationContext.Provider>
+    );
+  }
+}
+
+AdminInternationalizationContextProvider.propTypes = {
+  context: PropTypes.any, // The application context
+  children: PropTypes.any, // The children components
+};
+
+export default withAppContext(AdminInternationalizationContextProvider);
+
+/**
+ * Resource Workspace Context Consumer HOC
+ * @param WrappedComponent
+ */
+export function withAdminInternationalization(WrappedComponent) {
+  return class WithAdminInternationalization extends React.Component {
+    render() {
+      return (
+        <AdminInternationalizationContext.Consumer>
+          {
+            adminInternationalizationContext => <WrappedComponent adminInternationalizationContext={adminInternationalizationContext} {...this.props} />
+          }
+        </AdminInternationalizationContext.Consumer>
+      );
+    }
+  };
+}

package/src/react-extension/contexts/Administration/AdministrationInternationalizationContext/AdministrationInternationalizationContext.test.js

@@ -0,0 +1,111 @@
+/**
+ * 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.0
+ */
+
+import {defaultLocale, defaultProps} from "../../../../react-extension/components/Administration/DisplayInternationalizationAdministration/DisplayInternationalizationAdministration.test.data";
+import {AdminInternationalizationContextProvider} from './AdministrationInternationalizationContext';
+import {mockApiResponse} from '../../../../../test/mocks/mockApiResponse';
+import {enableFetchMocks} from 'jest-fetch-mock';
+
+const frLocale = "fr-Fr";
+
+describe("AdministrationInternationalizationContext", () => {
+  let adminInternationalizationContext; // The AdministrationInternationalizationContext to test
+  const props = defaultProps(); // The props to pass
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    adminInternationalizationContext = new AdminInternationalizationContextProvider(props);
+    const setStateMock = state => adminInternationalizationContext.state = Object.assign(adminInternationalizationContext.state, state);
+    jest.spyOn(adminInternationalizationContext, "setState").mockImplementation(setStateMock);
+    enableFetchMocks();
+  });
+
+
+  describe("AdministrationInternationalizationContext::findLocale", () => {
+    it("should get the current locale and store it in its state", async() => {
+      await adminInternationalizationContext.findLocale();
+
+      expect.assertions(3);
+
+      expect(adminInternationalizationContext.getLocale()).toEqual(defaultLocale);
+      expect(adminInternationalizationContext.getCurrentLocale()).toEqual(defaultLocale);
+      expect(adminInternationalizationContext.isProcessing()).toBeFalsy();
+    });
+  });
+
+
+  describe("AdministrationInternationalizationContext::hasLocaleChanges", () => {
+    it("should return true if settings is different then current setting", () => {
+      adminInternationalizationContext.setLocale(frLocale);
+
+      expect.assertions(1);
+
+      expect(adminInternationalizationContext.hasLocaleChanges()).toBeTruthy();
+    });
+
+    it("should return false if settings is different then current setting", async() => {
+      await adminInternationalizationContext.findLocale();
+
+      adminInternationalizationContext.setLocale(frLocale);
+      adminInternationalizationContext.setLocale(defaultLocale);
+
+      expect.assertions(1);
+
+      expect(adminInternationalizationContext.hasLocaleChanges()).toBeFalsy();
+    });
+  });
+
+
+  describe("AdministrationInternationalizationContext::clearContext", () => {
+    it("should clear the context and set it by default", () => {
+      adminInternationalizationContext.setLocale(frLocale);
+
+      adminInternationalizationContext.clearContext();
+
+      expect.assertions(3);
+
+      expect(adminInternationalizationContext.isProcessing()).toBeTruthy();
+      expect(adminInternationalizationContext.getCurrentLocale()).toBe(null);
+      expect(adminInternationalizationContext.getLocale()).toBe(defaultLocale);
+    });
+  });
+
+  describe("AdministrationInternationalizationContext::setLocale", () => {
+    it("should update locale object and not the current object", async() => {
+      await adminInternationalizationContext.findLocale();
+      adminInternationalizationContext.setLocale(frLocale);
+
+      expect.assertions(2);
+
+      expect(adminInternationalizationContext.getCurrentLocale()).toBe(defaultLocale);
+      expect(adminInternationalizationContext.getLocale()).toBe(frLocale);
+    });
+  });
+
+  describe("AdministrationInternationalizationContext::save", () => {
+    it("should save locale and refresh texts", async() => {
+      fetch.doMockOnceIf(/locale\/settings/, () => mockApiResponse({}));
+      const findLocale = jest.spyOn(adminInternationalizationContext, "findLocale").mockImplementation();
+
+      await adminInternationalizationContext.save();
+
+      expect.assertions(3);
+
+      expect(adminInternationalizationContext.isProcessing()).toBeTruthy();
+      expect(findLocale).toHaveBeenCalled();
+      expect(JSON.parse(fetch.mock.calls[0][1].body)).toEqual({value: defaultLocale});
+    });
+  });
+});
+

package/src/react-extension/contexts/Administration/AdministrationMfa/AdministrationMfaContext.js

@@ -0,0 +1,265 @@
+/**
+ * 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.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import {withAppContext} from "../../AppContext";
+import MfaModel from '../../../../shared/models/Mfa/MfaModel';
+import MfaDTO from '../../../../shared/models/Mfa/MfaDTO';
+import MfaService from "../../../../shared/services/api/Mfa/MfaService";
+
+/**
+ * The Administration Email Notification Context
+ * @type {React.Context<Object>}
+ */
+export const AdminMfaContext = React.createContext({
+  getCurrentSettings: () => {}, // Returns settings saved
+  getSettings: () => {}, // Returns settings for UI changes
+  setSettings: () => {}, // Set the settings object with changes
+  hasSettingsChanges: () => {}, // Check if the policy has changes
+  findMfaSettings: () => {}, // Find the current Mfa settings and store it in the state
+  save: () => {}, // Save settings
+  setProcessing: () => {}, //Update processing object
+  isProcessing: () => {}, // returns true if a process is running and the UI must be disabled
+  getErrors: () => {}, // Return current errors
+  setError: () => {}, // Init errors object message
+  isSubmitted: () => {}, // returns the value submitted
+  setSubmitted: () => {}, // Set the submitted variab
+  setErrors: () => {}, // Set errors to object object
+  clearContext: () => {}, // put the data to its default state value
+});
+
+/**
+ * The Administration Mfa context provider
+ */
+export class AdminMfaContextProvider extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    const apiClientOptions = props.context.getApiClientOptions();
+    this.mfaService = new MfaService(apiClientOptions);
+  }
+
+  /**
+   * Returns the default component state
+   */
+  get defaultState() {
+    return {
+      errors: this.initErrors(),
+      currentSettings: null, // The current settings
+      settings: new MfaModel(), // Change done to the settings object
+      submitted: false, // The informations about the form state
+      processing: true, // Context is processing data
+      getCurrentSettings: this.getCurrentSettings.bind(this), // Returns settings saved
+      getSettings: this.getSettings.bind(this), // Returns settings for UI changes
+      setSettings: this.setSettings.bind(this),  // Set the settings object with changes
+      findMfaSettings: this.findMfaSettings.bind(this), // Find the current settings and store it in the state
+      hasSettingsChanges: this.hasSettingsChanges.bind(this), // Check if setting has changes
+      isProcessing: this.isProcessing.bind(this), // returns true if a process is running and the UI must be disabled
+      isSubmitted: this.isSubmitted.bind(this), // returns the value submitted
+      setSubmitted: this.setSubmitted.bind(this), // Set the submitted variable
+      setProcessing: this.setProcessing.bind(this),
+      save: this.save.bind(this), // Save the policy changes
+      getErrors: this.getErrors.bind(this), // Return current errors
+      setError: this.setError.bind(this), // Set an error to object object
+      setErrors: this.setErrors.bind(this), // Set errors to object object
+      clearContext: this.clearContext.bind(this), // put the data to its default state value
+    };
+  }
+
+  /**
+   * init the errors object
+   * @return {Promise<void>}
+   */
+  initErrors() {
+    return {
+      yubikeyClientIdentifierError: null, // yubikey client identifier error
+      yubikeySecretKeyError: null, // yubikey secret key error
+      duoHostnameError: null, // duo hostname error
+      duoIntegrationKeyError: null, // duo integration key error
+      duoSaltError: null, // duo salt error
+      duoSecretKeyError: null, // duo secret key error
+    };
+  }
+
+  /**
+   * Find the Mfa settings
+   * @return {Promise<void>}
+   */
+  async findMfaSettings() {
+    this.setProcessing(true);
+    const result = await this.mfaService.findAllSettings();
+    const currentSettings = new MfaModel(result);
+    //Init saved setting
+    this.setState({currentSettings});
+    //Init setting which will interact with UI
+    this.setState({settings: Object.assign({}, currentSettings)});
+
+    this.setProcessing(false);
+  }
+
+  /**
+   * Returns the setting actually saved inside DB
+   * @returns {object}
+   */
+  getCurrentSettings() {
+    return this.state.currentSettings;
+  }
+
+  /**
+   * Returns the Mfa settings that have been fetch previously.
+   * @returns {object}
+   */
+  getSettings() {
+    return this.state.settings;
+  }
+
+  /**
+   * Handle settings changes.
+   * @params {ReactEvent} The react event
+   * @returns {void}
+   */
+  async setSettings(key, value) {
+    const newSettings = Object.assign({}, this.state.settings, {[key]: value});
+    await this.setState({settings: newSettings});
+  }
+
+  /**
+   * Returns true when the data is under processing
+   * @returns {boolean}
+   *
+   */
+  isProcessing() {
+    return this.state.processing;
+  }
+
+  /**
+   * Handle processing change.
+   * @params {Boolean} processing value
+   * @returns {void}
+   */
+  setProcessing(processing) {
+    this.setState({processing});
+  }
+
+  /**
+   * Check if there are changes to apply
+   * @returns {Boolean}
+   */
+  hasSettingsChanges() {
+    return JSON.stringify(this.state.currentSettings) !== JSON.stringify(this.state.settings);
+  }
+
+  /**
+   * return true if the form has been submitted
+   * @returns {Boolean}
+   */
+  isSubmitted() {
+    return this.state.submitted;
+  }
+
+  /**
+   * rchange value for submitted
+   * @returns {Boolean}
+   */
+  setSubmitted(submitted) {
+    this.setState({submitted});
+  }
+
+  /**
+   * Puts the state to its default in order to avoid keeping the data users didn't want to save.
+   */
+  clearContext() {
+    const {currentSettings, settings, processing} = this.defaultState;
+    this.setState({
+      currentSettings, settings, processing
+    });
+  }
+
+  /**
+   * Whenever the save has been requested
+   */
+  async save() {
+    this.setProcessing(true);
+    const newSettings = new MfaDTO(this.state.settings);
+    await this.mfaService.save(newSettings);
+    await this.findMfaSettings();
+  }
+
+  /**
+   * return the errors object
+   */
+  getErrors() {
+    return this.state.errors;
+  }
+
+  /**
+   * set an error to object
+   */
+  setError(key, value) {
+    const errors = Object.assign({}, this.state.errors, {[key]: value});
+    this.setState({errors});
+  }
+
+
+  /**
+   * set errors to object
+   */
+  setErrors(newErrors, callback = () => {}) {
+    const errors = Object.assign({}, this.state.errors, newErrors);
+    return this.setState({errors}, callback);
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <AdminMfaContext.Provider value={this.state}>
+        {this.props.children}
+      </AdminMfaContext.Provider>
+    );
+  }
+}
+
+AdminMfaContextProvider.propTypes = {
+  context: PropTypes.any, // The application context
+  children: PropTypes.any, // The children components
+};
+
+export default withAppContext(AdminMfaContextProvider);
+
+
+/**
+ * Resource Workspace Context Consumer HOC
+ * @param WrappedComponent
+ */
+export function withAdminMfa(WrappedComponent) {
+  return class WithAdminMfa extends React.Component {
+    render() {
+      return (
+        <AdminMfaContext.Consumer>
+          {
+            adminMfaContext => <WrappedComponent adminMfaContext={adminMfaContext} {...this.props} />
+          }
+        </AdminMfaContext.Consumer>
+      );
+    }
+  };
+}