better-auth-ui 3.2.5

package/src/components/settings/two-factor/two-factor-password-dialog.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader2 } from "lucide-react"
+import { type ComponentProps, useContext, useState } 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 { PasswordInput } from "../../password-input"
+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 type { SettingsCardClassNames } from "../shared/settings-card"
+import { BackupCodesDialog } from "./backup-codes-dialog"
+
+interface TwoFactorPasswordDialogProps extends ComponentProps<typeof Dialog> {
+    classNames?: SettingsCardClassNames
+    isTwoFactorEnabled: boolean
+}
+
+export function TwoFactorPasswordDialog({
+    classNames,
+    onOpenChange,
+    isTwoFactorEnabled,
+    ...props
+}: TwoFactorPasswordDialogProps) {
+    const {
+        localization,
+        authClient,
+        basePath,
+        viewPaths,
+        navigate,
+        toast,
+        twoFactor
+    } = useContext(AuthUIContext)
+    const [showBackupCodesDialog, setShowBackupCodesDialog] = useState(false)
+    const [backupCodes, setBackupCodes] = useState<string[]>([])
+    const [totpURI, setTotpURI] = useState<string | null>(null)
+
+    const formSchema = z.object({
+        password: z.string().min(1, { message: localization.PASSWORD_REQUIRED })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            password: ""
+        }
+    })
+
+    const { isSubmitting } = form.formState
+
+    async function enableTwoFactor({ password }: z.infer<typeof formSchema>) {
+        try {
+            const response = await authClient.twoFactor.enable({
+                password,
+                fetchOptions: { throw: true }
+            })
+
+            onOpenChange?.(false)
+            setBackupCodes(response.backupCodes)
+
+            if (twoFactor?.includes("totp")) {
+                setTotpURI(response.totpURI)
+            }
+
+            setTimeout(() => {
+                setShowBackupCodesDialog(true)
+            }, 250)
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+    }
+
+    async function disableTwoFactor({ password }: z.infer<typeof formSchema>) {
+        try {
+            await authClient.twoFactor.disable({
+                password,
+                fetchOptions: { throw: true }
+            })
+
+            toast({
+                variant: "success",
+                message: localization.TWO_FACTOR_DISABLED
+            })
+
+            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)}
+                >
+                    <DialogHeader className={classNames?.dialog?.header}>
+                        <DialogTitle className={classNames?.title}>
+                            {localization.TWO_FACTOR}
+                        </DialogTitle>
+
+                        <DialogDescription className={classNames?.description}>
+                            {isTwoFactorEnabled
+                                ? localization.TWO_FACTOR_DISABLE_INSTRUCTIONS
+                                : localization.TWO_FACTOR_ENABLE_INSTRUCTIONS}
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <Form {...form}>
+                        <form
+                            onSubmit={form.handleSubmit(
+                                isTwoFactorEnabled
+                                    ? disableTwoFactor
+                                    : enableTwoFactor
+                            )}
+                            className="grid gap-4"
+                        >
+                            <FormField
+                                control={form.control}
+                                name="password"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel
+                                            className={classNames?.label}
+                                        >
+                                            {localization.PASSWORD}
+                                        </FormLabel>
+
+                                        <FormControl>
+                                            <PasswordInput
+                                                className={classNames?.input}
+                                                placeholder={
+                                                    localization.PASSWORD_PLACEHOLDER
+                                                }
+                                                autoComplete="current-password"
+                                                {...field}
+                                            />
+                                        </FormControl>
+
+                                        <FormMessage
+                                            className={classNames?.error}
+                                        />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <DialogFooter
+                                className={classNames?.dialog?.footer}
+                            >
+                                <Button
+                                    type="button"
+                                    variant="secondary"
+                                    onClick={() => onOpenChange?.(false)}
+                                    className={cn(
+                                        classNames?.button,
+                                        classNames?.secondaryButton
+                                    )}
+                                >
+                                    {localization.CANCEL}
+                                </Button>
+
+                                <Button
+                                    type="submit"
+                                    disabled={isSubmitting}
+                                    className={cn(
+                                        classNames?.button,
+                                        classNames?.primaryButton
+                                    )}
+                                >
+                                    {isSubmitting && (
+                                        <Loader2 className="animate-spin" />
+                                    )}
+                                    {isTwoFactorEnabled
+                                        ? localization.DISABLE_TWO_FACTOR
+                                        : localization.ENABLE_TWO_FACTOR}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+                </DialogContent>
+            </Dialog>
+
+            <BackupCodesDialog
+                classNames={classNames}
+                open={showBackupCodesDialog}
+                onOpenChange={(open) => {
+                    setShowBackupCodesDialog(open)
+
+                    if (!open) {
+                        const url = `${basePath}/${viewPaths.TWO_FACTOR}`
+                        navigate(
+                            twoFactor?.includes("totp") && totpURI
+                                ? `${url}?totpURI=${totpURI}`
+                                : url
+                        )
+                    }
+                }}
+                backupCodes={backupCodes}
+            />
+        </>
+    )
+}

package/src/components/signed-in.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { type ReactNode, useContext } from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+
+/**
+ * Conditionally renders content for authenticated users only
+ *
+ * Renders its children only when a user is authenticated with a valid session.
+ * If no session exists, nothing is rendered. Useful for displaying protected
+ * content or UI elements that should only be visible to signed-in users.
+ */
+export function SignedIn({ children }: { children: ReactNode }) {
+    const {
+        hooks: { useSession }
+    } = useContext(AuthUIContext)
+    const { data } = useSession()
+
+    return data ? children : null
+}

package/src/components/signed-out.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { type ReactNode, useContext } from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+
+/**
+ * Conditionally renders content for unauthenticated users only
+ *
+ * Renders its children only when no user is authenticated and the authentication
+ * state is not pending. If a session exists or is being loaded, nothing is rendered.
+ * Useful for displaying sign-in prompts or content exclusive to guests.
+ */
+export function SignedOut({ children }: { children: ReactNode }) {
+    const {
+        hooks: { useSession }
+    } = useContext(AuthUIContext)
+    const { data, isPending } = useSession()
+
+    return !data && !isPending ? children : null
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "../../lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }