From 320a7dc342ffb4df29269dc58512c7ccdf9657e5 Mon Sep 17 00:00:00 2001 From: "web@ppanel" Date: Sun, 23 Feb 2025 12:55:21 +0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(auth):=20Refactor=20forms=20?= =?UTF-8?q?to=20use=20Turnstile=20ref=20for=20reset=20functionality?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/user/app/auth/email/login-form.tsx | 14 ++++++--- apps/user/app/auth/email/register-form.tsx | 14 ++++++--- apps/user/app/auth/email/reset-form.tsx | 14 ++++++--- apps/user/app/auth/phone/login-form.tsx | 14 ++++++--- apps/user/app/auth/phone/register-form.tsx | 14 ++++++--- apps/user/app/auth/phone/reset-form.tsx | 14 ++++++--- apps/user/app/auth/turnstile.tsx | 35 +++++++++++++++------- 7 files changed, 84 insertions(+), 35 deletions(-) diff --git a/apps/user/app/auth/email/login-form.tsx b/apps/user/app/auth/email/login-form.tsx index fd510df..f4f9e8c 100644 --- a/apps/user/app/auth/email/login-form.tsx +++ b/apps/user/app/auth/email/login-form.tsx @@ -5,10 +5,10 @@ import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ import { Input } from '@workspace/ui/components/input'; import { Icon } from '@workspace/ui/custom-components/icon'; import { useTranslations } from 'next-intl'; -import { Dispatch, SetStateAction } from 'react'; +import { Dispatch, SetStateAction, useRef } from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; -import CloudFlareTurnstile from '../turnstile'; +import CloudFlareTurnstile, { TurnstileRef } from '../turnstile'; export default function LoginForm({ loading, @@ -38,10 +38,16 @@ export default function LoginForm({ defaultValues: initialValues, }); + const turnstile = useRef(null); + const handleSubmit = form.handleSubmit((data) => { + onSubmit(data); + turnstile.current?.reset(); + }); + return ( <>
- + ( - + diff --git a/apps/user/app/auth/email/register-form.tsx b/apps/user/app/auth/email/register-form.tsx index a6d04bc..6247caa 100644 --- a/apps/user/app/auth/email/register-form.tsx +++ b/apps/user/app/auth/email/register-form.tsx @@ -6,11 +6,11 @@ import { Input } from '@workspace/ui/components/input'; import { Icon } from '@workspace/ui/custom-components/icon'; import { Markdown } from '@workspace/ui/custom-components/markdown'; import { useTranslations } from 'next-intl'; -import { Dispatch, SetStateAction } from 'react'; +import { Dispatch, SetStateAction, useRef } from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import SendCode from '../send-code'; -import CloudFlareTurnstile from '../turnstile'; +import CloudFlareTurnstile, { TurnstileRef } from '../turnstile'; export default function RegisterForm({ loading, @@ -76,13 +76,19 @@ export default function RegisterForm({ }, }); + const turnstile = useRef(null); + const handleSubmit = form.handleSubmit((data) => { + onSubmit(data); + turnstile.current?.reset(); + }); + return ( <> {auth.register.stop_register ? ( {t('message')} ) : ( - + ( - + diff --git a/apps/user/app/auth/email/reset-form.tsx b/apps/user/app/auth/email/reset-form.tsx index 8a41f7e..825f405 100644 --- a/apps/user/app/auth/email/reset-form.tsx +++ b/apps/user/app/auth/email/reset-form.tsx @@ -5,11 +5,11 @@ import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ import { Input } from '@workspace/ui/components/input'; import { Icon } from '@workspace/ui/custom-components/icon'; import { useTranslations } from 'next-intl'; -import { Dispatch, SetStateAction } from 'react'; +import { Dispatch, SetStateAction, useRef } from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import SendCode from '../send-code'; -import CloudFlareTurnstile from '../turnstile'; +import CloudFlareTurnstile, { TurnstileRef } from '../turnstile'; export default function ResetForm({ loading, @@ -43,10 +43,16 @@ export default function ResetForm({ defaultValues: initialValues, }); + const turnstile = useRef(null); + const handleSubmit = form.handleSubmit((data) => { + onSubmit(data); + turnstile.current?.reset(); + }); + return ( <> - + ( - + diff --git a/apps/user/app/auth/phone/login-form.tsx b/apps/user/app/auth/phone/login-form.tsx index 4af3dee..25665a7 100644 --- a/apps/user/app/auth/phone/login-form.tsx +++ b/apps/user/app/auth/phone/login-form.tsx @@ -7,11 +7,11 @@ import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select import { Icon } from '@workspace/ui/custom-components/icon'; import { useTranslations } from 'next-intl'; -import { Dispatch, SetStateAction, useState } from 'react'; +import { Dispatch, SetStateAction, useRef, useState } from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import SendCode from '../send-code'; -import CloudFlareTurnstile from '../turnstile'; +import CloudFlareTurnstile, { TurnstileRef } from '../turnstile'; export default function LoginForm({ loading, @@ -45,10 +45,16 @@ export default function LoginForm({ const [mode, setMode] = useState<'password' | 'code'>('password'); + const turnstile = useRef(null); + const handleSubmit = form.handleSubmit((data) => { + onSubmit(data); + turnstile.current?.reset(); + }); + return ( <> - + ( - + diff --git a/apps/user/app/auth/phone/register-form.tsx b/apps/user/app/auth/phone/register-form.tsx index ded1617..2852a95 100644 --- a/apps/user/app/auth/phone/register-form.tsx +++ b/apps/user/app/auth/phone/register-form.tsx @@ -7,11 +7,11 @@ import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select import { Icon } from '@workspace/ui/custom-components/icon'; import { Markdown } from '@workspace/ui/custom-components/markdown'; import { useTranslations } from 'next-intl'; -import { Dispatch, SetStateAction } from 'react'; +import { Dispatch, SetStateAction, useRef } from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import SendCode from '../send-code'; -import CloudFlareTurnstile from '../turnstile'; +import CloudFlareTurnstile, { TurnstileRef } from '../turnstile'; export default function RegisterForm({ loading, @@ -63,13 +63,19 @@ export default function RegisterForm({ }, }); + const turnstile = useRef(null); + const handleSubmit = form.handleSubmit((data) => { + onSubmit(data); + turnstile.current?.reset(); + }); + return ( <> {auth.register.stop_register ? ( {t('message')} ) : ( - + ( - + diff --git a/apps/user/app/auth/phone/reset-form.tsx b/apps/user/app/auth/phone/reset-form.tsx index 1b163e3..863e118 100644 --- a/apps/user/app/auth/phone/reset-form.tsx +++ b/apps/user/app/auth/phone/reset-form.tsx @@ -6,11 +6,11 @@ import { Input } from '@workspace/ui/components/input'; import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select'; import { Icon } from '@workspace/ui/custom-components/icon'; import { useTranslations } from 'next-intl'; -import { Dispatch, SetStateAction, useState } from 'react'; +import { Dispatch, SetStateAction, useRef, useState } from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import SendCode from '../send-code'; -import CloudFlareTurnstile from '../turnstile'; +import CloudFlareTurnstile, { TurnstileRef } from '../turnstile'; export default function ResetForm({ loading, @@ -46,10 +46,16 @@ export default function ResetForm({ defaultValues: initialValues, }); + const turnstile = useRef(null); + const handleSubmit = form.handleSubmit((data) => { + onSubmit(data); + turnstile.current?.reset(); + }); + return ( <> - + ( - + diff --git a/apps/user/app/auth/turnstile.tsx b/apps/user/app/auth/turnstile.tsx index eea4a18..7746197 100644 --- a/apps/user/app/auth/turnstile.tsx +++ b/apps/user/app/auth/turnstile.tsx @@ -2,26 +2,37 @@ import { useLocale } from 'next-intl'; import { useTheme } from 'next-themes'; -import { useEffect } from 'react'; +import { forwardRef, useEffect, useImperativeHandle } from 'react'; import Turnstile, { useTurnstile } from 'react-turnstile'; import useGlobalStore from '@/config/use-global'; -export default function CloudFlareTurnstile({ - id, - value, - onChange, -}: { - id?: string; - value?: null | string; - onChange: (value?: string) => void; -}) { +export type TurnstileRef = { + reset: () => void; +}; + +const CloudFlareTurnstile = forwardRef< + TurnstileRef, + { + id?: string; + value?: null | string; + onChange: (value?: string) => void; + } +>(function CloudFlareTurnstile({ id, value, onChange }, ref) { const { common } = useGlobalStore(); const { verify } = common; const { resolvedTheme } = useTheme(); const locale = useLocale(); const turnstile = useTurnstile(); + useImperativeHandle( + ref, + () => ({ + reset: () => turnstile.reset(), + }), + [turnstile], + ); + useEffect(() => { if (value === '') { turnstile.reset(); @@ -52,4 +63,6 @@ export default function CloudFlareTurnstile({ /> ) ); -} +}); + +export default CloudFlareTurnstile;