local-it/dashboard
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'feat/protect-users-endpoint' into 'main'

Browse source 
Feat/protect users endpoint

Closes #72, #57, and dashboard-backend#38

See merge request stackspin/dashboard!45
This commit is contained in:
Maarten de Waard 2022-07-13 15:25:13 +00:00
commit 77f456fb07
3 changed files with 128 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

113
src/components/UserModal/UserModal.tsx
View file

@ -11,8 +11,19 @@ import { UserModalProps } from './types';
export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => {
const [deleteModal, setDeleteModal] = useState(false);
const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById, clearSelectedUser } =
useUsers();
const [isAdminRoleSelected, setAdminRoleSelected] = useState(true);
const [isPersonalModal, setPersonalModal] = useState(false);
const {
user,
loadUser,
loadPersonalInfo,
editUserById,
editPersonalInfo,
createNewUser,
userModalLoading,
deleteUserById,
clearSelectedUser,
} = useUsers();
const { currentUser, isAdmin } = useAuth();
const { control, reset, handleSubmit } = useForm<User>({
@ -26,7 +37,13 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
useEffect(() => {
if (userId) {
loadUser(userId);
const currentUserId = currentUser?.id;
if (currentUserId === userId) {
setPersonalModal(true);
loadPersonalInfo();
} else {
loadUser(userId);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userId, open]);
@ -47,7 +64,9 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
});
useEffect(() => {
if (dashboardRole === UserRole.Admin) {
const isAdminDashboardRoleSelected = dashboardRole === UserRole.Admin;
setAdminRoleSelected(isAdminDashboardRoleSelected);
if (isAdminDashboardRoleSelected) {
fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin }));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -55,7 +74,9 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
const handleSave = async () => {
try {
if (userId) {
if (isPersonalModal) {
await handleSubmit((data) => editPersonalInfo(data))();
} else if (userId) {
await handleSubmit((data) => editUserById(data))();
} else {
await handleSubmit((data) => createNewUser(data))();
@ -178,13 +199,13 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
</div>
</div>
{isAdmin && (
{isAdmin && !userModalLoading && (
<div>
<div className="mt-8">
<h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
</div>
{dashboardRole === UserRole.Admin && (
{isAdminRoleSelected && (
<div className="sm:col-span-6">
<Banner
title="Admin users automatically have admin-level access to all apps."
@ -193,47 +214,49 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps)
</div>
)}
<div>
<div className="flow-root mt-6">
<ul className="-my-5 divide-y divide-gray-200 ">
{fields.map((item, index) => {
if (item.name === 'dashboard') {
return null;
}
{!isAdminRoleSelected && (
<div>
<div className="flow-root mt-6">
<ul className="-my-5 divide-y divide-gray-200">
{fields.map((item, index) => {
if (item.name === 'dashboard') {
return null;
}
return (
<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>
return (
<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`}
disabled={isAdminRoleSelected}
options={[
{ value: UserRole.NoAccess, name: 'No Access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
/>
</div>
</div>
<div>
<Select
key={item.id}
control={control}
name={`app_roles.${index}.role`}
disabled={dashboardRole === UserRole.Admin}
options={[
{ value: UserRole.NoAccess, name: 'No Access' },
{ value: UserRole.User, name: 'User' },
{ value: UserRole.Admin, name: 'Admin' },
]}
/>
</div>
</div>
</li>
);
})}
</ul>
</li>
);
})}
</ul>
</div>
</div>
</div>
)}
</div>
)}
</div>