better-auth-ui 3.2.5

package/src/components/settings/account/delete-account-card.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import type { Account } from "better-auth"
+import { useContext, useState } from "react"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+import { SettingsCard } from "../shared/settings-card"
+import { DeleteAccountDialog } from "./delete-account-dialog"
+
+export interface DeleteAccountCardProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    accounts?: Account[] | null
+    isPending?: boolean
+    localization?: AuthLocalization
+    skipHook?: boolean
+}
+
+export function DeleteAccountCard({
+    className,
+    classNames,
+    accounts,
+    isPending,
+    localization,
+    skipHook
+}: DeleteAccountCardProps) {
+    const {
+        hooks: { useListAccounts },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const [showDialog, setShowDialog] = useState(false)
+
+    if (!skipHook) {
+        const result = useListAccounts()
+        accounts = result.data
+        isPending = result.isPending
+    }
+
+    return (
+        <div>
+            <SettingsCard
+                className={className}
+                classNames={classNames}
+                actionLabel={localization?.DELETE_ACCOUNT}
+                description={localization?.DELETE_ACCOUNT_DESCRIPTION}
+                isPending={isPending}
+                title={localization?.DELETE_ACCOUNT}
+                variant="destructive"
+                action={() => setShowDialog(true)}
+            />
+
+            <DeleteAccountDialog
+                classNames={classNames}
+                accounts={accounts}
+                localization={localization}
+                open={showDialog}
+                onOpenChange={setShowDialog}
+            />
+        </div>
+    )
+}

package/src/components/settings/account/delete-account-dialog.tsx

@@ -0,0 +1,231 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { Account } from "better-auth"
+import { Loader2 } from "lucide-react"
+import { type ComponentProps, useContext } 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 { 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 { UserView } from "../../user-view"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+
+export interface DeleteAccountDialogProps
+    extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    accounts?: Account[] | null
+    localization?: AuthLocalization
+}
+
+export function DeleteAccountDialog({
+    classNames,
+    accounts,
+    localization,
+    onOpenChange,
+    ...props
+}: DeleteAccountDialogProps) {
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        deleteUser,
+        freshAge,
+        hooks: { useSession },
+        localization: contextLocalization,
+        viewPaths,
+        navigate,
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { data: sessionData } = useSession()
+    const session = sessionData?.session
+    const user = sessionData?.user
+
+    const isFresh = session
+        ? Date.now() - new Date(session?.createdAt).getTime() < freshAge * 1000
+        : false
+    const credentialsLinked = accounts?.some(
+        (acc) => acc.providerId === "credential"
+    )
+
+    const formSchema = z.object({
+        password: credentialsLinked
+            ? z.string().min(1, { message: localization.PASSWORD_REQUIRED! })
+            : z.string().optional()
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            password: ""
+        }
+    })
+
+    const { isSubmitting } = form.formState
+
+    const deleteAccount = async ({ password }: z.infer<typeof formSchema>) => {
+        const params = {} as Record<string, string>
+
+        if (credentialsLinked) {
+            params.password = password!
+        } else if (!isFresh) {
+            navigate(`${basePath}/${viewPaths.SIGN_OUT}`)
+            return
+        }
+
+        if (deleteUser?.verification) {
+            params.callbackURL = `${baseURL}${basePath}/${viewPaths.SIGN_OUT}`
+        }
+
+        try {
+            await authClient.deleteUser({
+                ...params,
+                fetchOptions: {
+                    throw: true
+                }
+            })
+
+            if (deleteUser?.verification) {
+                toast({
+                    variant: "success",
+                    message: localization.DELETE_ACCOUNT_VERIFY!
+                })
+            } else {
+                toast({
+                    variant: "success",
+                    message: localization.DELETE_ACCOUNT_SUCCESS!
+                })
+                navigate(`${basePath}/${viewPaths.SIGN_OUT}`)
+            }
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        onOpenChange?.(false)
+    }
+
+    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_ACCOUNT}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {isFresh
+                            ? localization?.DELETE_ACCOUNT_INSTRUCTIONS
+                            : localization?.SESSION_NOT_FRESH}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Card className={cn("my-2 flex-row p-4", classNames?.cell)}>
+                    <UserView user={user} localization={localization} />
+                </Card>
+
+                <Form {...form}>
+                    <form
+                        onSubmit={form.handleSubmit(deleteAccount)}
+                        className="grid gap-6"
+                    >
+                        {credentialsLinked && (
+                            <FormField
+                                control={form.control}
+                                name="password"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel
+                                            className={classNames?.label}
+                                        >
+                                            {localization?.PASSWORD}
+                                        </FormLabel>
+
+                                        <FormControl>
+                                            <Input
+                                                autoComplete="current-password"
+                                                placeholder={
+                                                    localization?.PASSWORD_PLACEHOLDER
+                                                }
+                                                type="password"
+                                                className={classNames?.input}
+                                                {...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" />
+                                )}
+                                {isFresh
+                                    ? localization?.DELETE_ACCOUNT
+                                    : localization?.SIGN_OUT}
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/components/settings/account/update-avatar-card.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import { Trash2Icon, UploadCloudIcon } from "lucide-react"
+import { type ComponentProps, useContext, useRef, useState } from "react"
+
+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 { Button } from "../../ui/button"
+import { Card } from "../../ui/card"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "../../ui/dropdown-menu"
+import { UserAvatar } from "../../user-avatar"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+import { SettingsCardFooter } from "../shared/settings-card-footer"
+import { SettingsCardHeader } from "../shared/settings-card-header"
+
+export interface UpdateAvatarCardProps extends ComponentProps<typeof Card> {
+    className?: string
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+}
+
+export function UpdateAvatarCard({
+    className,
+    classNames,
+    localization,
+    ...props
+}: UpdateAvatarCardProps) {
+    const {
+        hooks: { useSession },
+        mutators: { updateUser },
+        localization: authLocalization,
+        optimistic,
+        avatar,
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...authLocalization, ...localization }
+
+    const { data: sessionData, isPending, refetch } = useSession()
+    const fileInputRef = useRef<HTMLInputElement | null>(null)
+    const [loading, setLoading] = useState(false)
+
+    const handleAvatarChange = async (file: File) => {
+        if (!sessionData || !avatar) return
+
+        setLoading(true)
+        const resizedFile = await resizeAndCropImage(
+            file,
+            crypto.randomUUID(),
+            avatar.size,
+            avatar.extension
+        )
+
+        let image: string | undefined | null
+
+        if (avatar.upload) {
+            image = await avatar.upload(resizedFile)
+        } else {
+            image = await fileToBase64(resizedFile)
+        }
+
+        if (!image) {
+            setLoading(false)
+            return
+        }
+
+        if (optimistic && !avatar.upload) setLoading(false)
+
+        try {
+            await updateUser({ image })
+            await refetch?.()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setLoading(false)
+    }
+
+    const handleDeleteAvatar = async () => {
+        if (!sessionData) return
+
+        setLoading(true)
+
+        try {
+            // If a custom storage remover is provided, attempt to clean up the old asset first
+            if (sessionData.user.image && avatar?.delete) {
+                await avatar.delete(sessionData.user.image)
+            }
+
+            await updateUser({ image: null })
+            await refetch?.()
+        } 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}
+                hidden
+                type="file"
+                onChange={(e) => {
+                    const file = e.target.files?.item(0)
+                    if (file) handleAvatarChange(file)
+
+                    e.target.value = ""
+                }}
+            />
+
+            <div className="flex justify-between">
+                <SettingsCardHeader
+                    className="grow self-start"
+                    title={localization.AVATAR}
+                    description={localization.AVATAR_DESCRIPTION}
+                    isPending={isPending}
+                    classNames={classNames}
+                />
+
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            className="me-6 size-fit rounded-full"
+                            size="icon"
+                            variant="ghost"
+                        >
+                            <UserAvatar
+                                isPending={isPending || loading}
+                                key={sessionData?.user.image}
+                                className="size-20 text-2xl"
+                                classNames={classNames?.avatar}
+                                user={sessionData?.user}
+                                localization={localization}
+                            />
+                        </Button>
+                    </DropdownMenuTrigger>
+
+                    <DropdownMenuContent
+                        align="end"
+                        onCloseAutoFocus={(e) => e.preventDefault()}
+                    >
+                        <DropdownMenuItem
+                            onClick={openFileDialog}
+                            disabled={loading}
+                        >
+                            <UploadCloudIcon />
+                            {localization.UPLOAD_AVATAR}
+                        </DropdownMenuItem>
+                        {sessionData?.user.image && (
+                            <DropdownMenuItem
+                                onClick={handleDeleteAvatar}
+                                disabled={loading}
+                                variant="destructive"
+                            >
+                                <Trash2Icon />
+                                {localization.DELETE_AVATAR}
+                            </DropdownMenuItem>
+                        )}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+
+            <SettingsCardFooter
+                className="!py-5"
+                instructions={localization.AVATAR_INSTRUCTIONS}
+                classNames={classNames}
+                isPending={isPending}
+                isSubmitting={loading}
+            />
+        </Card>
+    )
+}