Auth: react-hook-form

frontend_reactjs/src/pages/auth/SignIn.tsx

@@ -1,4 +1,5 @@
 import React, { useState, ChangeEvent, FormEvent } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
 import { TextField, Button, Container, Typography, Box } from '@mui/material';
 import axios, { AxiosResponse } from 'axios';
 import { SignInFormData, ApiResponse } from '../../types/auth';
@@ -8,31 +9,24 @@ import axiosInstance from '../../http/axiosInstance';
 import AuthService from '../../services/AuthService';
 
 const SignIn = () => {
-  const [formData, setFormData] = useState<SignInFormData>({
-    username: '',
-    password: '',
-    grant_type: 'password',
-    scope: '',
-    client_id: '',
-    client_secret: ''
-  });
+  const { register, handleSubmit, formState: { errors } } = useForm<SignInFormData>({
+    defaultValues: {
+      username: '',
+      password: '',
+      grant_type: 'password',
+      scope: '',
+      client_id: '',
+      client_secret: ''
+    }
+  })
 
   const authStore = useAuthStore();
-
   const navigate = useNavigate();
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value,
-    });
-  };
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
+  const onSubmit: SubmitHandler<SignInFormData> = async (data) => {
     const formBody = new URLSearchParams();
-    for (const key in formData) {
-      formBody.append(key, formData[key as keyof SignInFormData] as string);
+    for (const key in data) {
+      formBody.append(key, data[key as keyof SignInFormData] as string);
     }
 
     try {
@@ -42,6 +36,7 @@ const SignIn = () => {
         },
       });
       console.log('Вход произошел успешно:', response.data);
+
       const token = response.data.access_token
 
       const userDataResponse: AxiosResponse<ApiResponse> = await AuthService.getCurrentUser(token)
@@ -49,7 +44,6 @@ const SignIn = () => {
       console.log('Пользователь:', userDataResponse.data)
 
       authStore.setUserData(JSON.stringify(userDataResponse.data))
-
       authStore.login(token)
 
       navigate('/');
@@ -64,25 +58,23 @@ const SignIn = () => {
         <Typography variant="h4" component="h1" gutterBottom>
           Вход
         </Typography>
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit(onSubmit)}>
           <TextField
             fullWidth
             margin="normal"
-            name="username"
             label="Логин"
-            value={formData.username}
-            onChange={handleChange}
-            required
+            {...register('username', { required: 'Логин обязателен' })}
+            error={!!errors.username}
+            helperText={errors.username?.message}
           />
           <TextField
             fullWidth
             margin="normal"
             type="password"
-            name="password"
             label="Пароль"
-            value={formData.password}
-            onChange={handleChange}
-            required
+            {...register('password', { required: 'Пароль обязателен' })}
+            error={!!errors.password}
+            helperText={errors.password?.message}
           />
           <Button type="submit" variant="contained" color="primary">
             Вход

frontend_reactjs/src/pages/auth/SignUp.tsx

@@ -1,33 +1,27 @@
-// src/components/SignUp.tsx
-
 import React, { useState, ChangeEvent, FormEvent } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
 import { TextField, Button, Container, Typography, Box } from '@mui/material';
 import axios, { AxiosResponse } from 'axios';
 import { SignUpFormData, ApiResponse } from '../../types/auth';
 import axiosInstance from '../../http/axiosInstance';
 
-const SignUp: React.FC = () => {
-    const [formData, setFormData] = useState<SignUpFormData>({
-        email: '',
-        login: '',
-        phone: '',
-        name: '',
-        surname: '',
-        is_active: true,
-        password: '',
-    });
+const SignUp = () => {
+    const { register, handleSubmit, formState: { errors } } = useForm<SignUpFormData>({
+        defaultValues: {
+            email: '',
+            login: '',
+            phone: '',
+            name: '',
+            surname: '',
+            is_active: true,
+            password: '',
+        }
+    })
 
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setFormData({
-            ...formData,
-            [e.target.name]: e.target.value,
-        });
-    };
 
-    const handleSubmit = async (e: FormEvent) => {
-        e.preventDefault();
+    const onSubmit: SubmitHandler<SignUpFormData> = async (data) => {
         try {
-            const response: AxiosResponse<ApiResponse> = await axiosInstance.post(`${import.meta.env.VITE_API_AUTH_URL}/auth/user`, formData);
+            const response: AxiosResponse<ApiResponse> = await axiosInstance.post(`${import.meta.env.VITE_API_AUTH_URL}/auth/user`, data);
             console.log('Успешная регистрация:', response.data);
         } catch (error) {
             console.error('Ошибка регистрации:', error);
@@ -40,58 +34,55 @@ const SignUp: React.FC = () => {
                 <Typography variant="h4" component="h1" gutterBottom>
                     Регистрация
                 </Typography>
-                <form onSubmit={handleSubmit}>
+                <form onSubmit={handleSubmit(onSubmit)}>
                     <TextField
                         fullWidth
                         margin="normal"
-                        name="email"
                         label="Email"
-                        value={formData.email}
-                        onChange={handleChange}
-                        required
+                        {...register('email', { required: 'Email обязателен' })}
+                        error={!!errors.email}
+                        helperText={errors.email?.message}
                     />
                     <TextField
                         fullWidth
                         margin="normal"
-                        name="login"
                         label="Логин"
-                        value={formData.login}
-                        onChange={handleChange}
-                        required
+                        {...register('login', { required: 'Логин обязателен' })}
+                        error={!!errors.login}
+                        helperText={errors.login?.message}
                     />
                     <TextField
                         fullWidth
                         margin="normal"
-                        name="phone"
                         label="Телефон"
-                        value={formData.phone}
-                        onChange={handleChange}
+                        {...register('phone')}
+                        error={!!errors.phone}
+                        helperText={errors.phone?.message}
                     />
                     <TextField
                         fullWidth
                         margin="normal"
-                        name="name"
                         label="Имя"
-                        value={formData.name}
-                        onChange={handleChange}
+                        {...register('name')}
+                        error={!!errors.name}
+                        helperText={errors.name?.message}
                     />
                     <TextField
                         fullWidth
                         margin="normal"
-                        name="surname"
                         label="Фамилия"
-                        value={formData.surname}
-                        onChange={handleChange}
+                        {...register('surname')}
+                        error={!!errors.surname}
+                        helperText={errors.surname?.message}
                     />
                     <TextField
                         fullWidth
                         margin="normal"
                         type="password"
-                        name="password"
                         label="Пароль"
-                        value={formData.password}
-                        onChange={handleChange}
-                        required
+                        {...register('password', { required: 'Пароль обязателен' })}
+                        error={!!errors.password}
+                        helperText={errors.password?.message}
                     />
                     <Button type="submit" variant="contained" color="primary">
                         Зарегистрироваться