@better-auth-ui/heroui 1.6.8 → 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/settings/account/change-email.tsx

@@ -64,7 +64,7 @@ export function ChangeEmail({
             <Fieldset className="w-full gap-4">
               <Fieldset.Group>
                 <TextField
-                  key={session?.user.email}
+                  key={`${session?.user.id}-${session?.user.email}-email`}
                   name="email"
                   type="email"
                   defaultValue={session?.user.email}

package/src/components/auth/settings/account/user-profile.tsx

@@ -81,7 +81,7 @@ export function UserProfile({
   return (
     <div>
       <h2 className={cn("text-sm font-semibold mb-3")}>
-        {localization.settings.profile}
+        {localization.settings.userProfile}
       </h2>
 
       <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
@@ -90,7 +90,7 @@ export function UserProfile({
             <ChangeAvatar />
 
             <TextField
-              key={session?.user?.name}
+              key={`${session?.user?.id}-${session?.user?.name}-name`}
               name="name"
               defaultValue={session?.user.name}
               isDisabled={isPending || !session}
@@ -131,9 +131,9 @@ export function UserProfile({
                   field.name
                 ]
 
-                // Re-mount when the session value loads so the field's
-                // uncontrolled `defaultValue` reflects the latest data.
-                const key = `${field.name}:${
+                // Re-mount when the user or the session value changes so the
+                // field's uncontrolled `defaultValue` reflects the latest data.
+                const key = `${session.user.id}-${field.name}-${
                   value instanceof Date
                     ? value.toISOString()
                     : String(value ?? "")

package/src/components/auth/settings/security/active-sessions.tsx

@@ -25,9 +25,11 @@ export function ActiveSessions({
 
   const { data: sessions, isPending } = useListSessions(authClient)
 
-  const activeSessions = sessions?.toSorted((activeSession) =>
-    activeSession.id === session?.session.id ? -1 : 1
-  )
+  const activeSessions =
+    sessions &&
+    [...sessions].sort((a, b) =>
+      a.id === session?.session.id ? -1 : b.id === session?.session.id ? 1 : 0
+    )
 
   return (
     <div>
@@ -43,7 +45,7 @@ export function ActiveSessions({
             activeSessions?.map((activeSession, index) => (
               <div key={activeSession.id}>
                 {index > 0 && (
-                  <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                  <div className="border-b border-dashed -mx-4 my-4" />
                 )}
 
                 <ActiveSession activeSession={activeSession} />

package/src/components/auth/settings/security/linked-accounts.tsx

@@ -54,7 +54,7 @@ export function LinkedAccounts({
             ? socialProviders?.map((provider, index) => (
                 <div key={provider}>
                   {index > 0 && (
-                    <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                    <div className="border-b border-dashed -mx-4 my-4" />
                   )}
                   <AccountRowSkeleton />
                 </div>
@@ -62,7 +62,7 @@ export function LinkedAccounts({
             : allRows.map((row, index) => (
                 <div key={row.key}>
                   {index > 0 && (
-                    <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                    <div className="border-b border-dashed -mx-4 my-4" />
                   )}
 
                   <LinkedAccount