@micha.bigler/ui-core-micha 1.4.19 → 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) {
@@ -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/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/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"
+  }
 };