better-auth-ui 3.2.5

package/src/components/organization/organization-view.tsx

@@ -0,0 +1,228 @@
+"use client"
+
+import { MenuIcon } from "lucide-react"
+import { useContext, useEffect, useMemo } from "react"
+import { useAuthenticate } from "../../hooks/use-authenticate"
+import { useCurrentOrganization } from "../../hooks/use-current-organization"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn, getViewByPath } from "../../lib/utils"
+import type { OrganizationViewPath } from "../../server"
+import type { AccountViewProps } from "../account/account-view"
+import { ApiKeysCard } from "../settings/api-key/api-keys-card"
+import { Button } from "../ui/button"
+import {
+    Drawer,
+    DrawerContent,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger
+} from "../ui/drawer"
+import { Label } from "../ui/label"
+import { OrganizationInvitationsCard } from "./organization-invitations-card"
+import { OrganizationMembersCard } from "./organization-members-card"
+import { OrganizationSettingsCards } from "./organization-settings-cards"
+
+export type OrganizationViewPageProps = Omit<AccountViewProps, "view"> & {
+    slug?: string
+    view?: OrganizationViewPath
+}
+
+export function OrganizationView({
+    className,
+    classNames,
+    localization: localizationProp,
+    path: pathProp,
+    pathname,
+    view: viewProp,
+    hideNav,
+    slug: slugProp
+}: OrganizationViewPageProps) {
+    const {
+        organization: organizationOptions,
+        localization: contextLocalization,
+        account: accountOptions,
+        Link,
+        replace
+    } = useContext(AuthUIContext)
+
+    const { slug: contextSlug, viewPaths, apiKey } = organizationOptions || {}
+
+    useAuthenticate()
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const path = pathProp ?? pathname?.split("/").pop()
+
+    const view = viewProp || getViewByPath(viewPaths!, path) || "SETTINGS"
+
+    const slug = slugProp || contextSlug
+
+    const {
+        data: organization,
+        isPending: organizationPending,
+        isRefetching: organizationRefetching
+    } = useCurrentOrganization({ slug })
+
+    const navItems: {
+        view: OrganizationViewPath
+        label: string
+    }[] = [
+        { view: "SETTINGS", label: localization.SETTINGS },
+        { view: "MEMBERS", label: localization.MEMBERS }
+    ]
+
+    if (apiKey) {
+        navItems.push({
+            view: "API_KEYS",
+            label: localization.API_KEYS
+        })
+    }
+
+    useEffect(() => {
+        if (organization || organizationPending || organizationRefetching)
+            return
+
+        replace(
+            `${accountOptions?.basePath}/${accountOptions?.viewPaths?.ORGANIZATIONS}`
+        )
+    }, [
+        organization,
+        organizationPending,
+        organizationRefetching,
+        accountOptions?.basePath,
+        accountOptions?.viewPaths?.ORGANIZATIONS,
+        replace
+    ])
+
+    return (
+        <div
+            className={cn(
+                "flex w-full grow flex-col gap-4 md:flex-row md:gap-12",
+                className,
+                classNames?.base
+            )}
+        >
+            {!hideNav && (
+                <div className="flex justify-between gap-2 md:hidden">
+                    <Label className="font-semibold text-base">
+                        {navItems.find((i) => i.view === view)?.label}
+                    </Label>
+
+                    <Drawer>
+                        <DrawerTrigger asChild>
+                            <Button variant="outline">
+                                <MenuIcon />
+                            </Button>
+                        </DrawerTrigger>
+
+                        <DrawerContent>
+                            <DrawerHeader>
+                                <DrawerTitle className="hidden">
+                                    {localization.ORGANIZATION}
+                                </DrawerTitle>
+                            </DrawerHeader>
+                            <div className="flex flex-col px-4 pb-4">
+                                {navItems.map((item) => (
+                                    <Link
+                                        key={item.view}
+                                        href={`${organizationOptions?.basePath}${organizationOptions?.pathMode === "slug" ? `/${slug}` : ""}/${organizationOptions?.viewPaths[item.view]}`}
+                                    >
+                                        <Button
+                                            size="lg"
+                                            className={cn(
+                                                "w-full justify-start px-4 transition-none",
+                                                classNames?.drawer?.menuItem,
+                                                view === item.view
+                                                    ? "font-semibold"
+                                                    : "text-foreground/70"
+                                            )}
+                                            variant="ghost"
+                                        >
+                                            {item.label}
+                                        </Button>
+                                    </Link>
+                                ))}
+                            </div>
+                        </DrawerContent>
+                    </Drawer>
+                </div>
+            )}
+
+            {!hideNav && (
+                <div className="hidden md:block">
+                    <div
+                        className={cn(
+                            "flex w-48 flex-col gap-1 lg:w-60",
+                            classNames?.sidebar?.base
+                        )}
+                    >
+                        {navItems.map((item) => (
+                            <Link
+                                key={item.view}
+                                href={`${organizationOptions?.basePath}${organizationOptions?.pathMode === "slug" ? `/${slug}` : ""}/${organizationOptions?.viewPaths[item.view]}`}
+                            >
+                                <Button
+                                    size="lg"
+                                    className={cn(
+                                        "w-full justify-start px-4 transition-none",
+                                        classNames?.sidebar?.button,
+                                        view === item.view
+                                            ? "font-semibold"
+                                            : "text-foreground/70",
+                                        view === item.view &&
+                                            classNames?.sidebar?.buttonActive
+                                    )}
+                                    variant="ghost"
+                                >
+                                    {item.label}
+                                </Button>
+                            </Link>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {view === "MEMBERS" && (
+                <div
+                    className={cn(
+                        "flex w-full flex-col gap-4 md:gap-6",
+                        className,
+                        classNames?.cards
+                    )}
+                >
+                    <OrganizationMembersCard
+                        classNames={classNames?.card}
+                        localization={localization}
+                        slug={slug}
+                    />
+
+                    <OrganizationInvitationsCard
+                        classNames={classNames?.card}
+                        localization={localization}
+                        slug={slug}
+                    />
+                </div>
+            )}
+
+            {view === "API_KEYS" && (
+                <ApiKeysCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                    isPending={organizationPending}
+                    organizationId={organization?.id}
+                />
+            )}
+
+            {view === "SETTINGS" && (
+                <OrganizationSettingsCards
+                    classNames={classNames}
+                    localization={localization}
+                    slug={slug}
+                />
+            )}
+        </div>
+    )
+}

package/src/components/organization/organizations-card.tsx

@@ -0,0 +1,72 @@
+"use client"
+import { useContext, useMemo, useState } from "react"
+
+import { useIsHydrated } from "../../hooks/use-hydrated"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import type { SettingsCardProps } from "../settings/shared/settings-card"
+import { SettingsCard } from "../settings/shared/settings-card"
+import { SettingsCellSkeleton } from "../settings/skeletons/settings-cell-skeleton"
+import { CardContent } from "../ui/card"
+import { CreateOrganizationDialog } from "./create-organization-dialog"
+import { OrganizationCell } from "./organization-cell"
+
+export function OrganizationsCard({
+    className,
+    classNames,
+    localization,
+    ...props
+}: SettingsCardProps) {
+    const {
+        hooks: { useListOrganizations },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+
+    localization = useMemo(
+        () => ({ ...contextLocalization, ...localization }),
+        [contextLocalization, localization]
+    )
+
+    const isHydrated = useIsHydrated()
+    const { data: organizations, isPending: organizationsPending } =
+        useListOrganizations()
+
+    const isPending = !isHydrated || organizationsPending
+
+    const [createDialogOpen, setCreateDialogOpen] = useState(false)
+
+    return (
+        <>
+            <SettingsCard
+                className={className}
+                classNames={classNames}
+                title={localization.ORGANIZATIONS}
+                description={localization.ORGANIZATIONS_DESCRIPTION}
+                instructions={localization.ORGANIZATIONS_INSTRUCTIONS}
+                actionLabel={localization.CREATE_ORGANIZATION}
+                action={() => setCreateDialogOpen(true)}
+                isPending={isPending}
+                {...props}
+            >
+                <CardContent className={cn("grid gap-4", classNames?.content)}>
+                    {isPending && <SettingsCellSkeleton />}
+                    {organizations?.map((organization) => (
+                        <OrganizationCell
+                            key={organization.id}
+                            classNames={classNames}
+                            organization={organization}
+                            localization={localization}
+                        />
+                    ))}
+                </CardContent>
+            </SettingsCard>
+
+            <CreateOrganizationDialog
+                classNames={classNames}
+                localization={localization}
+                open={createDialogOpen}
+                onOpenChange={setCreateDialogOpen}
+            />
+        </>
+    )
+}

package/src/components/organization/personal-account-view.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import { useContext, useMemo } from "react"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import { Skeleton } from "../ui/skeleton"
+import { UserAvatar } from "../user-avatar"
+import type { UserViewProps } from "../user-view"
+
+/**
+ * Displays user information with avatar and details in a compact view for personal accounts
+ *
+ * Renders a user's profile information with appropriate fallbacks:
+ * - Shows avatar alongside user name and "Personal Account" subtitle when available
+ * - Shows loading skeletons when isPending is true
+ * - Falls back to generic "User" text when neither name nor email is available
+ * - Always shows "Personal Account" as subtitle for default and lg sizes
+ * - Supports customization through classNames prop
+ */
+export function PersonalAccountView({
+    className,
+    classNames,
+    isPending,
+    size,
+    user,
+    localization: propLocalization
+}: UserViewProps) {
+    const { localization: contextLocalization } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...propLocalization }),
+        [contextLocalization, propLocalization]
+    )
+
+    return (
+        <div
+            className={cn(
+                "flex items-center gap-2",
+                className,
+                classNames?.base
+            )}
+        >
+            <UserAvatar
+                className={cn(size !== "sm" && "my-0.5")}
+                classNames={classNames?.avatar}
+                isPending={isPending}
+                localization={localization}
+                size={size}
+                user={user}
+            />
+
+            <div
+                className={cn(
+                    "grid flex-1 text-left leading-tight",
+                    classNames?.content
+                )}
+            >
+                {isPending ? (
+                    <>
+                        <Skeleton
+                            className={cn(
+                                "max-w-full",
+                                size === "lg" ? "h-4.5 w-32" : "h-3.5 w-24",
+                                classNames?.title,
+                                classNames?.skeleton
+                            )}
+                        />
+
+                        {size !== "sm" && (
+                            <Skeleton
+                                className={cn(
+                                    "mt-1.5 max-w-full",
+                                    size === "lg" ? "h-3.5 w-40" : "h-3 w-32",
+                                    classNames?.subtitle,
+                                    classNames?.skeleton
+                                )}
+                            />
+                        )}
+                    </>
+                ) : (
+                    <>
+                        <span
+                            className={cn(
+                                "truncate font-semibold",
+                                size === "lg" ? "text-base" : "text-sm",
+                                classNames?.title
+                            )}
+                        >
+                            {user?.displayName ||
+                                user?.name ||
+                                user?.fullName ||
+                                user?.firstName ||
+                                user?.displayUsername ||
+                                user?.username ||
+                                user?.email ||
+                                localization?.USER}
+                        </span>
+
+                        {size !== "sm" && (
+                            <span
+                                className={cn(
+                                    "truncate opacity-70",
+                                    size === "lg" ? "text-sm" : "text-xs",
+                                    classNames?.subtitle
+                                )}
+                            >
+                                {localization?.PERSONAL_ACCOUNT}
+                            </span>
+                        )}
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,144 @@
+"use client"
+
+import type { User } from "better-auth"
+import type { Member } from "better-auth/plugins/organization"
+import { Loader2 } from "lucide-react"
+import { type ComponentProps, useContext, useMemo, useState } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import type { SettingsCardClassNames } from "../settings/shared/settings-card"
+import { Button } from "../ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "../ui/dialog"
+import { MemberCell } from "./member-cell"
+
+export interface RemoveMemberDialogProps extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+    member: Member & { user?: Partial<User> | null }
+}
+
+export function RemoveMemberDialog({
+    member,
+    classNames,
+    localization: localizationProp,
+    onOpenChange,
+    ...props
+}: RemoveMemberDialogProps) {
+    const {
+        authClient,
+        hooks: { useListMembers },
+        localization: contextLocalization,
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { refetch } = useListMembers({
+        query: { organizationId: member.organizationId }
+    })
+
+    const [isRemoving, setIsRemoving] = useState(false)
+
+    const removeMember = async () => {
+        setIsRemoving(true)
+
+        try {
+            await authClient.organization.removeMember({
+                memberIdOrEmail: member.id,
+                organizationId: member.organizationId,
+                fetchOptions: { throw: true }
+            })
+
+            toast({
+                variant: "success",
+                message: localization.REMOVE_MEMBER_SUCCESS
+            })
+
+            await refetch?.()
+
+            onOpenChange?.(false)
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setIsRemoving(false)
+    }
+
+    return (
+        <Dialog onOpenChange={onOpenChange} {...props}>
+            <DialogContent
+                className={classNames?.dialog?.content}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+            >
+                <DialogHeader className={classNames?.dialog?.header}>
+                    <DialogTitle
+                        className={cn("text-lg md:text-xl", classNames?.title)}
+                    >
+                        {localization.REMOVE_MEMBER}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {localization.REMOVE_MEMBER_CONFIRM}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <MemberCell
+                    className={classNames?.cell}
+                    member={member}
+                    localization={localization}
+                    hideActions
+                />
+
+                <DialogFooter className={classNames?.dialog?.footer}>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => onOpenChange?.(false)}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.outlineButton
+                        )}
+                        disabled={isRemoving}
+                    >
+                        {localization.CANCEL}
+                    </Button>
+
+                    <Button
+                        type="button"
+                        variant="destructive"
+                        onClick={removeMember}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.destructiveButton
+                        )}
+                        disabled={isRemoving}
+                    >
+                        {isRemoving && <Loader2 className="animate-spin" />}
+
+                        {localization.REMOVE_MEMBER}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}