feat: add form for create new user

client/src/components/UserCreate.tsx

@@ -0,0 +1,227 @@
+import { PlusOutlined } from '@ant-design/icons';
+import {
+  Avatar,
+  Button,
+  Form,
+  Input,
+  Select,
+  Upload,
+  Image,
+  UploadFile,
+  GetProp,
+  UploadProps,
+} from 'antd';
+import { useState } from 'react';
+
+const { Option } = Select;
+
+type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+
+const getBase64 = (file: FileType): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+
+export default function UserCreate() {
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewImage, setPreviewImage] = useState('');
+
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+
+  const handlePreview = async (file: UploadFile) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj as FileType);
+    }
+
+    setPreviewImage(file.url || (file.preview as string));
+    setPreviewOpen(true);
+  };
+
+  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
+    setFileList(newFileList);
+
+  const customUploadButton = (
+    <div>
+      <div
+        style={{
+          height: '102px',
+          width: '102px',
+          backgroundColor: '#E2E2E2',
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: 8,
+          marginTop: 30,
+          cursor: 'pointer',
+        }}
+      >
+        <img
+          src="./icons/drawer/add_photo_alternate.svg"
+          alt="add_photo_alternate"
+          style={{ height: '18px', width: '18px' }}
+        />
+      </div>
+
+      <span style={{ fontSize: '14px', color: '#8c8c8c' }}>Выбрать фото</span>
+    </div>
+  );
+
+  const photoToUpload = (
+    <>
+      <Upload
+        listType="picture-circle"
+        fileList={fileList}
+        onPreview={handlePreview}
+        onChange={handleChange}
+        beforeUpload={() => false}
+      >
+        {fileList.length > 0 ? null : customUploadButton}
+      </Upload>
+      {previewImage && (
+        <Image
+          wrapperStyle={{ display: 'none' }}
+          preview={{
+            visible: previewOpen,
+            onVisibleChange: (visible) => setPreviewOpen(visible),
+            afterOpenChange: (visible) => !visible && setPreviewImage(''),
+          }}
+          src={previewImage}
+        />
+      )}
+    </>
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '36px',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          {photoToUpload}
+        </div>
+      </div>
+      <Form
+        name="user-edit-form"
+        layout="vertical"
+        // onFinish={onFinish}
+        initialValues={{
+          name: '',
+          login: '',
+          password: '',
+          email: '',
+          tenant: '',
+          role: '',
+          status: '',
+        }}
+        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
+      >
+        <Form.Item
+          label="Имя"
+          name="name"
+          rules={[{ required: true, message: 'Введите имя' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Логин"
+          name="login"
+          rules={[{ required: true, message: 'Введите логин' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Пароль"
+          name="password"
+          rules={[{ required: true, message: 'Введите пароль' }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          label="E-mail"
+          name="email"
+          rules={[
+            { required: true, message: 'Введите имейл' },
+            { type: 'email', message: 'Некорректный имейл' },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Привязка"
+          name="tenant"
+          rules={[{ required: true, message: 'Введите привязку' }]}
+        >
+          <Input />
+        </Form.Item>
+
+        <Form.Item
+          label="Роль"
+          name="role"
+          rules={[{ required: true, message: 'Выберите роль' }]}
+        >
+          <Select placeholder="Выберите роль">
+            <Option value="Директор магазина">Директор магазина</Option>
+            <Option value="Менеджер">Менеджер</Option>
+            <Option value="Кассир">Кассир</Option>
+          </Select>
+        </Form.Item>
+
+        <Form.Item
+          label="Статус"
+          name="status"
+          rules={[{ required: true, message: 'Выберите статус' }]}
+        >
+          <Select placeholder="Выберите статус">
+            <Option value="ACTIVE">Активен</Option>
+            <Option value="DISABLED">Неактивен</Option>
+            <Option value="BLOCKED">Заблокирован</Option>
+            <Option value="DELETED">Удален</Option>
+          </Select>
+        </Form.Item>
+
+        <div style={{ flexGrow: 1 }} />
+
+        <Form.Item>
+          <Button
+            type="primary"
+            htmlType="submit"
+            block
+            style={{ color: '#000' }}
+          >
+            <img
+              src="/icons/drawer/reg.svg"
+              alt="save"
+              style={{ height: '18px', width: '18px' }}
+            />{' '}
+            Добавить аккаунт
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}