@deix/rossini-identity-management 2.0.0 → 2.1.0

package/lib/app/[locale]/groups/{page.jsx → page.js}

@@ -4,6 +4,6 @@ import { useConfig } from '../../../config';
 import Groups from '../../../components/groups/Groups';
 const GroupsPage = () => {
     const config = useConfig();
-    return <Groups apiUrl={config.generalProperties.apiURL}/>;
+    return React.createElement(Groups, { apiUrl: config.generalProperties.apiURL });
 };
 export default GroupsPage;

package/lib/app/[locale]/{layout.jsx → layout.js}

@@ -18,8 +18,7 @@ export default function RootLayout({ children, }) {
             },
         },
     });
-    return (<QueryClientProvider client={queryClient}>
-      <PageProvider>{children}</PageProvider>
-      <ReactQueryDevtools initialIsOpen={false} buttonPosition='bottom-right'/>
-    </QueryClientProvider>);
+    return (React.createElement(QueryClientProvider, { client: queryClient },
+        React.createElement(PageProvider, null, children),
+        React.createElement(ReactQueryDevtools, { initialIsOpen: false, buttonPosition: 'bottom-right' })));
 }

package/lib/app/[locale]/users/{page.jsx → page.js}

@@ -4,6 +4,6 @@ import { useConfig } from '../../../config';
 import Users from '../../../components/users/Users';
 const UsersPage = () => {
     const config = useConfig();
-    return <Users apiUrl={config.generalProperties.apiURL} editUsername/>;
+    return React.createElement(Users, { apiUrl: config.generalProperties.apiURL, editUsername: true });
 };
 export default UsersPage;

package/lib/app/{layout.jsx → layout.js}

@@ -14,11 +14,7 @@ export default function RootLayout({ children, }) {
         LOGOUT_URL: process.env.LOGOUT_URL || '',
         ACCOUNT_SETTINGS_URL: process.env.ACCOUNT_SETTINGS_URL || '',
     };
-    return (<html lang='en'>
-      <body>
-        <ConfigProvider publicRuntimeEnv={publicRuntimeEnv}>
-          {children}
-        </ConfigProvider>
-      </body>
-    </html>);
+    return (React.createElement("html", { lang: 'en' },
+        React.createElement("body", null,
+            React.createElement(ConfigProvider, { publicRuntimeEnv: publicRuntimeEnv }, children))));
 }

package/lib/components/AddItemDialog.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Autocomplete, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, } from '@mui/material';
+import { useLocale } from '@deix/rossini-core';
+import { useEffect, useState } from 'react';
+const translations = {
+    ok: {
+        en: 'Add',
+        it: 'Aggiungi',
+    },
+    cancel: {
+        en: 'Cancel',
+        it: 'Annulla',
+    },
+    search: {
+        en: 'Search...',
+        it: 'Cerca...',
+    },
+};
+const AddItemDialog = ({ title, options, open, onClose, onConfirm, }) => {
+    const locale = useLocale();
+    const [value, setValue] = useState(null);
+    // Reset the value when the dialog is closed
+    useEffect(() => {
+        if (!open) {
+            setValue(null);
+        }
+    }, [open]);
+    return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
+        React.createElement(DialogTitle, null, title[locale]),
+        React.createElement(DialogContent, null,
+            React.createElement(Autocomplete
+            // multiple
+            , { 
+                // multiple
+                options: options ?? [], getOptionLabel: (option) => option.label, getOptionKey: (option) => option.value, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { ...params, label: translations.search[locale], placeholder: '' })), onChange: (event, newValue) => {
+                    setValue(newValue);
+                }, value: value })),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { size: 'small', variant: 'outlined', onClick: onClose }, translations.cancel[locale]),
+            React.createElement(Button, { variant: 'contained', onClick: () => {
+                    onConfirm(value);
+                    onClose();
+                } }, translations.ok[locale]))));
+};
+export default AddItemDialog;

package/lib/components/DeleteConfirmationDialog.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography, } from '@mui/material';
+import { useLocale } from '@deix/rossini-core';
+const translations = {
+    title: {
+        en: 'Delete item?',
+        it: 'Cancellare elemento?',
+    },
+    message: {
+        en: 'This is a permanent action',
+        it: "Questa è un'azione permanente",
+    },
+    yes: {
+        en: 'Yes',
+        it: 'Si',
+    },
+    no: {
+        en: 'No',
+        it: 'No',
+    },
+};
+const DeleteConfirmationDialog = ({ open, onClose, onConfirm, }) => {
+    const locale = useLocale();
+    return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
+        React.createElement(DialogTitle, null, translations.title[locale]),
+        React.createElement(DialogContent, null,
+            React.createElement(Typography, { variant: 'caption' }, translations.message[locale])),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { size: 'small', variant: 'outlined', onClick: onClose }, translations.no[locale]),
+            React.createElement(Button, { size: 'small', variant: 'contained', onClick: () => {
+                    onConfirm();
+                    onClose();
+                } }, translations.yes[locale]))));
+};
+export default DeleteConfirmationDialog;

package/lib/components/SearchField.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import SearchIcon from '@mui/icons-material/Search';
+import { IconButton, TextField, } from '@mui/material';
+import { useState } from 'react';
+const SearchField = ({ placeholder = 'Search...', onSearch, ...props }) => {
+    const [value, setValue] = useState('');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, { size: 'small', placeholder: placeholder, value: value, onChange: (evt) => {
+                setValue(evt.target.value);
+                onSearch(evt.target.value);
+            }, ...props, InputProps: {
+                endAdornment: (React.createElement(IconButton, { size: 'small', onClick: () => onSearch(value) },
+                    React.createElement(SearchIcon, null))),
+            } })));
+};
+export default SearchField;

package/lib/components/groups/{CreateGroupDialog.jsx → CreateGroupDialog.js}

@@ -18,11 +18,9 @@ const CreateGroupDialog = ({ open, onClose, onGroupCreate, }) => {
         }
         onClose();
     };
-    return (<Dialog open={open} fullWidth maxWidth='sm' onClose={onClose}>
-      <DialogTitle>{groupsTranslations.create[locale]}</DialogTitle>
-      <DialogContent>
-        <GroupForm mode='create' onSave={handleSave} onCancel={onClose}/>
-      </DialogContent>
-    </Dialog>);
+    return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
+        React.createElement(DialogTitle, null, groupsTranslations.create[locale]),
+        React.createElement(DialogContent, null,
+            React.createElement(GroupForm, { mode: 'create', onSave: handleSave, onCancel: onClose }))));
 };
 export default CreateGroupDialog;

package/lib/components/groups/{GroupDetails.jsx → GroupDetails.js}

@@ -13,8 +13,7 @@ const GroupDetails = ({ group, onGroupUpdate, editName, }) => {
             onGroupUpdate(updatedGroup, group);
         }
     };
-    return (<>
-      <GroupForm mode='modify' group={group} onSave={handleUpdate} onCancel={() => { }} editName={editName}/>
-    </>);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(GroupForm, { mode: 'modify', group: group, onSave: handleUpdate, onCancel: () => { }, editName: editName })));
 };
 export default GroupDetails;

package/lib/components/groups/GroupForm.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useLocale } from '@deix/rossini-core';
+import { Button, Grid, TextField } from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { useEffect } from 'react';
+import groupsTranslations from '../../lang/groups';
+const GroupForm = ({ group, onCancel, onSave, mode, editName, }) => {
+    const locale = useLocale();
+    const { control, handleSubmit, setValue } = useForm({
+        defaultValues: {
+            id: group?.id,
+            name: group?.name || '',
+        },
+    });
+    useEffect(() => {
+        if (group) {
+            setValue('id', group?.id);
+            setValue('name', group?.name);
+        }
+    }, [group, setValue]);
+    const onSubmit = (data) => {
+        onSave(data);
+    };
+    return (React.createElement("form", { onSubmit: (event) => void handleSubmit(onSubmit)(event) },
+        React.createElement(Grid, { container: true, spacing: 2, sx: { mt: 2, maxWidth: 'sm' }, justifyContent: 'stretch' },
+            React.createElement(Grid, { size: { xs: 12 } },
+                React.createElement(Controller, { name: 'name', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: groupsTranslations.name[locale], disabled: mode === 'modify' && !editName, sx: { flexShrink: 0 }, ...field })) })),
+            React.createElement(Grid, { sx: {
+                    mt: 2,
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 2,
+                    width: '100%',
+                } },
+                mode === 'create' && (React.createElement(Button, { variant: 'outlined', onClick: onCancel }, groupsTranslations.cancel[locale])),
+                React.createElement(Button, { variant: 'contained', type: 'submit' }, groupsTranslations.save[locale])))));
+};
+export default GroupForm;

package/lib/components/groups/GroupTabs.js

@@ -0,0 +1,29 @@
+'use client';
+import React, { useState } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useLocale } from '@deix/rossini-core';
+import GroupDetails from './GroupDetails';
+import groupsTranslations from '../../lang/groups';
+import GroupUsers from './GroupUsers';
+const GroupTabs = ({ group, additionalTabs = [], onGroupUpdate, editName, }) => {
+    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: groupsTranslations.details[locale], value: 'DETAILS' }),
+                React.createElement(Tab, { label: groupsTranslations.users[locale], value: 'USERS' }),
+                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(GroupDetails, { group: group, onGroupUpdate: onGroupUpdate, editName: editName })),
+            selectedTab === 'USERS' && React.createElement(GroupUsers, { group: group }),
+            additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (React.createElement(tab.component, { key: `tab${index}`, group: group }))))));
+};
+export default GroupTabs;

package/lib/components/groups/GroupUsers.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { isStringTranslation, useLocale } from '@deix/rossini-core';
+import { useAddUserToGroup, useRemoveUserFromGroup, useUsers, } from '../../utils/hooks/users';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+import { useQueryClient } from '@tanstack/react-query';
+import AddItemDialog from '../AddItemDialog';
+import { useGroupUsers } from '../../utils/hooks/groups';
+import groupsTranslations from '../../lang/groups';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
+const groupUsersTableColumns = [
+    {
+        id: 'username',
+        label: { en: 'Username', it: 'Username' },
+    },
+    {
+        id: 'firstName',
+        label: { en: 'First name', it: 'Nome' },
+    },
+    {
+        id: 'lastName',
+        label: { en: 'Last name', it: 'Cognome' },
+    },
+];
+const GroupUsers = ({ group }) => {
+    const locale = useLocale();
+    const apiClient = useAPIClient();
+    const queryClient = useQueryClient();
+    const { data: users } = useUsers(apiClient);
+    const { data: groupUsers } = useGroupUsers(group?.id, apiClient);
+    const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
+    const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
+    const [openAddUserDialog, setOpenAddUserDialog] = useState(false);
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteId, setDeleteId] = useState();
+    return (React.createElement(React.Fragment, null,
+        groupUsers && groupUsers.length > 0 && (React.createElement(Box, { maxWidth: 'md' },
+            React.createElement(TableContainer, null,
+                React.createElement(Table, { size: 'small' },
+                    React.createElement(TableHead, null,
+                        React.createElement(TableRow, null,
+                            groupUsersTableColumns.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, groupUsers?.map((user, rowIdx) => (React.createElement(TableRow, { key: rowIdx },
+                        React.createElement(TableCell, null, user.username),
+                        React.createElement(TableCell, null, user.firstName),
+                        React.createElement(TableCell, null, user.lastName),
+                        React.createElement(TableCell, { padding: 'none', align: 'right' },
+                            React.createElement(IconButton, { size: 'small', onClick: (evt) => {
+                                    evt.stopPropagation();
+                                    setOpenConfirmationDialog(true);
+                                    setDeleteId(user.id);
+                                } },
+                                React.createElement(DeleteIcon, null))))))))))),
+        React.createElement(Button, { variant: 'outlined', startIcon: React.createElement(AddIcon, null), onClick: () => setOpenAddUserDialog(true), sx: { marginTop: 2 } }, groupsTranslations.addUser[locale]),
+        React.createElement(AddItemDialog, { open: openAddUserDialog, onClose: () => setOpenAddUserDialog(false), onConfirm: (value) => {
+                if (value) {
+                    addUserToGroup({ userId: value?.value, groupId: group.id });
+                }
+            }, title: groupsTranslations.addUser, options: users?.map((user) => ({
+                value: user.id,
+                label: user.username || '',
+            })) }),
+        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => deleteId
+                ? removeUserFromGroup({ userId: deleteId, groupId: group.id })
+                : {} })));
+};
+export default GroupUsers;

package/lib/components/groups/Groups.js

@@ -0,0 +1,97 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import GroupAddIcon from '@mui/icons-material/GroupAdd';
+import { Box, Button, Grid, IconButton, Link } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { useAPI, useLocale } from '@deix/rossini-core';
+import { SearchField } from '..';
+import CreateGroupDialog from './CreateGroupDialog';
+import GroupsTable from './GroupsTable';
+import groupsTranslations from '../../lang/groups';
+import { useDeleteGroup, useGroups } from '../../utils/hooks/groups';
+import GroupTabs from './GroupTabs';
+import { useQueryClient } from '@tanstack/react-query';
+import { APIClientProvider } from '../../utils/hooks/useAPIClient';
+const Groups = ({ apiUrl, additionalTabs = [], onGroupUpdate, onGroupCreate, onGroupDelete, editName, }) => {
+    const locale = useLocale();
+    const apiClient = useAPI(apiUrl);
+    const queryClient = useQueryClient();
+    const { data: groups } = useGroups(apiClient);
+    const { mutate: deleteGroup } = useDeleteGroup(queryClient, apiClient);
+    const [searchString, setSearchString] = useState('');
+    const [filteredGroups, setFilteredGroups] = useState();
+    const [selectedGroup, setSelectedGroup] = useState();
+    const [openGroupDialog, setOpenGroupDialog] = useState(false);
+    // Update the filtered groups using the search string
+    useEffect(() => {
+        if (groups && searchString === '') {
+            setFilteredGroups(groups);
+        }
+        else if (groups && searchString !== '') {
+            setFilteredGroups(groups.filter((group) => group.name.includes(searchString)));
+        }
+    }, [searchString, groups, setFilteredGroups]);
+    // If the groups change updated the selected group to reflect the chages
+    useEffect(() => {
+        if (selectedGroup) {
+            const updatedSelectedGroup = groups?.find((group) => group.id === selectedGroup.id);
+            if (updatedSelectedGroup) {
+                setSelectedGroup(updatedSelectedGroup);
+            }
+            else {
+                // deselect the group if it doesn't exist anymore
+                setSelectedGroup(undefined);
+            }
+        }
+    }, [groups, selectedGroup, setSelectedGroup]);
+    const handleDelete = (group) => {
+        deleteGroup(group.id);
+        if (typeof onGroupDelete === 'function') {
+            onGroupDelete(group);
+        }
+        setSelectedGroup(undefined);
+    };
+    return (React.createElement(APIClientProvider, { baseURL: apiUrl },
+        React.createElement(Box, { sx: {
+                flexGrow: 1,
+                maxWidth: '100%',
+                overflowX: 'hidden',
+                paddingTop: 3,
+                paddingLeft: 3,
+                paddingRight: 3,
+            } },
+            !selectedGroup && (React.createElement(React.Fragment, null,
+                React.createElement(Grid, { container: true, spacing: 2, sx: { marginBottom: 2 } },
+                    React.createElement(Grid, null,
+                        React.createElement(SearchField, { placeholder: groupsTranslations.search[locale], onSearch: (value) => setSearchString(value) })),
+                    React.createElement(Grid, null,
+                        React.createElement(Button, { variant: 'contained', startIcon: React.createElement(GroupAddIcon, null), onClick: () => {
+                                setOpenGroupDialog(true);
+                                setSelectedGroup(undefined);
+                            } }, groupsTranslations.new[locale]))),
+                React.createElement(GroupsTable, { groups: filteredGroups, selectedGroup: selectedGroup, setSelectedGroup: (group) => {
+                        setSelectedGroup(group);
+                    }, onDelete: handleDelete }))),
+            selectedGroup && (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: () => setSelectedGroup(undefined), sx: { mr: 2 } },
+                        React.createElement(ArrowBackIcon, null)),
+                    React.createElement(Link, { underline: 'none', href: '#', onClick: () => setSelectedGroup(undefined) }, groupsTranslations.title[locale]),
+                    React.createElement(KeyboardArrowRightIcon, null),
+                    selectedGroup.name),
+                React.createElement(GroupTabs, { group: selectedGroup, additionalTabs: additionalTabs, onGroupUpdate: onGroupUpdate, editName: editName }))),
+            React.createElement(CreateGroupDialog, { open: openGroupDialog, onClose: () => {
+                    setOpenGroupDialog(false);
+                }, onGroupCreate: onGroupCreate }))));
+};
+export default Groups;

package/lib/components/groups/GroupsTable.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { isStringTranslation, useLocale } from '@deix/rossini-core';
+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 groupsTableColumns = [
+    {
+        id: 'name',
+        label: { en: 'Name', it: 'Nome' },
+    },
+];
+const GroupsTable = ({ groups = [], selectedGroup, setSelectedGroup, onDelete, }) => {
+    const locale = useLocale();
+    const muiTheme = useTheme();
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteGroup, setDeleteGroup] = useState();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TableContainer, null,
+            React.createElement(Table, { size: 'small' },
+                React.createElement(TableHead, null,
+                    React.createElement(TableRow, null,
+                        groupsTableColumns.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, groups.map((group, rowIdx) => (React.createElement(TableRow, { key: rowIdx, onClick: () => setSelectedGroup(group), sx: {
+                        cursor: 'pointer',
+                        background: selectedGroup && group.id === selectedGroup.id
+                            ? muiTheme.palette.primary.light
+                            : undefined,
+                    } },
+                    React.createElement(TableCell, null, group.name),
+                    React.createElement(TableCell, { padding: 'none', align: 'right' },
+                        React.createElement(IconButton, { size: 'small', onClick: (evt) => {
+                                evt.stopPropagation();
+                                setOpenConfirmationDialog(true);
+                                setDeleteGroup(group);
+                            } },
+                            React.createElement(DeleteIcon, null))))))))),
+        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => (deleteGroup ? onDelete(deleteGroup) : {}) })));
+};
+export default GroupsTable;

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

@@ -31,11 +31,9 @@ const CreateUserDialog = ({ open, onClose, onUserCreate, filteredGroup, emailAsU
         });
         onClose();
     };
-    return (<Dialog open={open} fullWidth maxWidth='sm' onClose={onClose}>
-      <DialogTitle>{usersTranslations.create[locale]}</DialogTitle>
-      <DialogContent>
-        <UserForm mode='create' onSave={handleSave} onCancel={onClose} emailAsUsername={emailAsUsername}/>
-      </DialogContent>
-    </Dialog>);
+    return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
+        React.createElement(DialogTitle, null, usersTranslations.create[locale]),
+        React.createElement(DialogContent, null,
+            React.createElement(UserForm, { mode: 'create', onSave: handleSave, onCancel: onClose, emailAsUsername: emailAsUsername }))));
 };
 export default CreateUserDialog;

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

@@ -10,10 +10,7 @@ const UserCredentials = ({ user }) => {
     const apiClient = useAPIClient();
     const queryClient = useQueryClient();
     const { mutate: sendResetPasswordEmail } = useSendUpdatePasswordEmail(queryClient, apiClient);
-    return (<Box sx={{ mt: 2 }}>
-      <Button variant='contained' onClick={() => sendResetPasswordEmail(user.id)}>
-        {usersTranslations.sendResetPasswordEmail[locale]}
-      </Button>
-    </Box>);
+    return (React.createElement(Box, { sx: { mt: 2 } },
+        React.createElement(Button, { variant: 'contained', onClick: () => sendResetPasswordEmail(user.id) }, usersTranslations.sendResetPasswordEmail[locale])));
 };
 export default UserCredentials;

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

@@ -16,8 +16,7 @@ const UserDetails = ({ user, onUserUpdate, editUsername, emailAsUsername = false
             onUserUpdate(updatedUser, user);
         }
     };
-    return (<>
-      <UserForm mode='modify' user={user} onSave={handleUpdate} onCancel={() => { }} editUsername={editUsername} emailAsUsername={emailAsUsername}/>
-    </>);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UserForm, { mode: 'modify', user: user, onSave: handleUpdate, onCancel: () => { }, editUsername: editUsername, emailAsUsername: emailAsUsername })));
 };
 export default UserDetails;

package/lib/components/users/UserForm.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useLocale } from '@deix/rossini-core';
+import { Button, FormControlLabel, Grid, Switch, TextField, } from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { useEffect } from 'react';
+import usersTranslations from '../../lang/users';
+const UserForm = ({ user, onSave, onCancel, mode = 'create', editUsername, emailAsUsername = false, }) => {
+    const locale = useLocale();
+    const { control, formState: { errors }, handleSubmit, setValue, } = useForm({
+        defaultValues: {
+            id: user?.id,
+            username: user?.username || '',
+            firstName: user?.firstName || '',
+            lastName: user?.lastName || '',
+            email: user?.email || '',
+            emailVerified: user?.emailVerified || true,
+            enabled: user?.enabled || true,
+            sendEmailOnCreation: true,
+        },
+    });
+    useEffect(() => {
+        if (user) {
+            setValue('id', user?.id);
+            if (!emailAsUsername) {
+                setValue('username', user?.username);
+            }
+            setValue('firstName', user?.firstName);
+            setValue('lastName', user?.lastName);
+            setValue('email', user?.email);
+            setValue('emailVerified', user?.emailVerified);
+            setValue('enabled', user?.enabled);
+            setValue('groups', user?.groups);
+            // The user already exists, we don't want to send an email
+            setValue('sendEmailOnCreation', false);
+        }
+    }, [user, setValue]);
+    const onSubmit = (data) => {
+        onSave(data);
+    };
+    return (React.createElement("form", { onSubmit: (event) => void handleSubmit(onSubmit)(event) },
+        React.createElement(Grid, { container: true, spacing: 2, sx: { mt: 2, maxWidth: 'sm' }, justifyContent: 'stretch' },
+            !emailAsUsername && (React.createElement(Grid, { size: { xs: 12 } },
+                React.createElement(Controller, { name: 'username', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.username[locale], disabled: mode === 'modify' && !editUsername, sx: { flexShrink: 0 }, ...field })) }))),
+            React.createElement(Grid, { size: { xs: 12 } },
+                React.createElement(Controller, { name: 'firstName', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.firstName[locale], sx: { flexShrink: 0 }, ...field })) })),
+            React.createElement(Grid, { size: { xs: 12 } },
+                React.createElement(Controller, { name: 'lastName', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.lastName[locale], sx: { flexShrink: 0 }, ...field })) })),
+            React.createElement(Grid, { size: { xs: 12 } },
+                React.createElement(Controller, { name: 'email', control: control, rules: { required: true }, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, error: !!errors.email, helperText: errors.email
+                            ? usersTranslations.requiredField[locale]
+                            : undefined, label: usersTranslations.email[locale], sx: { flexShrink: 0 }, ...field })) })),
+            React.createElement(Grid, { size: { xs: 12 } },
+                React.createElement(Controller, { name: 'enabled', control: control, render: ({ field }) => (React.createElement(FormControlLabel, { sx: { ml: 1 }, control: React.createElement(Switch, { checked: field.value, size: 'small', ...field }), label: usersTranslations.enabled[locale] })) })),
+            mode === 'create' && (React.createElement(Grid, { size: { xs: 12 } },
+                React.createElement(Controller, { name: 'sendEmailOnCreation', control: control, render: ({ field }) => (React.createElement(FormControlLabel, { sx: { ml: 1 }, control: React.createElement(Switch, { checked: field.value, size: 'small', ...field }), label: usersTranslations.sendResetPasswordEmail[locale] })) }))),
+            React.createElement(Grid, { sx: {
+                    mt: 2,
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 2,
+                    width: '100%',
+                } },
+                mode === 'create' && (React.createElement(Button, { variant: 'outlined', onClick: onCancel }, usersTranslations.cancel[locale])),
+                React.createElement(Button, { variant: 'contained', type: 'submit' }, usersTranslations.save[locale])))));
+};
+export default UserForm;

package/lib/components/users/UserGroups.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { isStringTranslation, useLocale } from '@deix/rossini-core';
+import { useAddUserToGroup, useRemoveUserFromGroup, useUserGroups, } from '../../utils/hooks/users';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+import { useQueryClient } from '@tanstack/react-query';
+import usersTranslations from '../../lang/users';
+import AddItemDialog from '../AddItemDialog';
+import { useGroups } from '../../utils/hooks/groups';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
+const userGroupsTableColumns = [
+    {
+        id: 'name',
+        label: { en: 'Group', it: 'Gruppo' },
+    },
+];
+const UserGroups = ({ user }) => {
+    const locale = useLocale();
+    const apiClient = useAPIClient();
+    const queryClient = useQueryClient();
+    const { data: groups } = useGroups(apiClient);
+    const { data: userGroups } = useUserGroups(user?.id, apiClient);
+    const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
+    const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
+    const [openAddGroupDialog, setOpenAddGroupDialog] = useState(false);
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteId, setDeleteId] = useState();
+    return (React.createElement(React.Fragment, null,
+        userGroups && userGroups.length > 0 && (React.createElement(Box, { maxWidth: 'sm' },
+            React.createElement(TableContainer, null,
+                React.createElement(Table, { size: 'small' },
+                    React.createElement(TableHead, null,
+                        React.createElement(TableRow, null,
+                            userGroupsTableColumns.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, userGroups?.map((group, rowIdx) => (React.createElement(TableRow, { key: rowIdx },
+                        React.createElement(TableCell, null, group.name),
+                        React.createElement(TableCell, { padding: 'none', align: 'right' },
+                            React.createElement(IconButton, { size: 'small', onClick: (evt) => {
+                                    evt.stopPropagation();
+                                    setOpenConfirmationDialog(true);
+                                    setDeleteId(group.id);
+                                } },
+                                React.createElement(DeleteIcon, null))))))))))),
+        React.createElement(Button, { variant: 'outlined', startIcon: React.createElement(AddIcon, null), onClick: () => setOpenAddGroupDialog(true), sx: { marginTop: 2 } }, usersTranslations.addGroup[locale]),
+        React.createElement(AddItemDialog, { open: openAddGroupDialog, onClose: () => setOpenAddGroupDialog(false), onConfirm: (value) => {
+                if (value) {
+                    addUserToGroup({ userId: user.id, groupId: value?.value });
+                }
+            }, title: usersTranslations.addGroup, options: groups?.map((group) => ({
+                value: group.id,
+                label: group.name,
+            })) }),
+        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => deleteId
+                ? removeUserFromGroup({ userId: user.id, groupId: deleteId })
+                : {} })));
+};
+export default UserGroups;