139 lines
3.3 KiB
TypeScript
139 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Flex,
|
|
Stack,
|
|
Center,
|
|
Text,
|
|
Input,
|
|
InputGroup,
|
|
InputRightElement,
|
|
useMediaQuery,
|
|
} from '@chakra-ui/react';
|
|
import { FaRegEyeSlash, FaRegEye } from 'react-icons/fa';
|
|
import InputField from '../InputField';
|
|
import { HiddenInputType } from '../../constants';
|
|
const SecurityAdminSecret = ({
|
|
variables,
|
|
setVariables,
|
|
fieldVisibility,
|
|
setFieldVisibility,
|
|
validateAdminSecretHandler,
|
|
adminSecret,
|
|
}: any) => {
|
|
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
|
|
return (
|
|
<div>
|
|
{' '}
|
|
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
|
|
Security (Admin Secret)
|
|
</Text>
|
|
<Stack
|
|
spacing={6}
|
|
padding="0 5%"
|
|
marginTop="3%"
|
|
border="1px solid #ff7875"
|
|
borderRadius="5px"
|
|
>
|
|
<Flex
|
|
marginTop={isNotSmallerScreen ? '3%' : '5%'}
|
|
direction={isNotSmallerScreen ? 'row' : 'column'}
|
|
>
|
|
<Flex
|
|
mt={3}
|
|
w={isNotSmallerScreen ? '30%' : '40%'}
|
|
justifyContent="start"
|
|
alignItems="center"
|
|
>
|
|
<Text fontSize="sm">Old Admin Secret:</Text>
|
|
</Flex>
|
|
<Center
|
|
w={isNotSmallerScreen ? '70%' : '100%'}
|
|
mt={isNotSmallerScreen ? '0' : '3'}
|
|
>
|
|
<InputGroup size="sm">
|
|
<Input
|
|
borderRadius={5}
|
|
size="sm"
|
|
placeholder="Enter Old Admin Secret"
|
|
value={adminSecret.value as string}
|
|
onChange={(event: any) => validateAdminSecretHandler(event)}
|
|
type={
|
|
!fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET]
|
|
? 'password'
|
|
: 'text'
|
|
}
|
|
/>
|
|
<InputRightElement
|
|
right="5px"
|
|
children={
|
|
<Flex>
|
|
{fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET] ? (
|
|
<Center
|
|
w="25px"
|
|
margin="0 1.5%"
|
|
cursor="pointer"
|
|
onClick={() =>
|
|
setFieldVisibility({
|
|
...fieldVisibility,
|
|
[HiddenInputType.OLD_ADMIN_SECRET]: false,
|
|
})
|
|
}
|
|
>
|
|
<FaRegEyeSlash color="#bfbfbf" />
|
|
</Center>
|
|
) : (
|
|
<Center
|
|
w="25px"
|
|
margin="0 1.5%"
|
|
cursor="pointer"
|
|
onClick={() =>
|
|
setFieldVisibility({
|
|
...fieldVisibility,
|
|
[HiddenInputType.OLD_ADMIN_SECRET]: true,
|
|
})
|
|
}
|
|
>
|
|
<FaRegEye color="#bfbfbf" />
|
|
</Center>
|
|
)}
|
|
</Flex>
|
|
}
|
|
/>
|
|
</InputGroup>
|
|
</Center>
|
|
</Flex>
|
|
<Flex
|
|
paddingBottom="3%"
|
|
direction={isNotSmallerScreen ? 'row' : 'column'}
|
|
>
|
|
<Flex
|
|
w={isNotSmallerScreen ? '30%' : '50%'}
|
|
justifyContent="start"
|
|
alignItems="center"
|
|
>
|
|
<Text fontSize="sm">New Admin Secret:</Text>
|
|
</Flex>
|
|
<Center
|
|
w={isNotSmallerScreen ? '70%' : '100%'}
|
|
mt={isNotSmallerScreen ? '0' : '3'}
|
|
>
|
|
<InputField
|
|
borderRadius={5}
|
|
mb={3}
|
|
variables={variables}
|
|
setVariables={setVariables}
|
|
inputType={HiddenInputType.ADMIN_SECRET}
|
|
fieldVisibility={fieldVisibility}
|
|
setFieldVisibility={setFieldVisibility}
|
|
isDisabled={adminSecret.disableInputField}
|
|
placeholder="Enter New Admin Secret"
|
|
/>
|
|
</Center>
|
|
</Flex>
|
|
</Stack>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SecurityAdminSecret;
|