@deix/rossini-identity-management 2.0.0 → 2.0.1

package/lib/components/users/{Users.jsx → Users.js}

@@ -58,59 +58,46 @@ const Users = ({ apiUrl, additionalTabs = [], onUserCreate, onUserUpdate, onUser
         }
         setSelectedUser(undefined);
     };
-    return (<APIClientProvider baseURL={apiUrl}>
-      <Box sx={{
-            flexGrow: 1,
-            maxWidth: '100%',
-            overflowX: 'hidden',
-            paddingTop: 3,
-            paddingLeft: 3,
-            paddingRight: 3,
-        }}>
-        {!selectedUser && (<>
-            <Grid container spacing={2} sx={{ marginBottom: 2 }}>
-              <Grid>
-                <SearchField placeholder={usersTranslations.search[locale]} onSearch={(value) => setSearchString(value)}/>
-              </Grid>
-              <Grid>
-                <Button variant='contained' startIcon={<PersonAddIcon />} onClick={() => {
-                setOpenCreateUserDialog(true);
-                setSelectedUser(undefined);
-            }}>
-                  {usersTranslations.new[locale]}
-                </Button>
-              </Grid>
-            </Grid>
-            <UsersTable users={filteredUsers} selectedUser={selectedUser} setSelectedUser={(user) => {
-                setSelectedUser(user);
-            }} onDelete={handleDelete} emailAsUsername={emailAsUsername} disableDelete={disableDelete}/>
-          </>)}
-        {selectedUser && (<Box sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                width: '100%',
-            }}>
-            <Box sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-            }}>
-              <IconButton aria-label='delete' color='primary' onClick={() => setSelectedUser(undefined)} sx={{ mr: 2 }}>
-                <ArrowBackIcon />
-              </IconButton>
-              <Link underline='none' href='#' onClick={() => setSelectedUser(undefined)}>
-                {usersTranslations.title[locale]}
-              </Link>
-              <KeyboardArrowRightIcon />
-              {selectedUser.username}
-            </Box>
-            <UserTabs user={selectedUser} additionalTabs={additionalTabs} onUserUpdate={onUserUpdate} editUsername={editUsername} emailAsUsername={emailAsUsername} hideGroupsSelection={hideGroupsSelection}/>
-          </Box>)}
-        <CreateUserDialog open={openCreateUserDialog} onClose={() => {
-            setOpenCreateUserDialog(false);
-        }} onUserCreate={onUserCreate} filteredGroup={filteredGroup} emailAsUsername/>
-      </Box>
-    </APIClientProvider>);
+    return (React.createElement(APIClientProvider, { baseURL: apiUrl },
+        React.createElement(Box, { sx: {
+                flexGrow: 1,
+                maxWidth: '100%',
+                overflowX: 'hidden',
+                paddingTop: 3,
+                paddingLeft: 3,
+                paddingRight: 3,
+            } },
+            !selectedUser && (React.createElement(React.Fragment, null,
+                React.createElement(Grid, { container: true, spacing: 2, sx: { marginBottom: 2 } },
+                    React.createElement(Grid, null,
+                        React.createElement(SearchField, { placeholder: usersTranslations.search[locale], onSearch: (value) => setSearchString(value) })),
+                    React.createElement(Grid, null,
+                        React.createElement(Button, { variant: 'contained', startIcon: React.createElement(PersonAddIcon, null), onClick: () => {
+                                setOpenCreateUserDialog(true);
+                                setSelectedUser(undefined);
+                            } }, usersTranslations.new[locale]))),
+                React.createElement(UsersTable, { users: filteredUsers, selectedUser: selectedUser, setSelectedUser: (user) => {
+                        setSelectedUser(user);
+                    }, onDelete: handleDelete, emailAsUsername: emailAsUsername, disableDelete: disableDelete }))),
+            selectedUser && (React.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                    width: '100%',
+                } },
+                React.createElement(Box, { sx: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    } },
+                    React.createElement(IconButton, { "aria-label": 'delete', color: 'primary', onClick: () => setSelectedUser(undefined), sx: { mr: 2 } },
+                        React.createElement(ArrowBackIcon, null)),
+                    React.createElement(Link, { underline: 'none', href: '#', onClick: () => setSelectedUser(undefined) }, usersTranslations.title[locale]),
+                    React.createElement(KeyboardArrowRightIcon, null),
+                    selectedUser.username),
+                React.createElement(UserTabs, { user: selectedUser, additionalTabs: additionalTabs, onUserUpdate: onUserUpdate, editUsername: editUsername, emailAsUsername: emailAsUsername, hideGroupsSelection: hideGroupsSelection }))),
+            React.createElement(CreateUserDialog, { open: openCreateUserDialog, onClose: () => {
+                    setOpenCreateUserDialog(false);
+                }, onUserCreate: onUserCreate, filteredGroup: filteredGroup, emailAsUsername: true }))));
 };
 export default Users;

package/lib/components/users/UsersTable.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { isStringTranslation, useLocale } from '@deix/rossini-core';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme, } from '@mui/material';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+const usersTableColumns = [
+    {
+        id: 'firstName',
+        label: { en: 'First Name', it: 'Nome' },
+    },
+    {
+        id: 'lastName',
+        label: { en: 'Last Name', it: 'Cognome' },
+    },
+    {
+        id: 'username',
+        label: { en: 'Username', it: 'Username' },
+    },
+    { id: 'email', label: 'Email' },
+    {
+        id: 'enabled',
+        label: { en: 'Enabled', it: 'Utente Abilitato' },
+    },
+];
+const UsersTable = ({ users = [], selectedUser, setSelectedUser, onDelete, emailAsUsername = false, disableDelete = false, }) => {
+    const locale = useLocale();
+    const muiTheme = useTheme();
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteUser, setDeleteUser] = useState();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TableContainer, null,
+            React.createElement(Table, { size: 'small' },
+                React.createElement(TableHead, null,
+                    React.createElement(TableRow, null,
+                        usersTableColumns
+                            .filter((c) => c.id !== 'username' || !emailAsUsername)
+                            .map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
+                            ? col.label[locale]
+                            : col.label))),
+                        React.createElement(TableCell, { padding: 'none' }, ''))),
+                React.createElement(TableBody, null, users.map((user, rowIdx) => (React.createElement(TableRow, { key: rowIdx, onClick: () => setSelectedUser(user), sx: {
+                        cursor: 'pointer',
+                        background: selectedUser && user.id === selectedUser.id
+                            ? muiTheme.palette.primary.light
+                            : undefined,
+                    } },
+                    React.createElement(TableCell, null, user.firstName),
+                    React.createElement(TableCell, null, user.lastName),
+                    !emailAsUsername && React.createElement(TableCell, null, user.username),
+                    React.createElement(TableCell, null, user.email),
+                    React.createElement(TableCell, null, user.enabled ? React.createElement(CheckIcon, null) : React.createElement(CloseIcon, null)),
+                    !disableDelete && (React.createElement(TableCell, { padding: 'none', align: 'right' },
+                        React.createElement(IconButton, { size: 'small', onClick: (evt) => {
+                                evt.stopPropagation();
+                                setOpenConfirmationDialog(true);
+                                setDeleteUser(user);
+                            } },
+                            React.createElement(DeleteIcon, null)))))))))),
+        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => (deleteUser ? onDelete(deleteUser) : {}) })));
+};
+export default UsersTable;

package/lib/components/users/UsersTabs.js

@@ -0,0 +1,32 @@
+'use client';
+import React, { useState } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useLocale } from '@deix/rossini-core';
+import usersTranslations from '../../lang/users';
+import UserDetails from './UserDetails';
+import UserGroups from './UserGroups';
+import UserCredentials from './UserCredentials';
+const UserTabs = ({ user, additionalTabs = [], onUserUpdate, editUsername, emailAsUsername = false, hideGroupsSelection = false, }) => {
+    const locale = useLocale();
+    const [selectedTab, setSelectedTab] = useState('DETAILS');
+    return (React.createElement(Box, { sx: {
+            flexGrow: 1,
+            maxWidth: '100%',
+            overflowX: 'hidden',
+            alignSelf: 'stretch',
+        } },
+        React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider' } },
+            React.createElement(Tabs, { value: selectedTab, onChange: (_evt, newValue) => {
+                    setSelectedTab(newValue);
+                }, "aria-label": 'basic tabs example' },
+                React.createElement(Tab, { label: usersTranslations.details[locale], value: 'DETAILS' }),
+                !hideGroupsSelection && (React.createElement(Tab, { label: usersTranslations.userGroups[locale], value: 'USER_GROUPS' })),
+                React.createElement(Tab, { label: usersTranslations.credentials[locale], value: 'CREDENTIALS' }),
+                additionalTabs.map((tab, index) => (React.createElement(Tab, { key: `tab${index}`, label: tab.title[locale], value: `ADDITIONAL_TAB_${index}` }))))),
+        React.createElement(Box, { sx: { p: 1 } },
+            selectedTab === 'DETAILS' && (React.createElement(UserDetails, { user: user, onUserUpdate: onUserUpdate, editUsername: editUsername, emailAsUsername: emailAsUsername })),
+            selectedTab === 'USER_GROUPS' && !hideGroupsSelection && (React.createElement(UserGroups, { user: user })),
+            selectedTab === 'CREDENTIALS' && React.createElement(UserCredentials, { user: user }),
+            additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (React.createElement(tab.component, { key: `tab${index}`, user: user }))))));
+};
+export default UserTabs;

package/lib/config/{index.jsx → index.js}

@@ -13,8 +13,6 @@ export const getConfig = (publicRuntimeEnv) => ({
 // read at runtime
 const ConfigContext = createContext(getConfig({}));
 export const ConfigProvider = ({ publicRuntimeEnv, children, }) => {
-    return (<ConfigContext.Provider value={getConfig(publicRuntimeEnv)}>
-      {children}
-    </ConfigContext.Provider>);
+    return (React.createElement(ConfigContext.Provider, { value: getConfig(publicRuntimeEnv) }, children));
 };
 export const useConfig = () => useContext(ConfigContext);