diff --git a/ui/apps/platform/src/Containers/Integrations/IntegrationForm/Forms/EmailIntegrationForm.tsx b/ui/apps/platform/src/Containers/Integrations/IntegrationForm/Forms/EmailIntegrationForm.tsx index b39d1fdc3c83c..4d4739211a666 100644 --- a/ui/apps/platform/src/Containers/Integrations/IntegrationForm/Forms/EmailIntegrationForm.tsx +++ b/ui/apps/platform/src/Containers/Integrations/IntegrationForm/Forms/EmailIntegrationForm.tsx @@ -1,6 +1,16 @@ /* eslint-disable no-void */ -import React, { ReactElement } from 'react'; -import { Checkbox, Form, PageSection, SelectOption, TextInput } from '@patternfly/react-core'; +import React, { ReactElement, useState } from 'react'; +import { + Alert, + AlertVariant, + Checkbox, + Form, + PageSection, + SelectOption, + TextInput, + Popover, +} from '@patternfly/react-core'; +import { HelpIcon } from '@patternfly/react-icons'; import * as yup from 'yup'; import { NotifierIntegrationBase } from 'services/NotifierIntegrationsService'; @@ -27,6 +37,7 @@ export type EmailIntegration = { sender: string; disableTLS: boolean; startTLSAuthMethod: 'DISABLED' | 'PLAIN' | 'LOGIN'; + allowUnauthenticatedSmtp: boolean; }; type: 'email'; } & NotifierIntegrationBase; @@ -69,7 +80,11 @@ export const validationSchema = yup.object().shape({ .trim() .required('A server address is required') .matches(validHostnameRegex, 'Must be a valid server address'), - username: yup.string().trim().required('A username is required'), + allowUnauthenticatedSmtp: yup.boolean(), + username: yup.string().when('allowUnauthenticatedSmtp', { + is: false, + then: (usernameSchema) => usernameSchema.trim().required('A username is required'), + }), password: yup .string() .test( @@ -77,11 +92,9 @@ export const validationSchema = yup.object().shape({ 'A password is required', (value, context: yup.TestContext) => { const requirePasswordField = - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - context?.from[2]?.value?.updatePassword || false; + context?.from?.[2].value?.updatePassword || false; - if (!requirePasswordField) { + if (!requirePasswordField || context.parent.allowUnauthenticatedSmtp) { return true; } @@ -116,6 +129,7 @@ export const defaultValues: EmailIntegrationFormValues = { sender: '', disableTLS: false, startTLSAuthMethod: 'DISABLED', + allowUnauthenticatedSmtp: false, }, labelDefault: '', labelKey: '', @@ -130,6 +144,7 @@ function EmailIntegrationForm({ isEditable = false, }: IntegrationFormProps): ReactElement { const formInitialValues = { ...defaultValues, ...initialValues }; + const [storedUsername, setStoredUsername] = useState(''); if (initialValues) { formInitialValues.notifier = { ...formInitialValues.notifier, @@ -158,6 +173,7 @@ function EmailIntegrationForm({ validationSchema, }); const { isCreating } = usePageState(); + const { allowUnauthenticatedSmtp } = values.notifier.email; function onChange(value, event) { return setFieldValue(event.target.id, value); @@ -170,6 +186,17 @@ function EmailIntegrationForm({ } } + function onUpdateUnauthenticatedChange(isChecked) { + if (isChecked) { + setStoredUsername(values.notifier.email.username); + setFieldValue('notifier.email.username', ''); + setFieldValue('notifier.email.password', ''); + } else { + setFieldValue('notifier.email.username', storedUsername); + } + setFieldValue('notifier.email.allowUnauthenticatedSmtp', isChecked); + } + function onUpdateCredentialsChange(value, event) { setFieldValue('notifier.email.password', ''); return setFieldValue(event.target.id, value); @@ -216,25 +243,71 @@ function EmailIntegrationForm({ isDisabled={!isEditable} /> + + <> +
+ + + + +
+ {allowUnauthenticatedSmtp && ( + +

+ Unauthenticated SMTP is an insecure configuration and not + generally recommended. Please proceed with caution when + enabling this setting. +

+
+ )} + +
- {!isCreating && isEditable && ( + {!isCreating && isEditable && !allowUnauthenticatedSmtp && ( @@ -88,40 +111,87 @@ function EmailIntegrationForm({ onBlur={handleBlur} /> + + <> +
+ + + + +
+ {allowUnauthenticatedSmtp && ( + +

+ Unauthenticated SMTP is an insecure configuration and not + generally recommended. Please proceed with caution when + enabling this setting. +

+
+ )} + +