diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 0faf437d1f9279698df1514922da97c714f62240..7b1c5a2bdcc58ce85ce772781757c3ede170fdf8 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -5,7 +5,9 @@ import { useAuth } from 'src/services/auth';
import Gravatar from 'react-gravatar';
import { Link, useLocation } from 'react-router-dom';
import clsx from 'clsx';
-import { CurrentUserModal } from './components/CurrentUserModal';
+import _ from 'lodash';
+
+import { UserModal } from '../UserModal';
const navigation = [
{ name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
@@ -31,14 +33,20 @@ interface HeaderProps {}
const Header: React.FC<HeaderProps> = () => {
const [currentUserModal, setCurrentUserModal] = useState(false);
+ const [currentUserId, setCurrentUserId] = useState(null);
const { logOut, currentUser, isAdmin } = useAuth();
const { pathname } = useLocation();
- const currentUserModalOpen = () => {
+ const currentUserModalOpen = (id: any) => {
+ setCurrentUserId(id);
setCurrentUserModal(true);
};
- const currentUserModalClose = () => setCurrentUserModal(false);
+
+ const currentUserModalClose = () => {
+ setCurrentUserModal(false);
+ setCurrentUserId(null);
+ };
const navigationItems = filterNavigationByDashboardRole(isAdmin);
@@ -110,7 +118,7 @@ const Header: React.FC<HeaderProps> = () => {
<Menu.Item>
{({ active }) => (
<a
- onClick={() => currentUserModalOpen()}
+ onClick={() => currentUserModalOpen(currentUser?.id)}
className={classNames(
active ? 'bg-gray-100 cursor-pointer' : '',
'block px-4 py-2 text-sm text-gray-700 cursor-pointer',
@@ -165,7 +173,7 @@ const Header: React.FC<HeaderProps> = () => {
)}
</Disclosure>
- <CurrentUserModal open={currentUserModal} onClose={currentUserModalClose} user={currentUser} />
+ <UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
</>
);
};
diff --git a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx b/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx
deleted file mode 100644
index 29a3c166923ea2b8275105ed86f7ea37c1d56f0a..0000000000000000000000000000000000000000
--- a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import _ from 'lodash';
-import React, { useEffect } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { Modal } from 'src/components';
-import { Input, Select } from 'src/components/Form';
-import { useAuth } from 'src/services/auth';
-import { User, UserRole, useUsers } from 'src/services/users';
-import { appAccessList, initialUserForm } from './consts';
-import { UserModalProps } from './types';
-
-export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
- const { editUserById, userModalLoading } = useUsers();
- const { isAdmin } = useAuth();
-
- const { control, reset, handleSubmit } = useForm<User>({
- defaultValues: initialUserForm,
- });
-
- const { fields } = useFieldArray({
- control,
- name: 'app_roles',
- });
-
- useEffect(() => {
- if (user && !_.isEmpty(user)) {
- reset(user);
- }
-
- return () => {
- reset(initialUserForm);
- };
- }, [user, reset]);
-
- const handleSave = async () => {
- try {
- if (user) {
- await handleSubmit((data) => editUserById(data))();
- }
-
- onClose();
- } catch (e: any) {
- // Continue
- }
- };
-
- const handleKeyPress = (e: any) => {
- if (e.key === 'Enter' || e.key === 'NumpadEnter') {
- handleSave();
- }
- };
-
- const handleClose = () => {
- onClose();
- };
-
- return (
- <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} useCancelButton>
- <div className="bg-white px-4">
- <div className="space-y-10 divide-y divide-gray-200">
- <div>
- <div>
- <h3 className="text-lg leading-6 font-medium text-gray-900">Profile</h3>
- </div>
-
- <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
- <div className="sm:col-span-3">
- <Input control={control} name="name" label="Name" onKeyPress={handleKeyPress} />
- </div>
-
- <div className="sm:col-span-3">
- <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
- </div>
-
- {isAdmin && (
- <>
- <div className="sm:col-span-3">
- {fields
- .filter((field) => field.name === 'dashboard')
- .map((item, index) => (
- <Select
- key={item.id}
- control={control}
- name={`app_roles.${index}.role`}
- label="Role"
- options={[
- { value: UserRole.Admin, name: 'Admin' },
- { value: UserRole.User, name: 'User' },
- ]}
- />
- ))}
- </div>
-
- <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
- {/* <Select control={control} name="status" label="Status" options={['Admin', 'Inactive']} /> */}
- <label htmlFor="status" className="block text-sm font-medium text-gray-700">
- Status
- </label>
- <div className="mt-1">
- <select
- id="status"
- name="status"
- className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
- >
- <option>Active</option>
- <option>Inactive</option>
- <option>Banned</option>
- </select>
- </div>
- </div>
- </>
- )}
- </div>
- </div>
-
- {isAdmin && (
- <div>
- <div className="mt-8">
- <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
- </div>
-
- <div>
- <div className="flow-root mt-6">
- <ul className="-my-5 divide-y divide-gray-200 ">
- {fields
- .filter((field) => field.name !== 'dashboard')
- .map((item, index) => (
- <li className="py-4" key={item.name}>
- <div className="flex items-center space-x-4">
- <div className="flex-shrink-0 flex-1 flex items-center">
- <img
- className="h-10 w-10 rounded-md overflow-hidden"
- src={_.find(appAccessList, ['name', item.name!])?.image}
- alt={item.name ?? 'Image'}
- />
- <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
- {_.find(appAccessList, ['name', item.name!])?.label}
- </h3>
- </div>
- <div>
- <Select
- key={item.id}
- control={control}
- name={`app_roles.${index}.role`}
- options={[
- { value: UserRole.Admin, name: 'Admin' },
- { value: UserRole.User, name: 'User' },
- ]}
- />
- </div>
- </div>
- </li>
- ))}
- </ul>
- </div>
- </div>
- </div>
- )}
- </div>
- </div>
- </Modal>
- );
-};
diff --git a/src/components/Header/components/CurrentUserModal/consts.ts b/src/components/Header/components/CurrentUserModal/consts.ts
deleted file mode 100644
index abda7084a71020249dc970cbaaf53fbc986e8b87..0000000000000000000000000000000000000000
--- a/src/components/Header/components/CurrentUserModal/consts.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { UserRole } from 'src/services/users';
-
-export const appAccessList = [
- {
- name: 'wekan',
- image: '/assets/wekan.svg',
- label: 'Wekan',
- },
- {
- name: 'wordpress',
- image: '/assets/wordpress.svg',
- label: 'Wordpress',
- },
- {
- name: 'next-cloud',
- image: '/assets/nextcloud.svg',
- label: 'NextCloud',
- },
- {
- name: 'zulip',
- image: '/assets/zulip.svg',
- label: 'Zulip',
- },
-];
-
-const initialAppRoles = [
- {
- name: 'dashboard',
- role: UserRole.User,
- },
- {
- name: 'wekan',
- role: UserRole.User,
- },
- {
- name: 'wordpress',
- role: UserRole.User,
- },
- {
- name: 'next-cloud',
- role: UserRole.User,
- },
- {
- name: 'zulip',
- role: UserRole.User,
- },
-];
-
-export const initialUserForm = {
- id: '',
- name: '',
- email: '',
- app_roles: initialAppRoles,
- status: '',
-};
diff --git a/src/components/Header/components/CurrentUserModal/index.ts b/src/components/Header/components/CurrentUserModal/index.ts
deleted file mode 100644
index 7a5fd1aaaa7c2ddbc4414bb04c0ed24a0665e079..0000000000000000000000000000000000000000
--- a/src/components/Header/components/CurrentUserModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CurrentUserModal } from './CurrentUserModal';
diff --git a/src/components/Header/components/CurrentUserModal/types.ts b/src/components/Header/components/CurrentUserModal/types.ts
deleted file mode 100644
index aa11c0eba5a76bed2a9e63a03cf7e4ccf08ceec0..0000000000000000000000000000000000000000
--- a/src/components/Header/components/CurrentUserModal/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { User } from 'src/services/users';
-
-export type UserModalProps = {
- open: boolean;
- onClose: () => void;
- user: User | null;
-};
diff --git a/src/components/Header/components/index.ts b/src/components/Header/components/index.ts
deleted file mode 100644
index 7a5fd1aaaa7c2ddbc4414bb04c0ed24a0665e079..0000000000000000000000000000000000000000
--- a/src/components/Header/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CurrentUserModal } from './CurrentUserModal';
diff --git a/src/modules/users/components/UserModal/UserModal.tsx b/src/components/UserModal/UserModal.tsx
similarity index 97%
rename from src/modules/users/components/UserModal/UserModal.tsx
rename to src/components/UserModal/UserModal.tsx
index b31d2182e56b691b49f0c829bdf43bce16de8501..a810f30c20ca935d70d873e059bd87622330ac15 100644
--- a/src/modules/users/components/UserModal/UserModal.tsx
+++ b/src/components/UserModal/UserModal.tsx
@@ -133,6 +133,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
name={`app_roles.${index}.role`}
label="Role"
options={[
+ { value: UserRole.NoAccess, name: 'No access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
@@ -194,6 +195,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
control={control}
name={`app_roles.${index}.role`}
options={[
+ { value: UserRole.NoAccess, name: 'No Access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
diff --git a/src/modules/users/components/UserModal/consts.ts b/src/components/UserModal/consts.ts
similarity index 83%
rename from src/modules/users/components/UserModal/consts.ts
rename to src/components/UserModal/consts.ts
index a47d6de433a455886514141886474bc9a8d8b51a..7304a419c1f98dd2c6ebced01760f86fda475b81 100644
--- a/src/modules/users/components/UserModal/consts.ts
+++ b/src/components/UserModal/consts.ts
@@ -14,7 +14,7 @@ export const appAccessList = [
{
name: 'nextcloud',
image: '/assets/nextcloud.svg',
- label: 'NextCloud',
+ label: 'Nextcloud',
},
{
name: 'zulip',
@@ -30,19 +30,19 @@ const initialAppRoles = [
},
{
name: 'wekan',
- role: UserRole.User,
+ role: UserRole.NoAccess,
},
{
name: 'wordpress',
- role: UserRole.User,
+ role: UserRole.NoAccess,
},
{
name: 'nextcloud',
- role: UserRole.User,
+ role: UserRole.NoAccess,
},
{
name: 'zulip',
- role: UserRole.User,
+ role: UserRole.NoAccess,
},
];
diff --git a/src/modules/users/components/UserModal/index.ts b/src/components/UserModal/index.ts
similarity index 100%
rename from src/modules/users/components/UserModal/index.ts
rename to src/components/UserModal/index.ts
diff --git a/src/modules/users/components/UserModal/types.ts b/src/components/UserModal/types.ts
similarity index 100%
rename from src/modules/users/components/UserModal/types.ts
rename to src/components/UserModal/types.ts
diff --git a/src/components/index.ts b/src/components/index.ts
index 5e1d96b923cb8f145b0a0f3ca3e45300e2746c71..565e17d3790a54e2f7c8a2757fa444d443539cfd 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,3 +4,4 @@ export { Table } from './Table';
export { Banner } from './Banner';
export { Tabs } from './Tabs';
export { Modal, ConfirmationModal } from './Modal';
+export { UserModal } from './UserModal';
diff --git a/src/modules/users/Users.tsx b/src/modules/users/Users.tsx
index 6ba32657e1483aaa0b7d486441fb3551ce7615e7..3832926ccdb913c91292a9108ae40bb14927574b 100644
--- a/src/modules/users/Users.tsx
+++ b/src/modules/users/Users.tsx
@@ -6,7 +6,8 @@ import { useUsers } from 'src/services/users';
import { Table } from 'src/components';
import { debounce } from 'lodash';
import { useAuth } from 'src/services/auth';
-import { UserModal } from './components/UserModal';
+
+import { UserModal } from '../../components/UserModal';
export const Users: React.FC = () => {
const [selectedRowsIds, setSelectedRowsIds] = useState({});
diff --git a/src/modules/users/components/index.ts b/src/modules/users/components/index.ts
deleted file mode 100644
index cc3d9bd6afb1b4495e992e95c429f4d4c6b1718b..0000000000000000000000000000000000000000
--- a/src/modules/users/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { UserModal } from './UserModal';
diff --git a/src/services/users/transformations.ts b/src/services/users/transformations.ts
index 5f1c2f75c19c37151c4abf375dd102375a8c363a..bc2bd05501259f598e289e0b05c2afb43de071d8 100644
--- a/src/services/users/transformations.ts
+++ b/src/services/users/transformations.ts
@@ -1,16 +1,42 @@
import { AppRoles, User, UserRole } from './types';
+const transformRoleById = (roleId: any): UserRole => {
+ switch (roleId) {
+ case 1:
+ return UserRole.Admin;
+ case 2:
+ return UserRole.User;
+ case 3:
+ return UserRole.NoAccess;
+ default:
+ return UserRole.NoAccess;
+ }
+};
+
+const transformRoleIdByRole = (role: UserRole | null): number | null => {
+ switch (role) {
+ case UserRole.Admin:
+ return 1;
+ case UserRole.User:
+ return 2;
+ case UserRole.NoAccess:
+ return 3;
+ default:
+ return null;
+ }
+};
+
export const transformAppRoles = (data: any): AppRoles => {
- const resolvedAdminRole = data.role_id === 1 ? UserRole.Admin : UserRole.User;
+ const userRole = transformRoleById(data.role_id);
return {
name: data.name ?? '',
- role: resolvedAdminRole ?? UserRole.User,
+ role: userRole,
};
};
export const transformRequestAppRoles = (data: AppRoles): any => {
- const resolvedRequestRole = data.role === UserRole.Admin ? 1 : null;
+ const resolvedRequestRole = transformRoleIdByRole(data.role) ?? null;
return {
name: data.name ?? '',
diff --git a/src/services/users/types.ts b/src/services/users/types.ts
index 924524784986ec17d61a9d2bec137003e002fd8e..f97f43543661c1f0044d81cb0c95c81c8a289384 100644
--- a/src/services/users/types.ts
+++ b/src/services/users/types.ts
@@ -13,6 +13,7 @@ export interface FormUser extends User {
}
export enum UserRole {
+ NoAccess = 'no_access',
Admin = 'admin',
User = 'user',
}