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

mutation to update jwt vars added

Browse Source
This commit is contained in:
Anik Ghosh 2022-03-24 21:08:10 +05:30
parent 7d77396657
commit a3d9783aef
3 changed files with 82 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,18 +19,17 @@ import { useClient } from 'urql';
import { FaSave } from 'react-icons/fa'; import { FaSave } from 'react-icons/fa';
import { import {
ECDSAEncryptionType, ECDSAEncryptionType,
envVarTypes,
HMACEncryptionType, HMACEncryptionType,
RSAEncryptionType, RSAEncryptionType,
SelectInputType, SelectInputType,
TextAreaInputType, TextAreaInputType,
} from '../constants'; } from '../constants';
import InputField from './InputField'; import InputField from './InputField';
import { GenerateKeys, UpdateEnvVariables } from '../graphql/mutation';
interface propTypes { interface propTypes {
saveEnvHandler: Function; jwtType: string;
variables: envVarTypes; getData: Function;
setVariables: Function;
} }
interface stateVarTypes { interface stateVarTypes {
@ -47,11 +46,7 @@ const initState: stateVarTypes = {
JWT_PUBLIC_KEY: '', JWT_PUBLIC_KEY: '',
}; };
const GenerateKeysModal = ({ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
saveEnvHandler,
variables,
setVariables,
}: propTypes) => {
const client = useClient(); const client = useClient();
const toast = useToast(); const toast = useToast();
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
@ -60,17 +55,26 @@ const GenerateKeysModal = ({
}); });
React.useEffect(() => { React.useEffect(() => {
if (isOpen) { if (isOpen) {
setStateVariables({ ...initState, JWT_TYPE: variables.JWT_TYPE }); setStateVariables({ ...initState, JWT_TYPE: jwtType });
} }
}, [isOpen]); }, [isOpen]);
const setKeys = () => { const fetchKeys = async () => {
// fetch keys from api const res = await client
console.log('calling setKeys ==>> ', stateVariables.JWT_TYPE); .mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } })
if (true) { .toPromise();
if (Object.values(HMACEncryptionType).includes(stateVariables.JWT_TYPE)) { if (res?.error) {
toast({
title: 'Error occurred generating jwt keys',
isClosable: true,
status: 'error',
position: 'bottom-right',
});
closeHandler();
} else {
if (res?.data?._generate_jwt_keys?.secret) {
setStateVariables({ setStateVariables({
...stateVariables, ...stateVariables,
JWT_SECRET: 'hello_world', JWT_SECRET: res.data._generate_jwt_keys.secret,
JWT_PRIVATE_KEY: '', JWT_PRIVATE_KEY: '',
JWT_PUBLIC_KEY: '', JWT_PUBLIC_KEY: '',
}); });
@ -78,39 +82,45 @@ const GenerateKeysModal = ({
setStateVariables({ setStateVariables({
...stateVariables, ...stateVariables,
JWT_SECRET: '', JWT_SECRET: '',
JWT_PRIVATE_KEY: 'test private key', JWT_PRIVATE_KEY: res.data._generate_jwt_keys.private_key,
JWT_PUBLIC_KEY: 'test public key', JWT_PUBLIC_KEY: res.data._generate_jwt_keys.public_key,
}); });
} }
}
};
React.useEffect(() => {
if (isOpen && stateVariables.JWT_TYPE) {
fetchKeys();
}
}, [stateVariables.JWT_TYPE]);
const saveHandler = async () => {
const res = await client
.mutation(UpdateEnvVariables, { params: { ...stateVariables } })
.toPromise();
if (res.error) {
toast({ toast({
title: 'New keys generated', title: 'Error occurred setting jwt keys',
isClosable: true,
status: 'success',
position: 'bottom-right',
});
} else {
toast({
title: 'Error occurred generating keys',
isClosable: true, isClosable: true,
status: 'error', status: 'error',
position: 'bottom-right', position: 'bottom-right',
}); });
closeHandler();
return;
} }
}; toast({
React.useEffect(() => { title: 'JWT keys updated successfully',
if (isOpen) { isClosable: true,
setKeys(); status: 'success',
} position: 'bottom-right',
}, [stateVariables.JWT_TYPE]); });
const saveHandler = async () => {
setVariables({ ...variables, ...stateVariables });
saveEnvHandler();
closeHandler(); closeHandler();
}; };
const closeHandler = async () => {
const closeHandler = () => {
setStateVariables({ ...initState }); setStateVariables({ ...initState });
onClose(); onClose();
getData();
}; };
return ( return (
<> <>
@ -149,10 +159,10 @@ const GenerateKeysModal = ({
stateVariables.JWT_TYPE stateVariables.JWT_TYPE
) ? ( ) ? (
<Flex marginTop="8"> <Flex marginTop="8">
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="23%" justifyContent="start" alignItems="center">
<Text fontSize="sm">JWT Secret</Text> <Text fontSize="sm">JWT Secret</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="77%">
<Input <Input
size="sm" size="sm"
value={stateVariables.JWT_SECRET} value={stateVariables.JWT_SECRET}
@ -168,10 +178,10 @@ const GenerateKeysModal = ({
) : ( ) : (
<> <>
<Flex marginTop="8"> <Flex marginTop="8">
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="23%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Public Key</Text> <Text fontSize="sm">Public Key</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="77%">
<InputField <InputField
variables={stateVariables} variables={stateVariables}
setVariables={setStateVariables} setVariables={setStateVariables}
@ -182,10 +192,10 @@ const GenerateKeysModal = ({
</Center> </Center>
</Flex> </Flex>
<Flex marginTop="8"> <Flex marginTop="8">
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="23%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Private Key</Text> <Text fontSize="sm">Private Key</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="77%">
<InputField <InputField
variables={stateVariables} variables={stateVariables}
setVariables={setStateVariables} setVariables={setStateVariables}
@ -202,7 +212,7 @@ const GenerateKeysModal = ({
<ModalFooter> <ModalFooter>
<Button <Button
leftIcon={<FaSave />} leftIcon={<FaSave />}
colorScheme="red" colorScheme="blue"
variant="solid" variant="solid"
onClick={saveHandler} onClick={saveHandler}
isDisabled={false} isDisabled={false}

10
dashboard/src/graphql/mutation/index.ts
View File

@ -69,3 +69,13 @@ export const EnableAccess = `
} }
} }
`; `;
export const GenerateKeys = `
mutation generateKeys($params: GenerateJWTKeysInput!) {
_generate_jwt_keys(params: $params) {
secret
public_key
private_key
}
}
`;

15
dashboard/src/pages/Environment.tsx
View File

@ -99,14 +99,10 @@ export default function Environment() {
OLD_ADMIN_SECRET: false, OLD_ADMIN_SECRET: false,
}); });
useEffect(() => {
let isMounted = true;
async function getData() { async function getData() {
const { const {
data: { _env: envData }, data: { _env: envData },
} = await client.query(EnvVariablesQuery).toPromise(); } = await client.query(EnvVariablesQuery).toPromise();
if (isMounted) {
setLoading(false); setLoading(false);
setEnvVariables({ setEnvVariables({
...envData, ...envData,
@ -118,13 +114,9 @@ export default function Environment() {
disableInputField: true, disableInputField: true,
}); });
} }
}
useEffect(() => {
getData(); getData();
return () => {
isMounted = false;
};
}, []); }, []);
const validateAdminSecretHandler = (event: any) => { const validateAdminSecretHandler = (event: any) => {
@ -386,9 +378,8 @@ export default function Environment() {
</Text> </Text>
<Flex> <Flex>
<GenerateKeysModal <GenerateKeysModal
variables={envVariables} jwtType={envVariables.JWT_TYPE}
setVariables={setEnvVariables} getData={getData}
saveEnvHandler={saveHandler}
/> />
</Flex> </Flex>
</Flex> </Flex>