S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix(auth): Refactor forms to use Turnstile ref for reset functionality

Browse Source
This commit is contained in:
web@ppanel 2025-02-23 12:55:21 +07:00
parent 42ba9e88ad
commit 320a7dc342
7 changed files with 84 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/user/app/auth/email/login-form.tsx
View File

@ -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<TurnstileRef>(null);
const handleSubmit = form.handleSubmit((data) => {
onSubmit(data);
turnstile.current?.reset();
});
return (
<>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
<form onSubmit={handleSubmit} className='grid gap-6'>
<FormField
control={form.control}
name='email'
@ -73,7 +79,7 @@ export default function LoginForm({
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='login' {...field} />
<CloudFlareTurnstile id='login' {...field} ref={turnstile} />
</FormControl>
<FormMessage />
</FormItem>

14
apps/user/app/auth/email/register-form.tsx
View File

@ -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<TurnstileRef>(null);
const handleSubmit = form.handleSubmit((data) => {
onSubmit(data);
turnstile.current?.reset();
});
return (
<>
{auth.register.stop_register ? (
<Markdown>{t('message')}</Markdown>
) : (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
<form onSubmit={handleSubmit} className='grid gap-6'>
<FormField
control={form.control}
name='email'
@ -177,7 +183,7 @@ export default function RegisterForm({
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='register' {...field} />
<CloudFlareTurnstile id='register' {...field} ref={turnstile} />
</FormControl>
<FormMessage />
</FormItem>

14
apps/user/app/auth/email/reset-form.tsx
View File

@ -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<TurnstileRef>(null);
const handleSubmit = form.handleSubmit((data) => {
onSubmit(data);
turnstile.current?.reset();
});
return (
<>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
<form onSubmit={handleSubmit} className='grid gap-6'>
<FormField
control={form.control}
name='email'
@ -105,7 +111,7 @@ export default function ResetForm({
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='reset' {...field} />
<CloudFlareTurnstile id='reset' {...field} ref={turnstile} />
</FormControl>
<FormMessage />
</FormItem>

14
apps/user/app/auth/phone/login-form.tsx
View File

@ -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<TurnstileRef>(null);
const handleSubmit = form.handleSubmit((data) => {
onSubmit(data);
turnstile.current?.reset();
});
return (
<>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
<form onSubmit={handleSubmit} className='grid gap-6'>
<FormField
control={form.control}
name='telephone'
@ -138,7 +144,7 @@ export default function LoginForm({
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='login' {...field} />
<CloudFlareTurnstile id='login' {...field} ref={turnstile} />
</FormControl>
<FormMessage />
</FormItem>

14
apps/user/app/auth/phone/register-form.tsx
View File

@ -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<TurnstileRef>(null);
const handleSubmit = form.handleSubmit((data) => {
onSubmit(data);
turnstile.current?.reset();
});
return (
<>
{auth.register.stop_register ? (
<Markdown>{t('message')}</Markdown>
) : (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
<form onSubmit={handleSubmit} className='grid gap-6'>
<FormField
control={form.control}
name='telephone'
@ -193,7 +199,7 @@ export default function RegisterForm({
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='register' {...field} />
<CloudFlareTurnstile id='register' {...field} ref={turnstile} />
</FormControl>
<FormMessage />
</FormItem>

14
apps/user/app/auth/phone/reset-form.tsx
View File

@ -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<TurnstileRef>(null);
const handleSubmit = form.handleSubmit((data) => {
onSubmit(data);
turnstile.current?.reset();
});
return (
<>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className='grid gap-6'>
<form onSubmit={handleSubmit} className='grid gap-6'>
<FormField
control={form.control}
name='telephone'
@ -136,7 +142,7 @@ export default function ResetForm({
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='reset' {...field} />
<CloudFlareTurnstile id='reset' {...field} ref={turnstile} />
</FormControl>
<FormMessage />
</FormItem>

35
apps/user/app/auth/turnstile.tsx
View File

@ -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;