better-auth-ui 3.2.5

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

@@ -0,0 +1,94 @@
+"use client"
+
+import type { Organization } from "better-auth/plugins/organization"
+import { useContext, useMemo } from "react"
+import { useCurrentOrganization } from "../../hooks/use-current-organization"
+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 { CardContent } from "../ui/card"
+import { InvitationCell } from "./invitation-cell"
+
+export function OrganizationInvitationsCard({
+    className,
+    classNames,
+    localization: localizationProp,
+    slug: slugProp,
+    ...props
+}: SettingsCardProps & { slug?: string }) {
+    const {
+        localization: contextLocalization,
+        organization: organizationOptions
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const slug = slugProp || organizationOptions?.slug
+
+    const { data: organization } = useCurrentOrganization({ slug })
+
+    if (!organization) return null
+
+    return (
+        <OrganizationInvitationsContent
+            className={className}
+            classNames={classNames}
+            localization={localization}
+            organization={organization}
+            {...props}
+        />
+    )
+}
+
+function OrganizationInvitationsContent({
+    className,
+    classNames,
+    localization: localizationProp,
+    organization,
+    ...props
+}: SettingsCardProps & { organization: Organization }) {
+    const {
+        hooks: { useListInvitations },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { data: invitations } = useListInvitations({
+        query: { organizationId: organization.id }
+    })
+
+    const pendingInvitations = invitations?.filter(
+        (invitation) => invitation.status === "pending"
+    )
+    if (!pendingInvitations?.length) return null
+
+    return (
+        <SettingsCard
+            className={className}
+            classNames={classNames}
+            title={localization.PENDING_INVITATIONS}
+            description={localization.PENDING_INVITATIONS_DESCRIPTION}
+            {...props}
+        >
+            <CardContent className={cn("grid gap-4", classNames?.content)}>
+                {pendingInvitations.map((invitation) => (
+                    <InvitationCell
+                        key={invitation.id}
+                        classNames={classNames}
+                        invitation={invitation}
+                        localization={localization}
+                        organization={organization}
+                    />
+                ))}
+            </CardContent>
+        </SettingsCard>
+    )
+}

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

@@ -0,0 +1,308 @@
+"use client"
+
+import type { Organization } from "better-auth/plugins/organization"
+import { Trash2Icon, UploadCloudIcon } from "lucide-react"
+import {
+    type ComponentProps,
+    useContext,
+    useMemo,
+    useRef,
+    useState
+} from "react"
+
+import { useCurrentOrganization } from "../../hooks/use-current-organization"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { fileToBase64, resizeAndCropImage } from "../../lib/image-utils"
+import { cn, getLocalizedError } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import type { SettingsCardClassNames } from "../settings/shared/settings-card"
+import { SettingsCardFooter } from "../settings/shared/settings-card-footer"
+import { SettingsCardHeader } from "../settings/shared/settings-card-header"
+import { Button } from "../ui/button"
+import { Card } from "../ui/card"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "../ui/dropdown-menu"
+import { OrganizationLogo } from "./organization-logo"
+
+export interface OrganizationLogoCardProps extends ComponentProps<typeof Card> {
+    className?: string
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+    slug?: string
+}
+
+export function OrganizationLogoCard({
+    className,
+    classNames,
+    localization: localizationProp,
+    slug,
+    ...props
+}: OrganizationLogoCardProps) {
+    const { localization: contextLocalization } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { data: organization } = useCurrentOrganization({ slug })
+
+    if (!organization) {
+        return (
+            <Card
+                className={cn(
+                    "w-full pb-0 text-start",
+                    className,
+                    classNames?.base
+                )}
+                {...props}
+            >
+                <div className="flex justify-between">
+                    <SettingsCardHeader
+                        className="grow self-start"
+                        title={localization.LOGO}
+                        description={localization.LOGO_DESCRIPTION}
+                        isPending
+                        classNames={classNames}
+                    />
+
+                    <Button
+                        type="button"
+                        className="me-6 size-fit rounded-full"
+                        size="icon"
+                        variant="ghost"
+                        disabled
+                    >
+                        <OrganizationLogo
+                            isPending
+                            className="size-20 text-2xl"
+                            classNames={classNames?.avatar}
+                            localization={localization}
+                        />
+                    </Button>
+                </div>
+
+                <SettingsCardFooter
+                    className="!py-5"
+                    instructions={localization.LOGO_INSTRUCTIONS}
+                    classNames={classNames}
+                    isPending
+                />
+            </Card>
+        )
+    }
+
+    return (
+        <OrganizationLogoForm
+            className={className}
+            classNames={classNames}
+            localization={localization}
+            organization={organization}
+            {...props}
+        />
+    )
+}
+
+function OrganizationLogoForm({
+    className,
+    classNames,
+    localization: localizationProp,
+    organization,
+    ...props
+}: OrganizationLogoCardProps & { organization: Organization }) {
+    const {
+        hooks: { useHasPermission },
+        localization: authLocalization,
+        organization: organizationOptions,
+        mutators: { updateOrganization },
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...authLocalization, ...localizationProp }),
+        [authLocalization, localizationProp]
+    )
+
+    const { refetch: refetchOrganization } = useCurrentOrganization({
+        slug: organization.slug
+    })
+
+    const { data: hasPermission, isPending: permissionPending } =
+        useHasPermission({
+            organizationId: organization.id,
+            permissions: {
+                organization: ["update"]
+            }
+        })
+
+    const isPending = permissionPending
+
+    const fileInputRef = useRef<HTMLInputElement | null>(null)
+    const [loading, setLoading] = useState(false)
+
+    const handleLogoChange = async (file: File) => {
+        if (!organizationOptions?.logo || !hasPermission?.success) return
+
+        setLoading(true)
+
+        const resizedFile = await resizeAndCropImage(
+            file,
+            crypto.randomUUID(),
+            organizationOptions.logo.size,
+            organizationOptions.logo.extension
+        )
+
+        let image: string | undefined | null
+
+        if (organizationOptions.logo.upload) {
+            image = await organizationOptions.logo.upload(resizedFile)
+        } else {
+            image = await fileToBase64(resizedFile)
+        }
+
+        if (!image) {
+            setLoading(false)
+            return
+        }
+
+        try {
+            await updateOrganization({
+                organizationId: organization.id,
+                data: { logo: image }
+            })
+
+            await refetchOrganization?.()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setLoading(false)
+    }
+
+    const handleDeleteLogo = async () => {
+        if (!hasPermission?.success) return
+
+        setLoading(true)
+
+        try {
+            if (organization.logo) {
+                await organizationOptions?.logo?.delete?.(organization.logo)
+            }
+
+            await updateOrganization({
+                organizationId: organization.id,
+                data: { logo: "" }
+            })
+
+            await refetchOrganization?.()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setLoading(false)
+    }
+
+    const openFileDialog = () => {
+        fileInputRef.current?.click()
+    }
+
+    return (
+        <Card
+            className={cn(
+                "w-full pb-0 text-start",
+                className,
+                classNames?.base
+            )}
+            {...props}
+        >
+            <input
+                ref={fileInputRef}
+                accept="image/*"
+                disabled={loading || !hasPermission?.success}
+                hidden
+                type="file"
+                onChange={(e) => {
+                    const file = e.target.files?.item(0)
+                    if (file) handleLogoChange(file)
+
+                    e.target.value = ""
+                }}
+            />
+
+            <div className="flex justify-between">
+                <SettingsCardHeader
+                    className="grow self-start"
+                    title={localization.LOGO}
+                    description={localization.LOGO_DESCRIPTION}
+                    isPending={isPending}
+                    classNames={classNames}
+                />
+
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            type="button"
+                            className="me-6 size-fit rounded-full"
+                            size="icon"
+                            variant="ghost"
+                            disabled={!hasPermission?.success}
+                        >
+                            <OrganizationLogo
+                                isPending={isPending || loading}
+                                key={organization.logo}
+                                className="size-20 text-2xl"
+                                classNames={classNames?.avatar}
+                                organization={organization}
+                                localization={localization}
+                            />
+                        </Button>
+                    </DropdownMenuTrigger>
+
+                    <DropdownMenuContent
+                        align="end"
+                        onCloseAutoFocus={(e) => e.preventDefault()}
+                    >
+                        <DropdownMenuItem
+                            onClick={openFileDialog}
+                            disabled={loading || !hasPermission?.success}
+                        >
+                            <UploadCloudIcon />
+
+                            {localization.UPLOAD_LOGO}
+                        </DropdownMenuItem>
+
+                        {organization.logo && (
+                            <DropdownMenuItem
+                                onClick={handleDeleteLogo}
+                                disabled={loading || !hasPermission?.success}
+                                variant="destructive"
+                            >
+                                <Trash2Icon />
+
+                                {localization.DELETE_LOGO}
+                            </DropdownMenuItem>
+                        )}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+
+            <SettingsCardFooter
+                className="!py-5"
+                instructions={localization.LOGO_INSTRUCTIONS}
+                classNames={classNames}
+                isPending={isPending}
+                isSubmitting={loading}
+            />
+        </Card>
+    )
+}

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

@@ -0,0 +1,120 @@
+"use client"
+
+import type { Organization } from "better-auth/plugins/organization"
+import { BuildingIcon } from "lucide-react"
+import { type ComponentProps, useContext, useMemo } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
+import { Skeleton } from "../ui/skeleton"
+
+export interface OrganizationLogoClassNames {
+    base?: string
+    image?: string
+    fallback?: string
+    fallbackIcon?: string
+    skeleton?: string
+}
+
+export interface OrganizationLogoProps {
+    classNames?: OrganizationLogoClassNames
+    isPending?: boolean
+    size?: "sm" | "default" | "lg" | "xl" | null
+    organization?: Partial<Organization> | null
+    /**
+     * @default authLocalization
+     * @remarks `AuthLocalization`
+     */
+    localization?: AuthLocalization
+}
+
+/**
+ * Displays an organization logo with image and fallback support
+ *
+ * Renders an organization's logo image when available, with appropriate fallbacks:
+ * - Shows a skeleton when isPending is true
+ * - Falls back to a building icon when no logo is available
+ */
+export function OrganizationLogo({
+    className,
+    classNames,
+    isPending,
+    size,
+    organization,
+    localization: propLocalization,
+    ...props
+}: OrganizationLogoProps & ComponentProps<typeof Avatar>) {
+    const { localization: contextLocalization, avatar } =
+        useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...propLocalization }),
+        [contextLocalization, propLocalization]
+    )
+
+    const name = organization?.name
+    const src = organization?.logo
+
+    if (isPending) {
+        return (
+            <Skeleton
+                className={cn(
+                    "shrink-0 rounded-full",
+                    size === "sm"
+                        ? "size-6"
+                        : size === "lg"
+                          ? "size-10"
+                          : size === "xl"
+                            ? "size-12"
+                            : "size-8",
+                    className,
+                    classNames?.base,
+                    classNames?.skeleton
+                )}
+            />
+        )
+    }
+
+    return (
+        <Avatar
+            className={cn(
+                "bg-muted",
+                size === "sm"
+                    ? "size-6"
+                    : size === "lg"
+                      ? "size-10"
+                      : size === "xl"
+                        ? "size-12"
+                        : "size-8",
+                className,
+                classNames?.base
+            )}
+            {...props}
+        >
+            {avatar?.Image ? (
+                <avatar.Image
+                    alt={name || localization?.ORGANIZATION!}
+                    className={classNames?.image}
+                    src={src || ""}
+                />
+            ) : (
+                <AvatarImage
+                    alt={name || localization?.ORGANIZATION!}
+                    className={classNames?.image}
+                    src={src || undefined}
+                />
+            )}
+
+            <AvatarFallback
+                className={cn("text-foreground", classNames?.fallback)}
+                delayMs={src ? 600 : undefined}
+            >
+                <BuildingIcon
+                    className={cn("size-[50%]", classNames?.fallbackIcon)}
+                />
+            </AvatarFallback>
+        </Avatar>
+    )
+}

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

@@ -0,0 +1,155 @@
+"use client"
+
+import type { Organization } from "better-auth/plugins/organization"
+import { useContext, useMemo, useState } from "react"
+
+import { useCurrentOrganization } from "../../hooks/use-current-organization"
+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 { CardContent } from "../ui/card"
+import { InviteMemberDialog } from "./invite-member-dialog"
+import { MemberCell } from "./member-cell"
+
+export function OrganizationMembersCard({
+    className,
+    classNames,
+    localization: localizationProp,
+    slug: slugProp,
+    ...props
+}: SettingsCardProps & { slug?: string }) {
+    const {
+        localization: contextLocalization,
+        organization: organizationOptions
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const slug = slugProp || organizationOptions?.slug
+
+    const { data: organization } = useCurrentOrganization({ slug })
+
+    if (!organization) {
+        return (
+            <SettingsCard
+                className={className}
+                classNames={classNames}
+                title={localization.MEMBERS}
+                description={localization.MEMBERS_DESCRIPTION}
+                instructions={localization.MEMBERS_INSTRUCTIONS}
+                actionLabel={localization.INVITE_MEMBER}
+                isPending
+                {...props}
+            />
+        )
+    }
+
+    return (
+        <OrganizationMembersContent
+            className={className}
+            classNames={classNames}
+            localization={localization}
+            organization={organization}
+            {...props}
+        />
+    )
+}
+
+function OrganizationMembersContent({
+    className,
+    classNames,
+    localization: localizationProp,
+    organization,
+    ...props
+}: SettingsCardProps & { organization: Organization }) {
+    const {
+        hooks: { useHasPermission, useListMembers },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { data: hasPermissionInvite, isPending: isPendingInvite } =
+        useHasPermission({
+            organizationId: organization.id,
+            permissions: {
+                invitation: ["create"]
+            }
+        })
+
+    const {
+        data: hasPermissionUpdateMember,
+        isPending: isPendingUpdateMember
+    } = useHasPermission({
+        organizationId: organization.id,
+        permission: {
+            member: ["update"]
+        }
+    })
+
+    const isPending = isPendingInvite || isPendingUpdateMember
+
+    const { data } = useListMembers({
+        query: { organizationId: organization.id }
+    })
+
+    const members = data?.members
+
+    const [inviteDialogOpen, setInviteDialogOpen] = useState(false)
+
+    return (
+        <>
+            <SettingsCard
+                className={className}
+                classNames={classNames}
+                title={localization.MEMBERS}
+                description={localization.MEMBERS_DESCRIPTION}
+                instructions={localization.MEMBERS_INSTRUCTIONS}
+                actionLabel={localization.INVITE_MEMBER}
+                action={() => setInviteDialogOpen(true)}
+                isPending={isPending}
+                disabled={!hasPermissionInvite?.success}
+                {...props}
+            >
+                {!isPending && members && members.length > 0 && (
+                    <CardContent
+                        className={cn("grid gap-4", classNames?.content)}
+                    >
+                        {members
+                            .sort(
+                                (a, b) =>
+                                    new Date(a.createdAt).getTime() -
+                                    new Date(b.createdAt).getTime()
+                            )
+                            .map((member) => (
+                                <MemberCell
+                                    key={member.id}
+                                    classNames={classNames}
+                                    member={member}
+                                    localization={localization}
+                                    hideActions={
+                                        !hasPermissionUpdateMember?.success
+                                    }
+                                />
+                            ))}
+                    </CardContent>
+                )}
+            </SettingsCard>
+
+            <InviteMemberDialog
+                open={inviteDialogOpen}
+                onOpenChange={setInviteDialogOpen}
+                classNames={classNames}
+                localization={localization}
+                organization={organization}
+            />
+        </>
+    )
+}