Merge pull request #161 from akash-dutta-au7/fix/env-page-new
Update Dashboard UI
This commit is contained in:
Lakhan Samani
GitHub
commit
2c4bc9adb6
34
dashboard/package-lock.json
generated
34
dashboard/package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@chakra-ui/react": "^1.7.3",
|
"@chakra-ui/react": "^1.7.3",
|
||||||
|
"@emotion/core": "^11.0.0",
|
||||||
"@emotion/react": "^11.7.1",
|
"@emotion/react": "^11.7.1",
|
||||||
"@emotion/styled": "^11.6.0",
|
"@emotion/styled": "^11.6.0",
|
||||||
"@types/react": "^17.0.38",
|
"@types/react": "^17.0.38",
|
||||||
|
|
@ -17,6 +18,7 @@
|
||||||
"@types/react-router-dom": "^5.3.2",
|
"@types/react-router-dom": "^5.3.2",
|
||||||
"dayjs": "^1.10.7",
|
"dayjs": "^1.10.7",
|
||||||
"esbuild": "^0.14.9",
|
"esbuild": "^0.14.9",
|
||||||
|
"focus-visible": "^5.2.0",
|
||||||
"framer-motion": "^5.5.5",
|
"framer-motion": "^5.5.5",
|
||||||
"graphql": "^16.2.0",
|
"graphql": "^16.2.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
|
@ -978,6 +980,11 @@
|
||||||
"stylis": "4.0.13"
|
"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": {
|
"node_modules/@emotion/hash": {
|
||||||
"version": "0.8.0",
|
"version": "0.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||||
|
|
@ -1667,6 +1674,11 @@
|
||||||
"node": ">=10"
|
"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": {
|
"node_modules/framer-motion": {
|
||||||
"version": "5.5.5",
|
"version": "5.5.5",
|
||||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-5.5.5.tgz",
|
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-5.5.5.tgz",
|
||||||
|
|
@ -2517,8 +2529,7 @@
|
||||||
"@chakra-ui/css-reset": {
|
"@chakra-ui/css-reset": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@chakra-ui/css-reset/-/css-reset-1.1.1.tgz",
|
"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": {
|
"@chakra-ui/descendant": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
|
|
@ -3038,6 +3049,11 @@
|
||||||
"stylis": "4.0.13"
|
"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": {
|
"@emotion/hash": {
|
||||||
"version": "0.8.0",
|
"version": "0.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||||
|
|
@ -3117,8 +3133,7 @@
|
||||||
"@graphql-typed-document-node/core": {
|
"@graphql-typed-document-node/core": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.1.tgz",
|
"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": {
|
"@popperjs/core": {
|
||||||
"version": "2.11.0",
|
"version": "2.11.0",
|
||||||
|
|
@ -3540,6 +3555,11 @@
|
||||||
"tslib": "^2.0.3"
|
"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": {
|
"framer-motion": {
|
||||||
"version": "5.5.5",
|
"version": "5.5.5",
|
||||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-5.5.5.tgz",
|
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-5.5.5.tgz",
|
||||||
|
|
@ -3823,8 +3843,7 @@
|
||||||
"react-icons": {
|
"react-icons": {
|
||||||
"version": "4.3.1",
|
"version": "4.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
|
"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": {
|
"react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
|
|
@ -4010,8 +4029,7 @@
|
||||||
"use-callback-ref": {
|
"use-callback-ref": {
|
||||||
"version": "1.2.5",
|
"version": "1.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
|
"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": {
|
"use-sidecar": {
|
||||||
"version": "1.0.5",
|
"version": "1.0.5",
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@chakra-ui/react": "^1.7.3",
|
"@chakra-ui/react": "^1.7.3",
|
||||||
|
"@emotion/core": "^11.0.0",
|
||||||
"@emotion/react": "^11.7.1",
|
"@emotion/react": "^11.7.1",
|
||||||
"@emotion/styled": "^11.6.0",
|
"@emotion/styled": "^11.6.0",
|
||||||
"@types/react": "^17.0.38",
|
"@types/react": "^17.0.38",
|
||||||
|
|
@ -19,6 +20,7 @@
|
||||||
"@types/react-router-dom": "^5.3.2",
|
"@types/react-router-dom": "^5.3.2",
|
||||||
"dayjs": "^1.10.7",
|
"dayjs": "^1.10.7",
|
||||||
"esbuild": "^0.14.9",
|
"esbuild": "^0.14.9",
|
||||||
|
"focus-visible": "^5.2.0",
|
||||||
"framer-motion": "^5.5.5",
|
"framer-motion": "^5.5.5",
|
||||||
"graphql": "^16.2.0",
|
"graphql": "^16.2.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { Fragment } from 'react';
|
||||||
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
|
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
import { createClient, Provider } from 'urql';
|
import { createClient, Provider } from 'urql';
|
||||||
|
|
@ -24,6 +25,7 @@ const theme = extendTheme({
|
||||||
'html, body, #root': {
|
'html, body, #root': {
|
||||||
fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
|
fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
|
outline: 'none',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -36,14 +38,16 @@ const theme = extendTheme({
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<ChakraProvider theme={theme}>
|
<Fragment>
|
||||||
<Provider value={queryClient}>
|
<ChakraProvider theme={theme}>
|
||||||
<BrowserRouter basename="/dashboard">
|
<Provider value={queryClient}>
|
||||||
<AuthContextProvider>
|
<BrowserRouter basename="/dashboard">
|
||||||
<AppRoutes />
|
<AuthContextProvider>
|
||||||
</AuthContextProvider>
|
<AppRoutes />
|
||||||
</BrowserRouter>
|
</AuthContextProvider>
|
||||||
</Provider>
|
</BrowserRouter>
|
||||||
</ChakraProvider>
|
</Provider>
|
||||||
|
</ChakraProvider>
|
||||||
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
65
dashboard/src/components/EnvComponents/AccessToken.tsx
Normal file
65
dashboard/src/components/EnvComponents/AccessToken.tsx
Normal file
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
114
dashboard/src/components/EnvComponents/EmailConfiguration.tsx
Normal file
114
dashboard/src/components/EnvComponents/EmailConfiguration.tsx
Normal file
|
|
@ -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;
|
||||||
154
dashboard/src/components/EnvComponents/JWTConfiguration.tsx
Normal file
154
dashboard/src/components/EnvComponents/JWTConfiguration.tsx
Normal file
|
|
@ -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;
|
||||||
191
dashboard/src/components/EnvComponents/OAuthConfig.tsx
Normal file
191
dashboard/src/components/EnvComponents/OAuthConfig.tsx
Normal file
|
|
@ -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;
|
||||||
60
dashboard/src/components/EnvComponents/OrganizationInfo.tsx
Normal file
60
dashboard/src/components/EnvComponents/OrganizationInfo.tsx
Normal file
|
|
@ -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;
|
||||||
67
dashboard/src/components/EnvComponents/Roles.tsx
Normal file
67
dashboard/src/components/EnvComponents/Roles.tsx
Normal file
|
|
@ -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;
|
||||||
138
dashboard/src/components/EnvComponents/SecurityAdminSecret.tsx
Normal file
138
dashboard/src/components/EnvComponents/SecurityAdminSecret.tsx
Normal file
|
|
@ -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;
|
||||||
36
dashboard/src/components/EnvComponents/SessionStorage.tsx
Normal file
36
dashboard/src/components/EnvComponents/SessionStorage.tsx
Normal file
|
|
@ -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;
|
||||||
79
dashboard/src/components/EnvComponents/UICustomization.tsx
Normal file
79
dashboard/src/components/EnvComponents/UICustomization.tsx
Normal file
|
|
@ -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;
|
||||||
|
|
@ -116,7 +116,7 @@ const InputField = ({
|
||||||
<InputGroup size="sm">
|
<InputGroup size="sm">
|
||||||
<Input
|
<Input
|
||||||
{...props}
|
{...props}
|
||||||
value={variables[inputType]}
|
value={variables[inputType] ?? ''}
|
||||||
onChange={(
|
onChange={(
|
||||||
event: Event & {
|
event: Event & {
|
||||||
target: HTMLInputElement;
|
target: HTMLInputElement;
|
||||||
|
|
@ -179,13 +179,14 @@ const InputField = ({
|
||||||
if (Object.values(ArrayInputType).includes(inputType)) {
|
if (Object.values(ArrayInputType).includes(inputType)) {
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex
|
||||||
border="1px solid #e2e8f0"
|
border="1px solid #e2e8f0"
|
||||||
w="100%"
|
w="100%"
|
||||||
paddingTop="0.5%"
|
borderRadius={5}
|
||||||
overflowX="scroll"
|
paddingTop="0.5%"
|
||||||
overflowY="hidden"
|
overflowX={variables[inputType].length > 3 ? "scroll" : "hidden"}
|
||||||
justifyContent="start"
|
overflowY="hidden"
|
||||||
alignItems="center"
|
justifyContent="start"
|
||||||
|
alignItems="center"
|
||||||
>
|
>
|
||||||
{variables[inputType].map((role: string, index: number) => (
|
{variables[inputType].map((role: string, index: number) => (
|
||||||
<Box key={index} margin="0.5%" role="group">
|
<Box key={index} margin="0.5%" role="group">
|
||||||
|
|
@ -220,7 +221,7 @@ const InputField = ({
|
||||||
size="xs"
|
size="xs"
|
||||||
minW="150px"
|
minW="150px"
|
||||||
placeholder="add a new value"
|
placeholder="add a new value"
|
||||||
value={inputData[inputType]}
|
value={inputData[inputType] ?? ''}
|
||||||
onChange={(e: any) => {
|
onChange={(e: any) => {
|
||||||
setInputData({ ...inputData, [inputType]: e.target.value });
|
setInputData({ ...inputData, [inputType]: e.target.value });
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ import {
|
||||||
InputRightElement,
|
InputRightElement,
|
||||||
Text,
|
Text,
|
||||||
Link,
|
Link,
|
||||||
|
Tooltip
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { useClient } from 'urql';
|
import { useClient } from 'urql';
|
||||||
import { FaUserPlus, FaMinusCircle, FaPlus, FaUpload } from 'react-icons/fa';
|
import { FaUserPlus, FaMinusCircle, FaPlus, FaUpload } from 'react-icons/fa';
|
||||||
|
|
@ -186,7 +187,22 @@ const InviteMembersModal = ({
|
||||||
isDisabled={disabled}
|
isDisabled={disabled}
|
||||||
size="sm"
|
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>
|
</Button>
|
||||||
<Modal isOpen={isOpen} onClose={closeModalHandler} size="xl">
|
<Modal isOpen={isOpen} onClose={closeModalHandler} size="xl">
|
||||||
<ModalOverlay />
|
<ModalOverlay />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { ReactNode } from 'react';
|
import React, { Fragment, ReactNode } from 'react';
|
||||||
import {
|
import {
|
||||||
IconButton,
|
IconButton,
|
||||||
Box,
|
Box,
|
||||||
|
|
@ -17,16 +17,27 @@ import {
|
||||||
MenuButton,
|
MenuButton,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
MenuList,
|
MenuList,
|
||||||
|
Accordion,
|
||||||
|
AccordionButton,
|
||||||
|
AccordionPanel,
|
||||||
|
AccordionItem,
|
||||||
|
useMediaQuery,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import {
|
import {
|
||||||
FiHome,
|
FiUser,
|
||||||
FiCode,
|
FiCode,
|
||||||
FiSettings,
|
FiSettings,
|
||||||
FiMenu,
|
FiMenu,
|
||||||
FiUser,
|
|
||||||
FiUsers,
|
FiUsers,
|
||||||
FiChevronDown,
|
FiChevronDown,
|
||||||
} from 'react-icons/fi';
|
} 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 { IconType } from 'react-icons';
|
||||||
import { ReactText } from 'react';
|
import { ReactText } from 'react';
|
||||||
import { useMutation, useQuery } from 'urql';
|
import { useMutation, useQuery } from 'urql';
|
||||||
|
|
@ -35,14 +46,70 @@ import { useAuthContext } from '../contexts/AuthContext';
|
||||||
import { AdminLogout } from '../graphql/mutation';
|
import { AdminLogout } from '../graphql/mutation';
|
||||||
import { MetaQuery } from '../graphql/queries';
|
import { MetaQuery } from '../graphql/queries';
|
||||||
|
|
||||||
interface LinkItemProps {
|
interface SubRoutes {
|
||||||
name: string;
|
name: string;
|
||||||
icon: IconType;
|
icon: IconType;
|
||||||
route: string;
|
route: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface LinkItemProps {
|
||||||
|
name: string;
|
||||||
|
icon: IconType;
|
||||||
|
route: string;
|
||||||
|
subRoutes?: SubRoutes[];
|
||||||
|
}
|
||||||
const LinkItems: Array<LinkItemProps> = [
|
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' },
|
{ name: 'Users', icon: FiUsers, route: '/users' },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -53,6 +120,7 @@ interface SidebarProps extends BoxProps {
|
||||||
export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const [{ fetching, data }] = useQuery({ query: MetaQuery });
|
const [{ fetching, data }] = useQuery({ query: MetaQuery });
|
||||||
|
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
transition="3s ease"
|
transition="3s ease"
|
||||||
|
|
@ -64,9 +132,15 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
||||||
h="full"
|
h="full"
|
||||||
{...rest}
|
{...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="/">
|
<NavLink to="/">
|
||||||
<Flex alignItems="center">
|
<Flex alignItems="center" mt="6">
|
||||||
<Image
|
<Image
|
||||||
src="https://authorizer.dev/images/logo.png"
|
src="https://authorizer.dev/images/logo.png"
|
||||||
alt="logo"
|
alt="logo"
|
||||||
|
|
@ -79,39 +153,96 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
|
<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
|
||||||
</Flex>
|
</Flex>
|
||||||
{LinkItems.map((link) => (
|
|
||||||
<NavLink key={link.name} to={link.route}>
|
|
||||||
<NavItem
|
|
||||||
icon={link.icon}
|
|
||||||
color={pathname === link.route ? 'blue.500' : ''}
|
|
||||||
>
|
|
||||||
{link.name}
|
|
||||||
</NavItem>
|
|
||||||
</NavLink>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<Link
|
<Accordion defaultIndex={[0]} allowMultiple>
|
||||||
href="/playground"
|
<AccordionItem textAlign="center" border="none" w="100%">
|
||||||
target="_blank"
|
{LinkItems.map((link) =>
|
||||||
style={{
|
link?.subRoutes ? (
|
||||||
textDecoration: 'none',
|
<div key={link.name}>
|
||||||
}}
|
<AccordionButton _focus={{ boxShadow: 'none' }}>
|
||||||
_focus={{ _boxShadow: 'none' }}
|
<Text as="div" fontSize="md">
|
||||||
>
|
<NavItem
|
||||||
<NavItem icon={FiCode}>API Playground</NavItem>
|
icon={link.icon}
|
||||||
</Link>
|
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"
|
||||||
|
style={{
|
||||||
|
textDecoration: 'none',
|
||||||
|
}}
|
||||||
|
_focus={{ _boxShadow: 'none' }}
|
||||||
|
>
|
||||||
|
<NavItem icon={FiCode}>API Playground</NavItem>
|
||||||
|
</Link>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
{data?.meta?.version && (
|
{data?.meta?.version && (
|
||||||
<Text
|
<Flex alignContent="center">
|
||||||
color="gray.600"
|
{' '}
|
||||||
fontSize="sm"
|
<Text
|
||||||
textAlign="center"
|
color="gray.400"
|
||||||
position="absolute"
|
fontSize="sm"
|
||||||
bottom="5"
|
textAlign="center"
|
||||||
left="7"
|
position="absolute"
|
||||||
>
|
bottom="5"
|
||||||
Current Version: {data.meta.version}
|
left="7"
|
||||||
</Text>
|
>
|
||||||
|
Current Version: {data.meta.version}
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
@ -119,7 +250,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
||||||
|
|
||||||
interface NavItemProps extends FlexProps {
|
interface NavItemProps extends FlexProps {
|
||||||
icon: IconType;
|
icon: IconType;
|
||||||
children: ReactText;
|
children: ReactText | JSX.Element | JSX.Element[];
|
||||||
}
|
}
|
||||||
export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
|
export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
|
||||||
return (
|
return (
|
||||||
|
|
@ -204,7 +335,7 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
|
||||||
transition="all 0.3s"
|
transition="all 0.3s"
|
||||||
_focus={{ boxShadow: 'none' }}
|
_focus={{ boxShadow: 'none' }}
|
||||||
>
|
>
|
||||||
<HStack>
|
<HStack mr={5}>
|
||||||
<FiUser />
|
<FiUser />
|
||||||
<VStack
|
<VStack
|
||||||
display={{ base: 'none', md: 'flex' }}
|
display={{ base: 'none', md: 'flex' }}
|
||||||
|
|
|
||||||
|
|
@ -128,3 +128,17 @@ export interface envVarTypes {
|
||||||
DATABASE_URL: string;
|
DATABASE_URL: string;
|
||||||
ACCESS_TOKEN_EXPIRY_TIME: 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',
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,9 @@ import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
|
||||||
ReactDOM.render(<App />, document.getElementById('root'));
|
ReactDOM.render(
|
||||||
|
<div>
|
||||||
|
<App />
|
||||||
|
</div>,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
|
|
|
||||||
|
|
@ -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 React from 'react';
|
||||||
import { useQuery } from 'urql';
|
import { useQuery } from 'urql';
|
||||||
import { MetaQuery } from '../graphql/queries';
|
import { MetaQuery } from '../graphql/queries';
|
||||||
|
|
||||||
export function AuthLayout({ children }: { children: React.ReactNode }) {
|
export function AuthLayout({ children }: { children: React.ReactNode }) {
|
||||||
const [{ fetching, data }] = useQuery({ query: MetaQuery });
|
const [{ fetching, data }] = useQuery({ query: MetaQuery });
|
||||||
|
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex
|
||||||
flexWrap="wrap"
|
h="100vh"
|
||||||
h="100%"
|
|
||||||
bg="gray.100"
|
bg="gray.100"
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
flexDirection="column"
|
direction={['column', 'column']}
|
||||||
>
|
>
|
||||||
<Flex alignItems="center">
|
<Flex alignItems="center" maxW="100%">
|
||||||
<Image
|
<Image
|
||||||
src="https://authorizer.dev/images/logo.png"
|
src="https://authorizer.dev/images/logo.png"
|
||||||
alt="logo"
|
alt="logo"
|
||||||
|
|
@ -29,7 +36,15 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
|
||||||
<Spinner />
|
<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}
|
{children}
|
||||||
</Box>
|
</Box>
|
||||||
<Text color="gray.600" fontSize="sm">
|
<Text color="gray.600" fontSize="sm">
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,35 @@
|
||||||
import React, { useEffect } from 'react';
|
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 { useClient } from 'urql';
|
||||||
import {
|
import { FaSave } from 'react-icons/fa';
|
||||||
FaGoogle,
|
|
||||||
FaGithub,
|
|
||||||
FaFacebookF,
|
|
||||||
FaSave,
|
|
||||||
FaRegEyeSlash,
|
|
||||||
FaRegEye,
|
|
||||||
} from 'react-icons/fa';
|
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import InputField from '../components/InputField';
|
|
||||||
import { EnvVariablesQuery } from '../graphql/queries';
|
import { EnvVariablesQuery } from '../graphql/queries';
|
||||||
import {
|
import {
|
||||||
ArrayInputType,
|
|
||||||
SelectInputType,
|
SelectInputType,
|
||||||
HiddenInputType,
|
HiddenInputType,
|
||||||
TextInputType,
|
TextInputType,
|
||||||
TextAreaInputType,
|
|
||||||
SwitchInputType,
|
|
||||||
HMACEncryptionType,
|
HMACEncryptionType,
|
||||||
RSAEncryptionType,
|
RSAEncryptionType,
|
||||||
ECDSAEncryptionType,
|
ECDSAEncryptionType,
|
||||||
envVarTypes,
|
envVarTypes,
|
||||||
|
envSubViews,
|
||||||
} from '../constants';
|
} from '../constants';
|
||||||
import { UpdateEnvVariables } from '../graphql/mutation';
|
import { UpdateEnvVariables } from '../graphql/mutation';
|
||||||
import { getObjectDiff, capitalizeFirstLetter } from '../utils';
|
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 client = useClient();
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
const [adminSecret, setAdminSecret] = React.useState<
|
const [adminSecret, setAdminSecret] = React.useState<
|
||||||
|
|
@ -100,11 +89,14 @@ export default function Environment() {
|
||||||
OLD_ADMIN_SECRET: false,
|
OLD_ADMIN_SECRET: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const { sec } = useParams();
|
||||||
|
|
||||||
async function getData() {
|
async function getData() {
|
||||||
const {
|
const {
|
||||||
data: { _env: envData },
|
data: { _env: envData },
|
||||||
} = await client.query(EnvVariablesQuery).toPromise();
|
} = await client.query(EnvVariablesQuery).toPromise();
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
||||||
setEnvVariables({
|
setEnvVariables({
|
||||||
...envData,
|
...envData,
|
||||||
OLD_ADMIN_SECRET: envData.ADMIN_SECRET,
|
OLD_ADMIN_SECRET: envData.ADMIN_SECRET,
|
||||||
|
|
@ -118,7 +110,7 @@ export default function Environment() {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getData();
|
getData();
|
||||||
}, []);
|
}, [sec]);
|
||||||
|
|
||||||
const validateAdminSecretHandler = (event: any) => {
|
const validateAdminSecretHandler = (event: any) => {
|
||||||
if (envVariables.OLD_ADMIN_SECRET === event.target.value) {
|
if (envVariables.OLD_ADMIN_SECRET === event.target.value) {
|
||||||
|
|
@ -200,636 +192,113 @@ export default function Environment() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const renderComponent = (tab: any) => {
|
||||||
<Box m="5" py="5" px="10" bg="white" rounded="md">
|
switch (tab) {
|
||||||
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
|
case envSubViews.INSTANCE_INFO:
|
||||||
Your instance information
|
return (
|
||||||
</Text>
|
<OAuthConfig
|
||||||
<Stack spacing={6} padding="2% 0%">
|
envVariables={envVariables}
|
||||||
<Flex>
|
setVariables={setEnvVariables}
|
||||||
<Flex w="30%" justifyContent="start" alignItems="center">
|
fieldVisibility={fieldVisibility}
|
||||||
<Text fontSize="sm">Client ID</Text>
|
setFieldVisibility={setFieldVisibility}
|
||||||
</Flex>
|
/>
|
||||||
<Center w="70%">
|
);
|
||||||
<InputField
|
case envSubViews.ROLES:
|
||||||
variables={envVariables}
|
return (
|
||||||
setVariables={() => {}}
|
<Roles variables={envVariables} setVariables={setEnvVariables} />
|
||||||
inputType={TextInputType.CLIENT_ID}
|
);
|
||||||
placeholder="Client ID"
|
case envSubViews.JWT_CONFIG:
|
||||||
readOnly={true}
|
return (
|
||||||
/>
|
<JWTConfigurations
|
||||||
</Center>
|
variables={envVariables}
|
||||||
</Flex>
|
setVariables={setEnvVariables}
|
||||||
<Flex>
|
fieldVisibility={fieldVisibility}
|
||||||
<Flex w="30%" justifyContent="start" alignItems="center">
|
setFieldVisibility={setFieldVisibility}
|
||||||
<Text fontSize="sm">Client Secret</Text>
|
SelectInputType={SelectInputType.JWT_TYPE}
|
||||||
</Flex>
|
HMACEncryptionType={HMACEncryptionType}
|
||||||
<Center w="70%">
|
RSAEncryptionType={RSAEncryptionType}
|
||||||
<InputField
|
ECDSAEncryptionType={ECDSAEncryptionType}
|
||||||
variables={envVariables}
|
|
||||||
setVariables={setEnvVariables}
|
|
||||||
fieldVisibility={fieldVisibility}
|
|
||||||
setFieldVisibility={setFieldVisibility}
|
|
||||||
inputType={HiddenInputType.CLIENT_SECRET}
|
|
||||||
placeholder="Client Secret"
|
|
||||||
readOnly={true}
|
|
||||||
/>
|
|
||||||
</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}
|
getData={getData}
|
||||||
/>
|
/>
|
||||||
</Flex>
|
);
|
||||||
</Flex>
|
case envSubViews.SESSION_STORAGE:
|
||||||
<Stack spacing={6} padding="2% 0%">
|
return (
|
||||||
<Flex>
|
<SessionStorage
|
||||||
<Flex w="30%" justifyContent="start" alignItems="center">
|
variables={envVariables}
|
||||||
<Text fontSize="sm">JWT Type:</Text>
|
setVariables={setEnvVariables}
|
||||||
</Flex>
|
RedisURL={TextInputType.REDIS_URL}
|
||||||
<Flex w="70%">
|
/>
|
||||||
<InputField
|
);
|
||||||
variables={envVariables}
|
case envSubViews.EMAIL_CONFIG:
|
||||||
setVariables={setEnvVariables}
|
return (
|
||||||
inputType={SelectInputType.JWT_TYPE}
|
<EmailConfigurations
|
||||||
value={SelectInputType.JWT_TYPE}
|
variables={envVariables}
|
||||||
options={{
|
setVariables={setEnvVariables}
|
||||||
...HMACEncryptionType,
|
fieldVisibility={fieldVisibility}
|
||||||
...RSAEncryptionType,
|
setFieldVisibility={setFieldVisibility}
|
||||||
...ECDSAEncryptionType,
|
/>
|
||||||
}}
|
);
|
||||||
/>
|
case envSubViews.WHITELIST_VARIABLES:
|
||||||
</Flex>
|
return (
|
||||||
</Flex>
|
<DomainWhiteListing
|
||||||
{Object.values(HMACEncryptionType).includes(envVariables.JWT_TYPE) ? (
|
variables={envVariables}
|
||||||
<Flex>
|
setVariables={setEnvVariables}
|
||||||
<Flex w="30%" justifyContent="start" alignItems="center">
|
/>
|
||||||
<Text fontSize="sm">JWT Secret</Text>
|
);
|
||||||
</Flex>
|
case envSubViews.ORGANIZATION_INFO:
|
||||||
<Center w="70%">
|
return (
|
||||||
<InputField
|
<OrganizationInfo
|
||||||
variables={envVariables}
|
variables={envVariables}
|
||||||
setVariables={setEnvVariables}
|
setVariables={setEnvVariables}
|
||||||
fieldVisibility={fieldVisibility}
|
/>
|
||||||
setFieldVisibility={setFieldVisibility}
|
);
|
||||||
inputType={HiddenInputType.JWT_SECRET}
|
case envSubViews.ACCESS_TOKEN:
|
||||||
/>
|
return (
|
||||||
</Center>
|
<AccessToken
|
||||||
</Flex>
|
variables={envVariables}
|
||||||
) : (
|
setVariables={setEnvVariables}
|
||||||
<>
|
/>
|
||||||
<Flex>
|
);
|
||||||
<Flex w="30%" justifyContent="start" alignItems="center">
|
case envSubViews.UI_CUSTOMIZATION:
|
||||||
<Text fontSize="sm">Public Key</Text>
|
return (
|
||||||
</Flex>
|
<UICustomization
|
||||||
<Center w="70%">
|
variables={envVariables}
|
||||||
<InputField
|
setVariables={setEnvVariables}
|
||||||
variables={envVariables}
|
/>
|
||||||
setVariables={setEnvVariables}
|
);
|
||||||
inputType={TextAreaInputType.JWT_PUBLIC_KEY}
|
case envSubViews.ADMIN_SECRET:
|
||||||
placeholder="Add public key here"
|
return (
|
||||||
minH="25vh"
|
<SecurityAdminSecret
|
||||||
/>
|
variables={envVariables}
|
||||||
</Center>
|
setVariables={setEnvVariables}
|
||||||
</Flex>
|
fieldVisibility={fieldVisibility}
|
||||||
<Flex>
|
setFieldVisibility={setFieldVisibility}
|
||||||
<Flex w="30%" justifyContent="start" alignItems="center">
|
validateAdminSecretHandler={validateAdminSecretHandler}
|
||||||
<Text fontSize="sm">Private Key</Text>
|
adminSecret={adminSecret}
|
||||||
</Flex>
|
/>
|
||||||
<Center w="70%">
|
);
|
||||||
<InputField
|
case envSubViews.DB_CRED:
|
||||||
variables={envVariables}
|
return (
|
||||||
setVariables={setEnvVariables}
|
<DatabaseCredentials
|
||||||
inputType={TextAreaInputType.JWT_PRIVATE_KEY}
|
variables={envVariables}
|
||||||
placeholder="Add private key here"
|
setVariables={setEnvVariables}
|
||||||
minH="25vh"
|
/>
|
||||||
/>
|
);
|
||||||
</Center>
|
default:
|
||||||
</Flex>
|
return (
|
||||||
</>
|
<OAuthConfig
|
||||||
)}
|
envVariables={envVariables}
|
||||||
<Flex>
|
setVariables={setEnvVariables}
|
||||||
<Flex w="30%" justifyContent="start" alignItems="center">
|
fieldVisibility={fieldVisibility}
|
||||||
<Text fontSize="sm">JWT Role Claim:</Text>
|
setFieldVisibility={setFieldVisibility}
|
||||||
</Flex>
|
/>
|
||||||
<Center w="70%">
|
);
|
||||||
<InputField
|
}
|
||||||
variables={envVariables}
|
};
|
||||||
setVariables={setEnvVariables}
|
return (
|
||||||
inputType={TextInputType.JWT_ROLE_CLAIM}
|
<Box m="5" py="5" px="10" bg="white" rounded="md">
|
||||||
/>
|
{renderComponent(sec)}
|
||||||
</Center>
|
<Stack spacing={6} padding="1% 0" mt={4}>
|
||||||
</Flex>
|
|
||||||
</Stack>
|
|
||||||
<Divider marginTop="2%" marginBottom="2%" />
|
|
||||||
<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>
|
|
||||||
</Stack>
|
|
||||||
<Divider marginTop="2%" marginBottom="2%" />
|
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
</Center>
|
|
||||||
</Flex>
|
|
||||||
<Flex>
|
|
||||||
<Flex w="30%" justifyContent="start" alignItems="center">
|
|
||||||
<Text fontSize="sm">From Email:</Text>
|
|
||||||
</Flex>
|
|
||||||
<Center w="70%">
|
|
||||||
<InputField
|
|
||||||
variables={envVariables}
|
|
||||||
setVariables={setEnvVariables}
|
|
||||||
inputType={TextInputType.SENDER_EMAIL}
|
|
||||||
/>
|
|
||||||
</Center>
|
|
||||||
</Flex>
|
|
||||||
</Stack>
|
|
||||||
<Divider marginTop="2%" marginBottom="2%" />
|
|
||||||
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
|
|
||||||
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%" />
|
|
||||||
<Stack spacing={6} padding="1% 0">
|
|
||||||
<Flex justifyContent="end" alignItems="center">
|
<Flex justifyContent="end" alignItems="center">
|
||||||
<Button
|
<Button
|
||||||
leftIcon={<FaSave />}
|
leftIcon={<FaSave />}
|
||||||
|
|
@ -844,4 +313,6 @@ export default function Environment() {
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export default Environment;
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ export const AppRoutes = () => {
|
||||||
|
|
||||||
if (isLoggedIn) {
|
if (isLoggedIn) {
|
||||||
return (
|
return (
|
||||||
|
<div>
|
||||||
<Suspense fallback={<></>}>
|
<Suspense fallback={<></>}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route
|
<Route
|
||||||
|
|
@ -23,13 +24,16 @@ export const AppRoutes = () => {
|
||||||
</DashboardLayout>
|
</DashboardLayout>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Route path="/" element={<Environment />} />
|
<Route path="/" element={<Outlet />}>
|
||||||
<Route path="users" element={<Users />} />
|
<Route index element={<Environment />} />
|
||||||
<Route path="environment" element={<Environment />} />
|
<Route path="/:sec" element={<Environment />} />
|
||||||
<Route path="*" element={<Home />} />
|
</Route>
|
||||||
|
<Route path="users" element={<Users />} />
|
||||||
|
<Route path="*" element={<Home />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user