Web: PortalSettings: added SMTP settings page.

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

@@ -0,0 +1,21 @@
+{
+  "Authentication": "Authentication",
+  "AuthViaNTLM": "Auth via NTLM",
+  "CustomSettings": "Custom settings",
+  "EnableSSL": "Enable SSL",
+  "EnterDomain": "Enter domain",
+  "EnterPort": "Enter port",
+  "EnterLogin": "Enter login",
+  "EnterName": "Enter name",
+  "EnterEmail": "Enter email",
+  "EnterPassword": "Enter password",
+  "HostLogin": "Host login",
+  "HostPassword": "Host password",
+  "Host": "Host",
+  "MailServerSettings": "Mail Server Settings",
+  "Port": "Port",
+  "Source": "Source",
+  "SenderDisplayName": "Sender Display Name",
+  "SenderEmailAddress": "Sender Email Address",
+  "SendTestMail": "Send Test Mail"
+}

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

@@ -164,6 +164,8 @@
   "ShowHelpCenter": "Show link to Help Center",
   "ShowVideoGuides": "Show link to Video Guides",
   "SingleSignOn": "Single Sign-On",
+  "SMTPSettings": "SMTP Settings",
+  "SMTPSettingsDescription": "The SMTP settings are needed to set up an email account which will be used to send notifications from the portal using your own SMTP server instead of the one {{portalName}} uses. Please fill in all the fields and click the 'Save' button. You can use the 'Send Test Mail' button to check if all the settings you entered are correct and work as supposed.",
   "StoragePeriod": "Storage period",
   "StudioTimeLanguageSettings": "Language and Time Zone Settings",
   "SuccessfullySaveGreetingSettingsMessage": "Welcome Page settings have been successfully saved",

packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js

@@ -55,6 +55,8 @@ const getTreeItems = (data, path, t) => {
         return t("Common:PaymentsTitle");
       case "SingleSignOn":
         return t("SingleSignOn");
+      case "SMTPSettings":
+        return t("SMTPSettings");
       case "DeveloperTools":
         return t("DeveloperTools");
       default:

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

@@ -0,0 +1,24 @@
+import styled, { css } from "styled-components";
+
+const StyledComponent = styled.div`
+  .smtp-settings_description {
+    margin-bottom: 20px;
+  }
+  .smtp-settings_input {
+    margin-bottom: 16px;
+    margin-top: 4px;
+    max-width: 350px;
+  }
+  .smtp-settings_auth {
+    margin: 24px 0;
+
+    .smtp-settings_login {
+      margin-top: 16px;
+    }
+    .smtp-settings_toggle {
+      position: static;
+    }
+  }
+`;
+
+export default StyledComponent;

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

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
+import Text from "@docspace/components/text";
+import RadioButtonGroup from "@docspace/components/radio-button-group";
+import CustomSettings from "./sub-components/CustomSettings";
+import { getSMTPSettings } from "@docspace/common/api/settings";
+import StyledComponent from "./StyledComponent";
+
+const SMTPSettings = (props) => {
+  const { standalone, setSMTPSettings } = props;
+
+  const { t, ready } = useTranslation(["SMTPSettings", "Settings"]);
+
+  const [isInit, setIsInit] = useState(false);
+
+  const init = async () => {
+    const res = await getSMTPSettings();
+    setSMTPSettings(res);
+    setIsInit(true);
+  };
+  useEffect(() => {
+    if (!ready) return;
+
+    init();
+  }, [ready]);
+
+  if (!isInit) return <></>;
+
+  return (
+    <StyledComponent>
+      <Text className="smtp-settings_description">
+        {t("Settings:SMTPSettingsDescription")}
+      </Text>
+      <div>{<CustomSettings t={t} />}</div>
+    </StyledComponent>
+  );
+};
+
+export default inject(({ auth, setup }) => {
+  const { standalone } = auth.settingsStore;
+  const { setSMTPSettings } = setup;
+
+  return { standalone, setSMTPSettings };
+})(observer(SMTPSettings));

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

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { inject, observer } from "mobx-react";
+
+import TextInput from "@docspace/components/text-input";
+import Text from "@docspace/components/text";
+import ToggleButton from "@docspace/components/toggle-button";
+
+import StyledComponent from "../StyledComponent";
+import Checkbox from "@docspace/components/checkbox";
+
+const HOST = "host",
+  PORT = "port",
+  SENDER_EMAIL_ADDRESS = "senderAddress",
+  SENDER_DISPLAY_NAME = "senderDisplayName",
+  HOST_LOGIN = "credentialsUserName",
+  HOST_PASSWORD = "credentialsUserPassword",
+  ENABLE_SSL = "enableSSL",
+  AUTHENTICATION = "enableAuth",
+  USE_NTLM = "useNtlm";
+const CustomSettings = (props) => {
+  const { t, smtpSettings } = props;
+  const [state, setState] = useState(smtpSettings);
+
+  const onChange = (e) => {
+    const { name, value } = e.target;
+
+    setState({
+      ...state,
+      [name]: value,
+    });
+  };
+
+  const onChangeToggle = (e) => {
+    const { checked } = e.currentTarget;
+
+    setState({
+      ...state,
+      [AUTHENTICATION]: checked,
+    });
+  };
+
+  const onChangeCheckbox = (e) => {
+    const { checked, name } = e.target;
+
+    setState({
+      ...state,
+      [name]: checked,
+    });
+  };
+
+  const commonTextProps = {
+    fontWeight: 600,
+  };
+
+  const enableAuthComponent = (
+    <div className="smtp-settings_auth">
+      <ToggleButton
+        className="smtp-settings_toggle"
+        isChecked={state[AUTHENTICATION]}
+        onChange={onChangeToggle}
+        label={t("Authentication")}
+      />
+      <Text {...commonTextProps} className="smtp-settings_login">
+        {t("HostLogin")}
+      </Text>
+      <TextInput
+        className="smtp-settings_input"
+        name={HOST_LOGIN}
+        placeholder={t("EnterLogin")}
+        onChange={onChange}
+        value={state[HOST_LOGIN]}
+        isDisabled={!state[AUTHENTICATION]}
+        scale
+      />
+      <Text {...commonTextProps}>{t("HostPassword")}</Text>
+
+      <TextInput
+        className="smtp-settings_input"
+        name={HOST_PASSWORD}
+        placeholder={t("EnterPassword")}
+        onChange={onChange}
+        value={state[HOST_PASSWORD]}
+        isDisabled={!state[AUTHENTICATION]}
+        scale
+      />
+
+      <Checkbox
+        name={USE_NTLM}
+        label={t("AuthViaNTLM")}
+        isChecked={state[USE_NTLM]}
+        onChange={onChangeCheckbox}
+        isDisabled={!state[AUTHENTICATION]}
+      />
+    </div>
+  );
+
+  console.log("state", state);
+  return (
+    <StyledComponent>
+      <Text {...commonTextProps}>{t("Host")}</Text>
+      <TextInput
+        className="smtp-settings_input"
+        name={HOST}
+        placeholder={t("EnterDomain")}
+        onChange={onChange}
+        value={state[HOST]}
+        scale
+      />
+      <Text {...commonTextProps}>{t("Port")}</Text>
+      <TextInput
+        className="smtp-settings_input"
+        name={PORT}
+        placeholder={t("EnterPort")}
+        onChange={onChange}
+        value={state[PORT].toString()}
+        scale
+      />
+
+      {enableAuthComponent}
+
+      <Text {...commonTextProps}>{t("SenderDisplayName")}</Text>
+      <TextInput
+        className="smtp-settings_input"
+        name={SENDER_DISPLAY_NAME}
+        placeholder={t("EnterName")}
+        onChange={onChange}
+        value={state[SENDER_DISPLAY_NAME]}
+        scale
+      />
+      <Text {...commonTextProps}>{t("SenderEmailAddress")}</Text>
+      <TextInput
+        className="smtp-settings_input"
+        name={SENDER_EMAIL_ADDRESS}
+        placeholder={t("EnterEmail")}
+        onChange={onChange}
+        value={state[SENDER_EMAIL_ADDRESS]}
+        scale
+      />
+
+      <Checkbox
+        name={ENABLE_SSL}
+        label={t("EnableSSL")}
+        isChecked={state[ENABLE_SSL]}
+        onChange={onChangeCheckbox}
+      />
+    </StyledComponent>
+  );
+};
+
+export default inject(({ setup }) => {
+  const { integration } = setup;
+  const { smtpSettings } = integration;
+
+  return { smtpSettings };
+})(observer(CustomSettings));

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

@@ -13,6 +13,7 @@ import PortalPlugins from "./PortalPlugins";
 
 import AppLoader from "@docspace/common/components/AppLoader";
 import SSOLoader from "./sub-components/ssoLoader";
+import SMTPSettings from "./SMTPSettings";
 
 const IntegrationWrapper = (props) => {
   const { t, tReady, history, loadBaseInfo, enablePlugins, toDefault } = props;
@@ -42,6 +43,11 @@ const IntegrationWrapper = (props) => {
       name: t("SingleSignOn"),
       content: <SSO />,
     },
+    {
+      id: "smtp-settings",
+      name: t("SMTPSettings"),
+      content: <SMTPSettings />,
+    },
   ];
 
   if (!isMobile) {

packages/client/src/pages/PortalSettings/index.js

@@ -53,7 +53,9 @@ const ThirdParty = lazy(() =>
 const SingleSignOn = lazy(() =>
   import("./categories/integration/SingleSignOn")
 );
-
+const SMTPSettings = lazy(() =>
+  import("./categories/integration/SMTPSettings")
+);
 const Backup = lazy(() => import("./categories/data-management/index"));
 
 const RestoreBackup = lazy(() =>
@@ -152,6 +154,7 @@ const INTEGRATION_URLS = [
   combineUrl(PROXY_BASE_URL, "/integration/single-sign-on"),
   combineUrl(PROXY_BASE_URL, "/integration/portal-integration"),
   combineUrl(PROXY_BASE_URL, "/integration/plugins"),
+  combineUrl(PROXY_BASE_URL, "/integration/smtp-settings"),
 ];
 
 const PAYMENTS_URL = combineUrl(PROXY_BASE_URL, "/payments/portal-payments");
@@ -163,6 +166,8 @@ const THIRD_PARTY_URL = combineUrl(
 
 const SSO_URL = combineUrl(PROXY_BASE_URL, "/integration/single-sign-on");
 
+const SMTP_Settings = combineUrl(PROXY_BASE_URL, "/integration/smtp-settings");
+
 const DELETE_DATA_URLS = [
   combineUrl(PROXY_BASE_URL, "/delete-data/deletion"),
   combineUrl(PROXY_BASE_URL, "/delete-data/deactivation"),
@@ -196,11 +201,12 @@ const Settings = () => {
           <Route exact path={PAYMENTS_URL} component={Payments} />
           <Route exact path={THIRD_PARTY_URL} component={ThirdParty} />
           <Route exact path={SSO_URL} component={SingleSignOn} />
+          <Route exact path={SMTP_Settings} component={SMTPSettings} />
           <Route exact path={DEVELOPER_URLS} component={DeveloperTools} />
           <Route exact path={BACKUP_URLS} component={Backup} />
           <Route exact path={DELETE_DATA_URLS} component={DeleteDataPage} />
           <Route path={RESTORE_DATA_URL} component={RestoreBackup} />
-          <Redirect to={{pathname: ERROR_404_URL}} />
+          <Redirect to={{ pathname: ERROR_404_URL }} />
         </Switch>
       </Suspense>
     </Layout>

packages/client/src/pages/PortalSettings/utils/settingsTree.js

@@ -278,6 +278,14 @@ export const settingsTree = [
         tKey: "Plugins",
         isCategory: true,
       },
+      {
+        id: "portal-settings_catalog-smtp-settings",
+        key: "4-3",
+        icon: "",
+        link: "smtp-settings",
+        tKey: "SMTPSettings",
+        isCategory: true,
+      },
     ],
   },
   {

packages/client/src/store/SettingsSetupStore.js

@@ -46,6 +46,7 @@ class SettingsSetupStore {
   integration = {
     consumers: [],
     selectedConsumer: {},
+    smtpSettings: {},
   };
 
   dataManagement = {
@@ -117,6 +118,10 @@ class SettingsSetupStore {
     this.integration.consumers = consumers;
   };
 
+  setSMTPSettings = (settings) => {
+    this.integration.smtpSettings = settings;
+  };
+
   setAddUsers = (func) => {
     this.headerAction.addUsers = func;
   };

packages/common/api/settings/index.js

@@ -740,3 +740,27 @@ export function muteRoomNotification(id, isMute) {
 
   return request(options);
 }
+
+export function setSMTPSettings(data) {
+  const options = {
+    method: "post",
+    url: `/smtpsettings/smtp`,
+    data,
+  };
+
+  return request(options);
+}
+
+export function getSMTPSettings() {
+  return request({
+    method: "get",
+    url: `/smtpsettings/smtp`,
+  });
+}
+
+export function resetSMTPSettings() {
+  return request({
+    method: "delete",
+    url: `/smtpsettings/smtp`,
+  });
+}