diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/ButtonContainer.js b/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/ButtonContainer.js index 9a22669cd3..3fa6f94394 100644 --- a/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/ButtonContainer.js +++ b/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/ButtonContainer.js @@ -26,7 +26,7 @@ const ButtonContainer = (props) => { const { t, isEmailValid, - onSetValidationError, + isPortValid, settings, setSMTPSettingsLoading, updateSMTPSettings, @@ -34,6 +34,7 @@ const ButtonContainer = (props) => { isLoading, isDefaultSettings, isSMTPInitialSettings, + setSMTPErrors, } = props; const [buttonOperation, setButtonOperation] = useState({ @@ -43,10 +44,13 @@ const ButtonContainer = (props) => { }); const isValidForm = () => { + const authInvalid = + settings[AUTHENTICATION] && + (settings[HOST_PASSWORD]?.trim() === "" || + settings[HOST_LOGIN]?.trim() === ""); + if ( - (settings[AUTHENTICATION] && - (settings[HOST_PASSWORD]?.trim() === "" || - settings[HOST_LOGIN]?.trim() === "")) || + authInvalid || settings[HOST]?.trim() === "" || settings[PORT]?.toString()?.trim() === "" || settings[SENDER_EMAIL_ADDRESS]?.trim() === "" @@ -55,10 +59,21 @@ const ButtonContainer = (props) => { return true; }; - const onClick = async () => { - onSetValidationError(!isEmailValid); - if (!isEmailValid) return; + const setErrors = () => { + const array = [ + { name: SENDER_EMAIL_ADDRESS, hasError: !isEmailValid }, + { name: PORT, hasError: !isPortValid }, + ]; + + setSMTPErrors(array); + }; + const onClick = async () => { + if (!isEmailValid || !isPortValid) { + setErrors(); + + return; + } timerId = setTimeout(() => { setSMTPSettingsLoading(true); @@ -199,6 +214,7 @@ export default inject(({ setup }) => { updateSMTPSettings, resetSMTPSettings, isSMTPInitialSettings, + setSMTPErrors, } = setup; const { smtpSettings } = integration; const { settings, isLoading, isDefaultSettings } = smtpSettings; @@ -210,5 +226,6 @@ export default inject(({ setup }) => { updateSMTPSettings, resetSMTPSettings, isLoading, + setSMTPErrors, }; })(observer(ButtonContainer)); diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/CustomSettings.js b/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/CustomSettings.js index 98818b5703..b0bc7e3474 100644 --- a/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/CustomSettings.js +++ b/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, isLoading, theme } = props; + const { t, settings, setSMTPSettings, isLoading, theme, errors } = props; const [emailError, setEmailError] = useState({ hasError: false, isValid: true, @@ -69,13 +69,6 @@ const CustomSettings = (props) => { }); }; - const onSetValidationError = (hasError) => { - setEmailError({ - ...emailError, - hasError, - }); - }; - const commonTextProps = { fontWeight: 600, }; @@ -167,6 +160,7 @@ const CustomSettings = (props) => { onChange={onChange} value={settings[PORT].toString()} scale + hasError={errors[PORT]} /> {enableAuthComponent} @@ -191,7 +185,7 @@ const CustomSettings = (props) => { className="smtp-settings_input" isVertical place="top" - hasError={emailError.hasError} + hasError={errors[SENDER_EMAIL_ADDRESS]} errorMessage={t("Common:IncorrectEmail")} > { value={settings[SENDER_EMAIL_ADDRESS]} onChange={onChange} onValidateInput={onValidateEmailInput} - hasError={emailError.hasError} + hasError={errors[SENDER_EMAIL_ADDRESS] ?? false} placeholder={t("EnterEmail")} scale /> @@ -215,8 +209,8 @@ const CustomSettings = (props) => { /> ); @@ -225,9 +219,9 @@ const CustomSettings = (props) => { export default inject(({ auth, setup }) => { const { settingsStore } = auth; const { theme } = settingsStore; - const { integration, setSMTPSettings } = setup; + const { integration, setSMTPSettings, setSMTPErrors } = setup; const { smtpSettings } = integration; - const { settings, isLoading } = smtpSettings; + const { settings, isLoading, errors } = smtpSettings; - return { theme, settings, setSMTPSettings, isLoading }; + return { theme, settings, setSMTPSettings, isLoading, setSMTPErrors, errors }; })(observer(CustomSettings)); diff --git a/packages/client/src/store/SettingsSetupStore.js b/packages/client/src/store/SettingsSetupStore.js index cc85bc7ccc..5645c6468d 100644 --- a/packages/client/src/store/SettingsSetupStore.js +++ b/packages/client/src/store/SettingsSetupStore.js @@ -66,6 +66,7 @@ class SettingsSetupStore { }, isLoading: false, isDefaultSettings: false, + errors: {}, }, }; @@ -161,6 +162,7 @@ class SettingsSetupStore { storeSettings[key] = settings[key]; } + this.integration.smtpSettings.errors = {}; this.integration.smtpSettings.initialSettings = { ...storeSettings }; }; setInitSMTPSettings = async () => { @@ -195,6 +197,18 @@ class SettingsSetupStore { this.integration.smtpSettings.isLoading = loading; }; + setSMTPErrors = (errorsArray) => { + let errors = {}; + errorsArray.forEach((elem) => { + errors = { + ...errors, + [elem.name]: elem.hasError, + }; + }); + + this.integration.smtpSettings.errors = { ...errors }; + }; + setAddUsers = (func) => { this.headerAction.addUsers = func; };