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

package/dist/components/MFAComponent.js

@@ -6,7 +6,7 @@ import { Box, Typography, Button, TextField, Card, CardContent, Alert, CircularP
 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();
     const [authenticators, setAuthenticators] = useState([]);
@@ -24,7 +24,7 @@ const MFAComponent = () => {
         setLoading(true);
         setErrorKey(null);
         try {
-            const data = await authApi.fetchAuthenticators();
+            const data = await fetchAuthenticators();
             setAuthenticators(Array.isArray(data) ? data : []);
         }
         catch (err) {
@@ -45,7 +45,7 @@ const MFAComponent = () => {
         setErrorKey(null);
         setIsSettingUp(true);
         try {
-            const result = await authApi.requestTotpKey();
+            const result = await requestTotpKey();
             if (result.exists) {
                 setIsSettingUp(false);
                 setErrorKey('Auth.MFA_TOTP_ALREADY_ACTIVE');
@@ -69,7 +69,7 @@ const MFAComponent = () => {
         setSubmitting(true);
         setErrorKey(null);
         try {
-            await authApi.activateTotp(verifyCode);
+            await activateTotp(verifyCode);
             setIsSettingUp(false);
             setVerifyCode('');
             setTotpData(null);
@@ -92,7 +92,7 @@ const MFAComponent = () => {
             return;
         setErrorKey(null);
         try {
-            await authApi.deactivateTotp();
+            await deactivateTotp();
             await loadData();
         }
         catch (err) {
@@ -105,7 +105,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);
@@ -119,7 +119,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 : []);
         }

package/dist/components/MfaLoginComponent.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { Box, Typography, TextField, Button, Stack, Alert, Divider, Dialog, DialogTitle, DialogContent, 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();
     const [code, setCode] = useState('');
@@ -24,8 +25,8 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
         try {
             const trimmed = code.trim();
             const isRecovery = trimmed.length > 6;
-            await authApi.authenticateWithMFA({ code: trimmed });
-            const user = await authApi.fetchCurrentUser();
+            await authenticateWithMFA({ code: trimmed });
+            const user = await fetchCurrentUser();
             onSuccess({
                 user,
                 method: isRecovery ? 'recovery_code' : 'totp',
@@ -43,7 +44,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) {
@@ -63,7 +64,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/dist/components/PasskeysComponent.js

@@ -4,7 +4,8 @@ import React, { useEffect, useState } from 'react';
 import { Box, Typography, Stack, Button, TextField, IconButton, CircularProgress, Alert, List, ListItem, ListItemText, ListItemSecondaryAction, Tooltip, Divider, } 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 = () => {
     const { t } = useTranslation();
@@ -20,11 +21,10 @@ 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 {
@@ -49,7 +49,7 @@ const PasskeysComponent = () => {
         setCreating(true);
         try {
             const fallbackName = (name === null || name === void 0 ? void 0 : name.trim()) || `Passkey on ${navigator.platform || 'this device'}`;
-            await authApi.registerPasskey(fallbackName);
+            await registerPasskey(fallbackName);
             setMessageKey('Auth.PASSKEY_CREATE_SUCCESS');
             setName('');
             setReloading(true);
@@ -68,7 +68,7 @@ const PasskeysComponent = () => {
         setErrorKey(null);
         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');
         }

package/dist/components/SecurityComponent.js

@@ -7,7 +7,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, fromWeakLogin = false, // optional: wenn du später weak-login-Redirect nutzt
  }) => {
     const { t } = useTranslation();
@@ -17,7 +18,7 @@ const SecurityComponent = ({ fromRecovery = false, fromWeakLogin = false, // opt
         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) {
@@ -28,7 +29,7 @@ const SecurityComponent = ({ fromRecovery = false, fromWeakLogin = false, // opt
         setMessageKey(null);
         setErrorKey(null);
         try {
-            await authApi.changePassword(currentPassword, newPassword);
+            await changePassword(currentPassword, newPassword);
             setMessageKey('Auth.RESET_PASSWORD_SUCCESS');
         }
         catch (err) {

package/dist/components/SupportRecoveryRequestsTab.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { useTranslation } from 'react-i18next';
-import { authApi } from '../auth/authApi';
+import { fetchRecoveryRequests, approveRecoveryRequest, rejectRecoveryRequest } from '../auth/authApi';
 const SupportRecoveryRequestsTab = () => {
     const { t } = useTranslation();
     const [requests, setRequests] = useState([]);
@@ -17,7 +17,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) {
@@ -46,7 +46,7 @@ const SupportRecoveryRequestsTab = () => {
             return;
         setErrorKey(null);
         try {
-            await authApi.approveRecoveryRequest(selectedRequest.id, dialogNote);
+            await approveRecoveryRequest(selectedRequest.id, dialogNote);
             await loadRequests();
             closeDialog();
         }
@@ -59,7 +59,7 @@ const SupportRecoveryRequestsTab = () => {
             return;
         setErrorKey(null);
         try {
-            await authApi.rejectRecoveryRequest(selectedRequest.id, dialogNote);
+            await rejectRecoveryRequest(selectedRequest.id, dialogNote);
             await loadRequests();
             closeDialog();
         }

package/dist/components/UserInviteComponent.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(Box, { sx: { maxWidth: 600, mt: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.INVITE_TITLE', 'Invite a new user') }), message && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-start' }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL', 'Email address'), type: "email", variant: "outlined", fullWidth: true, size: "small", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), disabled: loading, onKeyPress: (e) => {
+                            if (e.key === 'Enter')
+                                inviteUser();
+                        } }), _jsx(Button, { variant: "contained", onClick: inviteUser, disabled: loading || !inviteEmail, sx: { minWidth: 100, height: 40 }, children: loading ? _jsx(CircularProgress, { size: 24, color: "inherit" }) : t('Auth.INVITE_BUTTON', 'Invite') })] })] }));
+}

package/dist/components/UserListComponent.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Profile.NAME_LABEL', 'Name') }), _jsx(TableCell, { children: t('UserList.ROLE', 'Role') }), _jsx(TableCell, { children: t('UserList.SUPPORTER', 'Support Agent') }), _jsx(TableCell, { children: t('Common.ACTIONS', 'Actions') })] }) }), _jsxs(TableBody, { children: [users.map((u) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: u.email }), _jsx(TableCell, { children: u.first_name || u.last_name ? `${u.first_name} ${u.last_name}` : u.username }), _jsx(TableCell, { children: _jsx(FormControl, { size: "small", fullWidth: true, disabled: !canEdit(u), children: _jsx(Select, { value: u.role || 'none', onChange: (e) => handleChangeRole(u.id, e.target.value), variant: "standard", disableUnderline: true, children: roles.map(r => _jsx(MenuItem, { value: r, children: r }, r)) }) }) }), _jsx(TableCell, { children: _jsx(Button, { size: "small", variant: u.is_support_agent ? 'contained' : 'outlined', color: u.is_support_agent ? 'primary' : 'inherit', onClick: () => handleToggleSupporter(u.id, !u.is_support_agent), disabled: !canEdit(u), sx: { textTransform: 'none' }, children: u.is_support_agent ? t('Common.YES') : t('Common.NO') }) }), _jsx(TableCell, { children: _jsx(Tooltip, { title: t('Common.DELETE'), children: _jsx("span", { children: _jsx(IconButton, { onClick: () => handleDelete(u.id), color: "error", disabled: !canEdit(u), children: _jsx(DeleteIcon, {}) }) }) }) })] }, u.id))), users.length === 0 && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, align: "center", children: t('UserList.NO_USERS', 'No users found.') }) }))] })] }) }))] }));
+}

package/dist/pages/AccountPage.js

@@ -1,35 +1,79 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// 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 initialTabParam = searchParams.get('tab');
-    const initialTab = initialTabParam === 'security'
-        ? 'security'
-        : initialTabParam === 'support'
-            ? 'support'
-            : 'account';
-    const fromParam = searchParams.get('from');
-    const fromRecovery = fromParam === 'recovery';
-    const fromWeakLogin = fromParam === 'weak_login';
-    const [tab, setTab] = useState(initialTab);
+    const { t } = useTranslation();
+    const { user, login, loading } = useContext(AuthContext);
+    const [searchParams, setSearchParams] = useSearchParams();
+    // 1. URL State Management
+    const currentTab = searchParams.get('tab') || 'profile';
+    const fromRecovery = searchParams.get('from') === 'recovery';
+    const fromWeakLogin = searchParams.get('from') === 'weak_login';
+    // 2. Daten & Permissions extrahieren (Single Source of Truth)
+    // Backend liefert die Liste der Rollen (Keys), z.B. ['student', 'teacher']
+    const activeRoles = (user === null || user === void 0 ? void 0 : user.available_roles) || [];
+    // Backend liefert Permissions basierend auf settings.py
+    const perms = (user === null || user === void 0 ? void 0 : user.ui_permissions) || {};
     const handleTabChange = (_event, newValue) => {
-        setTab(newValue);
+        setSearchParams({ tab: newValue });
     };
     const handleProfileSubmit = async (payload) => {
         const updatedUser = await authApi.updateUserProfile(payload);
         login(updatedUser);
     };
-    return (_jsxs(WidePage, { title: "Account", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Account" }) }), _jsxs(Tabs, { value: tab, onChange: handleTabChange, sx: { mb: 3 }, children: [_jsx(Tab, { label: "Security", value: "security" }), _jsx(Tab, { label: "Account", value: "account" }), _jsx(Tab, { label: "Support", value: "support" })] }), tab === 'security' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), tab === 'account' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(ProfileComponent, { onLoad: () => { }, onSubmit: handleProfileSubmit, submitText: "Save", showName: true, showPrivacy: true, showCookies: true }) })), tab === 'support' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SupportRecoveryRequestsTab, {}) }))] }));
+    // 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 (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 10 }, children: _jsx(CircularProgress, {}) }));
+    }
+    if (!user) {
+        return (_jsx(WidePage, { children: _jsx(Alert, { severity: "warning", children: t('Auth.NOT_LOGGED_IN', 'User not logged in.') }) }));
+    }
+    // 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 (_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 }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserInviteComponent, {}) })), safeTab === 'access' && (_jsxs(Box, { sx: { mt: 2 }, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) }))] }));
 }
-export default AccountPage;

package/dist/pages/LoginPage.js

@@ -5,7 +5,8 @@ import { Helmet } from 'react-helmet';
 import { Typography, Box, Alert } from '@mui/material';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
-import { authApi } from '../auth/authApi';
+import { loginWithRecoveryPassword, loginWithPassword } from '../auth/authApi';
+import { loginWithPasskey, startSocialLogin } from '../utils/authService';
 import LoginForm from '../components/LoginForm';
 import MfaLoginComponent from '../components/MfaLoginComponent';
 import { useTranslation } from 'react-i18next';
@@ -29,14 +30,14 @@ export function LoginPage() {
         try {
             // Recovery flow: password login via special endpoint, no MFA
             if (recoveryToken) {
-                const result = await authApi.loginWithRecoveryPassword(identifier, password, recoveryToken);
+                const result = await loginWithRecoveryPassword(identifier, password, recoveryToken);
                 const user = result.user;
                 login(user);
                 navigate('/account?tab=security&from=recovery');
                 return;
             }
             // Normal login flow via headless allauth
-            const result = await authApi.loginWithPassword(identifier, password);
+            const result = await loginWithPassword(identifier, password);
             if (result.needsMfa) {
                 setMfaState({
                     availableTypes: result.availableTypes || [],
@@ -68,7 +69,7 @@ export function LoginPage() {
         setErrorKey(null);
         setSubmitting(true);
         try {
-            const { user } = await authApi.loginWithPasskey();
+            const { user } = await loginWithPasskey();
             login(user);
             const requiresExtra = ((_a = user.security_state) === null || _a === void 0 ? void 0 : _a.requires_additional_security) === true;
             if (requiresExtra) {
@@ -85,7 +86,7 @@ export function LoginPage() {
             setSubmitting(false);
         }
     };
-    const handleSocialLogin = (provider) => authApi.startSocialLogin(provider);
+    const handleSocialLogin = (provider) => startSocialLogin(provider);
     const handleSignUp = () => navigate('/signup');
     const handleForgotPassword = () => navigate('/reset-request-password');
     const handleMfaSuccess = ({ user, method }) => {

package/dist/pages/PasswordInvitePage.js

@@ -7,7 +7,7 @@ import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import PasswordSetForm from '../components/PasswordSetForm';
-import { authApi } from '../auth/authApi';
+import { verifyResetToken, setNewPassword } from '../auth/authApi';
 export function PasswordInvitePage() {
     const { uid, token } = useParams();
     const location = useLocation();
@@ -34,7 +34,7 @@ export function PasswordInvitePage() {
         }
         const check = async () => {
             try {
-                await authApi.verifyResetToken(uid, token);
+                await verifyResetToken(uid, token);
                 setChecked(true);
             }
             catch (err) {
@@ -53,7 +53,7 @@ export function PasswordInvitePage() {
         setErrorKey(null);
         setSuccessKey(null);
         try {
-            await authApi.setNewPassword(uid, token, newPassword);
+            await setNewPassword(uid, token, newPassword);
             setSuccessKey(isInvite
                 ? 'Auth.RESET_PASSWORD_SUCCESS_INVITE'
                 : 'Auth.RESET_PASSWORD_SUCCESS_RESET');

package/dist/pages/SignUpPage.js

@@ -6,7 +6,7 @@ import { Box, TextField, Button, Typography, Alert, } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
-import { authApi } from '../auth/authApi';
+import { validateAccessCode, requestInviteWithCode } from '../auth/authApi';
 export function SignUpPage() {
     const navigate = useNavigate();
     const { t } = useTranslation();
@@ -30,13 +30,13 @@ export function SignUpPage() {
         setSubmitting(true);
         try {
             // 1) Access-Code prüfen
-            const res = await authApi.validateAccessCode(accessCode);
+            const res = await validateAccessCode(accessCode);
             if (!(res === null || res === void 0 ? void 0 : res.valid)) {
                 setErrorKey('Auth.ACCESS_CODE_INVALID_OR_INACTIVE');
                 return;
             }
             // 2) Invite anfordern
-            await authApi.requestInviteWithCode(email, accessCode);
+            await requestInviteWithCode(email, accessCode);
             setSuccessKey('Auth.INVITE_REQUEST_SUCCESS');
         }
         catch (err) {

package/dist/utils/authService.js

@@ -0,0 +1,53 @@
+// src/utils/authService.js
+import { getPasskeyRegistrationOptions, completePasskeyRegistration, getPasskeyLoginOptions, completePasskeyLogin, fetchCurrentUser } from '../auth/authApi';
+import { ensureWebAuthnSupport, serializeCredential } from '../utils/webauthn-helpers';
+import { normaliseApiError } from '../utils/auth-errors';
+export async function registerPasskey(name = 'Passkey') {
+    ensureWebAuthnSupport();
+    // 1. Get Options from Server
+    const creationOptions = await getPasskeyRegistrationOptions();
+    // 2. Call Browser API
+    let credential;
+    try {
+        // Note: Parse JSON to Options needs a helper if creationOptions is raw JSON strings
+        // modern browsers/allauth usually provide correct types, but check your library version
+        // For standard Allauth headless, you might need window.PublicKeyCredential.parseCreationOptionsFromJSON
+        const pubKey = window.PublicKeyCredential.parseCreationOptionsFromJSON(creationOptions);
+        credential = await navigator.credentials.create({ publicKey: pubKey });
+    }
+    catch (err) {
+        if (err.name === 'NotAllowedError') {
+            throw normaliseApiError(new Error('Auth.PASSKEY_CANCELLED'), 'Auth.PASSKEY_CANCELLED');
+        }
+        throw err;
+    }
+    // 3. Send back to Server
+    const credentialJson = serializeCredential(credential);
+    return completePasskeyRegistration(credentialJson, name);
+}
+export async function loginWithPasskey() {
+    ensureWebAuthnSupport();
+    // 1. Get Challenge
+    const requestOptions = await getPasskeyLoginOptions();
+    // 2. Browser Sign
+    let assertion;
+    try {
+        const pubKey = window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptions);
+        assertion = await navigator.credentials.get({ publicKey: pubKey });
+    }
+    catch (err) {
+        throw normaliseApiError(new Error('Auth.PASSKEY_CANCELLED'), 'Auth.PASSKEY_CANCELLED');
+    }
+    // 3. Complete
+    const credentialJson = serializeCredential(assertion);
+    await completePasskeyLogin(credentialJson);
+    // 4. Reload User
+    return fetchCurrentUser();
+}
+export function startSocialLogin(provider) {
+    if (typeof window === 'undefined') {
+        throw normaliseApiError(new Error('Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'), 'Auth.SOCIAL_LOGIN_NOT_IN_BROWSER');
+    }
+    // Browser-Redirect ist ein Side-Effect -> Service Layer
+    window.location.href = `/accounts/${provider}/login/?process=login`;
+}

package/dist/utils/errors.js

@@ -0,0 +1,33 @@
+// src/utils/errors.js
+export function extractErrorInfo(error) {
+    var _a, _b, _c, _d;
+    const status = (_b = (_a = error.response) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : null;
+    const data = (_d = (_c = error.response) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : null;
+    if (!data) {
+        return { status, code: null, message: error.message || null, raw: null };
+    }
+    // Allauth Headless structure often nests errors in "errors" array or "status" key
+    if (Array.isArray(data.errors) && data.errors.length > 0) {
+        // Pick the first error code
+        const first = data.errors[0];
+        return { status, code: first.code, message: first.message, raw: data };
+    }
+    if (typeof data.code === 'string') {
+        return { status, code: data.code, message: null, raw: data };
+    }
+    // Fallback for generic Django errors
+    if (typeof data.detail === 'string') {
+        return { status, code: 'GENERIC', message: data.detail, raw: data };
+    }
+    return { status, code: null, message: null, raw: data };
+}
+export function normaliseApiError(error, defaultCode = 'Auth.GENERIC_ERROR') {
+    const info = extractErrorInfo(error);
+    const code = info.code || defaultCode;
+    const message = info.message || code || defaultCode;
+    const err = new Error(message);
+    err.code = code;
+    err.status = info.status;
+    err.raw = info.raw;
+    return err;
+}