@micha.bigler/ui-core-micha 2.2.5 → 2.2.7

package/dist/auth/AuthContext.js

@@ -26,9 +26,9 @@ export const AuthProvider = ({ children }) => {
     const [authMethods, setAuthMethods] = useState(DEFAULT_AUTH_METHODS);
     const [loading, setLoading] = useState(true);
     const mapUserFromApi = (data) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const profile = (data === null || data === void 0 ? void 0 : data.profile) || {};
-        return Object.assign(Object.assign({}, data), { id: data === null || data === void 0 ? void 0 : data.id, username: data === null || data === void 0 ? void 0 : data.username, email: data === null || data === void 0 ? void 0 : data.email, first_name: data === null || data === void 0 ? void 0 : data.first_name, last_name: data === null || data === void 0 ? void 0 : data.last_name, role: (_b = (_a = data === null || data === void 0 ? void 0 : data.role) !== null && _a !== void 0 ? _a : profile === null || profile === void 0 ? void 0 : profile.role) !== null && _b !== void 0 ? _b : null, language: (_d = (_c = data === null || data === void 0 ? void 0 : data.language) !== null && _c !== void 0 ? _c : profile === null || profile === void 0 ? void 0 : profile.language) !== null && _d !== void 0 ? _d : 'en', is_superuser: Boolean(data === null || data === void 0 ? void 0 : data.is_superuser), is_new: Boolean((_e = data === null || data === void 0 ? void 0 : data.is_new) !== null && _e !== void 0 ? _e : profile === null || profile === void 0 ? void 0 : profile.is_new), is_invited: Boolean((_f = data === null || data === void 0 ? void 0 : data.is_invited) !== null && _f !== void 0 ? _f : profile === null || profile === void 0 ? void 0 : profile.is_invited), accepted_privacy_statement: Boolean((_g = data === null || data === void 0 ? void 0 : data.accepted_privacy_statement) !== null && _g !== void 0 ? _g : profile === null || profile === void 0 ? void 0 : profile.accepted_privacy_statement), accepted_convenience_cookies: Boolean((_h = data === null || data === void 0 ? void 0 : data.accepted_convenience_cookies) !== null && _h !== void 0 ? _h : profile === null || profile === void 0 ? void 0 : profile.accepted_convenience_cookies), is_support_agent: Boolean((_j = data === null || data === void 0 ? void 0 : data.is_support_agent) !== null && _j !== void 0 ? _j : profile === null || profile === void 0 ? void 0 : profile.is_support_agent), support_contact_id: (_l = (_k = data === null || data === void 0 ? void 0 : data.support_contact_id) !== null && _k !== void 0 ? _k : profile === null || profile === void 0 ? void 0 : profile.support_contact_id) !== null && _l !== void 0 ? _l : null, security_state: data === null || data === void 0 ? void 0 : data.security_state, available_roles: (data === null || data === void 0 ? void 0 : data.available_roles) || [], ui_permissions: (data === null || data === void 0 ? void 0 : data.ui_permissions) || {}, can_manage_support_agents: Boolean(data === null || data === void 0 ? void 0 : data.can_manage_support_agents), can_manage: Boolean(data === null || data === void 0 ? void 0 : data.can_manage), is_active: data === null || data === void 0 ? void 0 : data.is_active, last_login: data === null || data === void 0 ? void 0 : data.last_login, date_joined: data === null || data === void 0 ? void 0 : data.date_joined });
+        return Object.assign(Object.assign({}, data), { id: data === null || data === void 0 ? void 0 : data.id, username: data === null || data === void 0 ? void 0 : data.username, email: data === null || data === void 0 ? void 0 : data.email, first_name: data === null || data === void 0 ? void 0 : data.first_name, last_name: data === null || data === void 0 ? void 0 : data.last_name, role: (_b = (_a = data === null || data === void 0 ? void 0 : data.role) !== null && _a !== void 0 ? _a : profile === null || profile === void 0 ? void 0 : profile.role) !== null && _b !== void 0 ? _b : null, language: (_d = (_c = data === null || data === void 0 ? void 0 : data.language) !== null && _c !== void 0 ? _c : profile === null || profile === void 0 ? void 0 : profile.language) !== null && _d !== void 0 ? _d : 'en', is_superuser: Boolean(data === null || data === void 0 ? void 0 : data.is_superuser), is_new: Boolean((_e = data === null || data === void 0 ? void 0 : data.is_new) !== null && _e !== void 0 ? _e : profile === null || profile === void 0 ? void 0 : profile.is_new), is_invited: Boolean((_f = data === null || data === void 0 ? void 0 : data.is_invited) !== null && _f !== void 0 ? _f : profile === null || profile === void 0 ? void 0 : profile.is_invited), accepted_privacy_statement: Boolean((_g = data === null || data === void 0 ? void 0 : data.accepted_privacy_statement) !== null && _g !== void 0 ? _g : profile === null || profile === void 0 ? void 0 : profile.accepted_privacy_statement), accepted_convenience_cookies: Boolean((_h = data === null || data === void 0 ? void 0 : data.accepted_convenience_cookies) !== null && _h !== void 0 ? _h : profile === null || profile === void 0 ? void 0 : profile.accepted_convenience_cookies), is_support_agent: Boolean((_j = data === null || data === void 0 ? void 0 : data.is_support_agent) !== null && _j !== void 0 ? _j : profile === null || profile === void 0 ? void 0 : profile.is_support_agent), support_contact_id: (_l = (_k = data === null || data === void 0 ? void 0 : data.support_contact_id) !== null && _k !== void 0 ? _k : profile === null || profile === void 0 ? void 0 : profile.support_contact_id) !== null && _l !== void 0 ? _l : null, security_state: data === null || data === void 0 ? void 0 : data.security_state, available_roles: (data === null || data === void 0 ? void 0 : data.available_roles) || [], ui_permissions: (data === null || data === void 0 ? void 0 : data.ui_permissions) || {}, can_manage_support_agents: Boolean(data === null || data === void 0 ? void 0 : data.can_manage_support_agents), can_manage: Boolean(data === null || data === void 0 ? void 0 : data.can_manage), is_active: data === null || data === void 0 ? void 0 : data.is_active, successful_login: Boolean((_m = data === null || data === void 0 ? void 0 : data.successful_login) !== null && _m !== void 0 ? _m : data === null || data === void 0 ? void 0 : data.last_login), last_login: data === null || data === void 0 ? void 0 : data.last_login, date_joined: data === null || data === void 0 ? void 0 : data.date_joined });
     };
     useEffect(() => {
         let isMounted = true;

package/dist/components/AllowedEmailDomainsManager.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Alert, Box, Button, TextField, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { updateAuthPolicy } from '../auth/authApi';
-export function AllowedEmailDomainsManager({ domains = [], enabled = false, onPolicyChange, }) {
+export function AllowedEmailDomainsManager({ domains = [], enabled = false, onPolicyChange, canEdit = true, }) {
     const { t } = useTranslation();
     const [domainsText, setDomainsText] = useState('');
     const [busy, setBusy] = useState(false);
@@ -39,5 +39,5 @@ export function AllowedEmailDomainsManager({ domains = [], enabled = false, onPo
     if (!enabled) {
         return null;
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ALLOWED_EMAIL_DOMAINS_TITLE', 'Allowed Email Domains') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.ALLOWED_EMAIL_DOMAINS_CARD_HINT', 'Only addresses from these domains can use email-domain sign-up.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsx(TextField, { label: t('Auth.ALLOWED_EMAIL_DOMAINS_LABEL', 'Allowed email domains'), helperText: t('Auth.ALLOWED_EMAIL_DOMAINS_HINT', 'One domain per line, e.g. example.org. You can leave this empty temporarily.'), multiline: true, minRows: 4, fullWidth: true, value: domainsText, onChange: (event) => setDomainsText(event.target.value), disabled: busy }), _jsx(Button, { variant: "contained", sx: { mt: 2 }, onClick: handleSave, disabled: busy, children: t('Common.SAVE', 'Save') })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ALLOWED_EMAIL_DOMAINS_TITLE', 'Allowed Email Domains') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.ALLOWED_EMAIL_DOMAINS_CARD_HINT', 'Only addresses from these domains can use email-domain sign-up.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsx(TextField, { label: t('Auth.ALLOWED_EMAIL_DOMAINS_LABEL', 'Allowed email domains'), helperText: t('Auth.ALLOWED_EMAIL_DOMAINS_HINT', 'One domain per line, e.g. example.org. You can leave this empty temporarily.'), multiline: true, minRows: 4, fullWidth: true, value: domainsText, onChange: (event) => setDomainsText(event.target.value), disabled: busy || !canEdit }), _jsx(Button, { variant: "contained", sx: { mt: 2 }, onClick: handleSave, disabled: busy || !canEdit, children: t('Common.SAVE', 'Save') })] }));
 }

package/dist/components/AuthFactorRequirementCard.js

@@ -3,13 +3,17 @@ import React, { useEffect, useState } from 'react';
 import { Alert, Box, FormControl, FormControlLabel, Radio, RadioGroup, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
-export function AuthFactorRequirementCard() {
+export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
     const { t } = useTranslation();
     const [value, setValue] = useState('1');
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState('');
     const [success, setSuccess] = useState('');
     useEffect(() => {
+        if (policy) {
+            setValue(String((policy === null || policy === void 0 ? void 0 : policy.required_auth_factor_count) || 1));
+            return undefined;
+        }
         let active = true;
         (async () => {
             try {
@@ -25,8 +29,11 @@ export function AuthFactorRequirementCard() {
         return () => {
             active = false;
         };
-    }, []);
+    }, [policy]);
     const handleChange = async (event) => {
+        if (!canEdit) {
+            return;
+        }
         const nextValue = event.target.value;
         const previous = value;
         setValue(nextValue);
@@ -45,5 +52,5 @@ export function AuthFactorRequirementCard() {
             setBusy(false);
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.AUTH_FACTOR_TITLE', 'Authentication Factors') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.AUTH_FACTOR_HINT', 'Choose whether one factor is enough or two factors are required.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsx(FormControl, { children: _jsxs(RadioGroup, { value: value, onChange: handleChange, children: [_jsx(FormControlLabel, { value: "1", control: _jsx(Radio, { disabled: busy }), label: t('Auth.ONE_FACTOR_LABEL', 'One factor is enough') }), _jsx(FormControlLabel, { value: "2", control: _jsx(Radio, { disabled: busy }), label: t('Auth.TWO_FACTOR_LABEL', 'Two factors are required') })] }) })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.AUTH_FACTOR_TITLE', 'Authentication Requirements') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.AUTH_FACTOR_HINT', 'Define the minimum number of authentication factors required for sign-in.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsx(FormControl, { children: _jsxs(RadioGroup, { value: value, onChange: handleChange, children: [_jsx(FormControlLabel, { value: "1", control: _jsx(Radio, { disabled: busy || !canEdit }), label: t('Auth.ONE_FACTOR_LABEL', 'Allow single-factor authentication') }), _jsx(FormControlLabel, { value: "2", control: _jsx(Radio, { disabled: busy || !canEdit }), label: t('Auth.TWO_FACTOR_LABEL', 'Require two-factor authentication') })] }) })] }));
 }

package/dist/components/QrSignupValidityManager.js

@@ -11,7 +11,7 @@ function clampExpiryDays(value) {
     }
     return parsed;
 }
-export function QrSignupValidityManager({ enabled = false, expiryDays = DEFAULT_EXPIRY_DAYS, onPolicyChange, }) {
+export function QrSignupValidityManager({ enabled = false, expiryDays = DEFAULT_EXPIRY_DAYS, onPolicyChange, canEdit = true, }) {
     const { t } = useTranslation();
     const [currentExpiryDays, setCurrentExpiryDays] = useState(String(expiryDays || DEFAULT_EXPIRY_DAYS));
     const [busy, setBusy] = useState(false);
@@ -44,5 +44,5 @@ export function QrSignupValidityManager({ enabled = false, expiryDays = DEFAULT_
     if (!enabled) {
         return null;
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.SIGNUP_QR_VALIDITY_TITLE', 'QR Signup Validity') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.SIGNUP_QR_VALIDITY_HINT', 'Set the default validity for newly generated QR signup links.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 1.5, alignItems: { sm: 'flex-start' }, children: [_jsx(TextField, { label: t('Auth.SIGNUP_QR_EXPIRY_DAYS_LABEL', 'QR signup validity (days)'), helperText: t('Auth.SIGNUP_QR_EXPIRY_DAYS_HINT', 'Default validity for newly generated QR signup links.'), type: "number", value: currentExpiryDays, onChange: (event) => setCurrentExpiryDays(event.target.value), disabled: busy, sx: { flex: 1 } }), _jsx(Button, { variant: "contained", onClick: handleSave, disabled: busy, sx: { minWidth: 120, mt: { sm: '8px' } }, children: t('Common.SAVE', 'Save') })] })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.SIGNUP_QR_VALIDITY_TITLE', 'QR Signup Validity') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.SIGNUP_QR_VALIDITY_HINT', 'Set the default validity for newly generated QR signup links.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 1.5, alignItems: { sm: 'flex-start' }, children: [_jsx(TextField, { label: t('Auth.SIGNUP_QR_EXPIRY_DAYS_LABEL', 'QR signup validity (days)'), helperText: t('Auth.SIGNUP_QR_EXPIRY_DAYS_HINT', 'Default validity for newly generated QR signup links.'), type: "number", value: currentExpiryDays, onChange: (event) => setCurrentExpiryDays(event.target.value), disabled: busy || !canEdit, sx: { flex: 1 } }), _jsx(Button, { variant: "contained", onClick: handleSave, disabled: busy || !canEdit, sx: { minWidth: 120, mt: { sm: '8px' } }, children: t('Common.SAVE', 'Save') })] })] }));
 }

package/dist/components/RegistrationMethodsManager.js

@@ -13,7 +13,7 @@ const EMPTY_POLICY = {
     signup_qr_expiry_days: 90,
     required_auth_factor_count: 1,
 };
-export function RegistrationMethodsManager({ policy: authPolicy, error = '', onPolicyChange, }) {
+export function RegistrationMethodsManager({ policy: authPolicy, error = '', onPolicyChange, canEdit = true, }) {
     const { t } = useTranslation();
     const [policyState, setPolicyState] = useState(EMPTY_POLICY);
     const [busyField, setBusyField] = useState('');
@@ -49,5 +49,5 @@ export function RegistrationMethodsManager({ policy: authPolicy, error = '', onP
     if (!authPolicy && !error) {
         return (_jsx(Box, { sx: { py: 3, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 28 }) }));
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.REGISTRATION_METHODS_TITLE', 'Registration Methods') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.REGISTRATION_METHODS_HINT', 'Choose which signup and invite flows are active for this app.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), saveError && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: saveError }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Stack, { spacing: 1, children: [_jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_admin_invite), onChange: toggle('allow_admin_invite'), disabled: Boolean(busyField) })), label: t('Auth.ADMIN_INVITE_LABEL', 'Admin invite') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_access_code), onChange: toggle('allow_self_signup_access_code'), disabled: Boolean(busyField) })), label: t('Auth.SIGNUP_ACCESS_CODE_LABEL', 'Self-signup with access code') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_open), onChange: toggle('allow_self_signup_open'), disabled: Boolean(busyField) })), label: t('Auth.SIGNUP_OPEN_LABEL', 'Open self-signup') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_email_domain), onChange: toggle('allow_self_signup_email_domain'), disabled: Boolean(busyField) })), label: t('Auth.SIGNUP_EMAIL_DOMAIN_LABEL', 'Self-signup by email domain') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_qr), onChange: toggle('allow_self_signup_qr'), disabled: Boolean(busyField) })), label: t('Auth.SIGNUP_QR_LABEL', 'Self-signup by QR') })] }), policyState.allow_self_signup_email_domain && !(policyState.allowed_email_domains || []).length && (_jsx(Alert, { severity: "info", sx: { mt: 2 }, children: t('Auth.EMAIL_DOMAIN_CURRENTLY_BLOCKED_HINT', 'Email-domain signup is enabled, but it stays blocked until at least one allowed domain is saved.') }))] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.REGISTRATION_METHODS_TITLE', 'Registration Methods') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.REGISTRATION_METHODS_HINT', 'Choose which signup and invite flows are active for this app.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), saveError && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: saveError }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Stack, { spacing: 1, children: [_jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_admin_invite), onChange: toggle('allow_admin_invite'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.ADMIN_INVITE_LABEL', 'Admin invite') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_access_code), onChange: toggle('allow_self_signup_access_code'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_ACCESS_CODE_LABEL', 'Self-signup with access code') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_open), onChange: toggle('allow_self_signup_open'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_OPEN_LABEL', 'Open self-signup') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_email_domain), onChange: toggle('allow_self_signup_email_domain'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_EMAIL_DOMAIN_LABEL', 'Self-signup by email domain') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_qr), onChange: toggle('allow_self_signup_qr'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_QR_LABEL', 'Self-signup by QR') })] }), policyState.allow_self_signup_email_domain && !(policyState.allowed_email_domains || []).length && (_jsx(Alert, { severity: "info", sx: { mt: 2 }, children: t('Auth.EMAIL_DOMAIN_CURRENTLY_BLOCKED_HINT', 'Email-domain signup is enabled, but it stays blocked until at least one allowed domain is saved.') }))] }));
 }

package/dist/components/SupportRecoveryRequestsTab.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/components/SupportRecoveryRequestsTab.jsx
-import React, { useEffect, useState } from 'react';
-import { Box, Typography, Table, TableHead, TableBody, TableRow, TableCell, TableContainer, Paper, Button, CircularProgress, Alert, Stack, Dialog, DialogTitle, DialogContent, DialogActions, TextField, } from '@mui/material';
+import React, { useContext, useEffect, useState } from 'react';
+import { Alert, Autocomplete, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 import { useTranslation } from 'react-i18next';
-import { fetchRecoveryRequests, approveRecoveryRequest, rejectRecoveryRequest } from '../auth/authApi';
+import { AuthContext } from '../auth/AuthContext';
+import { approveRecoveryRequest, fetchRecoveryRequests, fetchUsersList, rejectRecoveryRequest, updateUserSupportStatus, } from '../auth/authApi';
 export function SupportRecoveryRequestsTab() {
     const { t } = useTranslation();
+    const { user } = useContext(AuthContext);
+    const canManageAgents = Boolean((user === null || user === void 0 ? void 0 : user.is_superuser) || (user === null || user === void 0 ? void 0 : user.can_manage_support_agents));
     const [requests, setRequests] = useState([]);
     const [loading, setLoading] = useState(true);
     const [errorKey, setErrorKey] = useState(null);
@@ -13,6 +17,11 @@ export function SupportRecoveryRequestsTab() {
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogNote, setDialogNote] = useState('');
     const [selectedRequest, setSelectedRequest] = useState(null);
+    const [allUsers, setAllUsers] = useState([]);
+    const [agentLoading, setAgentLoading] = useState(false);
+    const [agentErrorKey, setAgentErrorKey] = useState(null);
+    const [selectedAgentCandidate, setSelectedAgentCandidate] = useState(null);
+    const [agentActionUserId, setAgentActionUserId] = useState(null);
     const loadRequests = async () => {
         setLoading(true);
         setErrorKey(null);
@@ -27,10 +36,39 @@ export function SupportRecoveryRequestsTab() {
             setLoading(false);
         }
     };
+    const loadUsers = async () => {
+        if (!canManageAgents) {
+            setAllUsers([]);
+            setAgentErrorKey(null);
+            return;
+        }
+        setAgentLoading(true);
+        setAgentErrorKey(null);
+        try {
+            const data = await fetchUsersList();
+            const list = Array.isArray(data) ? data : (Array.isArray(data === null || data === void 0 ? void 0 : data.results) ? data.results : []);
+            list.sort((a, b) => {
+                const emailA = String((a === null || a === void 0 ? void 0 : a.email) || '').toLocaleLowerCase();
+                const emailB = String((b === null || b === void 0 ? void 0 : b.email) || '').toLocaleLowerCase();
+                return emailA.localeCompare(emailB);
+            });
+            setAllUsers(list);
+        }
+        catch (err) {
+            setAgentErrorKey(err.code || 'Auth.USER_LIST_FAILED');
+        }
+        finally {
+            setAgentLoading(false);
+        }
+    };
     useEffect(() => {
         loadRequests();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [statusFilter]);
+    useEffect(() => {
+        loadUsers();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [canManageAgents]);
     const openDialog = (req) => {
         setSelectedRequest(req);
         setDialogNote('');
@@ -67,10 +105,62 @@ export function SupportRecoveryRequestsTab() {
             setErrorKey(err.code || 'Support.RECOVERY_REQUEST_REJECT_FAILED');
         }
     };
+    const getUserDisplayName = (entry) => {
+        if ((entry === null || entry === void 0 ? void 0 : entry.first_name) || (entry === null || entry === void 0 ? void 0 : entry.last_name)) {
+            return `${entry.first_name || ''} ${entry.last_name || ''}`.trim();
+        }
+        return (entry === null || entry === void 0 ? void 0 : entry.username) || '';
+    };
+    const getUserOptionLabel = (entry) => {
+        if (!entry)
+            return '';
+        const name = getUserDisplayName(entry);
+        if (name && (entry === null || entry === void 0 ? void 0 : entry.email))
+            return `${name} (${entry.email})`;
+        return (entry === null || entry === void 0 ? void 0 : entry.email) || name || `#${(entry === null || entry === void 0 ? void 0 : entry.id) || ''}`;
+    };
+    const supportAgents = allUsers.filter((entry) => Boolean(entry === null || entry === void 0 ? void 0 : entry.is_support_agent));
+    const availableAgentCandidates = allUsers.filter((entry) => !(entry === null || entry === void 0 ? void 0 : entry.is_support_agent));
+    const handleAddAgent = async () => {
+        if (!selectedAgentCandidate)
+            return;
+        setAgentActionUserId(selectedAgentCandidate.id);
+        setAgentErrorKey(null);
+        try {
+            await updateUserSupportStatus(selectedAgentCandidate.id, true);
+            setSelectedAgentCandidate(null);
+            await loadUsers();
+        }
+        catch (err) {
+            setAgentErrorKey(err.code || 'Auth.USER_SUPPORT_UPDATE_FAILED');
+        }
+        finally {
+            setAgentActionUserId(null);
+        }
+    };
+    const handleRemoveAgent = async (agentUser) => {
+        if (!(agentUser === null || agentUser === void 0 ? void 0 : agentUser.id))
+            return;
+        setAgentActionUserId(agentUser.id);
+        setAgentErrorKey(null);
+        try {
+            await updateUserSupportStatus(agentUser.id, false);
+            if ((selectedAgentCandidate === null || selectedAgentCandidate === void 0 ? void 0 : selectedAgentCandidate.id) === agentUser.id) {
+                setSelectedAgentCandidate(null);
+            }
+            await loadUsers();
+        }
+        catch (err) {
+            setAgentErrorKey(err.code || 'Auth.USER_SUPPORT_UPDATE_FAILED');
+        }
+        finally {
+            setAgentActionUserId(null);
+        }
+    };
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 4 }, children: _jsx(CircularProgress, {}) }));
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.RECOVERY_REQUESTS_DESCRIPTION', 'Users who cannot complete MFA can request support. You can review their request and approve or reject it.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mb: 2 }, children: [_jsx(Button, { variant: statusFilter === 'pending' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('pending'), children: t('Support.RECOVERY_FILTER_PENDING', 'Open') }), _jsx(Button, { variant: statusFilter === 'approved' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('approved'), children: t('Support.RECOVERY_FILTER_APPROVED', 'Approved') }), _jsx(Button, { variant: statusFilter === 'rejected' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('rejected'), children: t('Support.RECOVERY_FILTER_REJECTED', 'Rejected') })] }), requests.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.') })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Support.RECOVERY_COL_CREATED', 'Created') }), _jsx(TableCell, { children: t('Support.RECOVERY_USER', 'User') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_STATUS', 'Status') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: requests.map((req) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: req.created_at
+    return (_jsxs(Box, { children: [canManageAgents && (_jsxs(Paper, { variant: "outlined", sx: { p: 2, mb: 3, borderRadius: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.AGENTS_TITLE', 'Support agents') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.AGENTS_DESCRIPTION', 'Assign which users are allowed to handle support requests.') }), agentErrorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(agentErrorKey) })), _jsxs(Stack, { direction: { xs: 'column', md: 'row' }, spacing: 2, sx: { mb: 2, alignItems: { md: 'flex-start' } }, children: [_jsx(Autocomplete, { fullWidth: true, options: availableAgentCandidates, value: selectedAgentCandidate, loading: agentLoading, onChange: (_event, value) => setSelectedAgentCandidate(value), isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: getUserOptionLabel, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: t('Support.AGENTS_SELECT_LABEL', 'Select user'), placeholder: t('Support.AGENTS_SELECT_PLACEHOLDER', 'Choose a user') }))) }), _jsx(Button, { variant: "contained", onClick: handleAddAgent, disabled: !selectedAgentCandidate || agentLoading || Boolean(agentActionUserId), sx: { minWidth: 160 }, children: t('Support.AGENTS_ADD', 'Add as agent') })] }), agentLoading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 3 }, children: _jsx(CircularProgress, { size: 24 }) })) : supportAgents.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.AGENTS_EMPTY', 'No support agents assigned yet.') })) : (_jsx(TableContainer, { component: Paper, variant: "outlined", children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Profile.NAME_LABEL', 'Name') }), _jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { align: "right", children: t('Common.ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: supportAgents.map((agentUser) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: getUserDisplayName(agentUser) || '-' }), _jsx(TableCell, { children: agentUser.email || '-' }), _jsx(TableCell, { align: "right", children: _jsx(IconButton, { size: "small", color: "error", onClick: () => handleRemoveAgent(agentUser), disabled: agentActionUserId === agentUser.id, "aria-label": t('Support.AGENTS_REMOVE', 'Remove support agent'), children: _jsx(CloseIcon, { fontSize: "small" }) }) })] }, agentUser.id))) })] }) }))] })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.RECOVERY_REQUESTS_DESCRIPTION', 'Users who cannot complete MFA can request support. You can review their request and approve or reject it.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mb: 2 }, children: [_jsx(Button, { variant: statusFilter === 'pending' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('pending'), children: t('Support.RECOVERY_FILTER_PENDING', 'Open') }), _jsx(Button, { variant: statusFilter === 'approved' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('approved'), children: t('Support.RECOVERY_FILTER_APPROVED', 'Approved') }), _jsx(Button, { variant: statusFilter === 'rejected' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('rejected'), children: t('Support.RECOVERY_FILTER_REJECTED', 'Rejected') })] }), requests.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.') })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Support.RECOVERY_COL_CREATED', 'Created') }), _jsx(TableCell, { children: t('Support.RECOVERY_USER', 'User') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_STATUS', 'Status') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: requests.map((req) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: req.created_at
                                             ? new Date(req.created_at).toLocaleString()
                                             : '-' }), _jsx(TableCell, { children: req.user_email || req.user }), _jsx(TableCell, { children: t(`Support.RECOVERY_STATUS_${req.status}`, req.status) }), _jsx(TableCell, { children: _jsx(Button, { variant: "contained", size: "small", onClick: () => openDialog(req), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_REVIEW', 'Review') }) })] }, req.id))) })] }) })), _jsxs(Dialog, { open: dialogOpen, onClose: closeDialog, fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Support.RECOVERY_REVIEW_DIALOG_TITLE', 'Review recovery request') }), _jsxs(DialogContent, { dividers: true, children: [selectedRequest && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_USER', 'User'), ":"] }), ' ', selectedRequest.user_email || selectedRequest.user] }), _jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_REVIEW_CREATED', 'Requested at'), ":"] }), ' ', selectedRequest.created_at
                                                 ? new Date(selectedRequest.created_at).toLocaleString()

package/dist/components/UserListComponent.js

@@ -4,7 +4,7 @@ import { Box, Typography, FormControl, Select, MenuItem, Button, Tooltip, Circul
 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';
+import { fetchUsersList, deleteUser, updateUserRole } from '../auth/authApi';
 const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
 export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraColumns = [], extraRowActions = [], extraContext = null, refreshTrigger = 0, canEditUser, }) {
     const { t } = useTranslation();
@@ -60,15 +60,6 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
             alert(t(err.code || 'Auth.USER_ROLE_UPDATE_FAILED'));
         }
     };
-    const handleToggleSupporter = async (userId, newValue) => {
-        try {
-            await updateUserSupportStatus(userId, newValue);
-            await loadUsers();
-        }
-        catch (err) {
-            alert(t(err.code || 'Auth.USER_UPDATE_FAILED'));
-        }
-    };
     const defaultCanEdit = (targetUser) => {
         if (!currentUser)
             return false;
@@ -142,6 +133,8 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         return String(value).toLocaleLowerCase();
     };
     const getSearchBucketForUser = (user) => {
+        var _a;
+        const hasSuccessfulLogin = Boolean((_a = user === null || user === void 0 ? void 0 : user.successful_login) !== null && _a !== void 0 ? _a : user === null || user === void 0 ? void 0 : user.last_login);
         const baseValues = [
             user === null || user === void 0 ? void 0 : user.id,
             user === null || user === void 0 ? void 0 : user.email,
@@ -151,7 +144,7 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
             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'),
+            hasSuccessfulLogin ? 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);
@@ -202,25 +195,27 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 valueGetter: (_value, row) => getUserDisplayName(row),
             },
             {
-                field: 'role',
-                headerName: t('UserList.ROLE', 'Role'),
+                field: 'successful_login',
+                headerName: t('UserList.SUCCESSFUL_LOGIN', 'Successful Login'),
                 minWidth: 180,
                 flex: 0.8,
-                valueGetter: (_value, row) => (row === null || row === void 0 ? void 0 : row.role) || 'none',
+                valueGetter: (_value, row) => { var _a; return Boolean((_a = row === null || row === void 0 ? void 0 : row.successful_login) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.last_login); },
                 renderCell: (params) => {
-                    const user = params.row;
-                    return (_jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(user), children: _jsx(Select, { value: user.role || 'none', onChange: (event) => handleChangeRole(user.id, event.target.value), variant: "outlined", children: roles.map((role) => _jsx(MenuItem, { value: role, children: role }, role)) }) }));
+                    var _a, _b, _c;
+                    return (_jsx(Typography, { variant: "body2", children: Boolean((_b = (_a = params.row) === null || _a === void 0 ? void 0 : _a.successful_login) !== null && _b !== void 0 ? _b : (_c = params.row) === null || _c === void 0 ? void 0 : _c.last_login)
+                            ? t('Common.YES', 'Yes')
+                            : t('Common.NO', 'No') }));
                 },
             },
             {
-                field: 'is_support_agent',
-                headerName: t('UserList.SUPPORTER', 'Support Agent'),
-                minWidth: 190,
+                field: 'role',
+                headerName: t('UserList.ROLE', 'Role'),
+                minWidth: 180,
                 flex: 0.8,
-                valueGetter: (_value, row) => Boolean(row === null || row === void 0 ? void 0 : row.is_support_agent),
+                valueGetter: (_value, row) => (row === null || row === void 0 ? void 0 : row.role) || 'none',
                 renderCell: (params) => {
                     const user = params.row;
-                    return (_jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(user), children: _jsxs(Select, { value: user.is_support_agent ? 'yes' : 'no', onChange: (event) => handleToggleSupporter(user.id, event.target.value === 'yes'), variant: "outlined", children: [_jsx(MenuItem, { value: "yes", children: t('Common.YES', 'Yes') }), _jsx(MenuItem, { value: "no", children: t('Common.NO', 'No') })] }) }));
+                    return (_jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(user), children: _jsx(Select, { value: user.role || 'none', onChange: (event) => handleChangeRole(user.id, event.target.value), variant: "outlined", children: roles.map((role) => _jsx(MenuItem, { value: role, children: role }, role)) }) }));
                 },
             },
         ];

package/dist/i18n/authTranslations.js

@@ -1290,6 +1290,36 @@ export const authTranslations = {
         "en": "Authentication settings saved.",
         "sw": "Mipangilio ya uthibitishaji imehifadhiwa."
     },
+    "Auth.AUTH_FACTOR_TITLE": {
+        "de": "Authentifizierungsanforderungen",
+        "fr": "Exigences d'authentification",
+        "en": "Authentication Requirements",
+        "sw": "Mahitaji ya uthibitishaji"
+    },
+    "Auth.AUTH_FACTOR_HINT": {
+        "de": "Legen Sie fest, wie viele Authentifizierungsfaktoren mindestens für die Anmeldung erforderlich sind.",
+        "fr": "Définissez le nombre minimal de facteurs d'authentification requis pour la connexion.",
+        "en": "Define the minimum number of authentication factors required for sign-in.",
+        "sw": "Weka idadi ya chini ya vipengele vya uthibitishaji vinavyohitajika ili kuingia."
+    },
+    "Auth.ONE_FACTOR_LABEL": {
+        "de": "Single-Factor-Authentifizierung erlauben",
+        "fr": "Autoriser l'authentification à un facteur",
+        "en": "Allow single-factor authentication",
+        "sw": "Ruhusu uthibitishaji wa kipengele kimoja"
+    },
+    "Auth.TWO_FACTOR_LABEL": {
+        "de": "Zwei-Faktor-Authentifizierung erzwingen",
+        "fr": "Exiger l'authentification à deux facteurs",
+        "en": "Require two-factor authentication",
+        "sw": "Hitaji uthibitishaji wa vipengele viwili"
+    },
+    "Auth.AUTH_FACTOR_SAVE_SUCCESS": {
+        "de": "Die Anforderung für Authentifizierungsfaktoren wurde gespeichert.",
+        "fr": "L'exigence relative aux facteurs d'authentification a été enregistrée.",
+        "en": "Factor requirement saved.",
+        "sw": "Hitaji la vipengele vya uthibitishaji limehifadhiwa."
+    },
     "Auth.REGISTRATION_METHODS_TITLE": {
         "de": "Registrierungsmethoden",
         "fr": "Méthodes d'inscription",

package/dist/pages/AccountPage.js

@@ -40,6 +40,13 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const perms = (user === null || user === void 0 ? void 0 : user.ui_permissions) || {};
     // NEU: Superuser-Flag prüfen
     const isSuperUser = (user === null || user === void 0 ? void 0 : user.is_superuser) || false;
+    const canViewUsers = Boolean(isSuperUser || perms.can_view_users);
+    const canViewInvite = Boolean(isSuperUser || perms.can_view_invite || perms.can_invite);
+    const canViewAuthPolicy = Boolean(isSuperUser || perms.can_view_auth_policy);
+    const canWriteAuthPolicy = Boolean(isSuperUser || perms.can_write_auth_policy);
+    const canSendInvites = Boolean(isSuperUser || perms.can_send_invites);
+    const canManageAccessCodes = Boolean(isSuperUser || perms.can_manage_access_codes);
+    const canManageSignupQr = Boolean(isSuperUser || perms.can_manage_signup_qr);
     const handleTabChange = (_event, newValue) => {
         setSearchParams({ tab: newValue });
     };
@@ -49,7 +56,7 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     };
     useEffect(() => {
         let active = true;
-        const canLoadPolicy = Boolean(user) && (isSuperUser || perms.can_invite || perms.can_manage_access_codes);
+        const canLoadPolicy = Boolean(user) && (canViewAuthPolicy || canManageSignupQr || canManageAccessCodes);
         if (!canLoadPolicy) {
             setAuthPolicy(null);
             setAuthPolicyError('');
@@ -74,7 +81,7 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
         return () => {
             active = false;
         };
-    }, [user, isSuperUser, perms.can_invite, perms.can_manage_access_codes, t]);
+    }, [user, canViewAuthPolicy, canManageSignupQr, canManageAccessCodes, t]);
     // 3. Dynamic Tabs (angepasst für Superuser)
     const tabs = useMemo(() => {
         if (!user)
@@ -85,10 +92,10 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
             { value: 'security', label: t('Account.TAB_SECURITY', 'Security') },
         ];
         // Logik: Superuser darf ALLES, sonst gelten die spezifischen Permissions
-        if (isSuperUser || perms.can_view_users) {
+        if (canViewUsers) {
             list.push({ value: 'users', label: t('Account.TAB_USERS', 'Users') });
         }
-        if (isSuperUser || perms.can_invite || perms.can_manage_access_codes) {
+        if (canViewInvite) {
             list.push({ value: 'invite', label: t('Account.TAB_INVITE', 'Invite') });
         }
         if (isSuperUser || perms.can_view_support) {
@@ -106,7 +113,7 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
             }
         });
         return list;
-    }, [user, perms, t, isSuperUser, extraTabs]);
+    }, [user, perms, t, isSuperUser, extraTabs, canViewUsers, canViewInvite]);
     // 4. Loading & Auth Checks
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 10 }, children: _jsx(CircularProgress, {}) }));
@@ -122,5 +129,5 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     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: _jsxs(Stack, { spacing: 2.5, children: [(isSuperUser || perms.can_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(RegistrationMethodsManager, { policy: authPolicy, error: authPolicyError, onPolicyChange: setAuthPolicy }) })), (isSuperUser || perms.can_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(AuthFactorRequirementCard, {}) })), (isSuperUser || perms.can_invite) && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(UserInviteComponent, {}) })), (isSuperUser || perms.can_manage_access_codes) && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsxs(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes') }), _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 && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), (isSuperUser || perms.can_invite) && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(AllowedEmailDomainsManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain), domains: (authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allowed_email_domains) || [], onPolicyChange: setAuthPolicy }) })), (isSuperUser || perms.can_invite) && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(QrSignupValidityManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days, onPolicyChange: setAuthPolicy }) })), (isSuperUser || perms.can_invite) && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(QrSignupManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days }) }))] }) })), 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: [canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(AuthFactorRequirementCard, { canEdit: canWriteAuthPolicy, policy: authPolicy }) })), canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(RegistrationMethodsManager, { policy: authPolicy, error: authPolicyError, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canSendInvites && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(UserInviteComponent, {}) })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsxs(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(AllowedEmailDomainsManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain), domains: (authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allowed_email_domains) || [], onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(QrSignupValidityManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canManageSignupQr && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(QrSignupManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days }) }))] }) })), 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,
@@ -20,6 +20,7 @@
     "build": "tsc -p tsconfig.build.json"
   },
   "devDependencies": {
+    "typescript": "^5.9.3"
   },
   "dependencies": {
     "react-i18next": "^16.3.5"

package/src/auth/AuthContext.jsx

@@ -64,6 +64,7 @@ export const AuthProvider = ({ children }) => {
       can_manage_support_agents: Boolean(data?.can_manage_support_agents),
       can_manage: Boolean(data?.can_manage),
       is_active: data?.is_active,
+      successful_login: Boolean(data?.successful_login ?? data?.last_login),
       last_login: data?.last_login,
       date_joined: data?.date_joined,
     };

package/src/components/AllowedEmailDomainsManager.jsx

@@ -13,6 +13,7 @@ export function AllowedEmailDomainsManager({
   domains = [],
   enabled = false,
   onPolicyChange,
+  canEdit = true,
 }) {
   const { t } = useTranslation();
   const [domainsText, setDomainsText] = useState('');
@@ -76,10 +77,10 @@ export function AllowedEmailDomainsManager({
         fullWidth
         value={domainsText}
         onChange={(event) => setDomainsText(event.target.value)}
-        disabled={busy}
+        disabled={busy || !canEdit}
       />
 
-      <Button variant="contained" sx={{ mt: 2 }} onClick={handleSave} disabled={busy}>
+      <Button variant="contained" sx={{ mt: 2 }} onClick={handleSave} disabled={busy || !canEdit}>
         {t('Common.SAVE', 'Save')}
       </Button>
     </Box>

package/src/components/AuthFactorRequirementCard.jsx

@@ -11,7 +11,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
 
-export function AuthFactorRequirementCard() {
+export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
   const { t } = useTranslation();
   const [value, setValue] = useState('1');
   const [busy, setBusy] = useState(false);
@@ -19,6 +19,10 @@ export function AuthFactorRequirementCard() {
   const [success, setSuccess] = useState('');
 
   useEffect(() => {
+    if (policy) {
+      setValue(String(policy?.required_auth_factor_count || 1));
+      return undefined;
+    }
     let active = true;
     (async () => {
       try {
@@ -33,9 +37,12 @@ export function AuthFactorRequirementCard() {
     return () => {
       active = false;
     };
-  }, []);
+  }, [policy]);
 
   const handleChange = async (event) => {
+    if (!canEdit) {
+      return;
+    }
     const nextValue = event.target.value;
     const previous = value;
     setValue(nextValue);
@@ -56,17 +63,28 @@ export function AuthFactorRequirementCard() {
   return (
     <Box>
       <Typography variant="h6" gutterBottom>
-        {t('Auth.AUTH_FACTOR_TITLE', 'Authentication Factors')}
+        {t('Auth.AUTH_FACTOR_TITLE', 'Authentication Requirements')}
       </Typography>
       <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
-        {t('Auth.AUTH_FACTOR_HINT', 'Choose whether one factor is enough or two factors are required.')}
+        {t(
+          'Auth.AUTH_FACTOR_HINT',
+          'Define the minimum number of authentication factors required for sign-in.',
+        )}
       </Typography>
       {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
       {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
       <FormControl>
         <RadioGroup value={value} onChange={handleChange}>
-          <FormControlLabel value="1" control={<Radio disabled={busy} />} label={t('Auth.ONE_FACTOR_LABEL', 'One factor is enough')} />
-          <FormControlLabel value="2" control={<Radio disabled={busy} />} label={t('Auth.TWO_FACTOR_LABEL', 'Two factors are required')} />
+          <FormControlLabel
+            value="1"
+            control={<Radio disabled={busy || !canEdit} />}
+            label={t('Auth.ONE_FACTOR_LABEL', 'Allow single-factor authentication')}
+          />
+          <FormControlLabel
+            value="2"
+            control={<Radio disabled={busy || !canEdit} />}
+            label={t('Auth.TWO_FACTOR_LABEL', 'Require two-factor authentication')}
+          />
         </RadioGroup>
       </FormControl>
     </Box>

package/src/components/QrSignupValidityManager.jsx

@@ -24,6 +24,7 @@ export function QrSignupValidityManager({
   enabled = false,
   expiryDays = DEFAULT_EXPIRY_DAYS,
   onPolicyChange,
+  canEdit = true,
 }) {
   const { t } = useTranslation();
   const [currentExpiryDays, setCurrentExpiryDays] = useState(String(expiryDays || DEFAULT_EXPIRY_DAYS));
@@ -83,13 +84,13 @@ export function QrSignupValidityManager({
           type="number"
           value={currentExpiryDays}
           onChange={(event) => setCurrentExpiryDays(event.target.value)}
-          disabled={busy}
+          disabled={busy || !canEdit}
           sx={{ flex: 1 }}
         />
         <Button
           variant="contained"
           onClick={handleSave}
-          disabled={busy}
+          disabled={busy || !canEdit}
           sx={{ minWidth: 120, mt: { sm: '8px' } }}
         >
           {t('Common.SAVE', 'Save')}

package/src/components/RegistrationMethodsManager.jsx

@@ -26,6 +26,7 @@ export function RegistrationMethodsManager({
   policy: authPolicy,
   error = '',
   onPolicyChange,
+  canEdit = true,
 }) {
   const { t } = useTranslation();
   const [policyState, setPolicyState] = useState(EMPTY_POLICY);
@@ -85,7 +86,7 @@ export function RegistrationMethodsManager({
             <Switch
               checked={Boolean(policyState.allow_admin_invite)}
               onChange={toggle('allow_admin_invite')}
-              disabled={Boolean(busyField)}
+              disabled={Boolean(busyField) || !canEdit}
             />
           )}
           label={t('Auth.ADMIN_INVITE_LABEL', 'Admin invite')}
@@ -95,7 +96,7 @@ export function RegistrationMethodsManager({
             <Switch
               checked={Boolean(policyState.allow_self_signup_access_code)}
               onChange={toggle('allow_self_signup_access_code')}
-              disabled={Boolean(busyField)}
+              disabled={Boolean(busyField) || !canEdit}
             />
           )}
           label={t('Auth.SIGNUP_ACCESS_CODE_LABEL', 'Self-signup with access code')}
@@ -105,7 +106,7 @@ export function RegistrationMethodsManager({
             <Switch
               checked={Boolean(policyState.allow_self_signup_open)}
               onChange={toggle('allow_self_signup_open')}
-              disabled={Boolean(busyField)}
+              disabled={Boolean(busyField) || !canEdit}
             />
           )}
           label={t('Auth.SIGNUP_OPEN_LABEL', 'Open self-signup')}
@@ -115,7 +116,7 @@ export function RegistrationMethodsManager({
             <Switch
               checked={Boolean(policyState.allow_self_signup_email_domain)}
               onChange={toggle('allow_self_signup_email_domain')}
-              disabled={Boolean(busyField)}
+              disabled={Boolean(busyField) || !canEdit}
             />
           )}
           label={t('Auth.SIGNUP_EMAIL_DOMAIN_LABEL', 'Self-signup by email domain')}
@@ -125,7 +126,7 @@ export function RegistrationMethodsManager({
             <Switch
               checked={Boolean(policyState.allow_self_signup_qr)}
               onChange={toggle('allow_self_signup_qr')}
-              disabled={Boolean(busyField)}
+              disabled={Boolean(busyField) || !canEdit}
             />
           )}
           label={t('Auth.SIGNUP_QR_LABEL', 'Self-signup by QR')}

package/src/components/SupportRecoveryRequestsTab.jsx

@@ -1,30 +1,42 @@
 // src/components/SupportRecoveryRequestsTab.jsx
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
+  Alert,
+  Autocomplete,
   Box,
-  Typography,
-  Table,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableCell,
-  TableContainer,
-  Paper,
   Button,
   CircularProgress,
-  Alert,
-  Stack,
   Dialog,
-  DialogTitle,
-  DialogContent,
   DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
   TextField,
+  Typography,
 } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 import { useTranslation } from 'react-i18next';
-import { fetchRecoveryRequests, approveRecoveryRequest, rejectRecoveryRequest } from '../auth/authApi';
+import { AuthContext } from '../auth/AuthContext';
+import {
+  approveRecoveryRequest,
+  fetchRecoveryRequests,
+  fetchUsersList,
+  rejectRecoveryRequest,
+  updateUserSupportStatus,
+} from '../auth/authApi';
 
 export function SupportRecoveryRequestsTab() {
   const { t } = useTranslation();
+  const { user } = useContext(AuthContext);
+  const canManageAgents = Boolean(user?.is_superuser || user?.can_manage_support_agents);
 
   const [requests, setRequests] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -34,6 +46,11 @@ export function SupportRecoveryRequestsTab() {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogNote, setDialogNote] = useState('');
   const [selectedRequest, setSelectedRequest] = useState(null);
+  const [allUsers, setAllUsers] = useState([]);
+  const [agentLoading, setAgentLoading] = useState(false);
+  const [agentErrorKey, setAgentErrorKey] = useState(null);
+  const [selectedAgentCandidate, setSelectedAgentCandidate] = useState(null);
+  const [agentActionUserId, setAgentActionUserId] = useState(null);
 
   const loadRequests = async () => {
     setLoading(true);
@@ -48,11 +65,41 @@ export function SupportRecoveryRequestsTab() {
     }
   };
 
+  const loadUsers = async () => {
+    if (!canManageAgents) {
+      setAllUsers([]);
+      setAgentErrorKey(null);
+      return;
+    }
+
+    setAgentLoading(true);
+    setAgentErrorKey(null);
+    try {
+      const data = await fetchUsersList();
+      const list = Array.isArray(data) ? data : (Array.isArray(data?.results) ? data.results : []);
+      list.sort((a, b) => {
+        const emailA = String(a?.email || '').toLocaleLowerCase();
+        const emailB = String(b?.email || '').toLocaleLowerCase();
+        return emailA.localeCompare(emailB);
+      });
+      setAllUsers(list);
+    } catch (err) {
+      setAgentErrorKey(err.code || 'Auth.USER_LIST_FAILED');
+    } finally {
+      setAgentLoading(false);
+    }
+  };
+
   useEffect(() => {
     loadRequests();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [statusFilter]);
 
+  useEffect(() => {
+    loadUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canManageAgents]);
+
   const openDialog = (req) => {
     setSelectedRequest(req);
     setDialogNote('');
@@ -89,6 +136,57 @@ export function SupportRecoveryRequestsTab() {
     }
   };
 
+  const getUserDisplayName = (entry) => {
+    if (entry?.first_name || entry?.last_name) {
+      return `${entry.first_name || ''} ${entry.last_name || ''}`.trim();
+    }
+    return entry?.username || '';
+  };
+
+  const getUserOptionLabel = (entry) => {
+    if (!entry) return '';
+    const name = getUserDisplayName(entry);
+    if (name && entry?.email) return `${name} (${entry.email})`;
+    return entry?.email || name || `#${entry?.id || ''}`;
+  };
+
+  const supportAgents = allUsers.filter((entry) => Boolean(entry?.is_support_agent));
+  const availableAgentCandidates = allUsers.filter((entry) => !entry?.is_support_agent);
+
+  const handleAddAgent = async () => {
+    if (!selectedAgentCandidate) return;
+
+    setAgentActionUserId(selectedAgentCandidate.id);
+    setAgentErrorKey(null);
+    try {
+      await updateUserSupportStatus(selectedAgentCandidate.id, true);
+      setSelectedAgentCandidate(null);
+      await loadUsers();
+    } catch (err) {
+      setAgentErrorKey(err.code || 'Auth.USER_SUPPORT_UPDATE_FAILED');
+    } finally {
+      setAgentActionUserId(null);
+    }
+  };
+
+  const handleRemoveAgent = async (agentUser) => {
+    if (!agentUser?.id) return;
+
+    setAgentActionUserId(agentUser.id);
+    setAgentErrorKey(null);
+    try {
+      await updateUserSupportStatus(agentUser.id, false);
+      if (selectedAgentCandidate?.id === agentUser.id) {
+        setSelectedAgentCandidate(null);
+      }
+      await loadUsers();
+    } catch (err) {
+      setAgentErrorKey(err.code || 'Auth.USER_SUPPORT_UPDATE_FAILED');
+    } finally {
+      setAgentActionUserId(null);
+    }
+  };
+
   if (loading) {
     return (
       <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
@@ -99,6 +197,102 @@ export function SupportRecoveryRequestsTab() {
 
   return (
     <Box>
+      {canManageAgents && (
+        <Paper variant="outlined" sx={{ p: 2, mb: 3, borderRadius: 2 }}>
+          <Typography variant="h6" gutterBottom>
+            {t('Support.AGENTS_TITLE', 'Support agents')}
+          </Typography>
+
+          <Typography variant="body2" sx={{ mb: 2 }}>
+            {t(
+              'Support.AGENTS_DESCRIPTION',
+              'Assign which users are allowed to handle support requests.',
+            )}
+          </Typography>
+
+          {agentErrorKey && (
+            <Alert severity="error" sx={{ mb: 2 }}>
+              {t(agentErrorKey)}
+            </Alert>
+          )}
+
+          <Stack
+            direction={{ xs: 'column', md: 'row' }}
+            spacing={2}
+            sx={{ mb: 2, alignItems: { md: 'flex-start' } }}
+          >
+            <Autocomplete
+              fullWidth
+              options={availableAgentCandidates}
+              value={selectedAgentCandidate}
+              loading={agentLoading}
+              onChange={(_event, value) => setSelectedAgentCandidate(value)}
+              isOptionEqualToValue={(option, value) => option.id === value.id}
+              getOptionLabel={getUserOptionLabel}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label={t('Support.AGENTS_SELECT_LABEL', 'Select user')}
+                  placeholder={t('Support.AGENTS_SELECT_PLACEHOLDER', 'Choose a user')}
+                />
+              )}
+            />
+
+            <Button
+              variant="contained"
+              onClick={handleAddAgent}
+              disabled={!selectedAgentCandidate || agentLoading || Boolean(agentActionUserId)}
+              sx={{ minWidth: 160 }}
+            >
+              {t('Support.AGENTS_ADD', 'Add as agent')}
+            </Button>
+          </Stack>
+
+          {agentLoading ? (
+            <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}>
+              <CircularProgress size={24} />
+            </Box>
+          ) : supportAgents.length === 0 ? (
+            <Typography variant="body2">
+              {t('Support.AGENTS_EMPTY', 'No support agents assigned yet.')}
+            </Typography>
+          ) : (
+            <TableContainer component={Paper} variant="outlined">
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>{t('Profile.NAME_LABEL', 'Name')}</TableCell>
+                    <TableCell>{t('Auth.EMAIL_LABEL', 'Email')}</TableCell>
+                    <TableCell align="right">
+                      {t('Common.ACTIONS', 'Actions')}
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {supportAgents.map((agentUser) => (
+                    <TableRow key={agentUser.id}>
+                      <TableCell>{getUserDisplayName(agentUser) || '-'}</TableCell>
+                      <TableCell>{agentUser.email || '-'}</TableCell>
+                      <TableCell align="right">
+                        <IconButton
+                          size="small"
+                          color="error"
+                          onClick={() => handleRemoveAgent(agentUser)}
+                          disabled={agentActionUserId === agentUser.id}
+                          aria-label={t('Support.AGENTS_REMOVE', 'Remove support agent')}
+                        >
+                          <CloseIcon fontSize="small" />
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </Paper>
+      )}
+
       <Typography variant="h6" gutterBottom>
         {t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests')}
       </Typography>

package/src/components/UserListComponent.jsx

@@ -14,7 +14,7 @@ import {
 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';
+import { fetchUsersList, deleteUser, updateUserRole } from '../auth/authApi';
 
 const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
 
@@ -79,15 +79,6 @@ export function UserListComponent({
     }
   };
 
-  const handleToggleSupporter = async (userId, newValue) => {
-    try {
-      await updateUserSupportStatus(userId, newValue);
-      await loadUsers();
-    } catch (err) {
-      alert(t(err.code || 'Auth.USER_UPDATE_FAILED'));
-    }
-  };
-
   const defaultCanEdit = (targetUser) => {
       if (!currentUser) return false;
       if (currentUser.is_superuser) return true;
@@ -179,6 +170,7 @@ export function UserListComponent({
   };
 
   const getSearchBucketForUser = (user) => {
+    const hasSuccessfulLogin = Boolean(user?.successful_login ?? user?.last_login);
     const baseValues = [
       user?.id,
       user?.email,
@@ -188,7 +180,7 @@ export function UserListComponent({
       getUserDisplayName(user),
       user?.role,
       user?.language,
-      user?.is_support_agent ? t('Common.YES', 'Yes') : t('Common.NO', 'No'),
+      hasSuccessfulLogin ? t('Common.YES', 'Yes') : t('Common.NO', 'No'),
     ];
 
     const extraValues = visibleExtraColumns.map((column) => getExtraColumnSearchValue(column, user));
@@ -241,6 +233,20 @@ export function UserListComponent({
         flex: 1,
         valueGetter: (_value, row) => getUserDisplayName(row),
       },
+      {
+        field: 'successful_login',
+        headerName: t('UserList.SUCCESSFUL_LOGIN', 'Successful Login'),
+        minWidth: 180,
+        flex: 0.8,
+        valueGetter: (_value, row) => Boolean(row?.successful_login ?? row?.last_login),
+        renderCell: (params) => (
+          <Typography variant="body2">
+            {Boolean(params.row?.successful_login ?? params.row?.last_login)
+              ? t('Common.YES', 'Yes')
+              : t('Common.NO', 'No')}
+          </Typography>
+        ),
+      },
       {
         field: 'role',
         headerName: t('UserList.ROLE', 'Role'),
@@ -262,28 +268,6 @@ export function UserListComponent({
           );
         },
       },
-      {
-        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) => ({

package/src/i18n/authTranslations.ts

@@ -1337,6 +1337,36 @@ export const authTranslations = {
     "en": "Authentication settings saved.",
     "sw": "Mipangilio ya uthibitishaji imehifadhiwa."
   },
+  "Auth.AUTH_FACTOR_TITLE": {
+    "de": "Authentifizierungsanforderungen",
+    "fr": "Exigences d'authentification",
+    "en": "Authentication Requirements",
+    "sw": "Mahitaji ya uthibitishaji"
+  },
+  "Auth.AUTH_FACTOR_HINT": {
+    "de": "Legen Sie fest, wie viele Authentifizierungsfaktoren mindestens für die Anmeldung erforderlich sind.",
+    "fr": "Définissez le nombre minimal de facteurs d'authentification requis pour la connexion.",
+    "en": "Define the minimum number of authentication factors required for sign-in.",
+    "sw": "Weka idadi ya chini ya vipengele vya uthibitishaji vinavyohitajika ili kuingia."
+  },
+  "Auth.ONE_FACTOR_LABEL": {
+    "de": "Single-Factor-Authentifizierung erlauben",
+    "fr": "Autoriser l'authentification à un facteur",
+    "en": "Allow single-factor authentication",
+    "sw": "Ruhusu uthibitishaji wa kipengele kimoja"
+  },
+  "Auth.TWO_FACTOR_LABEL": {
+    "de": "Zwei-Faktor-Authentifizierung erzwingen",
+    "fr": "Exiger l'authentification à deux facteurs",
+    "en": "Require two-factor authentication",
+    "sw": "Hitaji uthibitishaji wa vipengele viwili"
+  },
+  "Auth.AUTH_FACTOR_SAVE_SUCCESS": {
+    "de": "Die Anforderung für Authentifizierungsfaktoren wurde gespeichert.",
+    "fr": "L'exigence relative aux facteurs d'authentification a été enregistrée.",
+    "en": "Factor requirement saved.",
+    "sw": "Hitaji la vipengele vya uthibitishaji limehifadhiwa."
+  },
   "Auth.REGISTRATION_METHODS_TITLE": {
     "de": "Registrierungsmethoden",
     "fr": "Méthodes d'inscription",

package/src/pages/AccountPage.jsx

@@ -62,6 +62,13 @@ export function AccountPage({
   
   // NEU: Superuser-Flag prüfen
   const isSuperUser = user?.is_superuser || false;
+  const canViewUsers = Boolean(isSuperUser || perms.can_view_users);
+  const canViewInvite = Boolean(isSuperUser || perms.can_view_invite || perms.can_invite);
+  const canViewAuthPolicy = Boolean(isSuperUser || perms.can_view_auth_policy);
+  const canWriteAuthPolicy = Boolean(isSuperUser || perms.can_write_auth_policy);
+  const canSendInvites = Boolean(isSuperUser || perms.can_send_invites);
+  const canManageAccessCodes = Boolean(isSuperUser || perms.can_manage_access_codes);
+  const canManageSignupQr = Boolean(isSuperUser || perms.can_manage_signup_qr);
 
   const handleTabChange = (_event, newValue) => {
     setSearchParams({ tab: newValue });
@@ -74,7 +81,7 @@ export function AccountPage({
 
   useEffect(() => {
     let active = true;
-    const canLoadPolicy = Boolean(user) && (isSuperUser || perms.can_invite || perms.can_manage_access_codes);
+    const canLoadPolicy = Boolean(user) && (canViewAuthPolicy || canManageSignupQr || canManageAccessCodes);
 
     if (!canLoadPolicy) {
       setAuthPolicy(null);
@@ -102,7 +109,7 @@ export function AccountPage({
     return () => {
       active = false;
     };
-  }, [user, isSuperUser, perms.can_invite, perms.can_manage_access_codes, t]);
+  }, [user, canViewAuthPolicy, canManageSignupQr, canManageAccessCodes, t]);
 
   // 3. Dynamic Tabs (angepasst für Superuser)
   const tabs = useMemo(() => {
@@ -116,11 +123,11 @@ export function AccountPage({
 
     // Logik: Superuser darf ALLES, sonst gelten die spezifischen Permissions
     
-    if (isSuperUser || perms.can_view_users) {
+    if (canViewUsers) {
       list.push({ value: 'users', label: t('Account.TAB_USERS', 'Users') });
     }
     
-    if (isSuperUser || perms.can_invite || perms.can_manage_access_codes) {
+    if (canViewInvite) {
       list.push({ value: 'invite', label: t('Account.TAB_INVITE', 'Invite') });
     }
     
@@ -140,7 +147,7 @@ export function AccountPage({
     });
 
     return list;
-  }, [user, perms, t, isSuperUser, extraTabs]);
+  }, [user, perms, t, isSuperUser, extraTabs, canViewUsers, canViewInvite]);
 
   // 4. Loading & Auth Checks
   if (loading) {
@@ -227,29 +234,30 @@ export function AccountPage({
       {safeTab === 'invite' && (
         <Box sx={{ mt: 2 }}>
           <Stack spacing={2.5}>
-            {(isSuperUser || perms.can_invite) && (
+            {canViewAuthPolicy && (
+              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+                <AuthFactorRequirementCard canEdit={canWriteAuthPolicy} policy={authPolicy} />
+              </Paper>
+            )}
+
+            {canViewAuthPolicy && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <RegistrationMethodsManager
                   policy={authPolicy}
                   error={authPolicyError}
                   onPolicyChange={setAuthPolicy}
+                  canEdit={canWriteAuthPolicy}
                 />
               </Paper>
             )}
 
-            {(isSuperUser || perms.can_invite) && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
-                <AuthFactorRequirementCard />
-              </Paper>
-            )}
-
-            {(isSuperUser || perms.can_invite) && Boolean(authPolicy?.allow_admin_invite) && (
+            {canSendInvites && Boolean(authPolicy?.allow_admin_invite) && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <UserInviteComponent />
               </Paper>
             )}
 
-            {(isSuperUser || perms.can_manage_access_codes) && Boolean(authPolicy?.allow_self_signup_access_code) && (
+            {canManageAccessCodes && Boolean(authPolicy?.allow_self_signup_access_code) && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <Typography variant="h6" gutterBottom>
                   {t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes')}
@@ -261,33 +269,35 @@ export function AccountPage({
               </Paper>
             )}
 
-            {(isSuperUser || perms.can_invite) && showBulkInviteCsvTab && Boolean(authPolicy?.allow_admin_invite) && (
+            {canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy?.allow_admin_invite) && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <BulkInviteCsvTab {...bulkInviteCsvProps} />
               </Paper>
             )}
 
-            {(isSuperUser || perms.can_invite) && Boolean(authPolicy?.allow_self_signup_email_domain) && (
+            {canViewAuthPolicy && Boolean(authPolicy?.allow_self_signup_email_domain) && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <AllowedEmailDomainsManager
                   enabled={Boolean(authPolicy?.allow_self_signup_email_domain)}
                   domains={authPolicy?.allowed_email_domains || []}
                   onPolicyChange={setAuthPolicy}
+                  canEdit={canWriteAuthPolicy}
                 />
               </Paper>
             )}
 
-            {(isSuperUser || perms.can_invite) && Boolean(authPolicy?.allow_self_signup_qr) && (
+            {canViewAuthPolicy && Boolean(authPolicy?.allow_self_signup_qr) && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <QrSignupValidityManager
                   enabled={Boolean(authPolicy?.allow_self_signup_qr)}
                   expiryDays={authPolicy?.signup_qr_expiry_days}
                   onPolicyChange={setAuthPolicy}
+                  canEdit={canWriteAuthPolicy}
                 />
               </Paper>
             )}
 
-            {(isSuperUser || perms.can_invite) && Boolean(authPolicy?.allow_self_signup_qr) && (
+            {canManageSignupQr && Boolean(authPolicy?.allow_self_signup_qr) && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <QrSignupManager
                   enabled={Boolean(authPolicy?.allow_self_signup_qr)}