@deix/rossini-identity-management 1.1.3 → 2.0.0

package/lib/components/users/UserForm.jsx

@@ -0,0 +1,79 @@
+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 (<form onSubmit={(event) => void handleSubmit(onSubmit)(event)}>
+      <Grid container spacing={2} sx={{ mt: 2, maxWidth: 'sm' }} justifyContent='stretch'>
+        {!emailAsUsername && (<Grid size={{ xs: 12 }}>
+            <Controller name='username' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.username[locale]} disabled={mode === 'modify' && !editUsername} sx={{ flexShrink: 0 }} {...field}/>)}/>
+          </Grid>)}
+        <Grid size={{ xs: 12 }}>
+          <Controller name='firstName' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.firstName[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid size={{ xs: 12 }}>
+          <Controller name='lastName' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.lastName[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid size={{ xs: 12 }}>
+          <Controller name='email' control={control} rules={{ required: true }} render={({ field }) => (<TextField size='small' fullWidth error={!!errors.email} helperText={errors.email
+                ? usersTranslations.requiredField[locale]
+                : undefined} label={usersTranslations.email[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid size={{ xs: 12 }}>
+          <Controller name='enabled' control={control} render={({ field }) => (<FormControlLabel sx={{ ml: 1 }} control={<Switch checked={field.value} size='small' {...field}/>} label={usersTranslations.enabled[locale]}/>)}/>
+        </Grid>
+        {mode === 'create' && (<Grid size={{ xs: 12 }}>
+            <Controller name='sendEmailOnCreation' control={control} render={({ field }) => (<FormControlLabel sx={{ ml: 1 }} control={<Switch checked={field.value} size='small' {...field}/>} label={usersTranslations.sendResetPasswordEmail[locale]}/>)}/>
+          </Grid>)}
+        <Grid sx={{
+            mt: 2,
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 2,
+            width: '100%',
+        }}>
+          {mode === 'create' && (<Button variant='outlined' onClick={onCancel}>
+              {usersTranslations.cancel[locale]}
+            </Button>)}
+          <Button variant='contained' type='submit'>
+            {usersTranslations.save[locale]}
+          </Button>
+        </Grid>
+      </Grid>
+    </form>);
+};
+export default UserForm;

package/lib/components/users/UserGroups.jsx

@@ -0,0 +1,78 @@
+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 (<>
+      {userGroups && userGroups.length > 0 && (<Box maxWidth='sm'>
+          <TableContainer>
+            <Table size='small'>
+              <TableHead>
+                <TableRow>
+                  {userGroupsTableColumns.map((col) => (<TableCell key={col.id} align={col.align || 'inherit'}>
+                      {isStringTranslation(col.label)
+                    ? col.label[locale]
+                    : col.label}
+                    </TableCell>))}
+                  <TableCell padding='none'>{''}</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {userGroups?.map((group, rowIdx) => (<TableRow key={rowIdx}>
+                    <TableCell>{group.name}</TableCell>
+                    <TableCell padding='none' align='right'>
+                      <IconButton size='small' onClick={(evt) => {
+                    evt.stopPropagation();
+                    setOpenConfirmationDialog(true);
+                    setDeleteId(group.id);
+                }}>
+                        <DeleteIcon />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Box>)}
+      <Button variant='outlined' startIcon={<AddIcon />} onClick={() => setOpenAddGroupDialog(true)} sx={{ marginTop: 2 }}>
+        {usersTranslations.addGroup[locale]}
+      </Button>
+      <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,
+        }))}/>
+      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => deleteId
+            ? removeUserFromGroup({ userId: user.id, groupId: deleteId })
+            : {}}/>
+    </>);
+};
+export default UserGroups;

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

@@ -58,46 +58,59 @@ const Users = ({ apiUrl, additionalTabs = [], onUserCreate, onUserUpdate, onUser
         }
         setSelectedUser(undefined);
     };
-    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, { item: true },
-                        React.createElement(SearchField, { placeholder: usersTranslations.search[locale], onSearch: (value) => setSearchString(value) })),
-                    React.createElement(Grid, { item: true },
-                        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 }))));
+    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>);
 };
 export default Users;

package/lib/components/users/UsersTable.jsx

@@ -0,0 +1,78 @@
+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 (<>
+      <TableContainer>
+        <Table size='small'>
+          <TableHead>
+            <TableRow>
+              {usersTableColumns
+            .filter((c) => c.id !== 'username' || !emailAsUsername)
+            .map((col) => (<TableCell key={col.id} align={col.align || 'inherit'}>
+                    {isStringTranslation(col.label)
+                ? col.label[locale]
+                : col.label}
+                  </TableCell>))}
+              <TableCell padding='none'>{''}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {users.map((user, rowIdx) => (<TableRow key={rowIdx} onClick={() => setSelectedUser(user)} sx={{
+                cursor: 'pointer',
+                background: selectedUser && user.id === selectedUser.id
+                    ? muiTheme.palette.primary.light
+                    : undefined,
+            }}>
+                <TableCell>{user.firstName}</TableCell>
+                <TableCell>{user.lastName}</TableCell>
+                {!emailAsUsername && <TableCell>{user.username}</TableCell>}
+                <TableCell>{user.email}</TableCell>
+                <TableCell>
+                  {user.enabled ? <CheckIcon /> : <CloseIcon />}
+                </TableCell>
+                {!disableDelete && (<TableCell padding='none' align='right'>
+                    <IconButton size='small' onClick={(evt) => {
+                    evt.stopPropagation();
+                    setOpenConfirmationDialog(true);
+                    setDeleteUser(user);
+                }}>
+                      <DeleteIcon />
+                    </IconButton>
+                  </TableCell>)}
+              </TableRow>))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => (deleteUser ? onDelete(deleteUser) : {})}/>
+    </>);
+};
+export default UsersTable;

package/lib/components/users/UsersTabs.jsx

@@ -0,0 +1,36 @@
+'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 (<Box sx={{
+            flexGrow: 1,
+            maxWidth: '100%',
+            overflowX: 'hidden',
+            alignSelf: 'stretch',
+        }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={selectedTab} onChange={(_evt, newValue) => {
+            setSelectedTab(newValue);
+        }} aria-label='basic tabs example'>
+          <Tab label={usersTranslations.details[locale]} value='DETAILS'/>
+          {!hideGroupsSelection && (<Tab label={usersTranslations.userGroups[locale]} value='USER_GROUPS'/>)}
+          <Tab label={usersTranslations.credentials[locale]} value='CREDENTIALS'/>
+          {additionalTabs.map((tab, index) => (<Tab key={`tab${index}`} label={tab.title[locale]} value={`ADDITIONAL_TAB_${index}`}/>))}
+        </Tabs>
+      </Box>
+      <Box sx={{ p: 1 }}>
+        {selectedTab === 'DETAILS' && (<UserDetails user={user} onUserUpdate={onUserUpdate} editUsername={editUsername} emailAsUsername={emailAsUsername}/>)}
+        {selectedTab === 'USER_GROUPS' && !hideGroupsSelection && (<UserGroups user={user}/>)}
+        {selectedTab === 'CREDENTIALS' && <UserCredentials user={user}/>}
+        {additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (<tab.component key={`tab${index}`} user={user}/>))}
+      </Box>
+    </Box>);
+};
+export default UserTabs;

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

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