@micha.bigler/ui-core-micha 1.4.34 → 1.4.36

package/dist/auth/authApi.js

@@ -255,6 +255,32 @@ export async function generateRecoveryCodes() {
 // -----------------------------
 // Invitations & Access Codes
 // -----------------------------
+export async function fetchAccessCodes() {
+    try {
+        const res = await apiClient.get(`${ACCESS_CODES_BASE}/`);
+        return res.data || [];
+    }
+    catch (error) {
+        throw normaliseApiError(error, 'Auth.ACCESS_CODE_LIST_FAILED');
+    }
+}
+export async function createAccessCode(code) {
+    try {
+        const res = await apiClient.post(`${ACCESS_CODES_BASE}/`, { code });
+        return res.data;
+    }
+    catch (error) {
+        throw normaliseApiError(error, 'Auth.ACCESS_CODE_SAVE_FAILED');
+    }
+}
+export async function deleteAccessCode(id) {
+    try {
+        await apiClient.delete(`${ACCESS_CODES_BASE}/${id}/`);
+    }
+    catch (error) {
+        throw normaliseApiError(error, 'Auth.ACCESS_CODE_DELETE_FAILED');
+    }
+}
 export async function validateAccessCode(code) {
     try {
         const res = await apiClient.post(`${ACCESS_CODES_BASE}/validate/`, { code });

package/dist/components/AccessCodeManager.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/auth/components/AccessCodeManager.jsx
 import React, { useEffect, useState } from 'react';
-import axios from 'axios';
-import { Box, Stack, Typography, Slider, Button, TextField, IconButton, Chip, Alert, CircularProgress, } from '@mui/material';
+import { Box, Stack, Typography, Slider, Button, TextField, Chip, Alert, CircularProgress, } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { useTranslation } from 'react-i18next';
-import { ACCESS_CODES_BASE } from '../auth/authConfig';
+// Pfad ggf. anpassen je nach Struktur: von src/auth/components zu src/auth/authApi
+import { fetchAccessCodes, createAccessCode, deleteAccessCode, } from '../authApi';
 export function AccessCodeManager() {
     const { t } = useTranslation();
     const [codes, setCodes] = useState([]);
@@ -15,25 +15,22 @@ export function AccessCodeManager() {
     const [manualCode, setManualCode] = useState('');
     const [errorKey, setErrorKey] = useState(null);
     const [successKey, setSuccessKey] = useState(null);
-    // Kleine Helper: versucht, einen Backend-Code zu nehmen, sonst Fallback
-    const setErrorFromAxios = (err, fallbackCode) => {
-        var _a, _b;
-        const backendCode = (_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.code;
+    // Helper that prefers backend error code if available
+    const setErrorFromErrorObject = (err, fallbackCode) => {
+        const backendCode = err === null || err === void 0 ? void 0 : err.code;
         setErrorKey(backendCode || fallbackCode);
     };
-    // Loads all access codes
+    // Load all access codes from backend
     const loadCodes = async () => {
         setLoading(true);
         setErrorKey(null);
         setSuccessKey(null);
         try {
-            const res = await apiClient.get(`${ACCESS_CODES_BASE}/`, {
-                withCredentials: true,
-            });
-            setCodes(res.data || []);
+            const data = await fetchAccessCodes();
+            setCodes(Array.isArray(data) ? data : []);
         }
         catch (err) {
-            setErrorFromAxios(err, 'Auth.ACCESS_CODE_LIST_FAILED');
+            setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_LIST_FAILED');
         }
         finally {
             setLoading(false);
@@ -41,6 +38,7 @@ export function AccessCodeManager() {
     };
     useEffect(() => {
         loadCodes();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // Generates a random code with the selected length
     const generateRandomCode = (len) => {
@@ -54,12 +52,12 @@ export function AccessCodeManager() {
         setErrorKey(null);
         setSuccessKey(null);
         try {
-            const res = await apiClient.post(`${ACCESS_CODES_BASE}/`, { code }, { withCredentials: true });
-            setCodes((prev) => [...prev, res.data]);
+            const created = await createAccessCode(code);
+            setCodes((prev) => [...prev, created]);
             setSuccessKey('Auth.ACCESS_CODE_SAVE_SUCCESS');
         }
         catch (err) {
-            setErrorFromAxios(err, 'Auth.ACCESS_CODE_SAVE_FAILED');
+            setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_SAVE_FAILED');
         }
         finally {
             setSubmitting(false);
@@ -81,14 +79,12 @@ export function AccessCodeManager() {
         setErrorKey(null);
         setSuccessKey(null);
         try {
-            await axios.delete(`${ACCESS_CODES_BASE}/${id}/`, {
-                withCredentials: true,
-            });
+            await deleteAccessCode(id);
             setCodes((prev) => prev.filter((c) => c.id !== id));
             setSuccessKey('Auth.ACCESS_CODE_DELETE_SUCCESS');
         }
         catch (err) {
-            setErrorFromAxios(err, 'Auth.ACCESS_CODE_DELETE_FAILED');
+            setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_DELETE_FAILED');
         }
     };
     if (loading) {

package/dist/pages/LoginPage.js

@@ -80,7 +80,7 @@ export function LoginPage() {
         setSubmitting(true);
         try {
             // Service handles browser interaction + API calls
-            const { user } = await loginWithPasskey();
+            const user = await loginWithPasskey();
             handleLoginSuccess(user);
         }
         catch (err) {

package/dist/utils/authService.js

@@ -2,8 +2,14 @@ import { getPasskeyRegistrationOptions, completePasskeyRegistration, getPasskeyL
 import { ensureWebAuthnSupport, serializeCredential } from '../utils/webauthn';
 import { normaliseApiError } from '../utils/auth-errors';
 import apiClient from '../auth/apiClient';
-// Falls du die Konstanten importieren möchtest, um Hardcoding zu vermeiden:
 import { HEADLESS_BASE } from '../auth/authConfig';
+// HILFSFUNKTION: Entpackt die Optionen, falls sie in 'publicKey' stecken
+function resolveWebAuthnOptions(options) {
+    if (options && options.publicKey) {
+        return options.publicKey;
+    }
+    return options;
+}
 export async function registerPasskey(name = 'Passkey') {
     ensureWebAuthnSupport();
     // 1. Get Options from Server
@@ -11,8 +17,10 @@ export async function registerPasskey(name = 'Passkey') {
     // 2. Call Browser API
     let credential;
     try {
+        // FIX: Erst entpacken (JSON -> JSON ohne publicKey Wrapper)
+        const optionsJson = resolveWebAuthnOptions(creationOptions);
+        // Dann parsen (JSON -> ArrayBuffer)
         const publicKeyOptions = window.PublicKeyCredential.parseCreationOptionsFromJSON(creationOptions);
-        // KORREKTUR: Wir MÜSSEN { publicKey: ... } wrappen!
         credential = await navigator.credentials.create({ publicKey: publicKeyOptions });
     }
     catch (err) {
@@ -32,8 +40,10 @@ export async function loginWithPasskey() {
     // 2. Browser Sign
     let assertion;
     try {
-        const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptions);
-        // KORREKTUR: Wir MÜSSEN { publicKey: ... } wrappen!
+        // FIX: Erst entpacken
+        const optionsJson = resolveWebAuthnOptions(requestOptions);
+        // Dann parsen
+        const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(optionsJson);
         assertion = await navigator.credentials.get({ publicKey: publicKeyOptions });
     }
     catch (err) {
@@ -56,11 +66,11 @@ export async function authenticateMfaWithPasskey() {
     ensureWebAuthnSupport();
     let requestOptions;
     try {
-        // Nutze HEADLESS_BASE falls verfügbar, sonst den Pfad
         const url = typeof HEADLESS_BASE !== 'undefined'
             ? `${HEADLESS_BASE}/auth/2fa/authenticate`
             : '/api/auth/browser/v1/auth/2fa/authenticate';
         const res = await apiClient.get(url);
+        // Allauth liefert oft: { data: { request_options: { publicKey: ... } } }
         const data = ((_a = res.data) === null || _a === void 0 ? void 0 : _a.data) || res.data;
         requestOptions = data.request_options || data;
     }
@@ -73,8 +83,11 @@ export async function authenticateMfaWithPasskey() {
     // 2. Browser Sign
     let assertion;
     try {
-        const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptions);
-        // KORREKTUR: Wir MÜSSEN { publicKey: ... } wrappen!
+        // FIX: Erst entpacken
+        const optionsJson = resolveWebAuthnOptions(requestOptions);
+        // Dann parsen
+        const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(optionsJson);
+        // Dann wrappen
         assertion = await navigator.credentials.get({ publicKey: publicKeyOptions });
     }
     catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "1.4.34",
+  "version": "1.4.36",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/auth/authApi.jsx

@@ -265,6 +265,32 @@ export async function generateRecoveryCodes() {
 // Invitations & Access Codes
 // -----------------------------
 
+export async function fetchAccessCodes() {
+  try {
+    const res = await apiClient.get(`${ACCESS_CODES_BASE}/`);
+    return res.data || [];
+  } catch (error) {
+    throw normaliseApiError(error, 'Auth.ACCESS_CODE_LIST_FAILED');
+  }
+}
+
+export async function createAccessCode(code) {
+  try {
+    const res = await apiClient.post(`${ACCESS_CODES_BASE}/`, { code });
+    return res.data;
+  } catch (error) {
+    throw normaliseApiError(error, 'Auth.ACCESS_CODE_SAVE_FAILED');
+  }
+}
+
+export async function deleteAccessCode(id) {
+  try {
+    await apiClient.delete(`${ACCESS_CODES_BASE}/${id}/`);
+  } catch (error) {
+    throw normaliseApiError(error, 'Auth.ACCESS_CODE_DELETE_FAILED');
+  }
+}
+
 export async function validateAccessCode(code) {
   try {
     const res = await apiClient.post(`${ACCESS_CODES_BASE}/validate/`, { code });

package/src/components/AccessCodeManager.jsx

@@ -1,6 +1,5 @@
 // src/auth/components/AccessCodeManager.jsx
 import React, { useEffect, useState } from 'react';
-import axios from 'axios';
 import {
   Box,
   Stack,
@@ -8,14 +7,19 @@ import {
   Slider,
   Button,
   TextField,
-  IconButton,
   Chip,
   Alert,
   CircularProgress,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { useTranslation } from 'react-i18next';
-import { ACCESS_CODES_BASE } from '../auth/authConfig';
+
+// Pfad ggf. anpassen je nach Struktur: von src/auth/components zu src/auth/authApi
+import {
+  fetchAccessCodes,
+  createAccessCode,
+  deleteAccessCode,
+} from '../authApi';
 
 export function AccessCodeManager() {
   const { t } = useTranslation();
@@ -30,24 +34,22 @@ export function AccessCodeManager() {
   const [errorKey, setErrorKey] = useState(null);
   const [successKey, setSuccessKey] = useState(null);
 
-  // Kleine Helper: versucht, einen Backend-Code zu nehmen, sonst Fallback
-  const setErrorFromAxios = (err, fallbackCode) => {
-    const backendCode = err?.response?.data?.code;
+  // Helper that prefers backend error code if available
+  const setErrorFromErrorObject = (err, fallbackCode) => {
+    const backendCode = err?.code;
     setErrorKey(backendCode || fallbackCode);
   };
 
-  // Loads all access codes
+  // Load all access codes from backend
   const loadCodes = async () => {
     setLoading(true);
     setErrorKey(null);
     setSuccessKey(null);
     try {
-      const res = await apiClient.get(`${ACCESS_CODES_BASE}/`, {
-        withCredentials: true,
-      });
-      setCodes(res.data || []);
+      const data = await fetchAccessCodes();
+      setCodes(Array.isArray(data) ? data : []);
     } catch (err) {
-      setErrorFromAxios(err, 'Auth.ACCESS_CODE_LIST_FAILED');
+      setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_LIST_FAILED');
     } finally {
       setLoading(false);
     }
@@ -55,6 +57,7 @@ export function AccessCodeManager() {
 
   useEffect(() => {
     loadCodes();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Generates a random code with the selected length
@@ -70,15 +73,11 @@ export function AccessCodeManager() {
     setErrorKey(null);
     setSuccessKey(null);
     try {
-      const res = await apiClient.post(
-        `${ACCESS_CODES_BASE}/`,
-        { code },
-        { withCredentials: true },
-      );
-      setCodes((prev) => [...prev, res.data]);
+      const created = await createAccessCode(code);
+      setCodes((prev) => [...prev, created]);
       setSuccessKey('Auth.ACCESS_CODE_SAVE_SUCCESS');
     } catch (err) {
-      setErrorFromAxios(err, 'Auth.ACCESS_CODE_SAVE_FAILED');
+      setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_SAVE_FAILED');
     } finally {
       setSubmitting(false);
     }
@@ -102,13 +101,11 @@ export function AccessCodeManager() {
     setErrorKey(null);
     setSuccessKey(null);
     try {
-      await axios.delete(`${ACCESS_CODES_BASE}/${id}/`, {
-        withCredentials: true,
-      });
+      await deleteAccessCode(id);
       setCodes((prev) => prev.filter((c) => c.id !== id));
       setSuccessKey('Auth.ACCESS_CODE_DELETE_SUCCESS');
     } catch (err) {
-      setErrorFromAxios(err, 'Auth.ACCESS_CODE_DELETE_FAILED');
+      setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_DELETE_FAILED');
     }
   };
 
@@ -133,7 +130,7 @@ export function AccessCodeManager() {
         </Alert>
       )}
 
-      {/* Liste aller Codes */}
+      {/* Active codes list */}
       <Box sx={{ mb: 3 }}>
         <Typography variant="subtitle1" gutterBottom>
           {t('Auth.ACCESS_CODE_SECTION_ACTIVE')}
@@ -143,11 +140,7 @@ export function AccessCodeManager() {
             {t('Auth.ACCESS_CODE_NONE')}
           </Typography>
         ) : (
-          <Stack
-            direction="row"
-            flexWrap="wrap"
-            gap={1}
-          >
+          <Stack direction="row" flexWrap="wrap" gap={1}>
             {codes.map((code) => (
               <Chip
                 key={code.id}
@@ -193,7 +186,7 @@ export function AccessCodeManager() {
         </Button>
       </Box>
 
-      {/* Manuelles Hinzufügen */}
+      {/* Manual add */}
       <Box sx={{ mb: 2, maxWidth: 360 }}>
         <Typography variant="subtitle1" gutterBottom>
           {t('Auth.ACCESS_CODE_SECTION_MANUAL')}
@@ -218,4 +211,3 @@ export function AccessCodeManager() {
     </Box>
   );
 }
-

package/src/pages/LoginPage.jsx

@@ -92,7 +92,7 @@ export function LoginPage() {
     setSubmitting(true);
     try {
       // Service handles browser interaction + API calls
-      const { user } = await loginWithPasskey();
+      const user = await loginWithPasskey();
       handleLoginSuccess(user);
     } catch (err) {
       // 'Auth.PASSKEY_CANCELLED' is generic, maybe ignore visually or show specific hint

package/src/utils/authService.js

@@ -13,9 +13,16 @@ import {
 } from '../utils/webauthn';
 import { normaliseApiError } from '../utils/auth-errors';
 import apiClient from '../auth/apiClient';
-// Falls du die Konstanten importieren möchtest, um Hardcoding zu vermeiden:
 import { HEADLESS_BASE } from '../auth/authConfig'; 
 
+// HILFSFUNKTION: Entpackt die Optionen, falls sie in 'publicKey' stecken
+function resolveWebAuthnOptions(options) {
+    if (options && options.publicKey) {
+        return options.publicKey;
+    }
+    return options;
+}
+
 export async function registerPasskey(name = 'Passkey') {
   ensureWebAuthnSupport();
   
@@ -25,8 +32,12 @@ export async function registerPasskey(name = 'Passkey') {
   // 2. Call Browser API
   let credential;
   try {
-      const publicKeyOptions = window.PublicKeyCredential.parseCreationOptionsFromJSON(creationOptions);
-      // KORREKTUR: Wir MÜSSEN { publicKey: ... } wrappen!
+      // FIX: Erst entpacken (JSON -> JSON ohne publicKey Wrapper)
+      const optionsJson = resolveWebAuthnOptions(creationOptions);
+      
+      // Dann parsen (JSON -> ArrayBuffer)
+      const publicKeyOptions =
+        window.PublicKeyCredential.parseCreationOptionsFromJSON(creationOptions);
       credential = await navigator.credentials.create({ publicKey: publicKeyOptions });
   } catch (err) {
       if (err.name === 'NotAllowedError') {
@@ -49,8 +60,12 @@ export async function loginWithPasskey() {
     // 2. Browser Sign
     let assertion;
     try {
-        const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptions);
-        // KORREKTUR: Wir MÜSSEN { publicKey: ... } wrappen!
+        // FIX: Erst entpacken
+        const optionsJson = resolveWebAuthnOptions(requestOptions);
+        
+        // Dann parsen
+        const publicKeyOptions =
+          window.PublicKeyCredential.parseRequestOptionsFromJSON(optionsJson);
         assertion = await navigator.credentials.get({ publicKey: publicKeyOptions });
     } catch (err) {
          if (err.name === 'NotAllowedError') {
@@ -75,12 +90,12 @@ export async function authenticateMfaWithPasskey() {
 
     let requestOptions;
     try {
-        // Nutze HEADLESS_BASE falls verfügbar, sonst den Pfad
         const url = typeof HEADLESS_BASE !== 'undefined' 
             ? `${HEADLESS_BASE}/auth/2fa/authenticate`
             : '/api/auth/browser/v1/auth/2fa/authenticate';
 
         const res = await apiClient.get(url);
+        // Allauth liefert oft: { data: { request_options: { publicKey: ... } } }
         const data = res.data?.data || res.data;
         requestOptions = data.request_options || data;
     } catch (err) {
@@ -94,8 +109,13 @@ export async function authenticateMfaWithPasskey() {
     // 2. Browser Sign
     let assertion;
     try {
-        const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptions);
-        // KORREKTUR: Wir MÜSSEN { publicKey: ... } wrappen!
+        // FIX: Erst entpacken
+        const optionsJson = resolveWebAuthnOptions(requestOptions);
+        
+        // Dann parsen
+        const publicKeyOptions = window.PublicKeyCredential.parseRequestOptionsFromJSON(optionsJson);
+        
+        // Dann wrappen
         assertion = await navigator.credentials.get({ publicKey: publicKeyOptions });
     } catch (err) {
          if (err.name === 'NotAllowedError') {