Skip to content

Commit 3898e43

Browse files
lakhansamanilakhansamani
committed
feat: add button to jwt config as json
1 parent 2c305e5 commit 3898e43

File tree

2 files changed

+201
-156
lines changed

2 files changed

+201
-156
lines changed

‎dashboard/src/components/EnvComponents/JWTConfiguration.tsx‎

Lines changed: 195 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,202 @@
1-
import React from "react";
2-
import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
1+
import React from 'react';
32
import {
4-
HiddenInputType,
5-
TextInputType,
6-
TextAreaInputType,
7-
} from "../../constants";
8-
import GenerateKeysModal from "../GenerateKeysModal";
9-
import InputField from "../InputField";
3+
Flex,
4+
Stack,
5+
Center,
6+
Text,
7+
useMediaQuery,
8+
Button,
9+
useToast,
10+
} from '@chakra-ui/react';
11+
import {
12+
HiddenInputType,
13+
TextInputType,
14+
TextAreaInputType,
15+
} from '../../constants';
16+
import GenerateKeysModal from '../GenerateKeysModal';
17+
import InputField from '../InputField';
18+
import { copyTextToClipboard } from '../../utils';
1019

1120
const JSTConfigurations = ({
12-
variables,
13-
setVariables,
14-
fieldVisibility,
15-
setFieldVisibility,
16-
SelectInputType,
17-
getData,
18-
HMACEncryptionType,
19-
RSAEncryptionType,
20-
ECDSAEncryptionType,
21+
variables,
22+
setVariables,
23+
fieldVisibility,
24+
setFieldVisibility,
25+
SelectInputType,
26+
getData,
27+
HMACEncryptionType,
28+
RSAEncryptionType,
29+
ECDSAEncryptionType,
2130
}: any) => {
22-
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
31+
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
32+
const toast = useToast();
33+
34+
const copyJSON = async () => {
35+
console.log(variables);
36+
try {
37+
await copyTextToClipboard(
38+
JSON.stringify({
39+
type: variables.JWT_TYPE,
40+
key: variables.JWT_PUBLIC_KEY || variables.JWT_SECRET,
41+
})
42+
);
43+
toast({
44+
title: `JWT config copied successfully`,
45+
isClosable: true,
46+
status: 'success',
47+
position: 'bottom-right',
48+
});
49+
} catch (err) {
50+
console.error({
51+
message: `Failed to copy JWT config`,
52+
error: err,
53+
});
54+
toast({
55+
title: `Failed to copy JWT config`,
56+
isClosable: true,
57+
status: 'error',
58+
position: 'bottom-right',
59+
});
60+
}
61+
};
2362

24-
return (
25-
<div>
26-
{" "}
27-
<Flex
28-
borderRadius={5}
29-
width="100%"
30-
justifyContent="space-between"
31-
alignItems="center"
32-
paddingTop="2%"
33-
>
34-
<Text
35-
fontSize={isNotSmallerScreen ? "md" : "sm"}
36-
fontWeight="bold"
37-
mb={5}
38-
>
39-
JWT (JSON Web Tokens) Configurations
40-
</Text>
41-
<Flex mb={7}>
42-
<GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} />
43-
</Flex>
44-
</Flex>
45-
<Stack spacing={6} padding="2% 0%">
46-
<Flex direction={isNotSmallerScreen ? "row" : "column"}>
47-
<Flex w="30%" justifyContent="start" alignItems="center">
48-
<Text fontSize="sm">JWT Type:</Text>
49-
</Flex>
50-
<Flex
51-
w={isNotSmallerScreen ? "70%" : "100%"}
52-
mt={isNotSmallerScreen ? "0" : "2"}
53-
>
54-
<InputField
55-
borderRadius={5}
56-
variables={variables}
57-
setVariables={setVariables}
58-
inputType={SelectInputType}
59-
value={SelectInputType}
60-
options={{
61-
...HMACEncryptionType,
62-
...RSAEncryptionType,
63-
...ECDSAEncryptionType,
64-
}}
65-
/>
66-
</Flex>
67-
</Flex>
68-
{Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? (
69-
<Flex direction={isNotSmallerScreen ? "row" : "column"}>
70-
<Flex w="30%" justifyContent="start" alignItems="center">
71-
<Text fontSize="sm">JWT Secret</Text>
72-
</Flex>
73-
<Center
74-
w={isNotSmallerScreen ? "70%" : "100%"}
75-
mt={isNotSmallerScreen ? "0" : "2"}
76-
>
77-
<InputField
78-
borderRadius={5}
79-
variables={variables}
80-
setVariables={setVariables}
81-
fieldVisibility={fieldVisibility}
82-
setFieldVisibility={setFieldVisibility}
83-
inputType={HiddenInputType.JWT_SECRET}
84-
/>
85-
</Center>
86-
</Flex>
87-
) : (
88-
<>
89-
<Flex direction={isNotSmallerScreen ? "row" : "column"}>
90-
<Flex w="30%" justifyContent="start" alignItems="center">
91-
<Text fontSize="sm">Public Key</Text>
92-
</Flex>
93-
<Center
94-
w={isNotSmallerScreen ? "70%" : "100%"}
95-
mt={isNotSmallerScreen ? "0" : "2"}
96-
>
97-
<InputField
98-
borderRadius={5}
99-
variables={variables}
100-
setVariables={setVariables}
101-
inputType={TextAreaInputType.JWT_PUBLIC_KEY}
102-
placeholder="Add public key here"
103-
minH="25vh"
104-
/>
105-
</Center>
106-
</Flex>
107-
<Flex direction={isNotSmallerScreen ? "row" : "column"}>
108-
<Flex w="30%" justifyContent="start" alignItems="center">
109-
<Text fontSize="sm">Private Key</Text>
110-
</Flex>
111-
<Center
112-
w={isNotSmallerScreen ? "70%" : "100%"}
113-
mt={isNotSmallerScreen ? "0" : "2"}
114-
>
115-
<InputField
116-
borderRadius={5}
117-
variables={variables}
118-
setVariables={setVariables}
119-
inputType={TextAreaInputType.JWT_PRIVATE_KEY}
120-
placeholder="Add private key here"
121-
minH="25vh"
122-
/>
123-
</Center>
124-
</Flex>
125-
</>
126-
)}
127-
<Flex direction={isNotSmallerScreen ? "row" : "column"}>
128-
<Flex
129-
w={isNotSmallerScreen ? "30%" : "40%"}
130-
justifyContent="start"
131-
alignItems="center"
132-
>
133-
<Text fontSize="sm" orientation="vertical">
134-
JWT Role Claim:
135-
</Text>
136-
</Flex>
137-
<Center
138-
w={isNotSmallerScreen ? "70%" : "100%"}
139-
mt={isNotSmallerScreen ? "0" : "2"}
140-
>
141-
<InputField
142-
borderRadius={5}
143-
variables={variables}
144-
setVariables={setVariables}
145-
inputType={TextInputType.JWT_ROLE_CLAIM}
146-
/>
147-
</Center>
148-
</Flex>
149-
</Stack>
150-
</div>
151-
);
63+
return (
64+
<div>
65+
{' '}
66+
<Flex
67+
borderRadius={5}
68+
width="100%"
69+
justifyContent="space-between"
70+
alignItems="center"
71+
paddingTop="2%"
72+
>
73+
<Text
74+
fontSize={isNotSmallerScreen ? 'md' : 'sm'}
75+
fontWeight="bold"
76+
mb={5}
77+
>
78+
JWT (JSON Web Tokens) Configurations
79+
</Text>
80+
<Flex mb={7}>
81+
<Button
82+
colorScheme="blue"
83+
h="1.75rem"
84+
size="sm"
85+
variant="ghost"
86+
onClick={copyJSON}
87+
>
88+
Copy As JSON Config
89+
</Button>
90+
<GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} />
91+
</Flex>
92+
</Flex>
93+
<Stack spacing={6} padding="2% 0%">
94+
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
95+
<Flex w="30%" justifyContent="start" alignItems="center">
96+
<Text fontSize="sm">JWT Type:</Text>
97+
</Flex>
98+
<Flex
99+
w={isNotSmallerScreen ? '70%' : '100%'}
100+
mt={isNotSmallerScreen ? '0' : '2'}
101+
>
102+
<InputField
103+
borderRadius={5}
104+
variables={variables}
105+
setVariables={setVariables}
106+
inputType={SelectInputType}
107+
value={SelectInputType}
108+
options={{
109+
...HMACEncryptionType,
110+
...RSAEncryptionType,
111+
...ECDSAEncryptionType,
112+
}}
113+
/>
114+
</Flex>
115+
</Flex>
116+
{Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? (
117+
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
118+
<Flex w="30%" justifyContent="start" alignItems="center">
119+
<Text fontSize="sm">JWT Secret</Text>
120+
</Flex>
121+
<Center
122+
w={isNotSmallerScreen ? '70%' : '100%'}
123+
mt={isNotSmallerScreen ? '0' : '2'}
124+
>
125+
<InputField
126+
borderRadius={5}
127+
variables={variables}
128+
setVariables={setVariables}
129+
fieldVisibility={fieldVisibility}
130+
setFieldVisibility={setFieldVisibility}
131+
inputType={HiddenInputType.JWT_SECRET}
132+
/>
133+
</Center>
134+
</Flex>
135+
) : (
136+
<>
137+
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
138+
<Flex w="30%" justifyContent="start" alignItems="center">
139+
<Text fontSize="sm">Public Key</Text>
140+
</Flex>
141+
<Center
142+
w={isNotSmallerScreen ? '70%' : '100%'}
143+
mt={isNotSmallerScreen ? '0' : '2'}
144+
>
145+
<InputField
146+
borderRadius={5}
147+
variables={variables}
148+
setVariables={setVariables}
149+
inputType={TextAreaInputType.JWT_PUBLIC_KEY}
150+
placeholder="Add public key here"
151+
minH="25vh"
152+
/>
153+
</Center>
154+
</Flex>
155+
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
156+
<Flex w="30%" justifyContent="start" alignItems="center">
157+
<Text fontSize="sm">Private Key</Text>
158+
</Flex>
159+
<Center
160+
w={isNotSmallerScreen ? '70%' : '100%'}
161+
mt={isNotSmallerScreen ? '0' : '2'}
162+
>
163+
<InputField
164+
borderRadius={5}
165+
variables={variables}
166+
setVariables={setVariables}
167+
inputType={TextAreaInputType.JWT_PRIVATE_KEY}
168+
placeholder="Add private key here"
169+
minH="25vh"
170+
/>
171+
</Center>
172+
</Flex>
173+
</>
174+
)}
175+
<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
176+
<Flex
177+
w={isNotSmallerScreen ? '30%' : '40%'}
178+
justifyContent="start"
179+
alignItems="center"
180+
>
181+
<Text fontSize="sm" orientation="vertical">
182+
JWT Role Claim:
183+
</Text>
184+
</Flex>
185+
<Center
186+
w={isNotSmallerScreen ? '70%' : '100%'}
187+
mt={isNotSmallerScreen ? '0' : '2'}
188+
>
189+
<InputField
190+
borderRadius={5}
191+
variables={variables}
192+
setVariables={setVariables}
193+
inputType={TextInputType.JWT_ROLE_CLAIM}
194+
/>
195+
</Center>
196+
</Flex>
197+
</Stack>
198+
</div>
199+
);
152200
};
153201

154-
export default JSTConfigurations;
202+
export default JSTConfigurations;

‎dashboard/src/utils/index.ts‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,16 @@ const fallbackCopyTextToClipboard = (text: string) => {
2929
document.body.removeChild(textArea);
3030
};
3131

32-
export const copyTextToClipboard = (text: string) => {
32+
export const copyTextToClipboard = async (text: string) => {
3333
if (!navigator.clipboard) {
3434
fallbackCopyTextToClipboard(text);
3535
return;
3636
}
37-
navigator.clipboard.writeText(text).then(
38-
() => {
39-
console.log('Async: Copying to clipboard was successful!');
40-
},
41-
(err) => {
42-
console.error('Async: Could not copy text: ', err);
43-
}
44-
);
37+
try {
38+
navigator.clipboard.writeText(text);
39+
} catch (err) {
40+
throw err;
41+
}
4542
};
4643

4744
export const getObjectDiff = (obj1: any, obj2: any) => {

0 commit comments

Comments
 (0)