1dcdba04a6
Allows for the creation of user accounts. A few notes on the specifics: - Experiments are the main access control objects. If you can view an experiment, you can view all its prompts/scenarios/evals. If you can edit it, you can edit or delete all of those as well. - Experiments are owned by Organizations in the database. Organizations can have multiple members and members can have roles of ADMIN, MEMBER or VIEWER. - Organizations can either be "personal" or general. Each user has a "personal" organization created as soon as they try to create an experiment. There's currently no UI support for creating general orgs or adding users to them; they're just in the database to future-proof all the ACL logic. - You can require that a user is signed-in to see a route using the `protectedProcedure` helper. When you use `protectedProcedure`, you also have to call `ctx.markAccessControlRun()` (or delegate to a function that does it for you; see accessControl.ts). This is to remind us to actually check for access control when we define a new endpoint.
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import {
|
|
HStack,
|
|
Icon,
|
|
Image,
|
|
VStack,
|
|
Text,
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
Link,
|
|
} from "@chakra-ui/react";
|
|
import { type Session } from "next-auth";
|
|
import { signOut } from "next-auth/react";
|
|
import { BsBoxArrowRight, BsChevronRight, BsPersonCircle } from "react-icons/bs";
|
|
|
|
export default function UserMenu({ user }: { user: Session }) {
|
|
const profileImage = user.user.image ? (
|
|
<Image src={user.user.image} alt="profile picture" w={8} h={8} borderRadius="50%" />
|
|
) : (
|
|
<Icon as={BsPersonCircle} boxSize="md" />
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Popover placement="right">
|
|
<PopoverTrigger>
|
|
<HStack
|
|
px={2}
|
|
py={2}
|
|
borderColor={"gray.200"}
|
|
borderTopWidth={1}
|
|
borderBottomWidth={1}
|
|
cursor="pointer"
|
|
_hover={{
|
|
bgColor: "gray.200",
|
|
}}
|
|
>
|
|
{profileImage}
|
|
<VStack spacing={0} align="start" flex={1}>
|
|
<Text fontWeight="bold" fontSize="sm">
|
|
{user.user.name}
|
|
</Text>
|
|
<Text color="gray.500" fontSize="xs">
|
|
{user.user.email}
|
|
</Text>
|
|
</VStack>
|
|
<Icon as={BsChevronRight} boxSize={4} color="gray.500" />
|
|
</HStack>
|
|
</PopoverTrigger>
|
|
<PopoverContent _focusVisible={{ boxShadow: "unset", outline: "unset" }} maxW="200px">
|
|
<VStack align="stretch" spacing={0}>
|
|
{/* sign out */}
|
|
<HStack
|
|
as={Link}
|
|
onClick={() => {
|
|
signOut().catch(console.error);
|
|
}}
|
|
px={4}
|
|
py={2}
|
|
spacing={4}
|
|
color="gray.500"
|
|
fontSize="sm"
|
|
>
|
|
<Icon as={BsBoxArrowRight} boxSize={6} />
|
|
<Text>Sign out</Text>
|
|
</HStack>
|
|
</VStack>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</>
|
|
);
|
|
}
|