@better-auth-ui/heroui 1.6.7 → 1.6.9

package/src/components/auth/organization/organizations.tsx

@@ -0,0 +1,80 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useListOrganizations
+} from "@better-auth-ui/react"
+import { Button, Card, type CardProps } from "@heroui/react"
+import { useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { CreateOrganizationDialog } from "./create-organization-dialog"
+import { OrganizationRow } from "./organization-row"
+import { OrganizationViewSkeleton } from "./organization-view-skeleton"
+import { OrganizationsEmpty } from "./organizations-empty"
+
+export type OrganizationsProps = {
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Lists organizations the user belongs to (via {@link useListOrganizations}): loading skeleton,
+ * empty state with create, or a card of rows with a Manage control per organization.
+ * Owns {@link CreateOrganizationDialog} open state and the create actions.
+ */
+export function Organizations({ variant }: OrganizationsProps) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  const [createOpen, setCreateOpen] = useState(false)
+
+  const { data: organizations, isPending: organizationsPending } =
+    useListOrganizations(authClient as OrganizationAuthClient)
+
+  return (
+    <>
+      <div className="flex flex-col gap-3">
+        <div className="flex items-end justify-between gap-3">
+          <h2 className="truncate text-sm font-semibold">
+            {organizationLocalization.organizations}
+          </h2>
+
+          <Button
+            className="shrink-0"
+            size="sm"
+            isDisabled={organizationsPending}
+            onPress={() => setCreateOpen(true)}
+          >
+            {organizationLocalization.createOrganization}
+          </Button>
+        </div>
+
+        <Card variant={variant}>
+          <Card.Content className="gap-0">
+            {organizationsPending ? (
+              <OrganizationViewSkeleton />
+            ) : !organizations?.length ? (
+              <OrganizationsEmpty onCreatePress={() => setCreateOpen(true)} />
+            ) : (
+              organizations.map((organization, index) => (
+                <div key={organization.id}>
+                  {index > 0 && (
+                    <div className="-mx-4 my-4 border-b border-dashed" />
+                  )}
+
+                  <OrganizationRow organization={organization} />
+                </div>
+              ))
+            )}
+          </Card.Content>
+        </Card>
+      </div>
+
+      <CreateOrganizationDialog
+        isOpen={createOpen}
+        onOpenChange={setCreateOpen}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,95 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useRemoveMember
+} from "@better-auth-ui/react"
+import { TrashBin } from "@gravity-ui/icons"
+import { AlertDialog, Button, Card, Chip, Spinner, toast } from "@heroui/react"
+import type { Member, User } from "better-auth/client"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { UserView } from "../user/user-view"
+
+export type RemoveMemberDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  member: Member & { user: Partial<User> }
+}
+
+export function RemoveMemberDialog({
+  isOpen,
+  onOpenChange,
+  member
+}: RemoveMemberDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const { mutate: removeMember, isPending } = useRemoveMember(
+    authClient as OrganizationAuthClient,
+    {
+      onSuccess: () => {
+        onOpenChange(false)
+        toast.success(organizationLocalization.memberRemoved)
+      }
+    }
+  )
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="danger">
+              <TrashBin />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {organizationLocalization.removeMember}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {organizationLocalization.removeMemberWarning}
+            </p>
+
+            <Card variant="secondary">
+              <Card.Content className="justify-between flex-row items-center gap-2">
+                <UserView user={member.user} />
+
+                <Chip size="sm" variant="tertiary">
+                  <Chip.Label>{roles?.[member.role] ?? member.role}</Chip.Label>
+                </Chip>
+              </Card.Content>
+            </Card>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close" variant="tertiary" isDisabled={isPending}>
+              {localization.settings.cancel}
+            </Button>
+
+            <Button
+              variant="danger"
+              isPending={isPending}
+              onPress={() =>
+                removeMember({
+                  memberIdOrEmail: member.id,
+                  organizationId: member.organizationId
+                })
+              }
+            >
+              {isPending && <Spinner color="current" size="sm" />}
+
+              {organizationLocalization.removeMember}
+            </Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/organization/slug-field.tsx

@@ -0,0 +1,111 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useCheckSlug
+} from "@better-auth-ui/react"
+import { Check, Xmark } from "@gravity-ui/icons"
+import {
+  FieldError,
+  InputGroup,
+  type InputProps,
+  Label,
+  Spinner,
+  TextField,
+  type TextFieldProps
+} from "@heroui/react"
+import { useDebouncer } from "@tanstack/react-pacer"
+import { useEffect } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+
+/** Props for the {@link SlugField} component. */
+export type SlugFieldProps = {
+  value: string
+  onChange: (value: string) => void
+  currentSlug?: string
+  isDisabled?: boolean
+  variant?: InputProps["variant"]
+}
+
+/**
+ * Sanitize a slug value so it only contains lowercase alphanumeric characters
+ * and dashes. Runs of disallowed characters are collapsed to a single dash, but
+ * leading/trailing dashes are preserved while the user is still typing.
+ */
+export function sanitizeSlug(value: string) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-")
+}
+
+/**
+ * Organization slug field with debounced availability checking.
+ */
+export function SlugField({
+  value,
+  onChange,
+  currentSlug,
+  variant,
+  ...props
+}: SlugFieldProps & TextFieldProps) {
+  const { authClient } = useAuth()
+  const { localization, checkSlug: checkSlugEnabled } =
+    useAuthPlugin(organizationPlugin)
+
+  const {
+    mutate: checkSlug,
+    data: checkSlugData,
+    error: checkSlugError,
+    reset: resetCheckSlug
+  } = useCheckSlug(authClient as OrganizationAuthClient)
+
+  const debouncer = useDebouncer(
+    (value) => {
+      if (!checkSlugEnabled || !value.trim() || value.trim() === currentSlug)
+        return
+
+      checkSlug({ slug: value.trim() })
+    },
+    { wait: 500 }
+  )
+
+  useEffect(() => {
+    if (!checkSlugEnabled) return
+
+    resetCheckSlug()
+    debouncer.maybeExecute(value)
+  }, [checkSlugEnabled, value, debouncer.maybeExecute, resetCheckSlug])
+
+  const handleChange = (next: string) => {
+    onChange(sanitizeSlug(next))
+  }
+
+  return (
+    <TextField
+      id="slug"
+      name="slug"
+      {...props}
+      value={value}
+      onChange={handleChange}
+    >
+      <Label>{localization.slug}</Label>
+
+      <InputGroup variant={variant}>
+        <InputGroup.Input placeholder={localization.slugPlaceholder} required />
+
+        {checkSlugEnabled && !!value.trim() && value.trim() !== currentSlug && (
+          <InputGroup.Suffix className="px-2">
+            {checkSlugData?.status ? (
+              <Check className="text-success" />
+            ) : checkSlugError ? (
+              <Xmark className="text-danger" />
+            ) : (
+              <Spinner size="sm" color="current" />
+            )}
+          </InputGroup.Suffix>
+        )}
+      </InputGroup>
+
+      <FieldError />
+    </TextField>
+  )
+}

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

@@ -0,0 +1,17 @@
+import { Skeleton } from "@heroui/react"
+
+/**
+ * Placeholder row matching {@link UserInvitationRow} while invitations load.
+ */
+export function UserInvitationRowSkeleton() {
+  return (
+    <div className="flex items-center gap-3">
+      <Skeleton className="size-10 shrink-0 rounded-xl" />
+
+      <div className="flex flex-col gap-1">
+        <Skeleton className="h-4 w-40 rounded-lg" />
+        <Skeleton className="h-3 w-28 rounded-lg" />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,90 @@
+import {
+  type OrganizationAuthClient,
+  useAcceptInvitation,
+  useAuth,
+  useAuthPlugin,
+  useRejectInvitation
+} from "@better-auth-ui/react"
+import { Check, Clock, Xmark } from "@gravity-ui/icons"
+import { Button, Chip, Spinner } from "@heroui/react"
+import type { Invitation } from "better-auth/client"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+
+export type UserInvitationRowProps = {
+  invitation: Invitation & { organizationName?: string }
+}
+
+/**
+ * Single invitation row with accept/reject actions for the current user.
+ */
+export function UserInvitationRow({ invitation }: UserInvitationRowProps) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization, roles } =
+    useAuthPlugin(organizationPlugin)
+
+  const { mutate: acceptInvitation, isPending: isAccepting } =
+    useAcceptInvitation(authClient as OrganizationAuthClient)
+
+  const { mutate: rejectInvitation, isPending: isRejecting } =
+    useRejectInvitation(authClient as OrganizationAuthClient)
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary">
+        <Clock className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col">
+        <div className="flex items-center gap-1.5">
+          <span className="truncate text-sm font-medium leading-tight">
+            {invitation.organizationName}
+          </span>
+
+          <Chip size="sm">{roles?.[invitation.role] ?? invitation.role}</Chip>
+        </div>
+
+        <span className="truncate text-muted text-xs">
+          {new Date(invitation.createdAt).toLocaleString(undefined, {
+            dateStyle: "medium",
+            timeStyle: "short"
+          })}
+        </span>
+      </div>
+
+      <div className="ml-auto flex shrink-0 items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          isPending={isAccepting}
+          isDisabled={isRejecting}
+          onPress={() =>
+            acceptInvitation({
+              invitationId: invitation.id
+            })
+          }
+        >
+          {isAccepting ? <Spinner color="current" size="sm" /> : <Check />}
+
+          {organizationLocalization.accept}
+        </Button>
+
+        <Button
+          variant="danger-soft"
+          size="sm"
+          isIconOnly
+          isPending={isRejecting}
+          isDisabled={isAccepting}
+          onPress={() =>
+            rejectInvitation({
+              invitationId: invitation.id
+            })
+          }
+          aria-label={organizationLocalization.rejectInvitation}
+        >
+          {isRejecting ? <Spinner color="current" size="sm" /> : <Xmark />}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,30 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { PaperPlane } from "@gravity-ui/icons"
+import { EmptyState } from "@heroui/react"
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+
+/**
+ * Empty state for `UserInvitations`
+ */
+export function UserInvitationsEmpty() {
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  return (
+    <EmptyState className="flex flex-col items-center gap-4 text-center">
+      <div className="flex size-12 items-center justify-center rounded-full bg-surface-secondary">
+        <PaperPlane className="size-5" />
+      </div>
+
+      <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.userInvitationsEmptyDescription}
+        </span>
+      </div>
+    </EmptyState>
+  )
+}

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

@@ -0,0 +1,59 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useListUserInvitations
+} from "@better-auth-ui/react"
+import { Card, type CardProps } from "@heroui/react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { UserInvitationRow } from "./user-invitation-row"
+import { UserInvitationRowSkeleton } from "./user-invitation-row-skeleton"
+import { UserInvitationsEmpty } from "./user-invitations-empty"
+
+export type UserInvitationsProps = {
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Organization invitations for the signed-in user (from
+ * {@link useListUserInvitations}). Always renders the section card; uses
+ * {@link UserInvitationsEmpty} when there are no pending invitations.
+ */
+export function UserInvitations({ variant }: UserInvitationsProps) {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: invitations, isPending } = useListUserInvitations(
+    authClient as OrganizationAuthClient
+  )
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h2 className="truncate text-sm font-semibold">
+        {organizationLocalization.invitations}
+      </h2>
+
+      <Card variant={variant}>
+        <Card.Content>
+          {isPending ? (
+            <UserInvitationRowSkeleton />
+          ) : !invitations?.length ? (
+            <UserInvitationsEmpty />
+          ) : (
+            invitations?.map((invitation, index) => (
+              <div key={invitation.id}>
+                {index > 0 && (
+                  <div className="border-b border-dashed -mx-4 my-4" />
+                )}
+
+                <UserInvitationRow invitation={invitation} />
+              </div>
+            ))
+          )}
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}

package/src/components/auth/passkey/add-passkey-dialog.tsx

@@ -0,0 +1,109 @@
+import {
+  type PasskeyAuthClient,
+  useAddPasskey,
+  useAuth,
+  useAuthPlugin
+} from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import type { SyntheticEvent } from "react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type AddPasskeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function AddPasskeyDialog({
+  isOpen,
+  onOpenChange
+}: AddPasskeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey(
+    authClient as PasskeyAuthClient
+  )
+
+  const handleOpenChange = (open: boolean) => {
+    onOpenChange(open)
+  }
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.target as HTMLFormElement)
+    const name = (formData.get("name") as string)?.trim()
+
+    addPasskey(name ? { name } : undefined, {
+      onSuccess: () => handleOpenChange(false)
+    })
+  }
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={handleOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <Form onSubmit={handleSubmit}>
+            <AlertDialog.CloseTrigger />
+
+            <AlertDialog.Header>
+              <AlertDialog.Icon status="default">
+                <Fingerprint />
+              </AlertDialog.Icon>
+
+              <AlertDialog.Heading>
+                {passkeyLocalization.addPasskey}
+              </AlertDialog.Heading>
+            </AlertDialog.Header>
+
+            <AlertDialog.Body className="overflow-visible">
+              <p className="text-muted text-sm">
+                {passkeyLocalization.passkeysDescription}
+              </p>
+
+              <TextField
+                className="mt-4"
+                id="name"
+                name="name"
+                isDisabled={isAdding}
+              >
+                <Label>{passkeyLocalization.name}</Label>
+
+                <Input
+                  autoFocus
+                  placeholder={localization.settings.optional}
+                  variant="secondary"
+                />
+
+                <FieldError />
+              </TextField>
+            </AlertDialog.Body>
+
+            <AlertDialog.Footer>
+              <Button slot="close" variant="tertiary" isDisabled={isAdding}>
+                {localization.settings.cancel}
+              </Button>
+
+              <Button type="submit" isPending={isAdding}>
+                {isAdding && <Spinner color="current" size="sm" />}
+
+                {passkeyLocalization.addPasskey}
+              </Button>
+            </AlertDialog.Footer>
+          </Form>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/passkey/delete-passkey-dialog.tsx

@@ -0,0 +1,95 @@
+import {
+  type PasskeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useDeletePasskey
+} from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+
+import { passkeyPlugin } from "../../../lib/auth/passkey-plugin"
+
+export type ListedPasskey = {
+  id: string
+  name?: string | null
+  createdAt: Date
+}
+
+export type DeletePasskeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  passkey: ListedPasskey
+}
+
+export function DeletePasskeyDialog({
+  isOpen,
+  onOpenChange,
+  passkey
+}: DeletePasskeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: passkeyLocalization } = useAuthPlugin(passkeyPlugin)
+
+  const passkeyName = passkey.name || passkeyLocalization.passkey
+
+  const { mutate: deletePasskey, isPending: isDeleting } = useDeletePasskey(
+    authClient as PasskeyAuthClient,
+    {
+      onSuccess: () => onOpenChange(false)
+    }
+  )
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <AlertDialog.CloseTrigger />
+
+          <AlertDialog.Header>
+            <AlertDialog.Icon status="danger">
+              <Fingerprint />
+            </AlertDialog.Icon>
+
+            <AlertDialog.Heading>
+              {passkeyLocalization.deletePasskeyTitle}
+            </AlertDialog.Heading>
+          </AlertDialog.Header>
+
+          <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+            <p className="text-muted text-sm">
+              {passkeyLocalization.deletePasskeyWarning}
+            </p>
+
+            <TextField value={passkeyName} variant="secondary">
+              <Label>{passkey.name || passkeyLocalization.passkey}</Label>
+
+              <Input readOnly />
+            </TextField>
+          </AlertDialog.Body>
+
+          <AlertDialog.Footer>
+            <Button slot="close" variant="tertiary" isDisabled={isDeleting}>
+              {localization.settings.cancel}
+            </Button>
+
+            <Button
+              variant="danger"
+              onPress={() => deletePasskey({ id: passkey.id })}
+              isPending={isDeleting}
+            >
+              {isDeleting && <Spinner color="current" size="sm" />}
+
+              {passkeyLocalization.deletePasskeyTitle}
+            </Button>
+          </AlertDialog.Footer>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}