better-auth-ui 3.2.5

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

@@ -0,0 +1,150 @@
+"use client"
+
+import type { Organization } 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 { Card } from "../ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "../ui/dialog"
+import { OrganizationCellView } from "./organization-cell-view"
+
+export interface LeaveOrganizationDialogProps
+    extends ComponentProps<typeof Dialog> {
+    className?: string
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+    organization: Organization
+}
+
+export function LeaveOrganizationDialog({
+    organization,
+    className,
+    classNames,
+    localization: localizationProp,
+    onOpenChange,
+    ...props
+}: LeaveOrganizationDialogProps) {
+    const {
+        authClient,
+        hooks: { useListOrganizations },
+        localization: contextLocalization,
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { refetch: refetchOrganizations } = useListOrganizations()
+
+    const [isLeaving, setIsLeaving] = useState(false)
+
+    const handleLeaveOrganization = async () => {
+        setIsLeaving(true)
+
+        try {
+            await authClient.organization.leave({
+                organizationId: organization.id,
+                fetchOptions: { throw: true }
+            })
+
+            await refetchOrganizations?.()
+
+            toast({
+                variant: "success",
+                message: localization.LEAVE_ORGANIZATION_SUCCESS
+            })
+
+            onOpenChange?.(false)
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setIsLeaving(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.LEAVE_ORGANIZATION}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {localization.LEAVE_ORGANIZATION_CONFIRM}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Card
+                    className={cn(
+                        "my-2 flex-row p-4",
+                        className,
+                        classNames?.cell
+                    )}
+                >
+                    <OrganizationCellView
+                        organization={organization}
+                        localization={localization}
+                    />
+                </Card>
+
+                <DialogFooter className={classNames?.dialog?.footer}>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => onOpenChange?.(false)}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.outlineButton
+                        )}
+                        disabled={isLeaving}
+                    >
+                        {localization.CANCEL}
+                    </Button>
+
+                    <Button
+                        type="button"
+                        variant="destructive"
+                        onClick={handleLeaveOrganization}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.destructiveButton
+                        )}
+                        disabled={isLeaving}
+                    >
+                        {isLeaving && <Loader2 className="animate-spin" />}
+
+                        {localization.LEAVE_ORGANIZATION}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/components/organization/member-cell.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import type { User } from "better-auth"
+import type { Member } from "better-auth/plugins/organization"
+import { EllipsisIcon, UserCogIcon, UserXIcon } from "lucide-react"
+import { useContext, useState } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import type { SettingsCardClassNames } from "../settings/shared/settings-card"
+import { Button } from "../ui/button"
+import { Card } from "../ui/card"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "../ui/dropdown-menu"
+import { UserView } from "../user-view"
+import { LeaveOrganizationDialog } from "./leave-organization-dialog"
+import { RemoveMemberDialog } from "./remove-member-dialog"
+import { UpdateMemberRoleDialog } from "./update-member-role-dialog"
+
+export interface MemberCellProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    member: Member & { user?: Partial<User> | null }
+    localization?: AuthLocalization
+    hideActions?: boolean
+}
+
+export function MemberCell({
+    className,
+    classNames,
+    member,
+    localization: localizationProp,
+    hideActions
+}: MemberCellProps) {
+    const {
+        organization: organizationOptions,
+        hooks: {
+            useListMembers,
+            useSession,
+            useListOrganizations,
+            useHasPermission
+        },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+    const localization = { ...contextLocalization, ...localizationProp }
+
+    const { data: sessionData } = useSession()
+    const [removeDialogOpen, setRemoveDialogOpen] = useState(false)
+    const [leaveDialogOpen, setLeaveDialogOpen] = useState(false)
+    const [updateRoleDialogOpen, setUpdateRoleDialogOpen] = useState(false)
+
+    const builtInRoles = [
+        { role: "owner", label: localization.OWNER },
+        { role: "admin", label: localization.ADMIN },
+        { role: "member", label: localization.MEMBER }
+    ]
+
+    const { data } = useListMembers({
+        query: { organizationId: member.organizationId }
+    })
+
+    const members = data?.members
+
+    const myRole = members?.find(
+        (m) => m.user?.id === sessionData?.user.id
+    )?.role
+    const roles = [...builtInRoles, ...(organizationOptions?.customRoles || [])]
+    const role = roles.find((r) => r.role === member.role)
+
+    const isSelf = sessionData?.user.id === member?.userId
+
+    const { data: organizations } = useListOrganizations()
+    const organization = organizations?.find(
+        (org) => org.id === member.organizationId
+    )
+
+    const { data: hasPermissionToUpdateMember } = useHasPermission({
+        organizationId: member.organizationId,
+        permission: { member: ["update"] }
+    })
+
+    return (
+        <>
+            <Card
+                className={cn(
+                    "flex-row items-center p-4",
+                    className,
+                    classNames?.cell
+                )}
+            >
+                <UserView
+                    user={member.user}
+                    localization={localization}
+                    className="flex-1"
+                />
+
+                <span className="text-xs opacity-70">{role?.label}</span>
+
+                {!hideActions &&
+                    (isSelf ||
+                        member.role !== "owner" ||
+                        myRole === "owner") && (
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button
+                                    className={cn(
+                                        "relative ms-auto",
+                                        classNames?.button,
+                                        classNames?.outlineButton
+                                    )}
+                                    size="icon"
+                                    type="button"
+                                    variant="outline"
+                                >
+                                    <EllipsisIcon
+                                        className={classNames?.icon}
+                                    />
+                                </Button>
+                            </DropdownMenuTrigger>
+
+                            <DropdownMenuContent
+                                onCloseAutoFocus={(e) => e.preventDefault()}
+                            >
+                                {hasPermissionToUpdateMember?.success && (
+                                    <DropdownMenuItem
+                                        onClick={() =>
+                                            setUpdateRoleDialogOpen(true)
+                                        }
+                                    >
+                                        <UserCogIcon
+                                            className={classNames?.icon}
+                                        />
+                                        {localization?.UPDATE_ROLE}
+                                    </DropdownMenuItem>
+                                )}
+
+                                <DropdownMenuItem
+                                    onClick={() =>
+                                        isSelf
+                                            ? setLeaveDialogOpen(true)
+                                            : setRemoveDialogOpen(true)
+                                    }
+                                    variant="destructive"
+                                >
+                                    <UserXIcon className={classNames?.icon} />
+                                    {isSelf
+                                        ? localization?.LEAVE_ORGANIZATION
+                                        : localization?.REMOVE_MEMBER}
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    )}
+            </Card>
+
+            <RemoveMemberDialog
+                open={removeDialogOpen}
+                onOpenChange={setRemoveDialogOpen}
+                member={member}
+                classNames={classNames}
+                localization={localization}
+            />
+
+            {organization && (
+                <LeaveOrganizationDialog
+                    open={leaveDialogOpen}
+                    onOpenChange={setLeaveDialogOpen}
+                    organization={organization}
+                    classNames={classNames}
+                    localization={localization}
+                />
+            )}
+
+            <UpdateMemberRoleDialog
+                open={updateRoleDialogOpen}
+                onOpenChange={setUpdateRoleDialogOpen}
+                member={member}
+                classNames={classNames}
+                localization={localization}
+            />
+        </>
+    )
+}

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

@@ -0,0 +1,122 @@
+"use client"
+
+import type { Organization } from "better-auth/plugins/organization"
+import { useContext } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { Skeleton } from "../ui/skeleton"
+import {
+    OrganizationLogo,
+    type OrganizationLogoClassNames
+} from "./organization-logo"
+
+export interface OrganizationViewClassNames {
+    base?: string
+    avatar?: OrganizationLogoClassNames
+    content?: string
+    title?: string
+    subtitle?: string
+    skeleton?: string
+}
+
+export interface OrganizationViewProps {
+    className?: string
+    classNames?: OrganizationViewClassNames
+    isPending?: boolean
+    size?: "sm" | "default" | "lg" | null
+    organization?: Organization | null
+    /**
+     * @default authLocalization
+     * @remarks `AuthLocalization`
+     */
+    localization?: AuthLocalization
+}
+
+export function OrganizationCellView({
+    className,
+    classNames,
+    isPending,
+    size,
+    organization,
+    localization: propLocalization
+}: OrganizationViewProps) {
+    const { localization: contextLocalization } = useContext(AuthUIContext)
+
+    const localization = { ...contextLocalization, ...propLocalization }
+
+    return (
+        <div
+            className={cn(
+                "flex items-center gap-2 truncate",
+                className,
+                classNames?.base
+            )}
+        >
+            <OrganizationLogo
+                className={cn(size !== "sm" && "my-0.5")}
+                classNames={classNames?.avatar}
+                isPending={isPending}
+                localization={localization}
+                organization={organization}
+                size={size}
+            />
+
+            <div
+                className={cn(
+                    "flex flex-col truncate 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-24" : "h-3 w-16",
+                                    classNames?.subtitle,
+                                    classNames?.skeleton
+                                )}
+                            />
+                        )}
+                    </>
+                ) : (
+                    <>
+                        <span
+                            className={cn(
+                                "truncate font-semibold",
+                                size === "lg" ? "text-base" : "text-sm",
+                                classNames?.title
+                            )}
+                        >
+                            {organization?.name || localization?.ORGANIZATION}
+                        </span>
+
+                        {size !== "sm" && organization?.slug && (
+                            <span
+                                className={cn(
+                                    "truncate opacity-70",
+                                    size === "lg" ? "text-sm" : "text-xs",
+                                    classNames?.subtitle
+                                )}
+                            >
+                                {organization.slug}
+                            </span>
+                        )}
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,154 @@
+"use client"
+
+import type { Organization } from "better-auth/plugins/organization"
+import { EllipsisIcon, Loader2, LogOutIcon, SettingsIcon } from "lucide-react"
+import { useCallback, 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 { Card } from "../ui/card"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "../ui/dropdown-menu"
+import { LeaveOrganizationDialog } from "./leave-organization-dialog"
+import { OrganizationCellView } from "./organization-cell-view"
+
+export interface OrganizationCellProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    organization: Organization
+    localization?: AuthLocalization
+}
+
+export function OrganizationCell({
+    className,
+    classNames,
+    organization,
+    localization: localizationProp
+}: OrganizationCellProps) {
+    const {
+        authClient,
+        localization: contextLocalization,
+        organization: organizationOptions,
+        navigate,
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { pathMode } = organizationOptions || {}
+
+    const [isLeaveDialogOpen, setIsLeaveDialogOpen] = useState(false)
+    const [isManagingOrganization, setIsManagingOrganization] = useState(false)
+
+    const handleManageOrganization = useCallback(async () => {
+        setIsManagingOrganization(true)
+
+        if (pathMode === "slug") {
+            navigate(
+                `${organizationOptions?.basePath}/${organization.slug}/${organizationOptions?.viewPaths.SETTINGS}`
+            )
+
+            return
+        }
+
+        try {
+            await authClient.organization.setActive({
+                organizationId: organization.id,
+                fetchOptions: {
+                    throw: true
+                }
+            })
+
+            navigate(
+                `${organizationOptions?.basePath}/${organizationOptions?.viewPaths?.SETTINGS}`
+            )
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+
+            setIsManagingOrganization(false)
+        }
+    }, [
+        authClient,
+        organization.id,
+        organizationOptions?.basePath,
+        organizationOptions?.viewPaths?.SETTINGS,
+        organization.slug,
+        pathMode,
+        navigate,
+        toast,
+        localization
+    ])
+
+    return (
+        <>
+            <Card className={cn("flex-row p-4", className, classNames?.cell)}>
+                <OrganizationCellView
+                    organization={organization}
+                    localization={localization}
+                />
+
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            className={cn(
+                                "relative ms-auto",
+                                classNames?.button,
+                                classNames?.outlineButton
+                            )}
+                            disabled={isManagingOrganization}
+                            size="icon"
+                            type="button"
+                            variant="outline"
+                        >
+                            {isManagingOrganization ? (
+                                <Loader2 className="animate-spin" />
+                            ) : (
+                                <EllipsisIcon className={classNames?.icon} />
+                            )}
+                        </Button>
+                    </DropdownMenuTrigger>
+
+                    <DropdownMenuContent>
+                        <DropdownMenuItem
+                            onClick={handleManageOrganization}
+                            disabled={isManagingOrganization}
+                        >
+                            <SettingsIcon className={classNames?.icon} />
+
+                            {localization.MANAGE_ORGANIZATION}
+                        </DropdownMenuItem>
+
+                        <DropdownMenuItem
+                            onClick={() => setIsLeaveDialogOpen(true)}
+                            variant="destructive"
+                        >
+                            <LogOutIcon className={classNames?.icon} />
+
+                            {localization.LEAVE_ORGANIZATION}
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </Card>
+
+            <LeaveOrganizationDialog
+                open={isLeaveDialogOpen}
+                onOpenChange={setIsLeaveDialogOpen}
+                organization={organization}
+                localization={localization}
+            />
+        </>
+    )
+}