diff --git a/src/components/UserBadge/UserBadge.tsx b/src/components/UserBadge/UserBadge.tsx index e153374..1d34dee 100644 --- a/src/components/UserBadge/UserBadge.tsx +++ b/src/components/UserBadge/UserBadge.tsx @@ -12,7 +12,11 @@ const UserBadge: React.FC<{ roles: IUserRole[] }> = ({ roles }) => { if (userHasRoles(roles, [UserRoleEnum.ADMIN])) return { name: 'Administrator', color: 'purple' }; if (userHasRoles(roles, [UserRoleEnum.TEACHER])) return { name: 'Teacher', color: 'orange' }; if (userHasRoles(roles, [UserRoleEnum.STUDENT])) return { name: 'Student', color: 'blue' }; - if (roles.length === 0) return { name: 'Guest', color: 'gray' }; + + /** + * The user has no roles + */ + return { name: 'Guest', color: 'gray' }; }; const role = getCurrentRole(); diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts index e45c2e6..0dd927c 100644 --- a/src/interfaces/index.ts +++ b/src/interfaces/index.ts @@ -94,6 +94,9 @@ export interface IMe extends IUser { * does not have the STUDENT role */ courses?: UserCourseType[]; + isAdmin: boolean; + isTeacher: boolean; + isStudent: boolean; } export interface IUserContacts { diff --git a/src/pages/users/components/CreateUserModal/CreateUserModal.tsx b/src/pages/users/components/CreateUserModal/CreateUserModal.tsx index 05ab71c..5e18d35 100644 --- a/src/pages/users/components/CreateUserModal/CreateUserModal.tsx +++ b/src/pages/users/components/CreateUserModal/CreateUserModal.tsx @@ -19,19 +19,48 @@ import { } from '@chakra-ui/react'; import { AddIcon } from '@chakra-ui/icons'; import { MdSupervisorAccount } from 'react-icons/md'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { SubmitHandler } from 'react-hook-form'; +import CreateUserSchema from './CreateUserModal.validator'; /** * Types */ +import { IMe } from 'interfaces'; import { UserRoleEnum } from 'enums'; /** * Hooks */ import { useDisclosure } from '@chakra-ui/hooks'; +import { useForm } from 'react-hook-form'; -const CreateUserModal: React.FC = () => { +type CreateUserModalPropsType = { + me: IMe; +}; + +type CreateUserInputType = { + first_name: string; + last_name: string; + login: string; + email: string; + role: UserRoleEnum; + password: string; +}; + +const CreateUserModal: React.FC = ({ me }) => { const { isOpen, onOpen, onClose } = useDisclosure(); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(CreateUserSchema), + }); + + const onSubmit: SubmitHandler = data => { + console.log(data); + }; return ( <> @@ -41,52 +70,71 @@ const CreateUserModal: React.FC = () => { - - - - Create new user - - - - - - - First name - - - - Last name - - - - Login - - - - Email - - - - Role - - - - Password - - Must be at least 6 characters - - +
+ + + + Create new user + + + + + + + First name + + {errors.first_name ? ( + {errors.first_name.message} + ) : null} + + + Last name + + {errors.last_name ? {errors.last_name.message} : null} + + + Login + + {errors.login ? {errors.login.message} : null} + + + Email + + {errors.email ? {errors.email.message} : null} + + + Role + + {errors.role ? {errors.role.message} : null} + + + Password + + + {errors.password ? errors.password.message : 'Must be at least 6 characters.'} + + + - - - - + + + + +
diff --git a/src/pages/users/components/CreateUserModal/CreateUserModal.validator.ts b/src/pages/users/components/CreateUserModal/CreateUserModal.validator.ts index b6830c1..7db6f6b 100644 --- a/src/pages/users/components/CreateUserModal/CreateUserModal.validator.ts +++ b/src/pages/users/components/CreateUserModal/CreateUserModal.validator.ts @@ -5,8 +5,11 @@ const CreateUserSchema = yup.object().shape({ first_name: yup.string().required('First field name is required'), last_name: yup.string().required('Last field name is required'), login: yup.string().required('Login field is required'), - email: yup.string().required('Email field is required'), - role: yup.mixed().required('Role field is required').oneOf(Object.values(UserRoleEnum)), + email: yup.string().email('Email is invalid').required('Email field is required'), + role: yup + .mixed() + .required('Role field is required') + .oneOf(Object.values(UserRoleEnum), `Available roles: ${Object.keys(UserRoleEnum).join(', ')}`), password: yup.string().required('Password field is required').min(6, 'Password must be at least 6 characters.'), }); diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx index 563a470..84fdcda 100644 --- a/src/pages/users/index.tsx +++ b/src/pages/users/index.tsx @@ -49,12 +49,12 @@ const UsersPage: React.FC = ({ title }) => { User management You can add or delete your users on this page. - {userStore.users !== null && userStore.pagination !== undefined ? ( + {userStore.users !== null && userStore.me !== null && userStore.pagination !== undefined ? ( - + diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts index 0bf1ae7..99e20bf 100644 --- a/src/stores/UserStore.ts +++ b/src/stores/UserStore.ts @@ -1,6 +1,7 @@ import { AxiosInstance } from 'axios'; import { makeAutoObservable, runInAction } from 'mobx'; import { IUser, IUserContacts, IMe, IPaginationMeta } from 'interfaces'; +import * as helpers from 'helpers'; /** * Services @@ -11,6 +12,7 @@ import UserService, { FetchUsersParamsType } from 'services/UserService'; * Stores */ import RootStore from './RootStore'; +import { UserRoleEnum } from 'enums'; export default class UserStore { public root: RootStore; @@ -64,6 +66,9 @@ export default class UserStore { roles, contacts, courses, + isAdmin: helpers.userContainRoles(roles, [UserRoleEnum.ADMIN]), + isTeacher: helpers.userContainRoles(roles, [UserRoleEnum.TEACHER]), + isStudent: helpers.userContainRoles(roles, [UserRoleEnum.STUDENT]), }; });