@micha.bigler/ui-core-micha 1.4.17 → 1.4.19

package/dist/auth/authApi.js

@@ -13,9 +13,8 @@ function bufferToBase64URL(buffer) {
     return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
 }
 function serializeCredential(credential) {
-    if (typeof credential.toJSON === 'function') {
-        return credential.toJSON();
-    }
+    // Wir nutzen IMMER die manuelle Serialisierung, um sicherzugehen,
+    // dass alles Base64URL-kodiert ist (kompatibel mit Allauth).
     const p = {
         id: credential.id,
         rawId: bufferToBase64URL(credential.rawId),
@@ -36,6 +35,7 @@ function serializeCredential(credential) {
     if (credential.response.userHandle) {
         p.response.userHandle = bufferToBase64URL(credential.response.userHandle);
     }
+    // Extension Results direkt übernehmen, falls vorhanden
     if (typeof credential.getClientExtensionResults === 'function') {
         p.clientExtensionResults = credential.getClientExtensionResults();
     }

package/dist/components/ProfileComponent.js

@@ -1,74 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/components/ProfileComponent.jsx
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
+import React, { useEffect, useState, useContext } from 'react';
 import { Box, Stack, TextField, FormControlLabel, Checkbox, Button, CircularProgress, Alert, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { USERS_BASE } from '../auth/authConfig';
-/**
- * ProfileComponent
- *
- * - Loads the current user from `${USERS_BASE}/current/`
- * - Shows basic fields (name, email, etc.)
- * - Optional privacy/cookie checkboxes
- * - Calls onSubmit(payload) to save changes
- */
-export function ProfileComponent({ onLoad, onSubmit, submitText, // optional, falls der Host etwas Eigenes anzeigen will
-showName = true, showPrivacy = true, showCookies = true, }) {
+// WICHTIG: Importiere den Context, um die bereits geladenen Daten zu nutzen
+import { AuthContext } from '../auth/AuthContext';
+export function ProfileComponent({ onSubmit, submitText, showName = true, showPrivacy = true, showCookies = true, }) {
     const { t } = useTranslation();
-    const [loading, setLoading] = useState(true);
+    // WICHTIG: Wir holen den User direkt aus dem globalen State
+    // Das verhindert den doppelten Request und den ReferenceError
+    const { user, loading: authLoading } = useContext(AuthContext);
     const [saving, setSaving] = useState(false);
     const [errorKey, setErrorKey] = useState(null);
     const [successKey, setSuccessKey] = useState(null);
-    const [userId, setUserId] = useState(null);
+    // Lokaler State für das Formular
     const [username, setUsername] = useState('');
     const [email, setEmail] = useState('');
     const [firstName, setFirstName] = useState('');
     const [lastName, setLastName] = useState('');
     const [acceptedPrivacy, setAcceptedPrivacy] = useState(false);
     const [acceptedCookies, setAcceptedCookies] = useState(false);
-    // Load current user on mount
+    // Synchronisiere Formular-Daten, sobald der User aus dem Context da ist
     useEffect(() => {
-        let mounted = true;
-        const loadUser = async () => {
-            var _a, _b, _c, _d, _e;
-            setLoading(true);
-            setErrorKey(null);
-            setSuccessKey(null);
-            try {
-                const res = await apiClient.get(`${USERS_BASE}/current/`, {
-                    withCredentials: true,
-                });
-                if (!mounted)
-                    return;
-                const data = res.data;
-                setUserId((_a = data.id) !== null && _a !== void 0 ? _a : null);
-                setUsername((_b = data.username) !== null && _b !== void 0 ? _b : '');
-                setEmail((_c = data.email) !== null && _c !== void 0 ? _c : '');
-                setFirstName((_d = data.first_name) !== null && _d !== void 0 ? _d : '');
-                setLastName((_e = data.last_name) !== null && _e !== void 0 ? _e : '');
-                setAcceptedPrivacy(Boolean(data.accepted_privacy_statement));
-                setAcceptedCookies(Boolean(data.accepted_convenience_cookies));
-                if (onLoad) {
-                    onLoad(data);
-                }
-            }
-            catch (err) {
-                if (!mounted)
-                    return;
-                // Kein Leak von Backend-Texten → stabiler Code
-                setErrorKey('Auth.PROFILE_LOAD_FAILED');
-            }
-            finally {
-                if (mounted)
-                    setLoading(false);
-            }
-        };
-        loadUser();
-        return () => {
-            mounted = false;
-        };
-    }, [onLoad]);
+        var _a, _b, _c, _d;
+        if (user) {
+            setUsername((_a = user.username) !== null && _a !== void 0 ? _a : '');
+            setEmail((_b = user.email) !== null && _b !== void 0 ? _b : '');
+            setFirstName((_c = user.first_name) !== null && _c !== void 0 ? _c : '');
+            setLastName((_d = user.last_name) !== null && _d !== void 0 ? _d : '');
+            setAcceptedPrivacy(Boolean(user.accepted_privacy_statement));
+            setAcceptedCookies(Boolean(user.accepted_convenience_cookies));
+        }
+    }, [user]);
     const handleSubmit = async (event) => {
         event.preventDefault();
         if (!onSubmit)
@@ -79,7 +42,6 @@ showName = true, showPrivacy = true, showCookies = true, }) {
         const payload = {
             first_name: firstName,
             last_name: lastName,
-            // Serializer-Felder sind flach (`source="profile.*"` im Backend)
             accepted_privacy_statement: acceptedPrivacy,
             accepted_convenience_cookies: acceptedCookies,
         };
@@ -88,20 +50,22 @@ showName = true, showPrivacy = true, showCookies = true, }) {
             setSuccessKey('Profile.UPDATE_SUCCESS');
         }
         catch (err) {
-            // Wenn onSubmit z. B. authApi.updateUserProfile nutzt,
-            // kommt hier ein normalisierter Error mit .code
+            // eslint-disable-next-line no-console
+            console.error("Profile update error:", err);
             setErrorKey(err.code || 'Auth.PROFILE_UPDATE_FAILED');
         }
         finally {
             setSaving(false);
         }
     };
-    if (loading) {
+    // Wenn der AuthContext noch initial lädt
+    if (authLoading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(CircularProgress, {}) }));
     }
-    // Fallback für den Button-Text:
-    // - Wenn submitText übergeben wurde, direkt anzeigen (Host kümmert sich selbst um Übersetzung)
-    // - Sonst i18n-Schlüssel verwenden
+    // Falls kein User eingeloggt ist
+    if (!user) {
+        return (_jsx(Alert, { severity: "warning", children: t('Auth.NOT_LOGGED_IN', 'User not logged in.') }));
+    }
     const submitLabel = submitText || t('Profile.SAVE_BUTTON');
     const submitLabelLoading = t('Profile.SAVE_BUTTON_LOADING');
     return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { maxWidth: 600, display: 'flex', flexDirection: 'column', gap: 2 }, children: [errorKey && (_jsx(Alert, { severity: "error", children: t(errorKey) })), successKey && (_jsx(Alert, { severity: "success", children: t(successKey) })), _jsxs(Stack, { spacing: 2, children: [_jsx(TextField, { label: t('Profile.USERNAME_LABEL'), value: username, fullWidth: true, disabled: true }), _jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", value: email, fullWidth: true, disabled: true })] }), showName && (_jsxs(Stack, { spacing: 2, direction: { xs: 'column', sm: 'row' }, children: [_jsx(TextField, { label: t('Profile.FIRST_NAME_LABEL'), value: firstName, onChange: (e) => setFirstName(e.target.value), fullWidth: true }), _jsx(TextField, { label: t('Profile.LAST_NAME_LABEL'), value: lastName, onChange: (e) => setLastName(e.target.value), fullWidth: true })] })), (showPrivacy || showCookies) && (_jsxs(Box, { sx: { mt: 1 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Profile.PRIVACY_SECTION_TITLE') }), _jsxs(Stack, { spacing: 1, children: [showPrivacy && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: acceptedPrivacy, onChange: (e) => setAcceptedPrivacy(e.target.checked) }), label: t('Profile.ACCEPT_PRIVACY_LABEL') })), showCookies && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: acceptedCookies, onChange: (e) => setAcceptedCookies(e.target.checked) }), label: t('Profile.ACCEPT_COOKIES_LABEL') }))] })] })), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { type: "submit", variant: "contained", disabled: saving, children: saving ? submitLabelLoading : submitLabel }) })] }));

package/package.json

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

package/src/auth/authApi.jsx

@@ -15,10 +15,8 @@ function bufferToBase64URL(buffer) {
 }
 
 function serializeCredential(credential) {
-  if (typeof credential.toJSON === 'function') {
-    return credential.toJSON();
-  }
-
+  // Wir nutzen IMMER die manuelle Serialisierung, um sicherzugehen,
+  // dass alles Base64URL-kodiert ist (kompatibel mit Allauth).
   const p = {
     id: credential.id,
     rawId: bufferToBase64URL(credential.rawId),
@@ -43,7 +41,8 @@ function serializeCredential(credential) {
   if (credential.response.userHandle) {
     p.response.userHandle = bufferToBase64URL(credential.response.userHandle);
   }
-
+  
+  // Extension Results direkt übernehmen, falls vorhanden
   if (typeof credential.getClientExtensionResults === 'function') {
     p.clientExtensionResults = credential.getClientExtensionResults();
   }

package/src/components/ProfileComponent.jsx

@@ -1,6 +1,5 @@
 // src/components/ProfileComponent.jsx
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
+import React, { useEffect, useState, useContext } from 'react';
 import {
   Box,
   Stack,
@@ -13,83 +12,45 @@ import {
   Typography,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { USERS_BASE } from '../auth/authConfig';
-
-/**
- * ProfileComponent
- *
- * - Loads the current user from `${USERS_BASE}/current/`
- * - Shows basic fields (name, email, etc.)
- * - Optional privacy/cookie checkboxes
- * - Calls onSubmit(payload) to save changes
- */
+// WICHTIG: Importiere den Context, um die bereits geladenen Daten zu nutzen
+import { AuthContext } from '../auth/AuthContext'; 
+
 export function ProfileComponent({
-  onLoad,
   onSubmit,
-  submitText,         // optional, falls der Host etwas Eigenes anzeigen will
+  submitText,
   showName = true,
   showPrivacy = true,
   showCookies = true,
 }) {
   const { t } = useTranslation();
+  
+  // WICHTIG: Wir holen den User direkt aus dem globalen State
+  // Das verhindert den doppelten Request und den ReferenceError
+  const { user, loading: authLoading } = useContext(AuthContext);
 
-  const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-
   const [errorKey, setErrorKey] = useState(null);
   const [successKey, setSuccessKey] = useState(null);
 
-  const [userId, setUserId] = useState(null);
+  // Lokaler State für das Formular
   const [username, setUsername] = useState('');
   const [email, setEmail] = useState('');
-
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
-
   const [acceptedPrivacy, setAcceptedPrivacy] = useState(false);
   const [acceptedCookies, setAcceptedCookies] = useState(false);
 
-  // Load current user on mount
+  // Synchronisiere Formular-Daten, sobald der User aus dem Context da ist
   useEffect(() => {
-    let mounted = true;
-
-    const loadUser = async () => {
-      setLoading(true);
-      setErrorKey(null);
-      setSuccessKey(null);
-
-      try {
-        const res = await apiClient.get(`${USERS_BASE}/current/`, {
-          withCredentials: true,
-        });
-        if (!mounted) return;
-
-        const data = res.data;
-        setUserId(data.id ?? null);
-        setUsername(data.username ?? '');
-        setEmail(data.email ?? '');
-        setFirstName(data.first_name ?? '');
-        setLastName(data.last_name ?? '');
-        setAcceptedPrivacy(Boolean(data.accepted_privacy_statement));
-        setAcceptedCookies(Boolean(data.accepted_convenience_cookies));
-
-        if (onLoad) {
-          onLoad(data);
-        }
-      } catch (err) {
-        if (!mounted) return;
-        // Kein Leak von Backend-Texten → stabiler Code
-        setErrorKey('Auth.PROFILE_LOAD_FAILED');
-      } finally {
-        if (mounted) setLoading(false);
-      }
-    };
-
-    loadUser();
-    return () => {
-      mounted = false;
-    };
-  }, [onLoad]);
+    if (user) {
+      setUsername(user.username ?? '');
+      setEmail(user.email ?? '');
+      setFirstName(user.first_name ?? '');
+      setLastName(user.last_name ?? '');
+      setAcceptedPrivacy(Boolean(user.accepted_privacy_statement)); 
+      setAcceptedCookies(Boolean(user.accepted_convenience_cookies));
+    }
+  }, [user]);
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -102,7 +63,6 @@ export function ProfileComponent({
     const payload = {
       first_name: firstName,
       last_name: lastName,
-      // Serializer-Felder sind flach (`source="profile.*"` im Backend)
       accepted_privacy_statement: acceptedPrivacy,
       accepted_convenience_cookies: acceptedCookies,
     };
@@ -111,15 +71,16 @@ export function ProfileComponent({
       await onSubmit(payload);
       setSuccessKey('Profile.UPDATE_SUCCESS');
     } catch (err) {
-      // Wenn onSubmit z. B. authApi.updateUserProfile nutzt,
-      // kommt hier ein normalisierter Error mit .code
+      // eslint-disable-next-line no-console
+      console.error("Profile update error:", err);
       setErrorKey(err.code || 'Auth.PROFILE_UPDATE_FAILED');
     } finally {
       setSaving(false);
     }
   };
 
-  if (loading) {
+  // Wenn der AuthContext noch initial lädt
+  if (authLoading) {
     return (
       <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
         <CircularProgress />
@@ -127,9 +88,15 @@ export function ProfileComponent({
     );
   }
 
-  // Fallback für den Button-Text:
-  // - Wenn submitText übergeben wurde, direkt anzeigen (Host kümmert sich selbst um Übersetzung)
-  // - Sonst i18n-Schlüssel verwenden
+  // Falls kein User eingeloggt ist
+  if (!user) {
+    return (
+        <Alert severity="warning">
+            {t('Auth.NOT_LOGGED_IN', 'User not logged in.')}
+        </Alert>
+    );
+  }
+
   const submitLabel = submitText || t('Profile.SAVE_BUTTON');
   const submitLabelLoading = t('Profile.SAVE_BUTTON_LOADING');
 
@@ -150,7 +117,7 @@ export function ProfileComponent({
         </Alert>
       )}
 
-      {/* Basic data (always visible, usually read-only) */}
+      {/* Read-Only Felder */}
       <Stack spacing={2}>
         <TextField
           label={t('Profile.USERNAME_LABEL')}
@@ -167,7 +134,7 @@ export function ProfileComponent({
         />
       </Stack>
 
-      {/* Name only if showName == true */}
+      {/* Editierbare Felder */}
       {showName && (
         <Stack spacing={2} direction={{ xs: 'column', sm: 'row' }}>
           <TextField
@@ -185,7 +152,6 @@ export function ProfileComponent({
         </Stack>
       )}
 
-      {/* Privacy / Cookies */}
       {(showPrivacy || showCookies) && (
         <Box sx={{ mt: 1 }}>
           <Typography variant="subtitle1" gutterBottom>
@@ -233,4 +199,4 @@ export function ProfileComponent({
   );
 }
 
-export default ProfileComponent;
+export default ProfileComponent;