@micha.bigler/ui-core-micha 1.4.20 → 1.4.22

package/src/components/MFAComponent.jsx

@@ -18,7 +18,7 @@ import {
 import DeleteIcon from '@mui/icons-material/Delete';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { useTranslation } from 'react-i18next';
-import { authApi } from '../auth/authApi';
+import { fetchAuthenticators, requestTotpKey, activateTotp, deactivateTotp, fetchRecoveryCodes, generateRecoveryCodes  } from '../auth/authApi';
 
 const MFAComponent = () => {
   const { t } = useTranslation();
@@ -41,7 +41,7 @@ const MFAComponent = () => {
     setLoading(true);
     setErrorKey(null);
     try {
-      const data = await authApi.fetchAuthenticators();
+      const data = await fetchAuthenticators();
       setAuthenticators(Array.isArray(data) ? data : []);
     } catch (err) {
       // 404 / leer einfach schlucken
@@ -64,7 +64,7 @@ const MFAComponent = () => {
     setIsSettingUp(true);
 
     try {
-      const result = await authApi.requestTotpKey();
+      const result = await requestTotpKey();
 
       if (result.exists) {
         setIsSettingUp(false);
@@ -90,7 +90,7 @@ const MFAComponent = () => {
     setSubmitting(true);
     setErrorKey(null);
     try {
-      await authApi.activateTotp(verifyCode);
+      await activateTotp(verifyCode);
       setIsSettingUp(false);
       setVerifyCode('');
       setTotpData(null);
@@ -112,7 +112,7 @@ const MFAComponent = () => {
 
     setErrorKey(null);
     try {
-      await authApi.deactivateTotp();
+      await deactivateTotp();
       await loadData();
     } catch (err) {
       // eslint-disable-next-line no-console
@@ -125,7 +125,7 @@ const MFAComponent = () => {
   const handleShowRecoveryCodes = async () => {
     setErrorKey(null);
     try {
-      const data = await authApi.fetchRecoveryCodes();
+      const data = await fetchRecoveryCodes();
       const codes = data.codes || data.unused_codes || [];
       setRecoveryCodes(Array.isArray(codes) ? codes : []);
       setShowRecovery(true);
@@ -139,7 +139,7 @@ const MFAComponent = () => {
   const handleGenerateNewRecoveryCodes = async () => {
     setErrorKey(null);
     try {
-      const data = await authApi.generateRecoveryCodes();
+      const data = await generateRecoveryCodes();
       const codes = data.codes || data.unused_codes || [];
       setRecoveryCodes(Array.isArray(codes) ? codes : []);
     } catch (err) {

package/src/components/MfaLoginComponent.jsx

@@ -14,7 +14,8 @@ import {
   DialogActions,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { authApi } from '../auth/authApi';
+import { authenticateWithMFA, fetchCurrentUser, requestMfaSupportHelp  } from '../auth/authApi';
+import { loginWithPasskey  } from '../utils/authService';
 
 const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel }) => {
   const { t } = useTranslation();
@@ -41,9 +42,9 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
       const trimmed = code.trim();
       const isRecovery = trimmed.length > 6;
 
-      await authApi.authenticateWithMFA({ code: trimmed });
+      await authenticateWithMFA({ code: trimmed });
 
-      const user = await authApi.fetchCurrentUser();
+      const user = await fetchCurrentUser();
 
       onSuccess({
         user,
@@ -61,7 +62,7 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
     setInfoKey(null);
     setSubmitting(true);
     try {
-      const { user } = await authApi.loginWithPasskey();
+      const { user } = await loginWithPasskey();
       onSuccess({ user, method: 'webauthn' });
     } catch (err) {
       setErrorKey(err.code || 'Auth.PASSKEY_FAILED');
@@ -81,7 +82,7 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
     setInfoKey(null);
     setSubmitting(true);
     try {
-      await authApi.requestMfaSupportHelp(identifier || '', helpMessage || '');
+      await requestMfaSupportHelp(identifier || '', helpMessage || '');
       setHelpRequested(true);
       setInfoKey('Auth.MFA_HELP_REQUESTED');
       setHelpDialogOpen(false);

package/src/components/PasskeysComponent.jsx

@@ -18,7 +18,8 @@ import {
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
-import { authApi } from '../auth/authApi';
+import { fetchPasskeys, registerPasskey, deletePasskey } from '../auth/authApi';
+import { registerPasskey } from '../utils/authService';
 import { FEATURES } from '../auth/authConfig';
 
 const PasskeysComponent = () => {
@@ -41,10 +42,9 @@ const PasskeysComponent = () => {
   const loadPasskeys = async () => {
     setErrorKey(null);
     try {
-      const data = await authApi.fetchPasskeys();
+      const data = await fetchPasskeys();
       setPasskeys(Array.isArray(data) ? data : []);
     } catch (err) {
-      // authApi.fetchPasskeys wirft bereits normalisierte Errors mit .code
       setErrorKey(err.code || 'Auth.PASSKEY_LIST_FAILED');
     } finally {
       setLoading(false);
@@ -74,7 +74,7 @@ const PasskeysComponent = () => {
       const fallbackName =
         name?.trim() || `Passkey on ${navigator.platform || 'this device'}`;
 
-      await authApi.registerPasskey(fallbackName);
+      await registerPasskey(fallbackName);
       setMessageKey('Auth.PASSKEY_CREATE_SUCCESS');
       setName('');
 
@@ -94,7 +94,7 @@ const PasskeysComponent = () => {
 
     setDeletingIds((prev) => new Set(prev).add(id));
     try {
-      await authApi.deletePasskey(id);
+      await deletePasskey(id);
       setPasskeys((prev) => prev.filter((pk) => pk.id !== id));
       setMessageKey('Auth.PASSKEY_DELETE_SUCCESS');
     } catch (err) {

package/src/components/SecurityComponent.jsx

@@ -11,7 +11,8 @@ import PasswordChangeForm from './PasswordChangeForm';
 import SocialLoginButtons from './SocialLoginButtons';
 import PasskeysComponent from './PasskeysComponent';
 import MFAComponent from './MFAComponent';
-import { authApi } from '../auth/authApi';
+import { changePassword } from '../auth/authApi';
+import { startSocialLogin } from '../utils/authService';
 
 const SecurityComponent = ({
   fromRecovery = false,
@@ -26,7 +27,7 @@ const SecurityComponent = ({
     setMessageKey(null);
     setErrorKey(null);
     try {
-      await authApi.startSocialLogin(provider);
+      await startSocialLogin(provider);
       // Redirect läuft über den Provider-Flow, hier kein extra Text nötig
     } catch (err) {
       setErrorKey(err.code || 'Auth.SOCIAL_LOGIN_FAILED');
@@ -37,7 +38,7 @@ const SecurityComponent = ({
     setMessageKey(null);
     setErrorKey(null);
     try {
-      await authApi.changePassword(currentPassword, newPassword);
+      await changePassword(currentPassword, newPassword);
       setMessageKey('Auth.RESET_PASSWORD_SUCCESS');
     } catch (err) {
       setErrorKey(err.code || 'Auth.PASSWORD_CHANGE_FAILED');

package/src/components/SupportRecoveryRequestsTab.jsx

@@ -21,7 +21,7 @@ import {
   TextField,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { authApi } from '../auth/authApi';
+import { fetchRecoveryRequests, approveRecoveryRequest, rejectRecoveryRequest } from '../auth/authApi';
 
 const SupportRecoveryRequestsTab = () => {
   const { t } = useTranslation();
@@ -39,7 +39,7 @@ const SupportRecoveryRequestsTab = () => {
     setLoading(true);
     setErrorKey(null);
     try {
-      const data = await authApi.fetchRecoveryRequests(statusFilter);
+      const data = await fetchRecoveryRequests(statusFilter);
       setRequests(Array.isArray(data) ? data : []);
     } catch (err) {
       setErrorKey(err.code || 'Support.RECOVERY_REQUESTS_LOAD_FAILED');
@@ -69,7 +69,7 @@ const SupportRecoveryRequestsTab = () => {
     if (!selectedRequest) return;
     setErrorKey(null);
     try {
-      await authApi.approveRecoveryRequest(selectedRequest.id, dialogNote);
+      await approveRecoveryRequest(selectedRequest.id, dialogNote);
       await loadRequests();
       closeDialog();
     } catch (err) {
@@ -81,7 +81,7 @@ const SupportRecoveryRequestsTab = () => {
     if (!selectedRequest) return;
     setErrorKey(null);
     try {
-      await authApi.rejectRecoveryRequest(selectedRequest.id, dialogNote);
+      await rejectRecoveryRequest(selectedRequest.id, dialogNote);
       await loadRequests();
       closeDialog();
     } catch (err) {

package/src/components/UserInviteComponent.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Box, TextField, Button, Typography, Alert, CircularProgress } from '@mui/material';
+import { inviteUserByAdmin } from '../auth/authApi';
+import { useTranslation } from 'react-i18next';
+
+export function UserInviteComponent({ apiUrl = '/api/users/' }) {
+  const { t } = useTranslation();
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const inviteUser = async () => {
+    setMessage('');
+    setError('');
+    if (!inviteEmail) return;
+
+    setLoading(true);
+    try {
+      // API Call via authApi
+      const data = await inviteUserByAdmin(inviteEmail, apiUrl);
+      
+      setInviteEmail('');
+      setMessage(data.detail || t('Auth.INVITE_SENT_SUCCESS', 'Invitation sent.'));
+    } catch (err) {
+      // err.message enthält dank authApi bereits den normalisierten Text oder Code
+      console.error('Error inviting user:', err);
+      // Fallback Text, falls der Key nicht übersetzt ist
+      setError(t(err.code) || err.message || t('Auth.INVITE_FAILED'));
+    } finally {
+        setLoading(false);
+    }
+  };
+
+  return (
+    <Box sx={{ maxWidth: 600, mt: 2 }}>
+      <Typography variant="h6" gutterBottom>
+        {t('Auth.INVITE_TITLE', 'Invite a new user')}
+      </Typography>
+
+      {message && <Alert severity="success" sx={{ mb: 2 }}>{message}</Alert>}
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+
+      <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
+        <TextField
+          label={t('Auth.EMAIL_LABEL', 'Email address')}
+          type="email"
+          variant="outlined"
+          fullWidth
+          size="small"
+          value={inviteEmail}
+          onChange={(e) => setInviteEmail(e.target.value)}
+          disabled={loading}
+          onKeyPress={(e) => {
+              if (e.key === 'Enter') inviteUser();
+          }}
+        />
+        <Button 
+            variant="contained" 
+            onClick={inviteUser} 
+            disabled={loading || !inviteEmail}
+            sx={{ minWidth: 100, height: 40 }}
+        >
+          {loading ? <CircularProgress size={24} color="inherit" /> : t('Auth.INVITE_BUTTON', 'Invite')}
+        </Button>
+      </Box>
+    </Box>
+  );
+}

package/src/components/UserListComponent.jsx

@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Box, Typography, Table, TableBody, TableCell, TableContainer,
+  TableHead, TableRow, Paper, FormControl, InputLabel, Select,
+  MenuItem, Button, IconButton, Tooltip, CircularProgress, Alert
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useTranslation } from 'react-i18next';
+import { fetchUsersList, deleteUser, updateUserRole, updateUserSupportStatus } from '../auth/authApi'; // Nur noch authApi!
+
+const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
+
+export function UserListComponent({ 
+    roles = DEFAULT_ROLES, 
+    apiUrl = '/api/users/', 
+    currentUser 
+}) {
+  const { t } = useTranslation();
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const loadUsers = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchUsersList(apiUrl);
+      setUsers(data);
+    } catch (err) {
+      // err.code ist dank normaliseApiError verfügbar
+      setError(err.code || 'Auth.USER_LIST_FAILED');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadUsers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiUrl]);
+
+  const handleDelete = async (userId) => {
+    if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?'))) return;
+    try {
+      await deleteUser(userId, apiUrl);
+      // Optimistic update oder reload:
+      setUsers(prev => prev.filter(u => u.id !== userId));
+    } catch (err) {
+      alert(t(err.code || 'Auth.USER_DELETE_FAILED'));
+    }
+  };
+
+  const handleChangeRole = async (userId, newRole) => {
+    try {
+      await updateUserRole(userId, newRole, apiUrl);
+      // Reload list to ensure consistency or update local state
+      loadUsers(); 
+    } catch (err) {
+      alert(t(err.code || 'Auth.USER_ROLE_UPDATE_FAILED'));
+    }
+  };
+
+  const handleToggleSupporter = async (userId, newValue) => {
+    try {
+      await updateUserSupportStatus(userId, newValue, apiUrl);
+      loadUsers();
+    } catch (err) {
+      alert(t(err.code || 'Auth.USER_UPDATE_FAILED'));
+    }
+  };
+
+  const canEdit = (targetUser) => {
+      if (!currentUser) return false;
+      if (currentUser.is_superuser) return true;
+      
+      const myRole = currentUser.role || 'none';
+      const targetRole = targetUser.role || 'none';
+
+      if (myRole === 'admin') return true;
+      
+      // Beispiel Logik: Lehrer dürfen Schüler bearbeiten
+      if (myRole === 'teacher') {
+          if (targetUser.id === currentUser.id) return false; 
+          if (['teacher', 'admin', 'supervisor'].includes(targetRole)) return false;
+          return true;
+      }
+      return false;
+  };
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>{t('UserList.TITLE', 'All Users')}</Typography>
+      
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{t(error)}</Alert>}
+
+      {loading ? (
+        <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
+            <CircularProgress />
+        </Box>
+      ) : (
+        <TableContainer component={Paper}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>{t('Auth.EMAIL_LABEL', 'Email')}</TableCell>
+                <TableCell>{t('Profile.NAME_LABEL', 'Name')}</TableCell>
+                <TableCell>{t('UserList.ROLE', 'Role')}</TableCell>
+                <TableCell>{t('UserList.SUPPORTER', 'Support Agent')}</TableCell>
+                <TableCell>{t('Common.ACTIONS', 'Actions')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {users.map((u) => (
+                <TableRow key={u.id}>
+                  <TableCell>{u.email}</TableCell>
+                  <TableCell>
+                      {u.first_name || u.last_name ? `${u.first_name} ${u.last_name}` : u.username}
+                  </TableCell>
+                  <TableCell>
+                    <FormControl size="small" fullWidth disabled={!canEdit(u)}>
+                        <Select 
+                            value={u.role || 'none'} 
+                            onChange={(e) => handleChangeRole(u.id, e.target.value)}
+                            variant="standard"
+                            disableUnderline
+                        >
+                            {roles.map(r => <MenuItem key={r} value={r}>{r}</MenuItem>)}
+                        </Select>
+                    </FormControl>
+                  </TableCell>
+                  <TableCell>
+                      <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' }}
+                      >
+                          {u.is_support_agent ? t('Common.YES') : t('Common.NO')}
+                      </Button>
+                  </TableCell>
+                  <TableCell>
+                      <Tooltip title={t('Common.DELETE')}>
+                        <span>
+                            <IconButton onClick={() => handleDelete(u.id)} color="error" disabled={!canEdit(u)}>
+                                <DeleteIcon />
+                            </IconButton>
+                        </span>
+                      </Tooltip>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {users.length === 0 && (
+                  <TableRow>
+                      <TableCell colSpan={5} align="center">
+                          {t('UserList.NO_USERS', 'No users found.')}
+                      </TableCell>
+                  </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </Box>
+  );
+}

package/src/pages/AccountPage.jsx

@@ -1,35 +1,53 @@
-// src/pages/AccountPage.jsx
-import React, { useState, useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
-import { Tabs, Tab, Box } from '@mui/material';
+import { useSearchParams } from 'react-router-dom';
+import { 
+  Tabs, 
+  Tab, 
+  Box, 
+  Typography, 
+  Alert, 
+  CircularProgress 
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+// Interne Komponenten der Library
 import { WidePage } from '../layout/PageLayout';
-import ProfileComponent from '../components/ProfileComponent';
-import SecurityComponent from '../components/SecurityComponent';
-import SupportRecoveryRequestsTab from '../components/SupportRecoveryRequestsTab';
-import { authApi } from '../auth/authApi';
+import { ProfileComponent } from '../components/ProfileComponent';
+import { SecurityComponent } from '../components/SecurityComponent';
+import { UserListComponent } from '../components/UserListComponent';
+import { UserInviteComponent } from '../components/UserInviteComponent';
+import { AccessCodeManager } from '../components/AccessCodeManager';
+import { SupportRecoveryRequestsTab } from '../components/SupportRecoveryRequestsTab';
 import { AuthContext } from '../auth/AuthContext';
-import { useSearchParams } from 'react-router-dom';
+import { authApi } from '../auth/authApi';
 
+/**
+ * Vollständige, selbst-konfigurierende Account-Seite.
+ * * Architektur:
+ * - Permissions: Werden aus user.ui_permissions gelesen (vom Backend).
+ * - Rollen: Werden aus user.available_roles gelesen (vom Backend).
+ * - Keine Props mehr nötig -> Plug & Play in der App.js.
+ */
 export function AccountPage() {
-  const { login } = useContext(AuthContext);
-  const [searchParams] = useSearchParams();
+  const { t } = useTranslation();
+  const { user, login, loading } = useContext(AuthContext);
+  const [searchParams, setSearchParams] = useSearchParams();
 
-  const initialTabParam = searchParams.get('tab');
-  const initialTab =
-    initialTabParam === 'security'
-      ? 'security'
-      : initialTabParam === 'support'
-        ? 'support'
-        : 'account';
+  // 1. URL State Management
+  const currentTab = searchParams.get('tab') || 'profile';
+  const fromRecovery = searchParams.get('from') === 'recovery';
+  const fromWeakLogin = searchParams.get('from') === 'weak_login';
 
-  const fromParam = searchParams.get('from');
-  const fromRecovery = fromParam === 'recovery';
-  const fromWeakLogin = fromParam === 'weak_login';
-
-  const [tab, setTab] = useState(initialTab);
+  // 2. Daten & Permissions extrahieren (Single Source of Truth)
+  // Backend liefert die Liste der Rollen (Keys), z.B. ['student', 'teacher']
+  const activeRoles = user?.available_roles || [];
+  
+  // Backend liefert Permissions basierend auf settings.py
+  const perms = user?.ui_permissions || {};
 
   const handleTabChange = (_event, newValue) => {
-    setTab(newValue);
+    setSearchParams({ tab: newValue });
   };
 
   const handleProfileSubmit = async (payload) => {
@@ -37,24 +55,92 @@ export function AccountPage() {
     login(updatedUser);
   };
 
+  // 3. Dynamische Tabs bauen
+  const tabs = useMemo(() => {
+    // Wenn User noch nicht da ist, leere Liste (Loading State fängt das ab)
+    if (!user) return [];
+
+    const list = [
+      { value: 'profile', label: t('Account.TAB_PROFILE', 'Profile') },
+      { value: 'security', label: t('Account.TAB_SECURITY', 'Security') },
+    ];
+
+    if (perms.can_view_users) {
+      list.push({ value: 'users', label: t('Account.TAB_USERS', 'Users') });
+    }
+    
+    if (perms.can_invite) {
+      list.push({ value: 'invite', label: t('Account.TAB_INVITE', 'Invite') });
+    }
+    
+    if (perms.can_manage_access_codes) {
+      list.push({ value: 'access', label: t('Account.TAB_ACCESS_CODES', 'Access Codes') });
+    }
+    
+    if (perms.can_view_support) {
+      list.push({ value: 'support', label: t('Account.TAB_SUPPORT', 'Support') });
+    }
+
+    return list;
+  }, [user, perms, t]);
+
+  // 4. Loading & Auth Checks
+  if (loading) {
+    return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}>
+            <CircularProgress />
+        </Box>
+    );
+  }
+
+  if (!user) {
+      return (
+          <WidePage>
+              <Alert severity="warning">
+                  {t('Auth.NOT_LOGGED_IN', 'User not logged in.')}
+              </Alert>
+          </WidePage>
+      );
+  }
+
+  // 5. Sicherheits-Check: Ist der aktuelle Tab überhaupt erlaubt?
+  // Verhindert Zugriff durch URL-Manipulation (z.B. ?tab=users eingeben ohne Admin-Rechte)
+  const activeTabExists = tabs.some(t => t.value === currentTab);
+  const safeTab = activeTabExists ? currentTab : 'profile';
+
   return (
-    <WidePage title="Account">
+    <WidePage title={t('Account.TITLE', 'Account & Administration')}>
       <Helmet>
-        <title>PROJECT_NAME – Account</title>
+        <title>{t('Account.PAGE_TITLE', 'Account')} – {user.email}</title>
       </Helmet>
 
       <Tabs
-        value={tab}
+        value={safeTab}
         onChange={handleTabChange}
-        sx={{ mb: 3 }}
+        variant="scrollable"
+        scrollButtons="auto"
+        sx={{ mb: 3, borderBottom: 1, borderColor: 'divider' }}
       >
-        <Tab label="Security" value="security" />
-        <Tab label="Account" value="account" />
-        <Tab label="Support" value="support" />
+        {tabs.map((tab) => (
+          <Tab key={tab.value} label={tab.label} value={tab.value} />
+        ))}
       </Tabs>
 
-      {tab === 'security' && (
-        <Box sx={{ mt: 1 }}>
+      {/* --- TAB CONTENT --- */}
+
+      {safeTab === 'profile' && (
+        <Box sx={{ mt: 2 }}>
+          <ProfileComponent
+            onSubmit={handleProfileSubmit}
+            showName
+            showPrivacy
+            showCookies
+          />
+        </Box>
+      )}
+
+      {safeTab === 'security' && (
+        <Box sx={{ mt: 2 }}>
           <SecurityComponent
             fromRecovery={fromRecovery}
             fromWeakLogin={fromWeakLogin}
@@ -62,28 +148,35 @@ export function AccountPage() {
         </Box>
       )}
 
-      {tab === 'account' && (
-        <Box sx={{ mt: 1 }}>
-          <ProfileComponent
-            onLoad={() => {}}
-            onSubmit={handleProfileSubmit}
-            submitText="Save"
-            showName
-            showPrivacy
-            showCookies
+      {safeTab === 'users' && (
+        <Box sx={{ mt: 2 }}>
+          <UserListComponent
+            roles={activeRoles} 
+            currentUser={user}
           />
         </Box>
       )}
 
-      
+      {safeTab === 'invite' && (
+        <Box sx={{ mt: 2 }}>
+          <UserInviteComponent />
+        </Box>
+      )}
+
+      {safeTab === 'access' && (
+        <Box sx={{ mt: 2 }}>
+          <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+            {t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.')}
+          </Typography>
+          <AccessCodeManager />
+        </Box>
+      )}
 
-      {tab === 'support' && (
-        <Box sx={{ mt: 1 }}>
+      {safeTab === 'support' && (
+        <Box sx={{ mt: 2 }}>
           <SupportRecoveryRequestsTab />
         </Box>
       )}
     </WidePage>
   );
-}
-
-export default AccountPage;
+}