Web: PortalSettings: SMTPSettings: Adding buttons, added disable functionality during operations, removed the request for settings every time you enter the page.

packages/client/public/locales/en/Settings.json

@@ -74,6 +74,7 @@
   "DeleteThemeForever": "Delete theme forever?",
   "DeleteThemeNotice": "The theme will be deleted permanently. You will not be able to undo this action.",
   "DeveloperTools": "Developer Tools",
+  "DefaultSettings": "Default settings",
   "Disabled": "Disabled",
   "DownloadCopy": "Download copy",
   "DownloadReportBtnText": "Download report",

packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/StyledComponent.js

@@ -35,5 +35,9 @@ const StyledComponent = styled.div`
 
 const ButtonStyledComponent = styled.div`
   margin-top: 20px;
+  max-width: 404px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
 `;
 export { StyledComponent, ButtonStyledComponent };

packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/index.js

@@ -1,30 +1,26 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
 import Text from "@docspace/components/text";
-import { getSMTPSettings } from "@docspace/common/api/settings";
 
 import CustomSettings from "./sub-components/CustomSettings";
 import { StyledComponent } from "./StyledComponent";
 
 const SMTPSettings = (props) => {
-  const { standalone, setInitSMTPSettings } = props;
+  const { setInitSMTPSettings, isInit, resetChangedSMTPSettings } = props;
 
   const { t, ready } = useTranslation(["SMTPSettings", "Settings", "Common"]);
 
-  const [isInit, setIsInit] = useState(false);
-
-  const init = async () => {
-    const res = await getSMTPSettings();
-
-    setInitSMTPSettings(res);
-    setIsInit(true);
-  };
+  useEffect(() => {
+    return () => {
+      resetChangedSMTPSettings();
+    };
+  }, []);
   useEffect(() => {
     if (!ready) return;
 
-    init();
+    !isInit && setInitSMTPSettings();
   }, [ready]);
 
   if (!isInit) return <></>;
@@ -41,8 +37,9 @@ const SMTPSettings = (props) => {
 };
 
 export default inject(({ auth, setup }) => {
-  const { standalone } = auth.settingsStore;
-  const { setInitSMTPSettings } = setup;
+  const { setInitSMTPSettings, integration, resetChangedSMTPSettings } = setup;
+  const { smtpSettings } = integration;
+  const { isInit } = smtpSettings;
 
-  return { standalone, setInitSMTPSettings };
+  return { setInitSMTPSettings, isInit, resetChangedSMTPSettings };
 })(observer(SMTPSettings));

packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/ButtonContainer.js

@@ -1,33 +1,49 @@
-import React from "react";
+import React, { useState } from "react";
 import { inject, observer } from "mobx-react";
 
 import Button from "@docspace/components/button";
+import toastr from "@docspace/components/toast/toastr";
+import { setSMTPSettings } from "@docspace/common/api/settings";
 
 import { ButtonStyledComponent } from "../StyledComponent";
 import { SMTPSettingsFields } from "../constants";
+
 const {
   HOST,
   PORT,
   SENDER_EMAIL_ADDRESS,
   HOST_LOGIN,
   HOST_PASSWORD,
+  AUTHENTICATION,
 } = SMTPSettingsFields;
+
+let timerId = null;
 const ButtonContainer = (props) => {
   const {
     t,
-    updateSMTPSettings,
     isEmailValid,
     onSetValidationError,
     settings,
+    setSMTPSettingsLoading,
+    setInitSMTPSettings,
+    resetSMTPSettings,
+    isLoading,
   } = props;
 
+  const [buttonOperation, setButtonOperation] = useState({
+    save: false,
+    reset: false,
+    send: false,
+  });
+
   const isValidForm = () => {
     if (
-      settings[HOST_PASSWORD].trim() === "" ||
-      settings[HOST_LOGIN].trim() === "" ||
-      settings[HOST].trim() === "" ||
-      settings[PORT].toString().trim() === "" ||
-      settings[SENDER_EMAIL_ADDRESS].trim() === ""
+      (settings[AUTHENTICATION] &&
+        (settings[HOST_PASSWORD]?.trim() === "" ||
+          settings[HOST_LOGIN]?.trim() === "")) ||
+      settings[HOST]?.trim() === "" ||
+      settings[PORT]?.toString()?.trim() === "" ||
+      settings[SENDER_EMAIL_ADDRESS]?.trim() === ""
     )
       return false;
 
@@ -38,27 +54,87 @@ const ButtonContainer = (props) => {
 
     if (!isEmailValid) return;
 
-    updateSMTPSettings();
+    timerId = setTimeout(() => {
+      setSMTPSettingsLoading(true);
+      setButtonOperation({ ...buttonOperation, save: true });
+    }, [200]);
+
+    try {
+      await setSMTPSettings(settings);
+      await setInitSMTPSettings();
+      toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
+    } catch (e) {
+      toastr.error(e);
+    }
+
+    clearTimeout(timerId);
+    timerId = null;
+    setSMTPSettingsLoading(false);
+    setButtonOperation({ ...buttonOperation, save: false });
+  };
+
+  const onClickSendTestMail = async () => {};
+
+  const onClickDefaultSettings = async () => {
+    timerId = setTimeout(() => {
+      setSMTPSettingsLoading(true);
+      setButtonOperation({ ...buttonOperation, reset: true });
+    }, [200]);
+
+    try {
+      await resetSMTPSettings();
+      toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
+    } catch (e) {
+      toastr.error(e);
+    }
+
+    clearTimeout(timerId);
+    timerId = null;
+    setSMTPSettingsLoading(false);
+    setButtonOperation({ ...buttonOperation, reset: false });
   };
 
   return (
     <ButtonStyledComponent>
       <Button
         label={t("Common:SaveButton")}
-        size="normal"
+        size="small"
         primary
         onClick={onClick}
-        isDisabled={!isValidForm()}
+        isDisabled={isLoading || !isValidForm()}
+        isLoading={buttonOperation.save}
+      />
+      <Button
+        label={t("Settings:DefaultSettings")}
+        size="small"
+        onClick={onClickDefaultSettings}
+        isLoading={buttonOperation.reset}
+        isDisabled={isLoading}
+      />
+      <Button
+        label={t("SendTestMail")}
+        size="small"
+        onClick={onClickSendTestMail}
+        isDisabled={isLoading}
       />
     </ButtonStyledComponent>
   );
 };
 
 export default inject(({ setup }) => {
-  const { updateSMTPSettings, integration } = setup;
+  const {
+    integration,
+    setSMTPSettingsLoading,
+    setInitSMTPSettings,
+    resetSMTPSettings,
+  } = setup;
   const { smtpSettings } = integration;
+  const { settings, isLoading } = smtpSettings;
   return {
-    updateSMTPSettings,
-    settings: smtpSettings.settings,
+    settings,
+    setSMTPSettingsLoading,
+    setInitSMTPSettings,
+    resetSMTPSettings,
+    isLoading,
   };
 })(observer(ButtonContainer));

packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/CustomSettings.js

@@ -25,7 +25,7 @@ const {
 } = SMTPSettingsFields;
 
 const CustomSettings = (props) => {
-  const { t, settings, setSMTPSettings } = props;
+  const { t, settings, setSMTPSettings, isLoading } = props;
   const [emailError, setEmailError] = useState({
     hasError: false,
     isValid: true,
@@ -87,6 +87,7 @@ const CustomSettings = (props) => {
         isChecked={settings[AUTHENTICATION]}
         onChange={onChangeToggle}
         label={t("Authentication")}
+        isDisabled={isLoading}
       />
 
       <div className="smtp-settings_title smtp-settings_login">
@@ -101,7 +102,7 @@ const CustomSettings = (props) => {
         placeholder={t("EnterLogin")}
         onChange={onChange}
         value={settings[HOST_LOGIN]}
-        isDisabled={!settings[AUTHENTICATION]}
+        isDisabled={isLoading || !settings[AUTHENTICATION]}
         scale
       />
 
@@ -117,7 +118,7 @@ const CustomSettings = (props) => {
         placeholder={t("EnterPassword")}
         onChange={onChange}
         value={settings[HOST_PASSWORD]}
-        isDisabled={!settings[AUTHENTICATION]}
+        isDisabled={isLoading || !settings[AUTHENTICATION]}
         scale
       />
 
@@ -126,7 +127,7 @@ const CustomSettings = (props) => {
         label={t("AuthViaNTLM")}
         isChecked={settings[USE_NTLM]}
         onChange={onChangeCheckbox}
-        isDisabled={!settings[AUTHENTICATION]}
+        isDisabled={isLoading || !settings[AUTHENTICATION]}
       />
     </div>
   );
@@ -140,6 +141,7 @@ const CustomSettings = (props) => {
         </Text>
       </div>
       <TextInput
+        isDisabled={isLoading}
         className="smtp-settings_input"
         name={HOST}
         placeholder={t("EnterDomain")}
@@ -155,6 +157,7 @@ const CustomSettings = (props) => {
         </Text>
       </div>
       <TextInput
+        isDisabled={isLoading}
         className="smtp-settings_input"
         name={PORT}
         placeholder={t("EnterPort")}
@@ -166,6 +169,7 @@ const CustomSettings = (props) => {
 
       <Text {...commonTextProps}>{t("SenderDisplayName")}</Text>
       <TextInput
+        isDisabled={isLoading}
         className="smtp-settings_input"
         name={SENDER_DISPLAY_NAME}
         placeholder={t("EnterName")}
@@ -188,6 +192,7 @@ const CustomSettings = (props) => {
         errorMessage={t("Common:IncorrectEmail")}
       >
         <EmailInput
+          isDisabled={isLoading}
           value={settings[SENDER_EMAIL_ADDRESS]}
           onChange={onChange}
           onValidateInput={onValidateEmailInput}
@@ -198,6 +203,7 @@ const CustomSettings = (props) => {
       </FieldContainer>
 
       <Checkbox
+        isDisabled={isLoading}
         name={ENABLE_SSL}
         label={t("EnableSSL")}
         isChecked={settings[ENABLE_SSL]}
@@ -215,6 +221,7 @@ const CustomSettings = (props) => {
 export default inject(({ setup }) => {
   const { integration, setSMTPSettings } = setup;
   const { smtpSettings } = integration;
+  const { settings, isLoading } = smtpSettings;
 
-  return { settings: smtpSettings.settings, setSMTPSettings };
+  return { settings, setSMTPSettings, isLoading };
 })(observer(CustomSettings));

packages/client/src/store/SettingsSetupStore.js

@@ -4,7 +4,11 @@ const { Filter } = api;
 import SelectionStore from "./SelectionStore";
 //import CommonStore from "./CommonStore";
 import authStore from "@docspace/common/store/AuthStore";
-import { setSMTPSettings } from "@docspace/common/api/settings";
+import {
+  getSMTPSettings,
+  resetSMTPSettings,
+  setSMTPSettings,
+} from "@docspace/common/api/settings";
 import { combineUrl } from "@docspace/common/utils";
 import config from "PACKAGE_FILE";
 import { isMobile } from "react-device-detect";
@@ -48,8 +52,10 @@ class SettingsSetupStore {
     consumers: [],
     selectedConsumer: {},
     smtpSettings: {
+      initSettings: {},
       settings: {},
       isInit: false,
+      isLoading: false,
     },
   };
 
@@ -122,21 +128,40 @@ class SettingsSetupStore {
     this.integration.consumers = consumers;
   };
 
-  setInitSMTPSettings = (settings) => {
+  setInitSMTPSettings = async () => {
+    const settings = await getSMTPSettings();
+
     this.integration.smtpSettings.initSettings = settings;
     this.integration.smtpSettings.settings = settings;
+
+    this.setSMTPSettingsIsInit(true);
+  };
+
+  resetSMTPSettings = async () => {
+    const settings = await resetSMTPSettings(
+      this.integration.smtpSettings.settings
+    );
+
+    this.integration.smtpSettings.initSettings = settings;
+    this.integration.smtpSettings.settings = settings;
+  };
+
+  resetChangedSMTPSettings = () => {
+    this.integration.smtpSettings.settings = {
+      ...this.integration.smtpSettings.initSettings,
+    };
   };
 
   setSMTPSettings = (settings) => {
     this.integration.smtpSettings.settings = settings;
   };
 
-  setSMTPSettingsInit = (init) => {
+  setSMTPSettingsIsInit = (init) => {
     this.integration.smtpSettings.isInit = init;
   };
 
-  updateSMTPSettings = async () => {
-    await setSMTPSettings(this.integration.smtpSettings.settings);
+  setSMTPSettingsLoading = (loading) => {
+    this.integration.smtpSettings.isLoading = loading;
   };
 
   setAddUsers = (func) => {