feat(auth): add user and role management

2023-07-18 21:00:10 +00:00
parent a7104c41a2
commit 0deaa03218
108 changed files with 2909 additions and 388 deletions
--- a/packages/web/src/components/AdminSettingsLayout/index.tsx
+++ b/packages/web/src/components/AdminSettingsLayout/index.tsx
@@ -0,0 +1,92 @@
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import GroupIcon from '@mui/icons-material/Group';
+import GroupsIcon from '@mui/icons-material/Groups';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import * as React from 'react';
+
+import { SvgIconComponent } from '@mui/icons-material';
+import AppBar from 'components/AppBar';
+import Drawer from 'components/Drawer';
+import * as URLS from 'config/urls';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+
+type SettingsLayoutProps = {
+  children: React.ReactNode;
+};
+
+type DrawerLink = {
+  Icon: SvgIconComponent,
+  primary: string,
+  to: string,
+}
+
+function createDrawerLinks({ canReadRole, canReadUser }: { canReadRole: boolean; canReadUser: boolean;  }) {
+  const items = [
+      canReadUser ? {
+        Icon: GroupIcon,
+        primary: 'adminSettingsDrawer.users',
+        to: URLS.USERS,
+      } : null,
+      canReadRole ? {
+        Icon: GroupsIcon,
+        primary: 'adminSettingsDrawer.roles',
+        to: URLS.ROLES,
+      } : null
+    ]
+    .filter(Boolean) as DrawerLink[];
+
+  return items;
+}
+
+const drawerBottomLinks = [
+  {
+    Icon: ArrowBackIosNewIcon,
+    primary: 'adminSettingsDrawer.goBack',
+    to: '/',
+  },
+];
+
+export default function SettingsLayout({
+  children,
+}: SettingsLayoutProps): React.ReactElement {
+  const theme = useTheme();
+  const currentUserAbility = useCurrentUserAbility();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
+  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
+
+  const openDrawer = () => setDrawerOpen(true);
+  const closeDrawer = () => setDrawerOpen(false);
+  const drawerLinks = createDrawerLinks({
+    canReadUser: currentUserAbility.can('read', 'User'),
+    canReadRole: currentUserAbility.can('read', 'Role'),
+  });
+
+  return (
+    <>
+      <AppBar
+        drawerOpen={isDrawerOpen}
+        onDrawerOpen={openDrawer}
+        onDrawerClose={closeDrawer}
+      />
+
+      <Box sx={{ display: 'flex' }}>
+        <Drawer
+          links={drawerLinks}
+          bottomLinks={drawerBottomLinks}
+          open={isDrawerOpen}
+          onOpen={openDrawer}
+          onClose={closeDrawer}
+        />
+
+        <Box sx={{ flex: 1 }}>
+          <Toolbar />
+
+          {children}
+        </Box>
+      </Box>
+    </>
+  );
+}