@erikey/react 0.4.26 → 0.4.28

package/src/ui/components/auth/forms/forgot-password-form.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { BetterFetchOption } from "better-auth/react"
+import { Loader2 } from "lucide-react"
+import { useContext, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { useCaptcha } from "../../../hooks/use-captcha"
+import { useIsHydrated } from "../../../hooks/use-hydrated"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import { Captcha } from "../../captcha/captcha"
+import { Button } from "../../ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../../ui/form"
+import { Input } from "../../ui/input"
+import type { AuthFormClassNames } from "../auth-form"
+
+export interface ForgotPasswordFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    setIsSubmitting?: (value: boolean) => void
+}
+
+export function ForgotPasswordForm({
+    className,
+    classNames,
+    isSubmitting,
+    localization,
+    setIsSubmitting
+}: ForgotPasswordFormProps) {
+    const isHydrated = useIsHydrated()
+    const { captchaRef, getCaptchaHeaders, resetCaptcha } = useCaptcha({
+        localization
+    })
+
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        localization: contextLocalization,
+        navigate,
+        toast,
+        viewPaths,
+        localizeErrors
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const formSchema = z.object({
+        email: z
+            .string()
+            .email({
+                message: `${localization.EMAIL} ${localization.IS_INVALID}`
+            })
+            .min(1, {
+                message: `${localization.EMAIL} ${localization.IS_REQUIRED}`
+            })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: ""
+        }
+    })
+
+    isSubmitting = isSubmitting || form.formState.isSubmitting
+
+    useEffect(() => {
+        setIsSubmitting?.(form.formState.isSubmitting)
+    }, [form.formState.isSubmitting, setIsSubmitting])
+
+    async function forgotPassword({ email }: z.infer<typeof formSchema>) {
+        try {
+            const fetchOptions: BetterFetchOption = {
+                throw: true,
+                headers: await getCaptchaHeaders("/forget-password")
+            }
+
+            await authClient.requestPasswordReset({
+                email,
+                redirectTo: `${baseURL}${basePath}/${viewPaths.RESET_PASSWORD}`,
+                fetchOptions
+            })
+
+            toast({
+                variant: "success",
+                message: localization.FORGOT_PASSWORD_EMAIL
+            })
+
+            navigate(
+                `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+            )
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({
+                    error,
+                    localization,
+                    localizeErrors
+                })
+            })
+            resetCaptcha()
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(forgotPassword)}
+                noValidate={isHydrated}
+                className={cn("grid w-full gap-6", className, classNames?.base)}
+            >
+                <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel className={classNames?.label}>
+                                {localization.EMAIL}
+                            </FormLabel>
+
+                            <FormControl>
+                                <Input
+                                    className={classNames?.input}
+                                    type="email"
+                                    placeholder={localization.EMAIL_PLACEHOLDER}
+                                    disabled={isSubmitting}
+                                    {...field}
+                                />
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                <Captcha
+                    ref={captchaRef}
+                    localization={localization}
+                    action="/forget-password"
+                />
+
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                        "w-full",
+                        classNames?.button,
+                        classNames?.primaryButton
+                    )}
+                >
+                    {isSubmitting ? (
+                        <Loader2 className="animate-spin" />
+                    ) : (
+                        localization.FORGOT_PASSWORD_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}

package/src/ui/components/auth/forms/magic-link-form.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { BetterFetchOption } from "better-auth/react"
+import { Loader2 } from "lucide-react"
+import { useCallback, useContext, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { useCaptcha } from "../../../hooks/use-captcha"
+import { useIsHydrated } from "../../../hooks/use-hydrated"
+import { AuthUIContext } from "../../../lib/auth-ui-provider"
+import { cn, getLocalizedError, getSearchParam } from "../../../lib/utils"
+import type { AuthLocalization } from "../../../localization/auth-localization"
+import { Captcha } from "../../captcha/captcha"
+import { Button } from "../../ui/button"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../../ui/form"
+import { Input } from "../../ui/input"
+import type { AuthFormClassNames } from "../auth-form"
+
+export interface MagicLinkFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    callbackURL?: string
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    redirectTo?: string
+    setIsSubmitting?: (value: boolean) => void
+}
+
+export function MagicLinkForm({
+    className,
+    classNames,
+    callbackURL: callbackURLProp,
+    isSubmitting,
+    localization,
+    redirectTo: redirectToProp,
+    setIsSubmitting
+}: MagicLinkFormProps) {
+    const isHydrated = useIsHydrated()
+    const { captchaRef, getCaptchaHeaders, resetCaptcha } = useCaptcha({
+        localization
+    })
+
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        persistClient,
+        localization: contextLocalization,
+        redirectTo: contextRedirectTo,
+        viewPaths,
+        toast,
+        localizeErrors
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const getRedirectTo = useCallback(
+        () =>
+            redirectToProp || getSearchParam("redirectTo") || contextRedirectTo,
+        [redirectToProp, contextRedirectTo]
+    )
+
+    const getCallbackURL = useCallback(
+        () =>
+            `${baseURL}${
+                callbackURLProp ||
+                (persistClient
+                    ? `${basePath}/${viewPaths.CALLBACK}?redirectTo=${encodeURIComponent(getRedirectTo())}`
+                    : getRedirectTo())
+            }`,
+        [
+            callbackURLProp,
+            persistClient,
+            basePath,
+            viewPaths,
+            baseURL,
+            getRedirectTo
+        ]
+    )
+
+    const formSchema = z.object({
+        email: z.string().email({
+            message: `${localization.EMAIL} ${localization.IS_INVALID}`
+        })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: ""
+        }
+    })
+
+    isSubmitting = isSubmitting || form.formState.isSubmitting
+
+    useEffect(() => {
+        setIsSubmitting?.(form.formState.isSubmitting)
+    }, [form.formState.isSubmitting, setIsSubmitting])
+
+    async function sendMagicLink({ email }: z.infer<typeof formSchema>) {
+        try {
+            const fetchOptions: BetterFetchOption = {
+                throw: true,
+                headers: await getCaptchaHeaders("/sign-in/magic-link")
+            }
+
+            await authClient.signIn.magicLink({
+                email,
+                callbackURL: getCallbackURL(),
+                fetchOptions
+            })
+
+            toast({
+                variant: "success",
+                message: localization.MAGIC_LINK_EMAIL
+            })
+
+            form.reset()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({
+                    error,
+                    localization,
+                    localizeErrors
+                })
+            })
+            resetCaptcha()
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(sendMagicLink)}
+                noValidate={isHydrated}
+                className={cn("grid w-full gap-6", className, classNames?.base)}
+            >
+                <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel className={classNames?.label}>
+                                {localization.EMAIL}
+                            </FormLabel>
+
+                            <FormControl>
+                                <Input
+                                    className={classNames?.input}
+                                    type="email"
+                                    placeholder={localization.EMAIL_PLACEHOLDER}
+                                    disabled={isSubmitting}
+                                    {...field}
+                                />
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                <Captcha
+                    ref={captchaRef}
+                    localization={localization}
+                    action="/sign-in/magic-link"
+                />
+
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                        "w-full",
+                        classNames?.button,
+                        classNames?.primaryButton
+                    )}
+                >
+                    {isSubmitting ? (
+                        <Loader2 className="animate-spin" />
+                    ) : (
+                        localization.MAGIC_LINK_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}

package/src/ui/components/auth/forms/recover-account-form.tsx

@@ -0,0 +1,143 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader2 } from "lucide-react"
+import { useContext, useEffect } from "react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { useOnSuccessTransition } from "../../../hooks/use-success-transition"
+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 {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "../../ui/form"
+import { Input } from "../../ui/input"
+import type { AuthFormClassNames } from "../auth-form"
+
+export interface RecoverAccountFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    redirectTo?: string
+    setIsSubmitting?: (value: boolean) => void
+}
+
+export function RecoverAccountForm({
+    className,
+    classNames,
+    isSubmitting,
+    localization,
+    redirectTo,
+    setIsSubmitting
+}: RecoverAccountFormProps) {
+    const {
+        authClient,
+        localization: contextLocalization,
+        toast,
+        localizeErrors
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    const { onSuccess, isPending: transitionPending } = useOnSuccessTransition({
+        redirectTo
+    })
+
+    const formSchema = z.object({
+        code: z.string().min(1, { message: localization.BACKUP_CODE_REQUIRED })
+    })
+
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            code: ""
+        }
+    })
+
+    isSubmitting =
+        isSubmitting || form.formState.isSubmitting || transitionPending
+
+    useEffect(() => {
+        setIsSubmitting?.(form.formState.isSubmitting || transitionPending)
+    }, [form.formState.isSubmitting, transitionPending, setIsSubmitting])
+
+    async function verifyBackupCode({ code }: z.infer<typeof formSchema>) {
+        try {
+            await authClient.twoFactor.verifyBackupCode({
+                code,
+                fetchOptions: { throw: true }
+            })
+
+            await onSuccess()
+        } catch (error) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({
+                    error,
+                    localization,
+                    localizeErrors
+                })
+            })
+
+            form.reset()
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form
+                onSubmit={form.handleSubmit(verifyBackupCode)}
+                className={cn("grid gap-6", className, classNames?.base)}
+            >
+                <FormField
+                    control={form.control}
+                    name="code"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel className={classNames?.label}>
+                                {localization.BACKUP_CODE}
+                            </FormLabel>
+
+                            <FormControl>
+                                <Input
+                                    placeholder={
+                                        localization.BACKUP_CODE_PLACEHOLDER
+                                    }
+                                    autoComplete="off"
+                                    className={classNames?.input}
+                                    disabled={isSubmitting}
+                                    {...field}
+                                />
+                            </FormControl>
+
+                            <FormMessage className={classNames?.error} />
+                        </FormItem>
+                    )}
+                />
+
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                        classNames?.button,
+                        classNames?.primaryButton
+                    )}
+                >
+                    {isSubmitting ? (
+                        <Loader2 className="animate-spin" />
+                    ) : (
+                        localization.RECOVER_ACCOUNT_ACTION
+                    )}
+                </Button>
+            </form>
+        </Form>
+    )
+}