@better-auth-ui/heroui 1.6.8 → 1.6.10

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

package/src/components/auth/settings/settings.tsx

@@ -1,8 +1,8 @@
 import type { SettingsView } from "@better-auth-ui/core"
 import { useAuth, useAuthenticate } from "@better-auth-ui/react"
+import { Person, Shield } from "@gravity-ui/icons"
 import { type CardProps, cn, Tabs } from "@heroui/react"
 import { type ComponentProps, useMemo } from "react"
-
 import { AccountSettings } from "./account/account-settings"
 import { SecuritySettings } from "./security/security-settings"
 
@@ -25,7 +25,7 @@ export type SettingsProps = {
  * @param variant - Card variant forwarded to each settings section card
  * @returns A DOM tree containing the responsive settings tabs and the currently selected settings panel
  *
- * @throws Error if neither `view` nor `path` is provided
+ * @throws Error if neither `view` nor `path` is provided, or if `path` does not match any settings view
  */
 export function Settings({
   className,
@@ -35,22 +35,39 @@ export function Settings({
   view,
   ...props
 }: SettingsProps & ComponentProps<"div">) {
-  const { authClient, basePaths, localization, viewPaths } = useAuth()
-  useAuthenticate(authClient)
-
   if (!view && !path) {
     throw new Error("[Better Auth UI] Either `view` or `path` must be provided")
   }
 
-  const settingsPathViews = useMemo(
-    () =>
-      Object.fromEntries(
-        Object.entries(viewPaths.settings).map(([k, v]) => [v, k])
-      ) as Record<string, SettingsView>,
-    [viewPaths.settings]
-  )
+  const { authClient, basePaths, localization, viewPaths, plugins } = useAuth()
+  useAuthenticate(authClient)
+
+  // Built-ins first, then plugin segments
+  const currentView = useMemo(() => {
+    if (view) return view
+    if (!path) return undefined
 
-  const currentView = view || (path ? settingsPathViews[path] : undefined)
+    const match = [
+      viewPaths.settings,
+      ...plugins.map((plugin) => plugin.viewPaths?.settings)
+    ]
+      .flatMap((source) => Object.entries(source ?? {}))
+      .find(([, segment]) => segment === path)
+
+    return match?.[0] as SettingsView | undefined
+  }, [view, path, viewPaths.settings, plugins])
+
+  if (!currentView) {
+    const validPaths = [
+      viewPaths.settings,
+      ...plugins.map((plugin) => plugin.viewPaths?.settings)
+    ]
+      .flatMap((source) => Object.values(source ?? {}))
+      .join(", ")
+    throw new Error(
+      `[Better Auth UI] Unknown settings path "${path}". Valid paths are: ${validPaths}`
+    )
+  }
 
   return (
     <Tabs
@@ -62,12 +79,18 @@ export function Settings({
       <Tabs.ListContainer>
         <Tabs.List
           aria-label={localization.settings.settings}
-          className="overflow-auto w-fit"
+          className="max-w-fit overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
         >
           <Tabs.Tab
             id="account"
             href={`${basePaths.settings}/${viewPaths.settings.account}`}
+            className="gap-2"
+            onPress={(e) =>
+              e.target.scrollIntoView({ behavior: "smooth", inline: "center" })
+            }
           >
+            <Person className="text-muted" />
+
             {localization.settings.account}
 
             <Tabs.Indicator />
@@ -76,11 +99,39 @@ export function Settings({
           <Tabs.Tab
             id="security"
             href={`${basePaths.settings}/${viewPaths.settings.security}`}
+            className="gap-2"
+            onPress={(e) =>
+              e.target.scrollIntoView({ behavior: "smooth", inline: "center" })
+            }
           >
+            <Shield className="text-muted" />
+
             {localization.settings.security}
 
             <Tabs.Indicator />
           </Tabs.Tab>
+
+          {plugins.flatMap(
+            (plugin) =>
+              plugin.settingsTabs?.map((settingsTab, index) => (
+                <Tabs.Tab
+                  key={`${plugin.id}-${index.toString()}`}
+                  id={settingsTab.view}
+                  href={`${basePaths.settings}/${plugin.viewPaths?.settings?.[settingsTab.view]}`}
+                  className="gap-2"
+                  onPress={(e) =>
+                    e.target.scrollIntoView({
+                      behavior: "smooth",
+                      inline: "center"
+                    })
+                  }
+                >
+                  {settingsTab.label}
+
+                  <Tabs.Indicator />
+                </Tabs.Tab>
+              )) ?? []
+          )}
         </Tabs.List>
       </Tabs.ListContainer>
 
@@ -91,6 +142,18 @@ export function Settings({
       <Tabs.Panel id="security" className="px-0">
         <SecuritySettings variant={variant} />
       </Tabs.Panel>
+
+      {plugins.flatMap((plugin) =>
+        plugin.settingsTabs?.map((settingsTab, index) => (
+          <Tabs.Panel
+            key={`${plugin.id}-${index.toString()}`}
+            id={settingsTab.view}
+            className="px-0"
+          >
+            <settingsTab.component variant={variant} />
+          </Tabs.Panel>
+        ))
+      )}
     </Tabs>
   )
 }

package/src/components/auth/user/user-avatar.tsx

@@ -13,7 +13,10 @@ export type UserAvatarProps = {
   fallback?: ReactNode
   isPending?: boolean
   /** @remarks `User` */
-  user?: User & { username?: string | null; displayUsername?: string | null }
+  user?: Partial<User> & {
+    username?: string | null
+    displayUsername?: string | null
+  }
   size?: AvatarProps["size"]
 }