better-auth-ui 3.2.5

package/src/components/settings/shared/session-freshness-dialog.tsx

@@ -0,0 +1,97 @@
+import { type ComponentProps, useContext } 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 "./settings-card"
+
+export interface SessionFreshnessDialogProps
+    extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+    title?: string
+    description?: string
+}
+
+export function SessionFreshnessDialog({
+    classNames,
+    localization,
+    title,
+    description,
+    onOpenChange,
+    ...props
+}: SessionFreshnessDialogProps) {
+    const {
+        basePath,
+        localization: contextLocalization,
+        viewPaths,
+        navigate
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const handleSignOut = () => {
+        navigate(`${basePath}/${viewPaths.SIGN_OUT}`)
+        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)}
+                    >
+                        {title ||
+                            localization?.SESSION_EXPIRED ||
+                            "Session Expired"}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {description || localization?.SESSION_NOT_FRESH}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <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?.primaryButton
+                        )}
+                        variant="default"
+                        onClick={handleSignOut}
+                    >
+                        {localization?.SIGN_OUT}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/components/settings/shared/settings-action-button.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { Loader2 } from "lucide-react"
+import type { ComponentProps, ReactNode } from "react"
+import { useFormState } from "react-hook-form"
+
+import { cn } from "../../../lib/utils"
+import { Button } from "../../ui/button"
+import type { SettingsCardClassNames } from "./settings-card"
+
+interface SettingsActionButtonProps extends ComponentProps<typeof Button> {
+    classNames?: SettingsCardClassNames
+    actionLabel: ReactNode
+    disabled?: boolean
+    isSubmitting?: boolean
+}
+
+export function SettingsActionButton({
+    classNames,
+    actionLabel,
+    disabled,
+    isSubmitting,
+    variant,
+    onClick,
+    ...props
+}: SettingsActionButtonProps) {
+    if (!onClick) {
+        const formState = useFormState()
+        isSubmitting = formState.isSubmitting
+    }
+
+    return (
+        <Button
+            className={cn(
+                "md:ms-auto",
+                classNames?.button,
+                variant === "default" && classNames?.primaryButton,
+                variant === "destructive" && classNames?.destructiveButton
+            )}
+            disabled={isSubmitting || disabled}
+            size="sm"
+            type={onClick ? "button" : "submit"}
+            variant={variant}
+            onClick={onClick}
+            {...props}
+        >
+            {isSubmitting && <Loader2 className="animate-spin" />}
+            {actionLabel}
+        </Button>
+    )
+}

package/src/components/settings/shared/settings-card-footer.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { cn } from "../../../lib/utils"
+import { CardDescription, CardFooter } from "../../ui/card"
+import { Skeleton } from "../../ui/skeleton"
+import { SettingsActionButton } from "./settings-action-button"
+import type { SettingsCardClassNames } from "./settings-card"
+
+export interface SettingsCardFooterProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    actionLabel?: ReactNode
+    disabled?: boolean
+    instructions?: ReactNode
+    isPending?: boolean
+    isSubmitting?: boolean
+    optimistic?: boolean
+    variant?: "default" | "destructive"
+    action?: () => Promise<unknown> | unknown
+}
+
+export function SettingsCardFooter({
+    className,
+    classNames,
+    actionLabel,
+    disabled,
+    instructions,
+    isPending,
+    isSubmitting,
+    variant,
+    action
+}: SettingsCardFooterProps) {
+    return (
+        <CardFooter
+            className={cn(
+                "flex flex-col justify-between gap-4 rounded-b-xl md:flex-row",
+                (actionLabel || instructions) && "!py-4 border-t",
+                variant === "destructive"
+                    ? "border-destructive/30 bg-destructive/15"
+                    : "bg-sidebar",
+                className,
+                classNames?.footer
+            )}
+        >
+            {isPending ? (
+                <>
+                    {instructions && (
+                        <Skeleton
+                            className={cn(
+                                "my-0.5 h-3 w-48 max-w-full md:h-4 md:w-56",
+                                classNames?.skeleton
+                            )}
+                        />
+                    )}
+
+                    {actionLabel && (
+                        <Skeleton
+                            className={cn(
+                                "h-8 w-14 md:ms-auto",
+                                classNames?.skeleton
+                            )}
+                        />
+                    )}
+                </>
+            ) : (
+                <>
+                    {instructions && (
+                        <CardDescription
+                            className={cn(
+                                "text-center text-muted-foreground text-xs md:text-start md:text-sm",
+                                classNames?.instructions
+                            )}
+                        >
+                            {instructions}
+                        </CardDescription>
+                    )}
+
+                    {actionLabel && (
+                        <SettingsActionButton
+                            classNames={classNames}
+                            actionLabel={actionLabel}
+                            disabled={disabled}
+                            isSubmitting={isSubmitting}
+                            variant={variant}
+                            onClick={action}
+                        />
+                    )}
+                </>
+            )}
+        </CardFooter>
+    )
+}

package/src/components/settings/shared/settings-card-header.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { cn } from "../../../lib/utils"
+import { CardDescription, CardHeader, CardTitle } from "../../ui/card"
+import { Skeleton } from "../../ui/skeleton"
+import type { SettingsCardClassNames } from "./settings-card"
+
+export interface SettingsCardHeaderProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    description?: ReactNode
+    isPending?: boolean
+    title: ReactNode
+}
+
+export function SettingsCardHeader({
+    className,
+    classNames,
+    description,
+    isPending,
+    title
+}: SettingsCardHeaderProps) {
+    return (
+        <CardHeader className={cn(classNames?.header, className)}>
+            {isPending ? (
+                <>
+                    <Skeleton
+                        className={cn(
+                            "my-0.5 h-5 w-1/3 md:h-5.5",
+                            classNames?.skeleton
+                        )}
+                    />
+
+                    {description && (
+                        <Skeleton
+                            className={cn(
+                                "mt-1.5 mb-0.5 h-3 w-2/3 md:h-3.5",
+                                classNames?.skeleton
+                            )}
+                        />
+                    )}
+                </>
+            ) : (
+                <>
+                    <CardTitle
+                        className={cn("text-lg md:text-xl", classNames?.title)}
+                    >
+                        {title}
+                    </CardTitle>
+
+                    {description && (
+                        <CardDescription
+                            className={cn(
+                                "text-xs md:text-sm",
+                                classNames?.description
+                            )}
+                        >
+                            {description}
+                        </CardDescription>
+                    )}
+                </>
+            )}
+        </CardHeader>
+    )
+}

package/src/components/settings/shared/settings-card.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import type { ComponentProps, ReactNode } from "react"
+
+import { cn } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import { Card } from "../../ui/card"
+import type { UserAvatarClassNames } from "../../user-avatar"
+import { SettingsCardFooter } from "./settings-card-footer"
+import { SettingsCardHeader } from "./settings-card-header"
+
+export type SettingsCardClassNames = {
+    base?: string
+    avatar?: UserAvatarClassNames
+    button?: string
+    cell?: string
+    checkbox?: string
+    destructiveButton?: string
+    content?: string
+    description?: string
+    dialog?: {
+        content?: string
+        footer?: string
+        header?: string
+    }
+    error?: string
+    footer?: string
+    header?: string
+    icon?: string
+    input?: string
+    instructions?: string
+    label?: string
+    primaryButton?: string
+    secondaryButton?: string
+    outlineButton?: string
+    skeleton?: string
+    title?: string
+}
+
+export interface SettingsCardProps
+    extends Omit<ComponentProps<typeof Card>, "title"> {
+    children?: ReactNode
+    className?: string
+    classNames?: SettingsCardClassNames
+    title?: ReactNode
+    description?: ReactNode
+    instructions?: ReactNode
+    actionLabel?: ReactNode
+    isSubmitting?: boolean
+    disabled?: boolean
+    isPending?: boolean
+    optimistic?: boolean
+    variant?: "default" | "destructive"
+    localization?: AuthLocalization
+    action?: () => Promise<unknown> | unknown
+}
+
+export function SettingsCard({
+    children,
+    className,
+    classNames,
+    title,
+    description,
+    instructions,
+    actionLabel,
+    disabled,
+    isPending,
+    isSubmitting,
+    optimistic,
+    variant,
+    action,
+    ...props
+}: SettingsCardProps) {
+    return (
+        <Card
+            className={cn(
+                "w-full pb-0 text-start",
+                variant === "destructive" && "border-destructive/40",
+                className,
+                classNames?.base
+            )}
+            {...props}
+        >
+            <SettingsCardHeader
+                classNames={classNames}
+                description={description}
+                isPending={isPending}
+                title={title}
+            />
+
+            {children}
+
+            <SettingsCardFooter
+                classNames={classNames}
+                actionLabel={actionLabel}
+                disabled={disabled}
+                isPending={isPending}
+                isSubmitting={isSubmitting}
+                instructions={instructions}
+                optimistic={optimistic}
+                variant={variant}
+                action={action}
+            />
+        </Card>
+    )
+}

package/src/components/settings/skeletons/input-field-skeleton.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { cn } from "../../../lib/utils"
+import { Skeleton } from "../../ui/skeleton"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+
+export function InputFieldSkeleton({
+    classNames
+}: {
+    classNames?: SettingsCardClassNames
+}) {
+    return (
+        <div className="flex flex-col gap-1.5">
+            <Skeleton className={cn("h-4 w-32", classNames?.skeleton)} />
+            <Skeleton className={cn("h-9 w-full", classNames?.skeleton)} />
+        </div>
+    )
+}

package/src/components/settings/skeletons/settings-cell-skeleton.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { cn } from "../../../lib/utils"
+import { Card } from "../../ui/card"
+import { Skeleton } from "../../ui/skeleton"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+
+export function SettingsCellSkeleton({
+    classNames
+}: {
+    classNames?: SettingsCardClassNames
+}) {
+    return (
+        <Card
+            className={cn(
+                "flex-row items-center gap-3 px-4 py-3",
+                classNames?.cell
+            )}
+        >
+            <div className="flex items-center gap-2">
+                <Skeleton
+                    className={cn("size-5 rounded-full", classNames?.skeleton)}
+                />
+
+                <div>
+                    <Skeleton
+                        className={cn("h-4 w-24", classNames?.skeleton)}
+                    />
+                </div>
+            </div>
+
+            <Skeleton
+                className={cn("ms-auto size-8 w-12", classNames?.skeleton)}
+            />
+        </Card>
+    )
+}

package/src/components/settings/two-factor/backup-codes-dialog.tsx

@@ -0,0 +1,113 @@
+"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 { Button } from "../../ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from "../../ui/dialog"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+
+interface BackupCodesDialogProps extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    backupCodes: string[]
+}
+
+export function BackupCodesDialog({
+    classNames,
+    backupCodes,
+    onOpenChange,
+    ...props
+}: BackupCodesDialogProps) {
+    const { localization } = useContext(AuthUIContext)
+    const [copied, setCopied] = useState(false)
+
+    const handleCopy = () => {
+        const codeText = backupCodes.join("\n")
+        navigator.clipboard.writeText(codeText)
+        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.BACKUP_CODES}
+                    </DialogTitle>
+
+                    <DialogDescription
+                        className={cn(
+                            "text-xs md:text-sm",
+                            classNames?.description
+                        )}
+                    >
+                        {localization.BACKUP_CODES_DESCRIPTION}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="grid grid-cols-2 gap-2">
+                    {backupCodes.map((code, index) => (
+                        <div
+                            key={index}
+                            className="rounded-md bg-muted p-2 text-center font-mono text-sm"
+                        >
+                            {code}
+                        </div>
+                    ))}
+                </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_ALL_CODES}
+                            </>
+                        )}
+                    </Button>
+
+                    <Button
+                        type="button"
+                        variant="default"
+                        onClick={() => onOpenChange?.(false)}
+                        className={cn(
+                            classNames?.button,
+                            classNames?.primaryButton
+                        )}
+                    >
+                        {localization.CONTINUE}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/components/settings/two-factor/two-factor-card.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { useContext, useState } from "react"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import type { User } from "../../../types/auth-client"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+import { SettingsCard } from "../shared/settings-card"
+import { TwoFactorPasswordDialog } from "./two-factor-password-dialog"
+
+export interface TwoFactorCardProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    localization?: AuthLocalization
+}
+
+export function TwoFactorCard({
+    className,
+    classNames,
+    localization
+}: TwoFactorCardProps) {
+    const {
+        localization: contextLocalization,
+        hooks: { useSession }
+    } = useContext(AuthUIContext)
+
+    const [showPasswordDialog, setShowPasswordDialog] = useState(false)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { data: sessionData, isPending } = useSession()
+    const isTwoFactorEnabled = (sessionData?.user as User)?.twoFactorEnabled
+
+    return (
+        <div>
+            <SettingsCard
+                className={className}
+                classNames={classNames}
+                actionLabel={
+                    isTwoFactorEnabled
+                        ? localization.DISABLE_TWO_FACTOR
+                        : localization.ENABLE_TWO_FACTOR
+                }
+                description={localization.TWO_FACTOR_CARD_DESCRIPTION}
+                instructions={
+                    isTwoFactorEnabled
+                        ? localization.TWO_FACTOR_DISABLE_INSTRUCTIONS
+                        : localization.TWO_FACTOR_ENABLE_INSTRUCTIONS
+                }
+                isPending={isPending}
+                title={localization.TWO_FACTOR}
+                action={() => setShowPasswordDialog(true)}
+            />
+
+            <TwoFactorPasswordDialog
+                classNames={classNames}
+                open={showPasswordDialog}
+                onOpenChange={setShowPasswordDialog}
+                isTwoFactorEnabled={!!isTwoFactorEnabled}
+            />
+        </div>
+    )
+}