passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Administration/ManageSmtpAdministrationSettings/ManageSmtpAdministrationSettings.js

@@ -32,10 +32,35 @@ const AUTHENTICATION_METHOD_NONE = "None";
 const AUTHENTICATION_METHOD_USERNAME = "Username only";
 const AUTHENTICATION_METHOD_USERNAME_PASSWORD = "Username & password";
 
-class ManageSmtpAdministrationSettings extends React.Component {
+export class ManageSmtpAdministrationSettings extends React.Component {
+  /**
+   * The no authentication method.
+   * @returns {string}
+   */
+  static get AUTHENTICATION_METHOD_NONE() {
+    return AUTHENTICATION_METHOD_NONE;
+  }
+
+  /**
+   * The authentication method username only
+   * @returns {string}
+   */
+  static get AUTHENTICATION_METHOD_USERNAME() {
+    return AUTHENTICATION_METHOD_USERNAME;
+  }
+
+  /**
+   * The authentication method username and password
+   * @returns {string}
+   */
+  static get AUTHENTICATION_METHOD_USERNAME_PASSWORD() {
+    return AUTHENTICATION_METHOD_USERNAME_PASSWORD;
+  }
+
   /**
    * Constructor
    * @param {Object} props
+   * @constructor
    */
   constructor(props) {
     super(props);
@@ -250,7 +275,7 @@ class ManageSmtpAdministrationSettings extends React.Component {
    */
   shouldShowSourceWarningMessage() {
     const smtpContext = this.props.adminSmtpSettingsContext;
-    return smtpContext.getCurrentSmtpSettings().source === "file" && smtpContext.isSettingsModified();
+    return smtpContext.getCurrentSmtpSettings().source !== "db" && smtpContext.isSettingsModified();
   }
 
   /**
@@ -280,15 +305,15 @@ class ManageSmtpAdministrationSettings extends React.Component {
     return (
       <div className="grid grid-responsive-12">
         <div className="row">
-          <div className="smtp-settings col8 main-column">
+          <div className="third-party-provider-settings smtp-settings col8 main-column">
             <h3><Trans>Email server</Trans></h3>
             {this.isReady() && !settings?.provider &&
               <>
                 <h4 className="no-border"><Trans>Select a provider</Trans></h4>
-                <div className="smtp-provider-list">
+                <div className="provider-list">
                   {SmtpProviders.map(provider =>
-                    <div key={provider.id} className="smtp-provider button" id={provider.id} onClick={() => this.props.adminSmtpSettingsContext.changeProvider(provider)}>
-                      <div className="smtp-provider-logo">
+                    <div key={provider.id} className="provider button" id={provider.id} onClick={() => this.props.adminSmtpSettingsContext.changeProvider(provider)}>
+                      <div className="provider-logo">
                         {provider.id === "other" &&
                           <Icon name="envelope"/>
                         }
@@ -296,7 +321,7 @@ class ManageSmtpAdministrationSettings extends React.Component {
                           <img src={`${this.props.context.trustedDomain}/img/third_party/${provider.icon}`}/>
                         }
                       </div>
-                      <p className="smtp-provider-name">{provider.name}</p>
+                      <p className="provider-name">{provider.name}</p>
                     </div>
                   )}
                 </div>

package/src/react-extension/components/Administration/ManageSmtpAdministrationSettings/ManageSmtpAdministrationSettings.test.data.js

@@ -26,9 +26,6 @@ export function defaultProps(data = {}) {
       setDisplayAdministrationWorkspaceAction: jest.fn(),
       resetDisplayAdministrationWorkspaceAction: jest.fn()
     },
-    dialogContext: {
-      open: jest.fn()
-    },
     actionFeedbackContext: {
       displaySuccess: jest.fn()
     },

package/src/react-extension/components/Administration/ManageSmtpAdministrationSettings/ManageSmtpAdministrationSettings.test.js

@@ -16,6 +16,7 @@
  * Unit tests on ManageSmtpAdministrationSettings in regard of specifications
  */
 import SmtpProviders from "./SmtpProviders.data";
+import {ManageSmtpAdministrationSettings} from "./ManageSmtpAdministrationSettings";
 import ManageSmtpAdministrationSettingsPage from "./ManageSmtpAdministrationSettings.test.page";
 import {waitFor} from "@testing-library/react";
 import {defaultProps} from "./ManageSmtpAdministrationSettings.test.data";
@@ -27,6 +28,8 @@ import {
   withExistingSmtpSettings,
   withAwsSesSmtpSettings,
   withKnownProviderSmtpSettings,
+  withNoAuthenticationMethod,
+  withUsernameAuthenticationMethod,
 } from "../../../contexts/AdminSmtpSettingsContext.test.data";
 import {enableFetchMocks} from "jest-fetch-mock";
 import PassboltApiFetchError from "../../../../shared/lib/Error/PassboltApiFetchError";
@@ -181,6 +184,22 @@ describe("ManageSmtpAdministrationSettings", () => {
       expect(page.settingsFromFileWarningMessage).toBeTruthy();
     });
 
+    it('As a signed-in administrator when the Email server settings are configured via configuration file, I can see a source warning message when I modify a field.', async() => {
+      expect.assertions(2);
+      const props = defaultProps();
+      const smtpSettings = withExistingSmtpSettings({source: "env"});
+      fetch.doMockOnceIf(/smtp\/settings.json/, () => mockApiResponse(smtpSettings));
+      const page = new ManageSmtpAdministrationSettingsPage(props);
+
+      await waitFor(() => {});
+
+      expect(page.settingsFromFileWarningMessage).toBeFalsy();
+
+      await page.setFormWith({username: "test"});
+
+      expect(page.settingsFromFileWarningMessage).toBeTruthy();
+    });
+
     it('As a signed-in administrator when the Email server settings are configured via the database, I do not see a source warning message when I modify a field. ', async() => {
       expect.assertions(2);
       const props = defaultProps();
@@ -252,7 +271,11 @@ describe("ManageSmtpAdministrationSettings", () => {
     it('As a signed-in administrator in the Email server settings I can see an error dialog with error details if an error occurs during the fetch of the SMTP settings', async() => {
       expect.assertions(1);
       const expectedError = new PassboltApiFetchError("Something went wrong");
-      const props = defaultProps();
+      const props = defaultProps({
+        dialogContext: {
+          open: jest.fn()
+        }
+      });
       fetch.doMockOnceIf(/smtp\/settings.json/, () => { throw expectedError; });
       new ManageSmtpAdministrationSettingsPage(props);
 
@@ -262,6 +285,48 @@ describe("ManageSmtpAdministrationSettings", () => {
         error: expectedError
       });
     });
+
+    it('As a signed-in administrator in the Email server settings I can see that a selected authentication method is set to “Username and password” if both username and password returned by the API are set', async() => {
+      expect.assertions(3);
+      const props = defaultProps();
+      const smtpSettings = withExistingSmtpSettings();
+      fetch.doMockOnceIf(/smtp\/settings.json/, () => mockApiResponse(smtpSettings));
+      const page = new ManageSmtpAdministrationSettingsPage(props);
+
+      await waitFor(() => {});
+
+      expect(page.authenticationMethodValue).toBe(ManageSmtpAdministrationSettings.AUTHENTICATION_METHOD_USERNAME_PASSWORD);
+      expect(page.username.value).toBe(smtpSettings.username);
+      expect(page.password.value).toBe(smtpSettings.password);
+    });
+
+    it('As a signed-in administrator in the Email server settings I can see that a selected authentication method is set to “Username only” if username is set but password returned by the API is set to null', async() => {
+      expect.assertions(3);
+      const props = defaultProps();
+      const smtpSettings = withUsernameAuthenticationMethod();
+      fetch.doMockOnceIf(/smtp\/settings.json/, () => mockApiResponse(smtpSettings));
+      const page = new ManageSmtpAdministrationSettingsPage(props);
+
+      await waitFor(() => {});
+
+      expect(page.authenticationMethodValue).toBe(ManageSmtpAdministrationSettings.AUTHENTICATION_METHOD_USERNAME);
+      expect(page.username.value).toBe(smtpSettings.username);
+      expect(page.isPasswordVisible).toBeFalsy();
+    });
+
+    it('As a signed-in administrator in the Email server settings I can see that a selected authentication method is set to “None” if username and password returned by the API are set to null', async() => {
+      expect.assertions(3);
+      const props = defaultProps();
+      const smtpSettings = withNoAuthenticationMethod();
+      fetch.doMockOnceIf(/smtp\/settings.json/, () => mockApiResponse(smtpSettings));
+      const page = new ManageSmtpAdministrationSettingsPage(props);
+
+      await waitFor(() => {});
+
+      expect(page.authenticationMethodValue).toBe(ManageSmtpAdministrationSettings.AUTHENTICATION_METHOD_NONE);
+      expect(page.isUsernameVisible).toBeFalsy();
+      expect(page.isPasswordVisible).toBeFalsy();
+    });
   });
 
   describe("As a signed-in administrator I can access the different help pages", () => {
@@ -492,6 +557,85 @@ describe("ManageSmtpAdministrationSettings", () => {
       expect(page.username.disabled).toBe(false);
     });
 
+    it("As a signed-in administrator on the “Email server” settings page, I can update the authentication method to 'None' and save the form", async() => {
+      expect.assertions(6);
+
+      const smtpSettings = withKnownProviderSmtpSettings();
+      const expectedSettingsToSave = {
+        ...smtpSettings,
+        username: null,
+        password: null
+      };
+
+      //first call is a GET call for the settings
+      fetch.doMockOnceIf(/smtp\/settings.json/, () => mockApiResponse(smtpSettings));
+
+      //second call is a POST to save the settings
+      let promiseResolution = null;
+      fetch.doMockOnceIf(/smtp\/settings.json/, data => new Promise(resolve => {
+        const requestBody = JSON.parse(data.body.toString());
+        expect(requestBody).toStrictEqual(expectedSettingsToSave);
+        promiseResolution = resolve;
+      }));
+
+      const props = defaultProps();
+      const page = new ManageSmtpAdministrationSettingsPage(props);
+      await waitFor(() => {});
+
+      await page.selectAuthenticationMethod(0);
+
+      expect(page.isSaveButtonEnabled()).toBe(true);
+      expect(page.isUsernameVisible).toBe(false);
+      expect(page.isPasswordVisible).toBe(false);
+
+      await page.saveSettings();
+      promiseResolution(mockApiResponse(expectedSettingsToSave));
+      await waitFor(() => {});
+
+      expect(props.actionFeedbackContext.displaySuccess).toHaveBeenCalledTimes(1);
+      expect(props.actionFeedbackContext.displaySuccess).toHaveBeenCalledWith("The SMTP settings have been saved successfully");
+    });
+
+    it("As a signed-in administrator on the “Email server” settings page, I can update the authentication method to 'Username only' and save the form", async() => {
+      expect.assertions(6);
+
+      const smtpSettings = withKnownProviderSmtpSettings();
+      const expectedSettingsToSave = {
+        ...smtpSettings,
+        username: 'username-only',
+        password: null
+      };
+
+      //first call is a GET call for the settings
+      fetch.doMockOnceIf(/smtp\/settings.json/, () => mockApiResponse(smtpSettings));
+
+      //second call is a POST to save the settings
+      let promiseResolution = null;
+      fetch.doMockOnceIf(/smtp\/settings.json/, data => new Promise(resolve => {
+        const requestBody = JSON.parse(data.body.toString());
+        expect(requestBody).toStrictEqual(expectedSettingsToSave);
+        promiseResolution = resolve;
+      }));
+
+      const props = defaultProps();
+      const page = new ManageSmtpAdministrationSettingsPage(props);
+      await waitFor(() => {});
+
+      await page.selectAuthenticationMethod(1);
+
+      expect(page.isSaveButtonEnabled()).toBe(true);
+      expect(page.isUsernameVisible).toBe(true);
+      expect(page.isPasswordVisible).toBe(false);
+
+      await page.setFormWith({username: expectedSettingsToSave.username});
+      await page.saveSettings();
+      promiseResolution(mockApiResponse(expectedSettingsToSave));
+      await waitFor(() => {});
+
+      expect(props.actionFeedbackContext.displaySuccess).toHaveBeenCalledTimes(1);
+      expect(props.actionFeedbackContext.displaySuccess).toHaveBeenCalledWith("The SMTP settings have been saved successfully");
+    });
+
     it("As a signed-in administrator in the “Email server” setting, I cannot save the “Email server” setting when the form does not validate\nAs a signed-in administrator when the SMTP server is configured, I can save the Email server setting when the form validates", async() => {
       expect.assertions(2);
 

package/src/react-extension/components/Administration/ManageSmtpAdministrationSettings/ManageSmtpAdministrationSettings.test.page.js

@@ -186,6 +186,19 @@ export default class ManageSmtpAdministrationSettingsPage {
     await this.clickOn(providerItem, () => currentProviderValue !== this.providerValue);
   }
 
+  /**
+   * Clicks on the nth authentication method in the authentication method list (from the first screen when there is no data).
+   * @param {integer} authenticationMethodIndex
+   * @returns {Promise<void>}
+   */
+  async selectAuthenticationMethod(authenticationMethodIndex) {
+    const currentAuthenticationMethodValue = this.providerValue;
+
+    await this.clickOn(this.authenticationMethod, () => true);
+    const authenticationMethodItem = this.authenticationMethodSelectFieldItems[authenticationMethodIndex];
+    await this.clickOn(authenticationMethodItem, () => currentAuthenticationMethodValue !== this.authenticationMethodValue);
+  }
+
   /**
    * Set the current form with the given data (only work with the inputs (not our Select component for instance))
    * @param {object} formData a key value pairs object that contains the field name as a key (must match a getter method on this page) and the desired value
@@ -247,7 +260,7 @@ export default class ManageSmtpAdministrationSettingsPage {
    * @returns {NodeList}
    */
   get providerButtons() {
-    return this.selectAll(".smtp-settings .smtp-provider-list .smtp-provider");
+    return this.selectAll(".smtp-settings .provider-list .provider");
   }
 
   /**
@@ -258,6 +271,14 @@ export default class ManageSmtpAdministrationSettingsPage {
     return this.selectAll(".smtp-settings  #smtp-settings-form-provider .items .option");
   }
 
+  /**
+   * Returns all the available custom Select options for the authentication methods.
+   * @returns {NodeList}
+   */
+  get authenticationMethodSelectFieldItems() {
+    return this.selectAll(".smtp-settings  #smtp-settings-form-authentication-method .items .option");
+  }
+
   /**
    * Returns the username field
    * @returns {HTMLElement}
@@ -266,6 +287,13 @@ export default class ManageSmtpAdministrationSettingsPage {
     return this.select(".smtp-settings #smtp-settings-form-username");
   }
 
+  /**
+   * Returns true if the username field is visible
+   */
+  get isUsernameVisible() {
+    return Boolean(this.username);
+  }
+
   /**
    * Returns the username error HTMLElement
    * @returns {HTMLElement}
@@ -282,6 +310,13 @@ export default class ManageSmtpAdministrationSettingsPage {
     return this.select(".smtp-settings #smtp-settings-form-password");
   }
 
+  /**
+   * Returns true if the password field is visible
+   */
+  get isPasswordVisible() {
+    return Boolean(this.password);
+  }
+
   /**
    * Returns the password error HTMLElement
    * @returns {HTMLElement}
@@ -410,6 +445,22 @@ export default class ManageSmtpAdministrationSettingsPage {
     return this.select(".smtp-settings #smtp-settings-form-provider .value").textContent;
   }
 
+  /**
+   * Returns the authentication method HTMLElement
+   * @returns {HTMLElement}
+   */
+  get authenticationMethod() {
+    return this.select(".smtp-settings #smtp-settings-form-authentication-method");
+  }
+
+  /**
+   * Returns the selected value from the provider in the second screen.
+   * @returns {string}
+   */
+  get authenticationMethodValue() {
+    return this.select(".smtp-settings #smtp-settings-form-authentication-method .value").textContent;
+  }
+
   /**
    * Returns the warning message "settings coming from file" text content if exists
    * @returns {string|undefined}

package/src/react-extension/components/Administration/ManageSmtpAdministrationSettings/ManageSmtpAdministrationSettings.test.stories.js

@@ -77,19 +77,34 @@ const Template = args =>
 export const Default = Template.bind({});
 Default.args = defaultProps();
 Default.decorators = decorators;
+Default.parameters = {
+  css: "api_main"
+};
 
 export const WithSmtpSettings = Template.bind({});
 WithSmtpSettings.args = defaultProps();
 WithSmtpSettings.decorators = decorators;
+WithSmtpSettings.parameters = {
+  css: "api_main"
+};
 
 export const WithSmtpSettingsFromFile = Template.bind({});
 WithSmtpSettingsFromFile.args = defaultProps();
 WithSmtpSettingsFromFile.decorators = decorators;
+WithSmtpSettingsFromFile.parameters = {
+  css: "api_main"
+};
 
 export const WithKnownSmtpSettings = Template.bind({});
 WithKnownSmtpSettings.args = defaultProps();
 WithKnownSmtpSettings.decorators = decorators;
+WithKnownSmtpSettings.parameters = {
+  css: "api_main"
+};
 
 export const WithErrorFromServer = Template.bind({});
 WithErrorFromServer.args = defaultProps();
 WithErrorFromServer.decorators = decorators;
+WithErrorFromServer.parameters = {
+  css: "api_main"
+};