@better-auth-ui/heroui 1.6.8 → 1.6.10

package/src/components/auth/organization/invite-member-dialog.tsx

@@ -0,0 +1,177 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useInviteMember
+} from "@better-auth-ui/react"
+import { PersonPlus } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  ListBox,
+  Select,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import { type SyntheticEvent, useEffect, useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+
+/** Props for the {@link InviteMemberDialog} component. */
+export type InviteMemberDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const pickDefaultRole = (keys: string[]) =>
+  keys.includes("member") ? "member" : (keys.at(-1) ?? "")
+
+/**
+ * Render a dialog for inviting a member to the organization.
+ *
+ * @param isOpen - Whether the dialog is open
+ * @param onOpenChange - Callback for when the dialog open state changes
+ * @returns The invite member dialog as a JSX element
+ */
+export function InviteMemberDialog({
+  isOpen,
+  onOpenChange
+}: InviteMemberDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const [role, setRole] = useState(() => pickDefaultRole(Object.keys(roles)))
+
+  useEffect(() => {
+    setRole((current) => {
+      const keys = Object.keys(roles)
+      return keys.includes(current) ? current : pickDefaultRole(keys)
+    })
+  }, [roles])
+
+  const { mutate: inviteMember, isPending: isInviting } = useInviteMember(
+    authClient as OrganizationAuthClient,
+    {
+      onSuccess: () => {
+        onOpenChange(false)
+        toast.success(organizationLocalization.inviteMemberSuccess)
+      }
+    }
+  )
+
+  const isRoleValid = Object.keys(roles).includes(role)
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (!isRoleValid) return
+
+    const formData = new FormData(e.target as HTMLFormElement)
+    const email = formData.get("email") as string
+
+    inviteMember({
+      email: email.trim(),
+      role: role as Parameters<typeof inviteMember>[0]["role"]
+    })
+  }
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <Form onSubmit={handleSubmit}>
+            <AlertDialog.CloseTrigger />
+
+            <AlertDialog.Header>
+              <AlertDialog.Icon status="default">
+                <PersonPlus />
+              </AlertDialog.Icon>
+
+              <AlertDialog.Heading>
+                {organizationLocalization.inviteMember}
+              </AlertDialog.Heading>
+            </AlertDialog.Header>
+
+            <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+              <p className="text-muted text-sm">
+                {organizationLocalization.inviteMemberDescription}
+              </p>
+
+              <TextField
+                id="email"
+                name="email"
+                type="email"
+                isDisabled={isInviting}
+              >
+                <Label>{localization.auth.email}</Label>
+
+                <Input
+                  autoFocus
+                  placeholder={localization.auth.email}
+                  variant="secondary"
+                  required
+                />
+
+                <FieldError />
+              </TextField>
+
+              <Select
+                name="role"
+                value={role}
+                onChange={(value) => {
+                  if (typeof value === "string") setRole(value)
+                }}
+                isDisabled={isInviting}
+                variant="secondary"
+                fullWidth
+              >
+                <Label>{organizationLocalization.role}</Label>
+
+                <Select.Trigger>
+                  <Select.Value />
+                  <Select.Indicator />
+                </Select.Trigger>
+
+                <Select.Popover>
+                  <ListBox>
+                    {Object.entries(roles).map(([key, label]) => (
+                      <ListBox.Item key={key} id={key} textValue={label}>
+                        {label}
+
+                        <ListBox.ItemIndicator />
+                      </ListBox.Item>
+                    ))}
+                  </ListBox>
+                </Select.Popover>
+
+                <FieldError />
+              </Select>
+            </AlertDialog.Body>
+
+            <AlertDialog.Footer>
+              <Button slot="close" variant="tertiary" isDisabled={isInviting}>
+                {localization.settings.cancel}
+              </Button>
+
+              <Button
+                type="submit"
+                isPending={isInviting}
+                isDisabled={!isRoleValid}
+              >
+                {isInviting && <Spinner color="current" size="sm" />}
+
+                {organizationLocalization.inviteMember}
+              </Button>
+            </AlertDialog.Footer>
+          </Form>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/organization/leave-organization-dialog.tsx

@@ -0,0 +1,95 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useLeaveOrganization
+} from "@better-auth-ui/react"
+import { ArrowRightFromSquare } from "@gravity-ui/icons"
+import { AlertDialog, Button, Card, Spinner, toast } from "@heroui/react"
+import type { Organization } from "better-auth/client"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { OrganizationView } from "./organization-view"
+
+export type LeaveOrganizationDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  organization: Organization
+}
+
+export function LeaveOrganizationDialog({
+  isOpen,
+  onOpenChange,
+  organization
+}: LeaveOrganizationDialogProps) {
+  const { authClient, basePaths, localization, navigate } = useAuth()
+  const {
+    localization: organizationLocalization,
+    viewPaths: organizationPluginViewPaths
+  } = useAuthPlugin(organizationPlugin)
+
+  const { mutate: leaveOrganization, isPending } = useLeaveOrganization(
+    authClient as OrganizationAuthClient,
+    {
+      onSuccess: () => {
+        onOpenChange(false)
+        toast.success(organizationLocalization.leftOrganization)
+
+        navigate({
+          to: `${basePaths.settings}/${organizationPluginViewPaths.settings.organizations}`,
+          replace: true
+        })
+      }
+    }
+  )
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="danger">
+              <ArrowRightFromSquare />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {organizationLocalization.leaveOrganization}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {organizationLocalization.leaveOrganizationDescription}
+            </p>
+
+            <Card variant="secondary">
+              <Card.Content>
+                <OrganizationView organization={organization} hideRole />
+              </Card.Content>
+            </Card>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close" variant="tertiary" isDisabled={isPending}>
+              {localization.settings.cancel}
+            </Button>
+
+            <Button
+              variant="danger"
+              isPending={isPending}
+              onPress={() =>
+                leaveOrganization({ organizationId: organization.id })
+              }
+            >
+              {isPending && <Spinner color="current" size="sm" />}
+
+              {organizationLocalization.leaveOrganization}
+            </Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

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

@@ -0,0 +1,59 @@
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useAuthPlugin
+} from "@better-auth-ui/react"
+import { AlertDialog, Button } from "@heroui/react"
+import { useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { LeaveOrganizationDialog } from "./leave-organization-dialog"
+
+/**
+ * Danger-zone row to leave the active organization.
+ */
+export function LeaveOrganization() {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: activeOrganization } = useActiveOrganization(
+    authClient as OrganizationAuthClient
+  )
+
+  const [confirmOpen, setConfirmOpen] = useState(false)
+
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <p className="text-sm font-medium leading-tight">
+          {organizationLocalization.leaveOrganization}
+        </p>
+
+        <p className="text-muted mt-0.5 text-xs">
+          {organizationLocalization.leaveOrganizationDescription}
+        </p>
+      </div>
+
+      <AlertDialog>
+        <Button
+          isDisabled={!activeOrganization}
+          size="sm"
+          variant="danger-soft"
+          onPress={() => setConfirmOpen(true)}
+        >
+          {organizationLocalization.leaveOrganization}
+        </Button>
+
+        {activeOrganization && (
+          <LeaveOrganizationDialog
+            isOpen={confirmOpen}
+            onOpenChange={setConfirmOpen}
+            organization={activeOrganization}
+          />
+        )}
+      </AlertDialog>
+    </div>
+  )
+}

package/src/components/auth/organization/organization-danger-zone.tsx

@@ -0,0 +1,68 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useHasPermission
+} from "@better-auth-ui/react"
+import { Card, type CardProps, cn } from "@heroui/react"
+import type { ComponentProps } from "react"
+
+import { DeleteOrganization } from "./delete-organization"
+import { DeleteOrganizationSkeleton } from "./delete-organization-skeleton"
+import { LeaveOrganization } from "./leave-organization"
+
+export type OrganizationDangerZoneProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Danger zone heading with {@link LeaveOrganization} and {@link DeleteOrganization}
+ * for the active organization in a single card.
+ *
+ * Resolves the `organization:delete` permission before rendering anything to
+ * avoid flashing {@link LeaveOrganization} (and a stray separator) before the
+ * delete row appears or disappears. Inner {@link DeleteOrganization} also
+ * self-gates so it stays safe to use standalone.
+ */
+export function OrganizationDangerZone({
+  className,
+  variant,
+  ...props
+}: OrganizationDangerZoneProps & ComponentProps<"div">) {
+  const { authClient, localization } = useAuth()
+
+  const { data: deletePermission, isPending: deletePermissionPending } =
+    useHasPermission(authClient as OrganizationAuthClient, {
+      permissions: { organization: ["delete"] }
+    })
+
+  const canDelete = !!deletePermission?.success
+
+  return (
+    <div className={cn("flex w-full flex-col", className)} {...props}>
+      <h2 className={cn("mb-3 text-sm font-semibold text-danger")}>
+        {localization.settings.dangerZone}
+      </h2>
+
+      <Card variant={variant}>
+        <Card.Content className="gap-0">
+          {deletePermissionPending ? (
+            <DeleteOrganizationSkeleton />
+          ) : (
+            <>
+              <LeaveOrganization />
+
+              {canDelete && (
+                <>
+                  <div className="border-b border-dashed -mx-4 my-4" />
+
+                  <DeleteOrganization />
+                </>
+              )}
+            </>
+          )}
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { Skeleton, Table } from "@heroui/react"
+
+/**
+ * Placeholder row matching {@link OrganizationInvitationTableRow} while
+ * invitations load.
+ */
+export function OrganizationInvitationRowSkeleton() {
+  return (
+    <Table.Row>
+      <Table.Cell>
+        <Skeleton className="h-4 w-48 rounded-lg" />
+      </Table.Cell>
+
+      <Table.Cell>
+        <Skeleton className="h-4 w-36 rounded-lg" />
+      </Table.Cell>
+
+      <Table.Cell>
+        <Skeleton className="h-4 w-16 rounded-lg" />
+      </Table.Cell>
+
+      <Table.Cell>
+        <Skeleton className="h-4 w-14 rounded-full" />
+      </Table.Cell>
+
+      <Table.Cell />
+    </Table.Row>
+  )
+}

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

@@ -0,0 +1,97 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useCancelInvitation,
+  useHasPermission
+} from "@better-auth-ui/react"
+import { Xmark } from "@gravity-ui/icons"
+import { Button, Chip, Spinner, Table } from "@heroui/react"
+
+import type { Invitation } from "better-auth/client"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { OrganizationInvitationRowSkeleton } from "./organization-invitation-row-skeleton"
+
+export type OrganizationInvitationTableRowProps = {
+  invitation: Invitation
+}
+
+export function OrganizationInvitationTableRow({
+  invitation
+}: OrganizationInvitationTableRowProps) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const {
+    data: cancelInvitationPermission,
+    isPending: cancelPermissionPending
+  } = useHasPermission(authClient as OrganizationAuthClient, {
+    permissions: { invitation: ["cancel"] }
+  })
+
+  const { mutate: cancelInvitation, isPending: cancelPending } =
+    useCancelInvitation(authClient as OrganizationAuthClient)
+
+  const roleLabel = roles?.[invitation.role] ?? invitation.role
+
+  const statusLabel =
+    organizationLocalization[invitation.status] ?? invitation.status
+
+  const statusColor =
+    invitation.status === "pending"
+      ? "warning"
+      : invitation.status === "accepted"
+        ? "success"
+        : invitation.status === "rejected"
+          ? "danger"
+          : "default"
+
+  if (cancelPermissionPending) {
+    return <OrganizationInvitationRowSkeleton />
+  }
+
+  return (
+    <Table.Row>
+      <Table.Cell className="font-medium text-sm">
+        {invitation.email}
+      </Table.Cell>
+
+      <Table.Cell className="text-muted text-xs tabular-nums whitespace-nowrap">
+        {new Date(invitation.createdAt).toLocaleString(undefined, {
+          dateStyle: "short",
+          timeStyle: "short"
+        })}
+      </Table.Cell>
+
+      <Table.Cell className="text-sm">{roleLabel}</Table.Cell>
+
+      <Table.Cell className="text-sm">
+        <Chip color={statusColor} size="sm" variant="soft">
+          {statusLabel}
+        </Chip>
+      </Table.Cell>
+
+      <Table.Cell className="text-end">
+        {cancelInvitationPermission?.success &&
+          invitation.status === "pending" && (
+            <Button
+              isIconOnly
+              size="sm"
+              variant="danger-soft"
+              isPending={cancelPending}
+              onPress={() => cancelInvitation({ invitationId: invitation.id })}
+              aria-label={organizationLocalization.cancelInvitation}
+            >
+              {cancelPending ? (
+                <Spinner color="current" size="sm" />
+              ) : (
+                <Xmark />
+              )}
+            </Button>
+          )}
+      </Table.Cell>
+    </Table.Row>
+  )
+}

package/src/components/auth/organization/organization-invitations-empty.tsx

@@ -0,0 +1,39 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { PaperPlane } from "@gravity-ui/icons"
+import { Button, EmptyState } from "@heroui/react"
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+
+export type OrganizationInvitationsEmptyProps = {
+  onInvitePress: () => void
+}
+
+/**
+ * Empty state for {@link OrganizationInvitations} — mirrors `ApiKeysEmpty`
+ * (icon, title, description) with an "Invite member" call to action.
+ */
+export function OrganizationInvitationsEmpty({
+  onInvitePress
+}: OrganizationInvitationsEmptyProps) {
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  return (
+    <EmptyState className="flex flex-col items-center gap-4 text-center p-4">
+      <PaperPlane className="size-6 text-muted" />
+
+      <div className="flex flex-col gap-2">
+        <p className="text-sm font-semibold text-foreground">
+          {organizationLocalization.noInvitations}
+        </p>
+
+        <span className="text-sm text-muted">
+          {organizationLocalization.organizationInvitationsEmptyDescription}
+        </span>
+      </div>
+
+      <Button size="sm" onPress={onInvitePress}>
+        {organizationLocalization.inviteMember}
+      </Button>
+    </EmptyState>
+  )
+}