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

🐛 fix(auth): Refactor user authentication forms to remove global store dependency and improve type handling

Browse Source
This commit is contained in:
web@ppanel 2025-01-09 13:19:18 +07:00
parent 6301409531
commit 12026b02cd
4 changed files with 67 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/admin/app/(auth)/user-auth-form.tsx
View File

@ -4,7 +4,6 @@ import {
NEXT_PUBLIC_DEFAULT_USER_EMAIL,
NEXT_PUBLIC_DEFAULT_USER_PASSWORD,
} from '@/config/constants';
import useGlobalStore from '@/config/use-global';
import { checkUser, resetPassword, userLogin, userRegister } from '@/services/common/auth';
import { getRedirectUrl, setAuthorization } from '@/utils/common';
import { useTranslations } from 'next-intl';
@ -18,8 +17,6 @@ import UserResetForm from './user-reset-form';
export default function UserAuthForm() {
const t = useTranslations('auth');
const { common } = useGlobalStore();
const { register } = common;
const router = useRouter();
const [type, setType] = useState<'login' | 'register' | 'reset'>();
const [loading, startTransition] = useTransition();

27
apps/admin/app/(auth)/user-check-form.tsx
View File

@ -8,30 +8,21 @@ import { useEffect, useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
interface UserCheckFormProps {
loading?: boolean;
onSubmit: (data: any) => void;
initialValues: any;
}
export default function UserCheckForm({
loading,
onSubmit,
initialValues,
}: {
loading?: boolean;
onSubmit: (data: any) => void;
initialValues: any;
}) {
}: Readonly<UserCheckFormProps>) {
const t = useTranslations('auth.check');
// const { common } = useGlobalStore();
// const { register } = common;
const formSchema = z.object({
email: z.string().email(t('email')),
// .refine(
// (email) => {
// if (!register.enable_email_domain_suffix) return true;
// const domain = email.split('@')[1] as string;
// return register.email_domain_suffix_list.split('\n').includes(domain);
// },
// {
// message: t('whitelist'),
// },
// ),
});
const form = useForm<z.infer<typeof formSchema>>({
@ -61,7 +52,7 @@ export default function UserCheckForm({
};
useEffect(() => {
if (initialValues && initialValues.email) {
if (initialValues?.email) {
handleEmailChange(initialValues.email);
}
return () => {

21
apps/user/app/auth/user-auth-form.tsx
View File

@ -1,7 +1,6 @@
'use client';
import useGlobalStore from '@/config/use-global';
import { checkUser, resetPassword, userLogin, userRegister } from '@/services/common/auth';
import { resetPassword, userLogin, userRegister } from '@/services/common/auth';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ReactNode, useState, useTransition } from 'react';
@ -19,8 +18,6 @@ import UserResetForm from './user-reset-form';
export default function UserAuthForm() {
const t = useTranslations('auth');
const { common } = useGlobalStore();
const { register } = common;
const router = useRouter();
const [type, setType] = useState<'login' | 'register' | 'reset'>();
const [loading, startTransition] = useTransition();
@ -42,33 +39,31 @@ export default function UserAuthForm() {
startTransition(async () => {
try {
switch (type) {
case 'login':
// eslint-disable-next-line no-case-declarations
case 'login': {
const login = await userLogin(params);
toast.success(t('login.success'));
onLogin(login.data.data?.token);
break;
case 'register':
// eslint-disable-next-line no-case-declarations
}
case 'register': {
const create = await userRegister(params);
toast.success(t('register.success'));
onLogin(create.data.data?.token);
break;
}
case 'reset':
await resetPassword(params);
toast.success(t('reset.success'));
setType('login');
break;
default:
default: {
if (type === 'reset') break;
// eslint-disable-next-line no-case-declarations
const response = await checkUser(params);
setInitialValues({
...initialValues,
...params,
});
setType(response.data.data?.exist ? 'login' : 'register');
break;
}
}
} catch (error) {
/* empty */
@ -116,6 +111,8 @@ export default function UserAuthForm() {
loading={loading}
onSubmit={handleFormSubmit}
initialValues={initialValues}
type={type}
setType={setType}
/>
);
break;

67
apps/user/app/auth/user-check-form.tsx
View File

@ -1,4 +1,5 @@
import useGlobalStore from '@/config/use-global';
import { checkUser } from '@/services/common/auth';
import { zodResolver } from '@hookform/resolvers/zod';
import { Icon } from '@iconify/react/dist/iconify.js';
import { Button } from '@workspace/ui/components/button';
@ -9,32 +10,62 @@ import { useEffect, useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
interface UserCheckFormProps {
loading?: boolean;
onSubmit: (data: any) => void;
initialValues: any;
type?: 'login' | 'register' | 'reset';
setType: (type: 'login' | 'register' | 'reset') => void;
}
export default function UserCheckForm({
loading,
onSubmit,
initialValues,
}: {
loading?: boolean;
onSubmit: (data: any) => void;
initialValues: any;
}) {
type,
setType,
}: Readonly<UserCheckFormProps>) {
const t = useTranslations('auth.check');
const { common } = useGlobalStore();
const { register } = common;
const handleCheckUser = async (email: string) => {
try {
const response = await checkUser({ email });
const exist = response.data.data?.exist;
if (exist) {
setType('login');
return true;
}
if (!register.enable_email_domain_suffix) {
setType('register');
return true;
}
const domain = email.split('@')[1];
const isValid = register.email_domain_suffix_list.split('\n').includes(domain || '');
if (isValid) {
setType('register');
return true;
}
return false;
} catch (error) {
console.log('Error checking user:', error);
return false;
}
};
const formSchema = z.object({
email: z
.string()
.email(t('email'))
.refine(
(email) => {
if (!register.enable_email_domain_suffix) return true;
const domain = email.split('@')[1];
return register.email_domain_suffix_list.split('\n').includes(domain || '');
},
{
message: t('whitelist'),
},
),
.refine(handleCheckUser, {
message: t('whitelist'),
}),
});
const form = useForm<z.infer<typeof formSchema>>({
@ -45,7 +76,7 @@ export default function UserCheckForm({
const [isSubmitting, setIsSubmitting] = useState(false);
const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const handleEmailChange = (value: string) => {
const handleEmailChange = async (value: string) => {
form.setValue('email', value);
if (typingTimeoutRef.current) {
@ -60,11 +91,11 @@ export default function UserCheckForm({
} else {
setIsSubmitting(false);
}
}, 500);
}, 1000);
};
useEffect(() => {
if (initialValues && initialValues.email) {
if (initialValues?.email) {
handleEmailChange(initialValues.email);
}
return () => {