feat(auth): add user and role management

packages/web/package.json

@@ -6,6 +6,8 @@
   "dependencies": {
     "@apollo/client": "^3.6.9",
     "@automatisch/types": "^0.8.0",
+    "@casl/ability": "^6.5.0",
+    "@casl/react": "^3.1.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@hookform/resolvers": "^2.8.8",
@@ -31,7 +33,7 @@
     "notistack": "^2.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.43.9",
+    "react-hook-form": "^7.45.2",
     "react-intl": "^5.20.12",
     "react-json-tree": "^0.16.2",
     "react-router-dom": "^6.0.2",

packages/web/src/adminSettingsRoutes.tsx

@@ -0,0 +1,87 @@
+import { Route, Navigate } from 'react-router-dom';
+import AdminSettingsLayout from 'components/AdminSettingsLayout';
+import Users from 'pages/Users';
+import EditUser from 'pages/EditUser';
+import CreateUser from 'pages/CreateUser';
+import Roles from 'pages/Roles/index.ee';
+import CreateRole from 'pages/CreateRole/index.ee';
+import EditRole from 'pages/EditRole/index.ee';
+
+import * as URLS from 'config/urls';
+import Can from 'components/Can';
+
+// TODO: consider introducing redirections to `/` as fallback
+export default (
+  <>
+    <Route
+      path={URLS.USERS}
+      element={
+        <Can I="read" a="User">
+          <AdminSettingsLayout>
+            <Users />
+          </AdminSettingsLayout>
+        </Can>
+      }
+    />
+
+    <Route
+      path={URLS.CREATE_USER}
+      element={
+        <Can I="create" a="User">
+          <AdminSettingsLayout>
+            <CreateUser />
+          </AdminSettingsLayout>
+        </Can>
+      }
+    />
+
+    <Route
+      path={URLS.USER_PATTERN}
+      element={
+        <Can I="update" a="User">
+          <AdminSettingsLayout>
+            <EditUser />
+          </AdminSettingsLayout>
+        </Can>
+      }
+    />
+
+    <Route
+      path={URLS.ROLES}
+      element={
+        <Can I="read" a="Role">
+          <AdminSettingsLayout>
+            <Roles />
+          </AdminSettingsLayout>
+        </Can>
+      }
+    />
+
+    <Route
+      path={URLS.CREATE_ROLE}
+      element={
+        <Can I="create" a="Role">
+          <AdminSettingsLayout>
+            <CreateRole />
+          </AdminSettingsLayout>
+        </Can>
+      }
+    />
+
+    <Route
+      path={URLS.ROLE_PATTERN}
+      element={
+        <Can I="update" a="Role">
+          <AdminSettingsLayout>
+            <EditRole />
+          </AdminSettingsLayout>
+        </Can>
+      }
+    />
+
+    <Route
+      path={URLS.ADMIN_SETTINGS}
+      element={<Navigate to={URLS.USERS} replace />}
+    />
+  </>
+);

packages/web/src/components/AccountDropdownMenu/index.tsx

@@ -4,6 +4,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Menu, { MenuProps } from '@mui/material/Menu';
 import { Link } from 'react-router-dom';
 
+import Can from 'components/Can';
 import apolloClient from 'graphql/client';
 import * as URLS from 'config/urls';
 import useAuthentication from 'hooks/useAuthentication';
@@ -54,6 +55,15 @@ function AccountDropdownMenu(
         {formatMessage('accountDropdownMenu.settings')}
       </MenuItem>
 
+      <Can I="read" a="User">
+        <MenuItem
+          component={Link}
+          to={URLS.ADMIN_SETTINGS_DASHBOARD}
+        >
+          {formatMessage('accountDropdownMenu.adminSettings')}
+        </MenuItem>
+      </Can>
+
       <MenuItem onClick={logout} data-test="logout-item">
         {formatMessage('accountDropdownMenu.logout')}
       </MenuItem>

packages/web/src/components/AddAppConnection/index.tsx

@@ -12,7 +12,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import computeAuthStepVariables from 'helpers/computeAuthStepVariables';
 import { processStep } from 'helpers/authenticationSteps';
 import InputCreator from 'components/InputCreator';
-import { generateExternalLink } from '../../helpers/translation-values';
+import { generateExternalLink } from '../../helpers/translationValues';
 import { Form } from './style';
 
 type AddAppConnectionProps = {

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>
+    </>
+  );
+}

packages/web/src/components/Can/index.tsx

@@ -0,0 +1,22 @@
+import { Can as OriginalCan } from '@casl/react';
+import * as React from 'react';
+
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+
+type CanProps = {
+  I: string;
+  a: string;
+  passThrough?: boolean;
+  children: React.ReactNode | ((isAllowed: boolean) => React.ReactNode);
+} | {
+  I: string;
+  an: string;
+  passThrough?: boolean;
+  children: React.ReactNode | ((isAllowed: boolean) => React.ReactNode);
+};
+
+export default function Can(props: CanProps) {
+  const currentUserAbility = useCurrentUserAbility();
+
+  return (<OriginalCan ability={currentUserAbility} {...props} />);
+};

packages/web/src/components/ConditionalIconButton/index.tsx

@@ -19,6 +19,8 @@ export default function ConditionalIconButton(props: any): React.ReactElement {
         type={buttonProps.type}
         size={buttonProps.size}
         component={buttonProps.component}
+        to={buttonProps.to}
+        disabled={buttonProps.disabled}
       >
         {icon}
       </IconButton>

packages/web/src/components/ConditionalIconButton/style.ts

@@ -2,7 +2,7 @@ import { styled } from '@mui/material/styles';
 import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
 
 export const IconButton = styled(MuiIconButton)`
-  &.${iconButtonClasses.colorPrimary} {
+  &.${iconButtonClasses.colorPrimary}:not(.${iconButtonClasses.disabled}) {
     background: ${({ theme }) => theme.palette.primary.main};
     color: ${({ theme }) => theme.palette.primary.contrastText};
 

packages/web/src/components/ConfirmationDialog/index.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+type ConfirmationDialogProps = {
+  onClose: () => void;
+  onConfirm: () => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  cancelButtonChildren: React.ReactNode;
+  confirmButtionChildren: React.ReactNode;
+  open?: boolean;
+}
+
+export default function ConfirmationDialog(props: ConfirmationDialogProps) {
+  const {
+    onClose,
+    onConfirm,
+    title,
+    description,
+    cancelButtonChildren,
+    confirmButtionChildren,
+    open = true,
+  } = props;
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      {title && (
+        <DialogTitle>
+          {title}
+        </DialogTitle>
+      )}
+      {description && (
+        <DialogContent>
+          <DialogContentText>
+            {description}
+          </DialogContentText>
+        </DialogContent>
+      )}
+
+      <DialogActions>
+        {(cancelButtonChildren && onClose) && (
+          <Button onClick={onClose}>{cancelButtonChildren}</Button>
+        )}
+
+        {(confirmButtionChildren && onConfirm) && (
+          <Button onClick={onConfirm} color="error">
+            {confirmButtionChildren}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}

packages/web/src/components/ControlledCheckbox/index.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+
+type ControlledCheckboxProps = {
+  name: string;
+} & CheckboxProps;
+
+export default function ControlledCheckbox(props: ControlledCheckboxProps): React.ReactElement {
+  const { control } = useFormContext();
+  const {
+    required,
+    name,
+    defaultValue = false,
+    disabled = false,
+    onBlur,
+    onChange,
+    ...checkboxProps
+  } = props;
+
+  return (
+    <Controller
+      rules={{ required }}
+      name={name}
+      defaultValue={defaultValue}
+      control={control}
+      render={({
+        field: {
+          ref,
+          onChange: controllerOnChange,
+          onBlur: controllerOnBlur,
+          value,
+          name,
+          ...field
+        },
+      }) => {
+       return (
+        <Checkbox
+          {...checkboxProps}
+          {...field}
+          checked={!!value}
+          name={name}
+          disabled={disabled}
+          onChange={(...args) => {
+            controllerOnChange(...args);
+            onChange?.(...args);
+          }}
+          onBlur={(...args) => {
+            controllerOnBlur();
+            onBlur?.(...args);
+          }}
+          inputRef={ref}
+        />
+      )}}
+    />
+  );
+}

packages/web/src/components/DeleteAccountDialog/index.ee.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
 
 import * as URLS from 'config/urls';
+import ConfirmationDialog from 'components/ConfirmationDialog';
 import apolloClient from 'graphql/client';
-import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
+import { DELETE_CURRENT_USER } from 'graphql/mutations/delete-current-user.ee';
 import useAuthentication from 'hooks/useAuthentication';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
@@ -20,37 +15,29 @@ type DeleteAccountDialogProps = {
 }
 
 export default function DeleteAccountDialog(props: DeleteAccountDialogProps) {
-  const [deleteUser] = useMutation(DELETE_USER);
+  const [deleteCurrentUser] = useMutation(DELETE_CURRENT_USER);
   const formatMessage = useFormatMessage();
   const currentUser = useCurrentUser();
   const authentication = useAuthentication();
   const navigate = useNavigate();
 
   const handleConfirm = React.useCallback(async () => {
-    await deleteUser();
+    await deleteCurrentUser();
 
     authentication.updateToken('');
     await apolloClient.clearStore();
 
     navigate(URLS.LOGIN);
-  }, [deleteUser, currentUser]);
+  }, [deleteCurrentUser, currentUser]);
 
   return (
-    <Dialog open onClose={props.onClose}>
-      <DialogTitle >
-        {formatMessage('deleteAccountDialog.title')}
-      </DialogTitle>
-      <DialogContent>
-        <DialogContentText id="alert-dialog-description">
-          {formatMessage('deleteAccountDialog.description')}
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={props.onClose}>{formatMessage('deleteAccountDialog.cancel')}</Button>
-        <Button onClick={handleConfirm} color="error">
-          {formatMessage('deleteAccountDialog.confirm')}
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <ConfirmationDialog
+      title={formatMessage('deleteAccountDialog.title')}
+      description={formatMessage('deleteAccountDialog.description')}
+      onClose={props.onClose}
+      onConfirm={handleConfirm}
+      cancelButtonChildren={formatMessage('deleteAccountDialog.cancel')}
+      confirmButtionChildren={formatMessage('deleteAccountDialog.confirm')}
+    />
   );
 }

packages/web/src/components/DeleteRoleButton/index.ee.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import Can from 'components/Can';
+import ConfirmationDialog from 'components/ConfirmationDialog';
+import { DELETE_ROLE } from 'graphql/mutations/delete-role.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type DeleteRoleButtonProps = {
+  disabled?: boolean;
+  roleId: string;
+}
+
+export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
+  const { disabled, roleId } = props;
+  const [showConfirmation, setShowConfirmation] = React.useState(false);
+  const [deleteRole] = useMutation(DELETE_ROLE, {
+    variables: { input: { id: roleId } },
+    refetchQueries: ['GetRoles'],
+  });
+  const formatMessage = useFormatMessage();
+
+  const handleConfirm = React.useCallback(async () => {
+    await deleteRole();
+
+    setShowConfirmation(false);
+  }, [deleteRole]);
+
+  return (
+    <>
+      <Can I="delete" a="Role" passThrough>
+        {allowed => (
+          <IconButton
+            disabled={!allowed || disabled}
+            onClick={() => setShowConfirmation(true)}
+            size="small"
+          >
+            <DeleteIcon />
+          </IconButton>
+        )}
+      </Can>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        title={formatMessage('deleteRoleButton.title')}
+        description={formatMessage('deleteRoleButton.description')}
+        onClose={() => setShowConfirmation(false)}
+        onConfirm={handleConfirm}
+        cancelButtonChildren={formatMessage('deleteRoleButton.cancel')}
+        confirmButtionChildren={formatMessage('deleteRoleButton.confirm')}
+      />
+    </>
+  );
+}

packages/web/src/components/DeleteUserButton/index.ee.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import ConfirmationDialog from 'components/ConfirmationDialog';
+import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type DeleteUserButtonProps = {
+  userId: string;
+}
+
+export default function DeleteUserButton(props: DeleteUserButtonProps) {
+  const { userId } = props;
+  const [showConfirmation, setShowConfirmation] = React.useState(false);
+  const [deleteUser] = useMutation(DELETE_USER, {
+    variables: { input: { id: userId } },
+    refetchQueries: ['GetUsers'],
+  });
+  const formatMessage = useFormatMessage();
+
+  const handleConfirm = React.useCallback(async () => {
+    await deleteUser();
+
+    setShowConfirmation(false);
+  }, [deleteUser]);
+
+  return (
+    <>
+      <IconButton onClick={() => setShowConfirmation(true)} size="small">
+        <DeleteIcon />
+      </IconButton>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        title={formatMessage('deleteUserButton.title')}
+        description={formatMessage('deleteUserButton.description')}
+        onClose={() => setShowConfirmation(false)}
+        onConfirm={handleConfirm}
+        cancelButtonChildren={formatMessage('deleteUserButton.cancel')}
+        confirmButtionChildren={formatMessage('deleteUserButton.confirm')}
+      />
+    </>
+  );
+}

packages/web/src/components/FlowContextMenu/index.tsx

@@ -6,6 +6,7 @@ import type { PopoverProps } from '@mui/material/Popover';
 import MenuItem from '@mui/material/MenuItem';
 import { useSnackbar } from 'notistack';
 
+import Can from 'components/Can';
 import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
 import * as URLS from 'config/urls';
@@ -72,13 +73,39 @@ export default function ContextMenu(
       hideBackdrop={false}
       anchorEl={anchorEl}
     >
-      <MenuItem component={Link} to={URLS.FLOW(flowId)}>
-        {formatMessage('flow.view')}
-      </MenuItem>
+      <Can I="read" a="Flow" passThrough>
+        {(allowed) => (
+          <MenuItem
+            disabled={!allowed}
+            component={Link}
+            to={URLS.FLOW(flowId)}
+          >
+            {formatMessage('flow.view')}
+          </MenuItem>
+        )}
+      </Can>
 
-      <MenuItem onClick={onFlowDuplicate}>{formatMessage('flow.duplicate')}</MenuItem>
+      <Can I="create" a="Flow" passThrough>
+        {(allowed) => (
+          <MenuItem
+            disabled={!allowed}
+            onClick={onFlowDuplicate}
+          >
+            {formatMessage('flow.duplicate')}
+          </MenuItem>
+        )}
+      </Can>
 
-      <MenuItem onClick={onFlowDelete}>{formatMessage('flow.delete')}</MenuItem>
+      <Can I="delete" a="Flow" passThrough>
+        {(allowed) => (
+          <MenuItem
+            disabled={!allowed}
+            onClick={onFlowDelete}
+          >
+            {formatMessage('flow.delete')}
+          </MenuItem>
+        )}
+      </Can>
     </Menu>
   );
 }

packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.tsx

@@ -0,0 +1,142 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { IPermissionCatalog } from '@automatisch/types';
+import ControlledCheckbox from 'components/ControlledCheckbox';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type PermissionSettingsProps = {
+  onClose: () => void;
+  fieldPrefix: string;
+  subject: string;
+  actions: IPermissionCatalog['actions'];
+  conditions: IPermissionCatalog['conditions'];
+}
+
+export default function PermissionSettings(props: PermissionSettingsProps) {
+  const {
+    onClose,
+    fieldPrefix,
+    subject,
+    actions,
+    conditions,
+  } = props;
+
+  const formatMessage = useFormatMessage();
+  const { getValues, resetField } = useFormContext();
+
+  const cancel = () => {
+    for (const action of actions) {
+      for (const condition of conditions) {
+        const fieldName = `${fieldPrefix}.${action.key}.conditions.${condition.key}`;
+        resetField(fieldName);
+      }
+    }
+
+    onClose();
+  }
+
+  const apply = () => {
+    for (const action of actions) {
+      for (const condition of conditions) {
+        const fieldName = `${fieldPrefix}.${action.key}.conditions.${condition.key}`;
+        const value = getValues(fieldName);
+        resetField(fieldName, { defaultValue: value });
+      }
+    }
+
+    onClose();
+  }
+
+  return (
+    <Dialog open onClose={cancel}>
+      <DialogTitle>
+        {formatMessage('permissionSettings.title')}
+      </DialogTitle>
+
+      <DialogContent>
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell component="th" />
+
+                {actions.map(action => (
+                  <TableCell component="th" key={action.key}>
+                    <Typography
+                      variant="subtitle1"
+                      align="center"
+                      sx={{
+                        color: 'text.secondary',
+                        fontWeight: 700
+                      }}
+                    >
+                      {action.label}
+                    </Typography>
+                  </TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {conditions.map((condition) => (
+                <TableRow
+                  key={condition.key}
+                  sx={{ '&:last-child td': { border: 0 } }}
+                >
+                  <TableCell scope="row">
+                    <Typography
+                      variant="subtitle2"
+                    >
+                      {condition.label}
+                    </Typography>
+                  </TableCell>
+
+                  {actions.map((action) => (
+                    <TableCell
+                      key={`${action.key}.${condition.key}`}
+                      align="center"
+                    >
+                      <Typography
+                        variant="subtitle2"
+                      >
+                        {action.subjects.includes(subject) && (
+                          <ControlledCheckbox
+                            name={`${fieldPrefix}.${action.key}.conditions.${condition.key}`}
+                            disabled={getValues(`${fieldPrefix}.${action.key}.value`) !== true}
+                          />
+                        )}
+
+                        {!action.subjects.includes(subject) && '-'}
+                      </Typography>
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={cancel}>{formatMessage('permissionSettings.cancel')}</Button>
+
+        <Button onClick={apply} color="error">
+          {formatMessage('permissionSettings.apply')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

packages/web/src/components/PermissionCatalogField/index.ee.tsx

@@ -0,0 +1,122 @@
+import SettingsIcon from '@mui/icons-material/Settings';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+
+import ControlledCheckbox from 'components/ControlledCheckbox';
+import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
+import PermissionSettings from './PermissionSettings.ee';
+
+type PermissionCatalogFieldProps = {
+  name?: string;
+  disabled?: boolean;
+};
+
+const PermissionCatalogField = ({ name = 'permissions', disabled = false }: PermissionCatalogFieldProps) => {
+  const permissionCatalog = usePermissionCatalog();
+  const [dialogName, setDialogName] = React.useState<string>();
+
+  if (!permissionCatalog) return (<React.Fragment />);
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell component="th" />
+
+            {permissionCatalog.actions.map(action => (
+              <TableCell component="th" key={action.key}>
+                <Typography
+                  variant="subtitle1"
+                  align="center"
+                  sx={{
+                    color: 'text.secondary',
+                    fontWeight: 700
+                  }}
+                >
+                  {action.label}
+                </Typography>
+              </TableCell>
+            ))}
+
+            <TableCell component="th" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {permissionCatalog.subjects.map((subject) => (
+            <TableRow
+              key={subject.key}
+              sx={{ '&:last-child td': { border: 0 } }}
+            >
+              <TableCell scope="row">
+                <Typography
+                  variant="subtitle2"
+                >
+                  {subject.label}
+                </Typography>
+              </TableCell>
+
+              {permissionCatalog.actions.map((action) => (
+                <TableCell
+                  key={`${subject.key}.${action.key}`}
+                  align="center"
+                >
+                  <Typography
+                    variant="subtitle2"
+                  >
+                    {action.subjects.includes(subject.key) && (
+                      <ControlledCheckbox
+                        disabled={disabled}
+                        name={`${name}.${subject.key}.${action.key}.value`}
+                      />
+                    )}
+
+                    {!action.subjects.includes(subject.key) && '-'}
+                  </Typography>
+                </TableCell>
+              ))}
+
+              <TableCell>
+                <Stack
+                  direction="row"
+                  gap={1}
+                  justifyContent="right"
+                >
+                  <IconButton
+                    color="info"
+                    size="small"
+                    onClick={() => setDialogName(subject.key)}
+                    disabled={disabled}
+                  >
+                    <SettingsIcon />
+                  </IconButton>
+
+                  {dialogName === subject.key && (
+                    <PermissionSettings
+                      onClose={() => setDialogName('')}
+                      fieldPrefix={`${name}.${subject.key}`}
+                      subject={subject.key}
+                      actions={permissionCatalog.actions}
+                      conditions={permissionCatalog.conditions}
+                    />
+                  )}
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+};
+
+export default PermissionCatalogField;

packages/web/src/components/RoleList/index.ee.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+
+import DeleteRoleButton from 'components/DeleteRoleButton/index.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useRoles from 'hooks/useRoles.ee';
+import * as URLS from 'config/urls';
+
+// TODO: introduce interaction feedback upon deletion (successful + failure)
+// TODO: introduce loading bar
+export default function RoleList(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const { roles } = useRoles();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('roleList.name')}
+              </Typography>
+            </TableCell>
+
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('roleList.description')}
+              </Typography>
+            </TableCell>
+
+            <TableCell component="th" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {roles.map((role) => (
+            <TableRow
+              key={role.id}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell scope="row">
+                <Typography
+                  variant="subtitle2"
+                >
+                  {role.name}
+                </Typography>
+              </TableCell>
+
+              <TableCell scope="row">
+                <Typography
+                  variant="subtitle2"
+                >
+                  {role.description}
+                </Typography>
+              </TableCell>
+
+              <TableCell>
+                <Stack direction="row" gap={1} justifyContent="right">
+                  <IconButton
+                    size="small"
+                    component={Link}
+                    to={URLS.ROLE(role.id)}
+                  >
+                    <EditIcon />
+                  </IconButton>
+
+                  <DeleteRoleButton
+                    disabled={role.isAdmin}
+                    roleId={role.id}
+                  />
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

packages/web/src/components/SignUpForm/index.ee.tsx

@@ -9,7 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 
 import useAuthentication from 'hooks/useAuthentication';
 import * as URLS from 'config/urls';
-import { CREATE_USER } from 'graphql/mutations/create-user.ee';
+import { REGISTER_USER } from 'graphql/mutations/register-user.ee';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import { LOGIN } from 'graphql/mutations/login';
@@ -40,7 +40,7 @@ function SignUpForm() {
   const navigate = useNavigate();
   const authentication = useAuthentication();
   const formatMessage = useFormatMessage();
-  const [createUser, { loading: createUserLoading }] = useMutation(CREATE_USER);
+  const [registerUser, { loading: registerUserLoading }] = useMutation(REGISTER_USER);
   const [login, { loading: loginLoading }] = useMutation(LOGIN);
 
   React.useEffect(() => {
@@ -51,7 +51,7 @@ function SignUpForm() {
 
   const handleSubmit = async (values: any) => {
     const { fullName, email, password } = values;
-    await createUser({
+    await registerUser({
       variables: {
         input: { fullName, email, password },
       },
@@ -165,7 +165,7 @@ function SignUpForm() {
               variant="contained"
               color="primary"
               sx={{ boxShadow: 2, mt: 3 }}
-              loading={createUserLoading || loginLoading}
+              loading={registerUserLoading || loginLoading}
               fullWidth
               data-test="signUp-button"
             >

packages/web/src/components/SsoProviders/index.ee.tsx

@@ -4,7 +4,7 @@ import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 
-import appConfig from 'config/app';
+import * as URLS from 'config/urls';
 import useSamlAuthProviders from 'hooks/useSamlAuthProviders.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 
@@ -24,10 +24,12 @@ function SsoProviders() {
             <Button
               key={provider.id}
               component="a"
-              href={`${appConfig.apiUrl}/login/saml/${provider.issuer}`}
+              href={URLS.SSO_LOGIN(provider.issuer)}
               variant="outlined"
             >
-              {provider.name}
+              {formatMessage('ssoProviders.loginWithProvider', {
+                providerName: provider.name
+              })}
             </Button>
           ))}
         </Stack>

packages/web/src/components/TrialOverAlert/index.ee.tsx

@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
 
 import * as URLS from 'config/urls';
-import { generateInternalLink } from 'helpers/translation-values';
+import { generateInternalLink } from 'helpers/translationValues';
 import useTrialStatus from 'hooks/useTrialStatus.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 

packages/web/src/components/UpgradeFreeTrial/index.ee.tsx

@@ -58,7 +58,7 @@ export default function UpgradeFreeTrial() {
             alignItems="stretch"
           >
             <TableContainer component={Paper}>
-              <Table aria-label="simple table">
+              <Table>
                 <TableHead
                   sx={{
                     backgroundColor: (theme) =>

packages/web/src/components/UserList/index.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+
+import DeleteUserButton from 'components/DeleteUserButton/index.ee';
+import useUsers from 'hooks/useUsers';
+import useFormatMessage from 'hooks/useFormatMessage';
+import * as URLS from 'config/urls';
+
+// TODO: introduce interaction feedback upon deletion (successful + failure)
+// TODO: introduce loading bar
+export default function UserList(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const { users, loading } = useUsers();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('userList.fullName')}
+              </Typography>
+            </TableCell>
+
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('userList.email')}
+              </Typography>
+            </TableCell>
+
+            <TableCell component="th" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {users.map((user) => (
+            <TableRow
+              key={user.id}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell scope="row">
+                <Typography
+                  variant="subtitle2"
+                >
+                  {user.fullName}
+                </Typography>
+              </TableCell>
+
+              <TableCell>
+                <Typography
+                  variant="subtitle2"
+                >
+                  {user.email}
+                </Typography>
+              </TableCell>
+
+              <TableCell>
+                <Stack direction="row" gap={1} justifyContent="right">
+                  <IconButton
+                    size="small"
+                    component={Link}
+                    to={URLS.USER(user.id)}
+                  >
+                    <EditIcon />
+                  </IconButton>
+
+                  <DeleteUserButton userId={user.id} />
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

packages/web/src/components/WebhookUrlInfo/index.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import Typography from '@mui/material/Typography';
 import type { AlertProps } from '@mui/material/Alert';
 
-import { generateExternalLink } from '../../helpers/translation-values';
+import { generateExternalLink } from '../../helpers/translationValues';
 import { WEBHOOK_DOCS } from '../../config/urls';
 import TextField from '../TextField';
 import { Alert } from './style';

packages/web/src/components/WebhookUrlInfo/style.ts

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material/styles';
 import MuiAlert, { alertClasses } from '@mui/material/Alert';
 
-export const Alert = styled(MuiAlert)(({ theme }) => ({
+export const Alert = styled(MuiAlert)(() => ({
   [`&.${alertClasses.root}`]: {
     fontWeight: 300,
     width: '100%',

packages/web/src/config/urls.ts

@@ -1,36 +1,39 @@
+import appConfig from './app';
+
 export const CONNECTIONS = '/connections';
 export const EXECUTIONS = '/executions';
 export const EXECUTION_PATTERN = '/executions/:executionId';
-export const EXECUTION = (executionId: string): string =>
+export const EXECUTION = (executionId: string) =>
   `/executions/${executionId}`;
 
 export const LOGIN = '/login';
 export const LOGIN_CALLBACK = `${LOGIN}/callback`;
+export const SSO_LOGIN = (issuer: string) => `${appConfig.apiUrl}/login/saml/${issuer}`;
 export const SIGNUP = '/sign-up';
 export const FORGOT_PASSWORD = '/forgot-password';
 export const RESET_PASSWORD = '/reset-password';
 
 export const APPS = '/apps';
 export const NEW_APP_CONNECTION = '/apps/new';
-export const APP = (appKey: string): string => `/app/${appKey}`;
+export const APP = (appKey: string) => `/app/${appKey}`;
 export const APP_PATTERN = '/app/:appKey';
-export const APP_CONNECTIONS = (appKey: string): string =>
+export const APP_CONNECTIONS = (appKey: string) =>
   `/app/${appKey}/connections`;
 export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
-export const APP_ADD_CONNECTION = (appKey: string): string =>
+export const APP_ADD_CONNECTION = (appKey: string) =>
   `/app/${appKey}/connections/add`;
 export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
 export const APP_RECONNECT_CONNECTION = (
   appKey: string,
   connectionId: string
-): string => `/app/${appKey}/connections/${connectionId}/reconnect`;
+) => `/app/${appKey}/connections/${connectionId}/reconnect`;
 export const APP_RECONNECT_CONNECTION_PATTERN =
   '/app/:appKey/connections/:connectionId/reconnect';
-export const APP_FLOWS = (appKey: string): string => `/app/${appKey}/flows`;
+export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
 export const APP_FLOWS_FOR_CONNECTION = (
   appKey: string,
   connectionId: string
-): string => `/app/${appKey}/flows?connectionId=${connectionId}`;
+) => `/app/${appKey}/flows?connectionId=${connectionId}`;
 export const APP_FLOWS_PATTERN = '/app/:appKey/flows';
 
 export const EDITOR = '/editor';
@@ -55,11 +58,11 @@ export const CREATE_FLOW_WITH_APP_AND_CONNECTION = (
 
   return `/editor/create?${searchParams}`;
 };
-export const FLOW_EDITOR = (flowId: string): string => `/editor/${flowId}`;
+export const FLOW_EDITOR = (flowId: string) => `/editor/${flowId}`;
 
 export const FLOWS = '/flows';
 // TODO: revert this back to /flows/:flowId once we have a proper single flow page
-export const FLOW = (flowId: string): string => `/editor/${flowId}`;
+export const FLOW = (flowId: string) => `/editor/${flowId}`;
 export const FLOW_PATTERN = '/flows/:flowId';
 
 export const SETTINGS = '/settings';
@@ -72,6 +75,17 @@ export const SETTINGS_PROFILE = `${SETTINGS}/${PROFILE}`;
 export const SETTINGS_BILLING_AND_USAGE = `${SETTINGS}/${BILLING_AND_USAGE}`;
 export const SETTINGS_PLAN_UPGRADE = `${SETTINGS_BILLING_AND_USAGE}/${PLAN_UPGRADE}`;
 
+export const ADMIN_SETTINGS = '/admin-settings';
+export const ADMIN_SETTINGS_DASHBOARD = ADMIN_SETTINGS;
+export const USERS = `${ADMIN_SETTINGS}/users`;
+export const USER = (userId: string) => `${USERS}/${userId}`;
+export const USER_PATTERN = `${USERS}/:userId`;
+export const CREATE_USER = `${USERS}/create`;
+export const ROLES = `${ADMIN_SETTINGS}/roles`;
+export const ROLE = (roleId: string) => `${ROLES}/${roleId}`;
+export const ROLE_PATTERN = `${ROLES}/:roleId`;
+export const CREATE_ROLE = `${ROLES}/create`;
+
 export const DASHBOARD = FLOWS;
 
 // External links

packages/web/src/graphql/mutations/create-role.ee.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_ROLE = gql`
+  mutation CreateRole($input: CreateRoleInput) {
+    createRole(input: $input) {
+      id
+      key
+      name
+      description
+    }
+  }
+`;

packages/web/src/graphql/mutations/create-user.ee.ts

@@ -3,8 +3,12 @@ import { gql } from '@apollo/client';
 export const CREATE_USER = gql`
   mutation CreateUser($input: CreateUserInput) {
     createUser(input: $input) {
+      id
       email
       fullName
+      role {
+        id
+      }
     }
   }
 `;

packages/web/src/graphql/mutations/delete-current-user.ee.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_CURRENT_USER = gql`
+  mutation DeleteCurrentUser {
+    deleteCurrentUser
+  }
+`;

packages/web/src/graphql/mutations/delete-role.ee.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_ROLE = gql`
+  mutation DeleteRole($input: DeleteRoleInput) {
+    deleteRole(input: $input)
+  }
+`;

packages/web/src/graphql/mutations/delete-user.ee.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const DELETE_USER = gql`
-  mutation DeleteUser {
-    deleteUser
+  mutation DeleteUser($input: DeleteUserInput) {
+    deleteUser(input: $input)
   }
 `;

packages/web/src/graphql/mutations/register-user.ee.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const REGISTER_USER = gql`
+  mutation RegisterUser($input: RegisterUserInput) {
+    registerUser(input: $input) {
+      id
+      email
+      fullName
+    }
+  }
+`;

packages/web/src/graphql/mutations/update-current-user.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_CURRENT_USER = gql`
+  mutation UpdateCurrentUser($input: UpdateCurrentUserInput) {
+    updateCurrentUser(input: $input) {
+      id
+      fullName
+      email
+    }
+  }
+`;

packages/web/src/graphql/mutations/update-role.ee.ts

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_ROLE = gql`
+  mutation UpdateRole($input: UpdateRoleInput) {
+    updateRole(input: $input) {
+      id
+      name
+      description
+      permissions {
+        id
+        action
+        subject
+        conditions
+      }
+    }
+  }
+`;

packages/web/src/graphql/mutations/update-user.ee.ts

@@ -4,8 +4,8 @@ export const UPDATE_USER = gql`
   mutation UpdateUser($input: UpdateUserInput) {
     updateUser(input: $input) {
       id
-      fullName
       email
+      fullName
     }
   }
 `;

packages/web/src/graphql/queries/get-current-user.ts

@@ -6,6 +6,16 @@ export const GET_CURRENT_USER = gql`
       id
       fullName
       email
+      role {
+        id
+        isAdmin
+      }
+      permissions {
+        id
+        action
+        subject
+        conditions
+      }
     }
   }
 `;

packages/web/src/graphql/queries/get-permission-catalog.ee.ts

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+export const GET_PERMISSION_CATALOG = gql`
+  query GetPermissionCatalog {
+    getPermissionCatalog {
+      subjects {
+        key
+        label
+      }
+      conditions {
+        key
+        label
+      }
+      actions {
+        label
+        key
+        subjects
+      }
+    }
+  }
+`;

packages/web/src/graphql/queries/get-role.ee.ts

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+export const GET_ROLE = gql`
+  query GetRole($id: String!) {
+    getRole(id: $id) {
+      id
+      key
+      name
+      description
+      isAdmin
+      permissions {
+        id
+        action
+        subject
+        conditions
+      }
+    }
+  }
+`;

packages/web/src/graphql/queries/get-roles.ee.ts

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+
+export const GET_ROLES = gql`
+  query GetRoles {
+    getRoles {
+      id
+      key
+      name
+      description
+      isAdmin
+    }
+  }
+`;

packages/web/src/graphql/queries/get-user.ts

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+export const GET_USER = gql`
+  query GetUser($id: String!) {
+    getUser(id: $id) {
+      id
+      fullName
+      email
+      role {
+        id
+        key
+        name
+        isAdmin
+      }
+      createdAt
+      updatedAt
+    }
+  }
+`;

packages/web/src/graphql/queries/get-users.ts

@@ -0,0 +1,29 @@
+import { gql } from '@apollo/client';
+
+export const GET_USERS = gql`
+  query GetUsers(
+    $limit: Int!
+    $offset: Int!
+  ) {
+    getUsers(
+      limit: $limit
+      offset: $offset
+    ) {
+      pageInfo {
+        currentPage
+        totalPages
+      }
+      edges {
+        node {
+          id
+          fullName
+          email
+          role {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+`;

packages/web/src/helpers/computePermissions.ee.ts

@@ -0,0 +1,59 @@
+import { IRole, IPermission } from '@automatisch/types';
+
+type ComputeAction = {
+  conditions: Record<string, boolean>;
+  value: boolean;
+}
+type ComputedActions = Record<string, ComputeAction>;
+type ComputedPermissions = Record<string, ComputedActions>;
+export type RoleWithComputedPermissions = IRole & { computedPermissions: ComputedPermissions };
+
+export function getRoleWithComputedPermissions(role: IRole): RoleWithComputedPermissions {
+  const computedPermissions = role.permissions.reduce((computedPermissions, permission) => ({
+    ...computedPermissions,
+    [permission.subject]: {
+      ...(computedPermissions[permission.subject] || {}),
+      [permission.action]: {
+        conditions: Object.fromEntries(permission
+          .conditions
+          .map(condition => [condition, true])),
+        value: true,
+      },
+    }
+  }), {} as ComputedPermissions);
+
+  return {
+    ...role,
+    computedPermissions,
+  };
+}
+
+export function getPermissions(computedPermissions?: ComputedPermissions) {
+  if (!computedPermissions) return [];
+
+  return Object
+    .entries(computedPermissions)
+    .reduce((permissions, computedPermissionEntry) => {
+      const [subject, actionsWithConditions] = computedPermissionEntry;
+
+      for (const action in actionsWithConditions) {
+        const {
+          value: permitted,
+          conditions = {},
+        } = actionsWithConditions[action];
+
+        if (permitted) {
+          permissions.push({
+            action,
+            subject,
+            conditions: Object
+              .entries(conditions)
+              .filter(([, enabled]) => enabled)
+              .map(([condition]) => condition),
+          })
+        }
+      }
+
+      return permissions;
+    }, [] as Partial<IPermission>[]);
+}

packages/web/src/helpers/userAbility.ts

@@ -0,0 +1,20 @@
+import { PureAbility, fieldPatternMatcher, mongoQueryMatcher } from '@casl/ability';
+import { IUser } from '@automatisch/types';
+
+// Must be kept in sync with `packages/backend/src/helpers/user-ability.ts`!
+export default function userAbility(user: IUser) {
+  const permissions = user?.permissions;
+  const role = user?.role;
+
+  // We're not using mongo, but our fields, conditions match
+  const options = {
+    conditionsMatcher: mongoQueryMatcher,
+    fieldMatcher: fieldPatternMatcher
+  };
+
+  if (!role || !permissions) {
+    return new PureAbility([], options);
+  }
+
+  return new PureAbility<[string, string], string[]>(permissions, options);
+}

packages/web/src/hooks/useCurrentUserAbility.ts

@@ -0,0 +1,8 @@
+import userAbility from 'helpers/userAbility';
+import useCurrentUser from 'hooks/useCurrentUser';
+
+export default function useCurrentUserAbility() {
+  const currentUser = useCurrentUser();
+
+  return userAbility(currentUser);
+}

packages/web/src/hooks/usePermissionCatalog.ee.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@apollo/client';
+import { IPermissionCatalog } from '@automatisch/types';
+
+import { GET_PERMISSION_CATALOG } from 'graphql/queries/get-permission-catalog.ee';
+
+export default function usePermissionCatalog(): IPermissionCatalog {
+  const { data } = useQuery(GET_PERMISSION_CATALOG);
+
+  return data?.getPermissionCatalog;
+}

packages/web/src/hooks/useRole.ee.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useLazyQuery } from '@apollo/client';
+import { IRole } from '@automatisch/types';
+
+import { GET_ROLE } from 'graphql/queries/get-role.ee';
+
+type QueryResponse = {
+  getRole: IRole;
+}
+
+export default function useRole(roleId?: string) {
+  const [getRole, { data, loading }] = useLazyQuery<QueryResponse>(GET_ROLE);
+
+  React.useEffect(() => {
+    if (roleId) {
+      getRole({
+        variables: {
+          id: roleId
+        }
+      });
+    }
+  }, [roleId]);
+
+  return {
+    role: data?.getRole,
+    loading
+  };
+}

packages/web/src/hooks/useRoles.ee.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@apollo/client';
+import { IRole } from '@automatisch/types';
+
+import { GET_ROLES } from 'graphql/queries/get-roles.ee';
+
+type QueryResponse = {
+  getRoles: IRole[];
+}
+
+export default function useRoles() {
+  const { data, loading } = useQuery<QueryResponse>(GET_ROLES, { context: { autoSnackbar: false } });
+
+  return {
+    roles: data?.getRoles || [],
+    loading
+  };
+}

packages/web/src/hooks/useUser.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useLazyQuery } from '@apollo/client';
+import { IUser } from '@automatisch/types';
+
+import { GET_USER } from 'graphql/queries/get-user';
+
+type QueryResponse = {
+  getUser: IUser;
+}
+
+export default function useUser(userId?: string) {
+  const [getUser, { data, loading }] = useLazyQuery<QueryResponse>(GET_USER);
+
+  React.useEffect(() => {
+    if (userId) {
+      getUser({
+        variables: {
+          id: userId
+        }
+      });
+    }
+  }, [userId]);
+
+  return {
+    user: data?.getUser,
+    loading
+  };
+}

packages/web/src/hooks/useUsers.ts

@@ -0,0 +1,33 @@
+import { useQuery } from '@apollo/client';
+import { IUser } from '@automatisch/types';
+
+import { GET_USERS } from 'graphql/queries/get-users';
+
+type Edge = {
+  node: IUser
+}
+
+type QueryResponse = {
+  getUsers: {
+    pageInfo: {
+      currentPage: number;
+      totalPages: number;
+    }
+    edges: Edge[]
+  }
+}
+
+export default function useUsers() {
+  const { data, loading } = useQuery<QueryResponse>(GET_USERS, {
+    variables: {
+      limit: 100,
+      offset: 0
+    }
+  });
+  const users = data?.getUsers.edges.map(({ node }) => node) || [];
+
+  return {
+    users,
+    loading
+  };
+}

packages/web/src/locales/en.json

@@ -2,6 +2,7 @@
   "brandText": "Automatisch",
   "searchPlaceholder": "Search",
   "accountDropdownMenu.settings": "Settings",
+  "accountDropdownMenu.adminSettings": "Admin",
   "accountDropdownMenu.logout": "Logout",
   "drawer.dashboard": "Dashboard",
   "drawer.flows": "Flows",
@@ -12,6 +13,9 @@
   "settingsDrawer.goBack": "Go to the dashboard",
   "settingsDrawer.notifications": "Notifications",
   "settingsDrawer.billingAndUsage": "Billing and usage",
+  "adminSettingsDrawer.users": "Users",
+  "adminSettingsDrawer.roles": "Roles",
+  "adminSettingsDrawer.goBack": "Go to the dashboard",
   "app.connectionCount": "{count} connections",
   "app.flowCount": "{count} flows",
   "app.addConnection": "Add connection",
@@ -130,6 +134,7 @@
   "loginForm.noAccount": "Don't have an Automatisch account yet?",
   "loginForm.signUp": "Sign up",
   "loginPage.divider": "OR",
+  "ssoProviders.loginWithProvider": "Login with {providerName}",
   "forgotPasswordForm.title": "Forgot password",
   "forgotPasswordForm.submit": "Send reset instructions",
   "forgotPasswordForm.instructionsSent": "The instructions have been sent!",
@@ -165,5 +170,38 @@
   "checkoutCompletedAlert.text": "Thank you for upgrading your subscription and supporting our self-funded business!",
   "subscriptionCancelledAlert.text": "Your subscription is cancelled, but you can continue using Automatisch until {date}.",
   "customAutocomplete.noOptions": "No options available.",
-  "powerInputSuggestions.noOptions": "No options available."
+  "powerInputSuggestions.noOptions": "No options available.",
+  "usersPage.title": "User management",
+  "usersPage.createUser": "Create user",
+  "deleteUserButton.title": "Delete user",
+  "deleteUserButton.description": "This will permanently delete the user and all the associated data with it.",
+  "deleteUserButton.cancel": "Cancel",
+  "deleteUserButton.confirm": "Delete",
+  "editUserPage.title": "Edit user",
+  "createUserPage.title": "Create user",
+  "userForm.fullName": "Full name",
+  "userForm.email": "Email",
+  "userForm.role": "Role",
+  "userForm.password": "Password",
+  "createUser.submit": "Create",
+  "editUser.submit": "Update",
+  "userList.fullName": "Full name",
+  "userList.email": "Email",
+  "rolesPage.title": "Role management",
+  "rolesPage.createRole": "Create role",
+  "deleteRoleButton.title": "Delete role",
+  "deleteRoleButton.description": "This will permanently delete the role.",
+  "deleteRoleButton.cancel": "Cancel",
+  "deleteRoleButton.confirm": "Delete",
+  "editRolePage.title": "Edit role",
+  "createRolePage.title": "Create role",
+  "roleForm.name": "Name",
+  "roleForm.description": "Description",
+  "createRole.submit": "Create",
+  "editRole.submit": "Update",
+  "roleList.name": "Name",
+  "roleList.description": "Description",
+  "permissionSettings.cancel": "Cancel",
+  "permissionSettings.apply": "Apply",
+  "permissionSettings.title": "Conditions"
 }

packages/web/src/pages/Application/index.tsx

@@ -10,7 +10,6 @@ import {
   useMatch,
   useNavigate,
 } from 'react-router-dom';
-import type { LinkProps } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Box from '@mui/material/Box';
@@ -67,41 +66,6 @@ export default function Application(): React.ReactElement | null {
   const goToApplicationPage = () => navigate('connections');
   const app = data?.getApp || {};
 
-  const NewConnectionLink = React.useMemo(
-    () =>
-      React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
-        function InlineLink(linkProps, ref) {
-          return (
-            <Link
-              ref={ref}
-              to={URLS.APP_ADD_CONNECTION(appKey)}
-              {...linkProps}
-            />
-          );
-        }
-      ),
-    [appKey]
-  );
-
-  const NewFlowLink = React.useMemo(
-    () =>
-      React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
-        function InlineLink(linkProps, ref) {
-          return (
-            <Link
-              ref={ref}
-              to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
-                appKey,
-                connectionId
-              )}
-              {...linkProps}
-            />
-          );
-        }
-      ),
-    [appKey, connectionId]
-  );
-
   if (loading) return null;
 
   return (
@@ -131,7 +95,11 @@ export default function Application(): React.ReactElement | null {
                       variant="contained"
                       color="primary"
                       size="large"
-                      component={NewFlowLink}
+                      component={Link}
+                      to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
+                        appKey,
+                        connectionId
+                      )}
                       fullWidth
                       icon={<AddIcon />}
                     >
@@ -148,7 +116,8 @@ export default function Application(): React.ReactElement | null {
                       variant="contained"
                       color="primary"
                       size="large"
-                      component={NewConnectionLink}
+                      component={Link}
+                      to={URLS.APP_ADD_CONNECTION(appKey)}
                       fullWidth
                       icon={<AddIcon />}
                       data-test="add-connection-button"

packages/web/src/pages/Applications/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Link, Routes, Route, useNavigate } from 'react-router-dom';
-import type { LinkProps } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
@@ -9,6 +8,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import AddIcon from '@mui/icons-material/Add';
 import type { IApp } from '@automatisch/types';
 
+import Can from 'components/Can';
 import NoResultFound from 'components/NoResultFound';
 import ConditionalIconButton from 'components/ConditionalIconButton';
 import Container from 'components/Container';
@@ -39,16 +39,6 @@ export default function Applications(): React.ReactElement {
     navigate(URLS.APPS);
   }, [navigate]);
 
-  const NewAppConnectionLink = React.useMemo(
-    () =>
-      React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
-        function InlineLink(linkProps, ref) {
-          return <Link ref={ref} to={URLS.NEW_APP_CONNECTION} {...linkProps} />;
-        }
-      ),
-    []
-  );
-
   return (
     <Box sx={{ py: 3 }}>
       <Container>
@@ -69,18 +59,24 @@ export default function Applications(): React.ReactElement {
             alignItems="center"
             order={{ xs: 1, sm: 2 }}
           >
-            <ConditionalIconButton
-              type="submit"
-              variant="contained"
-              color="primary"
-              size="large"
-              component={NewAppConnectionLink}
-              fullWidth
-              icon={<AddIcon />}
-              data-test="add-connection-button"
-            >
-              {formatMessage('apps.addConnection')}
-            </ConditionalIconButton>
+            <Can I="create" a="Connection" passThrough>
+              {(allowed) => (
+                <ConditionalIconButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  component={Link}
+                  to={URLS.NEW_APP_CONNECTION}
+                  fullWidth
+                  disabled={!allowed}
+                  icon={<AddIcon />}
+                  data-test="add-connection-button"
+                >
+                  {formatMessage('apps.addConnection')}
+                </ConditionalIconButton>
+              )}
+            </Can>
           </Grid>
         </Grid>
 

packages/web/src/pages/CreateRole/index.ee.tsx

@@ -0,0 +1,82 @@
+import { useMutation } from '@apollo/client';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
+
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
+import TextField from 'components/TextField';
+import * as URLS from 'config/urls';
+import { CREATE_ROLE } from 'graphql/mutations/create-role.ee';
+import {
+  RoleWithComputedPermissions,
+  getPermissions,
+} from 'helpers/computePermissions.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+export default function CreateRole(): React.ReactElement {
+  const navigate = useNavigate();
+  const formatMessage = useFormatMessage();
+  const [createRole, { loading }] = useMutation(CREATE_ROLE);
+
+  const handleRoleCreation = async (roleData: Partial<RoleWithComputedPermissions>) => {
+    const permissions = getPermissions(roleData.computedPermissions);
+
+    await createRole({
+      variables: {
+        input: {
+          name: roleData.name,
+          description: roleData.description,
+          permissions,
+        }
+      }
+    });
+
+    navigate(URLS.ROLES);
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('createRolePage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <Form onSubmit={handleRoleCreation}>
+            <Stack direction="column" gap={2}>
+              <TextField
+                required={true}
+                name="name"
+                label={formatMessage('roleForm.name')}
+                fullWidth
+              />
+
+              <TextField
+                name="description"
+                label={formatMessage('roleForm.description')}
+                fullWidth
+              />
+
+              <PermissionCatalogField name='computedPermissions' />
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                color="primary"
+                sx={{ boxShadow: 2 }}
+                loading={loading}
+              >
+                {formatMessage('createRole.submit')}
+              </LoadingButton>
+            </Stack>
+          </Form>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

packages/web/src/pages/CreateUser/index.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { IUser, IRole } from '@automatisch/types';
+
+import { CREATE_USER } from 'graphql/mutations/create-user.ee';
+import * as URLS from 'config/urls';
+import Can from 'components/Can';
+import useRoles from 'hooks/useRoles.ee';
+import PageTitle from 'components/PageTitle';
+import Form from 'components/Form';
+import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+function generateRoleOptions(roles: IRole[]) {
+  return roles?.map(({ name: label, id: value }) => ({ label, value }));
+}
+
+export default function CreateUser(): React.ReactElement {
+  const navigate = useNavigate();
+  const formatMessage = useFormatMessage();
+  const [createUser, { loading }] = useMutation(CREATE_USER);
+  const { roles, loading: rolesLoading } = useRoles();
+
+  const handleUserCreation = async (userData: Partial<IUser>) => {
+    await createUser({
+      variables: {
+        input: {
+          fullName: userData.fullName,
+          password: userData.password,
+          email: userData.email,
+          role: {
+            id: userData.role?.id
+          }
+        }
+      }
+    });
+
+    navigate(URLS.USERS);
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('createUserPage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <Form onSubmit={handleUserCreation}>
+            <Stack direction="column" gap={2}>
+              <TextField
+                required={true}
+                name="fullName"
+                label={formatMessage('userForm.fullName')}
+                fullWidth
+              />
+
+              <TextField
+                required={true}
+                name="email"
+                label={formatMessage('userForm.email')}
+                fullWidth
+              />
+
+              <TextField
+                required={true}
+                name="password"
+                label={formatMessage('userForm.password')}
+                type="password"
+                fullWidth
+              />
+
+              <Can I='update' a='Role'>
+                <ControlledAutocomplete
+                  name="role.id"
+                  fullWidth
+                  disablePortal
+                  disableClearable={true}
+                  options={generateRoleOptions(roles)}
+                  renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
+                  loading={rolesLoading}
+                />
+              </Can>
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                color="primary"
+                sx={{ boxShadow: 2 }}
+                loading={loading}
+              >
+                {formatMessage('createUser.submit')}
+              </LoadingButton>
+            </Stack>
+          </Form>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

packages/web/src/pages/EditRole/index.ee.tsx

@@ -0,0 +1,103 @@
+import { useMutation } from '@apollo/client';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import * as React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
+import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
+import TextField from 'components/TextField';
+import * as URLS from 'config/urls';
+import { UPDATE_ROLE } from 'graphql/mutations/update-role.ee';
+import {
+  RoleWithComputedPermissions,
+  getPermissions,
+  getRoleWithComputedPermissions,
+} from 'helpers/computePermissions.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useRole from 'hooks/useRole.ee';
+
+type EditRoleParams = {
+  roleId: string;
+}
+
+// TODO: introduce interaction feedback upon deletion (successful + failure)
+// TODO: introduce loading bar
+export default function EditRole(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const [updateRole, { loading }] = useMutation(UPDATE_ROLE);
+  const navigate = useNavigate();
+  const { roleId } = useParams<EditRoleParams>();
+  const { role, loading: roleLoading } = useRole(roleId);
+
+  const handleRoleUpdate = async (roleData: Partial<RoleWithComputedPermissions>) => {
+    const newPermissions = getPermissions(roleData.computedPermissions);
+
+    await updateRole({
+      variables: {
+        input: {
+          id: roleId,
+          name: roleData.name,
+          description: roleData.description,
+          permissions: newPermissions,
+        }
+      },
+    });
+
+    navigate(URLS.ROLES);
+  };
+
+  if (roleLoading || !role) return <React.Fragment />;
+
+  const roleWithComputedPermissions = getRoleWithComputedPermissions(role);
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('editRolePage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <Form
+            defaultValues={roleWithComputedPermissions}
+            onSubmit={handleRoleUpdate}
+          >
+            <Stack direction="column" gap={2}>
+              <TextField
+                disabled={role.isAdmin}
+                required={true}
+                name="name"
+                label={formatMessage('roleForm.name')}
+                fullWidth
+              />
+
+              <TextField
+                disabled={role.isAdmin}
+                name="description"
+                label={formatMessage('roleForm.description')}
+                fullWidth
+              />
+
+              <PermissionCatalogField name='computedPermissions' disabled={role.isAdmin} />
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                color="primary"
+                sx={{ boxShadow: 2 }}
+                loading={loading}
+                disabled={role.isAdmin}
+              >
+                {formatMessage('editRole.submit')}
+              </LoadingButton>
+            </Stack>
+          </Form>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

packages/web/src/pages/EditUser/index.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { IUser, IRole } from '@automatisch/types';
+
+import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
+import Can from 'components/Can';
+import useUser from 'hooks/useUser';
+import useRoles from 'hooks/useRoles.ee';
+import PageTitle from 'components/PageTitle';
+import Form from 'components/Form';
+import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type EditUserParams = {
+  userId: string;
+}
+
+function generateRoleOptions(roles: IRole[]) {
+  return roles?.map(({ name: label, id: value }) => ({ label, value }));
+}
+
+// TODO: introduce interaction feedback upon deletion (successful + failure)
+// TODO: introduce loading bar
+export default function EditUser(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const [updateUser, { loading }] = useMutation(UPDATE_USER);
+  const { userId } = useParams<EditUserParams>();
+  const { user, loading: userLoading } = useUser(userId);
+  const { roles, loading: rolesLoading } = useRoles();
+
+  const handleUserUpdate = (userDataToUpdate: Partial<IUser>) => {
+    updateUser({
+      variables: {
+        input: {
+          id: userId,
+          fullName: userDataToUpdate.fullName,
+          email: userDataToUpdate.email,
+          role: {
+            id: userDataToUpdate.role?.id
+          }
+        }
+      }
+    });
+  };
+
+  if (userLoading) return <React.Fragment />;
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('editUserPage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <Form defaultValues={user} onSubmit={handleUserUpdate}>
+            <Stack direction="column" gap={2}>
+              <TextField
+                required={true}
+                name="fullName"
+                label={formatMessage('userForm.fullName')}
+                fullWidth
+              />
+
+              <TextField
+                required={true}
+                name="email"
+                label={formatMessage('userForm.email')}
+                fullWidth
+              />
+
+              <Can I='update' a='Role'>
+                <ControlledAutocomplete
+                  name="role.id"
+                  fullWidth
+                  disablePortal
+                  disableClearable={true}
+                  options={generateRoleOptions(roles)}
+                  renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
+                  loading={rolesLoading}
+                />
+              </Can>
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                color="primary"
+                sx={{ boxShadow: 2 }}
+                loading={loading}
+              >
+                {formatMessage('editUser.submit')}
+              </LoadingButton>
+            </Stack>
+          </Form>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

packages/web/src/pages/Flows/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
-import type { LinkProps } from 'react-router-dom';
 import { useLazyQuery } from '@apollo/client';
 import debounce from 'lodash/debounce';
 import Box from '@mui/material/Box';
@@ -12,6 +11,7 @@ import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 import type { IFlow } from '@automatisch/types';
 
+import Can from 'components/Can';
 import FlowRow from 'components/FlowRow';
 import NoResultFound from 'components/NoResultFound';
 import ConditionalIconButton from 'components/ConditionalIconButton';
@@ -88,16 +88,6 @@ export default function Flows(): React.ReactElement {
     setFlowName(event.target.value);
   }, []);
 
-  const CreateFlowLink = React.useMemo(
-    () =>
-      React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
-        function InlineLink(linkProps, ref) {
-          return <Link ref={ref} to={URLS.CREATE_FLOW} {...linkProps} />;
-        }
-      ),
-    []
-  );
-
   return (
     <Box sx={{ py: 3 }}>
       <Container>
@@ -118,18 +108,24 @@ export default function Flows(): React.ReactElement {
             alignItems="center"
             order={{ xs: 1, sm: 2 }}
           >
-            <ConditionalIconButton
-              type="submit"
-              variant="contained"
-              color="primary"
-              size="large"
-              component={CreateFlowLink}
-              fullWidth
-              icon={<AddIcon />}
-              data-test="create-flow-button"
-            >
-              {formatMessage('flows.create')}
-            </ConditionalIconButton>
+            <Can I="create" a="Flow" passThrough>
+              {(allowed) => (
+                <ConditionalIconButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  size="large"
+                  component={Link}
+                  fullWidth
+                  disabled={!allowed}
+                  icon={<AddIcon />}
+                  to={URLS.CREATE_FLOW}
+                  data-test="create-flow-button"
+                >
+                  {formatMessage('flows.create')}
+                </ConditionalIconButton>
+              )}
+            </Can>
           </Grid>
         </Grid>
 

packages/web/src/pages/ProfileSettings/index.tsx

@@ -15,7 +15,7 @@ import Container from 'components/Container';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee';
-import { UPDATE_USER } from 'graphql/mutations/update-user';
+import { UPDATE_CURRENT_USER } from 'graphql/mutations/update-current-user';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
 
@@ -47,7 +47,7 @@ function ProfileSettings() {
   const { enqueueSnackbar } = useSnackbar();
   const currentUser = useCurrentUser();
   const formatMessage = useFormatMessage();
-  const [updateUser] = useMutation(UPDATE_USER);
+  const [updateCurrentUser] = useMutation(UPDATE_CURRENT_USER);
 
   const handleProfileSettingsUpdate = async (data: any) => {
     const { fullName, password, email } = data;
@@ -61,12 +61,12 @@ function ProfileSettings() {
       mutationInput.password = password;
     }
 
-    await updateUser({
+    await updateCurrentUser({
       variables: {
         input: mutationInput,
       },
       optimisticResponse: {
-        updateUser: {
+        updateCurrentUser: {
           __typename: 'User',
           id: currentUser.id,
           fullName,
@@ -89,7 +89,7 @@ function ProfileSettings() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end">
-        <StyledForm
+          <StyledForm
             defaultValues={{ ...currentUser, password: '', confirmPassword: '' }}
             onSubmit={handleProfileSettingsUpdate}
             resolver={yupResolver(validationSchema)}

packages/web/src/pages/Roles/index.ee.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Grid from '@mui/material/Grid';
+import AddIcon from '@mui/icons-material/Add';
+
+import * as URLS from 'config/urls';
+import PageTitle from 'components/PageTitle';
+import Container from 'components/Container';
+import RoleList from 'components/RoleList/index.ee';
+import ConditionalIconButton from 'components/ConditionalIconButton';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+function RolesPage() {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center">
+            <PageTitle>{formatMessage('rolesPage.title')}</PageTitle>
+          </Grid>
+
+          <Grid
+            container
+            item
+            xs="auto"
+            sm="auto"
+            alignItems="center"
+          >
+            <ConditionalIconButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              size="large"
+              component={Link}
+              to={URLS.CREATE_ROLE}
+              fullWidth
+              icon={<AddIcon />}
+              data-test="create-role"
+            >
+              {formatMessage('rolesPage.createRole')}
+            </ConditionalIconButton>
+          </Grid>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <RoleList />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default RolesPage;

packages/web/src/pages/Users/index.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Grid from '@mui/material/Grid';
+import AddIcon from '@mui/icons-material/Add';
+
+import * as URLS from 'config/urls';
+import PageTitle from 'components/PageTitle';
+import Container from 'components/Container';
+import UserList from 'components/UserList';
+import ConditionalIconButton from 'components/ConditionalIconButton';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+function UsersPage() {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center">
+            <PageTitle>{formatMessage('usersPage.title')}</PageTitle>
+          </Grid>
+
+          <Grid
+            container
+            item
+            xs="auto"
+            sm="auto"
+            alignItems="center"
+          >
+            <ConditionalIconButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              size="large"
+              component={Link}
+              to={URLS.CREATE_USER}
+              fullWidth
+              icon={<AddIcon />}
+              data-test="create-user"
+            >
+              {formatMessage('usersPage.createUser')}
+            </ConditionalIconButton>
+          </Grid>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <UserList />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default UsersPage;

packages/web/src/routes.tsx

@@ -15,6 +15,7 @@ import ResetPassword from 'pages/ResetPassword/index.ee';
 import EditorRoutes from 'pages/Editor/routes';
 import * as URLS from 'config/urls';
 import settingsRoutes from './settingsRoutes';
+import adminSettingsRoutes from './adminSettingsRoutes';
 import Notifications from 'pages/Notifications';
 
 export default (
@@ -127,7 +128,9 @@ export default (
 
     <Route path="/" element={<Navigate to={URLS.FLOWS} replace />} />
 
-    <Route path={`${URLS.SETTINGS}`}>{settingsRoutes}</Route>
+    <Route path={URLS.SETTINGS}>{settingsRoutes}</Route>
+
+    <Route path={URLS.ADMIN_SETTINGS}>{adminSettingsRoutes}</Route>
 
     <Route
       element={