passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationInternationalisationActions/DisplayAdministrationInternationalisationActions.js

@@ -0,0 +1,125 @@
+/**
+ * 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 {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../../shared/components/Icons/Icon";
+import {withActionFeedback} from "../../../../contexts/ActionFeedbackContext";
+import {withAdminInternationalization} from "../../../../contexts/Administration/AdministrationInternationalizationContext/AdministrationInternationalizationContext";
+
+
+
+/**
+ * This component is a container of multiple actions applicable on setting
+ */
+
+class DisplayAdministrationInternationalisationActions extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+  }
+
+  /**
+   * Handle save settings
+   */
+  async handleSaveClick() {
+    try {
+      await this.props.adminInternationalizationContext.save();
+      this.handleSaveSuccess();
+    } catch (error) {
+      this.handleSaveError(error);
+    } finally {
+      this.props.adminInternationalizationContext.setProcessing(false);
+    }
+  }
+
+  /**
+   * Is save button enable
+   * @returns {boolean}
+   */
+  isSaveEnabled() {
+    return !this.props.adminInternationalizationContext.isProcessing() && this.props.adminInternationalizationContext.hasLocaleChanges();
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSaveClick = this.handleSaveClick.bind(this);
+  }
+
+  /**
+   * Handle save operation success.
+   */
+  async handleSaveSuccess() {
+    await this.props.actionFeedbackContext.displaySuccess(this.props.t("The internationalization settings were updated."));
+  }
+  /**
+   * Handle save operation error.
+   * @param {object} error The returned error
+   */
+  async handleSaveError(error) {
+    // It can happen when the user has closed the passphrase entry dialog by instance.
+    if (error.name !== "UserAbortsOperationError") {
+      // Unexpected error occurred.
+      console.error(error);
+      await this.handleError(error);
+    }
+  }
+
+  /**
+   * handle error to display the error dialog
+   * @param error
+   */
+  async handleError(error) {
+    await this.props.actionFeedbackContext.displayError(error.message);
+  }
+
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="col2_3 actions-wrapper">
+        <div className="actions">
+          <div>
+            <li>
+              <a className={`button ${this.isSaveEnabled() ? "" : "disabled"}`} onClick={this.handleSaveClick}>
+                <Icon name="save"/>
+                <span><Trans>Save settings</Trans></span>
+              </a>
+            </li>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayAdministrationInternationalisationActions.propTypes = {
+  context: PropTypes.object, // The application context
+  adminInternationalizationContext: PropTypes.object, // The email notification context
+  actionFeedbackContext: PropTypes.object, // The action feedback context
+  t: PropTypes.func, // The translation function
+};
+
+export default withAdminInternationalization(withActionFeedback(withTranslation("common")(DisplayAdministrationInternationalisationActions)));
+

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationMfaActions/DisplayAdministrationMfaActions.js

@@ -0,0 +1,131 @@
+/**
+ * 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 {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../../shared/components/Icons/Icon";
+import {withActionFeedback} from "../../../../contexts/ActionFeedbackContext";
+import {withAdminMfa} from "../../../../contexts/Administration/AdministrationMfa/AdministrationMfaContext";
+import MfaFormService from '../../../../../shared/services/forms/Mfa/MfaFormService';
+
+
+
+/**
+ * This component is a container of multiple actions applicable on setting
+ */
+
+class DisplayAdministrationMfaActions extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+    this.mfaFormService = MfaFormService.getInstance(this.props.adminMfaContext, this.props.t);
+  }
+
+  /**
+   * Handle save settings
+   */
+  async handleSaveClick() {
+    try {
+      const isValid = await this.mfaFormService.validate();
+      if (isValid) {
+        await this.props.adminMfaContext.save();
+        this.handleSaveSuccess();
+      }
+    } catch (error) {
+      this.handleSaveError(error);
+    } finally {
+      this.props.adminMfaContext.setSubmitted(true);
+      this.props.adminMfaContext.setProcessing(false);
+    }
+  }
+
+  /**
+   * Is save button enable
+   * @returns {boolean}
+   */
+  isSaveEnabled() {
+    return !this.props.adminMfaContext.isProcessing() && this.props.adminMfaContext.hasSettingsChanges();
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSaveClick = this.handleSaveClick.bind(this);
+  }
+
+  /**
+   * Handle save operation success.
+   */
+  async handleSaveSuccess() {
+    await this.props.actionFeedbackContext.displaySuccess(this.props.t("The multi factor authentication settings for the organization were updated."));
+  }
+
+  /**
+   * Handle save operation error.
+   * @param {object} error The returned error
+   */
+  async handleSaveError(error) {
+    // It can happen when the user has closed the passphrase entry dialog by instance.
+    if (error.name !== "UserAbortsOperationError") {
+      // Unexpected error occurred.
+      console.error(error);
+      await this.handleError(error);
+    }
+  }
+
+  /**
+   * handle error to display the error dialog
+   * @param error
+   */
+  async handleError(error) {
+    await this.props.actionFeedbackContext.displayError(error.message);
+  }
+
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="col2_3 actions-wrapper">
+        <div className="actions">
+          <div>
+            <li>
+              <a className={`button ${this.isSaveEnabled() ? "" : "disabled"}`} onClick={this.handleSaveClick}>
+                <Icon name="save"/>
+                <span><Trans>Save settings</Trans></span>
+              </a>
+            </li>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayAdministrationMfaActions.propTypes = {
+  adminMfaContext: PropTypes.object, // The email notification context
+  actionFeedbackContext: PropTypes.object, // The action feedback context
+  t: PropTypes.func, // The translation function
+};
+
+export default withAdminMfa(withActionFeedback(withTranslation("common")(DisplayAdministrationMfaActions)));
+

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationSelfRegistrationActions/DisplayAdministrationSelfRegistrationActions.js

@@ -0,0 +1,103 @@
+/**
+ * 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 React from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../../shared/components/Icons/Icon";
+import {withAdminSelfRegistration} from "../../../../contexts/Administration/AdministrationSelfRegistration/AdministrationSelfRegistrationContext";
+
+/**
+ * This component is a container of multiple actions applicable on setting
+ */
+
+class DisplayAdministrationSelfRegistrationActions extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSave = this.handleSave.bind(this);
+  }
+
+  /**
+   * return the allowed domains
+   */
+  get allowedDomains() {
+    return this.props.adminSelfRegistrationContext.getAllowedDomains();
+  }
+
+  /**
+   * Is save button enable
+   * @returns {boolean}
+   */
+  isSaveEnabled() {
+    let isFirstUsageWithoutChanges = false;
+    //Button should be disable in case of first usage without change
+    if (!this.props.adminSelfRegistrationContext.getCurrentSettings()?.provider) {
+      isFirstUsageWithoutChanges = !this.props.adminSelfRegistrationContext.hasSettingsChanges();
+    }
+
+    return !this.props.adminSelfRegistrationContext.isProcessing() && !isFirstUsageWithoutChanges;
+  }
+
+  /**
+   * Handle the save action.
+   * In case we have more than one domain and we have changes, we should display a confirmation dialog to inform the user
+   * @return {Promise<void>}
+   */
+  async handleSave() {
+    if (this.isSaveEnabled()) {
+      this.props.adminSelfRegistrationContext.save();
+    }
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="col2_3 actions-wrapper">
+        <div className="actions">
+          <div>
+            <li>
+              <a className={`button ${this.isSaveEnabled() || "disabled"}`} id="save-settings" onClick={this.handleSave}>
+                <Icon name="save"/>
+                <span><Trans>Save settings</Trans></span>
+              </a>
+            </li>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayAdministrationSelfRegistrationActions.propTypes = {
+  adminSelfRegistrationContext: PropTypes.object, // The email notification context
+  t: PropTypes.func, // The translation function
+};
+
+export default withTranslation("common")(withAdminSelfRegistration(DisplayAdministrationSelfRegistrationActions));
+
+

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationSsoActions/DisplayAdministrationSsoActions.js

@@ -0,0 +1,91 @@
+/**
+ * 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 React from "react";
+import PropTypes from "prop-types";
+import Icon from "../../../../../shared/components/Icons/Icon";
+import {Trans, withTranslation} from "react-i18next";
+import {withAdminSso} from "../../../../contexts/AdminSsoContext";
+
+/**
+ * This component is a container of multiple actions applicable on setting
+ */
+class DisplayAdministrationWorkspaceActions extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleSaveClick = this.handleSaveClick.bind(this);
+  }
+
+  /**
+   * Handles the click event for the "Save settings" button.
+   * @returns {Promise<void>}
+   */
+  async handleSaveClick() {
+    const ssoContext = this.props.adminSsoContext;
+    if (ssoContext.canDeleteSettings()) {
+      ssoContext.showDeleteConfirmationDialog();
+      return;
+    }
+
+    if (ssoContext.validateData()) {
+      await ssoContext.saveAndTestConfiguration();
+    }
+  }
+
+  /**
+   * Is save button enable
+   * @returns {boolean}
+   */
+  isSaveEnabled() {
+    return this.props.adminSsoContext.hasFormChanged() || this.props.adminSsoContext.canDeleteSettings();
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="col2_3 actions-wrapper">
+        <div className="actions">
+          <div>
+            <li>
+              <a className={`button ${this.isSaveEnabled() ? "" : "disabled"}`} onClick={this.handleSaveClick}>
+                <Icon name="save"/>
+                <span><Trans>Save settings</Trans></span>
+              </a>
+            </li>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayAdministrationWorkspaceActions.propTypes = {
+  adminSsoContext: PropTypes.object, // The admin sso context
+};
+
+export default withAdminSso(withTranslation("common")(DisplayAdministrationWorkspaceActions));

package/src/react-extension/components/Administration/DisplayAdministrationWorkspaceActions/DisplayAdministrationSubscriptionActions/DisplayAdministrationSubscriptionActions.js

@@ -0,0 +1,85 @@
+/**
+ * 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 {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../../shared/components/Icons/Icon";
+import {withActionFeedback} from "../../../../contexts/ActionFeedbackContext";
+import SubscriptionActionService from '../../../../../shared/services/actions/subscription/SubscriptionActionService';
+import {withAdminSubscription} from "../../../../contexts/Administration/AdministrationSubscription/AdministrationSubscription";
+import {withDialog} from "../../../../contexts/DialogContext";
+
+
+
+/**
+ * This component is a container of multiple actions applicable on setting
+ */
+
+class DisplayAdministrationSubscriptionActions extends React.Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+    this.subscriptionActionService = SubscriptionActionService.getInstance(this.props);
+  }
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleEditSubscriptionClick = this.handleEditSubscriptionClick.bind(this);
+  }
+
+  /**
+   * Open dialog for subscription edition
+   */
+  handleEditSubscriptionClick() {
+    this.subscriptionActionService.editSubscription();
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <div className="col2_3 actions-wrapper">
+        <div className="actions">
+          <div>
+            <li>
+              <a className="button" onClick={this.handleEditSubscriptionClick}>
+                <Icon name="edit"/>
+                <span><Trans>Update key</Trans></span>
+              </a>
+            </li>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+DisplayAdministrationSubscriptionActions.propTypes = {
+  context: PropTypes.object, // Application context
+  dialogContext: PropTypes.object, // The dialog notification context
+  adminSubscriptionContext: PropTypes.object, // The email notification context
+  actionFeedbackContext: PropTypes.object, // The action feedback context
+  t: PropTypes.func, // The translation function
+};
+
+export default withActionFeedback(withDialog(withAdminSubscription(withTranslation("common")(DisplayAdministrationSubscriptionActions))));
+