Invite members (#161)
* Allow user invitations * Restyle inviting members * Remove annoying comment * Add page for accepting an invitation * Send invitation email with Brevo * Prevent admins from removing personal project users * Mark access ceontrol for cancelProjectInvitation * Make RadioGroup controlled * Shorten form helper text * Use nodemailer to send emails * Update .env.example
This commit is contained in:
arcticfly
128
app/src/components/projectSettings/InviteMemberModal.tsx
Normal file
128
app/src/components/projectSettings/InviteMemberModal.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Input,
|
||||
FormHelperText,
|
||||
HStack,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Spinner,
|
||||
Text,
|
||||
VStack,
|
||||
RadioGroup,
|
||||
Radio,
|
||||
} from "@chakra-ui/react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { api } from "~/utils/api";
|
||||
import { useHandledAsyncCallback, useSelectedProject } from "~/utils/hooks";
|
||||
import { maybeReportError } from "~/utils/errorHandling/maybeReportError";
|
||||
import { type ProjectUserRole } from "@prisma/client";
|
||||
|
||||
export const InviteMemberModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
const selectedProject = useSelectedProject().data;
|
||||
const utils = api.useContext();
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [role, setRole] = useState<ProjectUserRole>("MEMBER");
|
||||
|
||||
useEffect(() => {
|
||||
setEmail("");
|
||||
setRole("MEMBER");
|
||||
}, [isOpen]);
|
||||
|
||||
const emailIsValid = !email || !email.match(/.+@.+\..+/);
|
||||
|
||||
const inviteMemberMutation = api.users.inviteToProject.useMutation();
|
||||
|
||||
const [inviteMember, isInviting] = useHandledAsyncCallback(async () => {
|
||||
if (!selectedProject?.id || !role) return;
|
||||
const resp = await inviteMemberMutation.mutateAsync({
|
||||
projectId: selectedProject.id,
|
||||
email,
|
||||
role,
|
||||
});
|
||||
if (maybeReportError(resp)) return;
|
||||
await utils.projects.get.invalidate();
|
||||
onClose();
|
||||
}, [inviteMemberMutation, email, role, selectedProject?.id, onClose]);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent w={1200}>
|
||||
<ModalHeader>
|
||||
<HStack>
|
||||
<Text>Invite Member</Text>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<VStack spacing={8} alignItems="flex-start">
|
||||
<Text>
|
||||
Invite a new member to <b>{selectedProject?.name}</b>.
|
||||
</Text>
|
||||
|
||||
<RadioGroup
|
||||
value={role}
|
||||
onChange={(e) => setRole(e as ProjectUserRole)}
|
||||
colorScheme="orange"
|
||||
>
|
||||
<VStack w="full" alignItems="flex-start">
|
||||
<Radio value="MEMBER">
|
||||
<Text fontSize="sm">MEMBER</Text>
|
||||
</Radio>
|
||||
<Radio value="ADMIN">
|
||||
<Text fontSize="sm">ADMIN</Text>
|
||||
</Radio>
|
||||
</VStack>
|
||||
</RadioGroup>
|
||||
<FormControl>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<Input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && (e.metaKey || e.ctrlKey || e.shiftKey)) {
|
||||
e.preventDefault();
|
||||
e.currentTarget.blur();
|
||||
inviteMember();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<FormHelperText>Enter the email of the person you want to invite.</FormHelperText>
|
||||
</FormControl>
|
||||
</VStack>
|
||||
</ModalBody>
|
||||
<ModalFooter mt={4}>
|
||||
<HStack>
|
||||
<Button colorScheme="gray" onClick={onClose} minW={24}>
|
||||
<Text>Cancel</Text>
|
||||
</Button>
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
onClick={inviteMember}
|
||||
minW={24}
|
||||
isDisabled={emailIsValid || isInviting}
|
||||
>
|
||||
{isInviting ? <Spinner boxSize={4} /> : <Text>Send Invitation</Text>}
|
||||
</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
119
app/src/components/projectSettings/MemberTable.tsx
Normal file
119
app/src/components/projectSettings/MemberTable.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Table,
|
||||
Thead,
|
||||
Tr,
|
||||
Th,
|
||||
Tbody,
|
||||
Td,
|
||||
IconButton,
|
||||
useDisclosure,
|
||||
Text,
|
||||
Button,
|
||||
} from "@chakra-ui/react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { BsTrash } from "react-icons/bs";
|
||||
import { type User } from "@prisma/client";
|
||||
|
||||
import { useHandledAsyncCallback, useSelectedProject } from "~/utils/hooks";
|
||||
import { InviteMemberModal } from "./InviteMemberModal";
|
||||
import { RemoveMemberDialog } from "./RemoveMemberDialog";
|
||||
import { api } from "~/utils/api";
|
||||
import { maybeReportError } from "~/utils/errorHandling/maybeReportError";
|
||||
|
||||
const MemberTable = () => {
|
||||
const selectedProject = useSelectedProject().data;
|
||||
const session = useSession().data;
|
||||
|
||||
const utils = api.useContext();
|
||||
|
||||
const [memberToRemove, setMemberToRemove] = useState<User | null>(null);
|
||||
const inviteMemberModal = useDisclosure();
|
||||
|
||||
const cancelInvitationMutation = api.users.cancelProjectInvitation.useMutation();
|
||||
|
||||
const [cancelInvitation, isCancelling] = useHandledAsyncCallback(
|
||||
async (invitationToken: string) => {
|
||||
if (!selectedProject?.id) return;
|
||||
const resp = await cancelInvitationMutation.mutateAsync({
|
||||
invitationToken,
|
||||
});
|
||||
if (maybeReportError(resp)) return;
|
||||
await utils.projects.get.invalidate();
|
||||
},
|
||||
[selectedProject?.id, cancelInvitationMutation],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Name</Th>
|
||||
<Th>Email</Th>
|
||||
<Th>Role</Th>
|
||||
{selectedProject?.role === "ADMIN" && <Th />}
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{selectedProject?.projectUsers.map((member) => {
|
||||
return (
|
||||
<Tr key={member.id}>
|
||||
<Td>
|
||||
<Text fontWeight="bold">{member.user.name}</Text>
|
||||
</Td>
|
||||
<Td>{member.user.email}</Td>
|
||||
<Td fontSize="sm">{member.role}</Td>
|
||||
{selectedProject.role === "ADMIN" && (
|
||||
<Td textAlign="end">
|
||||
{member.user.id !== session?.user?.id &&
|
||||
member.user.id !== selectedProject.personalProjectUserId && (
|
||||
<IconButton
|
||||
aria-label="Remove member"
|
||||
colorScheme="red"
|
||||
icon={<BsTrash />}
|
||||
onClick={() => setMemberToRemove(member.user)}
|
||||
/>
|
||||
)}
|
||||
</Td>
|
||||
)}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
{selectedProject?.projectUserInvitations?.map((invitation) => {
|
||||
return (
|
||||
<Tr key={invitation.id}>
|
||||
<Td>
|
||||
<Text as="i">Invitation pending</Text>
|
||||
</Td>
|
||||
<Td>{invitation.email}</Td>
|
||||
<Td fontSize="sm">{invitation.role}</Td>
|
||||
{selectedProject.role === "ADMIN" && (
|
||||
<Td textAlign="end">
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="red"
|
||||
variant="ghost"
|
||||
onClick={() => cancelInvitation(invitation.invitationToken)}
|
||||
isLoading={isCancelling}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Td>
|
||||
)}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<InviteMemberModal isOpen={inviteMemberModal.isOpen} onClose={inviteMemberModal.onClose} />
|
||||
<RemoveMemberDialog
|
||||
member={memberToRemove}
|
||||
isOpen={!!memberToRemove}
|
||||
onClose={() => setMemberToRemove(null)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemberTable;
|
||||
71
app/src/components/projectSettings/RemoveMemberDialog.tsx
Normal file
71
app/src/components/projectSettings/RemoveMemberDialog.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import {
|
||||
Button,
|
||||
AlertDialog,
|
||||
AlertDialogBody,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogContent,
|
||||
AlertDialogOverlay,
|
||||
Text,
|
||||
VStack,
|
||||
Spinner,
|
||||
} from "@chakra-ui/react";
|
||||
import { type User } from "@prisma/client";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import { useRef } from "react";
|
||||
import { api } from "~/utils/api";
|
||||
import { useHandledAsyncCallback, useSelectedProject } from "~/utils/hooks";
|
||||
|
||||
export const RemoveMemberDialog = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
member,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
member: User | null;
|
||||
}) => {
|
||||
const selectedProject = useSelectedProject();
|
||||
const removeUserMutation = api.users.removeUserFromProject.useMutation();
|
||||
const utils = api.useContext();
|
||||
const router = useRouter();
|
||||
|
||||
const cancelRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const [onRemoveConfirm, isRemoving] = useHandledAsyncCallback(async () => {
|
||||
if (!selectedProject.data?.id || !member?.id) return;
|
||||
await removeUserMutation.mutateAsync({ projectId: selectedProject.data.id, userId: member.id });
|
||||
await utils.projects.get.invalidate();
|
||||
onClose();
|
||||
}, [removeUserMutation, selectedProject, router]);
|
||||
|
||||
return (
|
||||
<AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader fontSize="lg" fontWeight="bold">
|
||||
Remove Member
|
||||
</AlertDialogHeader>
|
||||
|
||||
<AlertDialogBody>
|
||||
<VStack spacing={4} alignItems="flex-start">
|
||||
<Text>
|
||||
Are you sure you want to remove <b>{member?.name}</b> from the project?
|
||||
</Text>
|
||||
</VStack>
|
||||
</AlertDialogBody>
|
||||
|
||||
<AlertDialogFooter>
|
||||
<Button ref={cancelRef} onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button colorScheme="red" onClick={onRemoveConfirm} ml={3} w={20}>
|
||||
{isRemoving ? <Spinner /> : "Remove"}
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogOverlay>
|
||||
</AlertDialog>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user