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

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

@ -1,12 +1,21 @@
import React from "react"; import React from 'react';
import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react"; import {
Flex,
Stack,
Center,
Text,
useMediaQuery,
Button,
useToast,
} from '@chakra-ui/react';
import { import {
HiddenInputType, HiddenInputType,
TextInputType, TextInputType,
TextAreaInputType, TextAreaInputType,
} from "../../constants"; } from '../../constants';
import GenerateKeysModal from "../GenerateKeysModal"; import GenerateKeysModal from '../GenerateKeysModal';
import InputField from "../InputField"; import InputField from '../InputField';
import { copyTextToClipboard } from '../../utils';
const JSTConfigurations = ({ const JSTConfigurations = ({
variables, variables,
@ -19,11 +28,41 @@ const JSTConfigurations = ({
RSAEncryptionType, RSAEncryptionType,
ECDSAEncryptionType, ECDSAEncryptionType,
}: any) => { }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
const toast = useToast();
const copyJSON = async () => {
console.log(variables);
try {
await copyTextToClipboard(
JSON.stringify({
type: variables.JWT_TYPE,
key: variables.JWT_PUBLIC_KEY || variables.JWT_SECRET,
})
);
toast({
title: `JWT config copied successfully`,
isClosable: true,
status: 'success',
position: 'bottom-right',
});
} catch (err) {
console.error({
message: `Failed to copy JWT config`,
error: err,
});
toast({
title: `Failed to copy JWT config`,
isClosable: true,
status: 'error',
position: 'bottom-right',
});
}
};
return ( return (
<div> <div>
{" "} {' '}
<Flex <Flex
borderRadius={5} borderRadius={5}
width="100%" width="100%"
@ -32,24 +71,33 @@ const JSTConfigurations = ({
paddingTop="2%" paddingTop="2%"
> >
<Text <Text
fontSize={isNotSmallerScreen ? "md" : "sm"} fontSize={isNotSmallerScreen ? 'md' : 'sm'}
fontWeight="bold" fontWeight="bold"
mb={5} mb={5}
> >
JWT (JSON Web Tokens) Configurations JWT (JSON Web Tokens) Configurations
</Text> </Text>
<Flex mb={7}> <Flex mb={7}>
<Button
colorScheme="blue"
h="1.75rem"
size="sm"
variant="ghost"
onClick={copyJSON}
>
Copy As JSON Config
</Button>
<GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} /> <GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} />
</Flex> </Flex>
</Flex> </Flex>
<Stack spacing={6} padding="2% 0%"> <Stack spacing={6} padding="2% 0%">
<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">JWT Type:</Text> <Text fontSize="sm">JWT Type:</Text>
</Flex> </Flex>
<Flex <Flex
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "2"} mt={isNotSmallerScreen ? '0' : '2'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}
@ -66,13 +114,13 @@ const JSTConfigurations = ({
</Flex> </Flex>
</Flex> </Flex>
{Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? ( {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">JWT Secret</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}
@ -86,13 +134,13 @@ const JSTConfigurations = ({
</Flex> </Flex>
) : ( ) : (
<> <>
<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">Public Key</Text> <Text fontSize="sm">Public Key</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}
@ -104,13 +152,13 @@ const JSTConfigurations = ({
/> />
</Center> </Center>
</Flex> </Flex>
<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">Private Key</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}
@ -124,9 +172,9 @@ const JSTConfigurations = ({
</Flex> </Flex>
</> </>
)} )}
<Flex direction={isNotSmallerScreen ? "row" : "column"}> <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
<Flex <Flex
w={isNotSmallerScreen ? "30%" : "40%"} w={isNotSmallerScreen ? '30%' : '40%'}
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
@ -135,8 +183,8 @@ const JSTConfigurations = ({
</Text> </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}

13
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) => {