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

Merge pull request #259 from authorizerdev/chore/add-prettier-dashboard

Browse Source 
chore(dashboard): add prettier
This commit is contained in:
Lakhan Samani 2022-10-02 22:38:06 +05:30 committed by GitHub
commit c32a7fa1e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 1759 additions and 650 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dashboard/.prettierrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"useTabs": false
}

1191
dashboard/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
dashboard/package.json
View File

@ -5,7 +5,8 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js", "build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js",
"start": "NODE_ENV=development node ./esbuild.config.js" "start": "NODE_ENV=development node ./esbuild.config.js",
"format": "prettier --write --use-tabs 'src/**/*.(ts|tsx|js|jsx)'"
}, },
"keywords": [], "keywords": [],
"author": "Lakhan Samani", "author": "Lakhan Samani",
@ -35,6 +36,7 @@
"urql": "^2.0.6" "urql": "^2.0.6"
}, },
"devDependencies": { "devDependencies": {
"@types/react-email-editor": "^1.1.7" "@types/react-email-editor": "^1.1.7",
"prettier": "2.7.1"
} }
} }

2
dashboard/src/components/EditUserModal.tsx
View File

@ -82,7 +82,7 @@ const EditUserModal = ({
// @ts-ignore // @ts-ignore
[property]: userData[property], [property]: userData[property],
}), }),
{} {},
); );
const res = await client const res = await client
.mutation(UpdateUser, { params: { ...updatedUserData, id: userData.id } }) .mutation(UpdateUser, { params: { ...updatedUserData, id: userData.id } })

28
dashboard/src/components/EnvComponents/AccessToken.tsx
View File

@ -1,28 +1,28 @@
import React from "react"; import React from 'react';
import { Flex, Stack, Text, useMediaQuery } from "@chakra-ui/react"; import { Flex, Stack, Text, useMediaQuery } from '@chakra-ui/react';
import InputField from "../../components/InputField"; import InputField from '../../components/InputField';
import { TextInputType, TextAreaInputType } from "../../constants"; import { TextInputType, TextAreaInputType } from '../../constants';
const AccessToken = ({ variables, setVariables }: any) => { const AccessToken = ({ variables, setVariables }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); 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}>
Access Token Access Token
</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 <Flex
w={isNotSmallerScreen ? "30%" : "50%"} w={isNotSmallerScreen ? '30%' : '50%'}
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
<Text fontSize="sm">Access Token Expiry Time:</Text> <Text fontSize="sm">Access Token Expiry Time:</Text>
</Flex> </Flex>
<Flex <Flex
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}
@ -33,9 +33,9 @@ const AccessToken = ({ variables, setVariables }: any) => {
/> />
</Flex> </Flex>
</Flex> </Flex>
<Flex direction={isNotSmallerScreen ? "row" : "column"}> <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
<Flex <Flex
w={isNotSmallerScreen ? "30%" : "60%"} w={isNotSmallerScreen ? '30%' : '60%'}
justifyContent="start" justifyContent="start"
direction="column" direction="column"
> >
@ -45,8 +45,8 @@ const AccessToken = ({ variables, setVariables }: any) => {
</Text> </Text>
</Flex> </Flex>
<Flex <Flex
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
variables={variables} variables={variables}

18
dashboard/src/components/EnvComponents/DomainWhitelisting.tsx
View File

@ -1,24 +1,24 @@
import React from "react"; import React from 'react';
import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react"; import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
import InputField from "../../components/InputField"; import InputField from '../../components/InputField';
import { ArrayInputType} from "../../constants"; import { ArrayInputType } from '../../constants';
const DomainWhiteListing = ({ variables, setVariables }: any) => { const DomainWhiteListing = ({ variables, setVariables }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); 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}>
Domain White Listing Domain White Listing
</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">Allowed Origins:</Text> <Text fontSize="sm">Allowed Origins:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
variables={variables} variables={variables}

46
dashboard/src/components/EnvComponents/EmailConfiguration.tsx
View File

@ -1,28 +1,28 @@
import React from "react"; import React from 'react';
import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react"; import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
import InputField from "../../components/InputField"; import InputField from '../../components/InputField';
import { TextInputType, HiddenInputType} from "../../constants"; import { TextInputType, HiddenInputType } from '../../constants';
const EmailConfigurations = ({ const EmailConfigurations = ({
variables, variables,
setVariables, setVariables,
fieldVisibility, fieldVisibility,
setFieldVisibility, setFieldVisibility,
}: any) => { }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); 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}>
Email Configurations Email Configurations
</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">SMTP Host:</Text> <Text fontSize="sm">SMTP Host:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}
@ -32,13 +32,13 @@ const EmailConfigurations = ({
/> />
</Center> </Center>
</Flex> </Flex>
<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">SMTP Port:</Text> <Text fontSize="sm">SMTP Port:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}
@ -48,17 +48,17 @@ const EmailConfigurations = ({
/> />
</Center> </Center>
</Flex> </Flex>
<Flex direction={isNotSmallerScreen ? "row" : "column"}> <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
<Flex <Flex
w={isNotSmallerScreen ? "30%" : "40%"} w={isNotSmallerScreen ? '30%' : '40%'}
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
<Text fontSize="sm">SMTP Username:</Text> <Text fontSize="sm">SMTP Username:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}
@ -68,17 +68,17 @@ const EmailConfigurations = ({
/> />
</Center> </Center>
</Flex> </Flex>
<Flex direction={isNotSmallerScreen ? "row" : "column"}> <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
<Flex <Flex
w={isNotSmallerScreen ? "30%" : "40%"} w={isNotSmallerScreen ? '30%' : '40%'}
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
<Text fontSize="sm">SMTP Password:</Text> <Text fontSize="sm">SMTP Password:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}
@ -90,13 +90,13 @@ const EmailConfigurations = ({
/> />
</Center> </Center>
</Flex> </Flex>
<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">From Email:</Text> <Text fontSize="sm">From Email:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}

13
dashboard/src/components/EnvComponents/Features.tsx
View File

@ -1,12 +1,12 @@
import React from "react"; import React from 'react';
import { Divider, Flex, Stack, Text } from "@chakra-ui/react"; import { Divider, Flex, Stack, Text } from '@chakra-ui/react';
import InputField from "../InputField"; import InputField from '../InputField';
import { SwitchInputType } from "../../constants"; import { SwitchInputType } from '../../constants';
const Features = ({ variables, setVariables }: any) => { const Features = ({ variables, setVariables }: any) => {
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>
@ -135,7 +135,8 @@ const Features = ({ variables, setVariables }: any) => {
<Flex w="100%" alignItems="baseline" flexDir="column"> <Flex w="100%" alignItems="baseline" flexDir="column">
<Text fontSize="sm">Use Secure App Cookie:</Text> <Text fontSize="sm">Use Secure App Cookie:</Text>
<Text fontSize="x-small"> <Text fontSize="x-small">
Note: If you set this to insecure, it will set <code>sameSite</code> property of cookie to <code>lax</code> mode Note: If you set this to insecure, it will set{' '}
<code>sameSite</code> property of cookie to <code>lax</code> mode
</Text> </Text>
</Flex> </Flex>
<Flex justifyContent="start"> <Flex justifyContent="start">

2
dashboard/src/components/EnvComponents/JWTConfiguration.tsx
View File

@ -37,7 +37,7 @@ const JSTConfigurations = ({
JSON.stringify({ JSON.stringify({
type: variables.JWT_TYPE, type: variables.JWT_TYPE,
key: variables.JWT_PUBLIC_KEY || variables.JWT_SECRET, key: variables.JWT_PUBLIC_KEY || variables.JWT_SECRET,
}) }),
); );
toast({ toast({
title: `JWT config copied successfully`, title: `JWT config copied successfully`,

28
dashboard/src/components/EnvComponents/OrganizationInfo.tsx
View File

@ -1,28 +1,28 @@
import React from "react"; import React from 'react';
import { Flex, Stack, Center, Text, useMediaQuery } from "@chakra-ui/react"; import { Flex, Stack, Center, Text, useMediaQuery } from '@chakra-ui/react';
import InputField from "../InputField"; import InputField from '../InputField';
import { TextInputType } from "../../constants"; import { TextInputType } from '../../constants';
const OrganizationInfo = ({ variables, setVariables }: any) => { const OrganizationInfo = ({ variables, setVariables }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); 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}>
Organization Information Organization 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 <Flex
w={isNotSmallerScreen ? "30%" : "40%"} w={isNotSmallerScreen ? '30%' : '40%'}
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
<Text fontSize="sm">Organization Name:</Text> <Text fontSize="sm">Organization Name:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}
@ -32,17 +32,17 @@ const OrganizationInfo = ({ variables, setVariables }: any) => {
/> />
</Center> </Center>
</Flex> </Flex>
<Flex direction={isNotSmallerScreen ? "row" : "column"}> <Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
<Flex <Flex
w={isNotSmallerScreen ? "30%" : "40%"} w={isNotSmallerScreen ? '30%' : '40%'}
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
<Text fontSize="sm">Organization Logo:</Text> <Text fontSize="sm">Organization Logo:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}

36
dashboard/src/components/EnvComponents/SecurityAdminSecret.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React from 'react';
import { import {
Flex, Flex,
Stack, Stack,
@ -8,10 +8,10 @@ import {
InputGroup, InputGroup,
InputRightElement, InputRightElement,
useMediaQuery, useMediaQuery,
} from "@chakra-ui/react"; } from '@chakra-ui/react';
import { FaRegEyeSlash, FaRegEye } from "react-icons/fa"; import { FaRegEyeSlash, FaRegEye } from 'react-icons/fa';
import InputField from "../InputField"; import InputField from '../InputField';
import { HiddenInputType } from "../../constants"; import { HiddenInputType } from '../../constants';
const SecurityAdminSecret = ({ const SecurityAdminSecret = ({
variables, variables,
setVariables, setVariables,
@ -20,10 +20,10 @@ const SecurityAdminSecret = ({
validateAdminSecretHandler, validateAdminSecretHandler,
adminSecret, adminSecret,
}: any) => { }: any) => {
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
return ( return (
<div> <div>
{" "} {' '}
<Text fontSize="md" paddingTop="2%" fontWeight="bold"> <Text fontSize="md" paddingTop="2%" fontWeight="bold">
Security (Admin Secret) Security (Admin Secret)
</Text> </Text>
@ -35,20 +35,20 @@ const SecurityAdminSecret = ({
borderRadius="5px" borderRadius="5px"
> >
<Flex <Flex
marginTop={isNotSmallerScreen ? "3%" : "5%"} marginTop={isNotSmallerScreen ? '3%' : '5%'}
direction={isNotSmallerScreen ? "row" : "column"} direction={isNotSmallerScreen ? 'row' : 'column'}
> >
<Flex <Flex
mt={3} mt={3}
w={isNotSmallerScreen ? "30%" : "40%"} w={isNotSmallerScreen ? '30%' : '40%'}
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
<Text fontSize="sm">Old Admin Secret:</Text> <Text fontSize="sm">Old Admin Secret:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputGroup size="sm"> <InputGroup size="sm">
<Input <Input
@ -59,8 +59,8 @@ const SecurityAdminSecret = ({
onChange={(event: any) => validateAdminSecretHandler(event)} onChange={(event: any) => validateAdminSecretHandler(event)}
type={ type={
!fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET] !fieldVisibility[HiddenInputType.OLD_ADMIN_SECRET]
? "password" ? 'password'
: "text" : 'text'
} }
/> />
<InputRightElement <InputRightElement
@ -104,18 +104,18 @@ const SecurityAdminSecret = ({
</Flex> </Flex>
<Flex <Flex
paddingBottom="3%" paddingBottom="3%"
direction={isNotSmallerScreen ? "row" : "column"} direction={isNotSmallerScreen ? 'row' : 'column'}
> >
<Flex <Flex
w={isNotSmallerScreen ? "30%" : "50%"} w={isNotSmallerScreen ? '30%' : '50%'}
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
<Text fontSize="sm">New Admin Secret:</Text> <Text fontSize="sm">New Admin Secret:</Text>
</Flex> </Flex>
<Center <Center
w={isNotSmallerScreen ? "70%" : "100%"} w={isNotSmallerScreen ? '70%' : '100%'}
mt={isNotSmallerScreen ? "0" : "3"} mt={isNotSmallerScreen ? '0' : '3'}
> >
<InputField <InputField
borderRadius={5} borderRadius={5}

2
dashboard/src/components/GenerateKeysModal.tsx
View File

@ -167,7 +167,7 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
) : ( ) : (
<> <>
{Object.values(HMACEncryptionType).includes( {Object.values(HMACEncryptionType).includes(
stateVariables.JWT_TYPE stateVariables.JWT_TYPE,
) ? ( ) ? (
<Flex marginTop="8"> <Flex marginTop="8">
<Flex w="23%" justifyContent="start" alignItems="center"> <Flex w="23%" justifyContent="start" alignItems="center">

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

@ -64,7 +64,7 @@ const InputField = ({
const updateInputHandler = ( const updateInputHandler = (
type: string, type: string,
operation: any, operation: any,
role: string = '' role: string = '',
) => { ) => {
if (operation === ArrayInputOperations.APPEND) { if (operation === ArrayInputOperations.APPEND) {
if (inputData[type] !== '') { if (inputData[type] !== '') {
@ -78,7 +78,7 @@ const InputField = ({
} }
if (operation === ArrayInputOperations.REMOVE) { if (operation === ArrayInputOperations.REMOVE) {
let updatedEnvVars = variables[type].filter( let updatedEnvVars = variables[type].filter(
(item: string) => item !== role (item: string) => item !== role,
); );
setVariables({ setVariables({
...variables, ...variables,
@ -95,7 +95,7 @@ const InputField = ({
onChange={( onChange={(
event: Event & { event: Event & {
target: HTMLInputElement; target: HTMLInputElement;
} },
) => ) =>
setVariables({ setVariables({
...variables, ...variables,
@ -120,7 +120,7 @@ const InputField = ({
onChange={( onChange={(
event: Event & { event: Event & {
target: HTMLInputElement; target: HTMLInputElement;
} },
) => ) =>
setVariables({ setVariables({
...variables, ...variables,
@ -207,7 +207,7 @@ const InputField = ({
updateInputHandler( updateInputHandler(
inputType, inputType,
ArrayInputOperations.REMOVE, ArrayInputOperations.REMOVE,
role role,
) )
} }
/> />
@ -288,7 +288,7 @@ const InputField = ({
onChange={( onChange={(
event: Event & { event: Event & {
target: HTMLInputElement; target: HTMLInputElement;
} },
) => ) =>
setVariables({ setVariables({
...variables, ...variables,

2
dashboard/src/components/InviteMembersModal.tsx
View File

@ -304,7 +304,7 @@ const InviteMembersModal = ({
onClick={() => onClick={() =>
updateEmailListHandler( updateEmailListHandler(
ArrayInputOperations.REMOVE, ArrayInputOperations.REMOVE,
index index,
) )
} }
> >

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

@ -218,7 +218,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
</NavItem>{' '} </NavItem>{' '}
</Text> </Text>
</NavLink> </NavLink>
) ),
)} )}
<Link <Link
href="/playground" href="/playground"

10
dashboard/src/components/UpdateEmailTemplateModal.tsx
View File

@ -185,7 +185,7 @@ const UpdateEmailTemplate = ({
toast({ toast({
title: capitalizeFirstLetter( title: capitalizeFirstLetter(
res.data?._add_email_template?.message || res.data?._add_email_template?.message ||
res.data?._update_email_template?.message res.data?._update_email_template?.message,
), ),
isClosable: true, isClosable: true,
status: 'success', status: 'success',
@ -220,7 +220,7 @@ const UpdateEmailTemplate = ({
}, [isOpen]); }, [isOpen]);
useEffect(() => { useEffect(() => {
const updatedTemplateVariables = Object.entries( const updatedTemplateVariables = Object.entries(
emailTemplateVariables emailTemplateVariables,
).reduce((acc, [key, val]): any => { ).reduce((acc, [key, val]): any => {
if ( if (
(templateData[EmailTemplateInputDataFields.EVENT_NAME] !== (templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
@ -367,7 +367,7 @@ const UpdateEmailTemplate = ({
onChange={(e) => onChange={(e) =>
inputChangehandler( inputChangehandler(
EmailTemplateInputDataFields.EVENT_NAME, EmailTemplateInputDataFields.EVENT_NAME,
e.currentTarget.value e.currentTarget.value,
) )
} }
> >
@ -376,7 +376,7 @@ const UpdateEmailTemplate = ({
<option value={value} key={key}> <option value={value} key={key}>
{key} {key}
</option> </option>
) ),
)} )}
</Select> </Select>
</Flex> </Flex>
@ -401,7 +401,7 @@ const UpdateEmailTemplate = ({
onChange={(e) => onChange={(e) =>
inputChangehandler( inputChangehandler(
EmailTemplateInputDataFields.SUBJECT, EmailTemplateInputDataFields.SUBJECT,
e.currentTarget.value e.currentTarget.value,
) )
} }
/> />

26
dashboard/src/components/UpdateWebhookModal.tsx
View File

@ -126,13 +126,13 @@ const UpdateWebhookModal = ({
...initWebhookValidatorData, ...initWebhookValidatorData,
}); });
const [verifiedStatus, setVerifiedStatus] = useState<webhookVerifiedStatus>( const [verifiedStatus, setVerifiedStatus] = useState<webhookVerifiedStatus>(
webhookVerifiedStatus.PENDING webhookVerifiedStatus.PENDING,
); );
const inputChangehandler = ( const inputChangehandler = (
inputType: string, inputType: string,
value: any, value: any,
headerInputType: string = WebhookInputHeaderFields.KEY, headerInputType: string = WebhookInputHeaderFields.KEY,
headerIndex: number = 0 headerIndex: number = 0,
) => { ) => {
if ( if (
verifiedStatus !== webhookVerifiedStatus.PENDING && verifiedStatus !== webhookVerifiedStatus.PENDING &&
@ -238,7 +238,7 @@ const UpdateWebhookModal = ({
validator[WebhookInputDataFields.ENDPOINT] && validator[WebhookInputDataFields.ENDPOINT] &&
!validator[WebhookInputDataFields.HEADERS].some( !validator[WebhookInputDataFields.HEADERS].some(
(headerData: headersValidatorDataType) => (headerData: headersValidatorDataType) =>
!headerData.key || !headerData.value !headerData.key || !headerData.value,
) )
); );
}; };
@ -256,7 +256,7 @@ const UpdateWebhookModal = ({
(acc, data) => { (acc, data) => {
return data.key ? { ...acc, [data.key]: data.value } : acc; return data.key ? { ...acc, [data.key]: data.value } : acc;
}, },
{} {},
); );
if (Object.keys(headers).length) { if (Object.keys(headers).length) {
params[WebhookInputDataFields.HEADERS] = headers; params[WebhookInputDataFields.HEADERS] = headers;
@ -295,7 +295,7 @@ const UpdateWebhookModal = ({
} else if (res.data?._add_webhook || res.data?._update_webhook) { } else if (res.data?._add_webhook || res.data?._update_webhook) {
toast({ toast({
title: capitalizeFirstLetter( title: capitalizeFirstLetter(
res.data?._add_webhook?.message || res.data?._update_webhook?.message res.data?._add_webhook?.message || res.data?._update_webhook?.message,
), ),
isClosable: true, isClosable: true,
status: 'success', status: 'success',
@ -333,7 +333,7 @@ const UpdateWebhookModal = ({
setValidator({ setValidator({
...validator, ...validator,
[WebhookInputDataFields.HEADERS]: new Array( [WebhookInputDataFields.HEADERS]: new Array(
formattedHeadersData.length formattedHeadersData.length,
) )
.fill({}) .fill({})
.map(() => ({ ...initHeadersValidatorData })), .map(() => ({ ...initHeadersValidatorData })),
@ -406,7 +406,7 @@ const UpdateWebhookModal = ({
onChange={(e) => onChange={(e) =>
inputChangehandler( inputChangehandler(
WebhookInputDataFields.EVENT_NAME, WebhookInputDataFields.EVENT_NAME,
e.currentTarget.value e.currentTarget.value,
) )
} }
> >
@ -415,7 +415,7 @@ const UpdateWebhookModal = ({
<option value={value} key={key}> <option value={value} key={key}>
{key} {key}
</option> </option>
) ),
)} )}
</Select> </Select>
</Flex> </Flex>
@ -438,7 +438,7 @@ const UpdateWebhookModal = ({
onChange={(e) => onChange={(e) =>
inputChangehandler( inputChangehandler(
WebhookInputDataFields.ENDPOINT, WebhookInputDataFields.ENDPOINT,
e.currentTarget.value e.currentTarget.value,
) )
} }
/> />
@ -462,7 +462,7 @@ const UpdateWebhookModal = ({
onChange={() => onChange={() =>
inputChangehandler( inputChangehandler(
WebhookInputDataFields.ENABLED, WebhookInputDataFields.ENABLED,
!webhook[WebhookInputDataFields.ENABLED] !webhook[WebhookInputDataFields.ENABLED],
) )
} }
/> />
@ -517,7 +517,7 @@ const UpdateWebhookModal = ({
WebhookInputDataFields.HEADERS, WebhookInputDataFields.HEADERS,
e.target.value, e.target.value,
WebhookInputHeaderFields.KEY, WebhookInputHeaderFields.KEY,
index index,
) )
} }
width="30%" width="30%"
@ -540,7 +540,7 @@ const UpdateWebhookModal = ({
WebhookInputDataFields.HEADERS, WebhookInputDataFields.HEADERS,
e.target.value, e.target.value,
WebhookInputHeaderFields.VALUE, WebhookInputHeaderFields.VALUE,
index index,
) )
} }
width="65%" width="65%"
@ -560,7 +560,7 @@ const UpdateWebhookModal = ({
</InputRightElement> </InputRightElement>
</InputGroup> </InputGroup>
</Flex> </Flex>
) ),
)} )}
</Flex> </Flex>
<Divider marginY={5} /> <Divider marginY={5} />

6
dashboard/src/components/ViewWebhookLogsModal.tsx
View File

@ -161,15 +161,15 @@ const ViewWebhookLogsModal = ({
<Td> <Td>
<Text fontSize="sm">{`${logData.id.substring( <Text fontSize="sm">{`${logData.id.substring(
0, 0,
5 5,
)}***${logData.id.substring( )}***${logData.id.substring(
logData.id.length - 5, logData.id.length - 5,
logData.id.length logData.id.length,
)}`}</Text> )}`}</Text>
</Td> </Td>
<Td> <Td>
{dayjs(logData.created_at * 1000).format( {dayjs(logData.created_at * 1000).format(
'MMM DD, YYYY' 'MMM DD, YYYY',
)} )}
</Td> </Td>
<Td> <Td>

2
dashboard/src/index.tsx
View File

@ -6,5 +6,5 @@ ReactDOM.render(
<div> <div>
<App /> <App />
</div>, </div>,
document.getElementById('root') document.getElementById('root'),
); );

2
dashboard/src/pages/EmailTemplates.tsx
View File

@ -154,7 +154,7 @@ const EmailTemplates = () => {
<Td>{templateData[EmailTemplateInputDataFields.SUBJECT]}</Td> <Td>{templateData[EmailTemplateInputDataFields.SUBJECT]}</Td>
<Td> <Td>
{dayjs(templateData.created_at * 1000).format( {dayjs(templateData.created_at * 1000).format(
'MMM DD, YYYY' 'MMM DD, YYYY',
)} )}
</Td> </Td>
<Td> <Td>

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

@ -157,7 +157,7 @@ const Environment = () => {
// @ts-ignore // @ts-ignore
[property]: envVariables[property], [property]: envVariables[property],
}), }),
{} {},
); );
if ( if (
updatedEnvVariables[HiddenInputType.ADMIN_SECRET] === '' || updatedEnvVariables[HiddenInputType.ADMIN_SECRET] === '' ||

19
dashboard/src/pages/Users.tsx
View File

@ -29,7 +29,7 @@ import {
MenuItem, MenuItem,
useToast, useToast,
Spinner, Spinner,
TableContainer TableContainer,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { import {
FaAngleLeft, FaAngleLeft,
@ -195,7 +195,7 @@ export default function Users() {
const updateAccessHandler = async ( const updateAccessHandler = async (
id: string, id: string,
action: updateAccessActions action: updateAccessActions,
) => { ) => {
switch (action) { switch (action) {
case updateAccessActions.ENABLE: case updateAccessActions.ENABLE:
@ -263,7 +263,8 @@ export default function Users() {
.toPromise(); .toPromise();
if (res.data?._update_user?.id) { if (res.data?._update_user?.id) {
toast({ toast({
title: `Multi factor authentication ${user.is_multi_factor_auth_enabled ? 'disabled' : 'enabled' title: `Multi factor authentication ${
user.is_multi_factor_auth_enabled ? 'disabled' : 'enabled'
} for user`, } for user`,
isClosable: true, isClosable: true,
status: 'success', status: 'success',
@ -387,7 +388,7 @@ export default function Users() {
onClick={() => onClick={() =>
updateAccessHandler( updateAccessHandler(
user.id, user.id,
updateAccessActions.ENABLE updateAccessActions.ENABLE,
) )
} }
> >
@ -398,7 +399,7 @@ export default function Users() {
onClick={() => onClick={() =>
updateAccessHandler( updateAccessHandler(
user.id, user.id,
updateAccessActions.REVOKE updateAccessActions.REVOKE,
) )
} }
> >
@ -407,13 +408,17 @@ export default function Users() {
)} )}
{user.is_multi_factor_auth_enabled ? ( {user.is_multi_factor_auth_enabled ? (
<MenuItem <MenuItem
onClick={() => multiFactorAuthUpdateHandler(user)} onClick={() =>
multiFactorAuthUpdateHandler(user)
}
> >
Disable MultiFactor Authentication Disable MultiFactor Authentication
</MenuItem> </MenuItem>
) : ( ) : (
<MenuItem <MenuItem
onClick={() => multiFactorAuthUpdateHandler(user)} onClick={() =>
multiFactorAuthUpdateHandler(user)
}
> >
Enable MultiFactor Authentication Enable MultiFactor Authentication
</MenuItem> </MenuItem>

4
dashboard/src/pages/Webhooks.tsx
View File

@ -170,12 +170,12 @@ const Webhooks = () => {
label={JSON.stringify( label={JSON.stringify(
webhook[WebhookInputDataFields.HEADERS], webhook[WebhookInputDataFields.HEADERS],
null, null,
' ' ' ',
)} )}
> >
<Tag size="sm" variant="outline" colorScheme="gray"> <Tag size="sm" variant="outline" colorScheme="gray">
{Object.keys( {Object.keys(
webhook[WebhookInputDataFields.HEADERS] || {} webhook[WebhookInputDataFields.HEADERS] || {},
)?.length.toString()} )?.length.toString()}
</Tag> </Tag>
</Tooltip> </Tooltip>

4
dashboard/src/utils/index.ts
View File

@ -67,7 +67,7 @@ export const validateEmail = (email: string) => {
return email return email
.toLowerCase() .toLowerCase()
.match( .match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
) )
? true ? true
: false; : false;
@ -78,7 +78,7 @@ export const validateURI = (uri: string) => {
return uri return uri
.toLowerCase() .toLowerCase()
.match( .match(
/(?:^|\s)((https?:\/\/)?(?:localhost|[\w-]+(?:\.[\w-]+)+)(:\d+)?(\/\S*)?)/ /(?:^|\s)((https?:\/\/)?(?:localhost|[\w-]+(?:\.[\w-]+)+)(:\d+)?(\/\S*)?)/,
) )
? true ? true
: false; : false;

2
dashboard/src/utils/parseCSV.ts
View File

@ -27,7 +27,7 @@ const parseCSV = (file: File, delimiter: string): Promise<dataTypes[]> => {
value: email.trim(), value: email.trim(),
isInvalid: !validateEmail(email.trim()), isInvalid: !validateEmail(email.trim()),
}; };
}) }),
); );
}; };