135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
|
|
import InputField from '../../components/InputField';
|
|
import { TextInputType, HiddenInputType } from '../../constants';
|
|
const EmailConfigurations = ({
|
|
variables,
|
|
setVariables,
|
|
fieldVisibility,
|
|
setFieldVisibility,
|
|
}: any) => {
|
|
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
|
|
return (
|
|
<div>
|
|
{' '}
|
|
<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
|
|
Email Configurations
|
|
</Text>
|
|
<Stack spacing={6} padding="2% 0%">
|
|
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
|
|
<Flex w="30%" justifyContent="start" alignItems="center">
|
|
<Text fontSize="sm">SMTP Host:</Text>
|
|
</Flex>
|
|
<Center
|
|
w={isNotSmallerScreen ? '70%' : '100%'}
|
|
mt={isNotSmallerScreen ? '0' : '3'}
|
|
>
|
|
<InputField
|
|
borderRadius={5}
|
|
variables={variables}
|
|
setVariables={setVariables}
|
|
inputType={TextInputType.SMTP_HOST}
|
|
/>
|
|
</Center>
|
|
</Flex>
|
|
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
|
|
<Flex w="30%" justifyContent="start" alignItems="center">
|
|
<Text fontSize="sm">SMTP Port:</Text>
|
|
</Flex>
|
|
<Center
|
|
w={isNotSmallerScreen ? '70%' : '100%'}
|
|
mt={isNotSmallerScreen ? '0' : '3'}
|
|
>
|
|
<InputField
|
|
borderRadius={5}
|
|
variables={variables}
|
|
setVariables={setVariables}
|
|
inputType={TextInputType.SMTP_PORT}
|
|
/>
|
|
</Center>
|
|
</Flex>
|
|
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
|
|
<Flex
|
|
w={isNotSmallerScreen ? '30%' : '40%'}
|
|
justifyContent="start"
|
|
alignItems="center"
|
|
>
|
|
<Text fontSize="sm">SMTP Local Name:</Text>
|
|
</Flex>
|
|
<Center
|
|
w={isNotSmallerScreen ? '70%' : '100%'}
|
|
mt={isNotSmallerScreen ? '0' : '3'}
|
|
>
|
|
<InputField
|
|
borderRadius={5}
|
|
variables={variables}
|
|
setVariables={setVariables}
|
|
inputType={TextInputType.SMTP_LOCAL_NAME}
|
|
/>
|
|
</Center>
|
|
</Flex>
|
|
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
|
|
<Flex
|
|
w={isNotSmallerScreen ? '30%' : '40%'}
|
|
justifyContent="start"
|
|
alignItems="center"
|
|
>
|
|
<Text fontSize="sm">SMTP Username:</Text>
|
|
</Flex>
|
|
<Center
|
|
w={isNotSmallerScreen ? '70%' : '100%'}
|
|
mt={isNotSmallerScreen ? '0' : '3'}
|
|
>
|
|
<InputField
|
|
borderRadius={5}
|
|
variables={variables}
|
|
setVariables={setVariables}
|
|
inputType={TextInputType.SMTP_USERNAME}
|
|
/>
|
|
</Center>
|
|
</Flex>
|
|
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
|
|
<Flex
|
|
w={isNotSmallerScreen ? '30%' : '40%'}
|
|
justifyContent="start"
|
|
alignItems="center"
|
|
>
|
|
<Text fontSize="sm">SMTP Password:</Text>
|
|
</Flex>
|
|
<Center
|
|
w={isNotSmallerScreen ? '70%' : '100%'}
|
|
mt={isNotSmallerScreen ? '0' : '3'}
|
|
>
|
|
<InputField
|
|
borderRadius={5}
|
|
variables={variables}
|
|
setVariables={setVariables}
|
|
fieldVisibility={fieldVisibility}
|
|
setFieldVisibility={setFieldVisibility}
|
|
inputType={HiddenInputType.SMTP_PASSWORD}
|
|
/>
|
|
</Center>
|
|
</Flex>
|
|
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
|
|
<Flex w="30%" justifyContent="start" alignItems="center">
|
|
<Text fontSize="sm">From Email:</Text>
|
|
</Flex>
|
|
<Center
|
|
w={isNotSmallerScreen ? '70%' : '100%'}
|
|
mt={isNotSmallerScreen ? '0' : '3'}
|
|
>
|
|
<InputField
|
|
borderRadius={5}
|
|
variables={variables}
|
|
setVariables={setVariables}
|
|
inputType={TextInputType.SENDER_EMAIL}
|
|
/>
|
|
</Center>
|
|
</Flex>
|
|
</Stack>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmailConfigurations;
|