better-auth-ui 3.2.5

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

@@ -0,0 +1,209 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { Organization } from "better-auth/plugins/organization"
+import { Loader2 } from "lucide-react"
+import { type ComponentProps, useContext, useMemo } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+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 {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../ui/form"
+import { Input } from "../ui/input"
+import { OrganizationCellView } from "./organization-cell-view"
+
+export interface DeleteOrganizationDialogProps
+    extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+    organization: Organization
+}
+
+export function DeleteOrganizationDialog({
+    classNames,
+    localization: localizationProp,
+    onOpenChange,
+    organization,
+    ...props
+}: DeleteOrganizationDialogProps) {
+    const {
+        authClient,
+        account: accountOptions,
+        hooks: { useListOrganizations },
+        localization: contextLocalization,
+        navigate,
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { refetch: refetchOrganizations } = useListOrganizations()
+
+    const formSchema = z.object({
+        slug: z
+            .string()
+            .min(1, { message: localization.SLUG_REQUIRED! })
+            .refine((val) => val === organization.slug, {
+                message: localization.SLUG_DOES_NOT_MATCH!
+            })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            slug: ""
+        }
+    })
+
+    const { isSubmitting } = form.formState
+
+    const deleteOrganization = async () => {
+        try {
+            await authClient.organization.delete({
+                organizationId: organization.id,
+                fetchOptions: { throw: true }
+            })
+
+            await refetchOrganizations?.()
+
+            toast({
+                variant: "success",
+                message: localization.DELETE_ORGANIZATION_SUCCESS!
+            })
+
+            navigate(
+                `${accountOptions?.basePath}/${accountOptions?.viewPaths.ORGANIZATIONS}`
+            )
+
+            onOpenChange?.(false)
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+    }
+
+    return (
+        <Dialog onOpenChange={onOpenChange} {...props}>
+            <DialogContent
+                className={cn("sm:max-w-md", classNames?.dialog?.content)}
+            >
+                <DialogHeader className={classNames?.dialog?.header}>
+                    <DialogTitle
+                        className={cn("text-lg md:text-xl", classNames?.title)}
+                    >
+                        {localization?.DELETE_ORGANIZATION}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {localization?.DELETE_ORGANIZATION_DESCRIPTION}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Card className={cn("my-2 flex-row p-4", classNames?.cell)}>
+                    <OrganizationCellView
+                        organization={organization}
+                        localization={localization}
+                    />
+                </Card>
+
+                <Form {...form}>
+                    <form
+                        onSubmit={form.handleSubmit(deleteOrganization)}
+                        className="grid gap-6"
+                    >
+                        <FormField
+                            control={form.control}
+                            name="slug"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel className={classNames?.label}>
+                                        {
+                                            localization?.DELETE_ORGANIZATION_INSTRUCTIONS
+                                        }
+
+                                        <span className="font-bold">
+                                            {organization.slug}
+                                        </span>
+                                    </FormLabel>
+
+                                    <FormControl>
+                                        <Input
+                                            placeholder={organization.slug}
+                                            className={classNames?.input}
+                                            autoComplete="off"
+                                            {...field}
+                                        />
+                                    </FormControl>
+
+                                    <FormMessage
+                                        className={classNames?.error}
+                                    />
+                                </FormItem>
+                            )}
+                        />
+
+                        <DialogFooter className={classNames?.dialog?.footer}>
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className={cn(
+                                    classNames?.button,
+                                    classNames?.secondaryButton
+                                )}
+                                onClick={() => onOpenChange?.(false)}
+                            >
+                                {localization.CANCEL}
+                            </Button>
+
+                            <Button
+                                className={cn(
+                                    classNames?.button,
+                                    classNames?.destructiveButton
+                                )}
+                                disabled={isSubmitting}
+                                variant="destructive"
+                                type="submit"
+                            >
+                                {isSubmitting && (
+                                    <Loader2 className="animate-spin" />
+                                )}
+
+                                {localization?.DELETE_ORGANIZATION}
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}

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

@@ -0,0 +1,156 @@
+"use client"
+
+import type { Organization } from "better-auth/plugins/organization"
+import { EllipsisIcon, Loader2, XIcon } from "lucide-react"
+import { 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 { Invitation } from "../../types/invitation"
+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 { UserAvatar } from "../user-avatar"
+
+export interface InvitationCellProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    invitation: Invitation
+    localization?: AuthLocalization
+    organization: Organization
+}
+
+export function InvitationCell({
+    className,
+    classNames,
+    invitation,
+    localization: localizationProp,
+    organization
+}: InvitationCellProps) {
+    const {
+        authClient,
+        hooks: { useListInvitations },
+        organization: organizationOptions,
+        localization: contextLocalization,
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const [isLoading, setIsLoading] = useState(false)
+
+    const builtInRoles = [
+        { role: "owner", label: localization.OWNER },
+        { role: "admin", label: localization.ADMIN },
+        { role: "member", label: localization.MEMBER }
+    ]
+
+    const roles = [...builtInRoles, ...(organizationOptions?.customRoles || [])]
+    const role = roles.find((r) => r.role === invitation.role)
+
+    const { refetch } = useListInvitations({
+        query: { organizationId: organization?.id }
+    })
+
+    const handleCancelInvitation = async () => {
+        setIsLoading(true)
+
+        try {
+            await authClient.organization.cancelInvitation({
+                invitationId: invitation.id,
+                fetchOptions: { throw: true }
+            })
+
+            await refetch?.()
+
+            toast({
+                variant: "success",
+                message: localization.INVITATION_CANCELLED
+            })
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setIsLoading(false)
+    }
+
+    return (
+        <Card
+            className={cn(
+                "flex-row items-center p-4",
+                className,
+                classNames?.cell
+            )}
+        >
+            <div className="flex flex-1 items-center gap-2">
+                <UserAvatar
+                    className="my-0.5"
+                    user={invitation}
+                    localization={localization}
+                />
+
+                <div className="grid flex-1 text-left leading-tight">
+                    <span className="truncate font-semibold text-sm">
+                        {invitation.email}
+                    </span>
+
+                    <span className="truncate text-muted-foreground text-xs">
+                        {localization.EXPIRES}{" "}
+                        {invitation.expiresAt.toLocaleDateString()}
+                    </span>
+                </div>
+            </div>
+
+            <span className="truncate text-sm opacity-70">{role?.label}</span>
+
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button
+                        className={cn(
+                            "relative ms-auto",
+                            classNames?.button,
+                            classNames?.outlineButton
+                        )}
+                        disabled={isLoading}
+                        size="icon"
+                        type="button"
+                        variant="outline"
+                    >
+                        {isLoading ? (
+                            <Loader2 className="animate-spin" />
+                        ) : (
+                            <EllipsisIcon className={classNames?.icon} />
+                        )}
+                    </Button>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent
+                    onCloseAutoFocus={(e) => e.preventDefault()}
+                >
+                    <DropdownMenuItem
+                        onClick={handleCancelInvitation}
+                        disabled={isLoading}
+                        variant="destructive"
+                    >
+                        <XIcon className={classNames?.icon} />
+
+                        {localization.CANCEL_INVITATION}
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </Card>
+    )
+}

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

@@ -0,0 +1,258 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { Organization } from "better-auth/plugins/organization"
+import { Loader2 } from "lucide-react"
+import { type ComponentProps, useContext, useMemo } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+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 {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../ui/form"
+import { Input } from "../ui/input"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "../ui/select"
+
+export interface InviteMemberDialogProps extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+    organization: Organization
+}
+
+export function InviteMemberDialog({
+    classNames,
+    localization: localizationProp,
+    onOpenChange,
+    organization,
+    ...props
+}: InviteMemberDialogProps) {
+    const {
+        authClient,
+        hooks: { useListInvitations, useListMembers, useSession },
+        localization: contextLocalization,
+        toast,
+        organization: organizationOptions
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { data } = useListMembers({
+        query: { organizationId: organization.id }
+    })
+
+    const { refetch } = useListInvitations({
+        query: { organizationId: organization.id }
+    })
+
+    const members = data?.members
+
+    const { data: sessionData } = useSession()
+    const membership = members?.find((m) => m.userId === sessionData?.user.id)
+
+    const builtInRoles = [
+        { role: "owner", label: localization.OWNER },
+        { role: "admin", label: localization.ADMIN },
+        { role: "member", label: localization.MEMBER }
+    ] as const
+
+    const roles = [...builtInRoles, ...(organizationOptions?.customRoles || [])]
+    const availableRoles = roles.filter(
+        (role) => membership?.role === "owner" || role.role !== "owner"
+    )
+
+    const formSchema = z.object({
+        email: z
+            .string()
+            .min(1, { message: localization.EMAIL_REQUIRED })
+            .email({
+                message: localization.INVALID_EMAIL
+            }),
+        role: z.string().min(1, {
+            message: `${localization.ROLE} ${localization.IS_REQUIRED}`
+        })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: "",
+            role: "member"
+        }
+    })
+
+    const isSubmitting = form.formState.isSubmitting
+
+    async function onSubmit({ email, role }: z.infer<typeof formSchema>) {
+        try {
+            await authClient.organization.inviteMember({
+                email,
+                role: role as (typeof builtInRoles)[number]["role"],
+                organizationId: organization.id,
+                fetchOptions: { throw: true }
+            })
+
+            await refetch?.()
+
+            onOpenChange?.(false)
+            form.reset()
+
+            toast({
+                variant: "success",
+                message:
+                    localization.SEND_INVITATION_SUCCESS ||
+                    "Invitation sent successfully"
+            })
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+    }
+
+    return (
+        <Dialog onOpenChange={onOpenChange} {...props}>
+            <DialogContent className={classNames?.dialog?.content}>
+                <DialogHeader className={classNames?.dialog?.header}>
+                    <DialogTitle
+                        className={cn("text-lg md:text-xl", classNames?.title)}
+                    >
+                        {localization.INVITE_MEMBER}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {localization.INVITE_MEMBER_DESCRIPTION}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Form {...form}>
+                    <form
+                        onSubmit={form.handleSubmit(onSubmit)}
+                        className="space-y-6"
+                    >
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel className={classNames?.label}>
+                                        {localization.EMAIL}
+                                    </FormLabel>
+
+                                    <FormControl>
+                                        <Input
+                                            placeholder={
+                                                localization.EMAIL_PLACEHOLDER
+                                            }
+                                            type="email"
+                                            {...field}
+                                            className={classNames?.input}
+                                        />
+                                    </FormControl>
+
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="role"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel className={classNames?.label}>
+                                        {localization.ROLE}
+                                    </FormLabel>
+
+                                    <Select
+                                        onValueChange={field.onChange}
+                                        defaultValue={field.value}
+                                    >
+                                        <FormControl>
+                                            <SelectTrigger>
+                                                <SelectValue />
+                                            </SelectTrigger>
+                                        </FormControl>
+
+                                        <SelectContent>
+                                            {availableRoles.map((role) => (
+                                                <SelectItem
+                                                    key={role.role}
+                                                    value={role.role}
+                                                >
+                                                    {role.label}
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <DialogFooter className={classNames?.dialog?.footer}>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => onOpenChange?.(false)}
+                                className={cn(
+                                    classNames?.button,
+                                    classNames?.outlineButton
+                                )}
+                            >
+                                {localization.CANCEL}
+                            </Button>
+
+                            <Button
+                                type="submit"
+                                className={cn(
+                                    classNames?.button,
+                                    classNames?.primaryButton
+                                )}
+                                disabled={isSubmitting}
+                            >
+                                {isSubmitting && (
+                                    <Loader2 className="animate-spin" />
+                                )}
+
+                                {localization.SEND_INVITATION}
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}