From 4c4743ac24552ba5ad577e603ed21a2e47c2fdef Mon Sep 17 00:00:00 2001 From: Anik Ghosh Date: Thu, 24 Mar 2022 18:23:22 +0530 Subject: [PATCH 1/3] generate-keys-modal added in dashboard --- .../src/components/GenerateKeysModal.tsx | 221 ++++++++++++++++++ .../src/components/InviteMembersModal.tsx | 1 - dashboard/src/constants.ts | 37 +++ dashboard/src/pages/Environment.tsx | 59 ++--- 4 files changed, 277 insertions(+), 41 deletions(-) create mode 100644 dashboard/src/components/GenerateKeysModal.tsx diff --git a/dashboard/src/components/GenerateKeysModal.tsx b/dashboard/src/components/GenerateKeysModal.tsx new file mode 100644 index 0000000..c5431df --- /dev/null +++ b/dashboard/src/components/GenerateKeysModal.tsx @@ -0,0 +1,221 @@ +import React from 'react'; +import { + Button, + Center, + Flex, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + useDisclosure, + Text, + useToast, + Input, +} from '@chakra-ui/react'; +import { useClient } from 'urql'; +import { FaSave } from 'react-icons/fa'; +import { + ECDSAEncryptionType, + envVarTypes, + HMACEncryptionType, + RSAEncryptionType, + SelectInputType, + TextAreaInputType, +} from '../constants'; +import InputField from './InputField'; + +interface propTypes { + saveEnvHandler: Function; + variables: envVarTypes; + setVariables: Function; +} + +interface stateVarTypes { + JWT_TYPE: string; + JWT_SECRET: string; + JWT_PRIVATE_KEY: string; + JWT_PUBLIC_KEY: string; +} + +const initState: stateVarTypes = { + JWT_TYPE: '', + JWT_SECRET: '', + JWT_PRIVATE_KEY: '', + JWT_PUBLIC_KEY: '', +}; + +const GenerateKeysModal = ({ + saveEnvHandler, + variables, + setVariables, +}: propTypes) => { + const client = useClient(); + const toast = useToast(); + const { isOpen, onOpen, onClose } = useDisclosure(); + const [stateVariables, setStateVariables] = React.useState({ + ...initState, + }); + React.useEffect(() => { + if (isOpen) { + setStateVariables({ ...initState, JWT_TYPE: variables.JWT_TYPE }); + } + }, [isOpen]); + const setKeys = () => { + // fetch keys from api + console.log('calling setKeys ==>> ', stateVariables.JWT_TYPE); + if (true) { + if (Object.values(HMACEncryptionType).includes(stateVariables.JWT_TYPE)) { + setStateVariables({ + ...stateVariables, + JWT_SECRET: 'hello_world', + JWT_PRIVATE_KEY: '', + JWT_PUBLIC_KEY: '', + }); + } else { + setStateVariables({ + ...stateVariables, + JWT_SECRET: '', + JWT_PRIVATE_KEY: 'test private key', + JWT_PUBLIC_KEY: 'test public key', + }); + } + toast({ + title: 'New keys generated', + isClosable: true, + status: 'success', + position: 'bottom-right', + }); + } else { + toast({ + title: 'Error occurred generating keys', + isClosable: true, + status: 'error', + position: 'bottom-right', + }); + closeHandler(); + } + }; + React.useEffect(() => { + if (isOpen) { + setKeys(); + } + }, [stateVariables.JWT_TYPE]); + const saveHandler = async () => { + setVariables({ ...variables, ...stateVariables }); + saveEnvHandler(); + closeHandler(); + }; + const closeHandler = async () => { + setStateVariables({ ...initState }); + onClose(); + }; + return ( + <> + + + + + New JWT keys + + + + + JWT Type: + + + + {Object.values(HMACEncryptionType).includes( + stateVariables.JWT_TYPE + ) ? ( + + + JWT Secret + +
+ + setStateVariables({ + ...stateVariables, + JWT_SECRET: event.target.value, + }) + } + /> +
+ + ) : ( + <> + + + Public Key + +
+ +
+ + + + Private Key + +
+ +
+ + + )} + + + + + + + + + ); +}; + +export default GenerateKeysModal; diff --git a/dashboard/src/components/InviteMembersModal.tsx b/dashboard/src/components/InviteMembersModal.tsx index bd3642d..8107669 100644 --- a/dashboard/src/components/InviteMembersModal.tsx +++ b/dashboard/src/components/InviteMembersModal.tsx @@ -26,7 +26,6 @@ import { import { useClient } from 'urql'; import { FaUserPlus, FaMinusCircle, FaPlus, FaUpload } from 'react-icons/fa'; import { useDropzone } from 'react-dropzone'; -import { escape } from 'lodash'; import { validateEmail, validateURI } from '../utils'; import { InviteMembers } from '../graphql/mutation'; import { ArrayInputOperations } from '../constants'; diff --git a/dashboard/src/constants.ts b/dashboard/src/constants.ts index 5fc9e5a..1ed810d 100644 --- a/dashboard/src/constants.ts +++ b/dashboard/src/constants.ts @@ -89,3 +89,40 @@ export const ECDSAEncryptionType = { ES384: 'ES384', ES512: 'ES512', }; + +export interface envVarTypes { + GOOGLE_CLIENT_ID: string; + GOOGLE_CLIENT_SECRET: string; + GITHUB_CLIENT_ID: string; + GITHUB_CLIENT_SECRET: string; + FACEBOOK_CLIENT_ID: string; + FACEBOOK_CLIENT_SECRET: string; + ROLES: [string] | []; + DEFAULT_ROLES: [string] | []; + PROTECTED_ROLES: [string] | []; + JWT_TYPE: string; + JWT_SECRET: string; + JWT_ROLE_CLAIM: string; + JWT_PRIVATE_KEY: string; + JWT_PUBLIC_KEY: string; + REDIS_URL: string; + SMTP_HOST: string; + SMTP_PORT: string; + SMTP_USERNAME: string; + SMTP_PASSWORD: string; + SENDER_EMAIL: string; + ALLOWED_ORIGINS: [string] | []; + ORGANIZATION_NAME: string; + ORGANIZATION_LOGO: string; + CUSTOM_ACCESS_TOKEN_SCRIPT: string; + ADMIN_SECRET: string; + DISABLE_LOGIN_PAGE: boolean; + DISABLE_MAGIC_LINK_LOGIN: boolean; + DISABLE_EMAIL_VERIFICATION: boolean; + DISABLE_BASIC_AUTHENTICATION: boolean; + DISABLE_SIGN_UP: boolean; + OLD_ADMIN_SECRET: string; + DATABASE_NAME: string; + DATABASE_TYPE: string; + DATABASE_URL: string; +} diff --git a/dashboard/src/pages/Environment.tsx b/dashboard/src/pages/Environment.tsx index f3df0e6..6ecf055 100644 --- a/dashboard/src/pages/Environment.tsx +++ b/dashboard/src/pages/Environment.tsx @@ -34,46 +34,11 @@ import { HMACEncryptionType, RSAEncryptionType, ECDSAEncryptionType, + envVarTypes, } from '../constants'; import { UpdateEnvVariables } from '../graphql/mutation'; import { getObjectDiff, capitalizeFirstLetter } from '../utils'; - -interface envVarTypes { - GOOGLE_CLIENT_ID: string; - GOOGLE_CLIENT_SECRET: string; - GITHUB_CLIENT_ID: string; - GITHUB_CLIENT_SECRET: string; - FACEBOOK_CLIENT_ID: string; - FACEBOOK_CLIENT_SECRET: string; - ROLES: [string] | []; - DEFAULT_ROLES: [string] | []; - PROTECTED_ROLES: [string] | []; - JWT_TYPE: string; - JWT_SECRET: string; - JWT_ROLE_CLAIM: string; - JWT_PRIVATE_KEY: string; - JWT_PUBLIC_KEY: string; - REDIS_URL: string; - SMTP_HOST: string; - SMTP_PORT: string; - SMTP_USERNAME: string; - SMTP_PASSWORD: string; - SENDER_EMAIL: string; - ALLOWED_ORIGINS: [string] | []; - ORGANIZATION_NAME: string; - ORGANIZATION_LOGO: string; - CUSTOM_ACCESS_TOKEN_SCRIPT: string; - ADMIN_SECRET: string; - DISABLE_LOGIN_PAGE: boolean; - DISABLE_MAGIC_LINK_LOGIN: boolean; - DISABLE_EMAIL_VERIFICATION: boolean; - DISABLE_BASIC_AUTHENTICATION: boolean; - DISABLE_SIGN_UP: boolean; - OLD_ADMIN_SECRET: string; - DATABASE_NAME: string; - DATABASE_TYPE: string; - DATABASE_URL: string; -} +import GenerateKeysModal from '../components/GenerateKeysModal'; export default function Environment() { const client = useClient(); @@ -410,9 +375,23 @@ export default function Environment() { - - JWT (JSON Web Tokens) Configurations - + + + JWT (JSON Web Tokens) Configurations + + + + + From a3d9783aef53890f4598853aa193701fb0c75fdd Mon Sep 17 00:00:00 2001 From: Anik Ghosh Date: Thu, 24 Mar 2022 21:08:10 +0530 Subject: [PATCH 2/3] mutation to update jwt vars added --- .../src/components/GenerateKeysModal.tsx | 98 ++++++++++--------- dashboard/src/graphql/mutation/index.ts | 10 ++ dashboard/src/pages/Environment.tsx | 45 ++++----- 3 files changed, 82 insertions(+), 71 deletions(-) diff --git a/dashboard/src/components/GenerateKeysModal.tsx b/dashboard/src/components/GenerateKeysModal.tsx index c5431df..c68a756 100644 --- a/dashboard/src/components/GenerateKeysModal.tsx +++ b/dashboard/src/components/GenerateKeysModal.tsx @@ -19,18 +19,17 @@ import { useClient } from 'urql'; import { FaSave } from 'react-icons/fa'; import { ECDSAEncryptionType, - envVarTypes, HMACEncryptionType, RSAEncryptionType, SelectInputType, TextAreaInputType, } from '../constants'; import InputField from './InputField'; +import { GenerateKeys, UpdateEnvVariables } from '../graphql/mutation'; interface propTypes { - saveEnvHandler: Function; - variables: envVarTypes; - setVariables: Function; + jwtType: string; + getData: Function; } interface stateVarTypes { @@ -47,11 +46,7 @@ const initState: stateVarTypes = { JWT_PUBLIC_KEY: '', }; -const GenerateKeysModal = ({ - saveEnvHandler, - variables, - setVariables, -}: propTypes) => { +const GenerateKeysModal = ({ jwtType, getData }: propTypes) => { const client = useClient(); const toast = useToast(); const { isOpen, onOpen, onClose } = useDisclosure(); @@ -60,17 +55,26 @@ const GenerateKeysModal = ({ }); React.useEffect(() => { if (isOpen) { - setStateVariables({ ...initState, JWT_TYPE: variables.JWT_TYPE }); + setStateVariables({ ...initState, JWT_TYPE: jwtType }); } }, [isOpen]); - const setKeys = () => { - // fetch keys from api - console.log('calling setKeys ==>> ', stateVariables.JWT_TYPE); - if (true) { - if (Object.values(HMACEncryptionType).includes(stateVariables.JWT_TYPE)) { + const fetchKeys = async () => { + const res = await client + .mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } }) + .toPromise(); + 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({ ...stateVariables, - JWT_SECRET: 'hello_world', + JWT_SECRET: res.data._generate_jwt_keys.secret, JWT_PRIVATE_KEY: '', JWT_PUBLIC_KEY: '', }); @@ -78,39 +82,45 @@ const GenerateKeysModal = ({ setStateVariables({ ...stateVariables, JWT_SECRET: '', - JWT_PRIVATE_KEY: 'test private key', - JWT_PUBLIC_KEY: 'test public key', + JWT_PRIVATE_KEY: res.data._generate_jwt_keys.private_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({ - title: 'New keys generated', - isClosable: true, - status: 'success', - position: 'bottom-right', - }); - } else { - toast({ - title: 'Error occurred generating keys', + title: 'Error occurred setting jwt keys', isClosable: true, status: 'error', position: 'bottom-right', }); - closeHandler(); + + return; } - }; - React.useEffect(() => { - if (isOpen) { - setKeys(); - } - }, [stateVariables.JWT_TYPE]); - const saveHandler = async () => { - setVariables({ ...variables, ...stateVariables }); - saveEnvHandler(); + toast({ + title: 'JWT keys updated successfully', + isClosable: true, + status: 'success', + position: 'bottom-right', + }); closeHandler(); }; - const closeHandler = async () => { + + const closeHandler = () => { setStateVariables({ ...initState }); onClose(); + getData(); }; return ( <> @@ -149,10 +159,10 @@ const GenerateKeysModal = ({ stateVariables.JWT_TYPE ) ? ( - + JWT Secret -
+
- + Public Key -
+
- + Private Key -
+