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

161
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,37 +54,49 @@ 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 () => {
const res = await client setIsLoading(true);
.mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } }) try {
.toPromise(); const res = await client
if (res?.error) { .mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } })
toast({ .toPromise();
title: 'Error occurred generating jwt keys', if (res?.error) {
isClosable: true, toast({
status: 'error', title: 'Error occurred generating jwt keys',
position: 'bottom-right', isClosable: true,
}); status: 'error',
closeHandler(); position: 'bottom-right',
} else { });
setStateVariables({ closeHandler();
...stateVariables, } else {
JWT_SECRET: res?.data?._generate_jwt_keys?.secret || '', setStateVariables({
JWT_PRIVATE_KEY: res?.data?._generate_jwt_keys?.private_key || '', ...stateVariables,
JWT_PUBLIC_KEY: res?.data?._generate_jwt_keys?.public_key || '', JWT_SECRET: res?.data?._generate_jwt_keys?.secret || '',
}); JWT_PRIVATE_KEY: res?.data?._generate_jwt_keys?.private_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,56 +160,67 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
}} }}
/> />
</Flex> </Flex>
{Object.values(HMACEncryptionType).includes( {isLoading ? (
stateVariables.JWT_TYPE <Center minH="25vh">
) ? ( <Spinner />
<Flex marginTop="8"> </Center>
<Flex w="23%" justifyContent="start" alignItems="center">
<Text fontSize="sm">JWT Secret</Text>
</Flex>
<Center w="77%">
<Input
size="sm"
value={stateVariables.JWT_SECRET}
onChange={(event: any) =>
setStateVariables({
...stateVariables,
JWT_SECRET: event.target.value,
})
}
/>
</Center>
</Flex>
) : ( ) : (
<> <>
<Flex marginTop="8"> {Object.values(HMACEncryptionType).includes(
<Flex w="23%" justifyContent="start" alignItems="center"> stateVariables.JWT_TYPE
<Text fontSize="sm">Public Key</Text> ) ? (
<Flex marginTop="8">
<Flex w="23%" justifyContent="start" alignItems="center">
<Text fontSize="sm">JWT Secret</Text>
</Flex>
<Center w="77%">
<Input
size="sm"
value={stateVariables.JWT_SECRET}
onChange={(event: any) =>
setStateVariables({
...stateVariables,
JWT_SECRET: event.target.value,
})
}
readOnly
/>
</Center>
</Flex> </Flex>
<Center w="77%"> ) : (
<InputField <>
variables={stateVariables} <Flex marginTop="8">
setVariables={setStateVariables} <Flex w="23%" justifyContent="start" alignItems="center">
inputType={TextAreaInputType.JWT_PUBLIC_KEY} <Text fontSize="sm">Public Key</Text>
placeholder="Add public key here" </Flex>
minH="25vh" <Center w="77%">
/> <InputField
</Center> variables={stateVariables}
</Flex> setVariables={setStateVariables}
<Flex marginTop="8"> inputType={TextAreaInputType.JWT_PUBLIC_KEY}
<Flex w="23%" justifyContent="start" alignItems="center"> placeholder="Add public key here"
<Text fontSize="sm">Private Key</Text> minH="25vh"
</Flex> readOnly
<Center w="77%"> />
<InputField </Center>
variables={stateVariables} </Flex>
setVariables={setStateVariables} <Flex marginTop="8">
inputType={TextAreaInputType.JWT_PRIVATE_KEY} <Flex w="23%" justifyContent="start" alignItems="center">
placeholder="Add private key here" <Text fontSize="sm">Private Key</Text>
minH="25vh" </Flex>
/> <Center w="77%">
</Center> <InputField
</Flex> variables={stateVariables}
setVariables={setStateVariables}
inputType={TextAreaInputType.JWT_PRIVATE_KEY}
placeholder="Add private key here"
minH="25vh"
readOnly
/>
</Center>
</Flex>
</>
)}
</> </>
)} )}
</ModalBody> </ModalBody>
@ -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