universal_is/frontend_reactjs/src/components/modals/CreateUserModal.tsx

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

interface Props {
    open: boolean;
    setOpen: (state: boolean) => void;
}

const style = {
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    boxShadow: 24,
    borderRadius: 2,
    p: 4,
    display: "flex",
    flexDirection: "column",
    gap: "8px"
}

export default function CreateUserModal({
    open,
    setOpen,
}: Props) {
    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 (
        <Modal
            open={open}
            onClose={() => setOpen(false)}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <form onSubmit={handleSubmit(onSubmit)}>

                <Box sx={style}>
                    <Typography variant="h6" component="h6" gutterBottom>
                        Создание пользователя
                    </Typography>

                    <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}
                    />

                    <Box sx={{
                        display: "flex",
                        gap: "8px"
                    }}>
                        <Button type="submit" variant="contained" color="primary">
                            Добавить пользователя
                        </Button>

                        <Button type="button" variant="outlined" color="primary" onClick={() => setOpen(false)}>
                            Отмена
                        </Button>
                    </Box>
                </Box>
            </form>
        </Modal>
    )
}