better-auth-ui 3.2.5

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

@@ -0,0 +1,282 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { type ReactNode, 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 { FieldType } from "../../../types/additional-fields"
+import { CardContent } from "../../ui/card"
+import { Checkbox } from "../../ui/checkbox"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../../ui/form"
+import { Input } from "../../ui/input"
+import { Skeleton } from "../../ui/skeleton"
+import { Textarea } from "../../ui/textarea"
+import {
+    SettingsCard,
+    type SettingsCardClassNames
+} from "../shared/settings-card"
+
+export interface UpdateFieldCardProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    description?: ReactNode
+    instructions?: ReactNode
+    localization?: Partial<AuthLocalization>
+    name: string
+    placeholder?: string
+    required?: boolean
+    label?: ReactNode
+    type?: FieldType
+    multiline?: boolean
+    value?: unknown
+    validate?: (value: string) => boolean | Promise<boolean>
+}
+
+export function UpdateFieldCard({
+    className,
+    classNames,
+    description,
+    instructions,
+    localization: localizationProp,
+    name,
+    placeholder,
+    required,
+    label,
+    type,
+    multiline,
+    value,
+    validate
+}: UpdateFieldCardProps) {
+    const {
+        hooks: { useSession },
+        mutators: { updateUser },
+        localization: contextLocalization,
+        optimistic,
+        toast
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const { isPending } = useSession()
+
+    let fieldSchema = z.unknown() as z.ZodType<unknown>
+
+    // Create the appropriate schema based on type
+    if (type === "number") {
+        fieldSchema = required
+            ? z.preprocess(
+                  (val) => (!val ? undefined : Number(val)),
+                  z.number({
+                      message: `${label} ${localization.IS_INVALID}`
+                  })
+              )
+            : z.coerce
+                  .number({
+                      message: `${label} ${localization.IS_INVALID}`
+                  })
+                  .optional()
+    } else if (type === "boolean") {
+        fieldSchema = required
+            ? z.coerce
+                  .boolean({
+                      message: `${label} ${localization.IS_INVALID}`
+                  })
+                  .refine((val) => val === true, {
+                      message: `${label} ${localization.IS_REQUIRED}`
+                  })
+            : z.coerce.boolean({
+                  message: `${label} ${localization.IS_INVALID}`
+              })
+    } else {
+        fieldSchema = required
+            ? z.string().min(1, `${label} ${localization.IS_REQUIRED}`)
+            : z.string().optional()
+    }
+
+    const form = useForm({
+        resolver: zodResolver(z.object({ [name]: fieldSchema })),
+        values: { [name]: value || "" }
+    })
+
+    const { isSubmitting } = form.formState
+
+    const updateField = async (values: Record<string, unknown>) => {
+        await new Promise((resolve) => setTimeout(resolve))
+        const newValue = values[name]
+
+        if (value === newValue) {
+            toast({
+                variant: "error",
+                message: `${label} ${localization.IS_THE_SAME}`
+            })
+            return
+        }
+
+        if (
+            validate &&
+            typeof newValue === "string" &&
+            !(await validate(newValue))
+        ) {
+            form.setError(name, {
+                message: `${label} ${localization.IS_INVALID}`
+            })
+
+            return
+        }
+
+        try {
+            await updateUser({ [name]: newValue })
+
+            toast({
+                variant: "success",
+                message: `${label} ${localization.UPDATED_SUCCESSFULLY}`
+            })
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(updateField)}>
+                <SettingsCard
+                    className={className}
+                    classNames={classNames}
+                    description={description}
+                    instructions={instructions}
+                    isPending={isPending}
+                    title={label}
+                    actionLabel={localization.SAVE}
+                    optimistic={optimistic}
+                >
+                    <CardContent className={classNames?.content}>
+                        {type === "boolean" ? (
+                            <FormField
+                                control={form.control}
+                                name={name}
+                                render={({ field }) => (
+                                    <FormItem className="flex">
+                                        <FormControl>
+                                            <Checkbox
+                                                checked={field.value as boolean}
+                                                onCheckedChange={field.onChange}
+                                                disabled={isSubmitting}
+                                                className={classNames?.checkbox}
+                                            />
+                                        </FormControl>
+
+                                        <FormLabel
+                                            className={classNames?.label}
+                                        >
+                                            {label}
+                                        </FormLabel>
+
+                                        <FormMessage
+                                            className={classNames?.error}
+                                        />
+                                    </FormItem>
+                                )}
+                            />
+                        ) : isPending ? (
+                            <Skeleton
+                                className={cn(
+                                    "h-9 w-full",
+                                    classNames?.skeleton
+                                )}
+                            />
+                        ) : (
+                            <FormField
+                                control={form.control}
+                                name={name}
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormControl>
+                                            {type === "number" ? (
+                                                <Input
+                                                    className={
+                                                        classNames?.input
+                                                    }
+                                                    type="number"
+                                                    placeholder={
+                                                        placeholder ||
+                                                        (typeof label ===
+                                                        "string"
+                                                            ? label
+                                                            : "")
+                                                    }
+                                                    disabled={isSubmitting}
+                                                    {...field}
+                                                    value={
+                                                        field.value as string
+                                                    }
+                                                />
+                                            ) : multiline ? (
+                                                <Textarea
+                                                    className={
+                                                        classNames?.input
+                                                    }
+                                                    placeholder={
+                                                        placeholder ||
+                                                        (typeof label ===
+                                                        "string"
+                                                            ? label
+                                                            : "")
+                                                    }
+                                                    disabled={isSubmitting}
+                                                    {...field}
+                                                    value={
+                                                        field.value as string
+                                                    }
+                                                />
+                                            ) : (
+                                                <Input
+                                                    className={
+                                                        classNames?.input
+                                                    }
+                                                    type="text"
+                                                    placeholder={
+                                                        placeholder ||
+                                                        (typeof label ===
+                                                        "string"
+                                                            ? label
+                                                            : "")
+                                                    }
+                                                    disabled={isSubmitting}
+                                                    {...field}
+                                                    value={
+                                                        field.value as string
+                                                    }
+                                                />
+                                            )}
+                                        </FormControl>
+
+                                        <FormMessage
+                                            className={classNames?.error}
+                                        />
+                                    </FormItem>
+                                )}
+                            />
+                        )}
+                    </CardContent>
+                </SettingsCard>
+            </form>
+        </Form>
+    )
+}

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

@@ -0,0 +1,39 @@
+"use client"
+
+import { useContext } from "react"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import type { SettingsCardProps } from "../shared/settings-card"
+import { UpdateFieldCard } from "./update-field-card"
+
+export function UpdateNameCard({
+    className,
+    classNames,
+    localization,
+    ...props
+}: SettingsCardProps) {
+    const {
+        hooks: { useSession },
+        localization: contextLocalization,
+        nameRequired
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { data: sessionData } = useSession()
+
+    return (
+        <UpdateFieldCard
+            className={className}
+            classNames={classNames}
+            value={sessionData?.user.name}
+            description={localization.NAME_DESCRIPTION}
+            name="name"
+            instructions={localization.NAME_INSTRUCTIONS}
+            label={localization.NAME}
+            localization={localization}
+            placeholder={localization.NAME_PLACEHOLDER}
+            required={nameRequired}
+            {...props}
+        />
+    )
+}

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

@@ -0,0 +1,42 @@
+"use client"
+
+import { useContext } from "react"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import type { User } from "../../../types/auth-client"
+import type { SettingsCardProps } from "../shared/settings-card"
+import { UpdateFieldCard } from "./update-field-card"
+
+export function UpdateUsernameCard({
+    className,
+    classNames,
+    localization,
+    ...props
+}: SettingsCardProps) {
+    const {
+        hooks: { useSession },
+        localization: contextLocalization
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { data: sessionData } = useSession()
+    const value =
+        (sessionData?.user as User)?.displayUsername ||
+        (sessionData?.user as User)?.username
+
+    return (
+        <UpdateFieldCard
+            className={className}
+            classNames={classNames}
+            value={value}
+            description={localization.USERNAME_DESCRIPTION}
+            name="username"
+            instructions={localization.USERNAME_INSTRUCTIONS}
+            label={localization.USERNAME}
+            localization={localization}
+            placeholder={localization.USERNAME_PLACEHOLDER}
+            required
+            {...props}
+        />
+    )
+}

package/src/components/settings/account-settings-cards.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { useContext } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { AccountsCard } from "./account/accounts-card"
+import { UpdateAvatarCard } from "./account/update-avatar-card"
+import { UpdateFieldCard } from "./account/update-field-card"
+import { UpdateNameCard } from "./account/update-name-card"
+import { UpdateUsernameCard } from "./account/update-username-card"
+import { ChangeEmailCard } from "./security/change-email-card"
+import type { SettingsCardClassNames } from "./shared/settings-card"
+
+export function AccountSettingsCards({
+    className,
+    classNames,
+    localization
+}: {
+    className?: string
+    classNames?: {
+        card?: SettingsCardClassNames
+        cards?: string
+    }
+    localization?: Partial<AuthLocalization>
+}) {
+    const {
+        additionalFields,
+        avatar,
+        changeEmail,
+        credentials,
+        hooks: { useSession },
+        multiSession,
+        account: accountOptions
+    } = useContext(AuthUIContext)
+
+    const { data: sessionData } = useSession()
+
+    return (
+        <div
+            className={cn(
+                "flex w-full flex-col gap-4 md:gap-6",
+                className,
+                classNames?.cards
+            )}
+        >
+            {accountOptions?.fields?.includes("image") && avatar && (
+                <UpdateAvatarCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                />
+            )}
+
+            {credentials?.username && (
+                <UpdateUsernameCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                />
+            )}
+
+            {accountOptions?.fields?.includes("name") && (
+                <UpdateNameCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                />
+            )}
+
+            {changeEmail && (
+                <ChangeEmailCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                />
+            )}
+
+            {accountOptions?.fields?.map((field) => {
+                if (field === "image") return null
+                if (field === "name") return null
+                const additionalField = additionalFields?.[field]
+                if (!additionalField) return null
+
+                const {
+                    label,
+                    description,
+                    instructions,
+                    placeholder,
+                    required,
+                    type,
+                    multiline,
+                    validate
+                } = additionalField
+
+                // @ts-expect-error Custom fields are not typed
+                const defaultValue = sessionData?.user[field] as unknown
+
+                return (
+                    <UpdateFieldCard
+                        key={field}
+                        classNames={classNames?.card}
+                        value={defaultValue}
+                        description={description}
+                        name={field}
+                        instructions={instructions}
+                        label={label}
+                        localization={localization}
+                        placeholder={placeholder}
+                        required={required}
+                        type={type}
+                        multiline={multiline}
+                        validate={validate}
+                    />
+                )
+            })}
+
+            {multiSession && (
+                <AccountsCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                />
+            )}
+        </div>
+    )
+}

package/src/components/settings/api-key/api-key-cell.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { KeyRoundIcon } from "lucide-react"
+import { useContext, useState } from "react"
+
+import { useLang } from "../../../hooks/use-lang"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn } 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 type { SettingsCardClassNames } from "../shared/settings-card"
+import { ApiKeyDeleteDialog } from "./api-key-delete-dialog"
+
+export interface ApiKeyCellProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    apiKey: ApiKey
+    localization?: Partial<AuthLocalization>
+    refetch?: Refetch
+}
+
+export function ApiKeyCell({
+    className,
+    classNames,
+    apiKey,
+    localization,
+    refetch
+}: ApiKeyCellProps) {
+    const { localization: contextLocalization } = useContext(AuthUIContext)
+    localization = { ...contextLocalization, ...localization }
+
+    const { lang } = useLang()
+
+    const [showDeleteDialog, setShowDeleteDialog] = useState(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 (
+        <>
+            <Card
+                className={cn(
+                    "flex-row items-center gap-3 truncate px-4 py-3",
+                    className,
+                    classNames?.cell
+                )}
+            >
+                <KeyRoundIcon
+                    className={cn("size-4 flex-shrink-0", classNames?.icon)}
+                />
+
+                <div className="flex flex-col truncate">
+                    <div className="flex items-center gap-2">
+                        <span className="truncate font-semibold text-sm">
+                            {apiKey.name}
+                        </span>
+
+                        <span className="flex-1 truncate text-muted-foreground text-sm">
+                            {apiKey.start}
+                            {"******"}
+                        </span>
+                    </div>
+
+                    <div className="truncate text-muted-foreground text-xs">
+                        {formatExpiration()}
+                    </div>
+                </div>
+
+                <Button
+                    className={cn(
+                        "relative ms-auto",
+                        classNames?.button,
+                        classNames?.outlineButton
+                    )}
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setShowDeleteDialog(true)}
+                >
+                    {localization.DELETE}
+                </Button>
+            </Card>
+
+            <ApiKeyDeleteDialog
+                classNames={classNames}
+                apiKey={apiKey}
+                localization={localization}
+                open={showDeleteDialog}
+                onOpenChange={setShowDeleteDialog}
+                refetch={refetch}
+            />
+        </>
+    )
+}