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

edit user details modal added

Browse Source
This commit is contained in:
Anik Ghosh
2022-01-30 10:39:35 +05:30
parent 681ffc65f1
commit 388530a69c
6 changed files with 456 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -249,16 +249,16 @@ export default function Environment() {
</Center>
<Center w="45%" marginRight="1.5%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.GOOGLE_CLIENT_ID}
placeholder="Google Client ID"
/>
</Center>
<Center w="45%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
fieldVisibility={fieldVisibility}
setFieldVisibility={setFieldVisibility}
inputType={HiddenInputType.GOOGLE_CLIENT_SECRET}
@@ -277,16 +277,16 @@ export default function Environment() {
</Center>
<Center w="45%" marginRight="1.5%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.GITHUB_CLIENT_ID}
placeholder="Github Client ID"
/>
</Center>
<Center w="45%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
fieldVisibility={fieldVisibility}
setFieldVisibility={setFieldVisibility}
inputType={HiddenInputType.GITHUB_CLIENT_SECRET}
@@ -305,16 +305,16 @@ export default function Environment() {
</Center>
<Center w="45%" marginRight="1.5%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.FACEBOOK_CLIENT_ID}
placeholder="Facebook Client ID"
/>
</Center>
<Center w="45%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
fieldVisibility={fieldVisibility}
setFieldVisibility={setFieldVisibility}
inputType={HiddenInputType.FACEBOOK_CLIENT_SECRET}
@@ -334,8 +334,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={ArrayInputType.ROLES}
/>
</Center>
@@ -346,8 +346,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={ArrayInputType.DEFAULT_ROLES}
/>
</Center>
@@ -358,8 +358,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={ArrayInputType.PROTECTED_ROLES}
/>
</Center>
@@ -378,8 +378,8 @@ export default function Environment() {
<Flex w="100%" justifyContent="space-between">
<Flex flex="2">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={SelectInputType.JWT_TYPE}
isDisabled={true}
defaultValue={SelectInputType.JWT_TYPE}
@@ -399,8 +399,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
fieldVisibility={fieldVisibility}
setFieldVisibility={setFieldVisibility}
inputType={HiddenInputType.JWT_SECRET}
@@ -413,8 +413,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.JWT_ROLE_CLAIM}
/>
</Center>
@@ -431,8 +431,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.REDIS_URL}
/>
</Center>
@@ -449,8 +449,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.SMTP_HOST}
/>
</Center>
@@ -461,8 +461,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.SMTP_PORT}
/>
</Center>
@@ -473,8 +473,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.SMTP_USERNAME}
/>
</Center>
@@ -485,8 +485,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
fieldVisibility={fieldVisibility}
setFieldVisibility={setFieldVisibility}
inputType={HiddenInputType.SMTP_PASSWORD}
@@ -499,8 +499,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.SENDER_EMAIL}
/>
</Center>
@@ -517,8 +517,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={ArrayInputType.ALLOWED_ORIGINS}
/>
</Center>
@@ -535,8 +535,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.ORGANIZATION_NAME}
/>
</Center>
@@ -547,8 +547,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.ORGANIZATION_LOGO}
/>
</Center>
@@ -562,8 +562,8 @@ export default function Environment() {
<Flex>
<Center w="100%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextAreaInputType.CUSTOM_ACCESS_TOKEN_SCRIPT}
placeholder="Add script here"
minH="25vh"
@@ -582,8 +582,8 @@ export default function Environment() {
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={SwitchInputType.DISABLE_LOGIN_PAGE}
/>
</Flex>
@@ -594,8 +594,8 @@ export default function Environment() {
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={SwitchInputType.DISABLE_EMAIL_VERIFICATION}
/>
</Flex>
@@ -606,8 +606,8 @@ export default function Environment() {
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
/>
</Flex>
@@ -618,8 +618,8 @@ export default function Environment() {
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={SwitchInputType.DISABLE_BASIC_AUTHENTICATION}
/>
</Flex>
@@ -647,8 +647,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.DATABASE_NAME}
isDisabled={true}
/>
@@ -660,8 +660,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.DATABASE_TYPE}
isDisabled={true}
/>
@@ -673,8 +673,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={TextInputType.DATABASE_URL}
isDisabled={true}
/>
@@ -743,8 +743,8 @@ export default function Environment() {
</Flex>
<Center w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
variables={envVariables}
setVariables={setEnvVariables}
inputType={HiddenInputType.ADMIN_SECRET}
fieldVisibility={fieldVisibility}
setFieldVisibility={setFieldVisibility}

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

@@ -27,6 +27,7 @@ import {
MenuButton,
MenuList,
MenuItem,
useToast,
} from '@chakra-ui/react';
import {
FaAngleLeft,
@@ -38,6 +39,7 @@ import {
} from 'react-icons/fa';
import { UserDetailsQuery } from '../graphql/queries';
import { UpdateUser } from '../graphql/mutation';
import EditUserModal from '../components/EditUserModal';
interface paginationPropTypes {
limit: number;
@@ -85,6 +87,7 @@ const getLimits = (pagination: paginationPropTypes) => {
export default function Users() {
const client = useClient();
const toast = useToast();
const [paginationProps, setPaginationProps] =
React.useState<paginationPropTypes>({
limit: 5,
@@ -94,7 +97,7 @@ export default function Users() {
maxPages: 1,
});
const [userList, setUserList] = React.useState<userDataTypes[]>([]);
const updateData = async () => {
const updateUserList = async () => {
const { data } = await client
.query(UserDetailsQuery, {
params: {
@@ -110,15 +113,13 @@ export default function Users() {
const maxPages = getMaxPages(pagination);
setPaginationProps({ ...paginationProps, ...pagination, maxPages });
setUserList(users);
console.log('users ==>> ', users);
console.log('pagination ==>> ', { ...pagination, maxPages });
}
};
React.useEffect(() => {
updateData();
updateUserList();
}, []);
React.useEffect(() => {
updateData();
updateUserList();
}, [paginationProps.page, paginationProps.limit]);
const paginationHandler = (value: Record<string, number>) => {
@@ -127,7 +128,7 @@ export default function Users() {
const userVerificationHandler = async (user: userDataTypes) => {
const { id, email } = user;
await client
const res = await client
.mutation(UpdateUser, {
params: {
id,
@@ -136,9 +137,23 @@ export default function Users() {
},
})
.toPromise();
updateData();
if (res.error) {
toast({
title: 'User verification failed',
isClosable: true,
status: 'error',
position: 'bottom-right',
});
} else if (res.data?._update_user?.id) {
toast({
title: 'User verification successful',
isClosable: true,
status: 'success',
position: 'bottom-right',
});
}
updateUserList();
};
return (
<Box m="5" py="5" px="10" bg="white" rounded="md">
<Flex margin="2% 0" justifyContent="space-between" alignItems="center">
@@ -157,44 +172,52 @@ export default function Users() {
</Tr>
</Thead>
<Tbody>
{userList.map((user: userDataTypes) => (
<Tr key={user.id} style={{ fontSize: 14 }}>
<Td>{user.email}</Td>
<Td>{dayjs(user.created_at).format('MMM DD, YYYY')}</Td>
<Td>
<Tag
size="sm"
variant="outline"
colorScheme={user.email_verified ? 'green' : 'yellow'}
>
{user.email_verified.toString()}
</Tag>
</Td>
<Td>
<Menu>
<MenuButton as={Button} variant="unstyled" size="sm">
<Flex justifyContent="space-between" alignItems="center">
<Text fontSize="sm" fontWeight="light">
Menu
</Text>
<FaAngleDown style={{ marginLeft: 10 }} />
</Flex>
</MenuButton>
<MenuList>
<MenuItem value="update">Update User Details</MenuItem>
{!user.email_verified && (
<MenuItem
value="verify"
onClick={() => userVerificationHandler(user)}
{userList.map((user: userDataTypes) => {
const { email_verified, created_at, ...rest }: any = user;
return (
<Tr key={user.id} style={{ fontSize: 14 }}>
<Td>{user.email}</Td>
<Td>{dayjs(user.created_at).format('MMM DD, YYYY')}</Td>
<Td>
<Tag
size="sm"
variant="outline"
colorScheme={user.email_verified ? 'green' : 'yellow'}
>
{user.email_verified.toString()}
</Tag>
</Td>
<Td>
<Menu>
<MenuButton as={Button} variant="unstyled" size="sm">
<Flex
justifyContent="space-between"
alignItems="center"
>
Verify User
</MenuItem>
)}
</MenuList>
</Menu>
</Td>
</Tr>
))}
<Text fontSize="sm" fontWeight="light">
Menu
</Text>
<FaAngleDown style={{ marginLeft: 10 }} />
</Flex>
</MenuButton>
<MenuList>
<EditUserModal
user={rest}
updateUserList={updateUserList}
/>
{!user.email_verified && (
<MenuItem
onClick={() => userVerificationHandler(user)}
>
Verify User
</MenuItem>
)}
</MenuList>
</Menu>
</Td>
</Tr>
);
})}
</Tbody>
{paginationProps.maxPages > 1 && (
<TableCaption>