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

fix: app style remove unnecessary code

Browse Source
This commit is contained in:
anik-ghosh-au7 2022-05-14 20:20:21 +05:30
parent 3e51a7bd01
commit ed855a274a
9 changed files with 702 additions and 704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dashboard/src/App.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Fragment } 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';
@ -19,15 +19,13 @@ const queryClient = createClient({
requestPolicy: 'network-only', requestPolicy: 'network-only',
}); });
const theme = extendTheme({ const theme = extendTheme({
styles: { styles: {
global: { global: {
'html, body, #root': { 'html, body, #root': {
fontFamily: 'Avenir, Helvetica, Arial, sans-serif', fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
height: '100%', height: '100%',
outline: "none" outline: 'none',
}, },
}, },
}, },
@ -41,15 +39,15 @@ const theme = extendTheme({
export default function App() { export default function App() {
return ( return (
<Fragment> <Fragment>
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<Provider value={queryClient}> <Provider value={queryClient}>
<BrowserRouter basename="/dashboard"> <BrowserRouter basename="/dashboard">
<AuthContextProvider> <AuthContextProvider>
<AppRoutes /> <AppRoutes />
</AuthContextProvider> </AuthContextProvider>
</BrowserRouter> </BrowserRouter>
</Provider> </Provider>
</ChakraProvider> </ChakraProvider>
</Fragment> </Fragment>
); );
} }

364
dashboard/src/components/EnvComponents/OAuthConfig.tsx
View File

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

79
dashboard/src/components/EnvComponents/SocialMediaLogin.tsx
View File

@ -1,79 +0,0 @@
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;

149
dashboard/src/components/EnvComponents/UICustomization.tsx
View File

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

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

@ -21,10 +21,16 @@ import {
AccordionButton, AccordionButton,
AccordionPanel, AccordionPanel,
AccordionItem, AccordionItem,
AccordionIcon,
useMediaQuery, useMediaQuery,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { FiUser, FiCode, FiSettings, FiMenu, FiUsers, FiChevronDown } from 'react-icons/fi'; import {
FiUser,
FiCode,
FiSettings,
FiMenu,
FiUsers,
FiChevronDown,
} from 'react-icons/fi';
import { BiCustomize } from 'react-icons/bi'; import { BiCustomize } from 'react-icons/bi';
import { AiOutlineKey } from 'react-icons/ai'; import { AiOutlineKey } from 'react-icons/ai';
import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si'; import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si';
@ -117,20 +123,30 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)'); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
return ( return (
<Box <Box
transition='3s ease' transition="3s ease"
bg={useColorModeValue('white', 'gray.900')} bg={useColorModeValue('white', 'gray.900')}
borderRight='1px' borderRight="1px"
borderRightColor={useColorModeValue('gray.200', 'gray.700')} borderRightColor={useColorModeValue('gray.200', 'gray.700')}
w={{ base: 'full', md: 60 }} w={{ base: 'full', md: 60 }}
pos='fixed' pos="fixed"
h='full' h="full"
{...rest} {...rest}
> >
<Flex h='20' alignItems='center' mx='18' justifyContent='space-between' flexDirection='column'> <Flex
<NavLink to='/'> h="20"
<Flex alignItems='center' mt='6'> alignItems="center"
<Image src='https://authorizer.dev/images/logo.png' alt='logo' height='36px' /> mx="18"
<Text fontSize='large' ml='2' letterSpacing='3'> justifyContent="space-between"
flexDirection="column"
>
<NavLink to="/">
<Flex alignItems="center" mt="6">
<Image
src="https://authorizer.dev/images/logo.png"
alt="logo"
height="36px"
/>
<Text fontSize="large" ml="2" letterSpacing="3">
AUTHORIZER AUTHORIZER
</Text> </Text>
</Flex> </Flex>
@ -139,12 +155,12 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
</Flex> </Flex>
<Accordion defaultIndex={[0]} allowMultiple> <Accordion defaultIndex={[0]} allowMultiple>
<AccordionItem textAlign='center' border='none' w='100%'> <AccordionItem textAlign="center" border="none" w="100%">
{LinkItems.map((link) => {LinkItems.map((link) =>
link?.subRoutes ? ( link?.subRoutes ? (
<div key={link.name}> <div key={link.name}>
<AccordionButton> <AccordionButton _focus={{ boxShadow: 'none' }}>
<Text as='div' fontSize='md'> <Text as="div" fontSize="md">
<NavItem <NavItem
icon={link.icon} icon={link.icon}
color={pathname === link.route ? 'blue.500' : ''} color={pathname === link.route ? 'blue.500' : ''}
@ -165,10 +181,18 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
</AccordionButton> </AccordionButton>
<AccordionPanel> <AccordionPanel>
{link.subRoutes?.map((sublink) => ( {link.subRoutes?.map((sublink) => (
<NavLink key={sublink.name} to={sublink.route} onClick={onClose}> <NavLink
key={sublink.name}
to={sublink.route}
onClick={onClose}
>
{' '} {' '}
<Text as='div' fontSize='xs' ml={2}> <Text as="div" fontSize="xs" ml={2}>
<NavItem icon={sublink.icon} color={pathname === sublink.route ? 'blue.500' : ''} height={8}> <NavItem
icon={sublink.icon}
color={pathname === sublink.route ? 'blue.500' : ''}
height={8}
>
{sublink.name} {sublink.name}
</NavItem>{' '} </NavItem>{' '}
</Text> </Text>
@ -179,7 +203,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
) : ( ) : (
<NavLink key={link.name} to={link.route}> <NavLink key={link.name} to={link.route}>
{' '} {' '}
<Text as='div' fontSize='md' w='100%' mt={-2}> <Text as="div" fontSize="md" w="100%" mt={-2}>
<NavItem <NavItem
icon={link.icon} icon={link.icon}
color={pathname === link.route ? 'blue.500' : ''} color={pathname === link.route ? 'blue.500' : ''}
@ -193,8 +217,8 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
) )
)} )}
<Link <Link
href='/playground' href="/playground"
target='_blank' target="_blank"
style={{ style={{
textDecoration: 'none', textDecoration: 'none',
}} }}
@ -206,9 +230,16 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
</Accordion> </Accordion>
{data?.meta?.version && ( {data?.meta?.version && (
<Flex alignContent='center'> <Flex alignContent="center">
{' '} {' '}
<Text color='gray.400' fontSize='sm' textAlign='center' position='absolute' bottom='5' left='7'> <Text
color="gray.400"
fontSize="sm"
textAlign="center"
position="absolute"
bottom="5"
left="7"
>
Current Version: {data.meta.version} Current Version: {data.meta.version}
</Text> </Text>
</Flex> </Flex>
@ -224,12 +255,12 @@ interface NavItemProps extends FlexProps {
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',
@ -238,8 +269,8 @@ export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
> >
{icon && ( {icon && (
<Icon <Icon
mr='4' mr="4"
fontSize='16' fontSize="16"
_groupHover={{ _groupHover={{
color: 'white', color: 'white',
}} }}
@ -269,13 +300,13 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
<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}
@ -284,26 +315,35 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
<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 py={2} transition='all 0.3s' _focus={{ boxShadow: 'none' }}> <MenuButton
py={2}
transition="all 0.3s"
_focus={{ boxShadow: 'none' }}
>
<HStack mr={5}> <HStack mr={5}>
<FiUser /> <FiUser />
<VStack display={{ base: 'none', md: 'flex' }} alignItems='flex-start' spacing='1px' ml='2'> <VStack
<Text fontSize='sm'>Admin</Text> display={{ base: 'none', md: 'flex' }}
alignItems="flex-start"
spacing="1px"
ml="2"
>
<Text fontSize="sm">Admin</Text>
</VStack> </VStack>
<Box display={{ base: 'none', md: 'flex' }}> <Box display={{ base: 'none', md: 'flex' }}>
<FiChevronDown /> <FiChevronDown />

14
dashboard/src/constants.ts
View File

@ -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',
};

8
dashboard/src/index.tsx
View File

@ -1,6 +1,10 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './App'; import App from './App';
import 'focus-visible/dist/focus-visible';
ReactDOM.render(<div><App /></div>, document.getElementById('root')); ReactDOM.render(
<div>
<App />
</div>,
document.getElementById('root')
);

41
dashboard/src/layouts/AuthLayout.tsx
View File

@ -1,4 +1,11 @@
import { Box, Flex, Image, Text, Spinner, useMediaQuery, Stack } 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';
@ -7,11 +14,20 @@ 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)'); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
return ( return (
<Flex h='100vh' bg='gray.100' alignItems='center' justifyContent='center' direction={['column', 'column']}> <Flex
{/* <Flex alignItems='center' direction={['column', 'column']} ml={isNotSmallerScreen ? 0 : 8}> */} h="100vh"
<Flex alignItems='center'> bg="gray.100"
<Image src='https://authorizer.dev/images/logo.png' alt='logo' height='50' /> alignItems="center"
<Text fontSize='x-large' ml='3' letterSpacing='3'> justifyContent="center"
direction={['column', 'column']}
>
<Flex alignItems="center" maxW="100%">
<Image
src="https://authorizer.dev/images/logo.png"
alt="logo"
height="50"
/>
<Text fontSize="x-large" ml="3" letterSpacing="3">
AUTHORIZER AUTHORIZER
</Text> </Text>
</Flex> </Flex>
@ -20,15 +36,22 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
<Spinner /> <Spinner />
) : ( ) : (
<> <>
<Box p='6' m='5' rounded='5' bg='white' w={isNotSmallerScreen ? '500px' : '450px'} 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">
Current Version: {data.meta.version} Current Version: {data.meta.version}
</Text> </Text>
</> </>
)} )}
{/* </Flex> */}
</Flex> </Flex>
); );
} }

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

@ -1,319 +1,318 @@
import React, { useEffect } from "react"; import React, { useEffect } from 'react';
import { useParams } from "react-router-dom"; import { useParams } from 'react-router-dom';
import { Box, Flex, Stack, Button, useToast } from "@chakra-ui/react"; import { Box, Flex, Stack, Button, useToast } from '@chakra-ui/react';
import { useClient } from "urql"; import { useClient } from 'urql';
import { FaSave } from "react-icons/fa"; import { FaSave } from 'react-icons/fa';
import _ from "lodash"; import _ from 'lodash';
import { EnvVariablesQuery } from "../graphql/queries"; import { EnvVariablesQuery } from '../graphql/queries';
import { import {
SelectInputType, SelectInputType,
HiddenInputType, HiddenInputType,
TextInputType, TextInputType,
HMACEncryptionType, HMACEncryptionType,
RSAEncryptionType, RSAEncryptionType,
ECDSAEncryptionType, ECDSAEncryptionType,
envVarTypes, envVarTypes,
} from "../constants"; envSubViews,
import { UpdateEnvVariables } from "../graphql/mutation"; } from '../constants';
import { getObjectDiff, capitalizeFirstLetter } from "../utils"; import { UpdateEnvVariables } from '../graphql/mutation';
// Component inputs import { getObjectDiff, capitalizeFirstLetter } from '../utils';
import OAuthConfig from "../components/EnvComponents/OAuthConfig"; import OAuthConfig from '../components/EnvComponents/OAuthConfig';
import Roles from "../components/EnvComponents/Roles"; import Roles from '../components/EnvComponents/Roles';
import JWTConfigurations from "../components/EnvComponents/JWTConfiguration"; import JWTConfigurations from '../components/EnvComponents/JWTConfiguration';
import SessionStorage from "../components/EnvComponents/SessionStorage"; import SessionStorage from '../components/EnvComponents/SessionStorage';
import EmailConfigurations from "../components/EnvComponents/EmailConfiguration"; import EmailConfigurations from '../components/EnvComponents/EmailConfiguration';
import DomainWhiteListing from "../components/EnvComponents/DomainWhitelisting"; import DomainWhiteListing from '../components/EnvComponents/DomainWhitelisting';
import OrganizationInfo from "../components/EnvComponents/OrganizationInfo"; import OrganizationInfo from '../components/EnvComponents/OrganizationInfo';
import AccessToken from "../components/EnvComponents/AccessToken"; import AccessToken from '../components/EnvComponents/AccessToken';
import UICustomization from "../components/EnvComponents/UICustomization" import UICustomization from '../components/EnvComponents/UICustomization';
import SecurityAdminSecret from "../components/EnvComponents/SecurityAdminSecret"; import SecurityAdminSecret from '../components/EnvComponents/SecurityAdminSecret';
import DatabaseCredentials from "../components/EnvComponents/DatabaseCredentials"; import DatabaseCredentials from '../components/EnvComponents/DatabaseCredentials';
const 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<
Record<string, string | boolean> Record<string, string | boolean>
>({ >({
value: "", value: '',
disableInputField: true, disableInputField: true,
}); });
const [loading, setLoading] = React.useState<boolean>(true); const [loading, setLoading] = React.useState<boolean>(true);
const [envVariables, setEnvVariables] = React.useState<envVarTypes>({ const [envVariables, setEnvVariables] = React.useState<envVarTypes>({
GOOGLE_CLIENT_ID: "", GOOGLE_CLIENT_ID: '',
GOOGLE_CLIENT_SECRET: "", GOOGLE_CLIENT_SECRET: '',
GITHUB_CLIENT_ID: "", GITHUB_CLIENT_ID: '',
GITHUB_CLIENT_SECRET: "", GITHUB_CLIENT_SECRET: '',
FACEBOOK_CLIENT_ID: "", FACEBOOK_CLIENT_ID: '',
FACEBOOK_CLIENT_SECRET: "", FACEBOOK_CLIENT_SECRET: '',
ROLES: [], ROLES: [],
DEFAULT_ROLES: [], DEFAULT_ROLES: [],
PROTECTED_ROLES: [], PROTECTED_ROLES: [],
JWT_TYPE: "", JWT_TYPE: '',
JWT_SECRET: "", JWT_SECRET: '',
JWT_ROLE_CLAIM: "", JWT_ROLE_CLAIM: '',
JWT_PRIVATE_KEY: "", JWT_PRIVATE_KEY: '',
JWT_PUBLIC_KEY: "", JWT_PUBLIC_KEY: '',
REDIS_URL: "", REDIS_URL: '',
SMTP_HOST: "", SMTP_HOST: '',
SMTP_PORT: "", SMTP_PORT: '',
SMTP_USERNAME: "", SMTP_USERNAME: '',
SMTP_PASSWORD: "", SMTP_PASSWORD: '',
SENDER_EMAIL: "", SENDER_EMAIL: '',
ALLOWED_ORIGINS: [], ALLOWED_ORIGINS: [],
ORGANIZATION_NAME: "", ORGANIZATION_NAME: '',
ORGANIZATION_LOGO: "", ORGANIZATION_LOGO: '',
CUSTOM_ACCESS_TOKEN_SCRIPT: "", CUSTOM_ACCESS_TOKEN_SCRIPT: '',
ADMIN_SECRET: "", ADMIN_SECRET: '',
DISABLE_LOGIN_PAGE: false, DISABLE_LOGIN_PAGE: false,
DISABLE_MAGIC_LINK_LOGIN: false, DISABLE_MAGIC_LINK_LOGIN: false,
DISABLE_EMAIL_VERIFICATION: false, DISABLE_EMAIL_VERIFICATION: false,
DISABLE_BASIC_AUTHENTICATION: false, DISABLE_BASIC_AUTHENTICATION: false,
DISABLE_SIGN_UP: false, DISABLE_SIGN_UP: false,
OLD_ADMIN_SECRET: "", OLD_ADMIN_SECRET: '',
DATABASE_NAME: "", DATABASE_NAME: '',
DATABASE_TYPE: "", DATABASE_TYPE: '',
DATABASE_URL: "", DATABASE_URL: '',
ACCESS_TOKEN_EXPIRY_TIME: "", ACCESS_TOKEN_EXPIRY_TIME: '',
}); });
const [fieldVisibility, setFieldVisibility] = React.useState< const [fieldVisibility, setFieldVisibility] = React.useState<
Record<string, boolean> Record<string, boolean>
>({ >({
GOOGLE_CLIENT_SECRET: false, GOOGLE_CLIENT_SECRET: false,
GITHUB_CLIENT_SECRET: false, GITHUB_CLIENT_SECRET: false,
FACEBOOK_CLIENT_SECRET: false, FACEBOOK_CLIENT_SECRET: false,
JWT_SECRET: false, JWT_SECRET: false,
SMTP_PASSWORD: false, SMTP_PASSWORD: false,
ADMIN_SECRET: false, ADMIN_SECRET: false,
OLD_ADMIN_SECRET: false, OLD_ADMIN_SECRET: false,
}); });
const { sec } = useParams(); 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,
ADMIN_SECRET: "", ADMIN_SECRET: '',
}); });
setAdminSecret({ setAdminSecret({
value: "", value: '',
disableInputField: true, disableInputField: true,
}); });
} }
useEffect(() => { useEffect(() => {
getData(); getData();
}, [sec]); }, [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) {
setAdminSecret({ setAdminSecret({
...adminSecret, ...adminSecret,
value: event.target.value, value: event.target.value,
disableInputField: false, disableInputField: false,
}); });
} else { } else {
setAdminSecret({ setAdminSecret({
...adminSecret, ...adminSecret,
value: event.target.value, value: event.target.value,
disableInputField: true, disableInputField: true,
}); });
} }
if (envVariables.ADMIN_SECRET !== "") { if (envVariables.ADMIN_SECRET !== '') {
setEnvVariables({ ...envVariables, ADMIN_SECRET: "" }); setEnvVariables({ ...envVariables, ADMIN_SECRET: '' });
} }
}; };
const saveHandler = async () => { const saveHandler = async () => {
setLoading(true); setLoading(true);
const { const {
data: { _env: envData }, data: { _env: envData },
} = await client.query(EnvVariablesQuery).toPromise(); } = await client.query(EnvVariablesQuery).toPromise();
const diff = getObjectDiff(envVariables, envData); const diff = getObjectDiff(envVariables, envData);
const updatedEnvVariables = diff.reduce( const updatedEnvVariables = diff.reduce(
(acc: any, property: string) => ({ (acc: any, property: string) => ({
...acc, ...acc,
// @ts-ignore // @ts-ignore
[property]: envVariables[property], [property]: envVariables[property],
}), }),
{} {}
); );
if ( if (
updatedEnvVariables[HiddenInputType.ADMIN_SECRET] === "" || updatedEnvVariables[HiddenInputType.ADMIN_SECRET] === '' ||
updatedEnvVariables[HiddenInputType.OLD_ADMIN_SECRET] !== updatedEnvVariables[HiddenInputType.OLD_ADMIN_SECRET] !==
envData.ADMIN_SECRET envData.ADMIN_SECRET
) { ) {
delete updatedEnvVariables.OLD_ADMIN_SECRET; delete updatedEnvVariables.OLD_ADMIN_SECRET;
delete updatedEnvVariables.ADMIN_SECRET; delete updatedEnvVariables.ADMIN_SECRET;
} }
delete updatedEnvVariables.DATABASE_URL; delete updatedEnvVariables.DATABASE_URL;
delete updatedEnvVariables.DATABASE_TYPE; delete updatedEnvVariables.DATABASE_TYPE;
delete updatedEnvVariables.DATABASE_NAME; delete updatedEnvVariables.DATABASE_NAME;
const res = await client const res = await client
.mutation(UpdateEnvVariables, { params: updatedEnvVariables }) .mutation(UpdateEnvVariables, { params: updatedEnvVariables })
.toPromise(); .toPromise();
setLoading(false); setLoading(false);
if (res.error) { if (res.error) {
toast({ toast({
title: capitalizeFirstLetter(res.error.message), title: capitalizeFirstLetter(res.error.message),
isClosable: true, isClosable: true,
status: "error", status: 'error',
position: "bottom-right", position: 'bottom-right',
}); });
return; return;
} }
setAdminSecret({ setAdminSecret({
value: "", value: '',
disableInputField: true, disableInputField: true,
}); });
getData(); getData();
toast({ toast({
title: `Successfully updated ${ title: `Successfully updated ${
Object.keys(updatedEnvVariables).length Object.keys(updatedEnvVariables).length
} variables`, } variables`,
isClosable: true, isClosable: true,
status: "success", status: 'success',
position: "bottom-right", position: 'bottom-right',
}); });
}; };
const getCorrectScreen = (tab: any) => { const renderComponent = (tab: any) => {
switch (tab) { switch (tab) {
case "instance-info": case envSubViews.INSTANCE_INFO:
return ( return (
<OAuthConfig <OAuthConfig
envVariables={envVariables} envVariables={envVariables}
setVariables={setEnvVariables} setVariables={setEnvVariables}
fieldVisibility={fieldVisibility} fieldVisibility={fieldVisibility}
setFieldVisibility={setFieldVisibility} setFieldVisibility={setFieldVisibility}
/> />
); );
case envSubViews.ROLES:
case "roles": return (
return ( <Roles variables={envVariables} setVariables={setEnvVariables} />
<Roles variables={envVariables} setVariables={setEnvVariables} /> );
); case envSubViews.JWT_CONFIG:
case "jwt-config": return (
return ( <JWTConfigurations
<JWTConfigurations variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} fieldVisibility={fieldVisibility}
fieldVisibility={fieldVisibility} setFieldVisibility={setFieldVisibility}
setFieldVisibility={setFieldVisibility} SelectInputType={SelectInputType.JWT_TYPE}
SelectInputType={SelectInputType.JWT_TYPE} HMACEncryptionType={HMACEncryptionType}
HMACEncryptionType={HMACEncryptionType} RSAEncryptionType={RSAEncryptionType}
RSAEncryptionType={RSAEncryptionType} ECDSAEncryptionType={ECDSAEncryptionType}
ECDSAEncryptionType={ECDSAEncryptionType} getData={getData}
getData={getData} />
/> );
); case envSubViews.SESSION_STORAGE:
case "session-storage": return (
return ( <SessionStorage
<SessionStorage variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} RedisURL={TextInputType.REDIS_URL}
RedisURL={TextInputType.REDIS_URL} />
/> );
); case envSubViews.EMAIL_CONFIG:
case "email-config": return (
return ( <EmailConfigurations
<EmailConfigurations variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} fieldVisibility={fieldVisibility}
fieldVisibility={fieldVisibility} setFieldVisibility={setFieldVisibility}
setFieldVisibility={setFieldVisibility} />
/> );
); case envSubViews.WHITELIST_VARIABLES:
case "whitelist-variables": return (
return ( <DomainWhiteListing
<DomainWhiteListing variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} />
/> );
); case envSubViews.ORGANIZATION_INFO:
case "organization-info": return (
return ( <OrganizationInfo
<OrganizationInfo variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} />
/> );
); case envSubViews.ACCESS_TOKEN:
case "access-token": return (
return ( <AccessToken
<AccessToken variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} />
/> );
); case envSubViews.UI_CUSTOMIZATION:
case "ui-customization": return (
return ( <UICustomization
<UICustomization variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} />
/> );
); case envSubViews.ADMIN_SECRET:
case "admin-secret": return (
return ( <SecurityAdminSecret
<SecurityAdminSecret variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} fieldVisibility={fieldVisibility}
fieldVisibility={fieldVisibility} setFieldVisibility={setFieldVisibility}
setFieldVisibility={setFieldVisibility} validateAdminSecretHandler={validateAdminSecretHandler}
validateAdminSecretHandler={validateAdminSecretHandler} adminSecret={adminSecret}
adminSecret={adminSecret} />
/> );
); case envSubViews.DB_CRED:
case "db-cred": return (
return ( <DatabaseCredentials
<DatabaseCredentials variables={envVariables}
variables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} />
/> );
); default:
default: return (
return ( <OAuthConfig
<OAuthConfig envVariables={envVariables}
envVariables={envVariables} setVariables={setEnvVariables}
setVariables={setEnvVariables} fieldVisibility={fieldVisibility}
fieldVisibility={fieldVisibility} setFieldVisibility={setFieldVisibility}
setFieldVisibility={setFieldVisibility} />
/> );
); }
} };
}; return (
return ( <Box m="5" py="5" px="10" bg="white" rounded="md">
<Box m="5" py="5" px="10" bg="white" rounded="md"> {renderComponent(sec)}
{getCorrectScreen(sec)} <Stack spacing={6} padding="1% 0" mt={4}>
<Stack spacing={6} padding="1% 0" mt={4}> <Flex justifyContent="end" alignItems="center">
<Flex justifyContent="end" alignItems="center"> <Button
<Button leftIcon={<FaSave />}
leftIcon={<FaSave />} colorScheme="blue"
colorScheme="blue" variant="solid"
variant="solid" onClick={saveHandler}
onClick={saveHandler} isDisabled={loading}
isDisabled={loading} >
> Save
Save </Button>
</Button> </Flex>
</Flex> </Stack>
</Stack> </Box>
</Box> );
);
}; };
export default Environment; export default Environment;