aswi20220x00-gitlab/webapp/components/modals/AddUserModal.tsx @ 78122c3a

import { Button, Form, Input, Modal, Radio, Upload } from 'antd';
import { InboxOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
import React from 'react';
import {
    CreateUserRequest,
    DocumentAddInfo,
    EAddDocumentFormat,
    ERole,
    LoginResponse,
} from '../../api';
import { documentController, userController } from '../../controllers';
import { ShowToast } from '../../utils/alerts';
import { getTokenData } from '../../utils/login';

const { Dragger } = Upload;

interface ModalProps {
    onCancel: () => void;
}

/**
 * Creates a modal window that loads documents to the app.
 * @returns The modal window.
 */
const AddUserModal: React.FC<ModalProps> = ({ onCancel }) => {
    /**
     * Handles successful closing of the modal window.
     */
    const handleOk = () => {
        onCancel();
    };

    /**
     * Handles cancelling of the model window.
     */
    const handleCancel = () => {
        onCancel();
    };

    const onFinish = async (values: any) => {
        const req: CreateUserRequest = {
            username: values.username,
            password: values.password,
            name: values.name,
            surname: values.surname,
            role: values.role,
        };

        const loginRes = await userController.usersPost(req);
        onCancel();
    };

    const onFinishFailed = (errorInfo: any) => {
        ShowToast('Zadané údaje nejsou validní', 'error', 3000, 'top-end');
    };

    return (
        <Modal
            title="Nový uživatel"
            onOk={handleOk}
            visible={true}
            onCancel={handleCancel}
            footer={null}
        >
            <Form
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                labelCol={{ span: 4 }}
                layout="horizontal"
            >
                <Form.Item
                    label=""
                    name="role"
                    rules={[
                        {
                            required: true,
                            message: 'Prosím vyberte roli',
                        },
                    ]}
                >
                    <Radio.Group>
                        <Radio.Button value={ERole.Annotator}>Anotátor</Radio.Button>
                        <Radio.Button value={ERole.Administrator}>Admin</Radio.Button>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Prosím zadejte uživatelské jméno',
                        },
                    ]}
                >
                    <Input placeholder="Uživatelské jméno" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: 'Prosím zadejte heslo' }]}
                >
                    <Input placeholder="Heslo" />
                </Form.Item>

                <Form.Item
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: 'Prosím zadejte jméno',
                        },
                    ]}
                >
                    <Input placeholder="Jméno" />
                </Form.Item>

                <Form.Item
                    name="surname"
                    rules={[
                        {
                            required: true,
                            message: 'Prosím zadejte příjmení',
                        },
                    ]}
                >
                    <Input placeholder="Příjmení" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="w-100">
                        Vytvořit
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default AddUserModal;