@micha.bigler/ui-core-micha 2.1.20 → 2.2.1

package/src/components/UserListComponent.jsx

@@ -1,10 +1,17 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import {
-  Box, Typography, Table, TableBody, TableCell, TableContainer,
-  TableHead, TableRow, Paper, FormControl, Select,
-  MenuItem, Button, Tooltip, CircularProgress, Alert,
-  TableSortLabel, TextField
+  Box,
+  Typography,
+  FormControl,
+  Select,
+  MenuItem,
+  Button,
+  Tooltip,
+  CircularProgress,
+  Alert,
+  TextField,
 } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
 import { fetchUsersList, deleteUser, updateUserRole, updateUserSupportStatus } from '../auth/authApi';
@@ -26,17 +33,13 @@ export function UserListComponent({
   const [error, setError] = useState(null);
   const [rowActionLoading, setRowActionLoading] = useState({});
   const [searchQuery, setSearchQuery] = useState('');
-  const [sortConfig, setSortConfig] = useState({ key: 'id', direction: 'asc' });
-  const cellSx = { verticalAlign: 'middle' };
   const controlSx = { minWidth: 140 };
   const actionButtonSx = { textTransform: 'none', minWidth: 90 };
 
-  const loadUsers = async () => {
+  const loadUsers = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
-      // FIX: Removed apiUrl parameter. 
-      // fetchUsersList uses USERS_BASE from authConfig internally.
       const data = await fetchUsersList();
       const list = Array.isArray(data) ? data : (Array.isArray(data?.results) ? data.results : []);
       // Keep row identity stable even if backend returns unordered results.
@@ -51,17 +54,15 @@ export function UserListComponent({
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     loadUsers();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refreshTrigger]); // Dependency on apiUrl removed
+  }, [loadUsers, refreshTrigger]);
 
   const handleDelete = async (userId) => {
     if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?'))) return;
     try {
-      // FIX: Removed apiUrl parameter.
       await deleteUser(userId);
       setUsers(prev => prev.filter(u => u.id !== userId));
     } catch (err) {
@@ -71,7 +72,6 @@ export function UserListComponent({
 
   const handleChangeRole = async (userId, newRole) => {
     try {
-      // FIX: Removed apiUrl parameter.
       await updateUserRole(userId, newRole);
       await loadUsers();
     } catch (err) {
@@ -81,7 +81,6 @@ export function UserListComponent({
 
   const handleToggleSupporter = async (userId, newValue) => {
     try {
-      // FIX: Removed apiUrl parameter.
       await updateUserSupportStatus(userId, newValue);
       await loadUsers();
     } catch (err) {
@@ -117,7 +116,7 @@ export function UserListComponent({
     extraContext,
     t,
     reloadUsers: loadUsers,
-  }), [currentUser, extraContext, t]);
+  }), [currentUser, extraContext, t, loadUsers]);
 
   const visibleExtraColumns = useMemo(
     () =>
@@ -172,45 +171,6 @@ export function UserListComponent({
     return getExtraColumnSortValue(column, user);
   };
 
-  const normalizeSortValue = (value) => {
-    if (value === null || value === undefined) return '';
-    if (typeof value === 'boolean') return value ? 1 : 0;
-    if (typeof value === 'number') return value;
-    if (value instanceof Date) return value.getTime();
-    return String(value).toLocaleLowerCase();
-  };
-
-  const compareSortValues = (a, b) => {
-    const av = normalizeSortValue(a);
-    const bv = normalizeSortValue(b);
-
-    if (typeof av === 'number' && typeof bv === 'number') {
-      return av - bv;
-    }
-
-    return String(av).localeCompare(String(bv), undefined, {
-      numeric: true,
-      sensitivity: 'base',
-    });
-  };
-
-  const getSortValueByKey = (user, sortKey) => {
-    if (sortKey === 'id') return Number(user?.id ?? 0);
-    if (sortKey === 'email') return user?.email || '';
-    if (sortKey === 'name') return getUserDisplayName(user);
-    if (sortKey === 'role') return user?.role || '';
-    if (sortKey === 'is_support_agent') return Boolean(user?.is_support_agent);
-
-    if (sortKey.startsWith('extra:')) {
-      const extraKey = sortKey.slice('extra:'.length);
-      const column = visibleExtraColumns.find((col) => String(col.key) === extraKey);
-      if (!column) return '';
-      return getExtraColumnSortValue(column, user);
-    }
-
-    return user?.[sortKey] ?? '';
-  };
-
   const toSearchText = (value) => {
     if (value === null || value === undefined) return '';
     if (Array.isArray(value)) return value.map((item) => toSearchText(item)).join(' ');
@@ -238,37 +198,13 @@ export function UserListComponent({
 
   const normalizedSearch = searchQuery.trim().toLocaleLowerCase();
 
-  const filteredAndSortedUsers = useMemo(() => {
-    const filtered = users.filter((user) => {
+  const filteredUsers = useMemo(() => {
+    return users.filter((user) => {
       if (!normalizedSearch) return true;
       const bucket = getSearchBucketForUser(user);
       return bucket.some((entry) => entry.includes(normalizedSearch));
     });
-
-    const sorted = [...filtered].sort((a, b) => {
-      const aValue = getSortValueByKey(a, sortConfig.key);
-      const bValue = getSortValueByKey(b, sortConfig.key);
-      const cmp = compareSortValues(aValue, bValue);
-      if (cmp !== 0) return sortConfig.direction === 'asc' ? cmp : -cmp;
-
-      // Stable fallback
-      return Number(a?.id ?? 0) - Number(b?.id ?? 0);
-    });
-
-    return sorted;
-  }, [users, normalizedSearch, sortConfig, visibleExtraColumns, currentUser, extraContext, t]);
-
-  const handleSort = (columnKey) => {
-    setSortConfig((prev) => {
-      if (prev.key === columnKey) {
-        return {
-          key: columnKey,
-          direction: prev.direction === 'asc' ? 'desc' : 'asc',
-        };
-      }
-      return { key: columnKey, direction: 'asc' };
-    });
-  };
+  }, [users, normalizedSearch, visibleExtraColumns, currentUser, extraContext, t]);
 
   const runRowAction = async (action, user) => {
     const actionId = `${action.key}:${user.id}`;
@@ -290,6 +226,162 @@ export function UserListComponent({
     }
   };
 
+  const columns = useMemo(() => {
+    const baseColumns = [
+      {
+        field: 'email',
+        headerName: t('Auth.EMAIL_LABEL', 'Email'),
+        minWidth: 240,
+        flex: 1.2,
+      },
+      {
+        field: 'name',
+        headerName: t('Profile.NAME_LABEL', 'Name'),
+        minWidth: 220,
+        flex: 1,
+        valueGetter: (_value, row) => getUserDisplayName(row),
+      },
+      {
+        field: 'role',
+        headerName: t('UserList.ROLE', 'Role'),
+        minWidth: 180,
+        flex: 0.8,
+        valueGetter: (_value, row) => row?.role || 'none',
+        renderCell: (params) => {
+          const user = params.row;
+          return (
+            <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(user)}>
+              <Select
+                value={user.role || 'none'}
+                onChange={(event) => handleChangeRole(user.id, event.target.value)}
+                variant="outlined"
+              >
+                {roles.map((role) => <MenuItem key={role} value={role}>{role}</MenuItem>)}
+              </Select>
+            </FormControl>
+          );
+        },
+      },
+      {
+        field: 'is_support_agent',
+        headerName: t('UserList.SUPPORTER', 'Support Agent'),
+        minWidth: 190,
+        flex: 0.8,
+        valueGetter: (_value, row) => Boolean(row?.is_support_agent),
+        renderCell: (params) => {
+          const user = params.row;
+          return (
+            <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(user)}>
+              <Select
+                value={user.is_support_agent ? 'yes' : 'no'}
+                onChange={(event) => handleToggleSupporter(user.id, event.target.value === 'yes')}
+                variant="outlined"
+              >
+                <MenuItem value="yes">{t('Common.YES', 'Yes')}</MenuItem>
+                <MenuItem value="no">{t('Common.NO', 'No')}</MenuItem>
+              </Select>
+            </FormControl>
+          );
+        },
+      },
+    ];
+
+    const mappedExtraColumns = visibleExtraColumns.map((column) => ({
+      field: `extra:${column.key}`,
+      headerName: typeof column.label === 'function' ? column.label(listContext) : column.label,
+      minWidth: Number(column.minWidth) || 180,
+      flex: Number(column.flex) || 0.9,
+      sortable: column.sortable !== false,
+      align: column.align || 'left',
+      headerAlign: column.align || 'left',
+      valueGetter: (_value, row) => getExtraColumnSortValue(column, row),
+      renderCell: (params) =>
+        column.renderCell({
+          user: params.row,
+          canEdit: canEdit(params.row),
+          currentUser,
+          extraContext,
+          t,
+          reloadUsers: loadUsers,
+        }),
+    }));
+
+    const actionColumn = {
+      field: 'actions',
+      headerName: t('Common.ACTIONS', 'Actions'),
+      minWidth: Math.max(220, 110 + visibleRowActions.length * 110),
+      flex: 1.4,
+      sortable: false,
+      filterable: false,
+      disableColumnMenu: true,
+      renderCell: (params) => {
+        const user = params.row;
+
+        return (
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', py: 0.5 }}>
+            {visibleRowActions.map((action) => {
+              const actionId = `${action.key}:${user.id}`;
+              const isBusy = Boolean(rowActionLoading[actionId]);
+              const isDisabled = typeof action.disabled === 'function'
+                ? action.disabled({
+                    user,
+                    canEdit: canEdit(user),
+                    currentUser,
+                    extraContext,
+                    t,
+                  })
+                : false;
+
+              return (
+                <Button
+                  key={`${action.key}-${user.id}`}
+                  size="small"
+                  variant="outlined"
+                  onClick={() => runRowAction(action, user)}
+                  disabled={isBusy || isDisabled}
+                  sx={actionButtonSx}
+                >
+                  {typeof action.label === 'function'
+                    ? action.label({ user, t, currentUser, canEdit: canEdit(user) })
+                    : action.label}
+                </Button>
+              );
+            })}
+
+            <Tooltip title={t('Common.DELETE', 'Delete')}>
+              <span>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  color="error"
+                  startIcon={<DeleteIcon />}
+                  onClick={() => handleDelete(user.id)}
+                  disabled={!canEdit(user)}
+                  sx={actionButtonSx}
+                >
+                  {t('Common.DELETE', 'Delete')}
+                </Button>
+              </span>
+            </Tooltip>
+          </Box>
+        );
+      },
+    };
+
+    return [...baseColumns, ...mappedExtraColumns, actionColumn];
+  }, [
+    t,
+    roles,
+    visibleExtraColumns,
+    visibleRowActions,
+    listContext,
+    rowActionLoading,
+    currentUser,
+    extraContext,
+    loadUsers,
+    canEdit,
+  ]);
+
   return (
     <Box>
       <Typography variant="h6" gutterBottom>{t('UserList.TITLE', 'All Users')}</Typography>
@@ -307,171 +399,49 @@ export function UserListComponent({
       
       {error && <Alert severity="error" sx={{ mb: 2 }}>{t(error)}</Alert>}
 
-      {loading ? (
+      {loading && (
         <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
-            <CircularProgress />
+          <CircularProgress />
+        </Box>
+      )}
+
+      {!loading && (
+        <Box sx={{ width: '100%', minHeight: 520 }}>
+          <DataGrid
+            rows={filteredUsers}
+            columns={columns}
+            disableRowSelectionOnClick
+            showToolbar
+            getRowHeight={() => 'auto'}
+            pageSizeOptions={[10, 25, 50, 100]}
+            initialState={{
+              sorting: { sortModel: [{ field: 'email', sort: 'asc' }] },
+              pagination: { paginationModel: { pageSize: 25, page: 0 } },
+            }}
+            localeText={{
+              noRowsLabel: t('UserList.NO_USERS', 'No users found.'),
+              toolbarQuickFilterPlaceholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'),
+            }}
+            slotProps={{
+              toolbar: {
+                showQuickFilter: true,
+                quickFilterProps: { debounceMs: 300 },
+              },
+            }}
+            sx={{
+              border: 1,
+              borderColor: 'divider',
+              '& .MuiDataGrid-cell': {
+                display: 'flex',
+                alignItems: 'flex-start',
+                py: 1,
+              },
+              '& .MuiDataGrid-columnHeaders': {
+                bgcolor: 'action.hover',
+              },
+            }}
+          />
         </Box>
-      ) : (
-        <TableContainer component={Paper}>
-          <Table size="small">
-            <TableHead>
-              <TableRow>
-                <TableCell sx={cellSx} sortDirection={sortConfig.key === 'email' ? sortConfig.direction : false}>
-                  <TableSortLabel
-                    active={sortConfig.key === 'email'}
-                    direction={sortConfig.key === 'email' ? sortConfig.direction : 'asc'}
-                    onClick={() => handleSort('email')}
-                  >
-                    {t('Auth.EMAIL_LABEL', 'Email')}
-                  </TableSortLabel>
-                </TableCell>
-                <TableCell sx={cellSx} sortDirection={sortConfig.key === 'name' ? sortConfig.direction : false}>
-                  <TableSortLabel
-                    active={sortConfig.key === 'name'}
-                    direction={sortConfig.key === 'name' ? sortConfig.direction : 'asc'}
-                    onClick={() => handleSort('name')}
-                  >
-                    {t('Profile.NAME_LABEL', 'Name')}
-                  </TableSortLabel>
-                </TableCell>
-                <TableCell sx={cellSx} sortDirection={sortConfig.key === 'role' ? sortConfig.direction : false}>
-                  <TableSortLabel
-                    active={sortConfig.key === 'role'}
-                    direction={sortConfig.key === 'role' ? sortConfig.direction : 'asc'}
-                    onClick={() => handleSort('role')}
-                  >
-                    {t('UserList.ROLE', 'Role')}
-                  </TableSortLabel>
-                </TableCell>
-                <TableCell sx={cellSx} sortDirection={sortConfig.key === 'is_support_agent' ? sortConfig.direction : false}>
-                  <TableSortLabel
-                    active={sortConfig.key === 'is_support_agent'}
-                    direction={sortConfig.key === 'is_support_agent' ? sortConfig.direction : 'asc'}
-                    onClick={() => handleSort('is_support_agent')}
-                  >
-                    {t('UserList.SUPPORTER', 'Support Agent')}
-                  </TableSortLabel>
-                </TableCell>
-                {visibleExtraColumns.map((column) => (
-                  <TableCell
-                    key={column.key}
-                    sx={cellSx}
-                    align={column.align || 'left'}
-                    sortDirection={sortConfig.key === `extra:${column.key}` ? sortConfig.direction : false}
-                  >
-                    <TableSortLabel
-                      active={sortConfig.key === `extra:${column.key}`}
-                      direction={sortConfig.key === `extra:${column.key}` ? sortConfig.direction : 'asc'}
-                      onClick={() => handleSort(`extra:${column.key}`)}
-                    >
-                      {typeof column.label === 'function' ? column.label(listContext) : column.label}
-                    </TableSortLabel>
-                  </TableCell>
-                ))}
-                <TableCell sx={cellSx}>{t('Common.ACTIONS', 'Actions')}</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {filteredAndSortedUsers.map((u) => (
-                <TableRow key={u.id}>
-                  <TableCell sx={cellSx}>{u.email}</TableCell>
-                  <TableCell sx={cellSx}>
-                      {getUserDisplayName(u)}
-                  </TableCell>
-                  <TableCell sx={cellSx}>
-                    <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(u)}>
-                        <Select 
-                            value={u.role || 'none'} 
-                            onChange={(e) => handleChangeRole(u.id, e.target.value)}
-                            variant="outlined"
-                        >
-                            {roles.map(r => <MenuItem key={r} value={r}>{r}</MenuItem>)}
-                        </Select>
-                    </FormControl>
-                  </TableCell>
-                  <TableCell sx={cellSx}>
-                    <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(u)}>
-                      <Select
-                        value={u.is_support_agent ? 'yes' : 'no'}
-                        onChange={(e) => handleToggleSupporter(u.id, e.target.value === 'yes')}
-                        variant="outlined"
-                      >
-                        <MenuItem value="yes">{t('Common.YES', 'Yes')}</MenuItem>
-                        <MenuItem value="no">{t('Common.NO', 'No')}</MenuItem>
-                      </Select>
-                    </FormControl>
-                  </TableCell>
-                  {visibleExtraColumns.map((column) => (
-                    <TableCell key={`${column.key}-${u.id}`} sx={cellSx} align={column.align || 'left'}>
-                      {column.renderCell({
-                        user: u,
-                        canEdit: canEdit(u),
-                        currentUser,
-                        extraContext,
-                        t,
-                        reloadUsers: loadUsers,
-                      })}
-                    </TableCell>
-                  ))}
-                  <TableCell sx={cellSx}>
-                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center' }}>
-                      {visibleRowActions.map((action) => {
-                        const actionId = `${action.key}:${u.id}`;
-                        const isBusy = Boolean(rowActionLoading[actionId]);
-                        const isDisabled = typeof action.disabled === 'function'
-                          ? action.disabled({
-                              user: u,
-                              canEdit: canEdit(u),
-                              currentUser,
-                              extraContext,
-                              t,
-                            })
-                          : false;
-
-                        return (
-                          <Button
-                            key={`${action.key}-${u.id}`}
-                            size="small"
-                            variant="outlined"
-                            onClick={() => runRowAction(action, u)}
-                            disabled={isBusy || isDisabled}
-                            sx={actionButtonSx}
-                          >
-                            {typeof action.label === 'function'
-                              ? action.label({ user: u, t, currentUser, canEdit: canEdit(u) })
-                              : action.label}
-                          </Button>
-                        );
-                      })}
-                        <Tooltip title={t('Common.DELETE')}>
-                          <span>
-                            <Button
-                              size="small"
-                              variant="outlined"
-                              color="error"
-                              startIcon={<DeleteIcon />}
-                              onClick={() => handleDelete(u.id)}
-                              disabled={!canEdit(u)}
-                              sx={actionButtonSx}
-                            >
-                              {t('Common.DELETE', 'Delete')}
-                            </Button>
-                          </span>
-                        </Tooltip>
-                      </Box>
-                  </TableCell>
-                </TableRow>
-              ))}
-              {filteredAndSortedUsers.length === 0 && (
-                  <TableRow>
-                      <TableCell colSpan={5 + visibleExtraColumns.length} align="center">
-                          {t('UserList.NO_USERS', 'No users found.')}
-                      </TableCell>
-                  </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </TableContainer>
       )}
     </Box>
   );

package/src/index.js

@@ -28,6 +28,9 @@ export { AccessCodeManager } from './components/AccessCodeManager';
 export { UserListComponent } from './components/UserListComponent';
 export { UserInviteComponent } from './components/UserInviteComponent';
 export { BulkInviteCsvTab } from './components/BulkInviteCsvTab';
+export { RegistrationMethodsManager } from './components/RegistrationMethodsManager';
+export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCard';
+export { QrSignupManager } from './components/QrSignupManager';
 
 // --- 6. Translations ---
 export { authTranslations } from './i18n/authTranslations';

package/src/pages/AccountPage.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSearchParams } from 'react-router-dom';
 import { 
@@ -23,6 +23,9 @@ import { SecurityComponent } from '../components/SecurityComponent';
 import { UserListComponent } from '../components/UserListComponent';
 import { UserInviteComponent } from '../components/UserInviteComponent';
 import { AccessCodeManager } from '../components/AccessCodeManager';
+import { RegistrationMethodsManager } from '../components/RegistrationMethodsManager';
+import { AuthFactorRequirementCard } from '../components/AuthFactorRequirementCard';
+import { QrSignupManager } from '../components/QrSignupManager';
 import { SupportRecoveryRequestsTab } from '../components/SupportRecoveryRequestsTab';
 import { BulkInviteCsvTab } from '../components/BulkInviteCsvTab';
 import { updateUserProfile } from '../auth/authApi'; // Ggf. Pfad anpassen
@@ -40,6 +43,7 @@ export function AccountPage({
   const { t } = useTranslation();
   const { user, login, loading } = useContext(AuthContext);
   const [searchParams, setSearchParams] = useSearchParams();
+  const [authPolicy, setAuthPolicy] = useState(null);
 
   // 1. URL State Management
   const currentTabRaw = searchParams.get('tab') || 'profile';
@@ -188,6 +192,18 @@ export function AccountPage({
       {safeTab === 'invite' && (
         <Box sx={{ mt: 2 }}>
           <Stack spacing={2.5}>
+            {(isSuperUser || perms.can_invite) && (
+              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+                <RegistrationMethodsManager onPolicyChange={setAuthPolicy} />
+              </Paper>
+            )}
+
+            {(isSuperUser || perms.can_invite) && (
+              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+                <AuthFactorRequirementCard />
+              </Paper>
+            )}
+
             {(isSuperUser || perms.can_invite) && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <UserInviteComponent />
@@ -208,6 +224,12 @@ export function AccountPage({
                 <BulkInviteCsvTab {...bulkInviteCsvProps} />
               </Paper>
             )}
+
+            {(isSuperUser || perms.can_invite) && (
+              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+                <QrSignupManager enabled={Boolean(authPolicy?.allow_self_signup_qr)} />
+              </Paper>
+            )}
           </Stack>
         </Box>
       )}