@better-auth-ui/heroui 1.6.8 → 1.6.9

package/src/components/auth/organization/organization-member-row.tsx

@@ -0,0 +1,157 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useHasPermission,
+  useSession,
+  useUpdateMemberRole
+} from "@better-auth-ui/react"
+import { ArrowRightFromSquare, Pencil, TrashBin } from "@gravity-ui/icons"
+import { Button, Dropdown, Label, Spinner, Table, toast } from "@heroui/react"
+import type { Member, Organization, User } from "better-auth/client"
+import { useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { UserView } from "../user/user-view"
+import { LeaveOrganizationDialog } from "./leave-organization-dialog"
+import { OrganizationMemberRowSkeleton } from "./organization-member-row-skeleton"
+import { RemoveMemberDialog } from "./remove-member-dialog"
+
+export type OrganizationMemberRowProps = {
+  member: Member & { user: Partial<User> }
+  isOwner?: boolean
+  organization: Organization
+}
+
+export function OrganizationMemberRow({
+  member,
+  isOwner,
+  organization
+}: OrganizationMemberRowProps) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: session } = useSession(authClient)
+
+  const { data: hasUpdatePermission, isPending: updatePermissionPending } =
+    useHasPermission(authClient as OrganizationAuthClient, {
+      permissions: { member: ["update"] }
+    })
+
+  const { data: hasDeletePermission, isPending: deletePermissionPending } =
+    useHasPermission(authClient as OrganizationAuthClient, {
+      permissions: { member: ["delete"] }
+    })
+
+  const isPending = updatePermissionPending || deletePermissionPending
+
+  const { mutate: updateMemberRole, isPending: isUpdatingRole } =
+    useUpdateMemberRole(authClient as OrganizationAuthClient, {
+      onSuccess: () => toast.success(organizationLocalization.memberRoleUpdated)
+    })
+
+  const roleLabel = roles?.[member.role] ?? member.role
+
+  const assignableRoles = Object.entries(roles).filter(
+    ([key]) => isOwner || key !== "owner"
+  )
+
+  const isCurrentUser = session?.user.id === member.userId
+
+  const [removeOpen, setRemoveOpen] = useState(false)
+  const [leaveOpen, setLeaveOpen] = useState(false)
+
+  if (isPending) {
+    return <OrganizationMemberRowSkeleton />
+  }
+
+  return (
+    <Table.Row>
+      <Table.Cell>
+        <UserView user={member.user} />
+      </Table.Cell>
+
+      <Table.Cell>{roleLabel}</Table.Cell>
+
+      <Table.Cell>
+        <div className="flex items-center justify-end gap-1">
+          {hasUpdatePermission?.success && (
+            <Dropdown>
+              <Button
+                isIconOnly
+                size="sm"
+                variant="tertiary"
+                isDisabled={isUpdatingRole}
+                aria-label={organizationLocalization.changeMemberRole}
+              >
+                {isUpdatingRole ? (
+                  <Spinner color="current" size="sm" />
+                ) : (
+                  <Pencil />
+                )}
+              </Button>
+
+              <Dropdown.Popover className="min-w-fit">
+                <Dropdown.Menu>
+                  {assignableRoles.map(([role, label]) => (
+                    <Dropdown.Item
+                      key={role}
+                      textValue={label}
+                      isDisabled={member.role === role}
+                      onAction={() =>
+                        updateMemberRole({ memberId: member.id, role })
+                      }
+                    >
+                      <Label>{label}</Label>
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown.Popover>
+            </Dropdown>
+          )}
+
+          {isCurrentUser ? (
+            <Button
+              isIconOnly
+              size="sm"
+              variant="danger-soft"
+              aria-label={organizationLocalization.leaveOrganization}
+              onPress={() => setLeaveOpen(true)}
+            >
+              <ArrowRightFromSquare />
+            </Button>
+          ) : (
+            hasDeletePermission?.success && (
+              <Button
+                isIconOnly
+                size="sm"
+                variant="danger-soft"
+                aria-label={organizationLocalization.removeMember}
+                onPress={() => setRemoveOpen(true)}
+              >
+                <TrashBin />
+              </Button>
+            )
+          )}
+        </div>
+
+        {isCurrentUser && organization ? (
+          <LeaveOrganizationDialog
+            isOpen={leaveOpen}
+            onOpenChange={setLeaveOpen}
+            organization={organization}
+          />
+        ) : (
+          hasDeletePermission?.success && (
+            <RemoveMemberDialog
+              isOpen={removeOpen}
+              onOpenChange={setRemoveOpen}
+              member={member}
+            />
+          )
+        )}
+      </Table.Cell>
+    </Table.Row>
+  )
+}

package/src/components/auth/organization/organization-members.tsx

@@ -0,0 +1,284 @@
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useAuthPlugin,
+  useHasPermission,
+  useListOrganizationMembers,
+  useSession
+} from "@better-auth-ui/react"
+import { ChevronUp, Funnel, Xmark } from "@gravity-ui/icons"
+import {
+  Button,
+  Chip,
+  cn,
+  Dropdown,
+  Label,
+  SearchField,
+  type SortDescriptor,
+  Table
+} from "@heroui/react"
+import type { Member } from "better-auth/client"
+import { type ComponentProps, type ReactNode, useMemo, useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { InviteMemberDialog } from "./invite-member-dialog"
+import { OrganizationMemberRow } from "./organization-member-row"
+import { OrganizationMemberRowSkeleton } from "./organization-member-row-skeleton"
+
+/** Props for the {@link OrganizationMembers} component. */
+export type OrganizationMembersProps = {
+  className?: string
+}
+
+/**
+ * Organization members table with title, invite control, and per-row actions.
+ */
+export function OrganizationMembers({
+  className,
+  ...props
+}: OrganizationMembersProps & ComponentProps<"div">) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: session } = useSession(authClient)
+  const { data: activeOrganization, isPending: activeOrganizationPending } =
+    useActiveOrganization(authClient as OrganizationAuthClient)
+  const { data: membersData, isPending: membersPending } =
+    useListOrganizationMembers(authClient as OrganizationAuthClient)
+
+  const { isPending: updatePermissionPending } = useHasPermission(
+    authClient as OrganizationAuthClient,
+    {
+      permissions: { member: ["update"] }
+    }
+  )
+  const { isPending: deletePermissionPending } = useHasPermission(
+    authClient as OrganizationAuthClient,
+    {
+      permissions: { member: ["delete"] }
+    }
+  )
+
+  const isPending =
+    activeOrganizationPending ||
+    membersPending ||
+    updatePermissionPending ||
+    deletePermissionPending
+
+  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>()
+  const [roleFilter, setRoleFilter] = useState("all")
+  const [search, setSearch] = useState("")
+
+  const filteredMembers = useMemo(() => {
+    return membersData?.members.filter(
+      (member) =>
+        (roleFilter === "all" || member.role === roleFilter) &&
+        (member.user.name.toLowerCase().includes(search.toLowerCase()) ||
+          member.user.email.toLowerCase().includes(search.toLowerCase()))
+    )
+  }, [search, membersData?.members, roleFilter])
+
+  const sortedMembers = useMemo(() => {
+    if (!sortDescriptor) return filteredMembers
+    if (!filteredMembers) return filteredMembers
+
+    return [...filteredMembers].sort((a, b) => {
+      const col = sortDescriptor.column as keyof Member | "user"
+      const first =
+        col === "user" ? a.user.name || a.user.email : String(a[col])
+      const second =
+        col === "user" ? b.user.name || b.user.email : String(b[col])
+
+      let cmp = first.localeCompare(second)
+      if (sortDescriptor.direction === "descending") {
+        cmp *= -1
+      }
+
+      return cmp
+    })
+  }, [sortDescriptor, filteredMembers])
+
+  const [inviteOpen, setInviteOpen] = useState(false)
+
+  const isOwner = membersData?.members.some(
+    (member) => member.role === "owner" && member.userId === session?.user.id
+  )
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)} {...props}>
+      <div className="flex items-end justify-between gap-3">
+        <h3 className="truncate text-sm font-semibold">
+          {organizationLocalization.members}
+        </h3>
+
+        <Button
+          className="shrink-0"
+          size="sm"
+          isDisabled={isPending}
+          onPress={() => setInviteOpen(true)}
+        >
+          {organizationLocalization.inviteMember}
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-3">
+          <SearchField
+            className="min-w-0"
+            aria-label={organizationLocalization.search}
+            value={search}
+            onChange={setSearch}
+            isDisabled={isPending}
+          >
+            <SearchField.Group>
+              <SearchField.SearchIcon />
+
+              <SearchField.Input
+                placeholder={organizationLocalization.search}
+                className="sm:w-[200px]"
+              />
+
+              <SearchField.ClearButton />
+            </SearchField.Group>
+          </SearchField>
+
+          <Dropdown>
+            <Button size="sm" variant="secondary" isDisabled={isPending}>
+              <Funnel />
+
+              {organizationLocalization.role}
+            </Button>
+
+            <Dropdown.Popover>
+              <Dropdown.Menu
+                selectionMode="single"
+                selectedKeys={new Set([roleFilter])}
+                onSelectionChange={(keys) => {
+                  const key = [...keys][0] as string | undefined
+                  setRoleFilter(key ?? "all")
+                }}
+              >
+                <Dropdown.Item
+                  id="all"
+                  textValue={organizationLocalization.all}
+                >
+                  <Label>{organizationLocalization.all}</Label>
+
+                  <Dropdown.ItemIndicator />
+                </Dropdown.Item>
+
+                {Object.entries(roles).map(([role, label]) => (
+                  <Dropdown.Item key={role} id={role} textValue={label}>
+                    <Label>{label}</Label>
+
+                    <Dropdown.ItemIndicator />
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown.Popover>
+          </Dropdown>
+        </div>
+
+        {roleFilter !== "all" && (
+          <Chip size="sm" variant="secondary" className="w-fit">
+            <Chip.Label>
+              {organizationLocalization.role}:{" "}
+              <span className="capitalize">
+                {roles?.[roleFilter] ?? roleFilter}
+              </span>
+            </Chip.Label>
+
+            <button
+              type="button"
+              aria-label={organizationLocalization.clear}
+              className="text-muted hover:text-foreground inline-flex cursor-pointer items-center"
+              onClick={() => setRoleFilter("all")}
+            >
+              <Xmark className="size-3" />
+            </button>
+          </Chip>
+        )}
+
+        <Table>
+          <Table.ScrollContainer>
+            <Table.Content
+              aria-label={organizationLocalization.members}
+              sortDescriptor={sortDescriptor}
+              onSortChange={(descriptor) => {
+                const shouldReset =
+                  sortDescriptor?.column === descriptor.column &&
+                  descriptor.direction === "ascending"
+                setSortDescriptor(shouldReset ? undefined : descriptor)
+              }}
+            >
+              <Table.Header>
+                <Table.Column allowsSorting isRowHeader id="user">
+                  {({ sortDirection }) => (
+                    <SortableColumnHeader sortDirection={sortDirection}>
+                      {organizationLocalization.member}
+                    </SortableColumnHeader>
+                  )}
+                </Table.Column>
+
+                <Table.Column allowsSorting id="role">
+                  {({ sortDirection }) => (
+                    <SortableColumnHeader sortDirection={sortDirection}>
+                      {organizationLocalization.role}
+                    </SortableColumnHeader>
+                  )}
+                </Table.Column>
+
+                <Table.Column className="text-end">
+                  {organizationLocalization.actions}
+                </Table.Column>
+              </Table.Header>
+
+              <Table.Body>
+                {isPending ? (
+                  <OrganizationMemberRowSkeleton />
+                ) : (
+                  !!activeOrganization &&
+                  sortedMembers?.map((member) => (
+                    <OrganizationMemberRow
+                      key={member.id}
+                      member={member}
+                      isOwner={isOwner}
+                      organization={activeOrganization}
+                    />
+                  ))
+                )}
+              </Table.Body>
+            </Table.Content>
+          </Table.ScrollContainer>
+        </Table>
+      </div>
+
+      <InviteMemberDialog isOpen={inviteOpen} onOpenChange={setInviteOpen} />
+    </div>
+  )
+}
+
+function SortableColumnHeader({
+  children,
+  sortDirection
+}: {
+  children: ReactNode
+  sortDirection?: "ascending" | "descending"
+}) {
+  return (
+    <span className="flex items-center justify-between">
+      {children}
+
+      {!!sortDirection && (
+        <ChevronUp
+          className={cn(
+            "size-3 transform transition-transform duration-100 ease-out",
+            sortDirection === "descending" ? "rotate-180" : ""
+          )}
+        />
+      )}
+    </span>
+  )
+}

package/src/components/auth/organization/organization-people.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@heroui/react"
+import type { ComponentProps } from "react"
+
+import { OrganizationInvitations } from "./organization-invitations"
+import { OrganizationMembers } from "./organization-members"
+
+/** Props for the {@link OrganizationPeople} component. */
+export type OrganizationPeopleProps = {
+  className?: string
+}
+
+/**
+ * Organization people UI: members table (see {@link OrganizationMembers}), then org
+ * invitations.
+ */
+export function OrganizationPeople({
+  className,
+  ...props
+}: OrganizationPeopleProps & ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col gap-4 md:gap-6", className)} {...props}>
+      <OrganizationMembers />
+      <OrganizationInvitations />
+    </div>
+  )
+}

package/src/components/auth/organization/organization-profile.tsx

@@ -0,0 +1,141 @@
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useAuthPlugin,
+  useUpdateOrganization
+} from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Skeleton,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import { type SyntheticEvent, useEffect, useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { ChangeOrganizationLogo } from "./change-organization-logo"
+import { SlugField } from "./slug-field"
+
+export type OrganizationProfileProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Profile card for the active organization: logo (when enabled), display name, and slug.
+ */
+export function OrganizationProfile({
+  className,
+  variant,
+  ...props
+}: OrganizationProfileProps & Omit<CardProps, "children">) {
+  const { authClient, localization } = useAuth()
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: activeOrganization } = useActiveOrganization(
+    authClient as OrganizationAuthClient
+  )
+
+  const [slug, setSlug] = useState(activeOrganization?.slug ?? "")
+
+  useEffect(() => {
+    setSlug(activeOrganization?.slug ?? "")
+  }, [activeOrganization?.slug])
+
+  const { mutate: commitOrganizationUpdate, isPending } = useUpdateOrganization(
+    authClient as OrganizationAuthClient,
+    {
+      onSuccess: () =>
+        toast.success(organizationLocalization.organizationUpdatedSuccess)
+    }
+  )
+
+  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (!activeOrganization) return
+
+    const formData = new FormData(e.currentTarget)
+    const name = formData.get("name") as string
+
+    commitOrganizationUpdate({
+      data: { name, slug }
+    })
+  }
+
+  const inputVariant = variant === "transparent" ? "primary" : "secondary"
+
+  return (
+    <div>
+      <h2 className={cn("mb-3 text-sm font-semibold")}>
+        {organizationLocalization.organizationProfile}
+      </h2>
+
+      <Card className={cn(className)} variant={variant} {...props}>
+        <Card.Content>
+          <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            <ChangeOrganizationLogo />
+
+            <TextField
+              key={`${activeOrganization?.id}-${activeOrganization?.name}-name`}
+              name="name"
+              defaultValue={activeOrganization?.name}
+              isDisabled={isPending || !activeOrganization}
+            >
+              <Label>{organizationLocalization.name}</Label>
+
+              <Input
+                className={cn(!activeOrganization && "hidden")}
+                autoComplete="organization"
+                placeholder={organizationLocalization.namePlaceholder}
+                variant={inputVariant}
+              />
+
+              {!activeOrganization && (
+                <Skeleton className="h-10 w-full rounded-xl md:h-9" />
+              )}
+
+              <FieldError />
+            </TextField>
+
+            {activeOrganization ? (
+              <SlugField
+                value={slug}
+                onChange={setSlug}
+                currentSlug={activeOrganization.slug}
+                isDisabled={isPending}
+                variant={inputVariant}
+              />
+            ) : (
+              <TextField isDisabled>
+                <Label>{organizationLocalization.slug}</Label>
+                <Skeleton className="h-10 w-full rounded-xl md:h-9" />
+              </TextField>
+            )}
+
+            <Button
+              type="submit"
+              isPending={isPending}
+              isDisabled={!activeOrganization}
+              size="sm"
+              className="mt-1"
+            >
+              {isPending && <Spinner color="current" size="sm" />}
+
+              {localization.settings.saveChanges}
+            </Button>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}

package/src/components/auth/organization/organization-row.tsx

@@ -0,0 +1,66 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useSetActiveOrganization
+} from "@better-auth-ui/react"
+import { Gear } from "@gravity-ui/icons"
+import { Button, Spinner } from "@heroui/react"
+import type { Organization } from "better-auth/client"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { OrganizationView } from "./organization-view"
+
+export type OrganizationRowProps = {
+  organization: Organization
+}
+
+/**
+ * Single organization row: logo and labels via {@link OrganizationView}, plus Manage.
+ */
+export function OrganizationRow({ organization }: OrganizationRowProps) {
+  const { authClient, basePaths, navigate } = useAuth()
+  const {
+    localization: organizationLocalization,
+    viewPaths: organizationViewPaths,
+    slug
+  } = useAuthPlugin(organizationPlugin)
+
+  const { mutate: setActiveOrganization, isPending: setActivePending } =
+    useSetActiveOrganization(authClient as OrganizationAuthClient, {
+      onSuccess: () => {
+        navigate({
+          to: `${basePaths.organization}/${organizationViewPaths.organization.settings}`
+        })
+      }
+    })
+
+  function manageOrganization() {
+    if (slug !== undefined) {
+      navigate({
+        to: `${basePaths.organization}/${organization.slug}/${organizationViewPaths.organization.settings}`
+      })
+    } else {
+      setActiveOrganization({ organizationId: organization.id })
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <OrganizationView organization={organization} />
+
+      <Button
+        className="ml-auto shrink-0"
+        variant="outline"
+        size="sm"
+        isPending={setActivePending}
+        onPress={manageOrganization}
+        aria-label={organizationLocalization.manage}
+      >
+        {setActivePending ? <Spinner color="current" size="sm" /> : <Gear />}
+
+        {organizationLocalization.manage}
+      </Button>
+    </div>
+  )
+}