better-auth-ui 3.2.5

package/src/components/settings/api-key/api-key-delete-dialog.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import { KeyRoundIcon, Loader2 } from "lucide-react"
+import { type ComponentProps, useContext, useState } from "react"
+
+import { useLang } from "../../../hooks/use-lang"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import type { ApiKey } from "../../../types/api-key"
+import type { Refetch } from "../../../types/refetch"
+import { Button } from "../../ui/button"
+import { Card } from "../../ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "../../ui/dialog"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+
+interface ApiKeyDeleteDialogProps extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    apiKey: ApiKey
+    localization?: AuthLocalization
+    refetch?: Refetch
+}
+
+export function ApiKeyDeleteDialog({
+    classNames,
+    apiKey,
+    localization,
+    refetch,
+    onOpenChange,
+    ...props
+}: ApiKeyDeleteDialogProps) {
+    const {
+        localization: contextLocalization,
+        mutators: { deleteApiKey },
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { lang } = useLang()
+    const [isLoading, setIsLoading] = useState(false)
+
+    const handleDelete = async () => {
+        setIsLoading(true)
+
+        try {
+            await deleteApiKey({ keyId: apiKey.id })
+            await refetch?.()
+            onOpenChange?.(false)
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setIsLoading(false)
+    }
+
+    // Format expiration date or show "Never expires"
+    const formatExpiration = () => {
+        if (!apiKey.expiresAt) return localization.NEVER_EXPIRES
+
+        const expiresDate = new Date(apiKey.expiresAt)
+        return `${localization.EXPIRES} ${expiresDate.toLocaleDateString(
+            lang ?? "en",
+            {
+                month: "short",
+                day: "numeric",
+                year: "numeric"
+            }
+        )}`
+    }
+
+    return (
+        <Dialog onOpenChange={onOpenChange} {...props}>
+            <DialogContent
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                className={classNames?.dialog?.content}
+            >
+                <DialogHeader className={classNames?.dialog?.header}>
+                    <DialogTitle
+                        className={cn("text-lg md:text-xl", classNames?.title)}
+                    >
+                        {localization.DELETE} {localization.API_KEY}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {localization.DELETE_API_KEY_CONFIRM}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Card
+                    className={cn(
+                        "my-2 flex-row items-center gap-3 px-4 py-3",
+                        classNames?.cell
+                    )}
+                >
+                    <KeyRoundIcon className={cn("size-4", classNames?.icon)} />
+
+                    <div className="flex flex-col">
+                        <div className="flex items-center gap-2">
+                            <span className="font-semibold text-sm">
+                                {apiKey.name}
+                            </span>
+
+                            <span className="text-muted-foreground text-sm">
+                                {apiKey.start}
+                                {"******"}
+                            </span>
+                        </div>
+
+                        <div className="text-muted-foreground text-xs">
+                            {formatExpiration()}
+                        </div>
+                    </div>
+                </Card>
+
+                <DialogFooter className={classNames?.dialog?.footer}>
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        onClick={() => onOpenChange?.(false)}
+                        disabled={isLoading}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.secondaryButton
+                        )}
+                    >
+                        {localization.CANCEL}
+                    </Button>
+
+                    <Button
+                        type="button"
+                        variant="destructive"
+                        onClick={handleDelete}
+                        disabled={isLoading}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.destructiveButton
+                        )}
+                    >
+                        {isLoading && <Loader2 className="animate-spin" />}
+                        {localization.DELETE}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/components/settings/api-key/api-key-display-dialog.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import { CheckIcon, CopyIcon } from "lucide-react"
+import { type ComponentProps, useContext, useState } from "react"
+
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import { Button } from "../../ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "../../ui/dialog"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+
+interface ApiKeyDisplayDialogProps extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+    apiKey: string
+}
+
+export function ApiKeyDisplayDialog({
+    classNames,
+    apiKey,
+    localization,
+    onOpenChange,
+    ...props
+}: ApiKeyDisplayDialogProps) {
+    const { localization: contextLocalization } = useContext(AuthUIContext)
+    localization = { ...contextLocalization, ...localization }
+
+    const [copied, setCopied] = useState(false)
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(apiKey)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+    }
+
+    return (
+        <Dialog onOpenChange={onOpenChange} {...props}>
+            <DialogContent
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                className={classNames?.dialog?.content}
+            >
+                <DialogHeader className={classNames?.dialog?.header}>
+                    <DialogTitle
+                        className={cn("text-lg md:text-xl", classNames?.title)}
+                    >
+                        {localization.API_KEY_CREATED}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {localization.CREATE_API_KEY_SUCCESS}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="break-all rounded-md bg-muted p-4 font-mono text-sm">
+                    {apiKey}
+                </div>
+
+                <DialogFooter className={classNames?.dialog?.footer}>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleCopy}
+                        disabled={copied}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.outlineButton
+                        )}
+                    >
+                        {copied ? (
+                            <>
+                                <CheckIcon className={classNames?.icon} />
+                                {localization.COPIED_TO_CLIPBOARD}
+                            </>
+                        ) : (
+                            <>
+                                <CopyIcon className={classNames?.icon} />
+                                {localization.COPY_TO_CLIPBOARD}
+                            </>
+                        )}
+                    </Button>
+
+                    <Button
+                        type="button"
+                        variant="default"
+                        onClick={() => onOpenChange?.(false)}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.primaryButton
+                        )}
+                    >
+                        {localization.DONE}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/components/settings/api-key/api-keys-card.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { useContext, useMemo, useState } from "react"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn } from "../../../lib/utils"
+import { CardContent } from "../../ui/card"
+import type { SettingsCardProps } from "../shared/settings-card"
+import { SettingsCard } from "../shared/settings-card"
+import { ApiKeyCell } from "./api-key-cell"
+import { ApiKeyDisplayDialog } from "./api-key-display-dialog"
+import { CreateApiKeyDialog } from "./create-api-key-dialog"
+
+export interface ApiKeysCardProps extends SettingsCardProps {
+    organizationId?: string
+}
+
+export function ApiKeysCard({
+    className,
+    classNames,
+    localization,
+    organizationId,
+    ...props
+}: ApiKeysCardProps) {
+    const {
+        hooks: { useListApiKeys },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { data: apiKeys, isPending, refetch } = useListApiKeys()
+
+    // Filter API keys by organizationId
+    const filteredApiKeys = useMemo(() => {
+        return apiKeys?.filter(
+            (apiKey) => organizationId === apiKey.metadata?.organizationId
+        )
+    }, [apiKeys, organizationId])
+
+    const [createDialogOpen, setCreateDialogOpen] = useState(false)
+    const [displayDialogOpen, setDisplayDialogOpen] = useState(false)
+    const [createdApiKey, setCreatedApiKey] = useState("")
+
+    const handleCreateApiKey = (apiKey: string) => {
+        setCreatedApiKey(apiKey)
+        setDisplayDialogOpen(true)
+    }
+
+    return (
+        <>
+            <SettingsCard
+                className={className}
+                classNames={classNames}
+                actionLabel={localization.CREATE_API_KEY}
+                description={localization.API_KEYS_DESCRIPTION}
+                instructions={localization.API_KEYS_INSTRUCTIONS}
+                isPending={isPending}
+                title={localization.API_KEYS}
+                action={() => setCreateDialogOpen(true)}
+                {...props}
+            >
+                {filteredApiKeys && filteredApiKeys.length > 0 && (
+                    <CardContent
+                        className={cn("grid gap-4", classNames?.content)}
+                    >
+                        {filteredApiKeys?.map((apiKey) => (
+                            <ApiKeyCell
+                                key={apiKey.id}
+                                classNames={classNames}
+                                apiKey={apiKey}
+                                localization={localization}
+                                refetch={refetch}
+                            />
+                        ))}
+                    </CardContent>
+                )}
+            </SettingsCard>
+
+            <CreateApiKeyDialog
+                classNames={classNames}
+                localization={localization}
+                open={createDialogOpen}
+                onOpenChange={setCreateDialogOpen}
+                onSuccess={handleCreateApiKey}
+                refetch={refetch}
+                organizationId={organizationId}
+            />
+
+            <ApiKeyDisplayDialog
+                classNames={classNames}
+                apiKey={createdApiKey}
+                localization={localization}
+                open={displayDialogOpen}
+                onOpenChange={setDisplayDialogOpen}
+            />
+        </>
+    )
+}