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

feat: add plain html email template editor

Browse Source
This commit is contained in:
anik-ghosh-au7 2022-11-09 22:17:41 +05:30
parent 4afd544c41
commit b467e7002d
3 changed files with 778 additions and 1730 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1079
dashboard/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -1,457 +1,565 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { import {
Button, Button,
Center, Center,
Flex, Flex,
Input, Input,
InputGroup, InputGroup,
MenuItem, MenuItem,
Modal, Modal,
ModalBody, ModalBody,
ModalCloseButton, ModalCloseButton,
ModalContent, ModalContent,
ModalFooter, ModalFooter,
ModalHeader, ModalHeader,
ModalOverlay, ModalOverlay,
Select, Select,
Text, Text,
useDisclosure, useDisclosure,
useToast, useToast,
Alert, Alert,
AlertIcon, AlertIcon,
Collapse, Collapse,
Box, Box,
TableContainer, TableContainer,
Table, Table,
Thead, Thead,
Tr, Tr,
Th, Th,
Tbody, Tbody,
Td, Td,
Code, Code,
Radio,
RadioGroup,
Stack,
Textarea,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { FaPlus, FaAngleDown, FaAngleUp } from 'react-icons/fa'; import { FaPlus, FaAngleDown, FaAngleUp } from 'react-icons/fa';
import { useClient } from 'urql'; import { useClient } from 'urql';
import EmailEditor from 'react-email-editor'; import EmailEditor from 'react-email-editor';
import { import {
UpdateModalViews, UpdateModalViews,
EmailTemplateInputDataFields, EmailTemplateInputDataFields,
emailTemplateEventNames, emailTemplateEventNames,
emailTemplateVariables, emailTemplateVariables,
EmailTemplateEditors,
} from '../constants'; } from '../constants';
import { capitalizeFirstLetter } from '../utils'; import { capitalizeFirstLetter } from '../utils';
import { AddEmailTemplate, EditEmailTemplate } from '../graphql/mutation'; import { AddEmailTemplate, EditEmailTemplate } from '../graphql/mutation';
interface selectedEmailTemplateDataTypes { interface selectedEmailTemplateDataTypes {
[EmailTemplateInputDataFields.ID]: string; [EmailTemplateInputDataFields.ID]: string;
[EmailTemplateInputDataFields.EVENT_NAME]: string; [EmailTemplateInputDataFields.EVENT_NAME]: string;
[EmailTemplateInputDataFields.SUBJECT]: string; [EmailTemplateInputDataFields.SUBJECT]: string;
[EmailTemplateInputDataFields.CREATED_AT]: number; [EmailTemplateInputDataFields.CREATED_AT]: number;
[EmailTemplateInputDataFields.TEMPLATE]: string; [EmailTemplateInputDataFields.TEMPLATE]: string;
[EmailTemplateInputDataFields.DESIGN]: string; [EmailTemplateInputDataFields.DESIGN]: string;
} }
interface UpdateEmailTemplateInputPropTypes { interface UpdateEmailTemplateInputPropTypes {
view: UpdateModalViews; view: UpdateModalViews;
selectedTemplate?: selectedEmailTemplateDataTypes; selectedTemplate?: selectedEmailTemplateDataTypes;
fetchEmailTemplatesData: Function; fetchEmailTemplatesData: Function;
} }
interface templateVariableDataTypes { interface templateVariableDataTypes {
text: string; text: string;
value: string; value: string;
description: string; description: string;
} }
interface emailTemplateDataType { interface emailTemplateDataType {
[EmailTemplateInputDataFields.EVENT_NAME]: string; [EmailTemplateInputDataFields.EVENT_NAME]: string;
[EmailTemplateInputDataFields.SUBJECT]: string; [EmailTemplateInputDataFields.SUBJECT]: string;
[EmailTemplateInputDataFields.TEMPLATE]: string;
[EmailTemplateInputDataFields.DESIGN]: string;
} }
interface validatorDataType { interface validatorDataType {
[EmailTemplateInputDataFields.SUBJECT]: boolean; [EmailTemplateInputDataFields.SUBJECT]: boolean;
} }
const initTemplateData: emailTemplateDataType = { const initTemplateData: emailTemplateDataType = {
[EmailTemplateInputDataFields.EVENT_NAME]: emailTemplateEventNames.Signup, [EmailTemplateInputDataFields.EVENT_NAME]: emailTemplateEventNames.Signup,
[EmailTemplateInputDataFields.SUBJECT]: '', [EmailTemplateInputDataFields.SUBJECT]: '',
[EmailTemplateInputDataFields.TEMPLATE]: '',
[EmailTemplateInputDataFields.DESIGN]: '',
}; };
const initTemplateValidatorData: validatorDataType = { const initTemplateValidatorData: validatorDataType = {
[EmailTemplateInputDataFields.SUBJECT]: true, [EmailTemplateInputDataFields.SUBJECT]: true,
}; };
const UpdateEmailTemplate = ({ const UpdateEmailTemplate = ({
view, view,
selectedTemplate, selectedTemplate,
fetchEmailTemplatesData, fetchEmailTemplatesData,
}: UpdateEmailTemplateInputPropTypes) => { }: UpdateEmailTemplateInputPropTypes) => {
const client = useClient(); const client = useClient();
const toast = useToast(); const toast = useToast();
const emailEditorRef = useRef(null); const emailEditorRef = useRef(null);
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const [templateVariables, setTemplateVariables] = useState< const [editor, setEditor] = useState<string>(
templateVariableDataTypes[] EmailTemplateEditors.PLAIN_HTML_EDITOR,
>([]); );
const [templateData, setTemplateData] = useState<emailTemplateDataType>({ const [templateVariables, setTemplateVariables] = useState<
...initTemplateData, templateVariableDataTypes[]
}); >([]);
const [validator, setValidator] = useState<validatorDataType>({ const [templateData, setTemplateData] = useState<emailTemplateDataType>({
...initTemplateValidatorData, ...initTemplateData,
}); });
const [isDynamicVariableInfoOpen, setIsDynamicVariableInfoOpen] = const [validator, setValidator] = useState<validatorDataType>({
useState<boolean>(false); ...initTemplateValidatorData,
});
const [isDynamicVariableInfoOpen, setIsDynamicVariableInfoOpen] =
useState<boolean>(false);
const onReady = () => { const onReady = () => {
if (selectedTemplate) { if (selectedTemplate) {
const { design } = selectedTemplate; const { design } = selectedTemplate;
try { try {
const designData = JSON.parse(design); if (design) {
// @ts-ignore const designData = JSON.parse(design);
emailEditorRef.current.editor.loadDesign(designData); // @ts-ignore
} catch (error) { emailEditorRef.current.editor.loadDesign(designData);
console.error(error); }
onClose(); } catch (error) {
} console.error(error);
} onClose();
}; }
}
};
const inputChangehandler = (inputType: string, value: any) => { const inputChangehandler = (inputType: string, value: any) => {
if (inputType !== EmailTemplateInputDataFields.EVENT_NAME) { if (inputType !== EmailTemplateInputDataFields.EVENT_NAME) {
setValidator({ setValidator({
...validator, ...validator,
[inputType]: value?.trim().length, [inputType]: value?.trim().length,
}); });
} }
setTemplateData({ ...templateData, [inputType]: value }); setTemplateData({ ...templateData, [inputType]: value });
}; };
const validateData = () => { const validateData = () => {
return ( return (
!loading && !loading &&
templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 && templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 &&
templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 && templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 &&
validator[EmailTemplateInputDataFields.SUBJECT] validator[EmailTemplateInputDataFields.SUBJECT]
); );
}; };
const saveData = async () => { const updateTemplate = async (params: emailTemplateDataType) => {
if (!validateData()) return; let res: any = {};
setLoading(true); if (
// @ts-ignore view === UpdateModalViews.Edit &&
return await emailEditorRef.current.editor.exportHtml(async (data) => { selectedTemplate?.[EmailTemplateInputDataFields.ID]
const { design, html } = data; ) {
if (!html || !design) { res = await client
setLoading(false); .mutation(EditEmailTemplate, {
return; params: {
} ...params,
const params = { id: selectedTemplate[EmailTemplateInputDataFields.ID],
[EmailTemplateInputDataFields.EVENT_NAME]: },
templateData[EmailTemplateInputDataFields.EVENT_NAME], })
[EmailTemplateInputDataFields.SUBJECT]: .toPromise();
templateData[EmailTemplateInputDataFields.SUBJECT], } else {
[EmailTemplateInputDataFields.TEMPLATE]: html.trim(), res = await client.mutation(AddEmailTemplate, { params }).toPromise();
[EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design), }
}; setLoading(false);
let res: any = {}; if (res.error) {
if ( toast({
view === UpdateModalViews.Edit && title: capitalizeFirstLetter(res.error.message),
selectedTemplate?.[EmailTemplateInputDataFields.ID] isClosable: true,
) { status: 'error',
res = await client position: 'bottom-right',
.mutation(EditEmailTemplate, { });
params: { } else if (
...params, res.data?._add_email_template ||
id: selectedTemplate[EmailTemplateInputDataFields.ID], res.data?._update_email_template
}, ) {
}) toast({
.toPromise(); title: capitalizeFirstLetter(
} else { res.data?._add_email_template?.message ||
res = await client.mutation(AddEmailTemplate, { params }).toPromise(); res.data?._update_email_template?.message,
} ),
setLoading(false); isClosable: true,
if (res.error) { status: 'success',
toast({ position: 'bottom-right',
title: capitalizeFirstLetter(res.error.message), });
isClosable: true, setTemplateData({
status: 'error', ...initTemplateData,
position: 'bottom-right', });
}); setValidator({ ...initTemplateValidatorData });
} else if ( fetchEmailTemplatesData();
res.data?._add_email_template || }
res.data?._update_email_template };
) {
toast({
title: capitalizeFirstLetter(
res.data?._add_email_template?.message ||
res.data?._update_email_template?.message,
),
isClosable: true,
status: 'success',
position: 'bottom-right',
});
setTemplateData({
...initTemplateData,
});
setValidator({ ...initTemplateValidatorData });
fetchEmailTemplatesData();
}
view === UpdateModalViews.ADD && onClose();
});
};
const resetData = () => {
if (selectedTemplate) {
setTemplateData(selectedTemplate);
} else {
setTemplateData({ ...initTemplateData });
}
};
useEffect(() => {
if (
isOpen &&
view === UpdateModalViews.Edit &&
selectedTemplate &&
Object.keys(selectedTemplate || {}).length
) {
const { id, created_at, template, design, ...rest } = selectedTemplate;
setTemplateData(rest);
}
}, [isOpen]);
useEffect(() => {
const updatedTemplateVariables = Object.entries(
emailTemplateVariables,
).reduce((acc, [key, val]): any => {
if (
(templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
emailTemplateEventNames['Verify Otp'] &&
val === emailTemplateVariables.otp) ||
(templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
emailTemplateEventNames['Verify Otp'] &&
val === emailTemplateVariables.verification_url)
) {
return acc;
}
return [
...acc,
{
text: key,
value: val.value,
description: val.description,
},
];
}, []);
setTemplateVariables(updatedTemplateVariables);
}, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
return ( const saveData = async () => {
<> if (!validateData()) return;
{view === UpdateModalViews.ADD ? ( setLoading(true);
<Button let params: emailTemplateDataType = {
leftIcon={<FaPlus />} [EmailTemplateInputDataFields.EVENT_NAME]:
colorScheme="blue" templateData[EmailTemplateInputDataFields.EVENT_NAME],
variant="solid" [EmailTemplateInputDataFields.SUBJECT]:
onClick={onOpen} templateData[EmailTemplateInputDataFields.SUBJECT],
isDisabled={false} [EmailTemplateInputDataFields.TEMPLATE]:
size="sm" templateData[EmailTemplateInputDataFields.TEMPLATE],
> [EmailTemplateInputDataFields.DESIGN]: '',
<Center h="100%">Add Template</Center>{' '} };
</Button> if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
) : ( // @ts-ignore
<MenuItem onClick={onOpen}>Edit</MenuItem> await emailEditorRef.current.editor.exportHtml(async (data) => {
)} const { design, html } = data;
<Modal if (!html || !design) {
isOpen={isOpen} setLoading(false);
onClose={() => { return;
resetData(); }
onClose(); params = {
}} ...params,
size="6xl" [EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
> [EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
<ModalOverlay /> };
<ModalContent> await updateTemplate(params);
<ModalHeader> });
{view === UpdateModalViews.ADD } else {
? 'Add New Email Template' await updateTemplate(params);
: 'Edit Email Template'} }
</ModalHeader> view === UpdateModalViews.ADD && onClose();
<ModalCloseButton /> };
<ModalBody>
<Flex const resetData = () => {
flexDirection="column" if (selectedTemplate) {
border="1px" setTemplateData(selectedTemplate);
borderRadius="md" } else {
borderColor="gray.200" setTemplateData({ ...initTemplateData });
p="5" }
> };
<Alert
status="info" // set template data if edit modal is open
onClick={() => useEffect(() => {
setIsDynamicVariableInfoOpen(!isDynamicVariableInfoOpen) if (
} isOpen &&
borderRadius="5" view === UpdateModalViews.Edit &&
marginBottom={5} selectedTemplate &&
cursor="pointer" Object.keys(selectedTemplate || {}).length
fontSize="sm" ) {
> const { id, created_at, ...rest } = selectedTemplate;
<AlertIcon /> setTemplateData(rest);
<Flex }
width="100%" }, [isOpen]);
justifyContent="space-between"
alignItems="center" // set template variables
> useEffect(() => {
<Box width="85%"> const updatedTemplateVariables = Object.entries(
<b>Note:</b> You can add set of dynamic variables to subject emailTemplateVariables,
and email body. Click here to see the set of dynamic ).reduce((acc, [key, val]): any => {
variables. if (
</Box> (templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
{isDynamicVariableInfoOpen ? <FaAngleUp /> : <FaAngleDown />} emailTemplateEventNames['Verify Otp'] &&
</Flex> val === emailTemplateVariables.otp) ||
</Alert> (templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
<Collapse emailTemplateEventNames['Verify Otp'] &&
style={{ val === emailTemplateVariables.verification_url)
width: '100%', ) {
}} return acc;
in={isDynamicVariableInfoOpen} }
> return [
<TableContainer ...acc,
background="gray.100" {
borderRadius={5} text: key,
height={200} value: val.value,
width="100%" description: val.description,
overflowY="auto" },
overflowWrap="break-word" ];
> }, []);
<Table variant="simple"> setTemplateVariables(updatedTemplateVariables);
<Thead> }, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
<Tr>
<Th>Variable</Th> // change editor
<Th>Description</Th> useEffect(() => {
</Tr> if (isOpen && selectedTemplate) {
</Thead> const { design } = selectedTemplate;
<Tbody> if (design) {
{templateVariables.map((i) => ( setEditor(EmailTemplateEditors.UNLAYER_EDITOR);
<Tr key={i.text}> } else {
<Td> setEditor(EmailTemplateEditors.PLAIN_HTML_EDITOR);
<Code fontSize="sm">{`{{.${i.text}}}`}</Code> }
</Td> }
<Td> }, [isOpen, selectedTemplate]);
<Text
size="sm" // reset fields when editor is changed
fontSize="sm" useEffect(() => {
overflowWrap="break-word" if (selectedTemplate?.design) {
width="100%" if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
> setTemplateData({
{i.description} ...templateData,
</Text> [EmailTemplateInputDataFields.TEMPLATE]: selectedTemplate.template,
</Td> [EmailTemplateInputDataFields.DESIGN]: selectedTemplate.design,
</Tr> });
))} } else {
</Tbody> setTemplateData({
</Table> ...templateData,
</TableContainer> [EmailTemplateInputDataFields.TEMPLATE]: '',
</Collapse> [EmailTemplateInputDataFields.DESIGN]: '',
<Flex });
width="100%" }
justifyContent="space-between" } else if (selectedTemplate?.template) {
alignItems="center" if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
marginBottom="2%" setTemplateData({
> ...templateData,
<Flex flex="1">Event Name</Flex> [EmailTemplateInputDataFields.TEMPLATE]: '',
<Flex flex="3"> [EmailTemplateInputDataFields.DESIGN]: '',
<Select });
size="md" } else {
value={ setTemplateData({
templateData[EmailTemplateInputDataFields.EVENT_NAME] ...templateData,
} [EmailTemplateInputDataFields.TEMPLATE]: selectedTemplate?.template,
onChange={(e) => [EmailTemplateInputDataFields.DESIGN]: '',
inputChangehandler( });
EmailTemplateInputDataFields.EVENT_NAME, }
e.currentTarget.value, }
) }, [editor]);
}
> return (
{Object.entries(emailTemplateEventNames).map( <>
([key, value]: any) => ( {view === UpdateModalViews.ADD ? (
<option value={value} key={key}> <Button
{key} leftIcon={<FaPlus />}
</option> colorScheme="blue"
), variant="solid"
)} onClick={onOpen}
</Select> isDisabled={false}
</Flex> size="sm"
</Flex> >
<Flex <Center h="100%">Add Template</Center>{' '}
width="100%" </Button>
justifyContent="start" ) : (
alignItems="center" <MenuItem onClick={onOpen}>Edit</MenuItem>
marginBottom="2%" )}
> <Modal
<Flex flex="1">Subject</Flex> isOpen={isOpen}
<Flex flex="3"> onClose={() => {
<InputGroup size="md"> resetData();
<Input onClose();
pr="4.5rem" }}
type="text" size="6xl"
placeholder="Subject Line" >
value={templateData[EmailTemplateInputDataFields.SUBJECT]} <ModalOverlay />
isInvalid={ <ModalContent>
!validator[EmailTemplateInputDataFields.SUBJECT] <ModalHeader>
} {view === UpdateModalViews.ADD
onChange={(e) => ? 'Add New Email Template'
inputChangehandler( : 'Edit Email Template'}
EmailTemplateInputDataFields.SUBJECT, </ModalHeader>
e.currentTarget.value, <ModalCloseButton />
) <ModalBody>
} <Flex
/> flexDirection="column"
</InputGroup> border="1px"
</Flex> borderRadius="md"
</Flex> borderColor="gray.200"
<Flex p="5"
width="100%" >
justifyContent="flex-start" <Alert
alignItems="center" status="info"
marginBottom="2%" onClick={() =>
> setIsDynamicVariableInfoOpen(!isDynamicVariableInfoOpen)
Template Body }
</Flex> borderRadius="5"
<Flex marginBottom={5}
width="100%" cursor="pointer"
justifyContent="flex-start" fontSize="sm"
alignItems="center" >
border="1px solid" <AlertIcon />
borderColor="gray.200" <Flex
> width="100%"
<EmailEditor ref={emailEditorRef} onReady={onReady} /> justifyContent="space-between"
</Flex> alignItems="center"
</Flex> >
</ModalBody> <Box width="85%">
<ModalFooter> <b>Note:</b> You can add set of dynamic variables to subject
<Button and email body. Click here to see the set of dynamic
variant="outline" variables.
onClick={resetData} </Box>
isDisabled={loading} {isDynamicVariableInfoOpen ? <FaAngleUp /> : <FaAngleDown />}
marginRight="5" </Flex>
> </Alert>
Reset <Collapse
</Button> style={{
<Button width: '100%',
colorScheme="blue" }}
variant="solid" in={isDynamicVariableInfoOpen}
isLoading={loading} >
onClick={saveData} <TableContainer
isDisabled={!validateData()} background="gray.100"
> borderRadius={5}
<Center h="100%" pt="5%"> height={200}
Save width="100%"
</Center> overflowY="auto"
</Button> overflowWrap="break-word"
</ModalFooter> >
</ModalContent> <Table variant="simple">
</Modal> <Thead>
</> <Tr>
); <Th>Variable</Th>
<Th>Description</Th>
</Tr>
</Thead>
<Tbody>
{templateVariables.map((i) => (
<Tr key={i.text}>
<Td>
<Code fontSize="sm">{`{{.${i.text}}}`}</Code>
</Td>
<Td>
<Text
size="sm"
fontSize="sm"
overflowWrap="break-word"
width="100%"
>
{i.description}
</Text>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Collapse>
<Flex
width="100%"
justifyContent="space-between"
alignItems="center"
marginBottom="2%"
>
<Flex flex="1">Event Name</Flex>
<Flex flex="3">
<Select
size="md"
value={
templateData[EmailTemplateInputDataFields.EVENT_NAME]
}
onChange={(e) =>
inputChangehandler(
EmailTemplateInputDataFields.EVENT_NAME,
e.currentTarget.value,
)
}
>
{Object.entries(emailTemplateEventNames).map(
([key, value]: any) => (
<option value={value} key={key}>
{key}
</option>
),
)}
</Select>
</Flex>
</Flex>
<Flex
width="100%"
justifyContent="start"
alignItems="center"
marginBottom="2%"
>
<Flex flex="1">Subject</Flex>
<Flex flex="3">
<InputGroup size="md">
<Input
pr="4.5rem"
type="text"
placeholder="Subject Line"
value={templateData[EmailTemplateInputDataFields.SUBJECT]}
isInvalid={
!validator[EmailTemplateInputDataFields.SUBJECT]
}
onChange={(e) =>
inputChangehandler(
EmailTemplateInputDataFields.SUBJECT,
e.currentTarget.value,
)
}
/>
</InputGroup>
</Flex>
</Flex>
<Flex
width="100%"
justifyContent="flex-start"
alignItems="center"
marginBottom="2%"
>
<Flex flex="1">Template Body</Flex>
<Flex flex="3">
<RadioGroup
onChange={(value) => setEditor(value)}
value={editor}
>
<Stack direction="row" spacing="50px">
<Radio value={EmailTemplateEditors.PLAIN_HTML_EDITOR}>
Plain HTML
</Radio>
<Radio value={EmailTemplateEditors.UNLAYER_EDITOR}>
Unlayer Editor
</Radio>
</Stack>
</RadioGroup>
</Flex>
</Flex>
<Flex
width="100%"
justifyContent="flex-start"
alignItems="center"
border="1px solid"
borderColor="gray.200"
>
{editor === EmailTemplateEditors.UNLAYER_EDITOR ? (
<EmailEditor ref={emailEditorRef} onReady={onReady} />
) : (
<Textarea
value={templateData.template}
onChange={(e) => {
setTemplateData({
...templateData,
[EmailTemplateInputDataFields.TEMPLATE]: e.target.value,
});
}}
placeholder="Template HTML"
border="0"
height="500px"
/>
)}
</Flex>
</Flex>
</ModalBody>
<ModalFooter>
<Button
variant="outline"
onClick={resetData}
isDisabled={loading}
marginRight="5"
>
Reset
</Button>
<Button
colorScheme="blue"
variant="solid"
isLoading={loading}
onClick={saveData}
isDisabled={!validateData()}
>
<Center h="100%" pt="5%">
Save
</Center>
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}; };
export default UpdateEmailTemplate; export default UpdateEmailTemplate;

491
dashboard/src/constants.ts
View File

@ -1,314 +1,314 @@
export const LOGO_URL = export const LOGO_URL =
'https://user-images.githubusercontent.com/6964334/147834043-fc384cab-e7ca-40f8-9663-38fc25fd5f3a.png'; 'https://user-images.githubusercontent.com/6964334/147834043-fc384cab-e7ca-40f8-9663-38fc25fd5f3a.png';
export const TextInputType = { export const TextInputType = {
ACCESS_TOKEN_EXPIRY_TIME: 'ACCESS_TOKEN_EXPIRY_TIME', ACCESS_TOKEN_EXPIRY_TIME: 'ACCESS_TOKEN_EXPIRY_TIME',
CLIENT_ID: 'CLIENT_ID', CLIENT_ID: 'CLIENT_ID',
GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID', GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID',
GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID', GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID',
FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID', FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID', LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID',
APPLE_CLIENT_ID: 'APPLE_CLIENT_ID', APPLE_CLIENT_ID: 'APPLE_CLIENT_ID',
TWITTER_CLIENT_ID: 'TWITTER_CLIENT_ID', TWITTER_CLIENT_ID: 'TWITTER_CLIENT_ID',
JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM', JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
REDIS_URL: 'REDIS_URL', REDIS_URL: 'REDIS_URL',
SMTP_HOST: 'SMTP_HOST', SMTP_HOST: 'SMTP_HOST',
SMTP_PORT: 'SMTP_PORT', SMTP_PORT: 'SMTP_PORT',
SMTP_USERNAME: 'SMTP_USERNAME', SMTP_USERNAME: 'SMTP_USERNAME',
SMTP_LOCAL_NAME: 'SMTP_LOCAL_NAME', SMTP_LOCAL_NAME: 'SMTP_LOCAL_NAME',
SENDER_EMAIL: 'SENDER_EMAIL', SENDER_EMAIL: 'SENDER_EMAIL',
ORGANIZATION_NAME: 'ORGANIZATION_NAME', ORGANIZATION_NAME: 'ORGANIZATION_NAME',
ORGANIZATION_LOGO: 'ORGANIZATION_LOGO', ORGANIZATION_LOGO: 'ORGANIZATION_LOGO',
DATABASE_NAME: 'DATABASE_NAME', DATABASE_NAME: 'DATABASE_NAME',
DATABASE_TYPE: 'DATABASE_TYPE', DATABASE_TYPE: 'DATABASE_TYPE',
DATABASE_URL: 'DATABASE_URL', DATABASE_URL: 'DATABASE_URL',
GIVEN_NAME: 'given_name', GIVEN_NAME: 'given_name',
MIDDLE_NAME: 'middle_name', MIDDLE_NAME: 'middle_name',
FAMILY_NAME: 'family_name', FAMILY_NAME: 'family_name',
NICKNAME: 'nickname', NICKNAME: 'nickname',
PHONE_NUMBER: 'phone_number', PHONE_NUMBER: 'phone_number',
PICTURE: 'picture', PICTURE: 'picture',
}; };
export const HiddenInputType = { export const HiddenInputType = {
CLIENT_SECRET: 'CLIENT_SECRET', CLIENT_SECRET: 'CLIENT_SECRET',
GOOGLE_CLIENT_SECRET: 'GOOGLE_CLIENT_SECRET', GOOGLE_CLIENT_SECRET: 'GOOGLE_CLIENT_SECRET',
GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET', GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET',
FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET', FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',
LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET', LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET',
APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET', APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET',
TWITTER_CLIENT_SECRET: 'TWITTER_CLIENT_SECRET', TWITTER_CLIENT_SECRET: 'TWITTER_CLIENT_SECRET',
JWT_SECRET: 'JWT_SECRET', JWT_SECRET: 'JWT_SECRET',
SMTP_PASSWORD: 'SMTP_PASSWORD', SMTP_PASSWORD: 'SMTP_PASSWORD',
ADMIN_SECRET: 'ADMIN_SECRET', ADMIN_SECRET: 'ADMIN_SECRET',
OLD_ADMIN_SECRET: 'OLD_ADMIN_SECRET', OLD_ADMIN_SECRET: 'OLD_ADMIN_SECRET',
}; };
export const ArrayInputType = { export const ArrayInputType = {
ROLES: 'ROLES', ROLES: 'ROLES',
DEFAULT_ROLES: 'DEFAULT_ROLES', DEFAULT_ROLES: 'DEFAULT_ROLES',
PROTECTED_ROLES: 'PROTECTED_ROLES', PROTECTED_ROLES: 'PROTECTED_ROLES',
ALLOWED_ORIGINS: 'ALLOWED_ORIGINS', ALLOWED_ORIGINS: 'ALLOWED_ORIGINS',
}; };
export const SelectInputType = { export const SelectInputType = {
JWT_TYPE: 'JWT_TYPE', JWT_TYPE: 'JWT_TYPE',
GENDER: 'gender', GENDER: 'gender',
}; };
export const MultiSelectInputType = { export const MultiSelectInputType = {
USER_ROLES: 'roles', USER_ROLES: 'roles',
}; };
export const TextAreaInputType = { export const TextAreaInputType = {
CUSTOM_ACCESS_TOKEN_SCRIPT: 'CUSTOM_ACCESS_TOKEN_SCRIPT', CUSTOM_ACCESS_TOKEN_SCRIPT: 'CUSTOM_ACCESS_TOKEN_SCRIPT',
JWT_PRIVATE_KEY: 'JWT_PRIVATE_KEY', JWT_PRIVATE_KEY: 'JWT_PRIVATE_KEY',
JWT_PUBLIC_KEY: 'JWT_PUBLIC_KEY', JWT_PUBLIC_KEY: 'JWT_PUBLIC_KEY',
}; };
export const SwitchInputType = { export const SwitchInputType = {
APP_COOKIE_SECURE: 'APP_COOKIE_SECURE', APP_COOKIE_SECURE: 'APP_COOKIE_SECURE',
ADMIN_COOKIE_SECURE: 'ADMIN_COOKIE_SECURE', ADMIN_COOKIE_SECURE: 'ADMIN_COOKIE_SECURE',
DISABLE_LOGIN_PAGE: 'DISABLE_LOGIN_PAGE', DISABLE_LOGIN_PAGE: 'DISABLE_LOGIN_PAGE',
DISABLE_MAGIC_LINK_LOGIN: 'DISABLE_MAGIC_LINK_LOGIN', DISABLE_MAGIC_LINK_LOGIN: 'DISABLE_MAGIC_LINK_LOGIN',
DISABLE_EMAIL_VERIFICATION: 'DISABLE_EMAIL_VERIFICATION', DISABLE_EMAIL_VERIFICATION: 'DISABLE_EMAIL_VERIFICATION',
DISABLE_BASIC_AUTHENTICATION: 'DISABLE_BASIC_AUTHENTICATION', DISABLE_BASIC_AUTHENTICATION: 'DISABLE_BASIC_AUTHENTICATION',
DISABLE_SIGN_UP: 'DISABLE_SIGN_UP', DISABLE_SIGN_UP: 'DISABLE_SIGN_UP',
DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV', DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV',
DISABLE_STRONG_PASSWORD: 'DISABLE_STRONG_PASSWORD', DISABLE_STRONG_PASSWORD: 'DISABLE_STRONG_PASSWORD',
DISABLE_MULTI_FACTOR_AUTHENTICATION: 'DISABLE_MULTI_FACTOR_AUTHENTICATION', DISABLE_MULTI_FACTOR_AUTHENTICATION: 'DISABLE_MULTI_FACTOR_AUTHENTICATION',
ENFORCE_MULTI_FACTOR_AUTHENTICATION: 'ENFORCE_MULTI_FACTOR_AUTHENTICATION', ENFORCE_MULTI_FACTOR_AUTHENTICATION: 'ENFORCE_MULTI_FACTOR_AUTHENTICATION',
}; };
export const DateInputType = { export const DateInputType = {
BIRTHDATE: 'birthdate', BIRTHDATE: 'birthdate',
}; };
export const ArrayInputOperations = { export const ArrayInputOperations = {
APPEND: 'APPEND', APPEND: 'APPEND',
REMOVE: 'REMOVE', REMOVE: 'REMOVE',
}; };
export const HMACEncryptionType = { export const HMACEncryptionType = {
HS256: 'HS256', HS256: 'HS256',
HS384: 'HS384', HS384: 'HS384',
HS512: 'HS512', HS512: 'HS512',
}; };
export const RSAEncryptionType = { export const RSAEncryptionType = {
RS256: 'RS256', RS256: 'RS256',
RS384: 'RS384', RS384: 'RS384',
RS512: 'RS512', RS512: 'RS512',
}; };
export const ECDSAEncryptionType = { export const ECDSAEncryptionType = {
ES256: 'ES256', ES256: 'ES256',
ES384: 'ES384', ES384: 'ES384',
ES512: 'ES512', ES512: 'ES512',
}; };
export interface envVarTypes { export interface envVarTypes {
GOOGLE_CLIENT_ID: string; GOOGLE_CLIENT_ID: string;
GOOGLE_CLIENT_SECRET: string; GOOGLE_CLIENT_SECRET: string;
GITHUB_CLIENT_ID: string; GITHUB_CLIENT_ID: string;
GITHUB_CLIENT_SECRET: string; GITHUB_CLIENT_SECRET: string;
FACEBOOK_CLIENT_ID: string; FACEBOOK_CLIENT_ID: string;
FACEBOOK_CLIENT_SECRET: string; FACEBOOK_CLIENT_SECRET: string;
LINKEDIN_CLIENT_ID: string; LINKEDIN_CLIENT_ID: string;
LINKEDIN_CLIENT_SECRET: string; LINKEDIN_CLIENT_SECRET: string;
APPLE_CLIENT_ID: string; APPLE_CLIENT_ID: string;
APPLE_CLIENT_SECRET: string; APPLE_CLIENT_SECRET: string;
TWITTER_CLIENT_ID: string; TWITTER_CLIENT_ID: string;
TWITTER_CLIENT_SECRET: string; TWITTER_CLIENT_SECRET: string;
ROLES: [string] | []; ROLES: [string] | [];
DEFAULT_ROLES: [string] | []; DEFAULT_ROLES: [string] | [];
PROTECTED_ROLES: [string] | []; PROTECTED_ROLES: [string] | [];
JWT_TYPE: string; JWT_TYPE: string;
JWT_SECRET: string; JWT_SECRET: string;
JWT_ROLE_CLAIM: string; JWT_ROLE_CLAIM: string;
JWT_PRIVATE_KEY: string; JWT_PRIVATE_KEY: string;
JWT_PUBLIC_KEY: string; JWT_PUBLIC_KEY: string;
REDIS_URL: string; REDIS_URL: string;
SMTP_HOST: string; SMTP_HOST: string;
SMTP_PORT: string; SMTP_PORT: string;
SMTP_USERNAME: string; SMTP_USERNAME: string;
SMTP_PASSWORD: string; SMTP_PASSWORD: string;
SMTP_LOCAL_NAME: string; SMTP_LOCAL_NAME: string;
SENDER_EMAIL: string; SENDER_EMAIL: string;
ALLOWED_ORIGINS: [string] | []; ALLOWED_ORIGINS: [string] | [];
ORGANIZATION_NAME: string; ORGANIZATION_NAME: string;
ORGANIZATION_LOGO: string; ORGANIZATION_LOGO: string;
CUSTOM_ACCESS_TOKEN_SCRIPT: string; CUSTOM_ACCESS_TOKEN_SCRIPT: string;
ADMIN_SECRET: string; ADMIN_SECRET: string;
APP_COOKIE_SECURE: boolean; APP_COOKIE_SECURE: boolean;
ADMIN_COOKIE_SECURE: boolean; ADMIN_COOKIE_SECURE: boolean;
DISABLE_LOGIN_PAGE: boolean; DISABLE_LOGIN_PAGE: boolean;
DISABLE_MAGIC_LINK_LOGIN: boolean; DISABLE_MAGIC_LINK_LOGIN: boolean;
DISABLE_EMAIL_VERIFICATION: boolean; DISABLE_EMAIL_VERIFICATION: boolean;
DISABLE_BASIC_AUTHENTICATION: boolean; DISABLE_BASIC_AUTHENTICATION: boolean;
DISABLE_SIGN_UP: boolean; DISABLE_SIGN_UP: boolean;
DISABLE_STRONG_PASSWORD: boolean; DISABLE_STRONG_PASSWORD: boolean;
OLD_ADMIN_SECRET: string; OLD_ADMIN_SECRET: string;
DATABASE_NAME: string; DATABASE_NAME: string;
DATABASE_TYPE: string; DATABASE_TYPE: string;
DATABASE_URL: string; DATABASE_URL: string;
ACCESS_TOKEN_EXPIRY_TIME: string; ACCESS_TOKEN_EXPIRY_TIME: string;
DISABLE_MULTI_FACTOR_AUTHENTICATION: boolean; DISABLE_MULTI_FACTOR_AUTHENTICATION: boolean;
ENFORCE_MULTI_FACTOR_AUTHENTICATION: boolean; ENFORCE_MULTI_FACTOR_AUTHENTICATION: boolean;
} }
export const envSubViews = { export const envSubViews = {
INSTANCE_INFO: 'instance-info', INSTANCE_INFO: 'instance-info',
ROLES: 'roles', ROLES: 'roles',
JWT_CONFIG: 'jwt-config', JWT_CONFIG: 'jwt-config',
SESSION_STORAGE: 'session-storage', SESSION_STORAGE: 'session-storage',
EMAIL_CONFIG: 'email-config', EMAIL_CONFIG: 'email-config',
WHITELIST_VARIABLES: 'whitelist-variables', WHITELIST_VARIABLES: 'whitelist-variables',
ORGANIZATION_INFO: 'organization-info', ORGANIZATION_INFO: 'organization-info',
ACCESS_TOKEN: 'access-token', ACCESS_TOKEN: 'access-token',
FEATURES: 'features', FEATURES: 'features',
ADMIN_SECRET: 'admin-secret', ADMIN_SECRET: 'admin-secret',
DB_CRED: 'db-cred', DB_CRED: 'db-cred',
}; };
export enum WebhookInputDataFields { export enum WebhookInputDataFields {
ID = 'id', ID = 'id',
EVENT_NAME = 'event_name', EVENT_NAME = 'event_name',
ENDPOINT = 'endpoint', ENDPOINT = 'endpoint',
ENABLED = 'enabled', ENABLED = 'enabled',
HEADERS = 'headers', HEADERS = 'headers',
} }
export enum EmailTemplateInputDataFields { export enum EmailTemplateInputDataFields {
ID = 'id', ID = 'id',
EVENT_NAME = 'event_name', EVENT_NAME = 'event_name',
SUBJECT = 'subject', SUBJECT = 'subject',
CREATED_AT = 'created_at', CREATED_AT = 'created_at',
TEMPLATE = 'template', TEMPLATE = 'template',
DESIGN = 'design', DESIGN = 'design',
} }
export enum WebhookInputHeaderFields { export enum WebhookInputHeaderFields {
KEY = 'key', KEY = 'key',
VALUE = 'value', VALUE = 'value',
} }
export enum UpdateModalViews { export enum UpdateModalViews {
ADD = 'add', ADD = 'add',
Edit = 'edit', Edit = 'edit',
} }
export const pageLimits: number[] = [5, 10, 15]; export const pageLimits: number[] = [5, 10, 15];
export const webhookEventNames = { export const webhookEventNames = {
'User signup': 'user.signup', 'User signup': 'user.signup',
'User created': 'user.created', 'User created': 'user.created',
'User login': 'user.login', 'User login': 'user.login',
'User deleted': 'user.deleted', 'User deleted': 'user.deleted',
'User access enabled': 'user.access_enabled', 'User access enabled': 'user.access_enabled',
'User access revoked': 'user.access_revoked', 'User access revoked': 'user.access_revoked',
}; };
export const emailTemplateEventNames = { export const emailTemplateEventNames = {
Signup: 'basic_auth_signup', Signup: 'basic_auth_signup',
'Magic Link Login': 'magic_link_login', 'Magic Link Login': 'magic_link_login',
'Update Email': 'update_email', 'Update Email': 'update_email',
'Forgot Password': 'forgot_password', 'Forgot Password': 'forgot_password',
'Verify Otp': 'verify_otp', 'Verify Otp': 'verify_otp',
'Invite member': 'invite_member', 'Invite member': 'invite_member',
}; };
export enum webhookVerifiedStatus { export enum webhookVerifiedStatus {
VERIFIED = 'verified', VERIFIED = 'verified',
NOT_VERIFIED = 'not_verified', NOT_VERIFIED = 'not_verified',
PENDING = 'verification_pending', PENDING = 'verification_pending',
} }
export const emailTemplateVariables = { export const emailTemplateVariables = {
'user.id': { 'user.id': {
description: `User identifier`, description: `User identifier`,
value: '{.user.id}}', value: '{.user.id}}',
}, },
'user.email': { 'user.email': {
description: 'User email address', description: 'User email address',
value: '{.user.email}}', value: '{.user.email}}',
}, },
'user.given_name': { 'user.given_name': {
description: `User first name`, description: `User first name`,
value: '{.user.given_name}}', value: '{.user.given_name}}',
}, },
'user.family_name': { 'user.family_name': {
description: `User last name`, description: `User last name`,
value: '{.user.family_name}}', value: '{.user.family_name}}',
}, },
'user.middle_name': { 'user.middle_name': {
description: `Middle name of user`, description: `Middle name of user`,
value: '{.user.middle_name}}', value: '{.user.middle_name}}',
}, },
'user.nickname': { 'user.nickname': {
description: `Nick name of user`, description: `Nick name of user`,
value: '{.user.nickname}}', value: '{.user.nickname}}',
}, },
'user.preferred_username': { 'user.preferred_username': {
description: `Username, by default it is email`, description: `Username, by default it is email`,
value: '{.user.preferred_username}}', value: '{.user.preferred_username}}',
}, },
'user.signup_methods': { 'user.signup_methods': {
description: `Comma separated list of methods using which user has signed up`, description: `Comma separated list of methods using which user has signed up`,
value: '{.user.signup_methods}}', value: '{.user.signup_methods}}',
}, },
'user.email_verified': { 'user.email_verified': {
description: `Whether email is verified or not`, description: `Whether email is verified or not`,
value: '{.user.email_verified}}', value: '{.user.email_verified}}',
}, },
'user.picture': { 'user.picture': {
description: `URL of the user profile picture`, description: `URL of the user profile picture`,
value: '{.user.picture}}', value: '{.user.picture}}',
}, },
'user.roles': { 'user.roles': {
description: `Comma separated list of roles assigned to user`, description: `Comma separated list of roles assigned to user`,
value: '{.user.roles}}', value: '{.user.roles}}',
}, },
'user.gender': { 'user.gender': {
description: `Gender of user`, description: `Gender of user`,
value: '{.user.gender}}', value: '{.user.gender}}',
}, },
'user.birthdate': { 'user.birthdate': {
description: `BirthDate of user`, description: `BirthDate of user`,
value: '{.user.birthdate}}', value: '{.user.birthdate}}',
}, },
'user.phone_number': { 'user.phone_number': {
description: `Phone number of user`, description: `Phone number of user`,
value: '{.user.phone_number}}', value: '{.user.phone_number}}',
}, },
'user.phone_number_verified': { 'user.phone_number_verified': {
description: `Whether phone number is verified or not`, description: `Whether phone number is verified or not`,
value: '{.user.phone_number_verified}}', value: '{.user.phone_number_verified}}',
}, },
'user.created_at': { 'user.created_at': {
description: `User created at time`, description: `User created at time`,
value: '{.user.created_at}}', value: '{.user.created_at}}',
}, },
'user.updated_at': { 'user.updated_at': {
description: `Last updated time at user`, description: `Last updated time at user`,
value: '{.user.updated_at}}', value: '{.user.updated_at}}',
}, },
'organization.name': { 'organization.name': {
description: `Organization name`, description: `Organization name`,
value: '{.organization.name}}', value: '{.organization.name}}',
}, },
'organization.logo': { 'organization.logo': {
description: `Organization logo`, description: `Organization logo`,
value: '{.organization.logo}}', value: '{.organization.logo}}',
}, },
verification_url: { verification_url: {
description: `Verification URL in case of events other than verify otp`, description: `Verification URL in case of events other than verify otp`,
value: '{.verification_url}}', value: '{.verification_url}}',
}, },
otp: { otp: {
description: `OTP sent during login with Multi factor authentication`, description: `OTP sent during login with Multi factor authentication`,
value: '{.otp}}', value: '{.otp}}',
}, },
}; };
export const webhookPayloadExample: string = `{ export const webhookPayloadExample: string = `{
@ -337,3 +337,8 @@ export const webhookPayloadExample: string = `{
}, },
"auth_recipe":"google" "auth_recipe":"google"
}`; }`;
export enum EmailTemplateEditors {
UNLAYER_EDITOR = 'unlayer_editor',
PLAIN_HTML_EDITOR = 'plain_html_editor',
}