generate-keys-modal added in dashboard

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<stateVarTypes>({
+		...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 (
+		<>
+			<Button
+				colorScheme="blue"
+				h="1.75rem"
+				size="sm"
+				variant="ghost"
+				onClick={onOpen}
+			>
+				Generate new keys
+			</Button>
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>New JWT keys</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Flex>
+							<Flex w="30%" justifyContent="start" alignItems="center">
+								<Text fontSize="sm">JWT Type:</Text>
+							</Flex>
+							<InputField
+								variables={stateVariables}
+								setVariables={setStateVariables}
+								inputType={SelectInputType.JWT_TYPE}
+								value={SelectInputType.JWT_TYPE}
+								options={{
+									...HMACEncryptionType,
+									...RSAEncryptionType,
+									...ECDSAEncryptionType,
+								}}
+							/>
+						</Flex>
+						{Object.values(HMACEncryptionType).includes(
+							stateVariables.JWT_TYPE
+						) ? (
+							<Flex marginTop="8">
+								<Flex w="30%" justifyContent="start" alignItems="center">
+									<Text fontSize="sm">JWT Secret</Text>
+								</Flex>
+								<Center w="70%">
+									<Input
+										size="sm"
+										value={stateVariables.JWT_SECRET}
+										onChange={(event: any) =>
+											setStateVariables({
+												...stateVariables,
+												JWT_SECRET: event.target.value,
+											})
+										}
+									/>
+								</Center>
+							</Flex>
+						) : (
+							<>
+								<Flex marginTop="8">
+									<Flex w="30%" justifyContent="start" alignItems="center">
+										<Text fontSize="sm">Public Key</Text>
+									</Flex>
+									<Center w="70%">
+										<InputField
+											variables={stateVariables}
+											setVariables={setStateVariables}
+											inputType={TextAreaInputType.JWT_PUBLIC_KEY}
+											placeholder="Add public key here"
+											minH="25vh"
+										/>
+									</Center>
+								</Flex>
+								<Flex marginTop="8">
+									<Flex w="30%" justifyContent="start" alignItems="center">
+										<Text fontSize="sm">Private Key</Text>
+									</Flex>
+									<Center w="70%">
+										<InputField
+											variables={stateVariables}
+											setVariables={setStateVariables}
+											inputType={TextAreaInputType.JWT_PRIVATE_KEY}
+											placeholder="Add private key here"
+											minH="25vh"
+										/>
+									</Center>
+								</Flex>
+							</>
+						)}
+					</ModalBody>
+
+					<ModalFooter>
+						<Button
+							leftIcon={<FaSave />}
+							colorScheme="red"
+							variant="solid"
+							onClick={saveHandler}
+							isDisabled={false}
+						>
+							<Center h="100%" pt="5%">
+								Apply
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default GenerateKeysModal;

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';

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;
+}

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';
-
+import GenerateKeysModal from '../components/GenerateKeysModal';
-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;
-}
 
 export default function Environment() {
 	const client = useClient();
@@ -410,9 +375,23 @@ export default function Environment() {
 				</Flex>
 			</Stack>
 			<Divider marginTop="2%" marginBottom="2%" />
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
+			<Flex
+				width="100%"
+				justifyContent="space-between"
+				alignItems="center"
+				paddingTop="2%"
+			>
+				<Text fontSize="md" fontWeight="bold">
 					JWT (JSON Web Tokens) Configurations
 				</Text>
+				<Flex>
+					<GenerateKeysModal
+						variables={envVariables}
+						setVariables={setEnvVariables}
+						saveEnvHandler={saveHandler}
+					/>
+				</Flex>
+			</Flex>
 			<Stack spacing={6} padding="2% 0%">
 				<Flex>
 					<Flex w="30%" justifyContent="start" alignItems="center">