better-auth-ui 3.2.5

package/src/components/settings/providers/provider-cell.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import type { Account } from "better-auth"
+import type { SocialProvider } from "better-auth/social-providers"
+import { Loader2 } from "lucide-react"
+import { useContext, useState } from "react"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import type { Provider } from "../../../lib/social-providers"
+import { cn, getLocalizedError } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import type { Refetch } from "../../../types/refetch"
+import { Button } from "../../ui/button"
+import { Card } from "../../ui/card"
+import { Skeleton } from "../../ui/skeleton"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+
+export interface ProviderCellProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    account?: Account | null
+    isPending?: boolean
+    localization?: Partial<AuthLocalization>
+    other?: boolean
+    provider: Provider
+    refetch?: Refetch
+}
+
+export function ProviderCell({
+    className,
+    classNames,
+    account,
+    localization,
+    other,
+    provider,
+    refetch
+}: ProviderCellProps) {
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        localization: contextLocalization,
+        mutators: { unlinkAccount },
+        viewPaths,
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const [isLoading, setIsLoading] = useState(false)
+
+    const handleLink = async () => {
+        setIsLoading(true)
+        const callbackURL = `${baseURL}${basePath}/${viewPaths.CALLBACK}?redirectTo=${window.location.pathname}`
+
+        try {
+            if (other) {
+                await authClient.oauth2.link({
+                    providerId: provider.provider as SocialProvider,
+                    callbackURL,
+                    fetchOptions: { throw: true }
+                })
+            } else {
+                await authClient.linkSocial({
+                    provider: provider.provider as SocialProvider,
+                    callbackURL,
+                    fetchOptions: { throw: true }
+                })
+            }
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+
+            setIsLoading(false)
+        }
+    }
+
+    const handleUnlink = async () => {
+        setIsLoading(true)
+
+        try {
+            await unlinkAccount({
+                accountId: account?.accountId,
+                providerId: provider.provider
+            })
+
+            await refetch?.()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+
+        setIsLoading(false)
+    }
+
+    return (
+        <Card
+            className={cn(
+                "flex-row items-center gap-3 px-4 py-3",
+                className,
+                classNames?.cell
+            )}
+        >
+            {provider.icon && (
+                <provider.icon className={cn("size-4", classNames?.icon)} />
+            )}
+
+            <div className="flex-col">
+                <div className="text-sm">{provider.name}</div>
+
+                {account && <AccountInfo account={account} />}
+            </div>
+
+            <Button
+                className={cn("relative ms-auto", classNames?.button)}
+                disabled={isLoading}
+                size="sm"
+                type="button"
+                variant={account ? "outline" : "default"}
+                onClick={account ? handleUnlink : handleLink}
+            >
+                {isLoading && <Loader2 className="animate-spin" />}
+                {account ? localization.UNLINK : localization.LINK}
+            </Button>
+        </Card>
+    )
+}
+
+function AccountInfo({ account }: { account: { accountId: string } }) {
+    const {
+        hooks: { useAccountInfo }
+    } = useContext(AuthUIContext)
+
+    const { data: accountInfo, isPending } = useAccountInfo({
+        accountId: account.accountId
+    })
+
+    if (isPending) {
+        return <Skeleton className="my-0.5 h-3 w-28" />
+    }
+
+    if (!accountInfo) return null
+
+    return (
+        <div className="text-muted-foreground text-xs">
+            {accountInfo?.user.email}
+        </div>
+    )
+}

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

@@ -0,0 +1,108 @@
+"use client"
+
+import type { Account } from "better-auth"
+import { useContext } from "react"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { socialProviders } from "../../../lib/social-providers"
+import { cn } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import type { Refetch } from "../../../types/refetch"
+import { CardContent } from "../../ui/card"
+import type { SettingsCardClassNames } from "../shared/settings-card"
+import { SettingsCard } from "../shared/settings-card"
+import { SettingsCellSkeleton } from "../skeletons/settings-cell-skeleton"
+import { ProviderCell } from "./provider-cell"
+
+export interface ProvidersCardProps {
+    className?: string
+    classNames?: SettingsCardClassNames
+    accounts?: Account[] | null
+    isPending?: boolean
+    localization?: Partial<AuthLocalization>
+    skipHook?: boolean
+    refetch?: Refetch
+}
+
+export function ProvidersCard({
+    className,
+    classNames,
+    accounts,
+    isPending,
+    localization,
+    skipHook,
+    refetch
+}: ProvidersCardProps) {
+    const {
+        hooks: { useListAccounts },
+        localization: contextLocalization,
+        social,
+        genericOAuth
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    if (!skipHook) {
+        const result = useListAccounts()
+        accounts = result.data
+        isPending = result.isPending
+        refetch = result.refetch
+    }
+
+    return (
+        <SettingsCard
+            className={className}
+            classNames={classNames}
+            title={localization.PROVIDERS}
+            description={localization.PROVIDERS_DESCRIPTION}
+            isPending={isPending}
+        >
+            <CardContent className={cn("grid gap-4", classNames?.content)}>
+                {isPending ? (
+                    social?.providers?.map((provider) => (
+                        <SettingsCellSkeleton
+                            key={provider}
+                            classNames={classNames}
+                        />
+                    ))
+                ) : (
+                    <>
+                        {social?.providers?.map((provider) => {
+                            const socialProvider = socialProviders.find(
+                                (socialProvider) =>
+                                    socialProvider.provider === provider
+                            )
+
+                            if (!socialProvider) return null
+
+                            return (
+                                <ProviderCell
+                                    key={provider}
+                                    classNames={classNames}
+                                    account={accounts?.find(
+                                        (acc) => acc.providerId === provider
+                                    )}
+                                    provider={socialProvider}
+                                    refetch={refetch}
+                                />
+                            )
+                        })}
+
+                        {genericOAuth?.providers?.map((provider) => (
+                            <ProviderCell
+                                key={provider.provider}
+                                classNames={classNames}
+                                account={accounts?.find(
+                                    (acc) =>
+                                        acc.providerId === provider.provider
+                                )}
+                                provider={provider}
+                                refetch={refetch}
+                                other
+                            />
+                        ))}
+                    </>
+                )}
+            </CardContent>
+        </SettingsCard>
+    )
+}

package/src/components/settings/security/change-email-card.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { 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 { CardContent } from "../../ui/card"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormMessage
+} from "../../ui/form"
+import { Input } from "../../ui/input"
+import { Skeleton } from "../../ui/skeleton"
+import type { SettingsCardProps } from "../shared/settings-card"
+import { SettingsCard } from "../shared/settings-card"
+
+export function ChangeEmailCard({
+    className,
+    classNames,
+    localization,
+    ...props
+}: SettingsCardProps) {
+    const {
+        authClient,
+        emailVerification,
+        hooks: { useSession },
+        localization: contextLocalization,
+        toast
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { data: sessionData, isPending, refetch } = useSession()
+    const [resendDisabled, setResendDisabled] = useState(false)
+
+    const formSchema = z.object({
+        email: z.string().email({ message: localization.INVALID_EMAIL })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        values: {
+            email: sessionData?.user.email || ""
+        }
+    })
+
+    const resendForm = useForm()
+
+    const { isSubmitting } = form.formState
+
+    const changeEmail = async ({ email }: z.infer<typeof formSchema>) => {
+        if (email === sessionData?.user.email) {
+            await new Promise((resolve) => setTimeout(resolve))
+            toast({
+                variant: "error",
+                message: localization.EMAIL_IS_THE_SAME
+            })
+            return
+        }
+
+        try {
+            await authClient.changeEmail({
+                newEmail: email,
+                callbackURL: window.location.pathname,
+                fetchOptions: { throw: true }
+            })
+
+            if (sessionData?.user.emailVerified) {
+                toast({
+                    variant: "success",
+                    message: localization.EMAIL_VERIFY_CHANGE!
+                })
+            } else {
+                await refetch?.()
+                toast({
+                    variant: "success",
+                    message: `${localization.EMAIL} ${localization.UPDATED_SUCCESSFULLY}`
+                })
+            }
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+        }
+    }
+
+    const resendVerification = async () => {
+        if (!sessionData) return
+        const email = sessionData.user.email
+
+        setResendDisabled(true)
+
+        try {
+            await authClient.sendVerificationEmail({
+                email,
+                fetchOptions: { throw: true }
+            })
+
+            toast({
+                variant: "success",
+                message: localization.EMAIL_VERIFICATION!
+            })
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+            setResendDisabled(false)
+            throw error
+        }
+    }
+
+    return (
+        <>
+            <Form {...form}>
+                <form noValidate onSubmit={form.handleSubmit(changeEmail)}>
+                    <SettingsCard
+                        className={className}
+                        classNames={classNames}
+                        description={localization.EMAIL_DESCRIPTION}
+                        instructions={localization.EMAIL_INSTRUCTIONS}
+                        isPending={isPending}
+                        title={localization.EMAIL}
+                        actionLabel={localization.SAVE}
+                        {...props}
+                    >
+                        <CardContent className={classNames?.content}>
+                            {isPending ? (
+                                <Skeleton
+                                    className={cn(
+                                        "h-9 w-full",
+                                        classNames?.skeleton
+                                    )}
+                                />
+                            ) : (
+                                <FormField
+                                    control={form.control}
+                                    name="email"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormControl>
+                                                <Input
+                                                    className={
+                                                        classNames?.input
+                                                    }
+                                                    placeholder={
+                                                        localization.EMAIL_PLACEHOLDER
+                                                    }
+                                                    type="email"
+                                                    disabled={isSubmitting}
+                                                    {...field}
+                                                />
+                                            </FormControl>
+
+                                            <FormMessage
+                                                className={classNames?.error}
+                                            />
+                                        </FormItem>
+                                    )}
+                                />
+                            )}
+                        </CardContent>
+                    </SettingsCard>
+                </form>
+            </Form>
+
+            {emailVerification &&
+                sessionData?.user &&
+                !sessionData?.user.emailVerified && (
+                    <Form {...resendForm}>
+                        <form
+                            onSubmit={resendForm.handleSubmit(
+                                resendVerification
+                            )}
+                        >
+                            <SettingsCard
+                                className={className}
+                                classNames={classNames}
+                                title={localization.VERIFY_YOUR_EMAIL}
+                                description={
+                                    localization.VERIFY_YOUR_EMAIL_DESCRIPTION
+                                }
+                                actionLabel={
+                                    localization.RESEND_VERIFICATION_EMAIL
+                                }
+                                disabled={resendDisabled}
+                                {...props}
+                            />
+                        </form>
+                    </Form>
+                )}
+        </>
+    )
+}