@micha.bigler/ui-core-micha 2.1.16 → 2.1.18

package/dist/components/UserListComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useState, useEffect } from 'react';
-import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, FormControl, Select, MenuItem, Button, IconButton, Tooltip, CircularProgress, Alert } from '@mui/material';
+import { Box, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, FormControl, Select, MenuItem, Button, Tooltip, CircularProgress, Alert, TableSortLabel, TextField } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
 import { fetchUsersList, deleteUser, updateUserRole, updateUserSupportStatus } from '../auth/authApi';
@@ -11,6 +11,11 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
     const [loading, setLoading] = useState(true);
     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 () => {
         setLoading(true);
         setError(null);
@@ -18,7 +23,15 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
             // FIX: Removed apiUrl parameter. 
             // fetchUsersList uses USERS_BASE from authConfig internally.
             const data = await fetchUsersList();
-            setUsers(data);
+            const list = Array.isArray(data) ? data : (Array.isArray(data === null || data === void 0 ? void 0 : data.results) ? data.results : []);
+            // Keep row identity stable even if backend returns unordered results.
+            list.sort((a, b) => {
+                var _a, _b;
+                const aId = Number((_a = a === null || a === void 0 ? void 0 : a.id) !== null && _a !== void 0 ? _a : 0);
+                const bId = Number((_b = b === null || b === void 0 ? void 0 : b.id) !== null && _b !== void 0 ? _b : 0);
+                return aId - bId;
+            });
+            setUsers(list);
         }
         catch (err) {
             setError(err.code || 'Auth.USER_LIST_FAILED');
@@ -47,7 +60,7 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         try {
             // FIX: Removed apiUrl parameter.
             await updateUserRole(userId, newRole);
-            loadUsers();
+            await loadUsers();
         }
         catch (err) {
             alert(t(err.code || 'Auth.USER_ROLE_UPDATE_FAILED'));
@@ -57,7 +70,7 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         try {
             // FIX: Removed apiUrl parameter.
             await updateUserSupportStatus(userId, newValue);
-            loadUsers();
+            await loadUsers();
         }
         catch (err) {
             alert(t(err.code || 'Auth.USER_UPDATE_FAILED'));
@@ -95,6 +108,135 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
     }), [currentUser, extraContext, t]);
     const visibleExtraColumns = useMemo(() => extraColumns.filter((column) => typeof column.visible === 'function' ? column.visible(listContext) : true), [extraColumns, listContext]);
     const visibleRowActions = useMemo(() => extraRowActions.filter((action) => typeof action.visible === 'function' ? action.visible(listContext) : true), [extraRowActions, listContext]);
+    const getUserDisplayName = (user) => {
+        if ((user === null || user === void 0 ? void 0 : user.first_name) || (user === null || user === void 0 ? void 0 : user.last_name)) {
+            return `${user.first_name || ''} ${user.last_name || ''}`.trim();
+        }
+        return (user === null || user === void 0 ? void 0 : user.username) || '';
+    };
+    const getExtraColumnSortValue = (column, user) => {
+        var _a;
+        const valueContext = { user, currentUser, extraContext, t };
+        if (typeof column.getSortValue === 'function') {
+            return column.getSortValue(valueContext);
+        }
+        if (typeof column.sortValue === 'function') {
+            return column.sortValue(valueContext);
+        }
+        if (typeof column.getSearchValue === 'function') {
+            return column.getSearchValue(valueContext);
+        }
+        if ((user === null || user === void 0 ? void 0 : user[column.key]) !== undefined)
+            return user[column.key];
+        if (((_a = user === null || user === void 0 ? void 0 : user.profile) === null || _a === void 0 ? void 0 : _a[column.key]) !== undefined)
+            return user.profile[column.key];
+        return '';
+    };
+    const getExtraColumnSearchValue = (column, user) => {
+        const valueContext = { user, currentUser, extraContext, t };
+        if (typeof column.getSearchValue === 'function') {
+            return column.getSearchValue(valueContext);
+        }
+        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) => {
+        var _a, _b;
+        if (sortKey === 'id')
+            return Number((_a = user === null || user === void 0 ? void 0 : user.id) !== null && _a !== void 0 ? _a : 0);
+        if (sortKey === 'email')
+            return (user === null || user === void 0 ? void 0 : user.email) || '';
+        if (sortKey === 'name')
+            return getUserDisplayName(user);
+        if (sortKey === 'role')
+            return (user === null || user === void 0 ? void 0 : user.role) || '';
+        if (sortKey === 'is_support_agent')
+            return Boolean(user === null || user === void 0 ? void 0 : 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 (_b = user === null || user === void 0 ? void 0 : user[sortKey]) !== null && _b !== void 0 ? _b : '';
+    };
+    const toSearchText = (value) => {
+        if (value === null || value === undefined)
+            return '';
+        if (Array.isArray(value))
+            return value.map((item) => toSearchText(item)).join(' ');
+        if (typeof value === 'object')
+            return Object.values(value).map((item) => toSearchText(item)).join(' ');
+        return String(value).toLocaleLowerCase();
+    };
+    const getSearchBucketForUser = (user) => {
+        const baseValues = [
+            user === null || user === void 0 ? void 0 : user.id,
+            user === null || user === void 0 ? void 0 : user.email,
+            user === null || user === void 0 ? void 0 : user.username,
+            user === null || user === void 0 ? void 0 : user.first_name,
+            user === null || user === void 0 ? void 0 : user.last_name,
+            getUserDisplayName(user),
+            user === null || user === void 0 ? void 0 : user.role,
+            user === null || user === void 0 ? void 0 : user.language,
+            (user === null || user === void 0 ? void 0 : user.is_support_agent) ? t('Common.YES', 'Yes') : t('Common.NO', 'No'),
+        ];
+        const extraValues = visibleExtraColumns.map((column) => getExtraColumnSearchValue(column, user));
+        return [...baseValues, ...extraValues].map((value) => toSearchText(value)).filter(Boolean);
+    };
+    const normalizedSearch = searchQuery.trim().toLocaleLowerCase();
+    const filteredAndSortedUsers = useMemo(() => {
+        const filtered = users.filter((user) => {
+            if (!normalizedSearch)
+                return true;
+            const bucket = getSearchBucketForUser(user);
+            return bucket.some((entry) => entry.includes(normalizedSearch));
+        });
+        const sorted = [...filtered].sort((a, b) => {
+            var _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 = a === null || a === void 0 ? void 0 : a.id) !== null && _a !== void 0 ? _a : 0) - Number((_b = b === null || b === void 0 ? void 0 : b.id) !== null && _b !== void 0 ? _b : 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' };
+        });
+    };
     const runRowAction = async (action, user) => {
         const actionId = `${action.key}:${user.id}`;
         setRowActionLoading((prev) => (Object.assign(Object.assign({}, prev), { [actionId]: true })));
@@ -116,27 +258,27 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
             setRowActionLoading((prev) => (Object.assign(Object.assign({}, prev), { [actionId]: false })));
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Profile.NAME_LABEL', 'Name') }), _jsx(TableCell, { children: t('UserList.ROLE', 'Role') }), _jsx(TableCell, { children: t('UserList.SUPPORTER', 'Support Agent') }), visibleExtraColumns.map((column) => (_jsx(TableCell, { align: column.align || 'left', children: typeof column.label === 'function' ? column.label(listContext) : column.label }, column.key))), _jsx(TableCell, { children: t('Common.ACTIONS', 'Actions') })] }) }), _jsxs(TableBody, { children: [users.map((u) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: u.email }), _jsx(TableCell, { children: u.first_name || u.last_name ? `${u.first_name} ${u.last_name}` : u.username }), _jsx(TableCell, { children: _jsx(FormControl, { size: "small", fullWidth: true, disabled: !canEdit(u), children: _jsx(Select, { value: u.role || 'none', onChange: (e) => handleChangeRole(u.id, e.target.value), variant: "standard", disableUnderline: true, children: roles.map(r => _jsx(MenuItem, { value: r, children: r }, r)) }) }) }), _jsx(TableCell, { children: _jsx(Button, { size: "small", variant: u.is_support_agent ? 'contained' : 'outlined', color: u.is_support_agent ? 'primary' : 'inherit', onClick: () => handleToggleSupporter(u.id, !u.is_support_agent), disabled: !canEdit(u), sx: { textTransform: 'none' }, children: u.is_support_agent ? t('Common.YES') : t('Common.NO') }) }), visibleExtraColumns.map((column) => (_jsx(TableCell, { align: column.align || 'left', children: column.renderCell({
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), _jsx(Box, { sx: { mb: 2, maxWidth: 420 }, children: _jsx(TextField, { fullWidth: true, size: "small", label: t('Common.SEARCH', 'Search'), placeholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'), value: searchQuery, onChange: (event) => setSearchQuery(event.target.value) }) }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: cellSx, sortDirection: sortConfig.key === 'email' ? sortConfig.direction : false, children: _jsx(TableSortLabel, { active: sortConfig.key === 'email', direction: sortConfig.key === 'email' ? sortConfig.direction : 'asc', onClick: () => handleSort('email'), children: t('Auth.EMAIL_LABEL', 'Email') }) }), _jsx(TableCell, { sx: cellSx, sortDirection: sortConfig.key === 'name' ? sortConfig.direction : false, children: _jsx(TableSortLabel, { active: sortConfig.key === 'name', direction: sortConfig.key === 'name' ? sortConfig.direction : 'asc', onClick: () => handleSort('name'), children: t('Profile.NAME_LABEL', 'Name') }) }), _jsx(TableCell, { sx: cellSx, sortDirection: sortConfig.key === 'role' ? sortConfig.direction : false, children: _jsx(TableSortLabel, { active: sortConfig.key === 'role', direction: sortConfig.key === 'role' ? sortConfig.direction : 'asc', onClick: () => handleSort('role'), children: t('UserList.ROLE', 'Role') }) }), _jsx(TableCell, { sx: cellSx, sortDirection: sortConfig.key === 'is_support_agent' ? sortConfig.direction : false, children: _jsx(TableSortLabel, { active: sortConfig.key === 'is_support_agent', direction: sortConfig.key === 'is_support_agent' ? sortConfig.direction : 'asc', onClick: () => handleSort('is_support_agent'), children: t('UserList.SUPPORTER', 'Support Agent') }) }), visibleExtraColumns.map((column) => (_jsx(TableCell, { sx: cellSx, align: column.align || 'left', sortDirection: sortConfig.key === `extra:${column.key}` ? sortConfig.direction : false, children: _jsx(TableSortLabel, { active: sortConfig.key === `extra:${column.key}`, direction: sortConfig.key === `extra:${column.key}` ? sortConfig.direction : 'asc', onClick: () => handleSort(`extra:${column.key}`), children: typeof column.label === 'function' ? column.label(listContext) : column.label }) }, column.key))), _jsx(TableCell, { sx: cellSx, children: t('Common.ACTIONS', 'Actions') })] }) }), _jsxs(TableBody, { children: [filteredAndSortedUsers.map((u) => (_jsxs(TableRow, { children: [_jsx(TableCell, { sx: cellSx, children: u.email }), _jsx(TableCell, { sx: cellSx, children: getUserDisplayName(u) }), _jsx(TableCell, { sx: cellSx, children: _jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(u), children: _jsx(Select, { value: u.role || 'none', onChange: (e) => handleChangeRole(u.id, e.target.value), variant: "outlined", children: roles.map(r => _jsx(MenuItem, { value: r, children: r }, r)) }) }) }), _jsx(TableCell, { sx: cellSx, children: _jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(u), children: _jsxs(Select, { value: u.is_support_agent ? 'yes' : 'no', onChange: (e) => handleToggleSupporter(u.id, e.target.value === 'yes'), variant: "outlined", children: [_jsx(MenuItem, { value: "yes", children: t('Common.YES', 'Yes') }), _jsx(MenuItem, { value: "no", children: t('Common.NO', 'No') })] }) }) }), visibleExtraColumns.map((column) => (_jsx(TableCell, { sx: cellSx, align: column.align || 'left', children: column.renderCell({
                                                 user: u,
                                                 canEdit: canEdit(u),
                                                 currentUser,
                                                 extraContext,
                                                 t,
                                                 reloadUsers: loadUsers,
-                                            }) }, `${column.key}-${u.id}`))), _jsxs(TableCell, { children: [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 (_jsx(Button, { size: "small", onClick: () => runRowAction(action, u), disabled: isBusy || isDisabled, sx: { mr: 1, mb: 0.5, textTransform: 'none' }, children: typeof action.label === 'function'
-                                                            ? action.label({ user: u, t, currentUser, canEdit: canEdit(u) })
-                                                            : action.label }, `${action.key}-${u.id}`));
-                                                }), _jsx(Tooltip, { title: t('Common.DELETE'), children: _jsx("span", { children: _jsx(IconButton, { onClick: () => handleDelete(u.id), color: "error", disabled: !canEdit(u), children: _jsx(DeleteIcon, {}) }) }) })] })] }, u.id))), users.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5 + visibleExtraColumns.length, align: "center", children: t('UserList.NO_USERS', 'No users found.') }) }))] })] }) }))] }));
+                                            }) }, `${column.key}-${u.id}`))), _jsx(TableCell, { sx: cellSx, children: _jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center' }, children: [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 (_jsx(Button, { size: "small", variant: "outlined", onClick: () => runRowAction(action, u), disabled: isBusy || isDisabled, sx: actionButtonSx, children: typeof action.label === 'function'
+                                                                ? action.label({ user: u, t, currentUser, canEdit: canEdit(u) })
+                                                                : action.label }, `${action.key}-${u.id}`));
+                                                    }), _jsx(Tooltip, { title: t('Common.DELETE'), children: _jsx("span", { children: _jsx(Button, { size: "small", variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: () => handleDelete(u.id), disabled: !canEdit(u), sx: actionButtonSx, children: t('Common.DELETE', 'Delete') }) }) })] }) })] }, u.id))), filteredAndSortedUsers.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5 + visibleExtraColumns.length, align: "center", children: t('UserList.NO_USERS', 'No users found.') }) }))] })] }) }))] }));
 }

package/dist/i18n/authTranslations.js

@@ -810,6 +810,36 @@ export const authTranslations = {
         "en": "I allow convenience cookies.",
         "sw": "Ninaruhusu vidakuzi vya urahisi."
     },
+    "Profile.PRIVACY_STATEMENT_TITLE": {
+        "de": "Datenschutzerklärung",
+        "fr": "Déclaration de confidentialité",
+        "en": "Privacy statement",
+        "sw": "Taarifa ya faragha"
+    },
+    "Profile.COOKIES_STATEMENT_TITLE": {
+        "de": "Cookie-Richtlinie",
+        "fr": "Politique relative aux cookies",
+        "en": "Cookie statement",
+        "sw": "Taarifa ya vidakuzi"
+    },
+    "Profile.STATEMENT_LOADING": {
+        "de": "Statement wird geladen...",
+        "fr": "Chargement du document...",
+        "en": "Loading statement...",
+        "sw": "Inapakia taarifa..."
+    },
+    "Profile.PRIVACY_STATEMENT_EMPTY": {
+        "de": "Die Datenschutzerklärung ist derzeit nicht verfügbar.",
+        "fr": "La déclaration de confidentialité n'est actuellement pas disponible.",
+        "en": "Privacy statement is currently unavailable.",
+        "sw": "Taarifa ya faragha haipatikani kwa sasa."
+    },
+    "Profile.COOKIES_STATEMENT_EMPTY": {
+        "de": "Die Cookie-Richtlinie ist derzeit nicht verfügbar.",
+        "fr": "La politique relative aux cookies n'est actuellement pas disponible.",
+        "en": "Cookie statement is currently unavailable.",
+        "sw": "Taarifa ya vidakuzi haipatikani kwa sasa."
+    },
     "Profile.SAVE_BUTTON": {
         "de": "Speichern",
         "fr": "Enregistrer",

package/dist/pages/AccountPage.js

@@ -2,15 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSearchParams } from 'react-router-dom';
-import { Tabs, Tab, Box, Typography, Alert, CircularProgress } from '@mui/material';
+import { Tabs, Tab, Box, Typography, Alert, CircularProgress, Paper, Stack, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-// Internal Library Components
-// Stellen Sie sicher, dass diese Pfade korrekt auf Ihre Library zeigen!
-// Da Sie '@micha.bigler/ui-core-micha' nutzen, sollten die Imports ggf. so aussehen:
-import { AuthContext,
-// ... andere Komponenten aus der Lib importieren, falls sie dort exportiert sind
-// Wenn sie lokal sind, lassen Sie die relativen Pfade.
- } from '@micha.bigler/ui-core-micha';
+// Internal context
+import { AuthContext } from '../auth/AuthContext';
 // Falls die Komponenten noch lokal sind:
 import { WidePage } from '../layout/PageLayout';
 import { ProfileComponent } from '../components/ProfileComponent';
@@ -27,7 +22,10 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const { user, login, loading } = useContext(AuthContext);
     const [searchParams, setSearchParams] = useSearchParams();
     // 1. URL State Management
-    const currentTab = searchParams.get('tab') || 'profile';
+    const currentTabRaw = searchParams.get('tab') || 'profile';
+    const currentTab = ['invite', 'bulk-invite-csv', 'access'].includes(currentTabRaw)
+        ? 'invite'
+        : currentTabRaw;
     const fromRecovery = searchParams.get('from') === 'recovery';
     const fromWeakLogin = searchParams.get('from') === 'weak_login';
     // 2. Data & Permissions
@@ -55,17 +53,8 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
         if (isSuperUser || perms.can_view_users) {
             list.push({ value: 'users', label: t('Account.TAB_USERS', 'Users') });
         }
-        if (isSuperUser || perms.can_invite) {
+        if (isSuperUser || perms.can_invite || perms.can_manage_access_codes) {
             list.push({ value: 'invite', label: t('Account.TAB_INVITE', 'Invite') });
-            if (showBulkInviteCsvTab) {
-                list.push({
-                    value: 'bulk-invite-csv',
-                    label: t('Account.TAB_BULK_INVITE_CSV', 'Bulk Invite CSV'),
-                });
-            }
-        }
-        if (isSuperUser || perms.can_manage_access_codes) {
-            list.push({ value: 'access', label: t('Account.TAB_ACCESS_CODES', 'Access Codes') });
         }
         if (isSuperUser || perms.can_view_support) {
             list.push({ value: 'support', label: t('Account.TAB_SUPPORT', 'Support') });
@@ -82,7 +71,7 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
             }
         });
         return list;
-    }, [user, perms, t, isSuperUser, showBulkInviteCsvTab, extraTabs]);
+    }, [user, perms, t, isSuperUser, extraTabs]);
     // 4. Loading & Auth Checks
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 10 }, children: _jsx(CircularProgress, {}) }));
@@ -94,9 +83,9 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const activeTabExists = tabs.some(t => t.value === currentTab);
     // Falls der Tab nicht erlaubt ist (z.B. manuell in URL eingegeben), Fallback auf 'profile'
     const safeTab = activeTabExists ? currentTab : 'profile';
-    const builtInTabValues = new Set(['profile', 'security', 'users', 'invite', 'bulk-invite-csv', 'access', 'support']);
+    const builtInTabValues = new Set(['profile', 'security', 'users', 'invite', 'support']);
     const activeExtraTab = builtInTabValues.has(safeTab)
         ? null
         : extraTabs.find((tab) => tab.value === safeTab);
-    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserInviteComponent, {}) })), safeTab === 'bulk-invite-csv' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), safeTab === 'access' && (_jsxs(Box, { sx: { mt: 2 }, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] }));
+    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [(isSuperUser || perms.can_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(UserInviteComponent, {}) })), (isSuperUser || perms.can_manage_access_codes) && (_jsxs(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), (isSuperUser || perms.can_invite) && showBulkInviteCsvTab && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] }));
 }

package/dist/pages/LoginPage.js

@@ -16,7 +16,7 @@ import { MfaLoginComponent } from '../components/MfaLoginComponent';
 export function LoginPage() {
     const navigate = useNavigate();
     const location = useLocation();
-    const { login } = useContext(AuthContext);
+    const { login, authMethods } = useContext(AuthContext);
     const { t } = useTranslation();
     // State
     const [step, setStep] = useState('credentials'); // 'credentials' | 'mfa'
@@ -32,6 +32,12 @@ export function LoginPage() {
         : recoveryTokenRaw;
     // Backward-compatible fallback for legacy links using query parameters.
     const recoveryEmail = hashParams.get('email') || params.get('email') || '';
+    useEffect(() => {
+        const socialError = params.get('error') || params.get('social');
+        if (socialError) {
+            setErrorKey('Auth.SOCIAL_LOGIN_FAILED');
+        }
+    }, [location.search]);
     // --- Helper: Central Success Logic ---
     const handleLoginSuccess = (user) => {
         var _a;
@@ -113,6 +119,14 @@ export function LoginPage() {
         setMfaState(null);
         setErrorKey(null);
     };
+    const socialProviders = Array.isArray(authMethods === null || authMethods === void 0 ? void 0 : authMethods.social_providers)
+        ? authMethods.social_providers
+        : [];
+    const passwordLoginEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.password_login) || Boolean(recoveryToken);
+    const socialLoginEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.social_login) && socialProviders.length > 0;
+    const passkeyLoginEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.passkey_login);
+    const signupEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.signup);
+    const passwordResetEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.password_reset);
     // --- Render ---
-    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: handleSubmitCredentials, onForgotPassword: () => navigate('/reset-request-password'), onSocialLogin: (provider) => startSocialLogin(provider), onPasskeyLogin: handlePasskeyLoginInitial, onSignUp: () => navigate('/signup'), disabled: submitting, initialIdentifier: recoveryEmail })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
+    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: passwordLoginEnabled ? handleSubmitCredentials : null, onForgotPassword: passwordResetEnabled ? () => navigate('/reset-request-password') : null, onSocialLogin: socialLoginEnabled ? (provider) => startSocialLogin(provider) : null, socialProviders: socialProviders, onPasskeyLogin: passkeyLoginEnabled ? handlePasskeyLoginInitial : null, onSignUp: signupEnabled ? () => navigate('/signup') : null, disabled: submitting, initialIdentifier: recoveryEmail })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
 }

package/dist/utils/authService.js

@@ -101,9 +101,48 @@ export async function authenticateMfaWithPasskey() {
     const credentialJson = serializeCredential(assertion);
     return authenticateWithMFA({ credential: credentialJson });
 }
-export function startSocialLogin(provider) {
+function getCsrfTokenFromCookie() {
+    if (typeof document === 'undefined' || !document.cookie)
+        return null;
+    const match = document.cookie.match(/(?:^|; )csrftoken=([^;]+)/);
+    return match ? decodeURIComponent(match[1]) : null;
+}
+function submitSocialRedirectForm({ provider, callbackUrl, csrfToken }) {
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = `${HEADLESS_BASE}/auth/provider/redirect`;
+    form.style.display = 'none';
+    const fields = {
+        provider,
+        process: 'login',
+        callback_url: callbackUrl,
+        csrfmiddlewaretoken: csrfToken,
+    };
+    Object.entries(fields).forEach(([name, value]) => {
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = name;
+        input.value = String(value);
+        form.appendChild(input);
+    });
+    document.body.appendChild(form);
+    form.submit();
+}
+export async function startSocialLogin(provider) {
     if (typeof window === 'undefined') {
         throw normaliseApiError(new Error('Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'), 'Auth.SOCIAL_LOGIN_NOT_IN_BROWSER');
     }
-    window.location.href = `/accounts/${provider}/login/?process=login`;
+    try {
+        // Ensures csrftoken cookie exists before form POST.
+        await apiClient.get('/api/csrf/');
+    }
+    catch (_a) {
+        // Continue; token might already be present.
+    }
+    const csrfToken = getCsrfTokenFromCookie();
+    if (!csrfToken) {
+        throw normaliseApiError(new Error('Auth.SOCIAL_LOGIN_FAILED'), 'Auth.SOCIAL_LOGIN_FAILED');
+    }
+    const callbackUrl = `${window.location.origin}/login`;
+    submitSocialRedirectForm({ provider, callbackUrl, csrfToken });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.1.16",
+  "version": "2.1.18",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,
@@ -24,3 +24,4 @@
     "react-i18next": "^16.3.5"
   }
 }
+

package/src/auth/AuthContext.jsx

@@ -6,16 +6,65 @@ import React, {
 } from 'react';
 import { ensureCsrfToken } from './apiClient'; // <--- IMPORT ADDED
 import {
+  fetchAuthMethods,
   fetchCurrentUser,
   logoutSession,
 } from './authApi';
 
 export const AuthContext = createContext(null);
 
+const DEFAULT_AUTH_METHODS = {
+  password_login: true,
+  password_reset: true,
+  signup: true,
+  password_change: true,
+  social_login: true,
+  social_providers: ['google', 'microsoft'],
+  passkey_login: true,
+  passkeys_manage: true,
+  mfa_totp: true,
+  mfa_recovery_codes: true,
+  mfa_enabled: true,
+};
+
 export const AuthProvider = ({ children }) => {
   const [user, setUser] = useState(null);
+  const [authMethods, setAuthMethods] = useState(DEFAULT_AUTH_METHODS);
   const [loading, setLoading] = useState(true);
 
+  const mapUserFromApi = (data) => {
+    const profile = data?.profile || {};
+    return {
+      ...data,
+      id: data?.id,
+      username: data?.username,
+      email: data?.email,
+      first_name: data?.first_name,
+      last_name: data?.last_name,
+      role: data?.role ?? profile?.role ?? null,
+      language: data?.language ?? profile?.language ?? 'en',
+      is_superuser: Boolean(data?.is_superuser),
+      is_new: Boolean(data?.is_new ?? profile?.is_new),
+      is_invited: Boolean(data?.is_invited ?? profile?.is_invited),
+      accepted_privacy_statement: Boolean(
+        data?.accepted_privacy_statement ?? profile?.accepted_privacy_statement
+      ),
+      accepted_convenience_cookies: Boolean(
+        data?.accepted_convenience_cookies ?? profile?.accepted_convenience_cookies
+      ),
+      is_support_agent: Boolean(data?.is_support_agent ?? profile?.is_support_agent),
+      support_contact_id: data?.support_contact_id ?? profile?.support_contact_id ?? null,
+      security_state: data?.security_state,
+      available_roles: data?.available_roles || [],
+      ui_permissions: data?.ui_permissions || {},
+      can_manage_support_agents: Boolean(data?.can_manage_support_agents),
+      can_manage: Boolean(data?.can_manage),
+      is_active: data?.is_active,
+      last_login: data?.last_login,
+      date_joined: data?.date_joined,
+    };
+  };
+
   useEffect(() => {
     let isMounted = true;
 
@@ -24,23 +73,21 @@ export const AuthProvider = ({ children }) => {
         // 1) Ensure CSRF cookie exists using the specific client
         await ensureCsrfToken();
 
-        // 2) Load user
+        // 2) Load auth methods (public)
+        try {
+          const methods = await fetchAuthMethods();
+          if (isMounted && methods && typeof methods === 'object') {
+            setAuthMethods((prev) => ({ ...prev, ...methods }));
+          }
+        } catch {
+          // Keep defaults; login UI remains usable.
+        }
+
+        // 3) Load user
         const data = await fetchCurrentUser();
         
         if (isMounted) {
-          // Map data to ensure consistent structure
-          setUser({
-            id: data.id,
-            username: data.username,
-            email: data.email,
-            first_name: data.first_name,
-            last_name: data.last_name,
-            role: data.role,
-            is_superuser: data.is_superuser,
-            security_state: data.security_state,
-            available_roles: data.available_roles,
-            ui_permissions: data.ui_permissions,
-          });
+          setUser(mapUserFromApi(data));
         }
       } catch (err) {
         // Silent failure on 401/403 is expected (user not logged in)
@@ -58,7 +105,7 @@ export const AuthProvider = ({ children }) => {
   const login = (userData) => {
     setUser((prev) => ({
       ...prev,
-      ...userData,
+      ...mapUserFromApi(userData),
     }));
   };
 
@@ -77,6 +124,7 @@ export const AuthProvider = ({ children }) => {
     <AuthContext.Provider
       value={{
         user,
+        authMethods,
         loading,
         login,
         logout,
@@ -85,4 +133,4 @@ export const AuthProvider = ({ children }) => {
       {children}
     </AuthContext.Provider>
   );
-};
+};

package/src/auth/authApi.jsx

@@ -18,6 +18,11 @@ export async function fetchCurrentUser() {
   return res.data;
 }
 
+export async function fetchAuthMethods() {
+  const res = await apiClient.get('/api/auth-methods/');
+  return res.data || {};
+}
+
 export async function updateUserProfile(data) {
   try {
     const res = await apiClient.patch(`${USERS_BASE}/current/`, data);
@@ -27,6 +32,22 @@ export async function updateUserProfile(data) {
   }
 }
 
+function normalizeStatementText(data) {
+  if (typeof data === 'string') return data;
+  if (data && typeof data.content === 'string') return data.content;
+  return '';
+}
+
+export async function fetchPrivacyStatement() {
+  const res = await apiClient.get('/api/utils/privacy/');
+  return normalizeStatementText(res.data);
+}
+
+export async function fetchCookieStatement() {
+  const res = await apiClient.get('/api/utils/cookie/');
+  return normalizeStatementText(res.data);
+}
+
 export async function fetchHeadlessSession() {
   const res = await apiClient.get(`${HEADLESS_BASE}/auth/session`);
   return res.data;
@@ -411,4 +432,4 @@ export async function updateUserSupportStatus(userId, isSupportAgent) {
   } catch (error) {
     throw normaliseApiError(error, 'Auth.USER_SUPPORT_UPDATE_FAILED');
   }
-}
+}