Merge pull request #161 from akash-dutta-au7/fix/env-page-new

Update Dashboard UI

dashboard/package-lock.json

@@ -10,6 +10,7 @@
 			"license": "ISC",
 			"dependencies": {
 				"@chakra-ui/react": "^1.7.3",
+				"@emotion/core": "^11.0.0",
 				"@emotion/react": "^11.7.1",
 				"@emotion/styled": "^11.6.0",
 				"@types/react": "^17.0.38",
@@ -17,6 +18,7 @@
 				"@types/react-router-dom": "^5.3.2",
 				"dayjs": "^1.10.7",
 				"esbuild": "^0.14.9",
+				"focus-visible": "^5.2.0",
 				"framer-motion": "^5.5.5",
 				"graphql": "^16.2.0",
 				"lodash": "^4.17.21",
@@ -978,6 +980,11 @@
 				"stylis": "4.0.13"
 			}
 		},
+		"node_modules/@emotion/core": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-11.0.0.tgz",
+			"integrity": "sha512-w4sE3AmHmyG6RDKf6mIbtHpgJUSJ2uGvPQb8VXFL7hFjMPibE8IiehG8cMX3Ztm4svfCQV6KqusQbeIOkurBcA=="
+		},
 		"node_modules/@emotion/hash": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -1667,6 +1674,11 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/focus-visible": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
+			"integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
+		},
 		"node_modules/framer-motion": {
 			"version": "5.5.5",
 			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-5.5.5.tgz",
@@ -2517,8 +2529,7 @@
 		"@chakra-ui/css-reset": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@chakra-ui/css-reset/-/css-reset-1.1.1.tgz",
-			"integrity": "sha512-+KNNHL4OWqeKia5SL858K3Qbd8WxMij9mWIilBzLD4j2KFrl/+aWFw8syMKth3NmgIibrjsljo+PU3fy2o50dg==",
+			"integrity": "sha512-+KNNHL4OWqeKia5SL858K3Qbd8WxMij9mWIilBzLD4j2KFrl/+aWFw8syMKth3NmgIibrjsljo+PU3fy2o50dg=="
-			"requires": {}
 		},
 		"@chakra-ui/descendant": {
 			"version": "2.1.1",
@@ -3038,6 +3049,11 @@
 				"stylis": "4.0.13"
 			}
 		},
+		"@emotion/core": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-11.0.0.tgz",
+			"integrity": "sha512-w4sE3AmHmyG6RDKf6mIbtHpgJUSJ2uGvPQb8VXFL7hFjMPibE8IiehG8cMX3Ztm4svfCQV6KqusQbeIOkurBcA=="
+		},
 		"@emotion/hash": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -3117,8 +3133,7 @@
 		"@graphql-typed-document-node/core": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.1.tgz",
-			"integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==",
+			"integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg=="
-			"requires": {}
 		},
 		"@popperjs/core": {
 			"version": "2.11.0",
@@ -3540,6 +3555,11 @@
 				"tslib": "^2.0.3"
 			}
 		},
+		"focus-visible": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
+			"integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
+		},
 		"framer-motion": {
 			"version": "5.5.5",
 			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-5.5.5.tgz",
@@ -3823,8 +3843,7 @@
 		"react-icons": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
-			"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+			"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
-			"requires": {}
 		},
 		"react-is": {
 			"version": "16.13.1",
@@ -4010,8 +4029,7 @@
 		"use-callback-ref": {
 			"version": "1.2.5",
 			"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-			"integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
+			"integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
-			"requires": {}
 		},
 		"use-sidecar": {
 			"version": "1.0.5",

dashboard/package.json

@@ -12,6 +12,7 @@
 	"license": "ISC",
 	"dependencies": {
 		"@chakra-ui/react": "^1.7.3",
+		"@emotion/core": "^11.0.0",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@types/react": "^17.0.38",
@@ -19,6 +20,7 @@
 		"@types/react-router-dom": "^5.3.2",
 		"dayjs": "^1.10.7",
 		"esbuild": "^0.14.9",
+		"focus-visible": "^5.2.0",
 		"framer-motion": "^5.5.5",
 		"graphql": "^16.2.0",
 		"lodash": "^4.17.21",

dashboard/src/App.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Fragment } from 'react';
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { BrowserRouter } from 'react-router-dom';
 import { createClient, Provider } from 'urql';
@@ -24,6 +25,7 @@ const theme = extendTheme({
 			'html, body, #root': {
 				fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
 				height: '100%',
+				outline: 'none',
 			},
 		},
 	},
@@ -36,6 +38,7 @@ const theme = extendTheme({
 
 export default function App() {
 	return (
+		<Fragment>
 			<ChakraProvider theme={theme}>
 				<Provider value={queryClient}>
 					<BrowserRouter basename="/dashboard">
@@ -45,5 +48,6 @@ export default function App() {
 					</BrowserRouter>
 				</Provider>
 			</ChakraProvider>
+		</Fragment>
 	);
 }

dashboard/src/components/EnvComponents/AccessToken.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Flex, Stack, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../../components/InputField";
+import { TextInputType, TextAreaInputType } from "../../constants";
+
+const AccessToken = ({ variables, setVariables }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Access Token
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "50%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">Access Token Expiry Time:</Text>
+          </Flex>
+          <Flex
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.ACCESS_TOKEN_EXPIRY_TIME}
+              placeholder="0h15m0s"
+            />
+          </Flex>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "60%"}
+            justifyContent="start"
+            direction="column"
+          >
+            <Text fontSize="sm">Custom Scripts:</Text>
+            <Text fontSize="xs" color="blackAlpha.500">
+              (Used to add custom fields in ID token)
+            </Text>
+          </Flex>
+          <Flex
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextAreaInputType.CUSTOM_ACCESS_TOKEN_SCRIPT}
+              placeholder="Add script here"
+              minH="25vh"
+            />
+          </Flex>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default AccessToken;

dashboard/src/components/EnvComponents/DatabaseCredentials.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+
+import InputField from "../../components/InputField";
+import { TextInputType } from "../../constants";
+
+const DatabaseCredentials = ({ variables, setVariables }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold">
+        Database Credentials
+      </Text>
+      <Stack spacing={6} padding="3% 0">
+        <Text fontStyle="italic" fontSize="sm" color="blackAlpha.500" mt={3}>
+          Note: Database related environment variables cannot be updated from
+          dashboard :(
+        </Text>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">DataBase Name:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.DATABASE_NAME}
+              isDisabled={true}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">DataBase Type:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.DATABASE_TYPE}
+              isDisabled={true}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">DataBase URL:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.DATABASE_URL}
+              isDisabled={true}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default DatabaseCredentials;

dashboard/src/components/EnvComponents/DomainWhitelisting.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../../components/InputField";
+import { ArrayInputType} from "../../constants";
+
+const DomainWhiteListing = ({ variables, setVariables }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Domain White Listing
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">Allowed Origins:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              variables={variables}
+              setVariables={setVariables}
+              inputType={ArrayInputType.ALLOWED_ORIGINS}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default DomainWhiteListing;

dashboard/src/components/EnvComponents/EmailConfiguration.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../../components/InputField";
+import { TextInputType, HiddenInputType} from "../../constants";
+const EmailConfigurations = ({
+  variables,
+  setVariables,
+  fieldVisibility,
+  setFieldVisibility,
+}: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Email Configurations
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">SMTP Host:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.SMTP_HOST}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">SMTP Port:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.SMTP_PORT}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">SMTP Username:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.SMTP_USERNAME}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">SMTP Password:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              fieldVisibility={fieldVisibility}
+              setFieldVisibility={setFieldVisibility}
+              inputType={HiddenInputType.SMTP_PASSWORD}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">From Email:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.SENDER_EMAIL}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default EmailConfigurations;

dashboard/src/components/EnvComponents/JWTConfiguration.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import {
+  HiddenInputType,
+  TextInputType,
+  TextAreaInputType,
+} from "../../constants";
+import GenerateKeysModal from "../GenerateKeysModal";
+import InputField from "../InputField";
+
+const JSTConfigurations = ({
+  variables,
+  setVariables,
+  fieldVisibility,
+  setFieldVisibility,
+  SelectInputType,
+  getData,
+  HMACEncryptionType,
+  RSAEncryptionType,
+  ECDSAEncryptionType,
+}: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+
+  return (
+    <div>
+      {" "}
+      <Flex
+        borderRadius={5}
+        width="100%"
+        justifyContent="space-between"
+        alignItems="center"
+        paddingTop="2%"
+      >
+        <Text
+          fontSize={isNotSmallerScreen ? "md" : "sm"}
+          fontWeight="bold"
+          mb={5}
+        >
+          JWT (JSON Web Tokens) Configurations
+        </Text>
+        <Flex mb={7}>
+          <GenerateKeysModal jwtType={variables.JWT_TYPE} getData={getData} />
+        </Flex>
+      </Flex>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">JWT Type:</Text>
+          </Flex>
+          <Flex
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "2"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={SelectInputType}
+              value={SelectInputType}
+              options={{
+                ...HMACEncryptionType,
+                ...RSAEncryptionType,
+                ...ECDSAEncryptionType,
+              }}
+            />
+          </Flex>
+        </Flex>
+        {Object.values(HMACEncryptionType).includes(variables.JWT_TYPE) ? (
+          <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+            <Flex w="30%" justifyContent="start" alignItems="center">
+              <Text fontSize="sm">JWT Secret</Text>
+            </Flex>
+            <Center
+              w={isNotSmallerScreen ? "70%" : "100%"}
+              mt={isNotSmallerScreen ? "0" : "2"}
+            >
+              <InputField
+                borderRadius={5}
+                variables={variables}
+                setVariables={setVariables}
+                fieldVisibility={fieldVisibility}
+                setFieldVisibility={setFieldVisibility}
+                inputType={HiddenInputType.JWT_SECRET}
+              />
+            </Center>
+          </Flex>
+        ) : (
+          <>
+            <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+              <Flex w="30%" justifyContent="start" alignItems="center">
+                <Text fontSize="sm">Public Key</Text>
+              </Flex>
+              <Center
+                w={isNotSmallerScreen ? "70%" : "100%"}
+                mt={isNotSmallerScreen ? "0" : "2"}
+              >
+                <InputField
+                  borderRadius={5}
+                  variables={variables}
+                  setVariables={setVariables}
+                  inputType={TextAreaInputType.JWT_PUBLIC_KEY}
+                  placeholder="Add public key here"
+                  minH="25vh"
+                />
+              </Center>
+            </Flex>
+            <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+              <Flex w="30%" justifyContent="start" alignItems="center">
+                <Text fontSize="sm">Private Key</Text>
+              </Flex>
+              <Center
+                w={isNotSmallerScreen ? "70%" : "100%"}
+                mt={isNotSmallerScreen ? "0" : "2"}
+              >
+                <InputField
+                  borderRadius={5}
+                  variables={variables}
+                  setVariables={setVariables}
+                  inputType={TextAreaInputType.JWT_PRIVATE_KEY}
+                  placeholder="Add private key here"
+                  minH="25vh"
+                />
+              </Center>
+            </Flex>
+          </>
+        )}
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm" orientation="vertical">
+              JWT Role Claim:
+            </Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "2"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.JWT_ROLE_CLAIM}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default JSTConfigurations;

dashboard/src/components/EnvComponents/OAuthConfig.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import InputField from '../InputField';
+import {
+	Flex,
+	Stack,
+	Center,
+	Text,
+	Box,
+	Divider,
+	useMediaQuery,
+} from '@chakra-ui/react';
+import { FaGoogle, FaGithub, FaFacebookF } from 'react-icons/fa';
+import { TextInputType, HiddenInputType } from '../../constants';
+
+const OAuthConfig = ({
+	envVariables,
+	setVariables,
+	fieldVisibility,
+	setFieldVisibility,
+}: any) => {
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:667px)');
+	return (
+		<div>
+			<Box>
+				<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={6}>
+					Your instance information
+				</Text>
+				<Stack spacing={6} padding="2% 0%">
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Flex w="30%" justifyContent="start" alignItems="center">
+							<Text fontSize="sm">Client ID</Text>
+						</Flex>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								variables={envVariables}
+								setVariables={() => {}}
+								inputType={TextInputType.CLIENT_ID}
+								placeholder="Client ID"
+								readOnly={true}
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Flex w="30%" justifyContent="start" alignItems="center">
+							<Text fontSize="sm">Client Secret</Text>
+						</Flex>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.CLIENT_SECRET}
+								placeholder="Client Secret"
+								readOnly={true}
+							/>
+						</Center>
+					</Flex>
+				</Stack>
+				<Divider mt={5} mb={2} color="blackAlpha.700" />
+				<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={4}>
+					Social Media Logins
+				</Text>
+				<Stack spacing={6} padding="2% 0%">
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #ff3e30"
+							borderRadius="5px"
+						>
+							<FaGoogle style={{ color: '#ff3e30' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.GOOGLE_CLIENT_ID}
+								placeholder="Google Client ID"
+							/>
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.GOOGLE_CLIENT_SECRET}
+								placeholder="Google Secret"
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #171515"
+							borderRadius="5px"
+						>
+							<FaGithub style={{ color: '#171515' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.GITHUB_CLIENT_ID}
+								placeholder="Github Client ID"
+							/>
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.GITHUB_CLIENT_SECRET}
+								placeholder="Github Secret"
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #3b5998"
+							borderRadius="5px"
+						>
+							<FaFacebookF style={{ color: '#3b5998' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.FACEBOOK_CLIENT_ID}
+								placeholder="Facebook Client ID"
+							/>
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.FACEBOOK_CLIENT_SECRET}
+								placeholder="Facebook Secret"
+							/>
+						</Center>
+					</Flex>
+				</Stack>
+			</Box>
+		</div>
+	);
+};
+
+export default OAuthConfig;

dashboard/src/components/EnvComponents/OrganizationInfo.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../InputField";
+import { TextInputType } from "../../constants";
+
+const OrganizationInfo = ({ variables, setVariables }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Organization Information
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">Organization Name:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.ORGANIZATION_NAME}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">Organization Logo:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={TextInputType.ORGANIZATION_LOGO}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default OrganizationInfo;

dashboard/src/components/EnvComponents/Roles.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import { ArrayInputType } from "../../constants";
+import InputField from "../InputField";
+
+const Roles = ({ variables, setVariables }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Roles
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">Roles:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "2"}
+            overflow="hidden"
+          >
+            <InputField
+              borderRadius={7}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={ArrayInputType.ROLES}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">Default Roles:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "2"}
+          >
+            <InputField
+              variables={variables}
+              setVariables={setVariables}
+              inputType={ArrayInputType.DEFAULT_ROLES}
+            />
+          </Center>
+        </Flex>
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">Protected Roles:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "2"}
+          >
+            <InputField
+              variables={variables}
+              setVariables={setVariables}
+              inputType={ArrayInputType.PROTECTED_ROLES}
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default Roles;

dashboard/src/components/EnvComponents/SecurityAdminSecret.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import {
+  Flex,
+  Stack,
+  Center,
+  Text,
+  Input,
+  InputGroup,
+  InputRightElement,
+  useMediaQuery,
+} from "@chakra-ui/react";
+import { FaRegEyeSlash, FaRegEye } from "react-icons/fa";
+import InputField from "../InputField";
+import { HiddenInputType } from "../../constants";
+const SecurityAdminSecret = ({
+  variables,
+  setVariables,
+  fieldVisibility,
+  setFieldVisibility,
+  validateAdminSecretHandler,
+  adminSecret,
+}: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold">
+        Security (Admin Secret)
+      </Text>
+      <Stack
+        spacing={6}
+        padding="0 5%"
+        marginTop="3%"
+        border="1px solid #ff7875"
+        borderRadius="5px"
+      >
+        <Flex
+          marginTop={isNotSmallerScreen ? "3%" : "5%"}
+          direction={isNotSmallerScreen ? "row" : "column"}
+        >
+          <Flex
+            mt={3}
+            w={isNotSmallerScreen ? "30%" : "40%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">Old Admin Secret:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputGroup size="sm">
+              <Input
+                borderRadius={5}
+                size="sm"
+                placeholder="Enter Old Admin Secret"
+                value={adminSecret.value as string}
+                onChange={(event: any) => validateAdminSecretHandler(event)}
+                type={
+                  !fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET]
+                    ? "password"
+                    : "text"
+                }
+              />
+              <InputRightElement
+                right="5px"
+                children={
+                  <Flex>
+                    {fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET] ? (
+                      <Center
+                        w="25px"
+                        margin="0 1.5%"
+                        cursor="pointer"
+                        onClick={() =>
+                          setFieldVisibility({
+                            ...fieldVisibility,
+                            [HiddenInputType.OLD_ADMIN_SECRET]: false,
+                          })
+                        }
+                      >
+                        <FaRegEyeSlash color="#bfbfbf" />
+                      </Center>
+                    ) : (
+                      <Center
+                        w="25px"
+                        margin="0 1.5%"
+                        cursor="pointer"
+                        onClick={() =>
+                          setFieldVisibility({
+                            ...fieldVisibility,
+                            [HiddenInputType.OLD_ADMIN_SECRET]: true,
+                          })
+                        }
+                      >
+                        <FaRegEye color="#bfbfbf" />
+                      </Center>
+                    )}
+                  </Flex>
+                }
+              />
+            </InputGroup>
+          </Center>
+        </Flex>
+        <Flex
+          paddingBottom="3%"
+          direction={isNotSmallerScreen ? "row" : "column"}
+        >
+          <Flex
+            w={isNotSmallerScreen ? "30%" : "50%"}
+            justifyContent="start"
+            alignItems="center"
+          >
+            <Text fontSize="sm">New Admin Secret:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              mb={3}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={HiddenInputType.ADMIN_SECRET}
+              fieldVisibility={fieldVisibility}
+              setFieldVisibility={setFieldVisibility}
+              isDisabled={adminSecret.disableInputField}
+              placeholder="Enter New Admin Secret"
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default SecurityAdminSecret;

dashboard/src/components/EnvComponents/SessionStorage.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react";
+import InputField from "../InputField";
+
+const SessionStorage = ({ variables, setVariables, RedisURL }: any) => {
+  const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
+  return (
+    <div>
+      {" "}
+      <Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+        Session Storage
+      </Text>
+      <Stack spacing={6} padding="2% 0%">
+        <Flex direction={isNotSmallerScreen ? "row" : "column"}>
+          <Flex w="30%" justifyContent="start" alignItems="center">
+            <Text fontSize="sm">Redis URL:</Text>
+          </Flex>
+          <Center
+            w={isNotSmallerScreen ? "70%" : "100%"}
+            mt={isNotSmallerScreen ? "0" : "3"}
+          >
+            <InputField
+              borderRadius={5}
+              variables={variables}
+              setVariables={setVariables}
+              inputType={RedisURL}
+              placeholder="Redis URL"
+            />
+          </Center>
+        </Flex>
+      </Stack>
+    </div>
+  );
+};
+
+export default SessionStorage;

dashboard/src/components/EnvComponents/UICustomization.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Flex, Stack, Text } from '@chakra-ui/react';
+import InputField from '../InputField';
+import { SwitchInputType } from '../../constants';
+
+const UICustomization = ({ variables, setVariables }: any) => {
+	return (
+		<div>
+			{' '}
+			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+				Disable Features
+			</Text>
+			<Stack spacing={6} padding="2% 0%">
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Login Page:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_LOGIN_PAGE}
+						/>
+					</Flex>
+				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Email Verification:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_EMAIL_VERIFICATION}
+						/>
+					</Flex>
+				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Magic Login Link:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
+						/>
+					</Flex>
+				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Basic Authentication:</Text>
+					</Flex>
+					<Flex justifyContent="start">
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_BASIC_AUTHENTICATION}
+						/>
+					</Flex>
+				</Flex>
+				<Flex>
+					<Flex w="100%" justifyContent="start" alignItems="center">
+						<Text fontSize="sm">Disable Sign Up:</Text>
+					</Flex>
+					<Flex justifyContent="start" mb={3}>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_SIGN_UP}
+						/>
+					</Flex>
+				</Flex>
+			</Stack>
+		</div>
+	);
+};
+
+export default UICustomization;

dashboard/src/components/InputField.tsx

@@ -116,7 +116,7 @@ const InputField = ({
 			<InputGroup size="sm">
 				<Input
 					{...props}
-					value={variables[inputType]}
+					value={variables[inputType] ?? ''}
 					onChange={(
 						event: Event & {
 							target: HTMLInputElement;
@@ -181,8 +181,9 @@ const InputField = ({
 			<Flex
 			  border="1px solid #e2e8f0"
               w="100%"
+        	  borderRadius={5}
               paddingTop="0.5%"
-				overflowX="scroll"
+              overflowX={variables[inputType].length > 3 ? "scroll" : "hidden"}
               overflowY="hidden"
               justifyContent="start"
               alignItems="center"
@@ -220,7 +221,7 @@ const InputField = ({
 							size="xs"
 							minW="150px"
 							placeholder="add a new value"
-							value={inputData[inputType]}
+							value={inputData[inputType] ?? ''}
 							onChange={(e: any) => {
 								setInputData({ ...inputData, [inputType]: e.target.value });
 							}}

dashboard/src/components/InviteMembersModal.tsx

@@ -22,6 +22,7 @@ import {
 	InputRightElement,
 	Text,
 	Link,
+	Tooltip
 } from '@chakra-ui/react';
 import { useClient } from 'urql';
 import { FaUserPlus, FaMinusCircle, FaPlus, FaUpload } from 'react-icons/fa';
@@ -186,7 +187,22 @@ const InviteMembersModal = ({
 				isDisabled={disabled}
 				size="sm"
 			>
-				<Center h="100%">Invite Members</Center>
+				 <Center h="100%">
+                   {disabled ? (
+                      <Tooltip
+                        mr={8}
+                        mt={1}
+                        hasArrow
+                        bg="gray.300"
+                        color="black"
+                        label="Email verification is disabled, refer to 'UI Customization' tab within 'Environment' to enable it."
+                      >
+                      Invite Members
+                      </Tooltip>
+                    ) : (
+                    "Invite Members"
+                    )}
+                  </Center>{" "}
 			</Button>
 			<Modal isOpen={isOpen} onClose={closeModalHandler} size="xl">
 				<ModalOverlay />

dashboard/src/components/Menu.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { Fragment, ReactNode } from 'react';
 import {
 	IconButton,
 	Box,
@@ -17,16 +17,27 @@ import {
 	MenuButton,
 	MenuItem,
 	MenuList,
+	Accordion,
+	AccordionButton,
+	AccordionPanel,
+	AccordionItem,
+	useMediaQuery,
 } from '@chakra-ui/react';
 import {
-	FiHome,
+	FiUser,
 	FiCode,
 	FiSettings,
 	FiMenu,
-	FiUser,
 	FiUsers,
 	FiChevronDown,
 } from 'react-icons/fi';
+import { BiCustomize } from 'react-icons/bi';
+import { AiOutlineKey } from 'react-icons/ai';
+import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si';
+import { MdSecurity } from 'react-icons/md';
+import { RiDatabase2Line } from 'react-icons/ri';
+import { BsCheck2Circle } from 'react-icons/bs';
+import { HiOutlineMail, HiOutlineOfficeBuilding } from 'react-icons/hi';
 import { IconType } from 'react-icons';
 import { ReactText } from 'react';
 import { useMutation, useQuery } from 'urql';
@@ -35,14 +46,70 @@ import { useAuthContext } from '../contexts/AuthContext';
 import { AdminLogout } from '../graphql/mutation';
 import { MetaQuery } from '../graphql/queries';
 
-interface LinkItemProps {
+interface SubRoutes {
 	name: string;
 	icon: IconType;
 	route: string;
 }
+
+interface LinkItemProps {
+	name: string;
+	icon: IconType;
+	route: string;
+	subRoutes?: SubRoutes[];
+}
 const LinkItems: Array<LinkItemProps> = [
-	// { name: 'Home', icon: FiHome, route: '/' },
+	{
-	{ name: 'Environment Variables', icon: FiSettings, route: '/' },
+		name: 'Environment ',
+		icon: FiSettings,
+		route: '/',
+		subRoutes: [
+			{
+				name: 'OAuth Config',
+				icon: AiOutlineKey,
+				route: '/oauth-setting',
+			},
+
+			{ name: 'Roles', icon: FiUser, route: '/roles' },
+			{
+				name: 'JWT Secrets',
+				icon: SiJsonwebtokens,
+				route: '/jwt-config',
+			},
+			{
+				name: 'Session Storage',
+				icon: RiDatabase2Line,
+				route: '/session-storage',
+			},
+			{
+				name: 'Email Configurations',
+				icon: HiOutlineMail,
+				route: '/email-config',
+			},
+			{
+				name: 'Domain White Listing',
+				icon: BsCheck2Circle,
+				route: '/whitelist-variables',
+			},
+			{
+				name: 'Organization Info',
+				icon: HiOutlineOfficeBuilding,
+				route: '/organization-info',
+			},
+			{ name: 'Access Token', icon: SiOpenaccess, route: '/access-token' },
+			{
+				name: 'UI Customization',
+				icon: BiCustomize,
+				route: '/ui-customization',
+			},
+			{ name: 'Database', icon: RiDatabase2Line, route: '/db-cred' },
+			{
+				name: ' Security',
+				icon: MdSecurity,
+				route: '/admin-secret',
+			},
+		],
+	},
 	{ name: 'Users', icon: FiUsers, route: '/users' },
 ];
 
@@ -53,6 +120,7 @@ interface SidebarProps extends BoxProps {
 export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 	const { pathname } = useLocation();
 	const [{ fetching, data }] = useQuery({ query: MetaQuery });
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
 	return (
 		<Box
 			transition="3s ease"
@@ -64,9 +132,15 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 			h="full"
 			{...rest}
 		>
-			<Flex h="20" alignItems="center" mx="8" justifyContent="space-between">
+			<Flex
+				h="20"
+				alignItems="center"
+				mx="18"
+				justifyContent="space-between"
+				flexDirection="column"
+			>
 				<NavLink to="/">
-					<Flex alignItems="center">
+					<Flex alignItems="center" mt="6">
 						<Image
 							src="https://authorizer.dev/images/logo.png"
 							alt="logo"
@@ -79,17 +153,69 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 				</NavLink>
 				<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
 			</Flex>
-			{LinkItems.map((link) => (
+
-				<NavLink key={link.name} to={link.route}>
+			<Accordion defaultIndex={[0]} allowMultiple>
+				<AccordionItem textAlign="center" border="none" w="100%">
+					{LinkItems.map((link) =>
+						link?.subRoutes ? (
+							<div key={link.name}>
+								<AccordionButton _focus={{ boxShadow: 'none' }}>
+									<Text as="div" fontSize="md">
 										<NavItem
 											icon={link.icon}
 											color={pathname === link.route ? 'blue.500' : ''}
+											style={{ outline: 'unset' }}
+											height={12}
+											ml={-1}
+											mb={isNotSmallerScreen ? -1 : -4}
+											w={isNotSmallerScreen ? '100%' : '310%'}
 										>
+											<Fragment>
 												{link.name}
+												<Box display={{ base: 'none', md: 'flex' }} ml={12}>
+													<FiChevronDown />
+												</Box>
+											</Fragment>
 										</NavItem>
+									</Text>
+								</AccordionButton>
+								<AccordionPanel>
+									{link.subRoutes?.map((sublink) => (
+										<NavLink
+											key={sublink.name}
+											to={sublink.route}
+											onClick={onClose}
+										>
+											{' '}
+											<Text as="div" fontSize="xs" ml={2}>
+												<NavItem
+													icon={sublink.icon}
+													color={pathname === sublink.route ? 'blue.500' : ''}
+													height={8}
+												>
+													{sublink.name}
+												</NavItem>{' '}
+											</Text>
 										</NavLink>
 									))}
-
+								</AccordionPanel>
+							</div>
+						) : (
+							<NavLink key={link.name} to={link.route}>
+								{' '}
+								<Text as="div" fontSize="md" w="100%" mt={-2}>
+									<NavItem
+										icon={link.icon}
+										color={pathname === link.route ? 'blue.500' : ''}
+										height={12}
+										onClick={onClose}
+									>
+										{link.name}
+									</NavItem>{' '}
+								</Text>
+							</NavLink>
+						)
+					)}
 					<Link
 						href="/playground"
 						target="_blank"
@@ -100,10 +226,14 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 					>
 						<NavItem icon={FiCode}>API Playground</NavItem>
 					</Link>
+				</AccordionItem>
+			</Accordion>
 
 			{data?.meta?.version && (
+				<Flex alignContent="center">
+					{' '}
 					<Text
-					color="gray.600"
+						color="gray.400"
 						fontSize="sm"
 						textAlign="center"
 						position="absolute"
@@ -112,6 +242,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 					>
 						Current Version: {data.meta.version}
 					</Text>
+				</Flex>
 			)}
 		</Box>
 	);
@@ -119,7 +250,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 
 interface NavItemProps extends FlexProps {
 	icon: IconType;
-	children: ReactText;
+	children: ReactText | JSX.Element | JSX.Element[];
 }
 export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
 	return (
@@ -204,7 +335,7 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
 							transition="all 0.3s"
 							_focus={{ boxShadow: 'none' }}
 						>
-							<HStack>
+							<HStack mr={5}>
 								<FiUser />
 								<VStack
 									display={{ base: 'none', md: 'flex' }}

dashboard/src/constants.ts

@@ -128,3 +128,17 @@ export interface envVarTypes {
 	DATABASE_URL: string;
 	ACCESS_TOKEN_EXPIRY_TIME: string;
 }
+
+export const envSubViews = {
+	INSTANCE_INFO: 'instance-info',
+	ROLES: 'roles',
+	JWT_CONFIG: 'jwt-config',
+	SESSION_STORAGE: 'session-storage',
+	EMAIL_CONFIG: 'email-config',
+	WHITELIST_VARIABLES: 'whitelist-variables',
+	ORGANIZATION_INFO: 'organization-info',
+	ACCESS_TOKEN: 'access-token',
+	UI_CUSTOMIZATION: 'ui-customization',
+	ADMIN_SECRET: 'admin-secret',
+	DB_CRED: 'db-cred',
+};

dashboard/src/index.tsx

@@ -2,4 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+	<div>
+		<App />
+	</div>,
+	document.getElementById('root')
+);

dashboard/src/layouts/AuthLayout.tsx

@@ -1,20 +1,27 @@
-import { Box, Flex, Image, Text, Spinner } from '@chakra-ui/react';
+import {
+	Box,
+	Flex,
+	Image,
+	Text,
+	Spinner,
+	useMediaQuery,
+} from '@chakra-ui/react';
 import React from 'react';
 import { useQuery } from 'urql';
 import { MetaQuery } from '../graphql/queries';
 
 export function AuthLayout({ children }: { children: React.ReactNode }) {
 	const [{ fetching, data }] = useQuery({ query: MetaQuery });
+	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
 	return (
 		<Flex
-			flexWrap="wrap"
+			h="100vh"
-			h="100%"
 			bg="gray.100"
 			alignItems="center"
 			justifyContent="center"
-			flexDirection="column"
+			direction={['column', 'column']}
 		>
-			<Flex alignItems="center">
+			<Flex alignItems="center" maxW="100%">
 				<Image
 					src="https://authorizer.dev/images/logo.png"
 					alt="logo"
@@ -29,7 +36,15 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
 				<Spinner />
 			) : (
 				<>
-					<Box p="6" m="5" rounded="5" bg="white" w="500px" shadow="xl">
+					<Box
+						p="6"
+						m="5"
+						rounded="5"
+						bg="white"
+						w={isNotSmallerScreen ? '500px' : '450px'}
+						shadow="xl"
+						maxW="100%"
+					>
 						{children}
 					</Box>
 					<Text color="gray.600" fontSize="sm">

dashboard/src/pages/Environment.tsx

@@ -1,46 +1,35 @@
 import React, { useEffect } from 'react';
-import {
+import { useParams } from 'react-router-dom';
-	Box,
+import { Box, Flex, Stack, Button, useToast } from '@chakra-ui/react';
-	Divider,
-	Flex,
-	Stack,
-	Center,
-	Text,
-	Button,
-	Input,
-	InputGroup,
-	InputRightElement,
-	useToast,
-} from '@chakra-ui/react';
 import { useClient } from 'urql';
-import {
+import { FaSave } from 'react-icons/fa';
-	FaGoogle,
-	FaGithub,
-	FaFacebookF,
-	FaSave,
-	FaRegEyeSlash,
-	FaRegEye,
-} from 'react-icons/fa';
 import _ from 'lodash';
-import InputField from '../components/InputField';
 import { EnvVariablesQuery } from '../graphql/queries';
 import {
-	ArrayInputType,
 	SelectInputType,
 	HiddenInputType,
 	TextInputType,
-	TextAreaInputType,
-	SwitchInputType,
 	HMACEncryptionType,
 	RSAEncryptionType,
 	ECDSAEncryptionType,
 	envVarTypes,
+	envSubViews,
 } from '../constants';
 import { UpdateEnvVariables } from '../graphql/mutation';
 import { getObjectDiff, capitalizeFirstLetter } from '../utils';
-import GenerateKeysModal from '../components/GenerateKeysModal';
+import OAuthConfig from '../components/EnvComponents/OAuthConfig';
+import Roles from '../components/EnvComponents/Roles';
+import JWTConfigurations from '../components/EnvComponents/JWTConfiguration';
+import SessionStorage from '../components/EnvComponents/SessionStorage';
+import EmailConfigurations from '../components/EnvComponents/EmailConfiguration';
+import DomainWhiteListing from '../components/EnvComponents/DomainWhitelisting';
+import OrganizationInfo from '../components/EnvComponents/OrganizationInfo';
+import AccessToken from '../components/EnvComponents/AccessToken';
+import UICustomization from '../components/EnvComponents/UICustomization';
+import SecurityAdminSecret from '../components/EnvComponents/SecurityAdminSecret';
+import DatabaseCredentials from '../components/EnvComponents/DatabaseCredentials';
 
-export default function Environment() {
+const Environment = () => {
 	const client = useClient();
 	const toast = useToast();
 	const [adminSecret, setAdminSecret] = React.useState<
@@ -100,11 +89,14 @@ export default function Environment() {
 		OLD_ADMIN_SECRET: false,
 	});
 
+	const { sec } = useParams();
+
 	async function getData() {
 		const {
 			data: { _env: envData },
 		} = await client.query(EnvVariablesQuery).toPromise();
 		setLoading(false);
+
 		setEnvVariables({
 			...envData,
 			OLD_ADMIN_SECRET: envData.ADMIN_SECRET,
@@ -118,7 +110,7 @@ export default function Environment() {
 
 	useEffect(() => {
 		getData();
-	}, []);
+	}, [sec]);
 
 	const validateAdminSecretHandler = (event: any) => {
 		if (envVariables.OLD_ADMIN_SECRET === event.target.value) {
@@ -200,636 +192,113 @@ export default function Environment() {
 		});
 	};
 
+	const renderComponent = (tab: any) => {
+		switch (tab) {
+			case envSubViews.INSTANCE_INFO:
 				return (
-		<Box m="5" py="5" px="10" bg="white" rounded="md">
+					<OAuthConfig
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
+						envVariables={envVariables}
-				Your instance information
+						setVariables={setEnvVariables}
-			</Text>
+						fieldVisibility={fieldVisibility}
-			<Stack spacing={6} padding="2% 0%">
+						setFieldVisibility={setFieldVisibility}
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Client ID</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={() => {}}
-							inputType={TextInputType.CLIENT_ID}
-							placeholder="Client ID"
-							readOnly={true}
 					/>
-					</Center>
+				);
-				</Flex>
+			case envSubViews.ROLES:
-				<Flex>
+				return (
-					<Flex w="30%" justifyContent="start" alignItems="center">
+					<Roles variables={envVariables} setVariables={setEnvVariables} />
-						<Text fontSize="sm">Client Secret</Text>
+				);
-					</Flex>
+			case envSubViews.JWT_CONFIG:
-					<Center w="70%">
+				return (
-						<InputField
+					<JWTConfigurations
 						variables={envVariables}
 						setVariables={setEnvVariables}
 						fieldVisibility={fieldVisibility}
 						setFieldVisibility={setFieldVisibility}
-							inputType={HiddenInputType.CLIENT_SECRET}
+						SelectInputType={SelectInputType.JWT_TYPE}
-							placeholder="Client Secret"
+						HMACEncryptionType={HMACEncryptionType}
-							readOnly={true}
+						RSAEncryptionType={RSAEncryptionType}
-						/>
+						ECDSAEncryptionType={ECDSAEncryptionType}
-					</Center>
-				</Flex>
-			</Stack>
-			<Divider marginTop="2%" marginBottom="2%" />
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Social Media Logins
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Center
-						w="50px"
-						marginRight="1.5%"
-						border="1px solid #e2e8f0"
-						borderRadius="5px"
-					>
-						<FaGoogle style={{ color: '#8c8c8c' }} />
-					</Center>
-					<Center w="45%" marginRight="1.5%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.GOOGLE_CLIENT_ID}
-							placeholder="Google Client ID"
-						/>
-					</Center>
-					<Center w="45%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							fieldVisibility={fieldVisibility}
-							setFieldVisibility={setFieldVisibility}
-							inputType={HiddenInputType.GOOGLE_CLIENT_SECRET}
-							placeholder="Google Secret"
-						/>
-					</Center>
-				</Flex>
-				<Flex>
-					<Center
-						w="50px"
-						marginRight="1.5%"
-						border="1px solid #e2e8f0"
-						borderRadius="5px"
-					>
-						<FaGithub style={{ color: '#8c8c8c' }} />
-					</Center>
-					<Center w="45%" marginRight="1.5%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.GITHUB_CLIENT_ID}
-							placeholder="Github Client ID"
-						/>
-					</Center>
-					<Center w="45%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							fieldVisibility={fieldVisibility}
-							setFieldVisibility={setFieldVisibility}
-							inputType={HiddenInputType.GITHUB_CLIENT_SECRET}
-							placeholder="Github Secret"
-						/>
-					</Center>
-				</Flex>
-				<Flex>
-					<Center
-						w="50px"
-						marginRight="1.5%"
-						border="1px solid #e2e8f0"
-						borderRadius="5px"
-					>
-						<FaFacebookF style={{ color: '#8c8c8c' }} />
-					</Center>
-					<Center w="45%" marginRight="1.5%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.FACEBOOK_CLIENT_ID}
-							placeholder="Facebook Client ID"
-						/>
-					</Center>
-					<Center w="45%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							fieldVisibility={fieldVisibility}
-							setFieldVisibility={setFieldVisibility}
-							inputType={HiddenInputType.FACEBOOK_CLIENT_SECRET}
-							placeholder="Facebook Secret"
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-			<Divider marginTop="2%" marginBottom="2%" />
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Roles
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Roles:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={ArrayInputType.ROLES}
-						/>
-					</Center>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Default Roles:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={ArrayInputType.DEFAULT_ROLES}
-						/>
-					</Center>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Protected Roles:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={ArrayInputType.PROTECTED_ROLES}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-			<Divider marginTop="2%" marginBottom="2%" />
-			<Flex
-				width="100%"
-				justifyContent="space-between"
-				alignItems="center"
-				paddingTop="2%"
-			>
-				<Text fontSize="md" fontWeight="bold">
-					JWT (JSON Web Tokens) Configurations
-				</Text>
-				<Flex>
-					<GenerateKeysModal
-						jwtType={envVariables.JWT_TYPE}
 						getData={getData}
 					/>
-				</Flex>
+				);
-			</Flex>
+			case envSubViews.SESSION_STORAGE:
-			<Stack spacing={6} padding="2% 0%">
+				return (
-				<Flex>
+					<SessionStorage
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">JWT Type:</Text>
-					</Flex>
-					<Flex w="70%">
-						<InputField
 						variables={envVariables}
 						setVariables={setEnvVariables}
-							inputType={SelectInputType.JWT_TYPE}
+						RedisURL={TextInputType.REDIS_URL}
-							value={SelectInputType.JWT_TYPE}
-							options={{
-								...HMACEncryptionType,
-								...RSAEncryptionType,
-								...ECDSAEncryptionType,
-							}}
 					/>
-					</Flex>
+				);
-				</Flex>
+			case envSubViews.EMAIL_CONFIG:
-				{Object.values(HMACEncryptionType).includes(envVariables.JWT_TYPE) ? (
+				return (
-					<Flex>
+					<EmailConfigurations
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">JWT Secret</Text>
-						</Flex>
-						<Center w="70%">
-							<InputField
 						variables={envVariables}
 						setVariables={setEnvVariables}
 						fieldVisibility={fieldVisibility}
 						setFieldVisibility={setFieldVisibility}
-								inputType={HiddenInputType.JWT_SECRET}
 					/>
-						</Center>
+				);
-					</Flex>
+			case envSubViews.WHITELIST_VARIABLES:
-				) : (
+				return (
-					<>
+					<DomainWhiteListing
-						<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>
+			case envSubViews.ORGANIZATION_INFO:
-						<Flex>
+				return (
-							<Flex w="30%" justifyContent="start" alignItems="center">
+					<OrganizationInfo
-								<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>
+			case envSubViews.ACCESS_TOKEN:
-					</>
+				return (
-				)}
+					<AccessToken
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">JWT Role Claim:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
 						variables={envVariables}
 						setVariables={setEnvVariables}
-							inputType={TextInputType.JWT_ROLE_CLAIM}
 					/>
-					</Center>
+				);
-				</Flex>
+			case envSubViews.UI_CUSTOMIZATION:
-			</Stack>
+				return (
-			<Divider marginTop="2%" marginBottom="2%" />
+					<UICustomization
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Session Storage
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Redis URL:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
 						variables={envVariables}
 						setVariables={setEnvVariables}
-							inputType={TextInputType.REDIS_URL}
 					/>
-					</Center>
+				);
-				</Flex>
+			case envSubViews.ADMIN_SECRET:
-			</Stack>
+				return (
-			<Divider marginTop="2%" marginBottom="2%" />
+					<SecurityAdminSecret
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Email Configurations
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">SMTP Host:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.SMTP_HOST}
-						/>
-					</Center>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">SMTP Port:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.SMTP_PORT}
-						/>
-					</Center>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">SMTP Username:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.SMTP_USERNAME}
-						/>
-					</Center>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">SMTP Password:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
 						variables={envVariables}
 						setVariables={setEnvVariables}
 						fieldVisibility={fieldVisibility}
 						setFieldVisibility={setFieldVisibility}
-							inputType={HiddenInputType.SMTP_PASSWORD}
+						validateAdminSecretHandler={validateAdminSecretHandler}
+						adminSecret={adminSecret}
 					/>
-					</Center>
+				);
-				</Flex>
+			case envSubViews.DB_CRED:
-				<Flex>
+				return (
-					<Flex w="30%" justifyContent="start" alignItems="center">
+					<DatabaseCredentials
-						<Text fontSize="sm">From Email:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
 						variables={envVariables}
 						setVariables={setEnvVariables}
-							inputType={TextInputType.SENDER_EMAIL}
 					/>
-					</Center>
+				);
-				</Flex>
+			default:
-			</Stack>
+				return (
-			<Divider marginTop="2%" marginBottom="2%" />
+					<OAuthConfig
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
+						envVariables={envVariables}
-				White Listing
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Allowed Origins:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
 						setVariables={setEnvVariables}
-							inputType={ArrayInputType.ALLOWED_ORIGINS}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-			<Divider marginTop="2%" marginBottom="2%" />
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Organization Information
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Organization Name:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.ORGANIZATION_NAME}
-						/>
-					</Center>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Organization Logo:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.ORGANIZATION_LOGO}
-						/>
-					</Center>
-				</Flex>
-			</Stack>
-			<Divider marginTop="2%" marginBottom="2%" />
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Access Token
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Access Token Expiry Time:</Text>
-					</Flex>
-					<Flex w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextInputType.ACCESS_TOKEN_EXPIRY_TIME}
-							placeholder="0h15m0s"
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" direction="column">
-						<Text fontSize="sm">Custom Scripts:</Text>
-						<Text fontSize="sm">Used to add custom fields in ID token</Text>
-					</Flex>
-					<Flex w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={TextAreaInputType.CUSTOM_ACCESS_TOKEN_SCRIPT}
-							placeholder="Add script here"
-							minH="25vh"
-						/>
-					</Flex>
-				</Flex>
-			</Stack>
-			<Divider marginTop="2%" marginBottom="2%" />
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Disable Features
-			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Login Page:</Text>
-					</Flex>
-					<Flex justifyContent="start" w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={SwitchInputType.DISABLE_LOGIN_PAGE}
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Email Verification:</Text>
-					</Flex>
-					<Flex justifyContent="start" w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={SwitchInputType.DISABLE_EMAIL_VERIFICATION}
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Magic Login Link:</Text>
-					</Flex>
-					<Flex justifyContent="start" w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Basic Authentication:</Text>
-					</Flex>
-					<Flex justifyContent="start" w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={SwitchInputType.DISABLE_BASIC_AUTHENTICATION}
-						/>
-					</Flex>
-				</Flex>
-				<Flex>
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Sign Up:</Text>
-					</Flex>
-					<Flex justifyContent="start" w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={SwitchInputType.DISABLE_SIGN_UP}
-						/>
-					</Flex>
-				</Flex>
-			</Stack>
-			<Divider marginTop="2%" marginBottom="2%" />
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold">
-				Danger
-			</Text>
-			<Stack
-				spacing={6}
-				padding="0 5%"
-				marginTop="3%"
-				border="1px solid #ff7875"
-				borderRadius="5px"
-			>
-				<Stack spacing={6} padding="3% 0">
-					<Text fontStyle="italic" fontSize="sm" color="gray.600">
-						Note: Database related environment variables cannot be updated from
-						dashboard :(
-					</Text>
-					<Flex>
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">DataBase Name:</Text>
-						</Flex>
-						<Center w="70%">
-							<InputField
-								variables={envVariables}
-								setVariables={setEnvVariables}
-								inputType={TextInputType.DATABASE_NAME}
-								isDisabled={true}
-							/>
-						</Center>
-					</Flex>
-					<Flex>
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">DataBase Type:</Text>
-						</Flex>
-						<Center w="70%">
-							<InputField
-								variables={envVariables}
-								setVariables={setEnvVariables}
-								inputType={TextInputType.DATABASE_TYPE}
-								isDisabled={true}
-							/>
-						</Center>
-					</Flex>
-					<Flex>
-						<Flex w="30%" justifyContent="start" alignItems="center">
-							<Text fontSize="sm">DataBase URL:</Text>
-						</Flex>
-						<Center w="70%">
-							<InputField
-								variables={envVariables}
-								setVariables={setEnvVariables}
-								inputType={TextInputType.DATABASE_URL}
-								isDisabled={true}
-							/>
-						</Center>
-					</Flex>
-				</Stack>
-				<Flex marginTop="3%">
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Old Admin Secret:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputGroup size="sm">
-							<Input
-								size="sm"
-								placeholder="Enter Old Admin Secret"
-								value={adminSecret.value as string}
-								onChange={(event: any) => validateAdminSecretHandler(event)}
-								type={
-									!fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET]
-										? 'password'
-										: 'text'
-								}
-							/>
-							<InputRightElement
-								right="5px"
-								children={
-									<Flex>
-										{fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET] ? (
-											<Center
-												w="25px"
-												margin="0 1.5%"
-												cursor="pointer"
-												onClick={() =>
-													setFieldVisibility({
-														...fieldVisibility,
-														[HiddenInputType.OLD_ADMIN_SECRET]: false,
-													})
-												}
-											>
-												<FaRegEyeSlash color="#bfbfbf" />
-											</Center>
-										) : (
-											<Center
-												w="25px"
-												margin="0 1.5%"
-												cursor="pointer"
-												onClick={() =>
-													setFieldVisibility({
-														...fieldVisibility,
-														[HiddenInputType.OLD_ADMIN_SECRET]: true,
-													})
-												}
-											>
-												<FaRegEye color="#bfbfbf" />
-											</Center>
-										)}
-									</Flex>
-								}
-							/>
-						</InputGroup>
-					</Center>
-				</Flex>
-				<Flex paddingBottom="3%">
-					<Flex w="30%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">New Admin Secret:</Text>
-					</Flex>
-					<Center w="70%">
-						<InputField
-							variables={envVariables}
-							setVariables={setEnvVariables}
-							inputType={HiddenInputType.ADMIN_SECRET}
 						fieldVisibility={fieldVisibility}
 						setFieldVisibility={setFieldVisibility}
-							isDisabled={adminSecret.disableInputField}
-							placeholder="Enter New Admin Secret"
 					/>
-					</Center>
+				);
-				</Flex>
+		}
-			</Stack>
+	};
-			<Divider marginTop="5%" marginBottom="2%" />
+	return (
-			<Stack spacing={6} padding="1% 0">
+		<Box m="5" py="5" px="10" bg="white" rounded="md">
+			{renderComponent(sec)}
+			<Stack spacing={6} padding="1% 0" mt={4}>
 				<Flex justifyContent="end" alignItems="center">
 					<Button
 						leftIcon={<FaSave />}
@@ -844,4 +313,6 @@ export default function Environment() {
 			</Stack>
 		</Box>
 	);
-}
+};
+
+export default Environment;

dashboard/src/routes/index.tsx

@@ -14,6 +14,7 @@ export const AppRoutes = () => {
 
 	if (isLoggedIn) {
 		return (
+		<div>
 			<Suspense fallback={<></>}>
 				<Routes>
 					<Route
@@ -23,13 +24,16 @@ export const AppRoutes = () => {
 							</DashboardLayout>
 						}
 					>
-						<Route path="/" element={<Environment />} />
+						 <Route path="/" element={<Outlet />}>
+              				<Route index element={<Environment />} />
+              				<Route path="/:sec" element={<Environment />} />
+           				 </Route>
            				 <Route path="users" element={<Users />} />
-						<Route path="environment" element={<Environment />} />
          				   <Route path="*" element={<Home />} />
 					</Route>
 				</Routes>
 			</Suspense>
+		</div>
 		);
 	}
 	return (