create user

frontend/src/@types/index.ts

@@ -1,4 +1,4 @@
-export const enum ROLE {
+export enum ROLE {
   ADMIN = 1,
   DATA_MANAGER = 10,
   OPERATOR = 20,

frontend/src/api/users/UsersApiDTO.ts

@@ -12,6 +12,8 @@ export type UserDTO = {
 export type AddUserDTO = {
   email: string
   password: string
+  name: string
+  role_id: number
 }
 
 export type ListUsersQueryDTO = {

frontend/src/components/common/InputError.tsx

@@ -0,0 +1,61 @@
+import { InputProps, styled, Typography } from '@mui/material'
+
+interface InputErrorProps extends InputProps {
+  errorMessage: string
+  value?: string
+}
+
+const InputError =
+    ({
+      errorMessage,
+      onChange,
+      value,
+      type,
+      onBlur,
+      name,
+    }: InputErrorProps) => {
+  return (
+    <>
+      <Input
+        autoComplete="Off"
+        error={!!errorMessage}
+        onChange={onChange}
+        value={value}
+        type={type}
+        name={name}
+        onBlur={onBlur}
+      />
+      <TextError>{errorMessage}</TextError>
+    </>
+  )
+}
+
+const Input = styled('input', {
+  shouldForwardProp: (props) => props !== 'error',
+})<{ error: boolean }>(({ error }) => {
+  return {
+    width: 250,
+    height: 24,
+    borderRadius: 4,
+    border: '1px solid',
+    borderColor: error ? 'red' : '#d9d9d9',
+    padding: '5px 10px',
+    marginBottom: 15,
+    transition: 'all 0.3s',
+    outline: 'none',
+    ':focus, :hover': {
+      borderColor: '#1677ff',
+    },
+  }
+})
+
+const TextError = styled(Typography)({
+  fontSize: 12,
+  minHeight: 18,
+  color: 'red',
+  lineHeight: '14px',
+  margin: '-14px 0px 0px 305px',
+  wordBreak: 'break-word',
+})
+
+export default InputError

frontend/src/components/common/SelectError.tsx

@@ -0,0 +1,73 @@
+import {
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  styled,
+  Typography,
+} from '@mui/material'
+import { FC, FocusEvent } from 'react'
+
+type SelectErrorProps = {
+  value?: string
+  onChange?: (value: SelectChangeEvent, child: React.ReactNode) => void
+  onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void
+  errorMessage: string
+  name?: string
+  options: string[]
+}
+
+const SelectError: FC<SelectErrorProps> =
+   ({
+     value,
+     onChange,
+     onBlur,
+     errorMessage,
+     options,
+     name,
+   }) => {
+  return (
+    <>
+      <SelectModal
+        name={name}
+        value={value}
+        onChange={
+          onChange as (
+            value: SelectChangeEvent<unknown>,
+            child: React.ReactNode,
+          ) => void
+        }
+        onBlur={onBlur}
+        error={!!errorMessage}
+      >
+        {options.map((item: string) => {
+          return (
+            <MenuItem key={item} value={item}>
+              {item}
+            </MenuItem>
+          )
+        })}
+      </SelectModal>
+      <TextError>{errorMessage}</TextError>
+    </>
+  )
+}
+
+const SelectModal = styled(Select, {
+  shouldForwardProp: (props) => props !== 'error',
+})<{ error: boolean }>(({ theme, error }) => ({
+  width: 272,
+  marginBottom: '15px',
+  border: '1px solid #d9d9d9',
+  borderColor: error ? 'red' : '#d9d9d9',
+  borderRadius: 4,
+}))
+
+const TextError = styled(Typography)({
+  fontSize: 12,
+  minHeight: 18,
+  color: 'red',
+  lineHeight: '14px',
+  margin: '-14px 0px 0px 305px',
+  wordBreak: 'break-word',
+})
+export default SelectError