devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

all components updated, uncontrolled input error handled

Browse Source
This commit is contained in:
akash.dutta 2022-05-07 22:10:29 +05:30
parent c783e101d5
commit 7c5aab7bf3
17 changed files with 1765 additions and 1045 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dashboard/src/App.tsx
View File

@ -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';
@ -36,6 +37,7 @@ const theme = extendTheme({
export default function App() { export default function App() {
return ( return (
<Fragment>
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<Provider value={queryClient}> <Provider value={queryClient}>
<BrowserRouter basename="/dashboard"> <BrowserRouter basename="/dashboard">
@ -45,5 +47,6 @@ export default function App() {
</BrowserRouter> </BrowserRouter>
</Provider> </Provider>
</ChakraProvider> </ChakraProvider>
</Fragment>
); );
} }

65
dashboard/src/components/EnvComponents/AccessToken.tsx Normal file
View 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;

88
dashboard/src/components/EnvComponents/DatabaseCredentials.tsx Normal file
View File

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

35
dashboard/src/components/EnvComponents/DomainWhitelisting.tsx Normal file
View File

@ -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
View 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
View 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
View 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" />
{/* ################ SOCIAL MEDIA LOGIN ################ */}
<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
View 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
View 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
View 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 { TextInputType, 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
View 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;

80
dashboard/src/components/EnvComponents/SocialMediaLogin.tsx Normal file
View File

@ -0,0 +1,80 @@
import React from "react";
import { Flex, Stack, Text, useMediaQuery } from "@chakra-ui/react";
import InputField from "../InputField";
import { SwitchInputType } from "../../constants";
const UICustomization = ({ variables, setVariables }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
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;

80
dashboard/src/components/EnvComponents/UICustomization.tsx Normal file
View File

@ -0,0 +1,80 @@
import React from "react";
import { Flex, Stack, Text, useMediaQuery } from "@chakra-ui/react";
import InputField from "../InputField";
import { SwitchInputType } from "../../constants";
const UICustomization = ({ variables, setVariables }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
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;

19
dashboard/src/components/InputField.tsx
View File

@ -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 });
}} }}

539
dashboard/src/components/Menu.tsx
View File

@ -1,233 +1,362 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from "react";
import { import {
IconButton, IconButton,
Box, Box,
CloseButton, CloseButton,
Flex, Flex,
Image, Image,
HStack, HStack,
VStack, VStack,
Icon, Icon,
useColorModeValue, useColorModeValue,
Link, Link,
Text, Text,
BoxProps, BoxProps,
FlexProps, FlexProps,
Menu, Menu,
MenuButton, MenuButton,
MenuItem, MenuItem,
MenuList, MenuList,
} from '@chakra-ui/react'; Accordion,
AccordionButton,
AccordionPanel,
AccordionItem,
AccordionIcon,
useMediaQuery,
} from "@chakra-ui/react";
import { import {
FiHome, FiHome,
FiCode, FiUser,
FiSettings, FiGlobe,
FiMenu, FiCode,
FiUser, FiSettings,
FiUsers, FiMenu,
FiChevronDown, FiUsers,
} from 'react-icons/fi'; FiChevronDown,
import { IconType } from 'react-icons'; FiShieldOff,
import { ReactText } from 'react'; } from "react-icons/fi";
import { useMutation, useQuery } from 'urql'; import { BiCustomize } from "react-icons/bi";
import { NavLink, useNavigate, useLocation } from 'react-router-dom'; import { FcDatabase } from "react-icons/fc";
import { useAuthContext } from '../contexts/AuthContext'; import { AiOutlineKey } from "react-icons/ai";
import { AdminLogout } from '../graphql/mutation'; import { SiOpenaccess, SiJsonwebtokens } from "react-icons/si";
import { MetaQuery } from '../graphql/queries'; import { MdSecurity } from "react-icons/md";
import { RiSkullLine } from "react-icons/ri";
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";
import { NavLink, useNavigate, useLocation } from "react-router-dom";
import { useAuthContext } from "../contexts/AuthContext";
import { AdminLogout } from "../graphql/mutation";
import { MetaQuery } from "../graphql/queries";
interface SubRoutes {
name: string;
icon: IconType;
route: string;
}
interface LinkItemProps { interface LinkItemProps {
name: string; name: string;
icon: IconType; icon: IconType;
route: string; 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 ",
{ name: 'Users', icon: FiUsers, route: '/users' }, 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: "AUsers", icon: FiUsers, route: "/usersa" },
]; ];
interface SidebarProps extends BoxProps { interface SidebarProps extends BoxProps {
onClose: () => void; onClose: () => void;
} }
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 });
return ( const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
<Box return (
transition="3s ease" <Box
bg={useColorModeValue('white', 'gray.900')} transition="3s ease"
borderRight="1px" bg={useColorModeValue("white", "gray.900")}
borderRightColor={useColorModeValue('gray.200', 'gray.700')} borderRight="1px"
w={{ base: 'full', md: 60 }} borderRightColor={useColorModeValue("gray.200", "gray.700")}
pos="fixed" w={{ base: "full", md: 60 }}
h="full" pos="fixed"
{...rest} h="full"
> {...rest}
<Flex h="20" alignItems="center" mx="8" justifyContent="space-between"> >
<NavLink to="/"> <Flex h="20" alignItems="center" mx="18" justifyContent="space-between">
<Flex alignItems="center"> <Link to="/">
<Image <Flex alignItems="center">
src="https://authorizer.dev/images/logo.png" <Image
alt="logo" src="https://authorizer.dev/images/logo.png"
height="36px" alt="logo"
/> height="36px"
<Text fontSize="large" ml="2" letterSpacing="3"> />
AUTHORIZER <Text fontSize="large" ml="2" letterSpacing="3">
</Text> AUTHORIZER
</Flex> </Text>
</NavLink> </Flex>
<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} /> </Link>
</Flex> <CloseButton display={{ base: "flex", md: "none" }} onClick={onClose} />
{LinkItems.map((link) => ( </Flex>
<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', <Link key={link.name} to={link.route}>
}} <AccordionButton>
_focus={{ _boxShadow: 'none' }} <Text fontSize="md">
> <NavItem
<NavItem icon={FiCode}>API Playground</NavItem> icon={link.icon}
</Link> color={pathname === link.route ? "blue.500" : ""}
height={12}
ml={-1}
mb={isNotSmallerScreen ? -1 : -4}
w={isNotSmallerScreen ? "100%" : "310%"}
>
{link.name}
<Box display={{ base: "none", md: "flex" }} ml={12}>
<FiChevronDown />
</Box>
</NavItem>
</Text>
</AccordionButton>
<AccordionPanel>
{link.subRoutes?.map((sublink) => (
<NavLink
key={sublink.name}
to={sublink.route}
onClick={onClose}
>
{" "}
<Text fontSize="xs" ml={2}>
<NavItem
icon={sublink.icon}
color={pathname === sublink.route ? "blue.500" : ""}
height={8}
>
{sublink.name}
</NavItem>{" "}
</Text>
</NavLink>
))}
</AccordionPanel>
</Link>
) : (
<Link key={link.name} to={link.route}>
{" "}
<Text fontSize="md" w="100%" mt={-2}>
<NavItem
icon={link.icon}
color={pathname === link.route ? "blue.500" : ""}
height={12}
onClick={onClose}
>
{link.name}
</NavItem>{" "}
</Text>
</Link>
)
)}
<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}
</Box> </Text>
); </Flex>
)}
</Box>
);
}; };
interface NavItemProps extends FlexProps { interface NavItemProps extends FlexProps {
icon: IconType; icon: IconType;
children: ReactText; children: ReactText;
} }
export const NavItem = ({ icon, children, ...rest }: NavItemProps) => { export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
return ( return (
<Flex <Flex
align="center" align="center"
p="3" p="3"
mx="3" mx="3"
borderRadius="md" borderRadius="md"
role="group" role="group"
cursor="pointer" cursor="pointer"
_hover={{ _hover={{
bg: 'blue.500', bg: "blue.500",
color: 'white', color: "white",
}} }}
{...rest} {...rest}
> >
{icon && ( {icon && (
<Icon <Icon
mr="4" mr="4"
fontSize="16" fontSize="16"
_groupHover={{ _groupHover={{
color: 'white', color: "white",
}} }}
as={icon} as={icon}
/> />
)} )}
{children} {children}
</Flex> </Flex>
); );
}; };
interface MobileProps extends FlexProps { interface MobileProps extends FlexProps {
onOpen: () => void; onOpen: () => void;
} }
export const MobileNav = ({ onOpen, ...rest }: MobileProps) => { export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
const [_, logout] = useMutation(AdminLogout); const [_, logout] = useMutation(AdminLogout);
const { setIsLoggedIn } = useAuthContext(); const { setIsLoggedIn } = useAuthContext();
const navigate = useNavigate(); const navigate = useNavigate();
const handleLogout = async () => { const handleLogout = async () => {
await logout(); await logout();
setIsLoggedIn(false); setIsLoggedIn(false);
navigate('/', { replace: true }); navigate("/", { replace: true });
}; };
return ( return (
<Flex <Flex
ml={{ base: 0, md: 60 }} ml={{ base: 0, md: 60 }}
px={{ base: 4, md: 4 }} px={{ base: 4, md: 4 }}
height="20" height="20"
position="fixed" position="fixed"
right="0" right="0"
left="0" left="0"
alignItems="center" alignItems="center"
bg={useColorModeValue('white', 'gray.900')} bg={useColorModeValue("white", "gray.900")}
borderBottomWidth="1px" borderBottomWidth="1px"
borderBottomColor={useColorModeValue('gray.200', 'gray.700')} borderBottomColor={useColorModeValue("gray.200", "gray.700")}
justifyContent={{ base: 'space-between', md: 'flex-end' }} justifyContent={{ base: "space-between", md: "flex-end" }}
zIndex={99} zIndex={99}
{...rest} {...rest}
> >
<IconButton <IconButton
display={{ base: 'flex', md: 'none' }} display={{ base: "flex", md: "none" }}
onClick={onOpen} onClick={onOpen}
variant="outline" variant="outline"
aria-label="open menu" aria-label="open menu"
icon={<FiMenu />} icon={<FiMenu />}
/> />
<Image <Image
src="https://authorizer.dev/images/logo.png" src="https://authorizer.dev/images/logo.png"
alt="logo" alt="logo"
height="36px" height="36px"
display={{ base: 'flex', md: 'none' }} display={{ base: "flex", md: "none" }}
/> />
<HStack spacing={{ base: '0', md: '6' }}> <HStack spacing={{ base: "0", md: "6" }}>
<Flex alignItems={'center'}> <Flex alignItems={"center"}>
<Menu> <Menu>
<MenuButton <MenuButton
py={2} py={2}
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" }}
alignItems="flex-start" alignItems="flex-start"
spacing="1px" spacing="1px"
ml="2" ml="2"
> >
<Text fontSize="sm">Admin</Text> <Text fontSize="sm">Admin</Text>
</VStack> </VStack>
<Box display={{ base: 'none', md: 'flex' }}> <Box display={{ base: "none", md: "flex" }}>
<FiChevronDown /> <FiChevronDown />
</Box> </Box>
</HStack> </HStack>
</MenuButton> </MenuButton>
<MenuList <MenuList
bg={useColorModeValue('white', 'gray.900')} bg={useColorModeValue("white", "gray.900")}
borderColor={useColorModeValue('gray.200', 'gray.700')} borderColor={useColorModeValue("gray.200", "gray.700")}
> >
<MenuItem onClick={handleLogout}>Sign out</MenuItem> <MenuItem onClick={handleLogout}>Sign out</MenuItem>
</MenuList> </MenuList>
</Menu> </Menu>
</Flex> </Flex>
</HStack> </HStack>
</Flex> </Flex>
); );
}; };

1139
dashboard/src/pages/Environment.tsx
View File

File diff suppressed because it is too large Load Diff

2
dashboard/src/routes/index.tsx
View File

@ -14,6 +14,7 @@ export const AppRoutes = () => {
if (isLoggedIn) { if (isLoggedIn) {
return ( return (
<div>
<Suspense fallback={<></>}> <Suspense fallback={<></>}>
<Routes> <Routes>
<Route <Route
@ -32,6 +33,7 @@ export const AppRoutes = () => {
</Route> </Route>
</Routes> </Routes>
</Suspense> </Suspense>
</div>
); );
} }
return ( return (