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

chore: format

Browse Source
This commit is contained in:
Lakhan Samani 2022-10-25 08:25:23 +05:30
parent 9ce53eb8e8
commit 65eadb66fa
4 changed files with 905 additions and 903 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/src/pages/login.tsx
View File

@ -60,10 +60,12 @@ export default function Login({ urlProps }: { urlProps: Record<string, any> }) {
{view === VIEW_TYPES.FORGOT_PASSWORD && ( {view === VIEW_TYPES.FORGOT_PASSWORD && (
<Fragment> <Fragment>
<h1 style={{ textAlign: 'center' }}>Forgot Password</h1> <h1 style={{ textAlign: 'center' }}>Forgot Password</h1>
<AuthorizerForgotPassword urlProps={{ <AuthorizerForgotPassword
...urlProps, urlProps={{
redirect_uri: `${window.location.origin}/app/reset-password`, ...urlProps,
}} /> redirect_uri: `${window.location.origin}/app/reset-password`,
}}
/>
<Footer> <Footer>
<Link <Link
to="#" to="#"

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

@ -1,263 +1,263 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Button, Button,
Center, Center,
Flex, Flex,
MenuItem, MenuItem,
Modal, Modal,
ModalBody, ModalBody,
ModalCloseButton, ModalCloseButton,
ModalContent, ModalContent,
ModalFooter, ModalFooter,
ModalHeader, ModalHeader,
ModalOverlay, ModalOverlay,
Stack, Stack,
useDisclosure, useDisclosure,
Text, Text,
useToast, useToast,
} from '@chakra-ui/react'; } 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 InputField from './InputField'; import InputField from './InputField';
import { import {
DateInputType, DateInputType,
MultiSelectInputType, MultiSelectInputType,
SelectInputType, SelectInputType,
TextInputType, TextInputType,
} from '../constants'; } from '../constants';
import { getObjectDiff } from '../utils'; import { getObjectDiff } from '../utils';
import { UpdateUser } from '../graphql/mutation'; import { UpdateUser } from '../graphql/mutation';
import { GetAvailableRolesQuery } from '../graphql/queries'; import { GetAvailableRolesQuery } from '../graphql/queries';
const GenderTypes = { const GenderTypes = {
Undisclosed: null, Undisclosed: null,
Male: 'Male', Male: 'Male',
Female: 'Female', Female: 'Female',
}; };
interface userDataTypes { interface userDataTypes {
id: string; id: string;
email: string; email: string;
given_name: string; given_name: string;
family_name: string; family_name: string;
middle_name: string; middle_name: string;
nickname: string; nickname: string;
gender: string; gender: string;
birthdate: string; birthdate: string;
phone_number: string; phone_number: string;
picture: string; picture: string;
roles: [string] | []; roles: [string] | [];
} }
const EditUserModal = ({ const EditUserModal = ({
user, user,
updateUserList, updateUserList,
}: { }: {
user: userDataTypes; user: userDataTypes;
updateUserList: Function; updateUserList: Function;
}) => { }) => {
const client = useClient(); const client = useClient();
const toast = useToast(); const toast = useToast();
const [availableRoles, setAvailableRoles] = useState<string[]>([]); const [availableRoles, setAvailableRoles] = useState<string[]>([]);
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();
const [userData, setUserData] = useState<userDataTypes>({ const [userData, setUserData] = useState<userDataTypes>({
id: '', id: '',
email: '', email: '',
given_name: '', given_name: '',
family_name: '', family_name: '',
middle_name: '', middle_name: '',
nickname: '', nickname: '',
gender: '', gender: '',
birthdate: '', birthdate: '',
phone_number: '', phone_number: '',
picture: '', picture: '',
roles: [], roles: [],
}); });
React.useEffect(() => { React.useEffect(() => {
setUserData(user); setUserData(user);
fetchAvailableRoles(); fetchAvailableRoles();
}, []); }, []);
const fetchAvailableRoles = async () => { const fetchAvailableRoles = async () => {
const res = await client.query(GetAvailableRolesQuery).toPromise(); const res = await client.query(GetAvailableRolesQuery).toPromise();
if (res.data?._env?.ROLES && res.data?._env?.PROTECTED_ROLES) { if (res.data?._env?.ROLES && res.data?._env?.PROTECTED_ROLES) {
setAvailableRoles([ setAvailableRoles([
...res.data._env.ROLES, ...res.data._env.ROLES,
...res.data._env.PROTECTED_ROLES, ...res.data._env.PROTECTED_ROLES,
]); ]);
} }
}; };
const saveHandler = async () => { const saveHandler = async () => {
const diff = getObjectDiff(user, userData); const diff = getObjectDiff(user, userData);
const updatedUserData = diff.reduce( const updatedUserData = diff.reduce(
(acc: any, property: string) => ({ (acc: any, property: string) => ({
...acc, ...acc,
// @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 } })
.toPromise(); .toPromise();
if (res.error) { if (res.error) {
toast({ toast({
title: 'User data update failed', title: 'User data update failed',
isClosable: true, isClosable: true,
status: 'error', status: 'error',
position: 'bottom-right', position: 'bottom-right',
}); });
} else if (res.data?._update_user?.id) { } else if (res.data?._update_user?.id) {
toast({ toast({
title: 'User data update successful', title: 'User data update successful',
isClosable: true, isClosable: true,
status: 'success', status: 'success',
position: 'bottom-right', position: 'bottom-right',
}); });
} }
onClose(); onClose();
updateUserList(); updateUserList();
}; };
return ( return (
<> <>
<MenuItem onClick={onOpen}>Edit User Details</MenuItem> <MenuItem onClick={onOpen}>Edit User Details</MenuItem>
<Modal isOpen={isOpen} onClose={onClose}> <Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay /> <ModalOverlay />
<ModalContent> <ModalContent>
<ModalHeader>Edit User Details</ModalHeader> <ModalHeader>Edit User Details</ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody> <ModalBody>
<Stack> <Stack>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Given Name:</Text> <Text fontSize="sm">Given Name:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
inputType={TextInputType.GIVEN_NAME} inputType={TextInputType.GIVEN_NAME}
/> />
</Center> </Center>
</Flex> </Flex>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Middle Name:</Text> <Text fontSize="sm">Middle Name:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
inputType={TextInputType.MIDDLE_NAME} inputType={TextInputType.MIDDLE_NAME}
/> />
</Center> </Center>
</Flex> </Flex>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Family Name:</Text> <Text fontSize="sm">Family Name:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
inputType={TextInputType.FAMILY_NAME} inputType={TextInputType.FAMILY_NAME}
/> />
</Center> </Center>
</Flex> </Flex>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Birth Date:</Text> <Text fontSize="sm">Birth Date:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
inputType={DateInputType.BIRTHDATE} inputType={DateInputType.BIRTHDATE}
/> />
</Center> </Center>
</Flex> </Flex>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Nickname:</Text> <Text fontSize="sm">Nickname:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
inputType={TextInputType.NICKNAME} inputType={TextInputType.NICKNAME}
/> />
</Center> </Center>
</Flex> </Flex>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Gender:</Text> <Text fontSize="sm">Gender:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
inputType={SelectInputType.GENDER} inputType={SelectInputType.GENDER}
value={userData.gender} value={userData.gender}
options={GenderTypes} options={GenderTypes}
/> />
</Center> </Center>
</Flex> </Flex>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Phone Number:</Text> <Text fontSize="sm">Phone Number:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
inputType={TextInputType.PHONE_NUMBER} inputType={TextInputType.PHONE_NUMBER}
/> />
</Center> </Center>
</Flex> </Flex>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Picture:</Text> <Text fontSize="sm">Picture:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
inputType={TextInputType.PICTURE} inputType={TextInputType.PICTURE}
/> />
</Center> </Center>
</Flex> </Flex>
<Flex> <Flex>
<Flex w="30%" justifyContent="start" alignItems="center"> <Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Roles:</Text> <Text fontSize="sm">Roles:</Text>
</Flex> </Flex>
<Center w="70%"> <Center w="70%">
<InputField <InputField
variables={userData} variables={userData}
setVariables={setUserData} setVariables={setUserData}
availableRoles={availableRoles} availableRoles={availableRoles}
inputType={MultiSelectInputType.USER_ROLES} inputType={MultiSelectInputType.USER_ROLES}
/> />
</Center> </Center>
</Flex> </Flex>
</Stack> </Stack>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button <Button
leftIcon={<FaSave />} leftIcon={<FaSave />}
colorScheme="blue" colorScheme="blue"
variant="solid" variant="solid"
onClick={saveHandler} onClick={saveHandler}
isDisabled={false} isDisabled={false}
> >
<Center h="100%" pt="5%"> <Center h="100%" pt="5%">
Save Save
</Center> </Center>
</Button> </Button>
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
</> </>
); );
}; };
export default EditUserModal; export default EditUserModal;

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

@ -1,432 +1,432 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Box, Box,
Flex, Flex,
Input, Input,
Center, Center,
InputGroup, InputGroup,
InputRightElement, InputRightElement,
Tag, Tag,
TagLabel, TagLabel,
TagRightIcon, TagRightIcon,
Select, Select,
Textarea, Textarea,
Switch, Switch,
Text, Text,
MenuButton, MenuButton,
MenuList, MenuList,
MenuItemOption, MenuItemOption,
MenuOptionGroup, MenuOptionGroup,
Button, Button,
Menu, Menu,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { import {
FaRegClone, FaRegClone,
FaRegEye, FaRegEye,
FaRegEyeSlash, FaRegEyeSlash,
FaPlus, FaPlus,
FaTimes, FaTimes,
FaAngleDown, FaAngleDown,
} from 'react-icons/fa'; } from 'react-icons/fa';
import { import {
ArrayInputOperations, ArrayInputOperations,
ArrayInputType, ArrayInputType,
SelectInputType, SelectInputType,
HiddenInputType, HiddenInputType,
TextInputType, TextInputType,
TextAreaInputType, TextAreaInputType,
SwitchInputType, SwitchInputType,
DateInputType, DateInputType,
MultiSelectInputType, MultiSelectInputType,
} from '../constants'; } from '../constants';
import { copyTextToClipboard } from '../utils'; import { copyTextToClipboard } from '../utils';
const InputField = ({ const InputField = ({
inputType, inputType,
variables, variables,
setVariables, setVariables,
fieldVisibility, fieldVisibility,
setFieldVisibility, setFieldVisibility,
availableRoles, availableRoles,
...downshiftProps ...downshiftProps
}: any) => { }: any) => {
const props = { const props = {
size: 'sm', size: 'sm',
...downshiftProps, ...downshiftProps,
}; };
const [availableUserRoles, setAvailableUserRoles] = const [availableUserRoles, setAvailableUserRoles] =
useState<string[]>(availableRoles); useState<string[]>(availableRoles);
const [inputFieldVisibility, setInputFieldVisibility] = useState< const [inputFieldVisibility, setInputFieldVisibility] = useState<
Record<string, boolean> Record<string, boolean>
>({ >({
ROLES: false, ROLES: false,
DEFAULT_ROLES: false, DEFAULT_ROLES: false,
PROTECTED_ROLES: false, PROTECTED_ROLES: false,
ALLOWED_ORIGINS: false, ALLOWED_ORIGINS: false,
roles: false, roles: false,
}); });
const [inputData, setInputData] = useState<Record<string, string>>({ const [inputData, setInputData] = useState<Record<string, string>>({
ROLES: '', ROLES: '',
DEFAULT_ROLES: '', DEFAULT_ROLES: '',
PROTECTED_ROLES: '', PROTECTED_ROLES: '',
ALLOWED_ORIGINS: '', ALLOWED_ORIGINS: '',
roles: '', roles: '',
}); });
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] !== '') {
setVariables({ setVariables({
...variables, ...variables,
[type]: [...variables[type], inputData[type]], [type]: [...variables[type], inputData[type]],
}); });
setInputData({ ...inputData, [type]: '' }); setInputData({ ...inputData, [type]: '' });
} }
setInputFieldVisibility({ ...inputFieldVisibility, [type]: false }); setInputFieldVisibility({ ...inputFieldVisibility, [type]: false });
} }
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,
[type]: updatedEnvVars, [type]: updatedEnvVars,
}); });
} }
}; };
if (Object.values(TextInputType).includes(inputType)) { if (Object.values(TextInputType).includes(inputType)) {
return ( return (
<InputGroup size="sm"> <InputGroup size="sm">
<Input <Input
{...props} {...props}
value={variables[inputType] ? variables[inputType] : ''} value={variables[inputType] ? variables[inputType] : ''}
onChange={( onChange={(
event: Event & { event: Event & {
target: HTMLInputElement; target: HTMLInputElement;
}, },
) => ) =>
setVariables({ setVariables({
...variables, ...variables,
[inputType]: event.target.value, [inputType]: event.target.value,
}) })
} }
/> />
<InputRightElement <InputRightElement
children={<FaRegClone color="#bfbfbf" />} children={<FaRegClone color="#bfbfbf" />}
cursor="pointer" cursor="pointer"
onClick={() => copyTextToClipboard(variables[inputType])} onClick={() => copyTextToClipboard(variables[inputType])}
/> />
</InputGroup> </InputGroup>
); );
} }
if (Object.values(HiddenInputType).includes(inputType)) { if (Object.values(HiddenInputType).includes(inputType)) {
return ( return (
<InputGroup size="sm"> <InputGroup size="sm">
<Input <Input
{...props} {...props}
value={variables[inputType] || ''} value={variables[inputType] || ''}
onChange={( onChange={(
event: Event & { event: Event & {
target: HTMLInputElement; target: HTMLInputElement;
}, },
) => ) =>
setVariables({ setVariables({
...variables, ...variables,
[inputType]: event.target.value, [inputType]: event.target.value,
}) })
} }
type={!fieldVisibility[inputType] ? 'password' : 'text'} type={!fieldVisibility[inputType] ? 'password' : 'text'}
/> />
<InputRightElement <InputRightElement
right="15px" right="15px"
children={ children={
<Flex> <Flex>
{fieldVisibility[inputType] ? ( {fieldVisibility[inputType] ? (
<Center <Center
w="25px" w="25px"
margin="0 1.5%" margin="0 1.5%"
cursor="pointer" cursor="pointer"
onClick={() => onClick={() =>
setFieldVisibility({ setFieldVisibility({
...fieldVisibility, ...fieldVisibility,
[inputType]: false, [inputType]: false,
}) })
} }
> >
<FaRegEyeSlash color="#bfbfbf" /> <FaRegEyeSlash color="#bfbfbf" />
</Center> </Center>
) : ( ) : (
<Center <Center
w="25px" w="25px"
margin="0 1.5%" margin="0 1.5%"
cursor="pointer" cursor="pointer"
onClick={() => onClick={() =>
setFieldVisibility({ setFieldVisibility({
...fieldVisibility, ...fieldVisibility,
[inputType]: true, [inputType]: true,
}) })
} }
> >
<FaRegEye color="#bfbfbf" /> <FaRegEye color="#bfbfbf" />
</Center> </Center>
)} )}
<Center <Center
w="25px" w="25px"
margin="0 1.5%" margin="0 1.5%"
cursor="pointer" cursor="pointer"
onClick={() => copyTextToClipboard(variables[inputType])} onClick={() => copyTextToClipboard(variables[inputType])}
> >
<FaRegClone color="#bfbfbf" /> <FaRegClone color="#bfbfbf" />
</Center> </Center>
</Flex> </Flex>
} }
/> />
</InputGroup> </InputGroup>
); );
} }
if (Object.values(ArrayInputType).includes(inputType)) { if (Object.values(ArrayInputType).includes(inputType)) {
return ( return (
<Flex <Flex
border="1px solid #e2e8f0" border="1px solid #e2e8f0"
w="100%" w="100%"
borderRadius={5} borderRadius={5}
paddingTop="0.5%" paddingTop="0.5%"
overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'} overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
overflowY="hidden" overflowY="hidden"
justifyContent="start" justifyContent="start"
alignItems="center" alignItems="center"
> >
{variables[inputType].map((role: string, index: number) => ( {variables[inputType].map((role: string, index: number) => (
<Box key={index} margin="0.5%" role="group"> <Box key={index} margin="0.5%" role="group">
<Tag <Tag
size="sm" size="sm"
variant="outline" variant="outline"
colorScheme="gray" colorScheme="gray"
minW="fit-content" minW="fit-content"
> >
<TagLabel cursor="default">{role}</TagLabel> <TagLabel cursor="default">{role}</TagLabel>
<TagRightIcon <TagRightIcon
boxSize="12px" boxSize="12px"
as={FaTimes} as={FaTimes}
display="none" display="none"
cursor="pointer" cursor="pointer"
_groupHover={{ display: 'block' }} _groupHover={{ display: 'block' }}
onClick={() => onClick={() =>
updateInputHandler( updateInputHandler(
inputType, inputType,
ArrayInputOperations.REMOVE, ArrayInputOperations.REMOVE,
role, role,
) )
} }
/> />
</Tag> </Tag>
</Box> </Box>
))} ))}
{inputFieldVisibility[inputType] ? ( {inputFieldVisibility[inputType] ? (
<Box ml="1%" mb="0.75%"> <Box ml="1%" mb="0.75%">
<Input <Input
type="text" type="text"
size="xs" size="xs"
minW="150px" minW="150px"
placeholder="add a new value" placeholder="add a new value"
value={inputData[inputType] || ''} value={inputData[inputType] || ''}
onChange={(e: any) => { onChange={(e: any) => {
setInputData({ ...inputData, [inputType]: e.target.value }); setInputData({ ...inputData, [inputType]: e.target.value });
}} }}
onBlur={() => onBlur={() =>
updateInputHandler(inputType, ArrayInputOperations.APPEND) updateInputHandler(inputType, ArrayInputOperations.APPEND)
} }
onKeyPress={(event) => { onKeyPress={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
updateInputHandler(inputType, ArrayInputOperations.APPEND); updateInputHandler(inputType, ArrayInputOperations.APPEND);
} }
}} }}
/> />
</Box> </Box>
) : ( ) : (
<Box <Box
marginLeft="0.5%" marginLeft="0.5%"
cursor="pointer" cursor="pointer"
onClick={() => onClick={() =>
setInputFieldVisibility({ setInputFieldVisibility({
...inputFieldVisibility, ...inputFieldVisibility,
[inputType]: true, [inputType]: true,
}) })
} }
> >
<Tag <Tag
size="sm" size="sm"
variant="outline" variant="outline"
colorScheme="gray" colorScheme="gray"
minW="fit-content" minW="fit-content"
> >
<FaPlus /> <FaPlus />
</Tag> </Tag>
</Box> </Box>
)} )}
</Flex> </Flex>
); );
} }
if (Object.values(SelectInputType).includes(inputType)) { if (Object.values(SelectInputType).includes(inputType)) {
const { options, ...rest } = props; const { options, ...rest } = props;
return ( return (
<Select <Select
size="sm" size="sm"
{...rest} {...rest}
value={variables[inputType] ? variables[inputType] : ''} value={variables[inputType] ? variables[inputType] : ''}
onChange={(e) => onChange={(e) =>
setVariables({ ...variables, [inputType]: e.target.value }) setVariables({ ...variables, [inputType]: e.target.value })
} }
> >
{Object.entries(options).map(([key, value]: any) => ( {Object.entries(options).map(([key, value]: any) => (
<option value={value} key={key}> <option value={value} key={key}>
{key} {key}
</option> </option>
))} ))}
</Select> </Select>
); );
} }
if (Object.values(MultiSelectInputType).includes(inputType)) { if (Object.values(MultiSelectInputType).includes(inputType)) {
return ( return (
<Flex w="100%" style={{ position: 'relative' }}> <Flex w="100%" style={{ position: 'relative' }}>
<Flex <Flex
border="1px solid #e2e8f0" border="1px solid #e2e8f0"
w="100%" w="100%"
borderRadius="var(--chakra-radii-sm)" borderRadius="var(--chakra-radii-sm)"
p="1% 0 0 2.5%" p="1% 0 0 2.5%"
overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'} overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
overflowY="hidden" overflowY="hidden"
justifyContent="space-between" justifyContent="space-between"
alignItems="center" alignItems="center"
> >
<Flex justifyContent="start" alignItems="center" w="100%" wrap="wrap"> <Flex justifyContent="start" alignItems="center" w="100%" wrap="wrap">
{variables[inputType].map((role: string, index: number) => ( {variables[inputType].map((role: string, index: number) => (
<Box key={index} margin="0.5%" role="group"> <Box key={index} margin="0.5%" role="group">
<Tag <Tag
size="sm" size="sm"
variant="outline" variant="outline"
colorScheme="gray" colorScheme="gray"
minW="fit-content" minW="fit-content"
> >
<TagLabel cursor="default">{role}</TagLabel> <TagLabel cursor="default">{role}</TagLabel>
<TagRightIcon <TagRightIcon
boxSize="12px" boxSize="12px"
as={FaTimes} as={FaTimes}
display="none" display="none"
cursor="pointer" cursor="pointer"
_groupHover={{ display: 'block' }} _groupHover={{ display: 'block' }}
onClick={() => onClick={() =>
updateInputHandler( updateInputHandler(
inputType, inputType,
ArrayInputOperations.REMOVE, ArrayInputOperations.REMOVE,
role, role,
) )
} }
/> />
</Tag> </Tag>
</Box> </Box>
))} ))}
</Flex> </Flex>
<Menu matchWidth={true}> <Menu matchWidth={true}>
<MenuButton px="10px" py="7.5px"> <MenuButton px="10px" py="7.5px">
<FaAngleDown /> <FaAngleDown />
</MenuButton> </MenuButton>
<MenuList <MenuList
position="absolute" position="absolute"
top="0" top="0"
right="0" right="0"
zIndex="10" zIndex="10"
maxH="150" maxH="150"
overflowX="scroll" overflowX="scroll"
> >
<MenuOptionGroup <MenuOptionGroup
title={undefined} title={undefined}
value={variables[inputType]} value={variables[inputType]}
type="checkbox" type="checkbox"
onChange={(values: string[] | string) => { onChange={(values: string[] | string) => {
setVariables({ setVariables({
...variables, ...variables,
[inputType]: values, [inputType]: values,
}); });
}} }}
> >
{availableUserRoles.map((role) => { {availableUserRoles.map((role) => {
return ( return (
<MenuItemOption <MenuItemOption
key={`multiselect-menu-${role}`} key={`multiselect-menu-${role}`}
value={role} value={role}
> >
{role} {role}
</MenuItemOption> </MenuItemOption>
); );
})} })}
</MenuOptionGroup> </MenuOptionGroup>
</MenuList> </MenuList>
</Menu> </Menu>
</Flex> </Flex>
</Flex> </Flex>
); );
} }
if (Object.values(TextAreaInputType).includes(inputType)) { if (Object.values(TextAreaInputType).includes(inputType)) {
return ( return (
<Textarea <Textarea
{...props} {...props}
size="lg" size="lg"
fontSize={14} fontSize={14}
value={variables[inputType] ? variables[inputType] : ''} value={variables[inputType] ? variables[inputType] : ''}
onChange={( onChange={(
event: Event & { event: Event & {
target: HTMLInputElement; target: HTMLInputElement;
}, },
) => ) =>
setVariables({ setVariables({
...variables, ...variables,
[inputType]: event.target.value, [inputType]: event.target.value,
}) })
} }
/> />
); );
} }
if (Object.values(SwitchInputType).includes(inputType)) { if (Object.values(SwitchInputType).includes(inputType)) {
return ( return (
<Flex w="25%" justifyContent="space-between"> <Flex w="25%" justifyContent="space-between">
<Text h="75%" fontWeight="bold" marginRight="2"> <Text h="75%" fontWeight="bold" marginRight="2">
Off Off
</Text> </Text>
<Switch <Switch
size="md" size="md"
isChecked={variables[inputType]} isChecked={variables[inputType]}
onChange={() => { onChange={() => {
setVariables({ setVariables({
...variables, ...variables,
[inputType]: !variables[inputType], [inputType]: !variables[inputType],
}); });
}} }}
/> />
<Text h="75%" fontWeight="bold" marginLeft="2"> <Text h="75%" fontWeight="bold" marginLeft="2">
On On
</Text> </Text>
</Flex> </Flex>
); );
} }
if (Object.values(DateInputType).includes(inputType)) { if (Object.values(DateInputType).includes(inputType)) {
return ( return (
<Flex border="1px solid #e2e8f0" w="100%" h="33px" padding="1%"> <Flex border="1px solid #e2e8f0" w="100%" h="33px" padding="1%">
<input <input
type="date" type="date"
style={{ width: '100%', paddingLeft: '2.5%' }} style={{ width: '100%', paddingLeft: '2.5%' }}
value={variables[inputType] ? variables[inputType] : ''} value={variables[inputType] ? variables[inputType] : ''}
onChange={(e) => onChange={(e) =>
setVariables({ ...variables, [inputType]: e.target.value }) setVariables({ ...variables, [inputType]: e.target.value })
} }
/> />
</Flex> </Flex>
); );
} }
return null; return null;
}; };
export default InputField; export default InputField;

486
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 = `{