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

feat: add button to jwt config as json

Browse Source
This commit is contained in:
Lakhan Samani 2022-09-10 10:50:15 +05:30
parent 2c305e5bde
commit 3898e43fff
2 changed files with 201 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

342
dashboard/src/components/EnvComponents/JWTConfiguration.tsx
View File

@ -1,154 +1,202 @@
import React from "react"; import React from 'react';
import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
import { import {
HiddenInputType, Flex,
TextInputType, Stack,
TextAreaInputType, Center,
} from "../../constants"; Text,
import GenerateKeysModal from "../GenerateKeysModal"; useMediaQuery,
import InputField from "../InputField"; Button,
useToast,
} from '@chakra-ui/react';
import {
HiddenInputType,
TextInputType,
TextAreaInputType,
} from '../../constants';
import GenerateKeysModal from '../GenerateKeysModal';
import InputField from '../InputField';
import { copyTextToClipboard } from '../../utils';
const JSTConfigurations = ({ const JSTConfigurations = ({
variables, variables,
setVariables, setVariables,
fieldVisibility, fieldVisibility,
setFieldVisibility, setFieldVisibility,
SelectInputType, SelectInputType,
getData, getData,
HMACEncryptionType, HMACEncryptionType,
RSAEncryptionType, RSAEncryptionType,
ECDSAEncryptionType, ECDSAEncryptionType,
}: any) => { }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
const toast = useToast();
return ( const copyJSON = async () => {
<div> console.log(variables);
{" "} try {
<Flex await copyTextToClipboard(
borderRadius={5} JSON.stringify({
width="100%" type: variables.JWT_TYPE,
justifyContent="space-between" key: variables.JWT_PUBLIC_KEY || variables.JWT_SECRET,
alignItems="center" })
paddingTop="2%" );
> toast({
<Text title: `JWT config copied successfully`,
fontSize={isNotSmallerScreen ? "md" : "sm"} isClosable: true,
fontWeight="bold" status: 'success',
mb={5} position: 'bottom-right',
> });
JWT (JSON Web Tokens) Configurations } catch (err) {
</Text> console.error({
<Flex mb={7}> message: `Failed to copy JWT config`,
<GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} /> error: err,
</Flex> });
</Flex> toast({
<Stack spacing={6} padding="2% 0%"> title: `Failed to copy JWT config`,
<Flex direction={isNotSmallerScreen ? "row" : "column"}> isClosable: true,
<Flex w="30%" justifyContent="start" alignItems="center"> status: 'error',
<Text fontSize="sm">JWT Type:</Text> position: 'bottom-right',
</Flex> });
<Flex }
w={isNotSmallerScreen ? "70%" : "100%"} };
mt={isNotSmallerScreen ? "0" : "2"}
> return (
<InputField <div>
borderRadius={5} {' '}
variables={variables} <Flex
setVariables={setVariables} borderRadius={5}
inputType={SelectInputType} width="100%"
value={SelectInputType} justifyContent="space-between"
options={{ alignItems="center"
...HMACEncryptionType, paddingTop="2%"
...RSAEncryptionType, >
...ECDSAEncryptionType, <Text
}} fontSize={isNotSmallerScreen ? 'md' : 'sm'}
/> fontWeight="bold"
</Flex> mb={5}
</Flex> >
{Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? ( JWT (JSON Web Tokens) Configurations
<Flex direction={isNotSmallerScreen ? "row" : "column"}> </Text>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex mb={7}>
<Text fontSize="sm">JWT Secret</Text> <Button
</Flex> colorScheme="blue"
<Center h="1.75rem"
w={isNotSmallerScreen ? "70%" : "100%"} size="sm"
mt={isNotSmallerScreen ? "0" : "2"} variant="ghost"
> onClick={copyJSON}
<InputField >
borderRadius={5} Copy As JSON Config
variables={variables} </Button>
setVariables={setVariables} <GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} />
fieldVisibility={fieldVisibility} </Flex>
setFieldVisibility={setFieldVisibility} </Flex>
inputType={HiddenInputType.JWT_SECRET} <Stack spacing={6} padding="2% 0%">
/> <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
</Center> <Flex w="30%" justifyContent="start" alignItems="center">
</Flex> <Text fontSize="sm">JWT Type:</Text>
) : ( </Flex>
<> <Flex
<Flex direction={isNotSmallerScreen ? "row" : "column"}> w={isNotSmallerScreen ? '70%' : '100%'}
<Flex w="30%" justifyContent="start" alignItems="center"> mt={isNotSmallerScreen ? '0' : '2'}
<Text fontSize="sm">Public Key</Text> >
</Flex> <InputField
<Center borderRadius={5}
w={isNotSmallerScreen ? "70%" : "100%"} variables={variables}
mt={isNotSmallerScreen ? "0" : "2"} setVariables={setVariables}
> inputType={SelectInputType}
<InputField value={SelectInputType}
borderRadius={5} options={{
variables={variables} ...HMACEncryptionType,
setVariables={setVariables} ...RSAEncryptionType,
inputType={TextAreaInputType.JWT_PUBLIC_KEY} ...ECDSAEncryptionType,
placeholder="Add public key here" }}
minH="25vh" />
/> </Flex>
</Center> </Flex>
</Flex> {Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? (
<Flex direction={isNotSmallerScreen ? "row" : "column"}> <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Private Key</Text> <Text fontSize="sm">JWT Secret</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "2"} mt={isNotSmallerScreen ? '0' : '2'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}
variables={variables} variables={variables}
setVariables={setVariables} setVariables={setVariables}
inputType={TextAreaInputType.JWT_PRIVATE_KEY} fieldVisibility={fieldVisibility}
placeholder="Add private key here" setFieldVisibility={setFieldVisibility}
minH="25vh" inputType={HiddenInputType.JWT_SECRET}
/> />
</Center> </Center>
</Flex> </Flex>
</> ) : (
)} <>
<Flex direction={isNotSmallerScreen ? "row" : "column"}> <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
<Flex <Flex w="30%" justifyContent="start" alignItems="center">
w={isNotSmallerScreen ? "30%" : "40%"} <Text fontSize="sm">Public Key</Text>
justifyContent="start" </Flex>
alignItems="center" <Center
> w={isNotSmallerScreen ? '70%' : '100%'}
<Text fontSize="sm" orientation="vertical"> mt={isNotSmallerScreen ? '0' : '2'}
JWT Role Claim: >
</Text> <InputField
</Flex> borderRadius={5}
<Center variables={variables}
w={isNotSmallerScreen ? "70%" : "100%"} setVariables={setVariables}
mt={isNotSmallerScreen ? "0" : "2"} inputType={TextAreaInputType.JWT_PUBLIC_KEY}
> placeholder="Add public key here"
<InputField minH="25vh"
borderRadius={5} />
variables={variables} </Center>
setVariables={setVariables} </Flex>
inputType={TextInputType.JWT_ROLE_CLAIM} <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
/> <Flex w="30%" justifyContent="start" alignItems="center">
</Center> <Text fontSize="sm">Private Key</Text>
</Flex> </Flex>
</Stack> <Center
</div> w={isNotSmallerScreen ? '70%' : '100%'}
); mt={isNotSmallerScreen ? '0' : '2'}
>
<InputField
borderRadius={5}
variables={variables}
setVariables={setVariables}
inputType={TextAreaInputType.JWT_PRIVATE_KEY}
placeholder="Add private key here"
minH="25vh"
/>
</Center>
</Flex>
</>
)}
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
<Flex
w={isNotSmallerScreen ? '30%' : '40%'}
justifyContent="start"
alignItems="center"
>
<Text fontSize="sm" orientation="vertical">
JWT Role Claim:
</Text>
</Flex>
<Center
w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? '0' : '2'}
>
<InputField
borderRadius={5}
variables={variables}
setVariables={setVariables}
inputType={TextInputType.JWT_ROLE_CLAIM}
/>
</Center>
</Flex>
</Stack>
</div>
);
}; };
export default JSTConfigurations; export default JSTConfigurations;

15
dashboard/src/utils/index.ts
View File

@ -29,19 +29,16 @@ const fallbackCopyTextToClipboard = (text: string) => {
document.body.removeChild(textArea); document.body.removeChild(textArea);
}; };
export const copyTextToClipboard = (text: string) => { export const copyTextToClipboard = async (text: string) => {
if (!navigator.clipboard) { if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text); fallbackCopyTextToClipboard(text);
return; return;
} }
navigator.clipboard.writeText(text).then( try {
() => { navigator.clipboard.writeText(text);
console.log('Async: Copying to clipboard was successful!'); } catch (err) {
}, throw err;
(err) => { }
console.error('Async: Could not copy text: ', err);
}
);
}; };
export const getObjectDiff = (obj1: any, obj2: any) => { export const getObjectDiff = (obj1: any, obj2: any) => {