universal_is/frontend_reactjs/src/pages/auth/SignUp.tsx

import { useForm, SubmitHandler } from 'react-hook-form';
import { TextField, Button, Container, Typography, Box } from '@mui/material';
import { AxiosResponse } from 'axios';
import { ApiResponse } from '../../interfaces/auth';
import UserService from '../../services/UserService';
import { IUserCreate } from '../../interfaces/user';

const SignUp = () => {
    const { register, handleSubmit, formState: { errors } } = useForm<IUserCreate>({
        defaultValues: {
            email: '',
            login: '',
            phone: '',
            name: '',
            surname: '',
            is_active: true,
            password: '',
        }
    })


    const onSubmit: SubmitHandler<IUserCreate> = async (data) => {
        try {
            const response: AxiosResponse<ApiResponse> = await UserService.createUser(data)
            console.log('Успешная регистрация:', response.data);
        } catch (error) {
            console.error('Ошибка регистрации:', error);
        }
    };

    return (
        <Container maxWidth="sm">
            <Box my={4}>
                <Typography variant="h4" component="h1" gutterBottom>
                    Регистрация
                </Typography>

                <form onSubmit={handleSubmit(onSubmit)}>
                    <TextField
                        fullWidth
                        margin="normal"
                        label="Email"
                        required
                        {...register('email', { required: 'Email обязателен' })}
                        error={!!errors.email}
                        helperText={errors.email?.message}
                    />

                    <TextField
                        fullWidth
                        margin="normal"
                        label="Логин"
                        required
                        {...register('login', { required: 'Логин обязателен' })}
                        error={!!errors.login}
                        helperText={errors.login?.message}
                    />

                    <TextField
                        fullWidth
                        margin="normal"
                        label="Телефон"
                        {...register('phone')}
                        error={!!errors.phone}
                        helperText={errors.phone?.message}
                    />

                    <TextField
                        fullWidth
                        margin="normal"
                        label="Имя"
                        {...register('name')}
                        error={!!errors.name}
                        helperText={errors.name?.message}
                    />

                    <TextField
                        fullWidth
                        margin="normal"
                        label="Фамилия"
                        {...register('surname')}
                        error={!!errors.surname}
                        helperText={errors.surname?.message}
                    />

                    <TextField
                        fullWidth
                        margin="normal"
                        type="password"
                        label="Пароль"
                        required
                        {...register('password', { required: 'Пароль обязателен' })}
                        error={!!errors.password}
                        helperText={errors.password?.message}
                    />

                    <Button type="submit" variant="contained" color="primary">
                        Зарегистрироваться
                    </Button>
                </form>
            </Box>
        </Container>
    );
};

export default SignUp;