support for more jwt encryption types added

dashboard/src/components/InputField.tsx

@@ -259,17 +259,6 @@ const InputField = ({
 		);
 	}
 	if (Object.values(SelectInputType).includes(inputType)) {
-		if (inputType === SelectInputType.JWT_TYPE) {
-			return (
-				<Select size="sm" {...props}>
-					{[variables[inputType]].map((value: string) => (
-						<option value="value" key={value}>
-							{value}
-						</option>
-					))}
-				</Select>
-			);
-		}
 		const { options, ...rest } = props;
 		return (
 			<Select
@@ -293,10 +282,18 @@ const InputField = ({
 			<Textarea
 				{...props}
 				size="lg"
-				value={inputData[inputType]}
+				fontSize={14}
-				onChange={(e: any) => {
+				value={variables[inputType] ? variables[inputType] : ''}
-					setInputData({ ...inputData, [inputType]: e.target.value });
+				onChange={(
-				}}
+					event: Event & {
+						target: HTMLInputElement;
+					}
+				) =>
+					setVariables({
+						...variables,
+						[inputType]: event.target.value,
+					})
+				}
 			/>
 		);
 	}

dashboard/src/constants.ts

@@ -49,6 +49,8 @@ export const SelectInputType = {
 
 export const TextAreaInputType = {
 	CUSTOM_ACCESS_TOKEN_SCRIPT: 'CUSTOM_ACCESS_TOKEN_SCRIPT',
+	JWT_PRIVATE_KEY: 'JWT_PRIVATE_KEY',
+	JWT_PUBLIC_KEY: 'JWT_PUBLIC_KEY',
 };
 
 export const SwitchInputType = {
@@ -66,3 +68,21 @@ export const ArrayInputOperations = {
 	APPEND: 'APPEND',
 	REMOVE: 'REMOVE',
 };
+
+export const HMACEncryptionType = {
+	HS256: 'HS256',
+	HS384: 'HS384',
+	HS512: 'HS512',
+};
+
+export const RSAEncryptionType = {
+	RS256: 'RS256',
+	RS384: 'RS384',
+	RS512: 'RS512',
+};
+
+export const ECDSAEncryptionType = {
+	ES256: 'ES256',
+	ES384: 'ES384',
+	ES512: 'ES512',
+};

dashboard/src/graphql/queries/index.ts

@@ -21,6 +21,8 @@ export const EnvVariablesQuery = `
       JWT_TYPE,
       JWT_SECRET,
       JWT_ROLE_CLAIM,
+      JWT_PRIVATE_KEY,
+      JWT_PUBLIC_KEY,
       REDIS_URL,
       SMTP_HOST,
       SMTP_PORT,

dashboard/src/pages/Environment.tsx

@@ -31,6 +31,9 @@ import {
 	TextInputType,
 	TextAreaInputType,
 	SwitchInputType,
+	HMACEncryptionType,
+	RSAEncryptionType,
+	ECDSAEncryptionType,
 } from '../constants';
 import { UpdateEnvVariables } from '../graphql/mutation';
 import { getObjectDiff, capitalizeFirstLetter } from '../utils';
@@ -48,6 +51,8 @@ interface envVarTypes {
 	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;
@@ -92,6 +97,8 @@ export default function Environment() {
 		JWT_TYPE: '',
 		JWT_SECRET: '',
 		JWT_ROLE_CLAIM: '',
+		JWT_PRIVATE_KEY: '',
+		JWT_PUBLIC_KEY: '',
 		REDIS_URL: '',
 		SMTP_HOST: '',
 		SMTP_PORT: '',
@@ -177,7 +184,6 @@ export default function Environment() {
 		const {
 			data: { _env: envData },
 		} = await client.query(EnvVariablesQuery).toPromise();
-
 		const diff = getObjectDiff(envVariables, envData);
 		const updatedEnvVariables = diff.reduce(
 			(acc: any, property: string) => ({
@@ -374,25 +380,21 @@ export default function Environment() {
 					<Flex w="30%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">JWT Type:</Text>
 					</Flex>
-					<Center w="70%">
+					<Flex w="70%">
-						<Flex w="100%" justifyContent="space-between">
-							<Flex flex="2">
 						<InputField
 							variables={envVariables}
 							setVariables={setEnvVariables}
 							inputType={SelectInputType.JWT_TYPE}
-									isDisabled={true}
+							value={SelectInputType.JWT_TYPE}
-									defaultValue={SelectInputType.JWT_TYPE}
+							options={{
+								...HMACEncryptionType,
+								...RSAEncryptionType,
+								...ECDSAEncryptionType,
+							}}
 						/>
 					</Flex>
-							<Flex flex="3" justifyContent="center" alignItems="center">
-								<Text fontSize="sm">
-									More JWT types will be enabled in upcoming releases.
-								</Text>
-							</Flex>
-						</Flex>
-					</Center>
 				</Flex>
+				{Object.values(HMACEncryptionType).includes(envVariables.JWT_TYPE) ? (
 					<Flex>
 						<Flex w="30%" justifyContent="start" alignItems="center">
 							<Text fontSize="sm">JWT Secret</Text>
@@ -407,6 +409,38 @@ export default function Environment() {
 							/>
 						</Center>
 					</Flex>
+				) : (
+					<>
+						<Flex>
+							<Flex w="30%" justifyContent="start" alignItems="center">
+								<Text fontSize="sm">Public Key</Text>
+							</Flex>
+							<Center w="70%">
+								<InputField
+									variables={envVariables}
+									setVariables={setEnvVariables}
+									inputType={TextAreaInputType.JWT_PUBLIC_KEY}
+									placeholder="Add public key here"
+									minH="25vh"
+								/>
+							</Center>
+						</Flex>
+						<Flex>
+							<Flex w="30%" justifyContent="start" alignItems="center">
+								<Text fontSize="sm">Private Key</Text>
+							</Flex>
+							<Center w="70%">
+								<InputField
+									variables={envVariables}
+									setVariables={setEnvVariables}
+									inputType={TextAreaInputType.JWT_PRIVATE_KEY}
+									placeholder="Add private key here"
+									minH="25vh"
+								/>
+							</Center>
+						</Flex>
+					</>
+				)}
 				<Flex>
 					<Flex w="30%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">JWT Role Claim:</Text>