devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

fix: generate new keys modal

Browse Source
This commit is contained in:
Lakhan Samani 2022-03-24 22:09:32 +05:30
parent 3c4c128931
commit f969495178
1 changed files with 93 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
dashboard/src/components/GenerateKeysModal.tsx
View File

@ -14,6 +14,7 @@ import {
Text, Text,
useToast, useToast,
Input, Input,
Spinner,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useClient } from 'urql'; import { useClient } from 'urql';
import { FaSave } from 'react-icons/fa'; import { FaSave } from 'react-icons/fa';
@ -53,12 +54,17 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
const [stateVariables, setStateVariables] = React.useState<stateVarTypes>({ const [stateVariables, setStateVariables] = React.useState<stateVarTypes>({
...initState, ...initState,
}); });
const [isLoading, setIsLoading] = React.useState(false);
React.useEffect(() => { React.useEffect(() => {
if (isOpen) { if (isOpen) {
setStateVariables({ ...initState, JWT_TYPE: jwtType }); setStateVariables({ ...initState, JWT_TYPE: jwtType });
} }
}, [isOpen]); }, [isOpen]);
const fetchKeys = async () => { const fetchKeys = async () => {
setIsLoading(true);
try {
const res = await client const res = await client
.mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } }) .mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } })
.toPromise(); .toPromise();
@ -78,12 +84,19 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
JWT_PUBLIC_KEY: res?.data?._generate_jwt_keys?.public_key || '', JWT_PUBLIC_KEY: res?.data?._generate_jwt_keys?.public_key || '',
}); });
} }
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
}; };
React.useEffect(() => { React.useEffect(() => {
if (isOpen && stateVariables.JWT_TYPE) { if (isOpen && stateVariables.JWT_TYPE) {
fetchKeys(); fetchKeys();
} }
}, [stateVariables.JWT_TYPE]); }, [stateVariables.JWT_TYPE]);
const saveHandler = async () => { const saveHandler = async () => {
const res = await client const res = await client
.mutation(UpdateEnvVariables, { params: { ...stateVariables } }) .mutation(UpdateEnvVariables, { params: { ...stateVariables } })
@ -110,9 +123,10 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
const closeHandler = () => { const closeHandler = () => {
setStateVariables({ ...initState }); setStateVariables({ ...initState });
onClose();
getData(); getData();
onClose();
}; };
return ( return (
<> <>
<Button <Button
@ -124,7 +138,7 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
> >
Generate new keys Generate new keys
</Button> </Button>
<Modal isOpen={isOpen} onClose={onClose}> <Modal isOpen={isOpen} onClose={closeHandler}>
<ModalOverlay /> <ModalOverlay />
<ModalContent> <ModalContent>
<ModalHeader>New JWT keys</ModalHeader> <ModalHeader>New JWT keys</ModalHeader>
@ -146,6 +160,12 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
}} }}
/> />
</Flex> </Flex>
{isLoading ? (
<Center minH="25vh">
<Spinner />
</Center>
) : (
<>
{Object.values(HMACEncryptionType).includes( {Object.values(HMACEncryptionType).includes(
stateVariables.JWT_TYPE stateVariables.JWT_TYPE
) ? ( ) ? (
@ -163,6 +183,7 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
JWT_SECRET: event.target.value, JWT_SECRET: event.target.value,
}) })
} }
readOnly
/> />
</Center> </Center>
</Flex> </Flex>
@ -179,6 +200,7 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
inputType={TextAreaInputType.JWT_PUBLIC_KEY} inputType={TextAreaInputType.JWT_PUBLIC_KEY}
placeholder="Add public key here" placeholder="Add public key here"
minH="25vh" minH="25vh"
readOnly
/> />
</Center> </Center>
</Flex> </Flex>
@ -193,11 +215,14 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
inputType={TextAreaInputType.JWT_PRIVATE_KEY} inputType={TextAreaInputType.JWT_PRIVATE_KEY}
placeholder="Add private key here" placeholder="Add private key here"
minH="25vh" minH="25vh"
readOnly
/> />
</Center> </Center>
</Flex> </Flex>
</> </>
)} )}
</>
)}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
@ -206,7 +231,7 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
colorScheme="blue" colorScheme="blue"
variant="solid" variant="solid"
onClick={saveHandler} onClick={saveHandler}
isDisabled={false} isDisabled={isLoading}
> >
<Center h="100%" pt="5%"> <Center h="100%" pt="5%">
Apply Apply