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

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/dist/components/SupportRecoveryRequestsTab.js

@@ -72,7 +72,7 @@ const SupportRecoveryRequestsTab = () => {
     }
     return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.RECOVERY_REQUESTS_DESCRIPTION', 'Users who cannot complete MFA can request support. You can review their request and approve or reject it.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mb: 2 }, children: [_jsx(Button, { variant: statusFilter === 'pending' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('pending'), children: t('Support.RECOVERY_FILTER_PENDING', 'Open') }), _jsx(Button, { variant: statusFilter === 'approved' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('approved'), children: t('Support.RECOVERY_FILTER_APPROVED', 'Approved') }), _jsx(Button, { variant: statusFilter === 'rejected' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('rejected'), children: t('Support.RECOVERY_FILTER_REJECTED', 'Rejected') })] }), requests.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.') })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Support.RECOVERY_COL_CREATED', 'Created') }), _jsx(TableCell, { children: t('Support.RECOVERY_USER', 'User') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_STATUS', 'Status') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: requests.map((req) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: req.created_at
                                             ? new Date(req.created_at).toLocaleString()
-                                            : '-' }), _jsx(TableCell, { children: req.user_email || req.user }), _jsx(TableCell, { children: req.status }), _jsx(TableCell, { children: _jsx(Button, { variant: "contained", size: "small", onClick: () => openDialog(req), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_REVIEW', 'Review') }) })] }, req.id))) })] }) })), _jsxs(Dialog, { open: dialogOpen, onClose: closeDialog, fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Support.RECOVERY_REVIEW_DIALOG_TITLE', 'Review recovery request') }), _jsxs(DialogContent, { dividers: true, children: [selectedRequest && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_USER', 'User'), ":"] }), ' ', selectedRequest.user_email || selectedRequest.user] }), _jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_REVIEW_CREATED', 'Requested at'), ":"] }), ' ', selectedRequest.created_at
+                                            : '-' }), _jsx(TableCell, { children: req.user_email || req.user }), _jsx(TableCell, { children: t(`Support.RECOVERY_STATUS_${req.status}`, req.status) }), _jsx(TableCell, { children: _jsx(Button, { variant: "contained", size: "small", onClick: () => openDialog(req), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_REVIEW', 'Review') }) })] }, req.id))) })] }) })), _jsxs(Dialog, { open: dialogOpen, onClose: closeDialog, fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Support.RECOVERY_REVIEW_DIALOG_TITLE', 'Review recovery request') }), _jsxs(DialogContent, { dividers: true, children: [selectedRequest && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_USER', 'User'), ":"] }), ' ', selectedRequest.user_email || selectedRequest.user] }), _jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_REVIEW_CREATED', 'Requested at'), ":"] }), ' ', selectedRequest.created_at
                                                 ? new Date(selectedRequest.created_at).toLocaleString()
                                                 : '-'] }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: _jsxs("strong", { children: [t('Support.RECOVERY_REVIEW_MESSAGE', 'User’s explanation'), ":"] }) }), _jsx(Box, { sx: {
                                             border: 1,

package/dist/i18n/authTranslations.js

@@ -931,4 +931,29 @@ export const authTranslations = {
         "fr": "Si un compte existe avec cette adresse e-mail, votre demande a été transmise au support.",
         "en": "If an account with this email exists, your request has been forwarded to support."
     },
+    "Support.RECOVERY_STATUS_pending": {
+        "de": "Offen",
+        "fr": "En attente",
+        "en": "Pending"
+    },
+    "Support.RECOVERY_STATUS_approved": {
+        "de": "Genehmigt",
+        "fr": "Approuvée",
+        "en": "Approved"
+    },
+    "Support.RECOVERY_STATUS_rejected": {
+        "de": "Abgelehnt",
+        "fr": "Refusée",
+        "en": "Rejected"
+    },
+    "Support.RECOVERY_STATUS_completed": {
+        "de": "Abgeschlossen",
+        "fr": "Terminée",
+        "en": "Completed"
+    },
+    "Support.RECOVERY_STATUS_expired": {
+        "de": "Abgelaufen",
+        "fr": "Expirée",
+        "en": "Expired"
+    }
 };

package/package.json

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

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;

package/src/components/SupportRecoveryRequestsTab.jsx

@@ -175,7 +175,9 @@ const SupportRecoveryRequestsTab = () => {
                       : '-'}
                   </TableCell>
                   <TableCell>{req.user_email || req.user}</TableCell>
-                  <TableCell>{req.status}</TableCell>
+                  <TableCell>
+                    {t(`Support.RECOVERY_STATUS_${req.status}`, req.status)}
+                  </TableCell>
                   <TableCell>
                     <Button
                       variant="contained"

package/src/i18n/authTranslations.js

@@ -978,4 +978,29 @@ export const authTranslations = {
     "fr": "Si un compte existe avec cette adresse e-mail, votre demande a été transmise au support.",
     "en": "If an account with this email exists, your request has been forwarded to support."
   },
+  "Support.RECOVERY_STATUS_pending": {
+    "de": "Offen",
+    "fr": "En attente",
+    "en": "Pending"
+  },
+  "Support.RECOVERY_STATUS_approved": {
+    "de": "Genehmigt",
+    "fr": "Approuvée",
+    "en": "Approved"
+  },
+  "Support.RECOVERY_STATUS_rejected": {
+    "de": "Abgelehnt",
+    "fr": "Refusée",
+    "en": "Rejected"
+  },
+  "Support.RECOVERY_STATUS_completed": {
+    "de": "Abgeschlossen",
+    "fr": "Terminée",
+    "en": "Completed"
+  },
+  "Support.RECOVERY_STATUS_expired": {
+    "de": "Abgelaufen",
+    "fr": "Expirée",
+    "en": "Expired"
+  }
 };