@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/src/components/SupportRecoveryRequestsTab.jsx

@@ -1,482 +0,0 @@
-// src/components/SupportRecoveryRequestsTab.jsx
-import React, { useContext, useEffect, useState } from 'react';
-import {
-  Alert,
-  Autocomplete,
-  Box,
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import { useTranslation } from 'react-i18next';
-import { resolveErrorText } from '../utils/resolveErrorText';
-import { AuthContext } from '../auth/AuthContext';
-import {
-  approveRecoveryRequest,
-  fetchRecoveryRequests,
-  fetchUsersList,
-  rejectRecoveryRequest,
-  updateUserSupportStatus,
-} from '../auth/authApi';
-
-export const SUPPORT_RECOVERY_AGENT_PAPER_SX = { p: 2, mb: 3 };
-export const SUPPORT_RECOVERY_ALERT_SX = { mb: 2 };
-export const SUPPORT_RECOVERY_AGENT_BUTTON_SX = { minWidth: 160 };
-
-export function SupportRecoveryRequestsTab() {
-  const { t, i18n } = useTranslation();
-  const { user } = useContext(AuthContext);
-  const canManageAgents = Boolean(user?.is_superuser || user?.can_manage_support_agents);
-
-  const [requests, setRequests] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [errorKey, setErrorKey] = useState(null);
-  const [statusFilter, setStatusFilter] = useState('pending');
-
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [dialogNote, setDialogNote] = useState('');
-  const [selectedRequest, setSelectedRequest] = useState(null);
-  const [allUsers, setAllUsers] = useState([]);
-  const [agentLoading, setAgentLoading] = useState(false);
-  const [agentErrorKey, setAgentErrorKey] = useState(null);
-  const [selectedAgentCandidate, setSelectedAgentCandidate] = useState(null);
-  const [agentActionUserId, setAgentActionUserId] = useState(null);
-
-  const loadRequests = async () => {
-    setLoading(true);
-    setErrorKey(null);
-    try {
-      const data = await fetchRecoveryRequests(statusFilter);
-      setRequests(Array.isArray(data) ? data : []);
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Support.RECOVERY_REQUESTS_LOAD_FAILED'));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const loadUsers = async () => {
-    if (!canManageAgents) {
-      setAllUsers([]);
-      setAgentErrorKey(null);
-      return;
-    }
-
-    setAgentLoading(true);
-    setAgentErrorKey(null);
-    try {
-      const data = await fetchUsersList();
-      const list = Array.isArray(data) ? data : (Array.isArray(data?.results) ? data.results : []);
-      list.sort((a, b) => {
-        const emailA = String(a?.email || '').toLocaleLowerCase();
-        const emailB = String(b?.email || '').toLocaleLowerCase();
-        return emailA.localeCompare(emailB);
-      });
-      setAllUsers(list);
-    } catch (err) {
-    setAgentErrorKey(resolveErrorText(i18n, err, 'Auth.USER_LIST_FAILED'));
-    } finally {
-      setAgentLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadRequests();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [statusFilter]);
-
-  useEffect(() => {
-    loadUsers();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [canManageAgents]);
-
-  const openDialog = (req) => {
-    setSelectedRequest(req);
-    setDialogNote('');
-    setDialogOpen(true);
-  };
-
-  const closeDialog = () => {
-    setDialogOpen(false);
-    setSelectedRequest(null);
-    setDialogNote('');
-  };
-
-  const handleApprove = async () => {
-    if (!selectedRequest) return;
-    setErrorKey(null);
-    try {
-      await approveRecoveryRequest(selectedRequest.id, dialogNote);
-      await loadRequests();
-      closeDialog();
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Support.RECOVERY_REQUEST_APPROVE_FAILED'));
-    }
-  };
-
-  const handleReject = async () => {
-    if (!selectedRequest) return;
-    setErrorKey(null);
-    try {
-      await rejectRecoveryRequest(selectedRequest.id, dialogNote);
-      await loadRequests();
-      closeDialog();
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Support.RECOVERY_REQUEST_REJECT_FAILED'));
-    }
-  };
-
-  const getUserDisplayName = (entry) => {
-    if (entry?.first_name || entry?.last_name) {
-      return `${entry.first_name || ''} ${entry.last_name || ''}`.trim();
-    }
-    return entry?.username || '';
-  };
-
-  const getUserOptionLabel = (entry) => {
-    if (!entry) return '';
-    const name = getUserDisplayName(entry);
-    if (name && entry?.email) return `${name} (${entry.email})`;
-    return entry?.email || name || `#${entry?.id || ''}`;
-  };
-
-  const supportAgents = allUsers.filter((entry) => Boolean(entry?.is_support_agent));
-  const availableAgentCandidates = allUsers.filter((entry) => !entry?.is_support_agent);
-
-  const handleAddAgent = async () => {
-    if (!selectedAgentCandidate) return;
-
-    setAgentActionUserId(selectedAgentCandidate.id);
-    setAgentErrorKey(null);
-    try {
-      await updateUserSupportStatus(selectedAgentCandidate.id, true);
-      setSelectedAgentCandidate(null);
-      await loadUsers();
-    } catch (err) {
-      setAgentErrorKey(resolveErrorText(i18n, err, 'Auth.USER_SUPPORT_UPDATE_FAILED'));
-    } finally {
-      setAgentActionUserId(null);
-    }
-  };
-
-  const handleRemoveAgent = async (agentUser) => {
-    if (!agentUser?.id) return;
-
-    setAgentActionUserId(agentUser.id);
-    setAgentErrorKey(null);
-    try {
-      await updateUserSupportStatus(agentUser.id, false);
-      if (selectedAgentCandidate?.id === agentUser.id) {
-        setSelectedAgentCandidate(null);
-      }
-      await loadUsers();
-    } catch (err) {
-      setAgentErrorKey(resolveErrorText(i18n, err, 'Auth.USER_SUPPORT_UPDATE_FAILED'));
-    } finally {
-      setAgentActionUserId(null);
-    }
-  };
-
-  if (loading) {
-    return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return (
-    <Box>
-      {canManageAgents && (
-        <Paper variant="outlined" sx={SUPPORT_RECOVERY_AGENT_PAPER_SX}>
-          <Typography variant="h6" gutterBottom>
-            {t('Support.AGENTS_TITLE', 'Support agents')}
-          </Typography>
-
-          <Typography variant="body2" sx={{ mb: 2 }}>
-            {t(
-              'Support.AGENTS_DESCRIPTION',
-              'Assign which users are allowed to handle support requests.',
-            )}
-          </Typography>
-
-          {agentErrorKey && (
-            <Alert severity="error" sx={SUPPORT_RECOVERY_ALERT_SX}>
-              {agentErrorKey}
-            </Alert>
-          )}
-
-          <Stack
-            direction={{ xs: 'column', md: 'row' }}
-            spacing={2}
-            sx={{ mb: 2, alignItems: { md: 'flex-start' } }}
-          >
-            <Autocomplete
-              fullWidth
-              options={availableAgentCandidates}
-              value={selectedAgentCandidate}
-              loading={agentLoading}
-              onChange={(_event, value) => setSelectedAgentCandidate(value)}
-              isOptionEqualToValue={(option, value) => option.id === value.id}
-              getOptionLabel={getUserOptionLabel}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label={t('Support.AGENTS_SELECT_LABEL', 'Select user')}
-                  placeholder={t('Support.AGENTS_SELECT_PLACEHOLDER', 'Choose a user')}
-                />
-              )}
-            />
-
-            <Button
-              variant="contained"
-              onClick={handleAddAgent}
-              disabled={!selectedAgentCandidate || agentLoading || Boolean(agentActionUserId)}
-              sx={SUPPORT_RECOVERY_AGENT_BUTTON_SX}
-            >
-              {t('Support.AGENTS_ADD', 'Add as agent')}
-            </Button>
-          </Stack>
-
-          {agentLoading ? (
-            <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}>
-              <CircularProgress size={24} />
-            </Box>
-          ) : supportAgents.length === 0 ? (
-            <Typography variant="body2">
-              {t('Support.AGENTS_EMPTY', 'No support agents assigned yet.')}
-            </Typography>
-          ) : (
-            <TableContainer component={Paper} variant="outlined">
-              <Table size="small">
-                <TableHead>
-                  <TableRow>
-                    <TableCell>{t('Profile.NAME_LABEL', 'Name')}</TableCell>
-                    <TableCell>{t('Auth.EMAIL_LABEL', 'Email')}</TableCell>
-                    <TableCell align="right">
-                      {t('Common.ACTIONS', 'Actions')}
-                    </TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {supportAgents.map((agentUser) => (
-                    <TableRow key={agentUser.id}>
-                      <TableCell>{getUserDisplayName(agentUser) || '-'}</TableCell>
-                      <TableCell>{agentUser.email || '-'}</TableCell>
-                      <TableCell align="right">
-                        <IconButton
-                          size="small"
-                          color="error"
-                          onClick={() => handleRemoveAgent(agentUser)}
-                          disabled={agentActionUserId === agentUser.id}
-                          aria-label={t('Support.AGENTS_REMOVE', 'Remove support agent')}
-                        >
-                          <CloseIcon fontSize="small" />
-                        </IconButton>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          )}
-        </Paper>
-      )}
-
-      <Typography variant="h6" gutterBottom>
-        {t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests')}
-      </Typography>
-
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        {t(
-          'Support.RECOVERY_REQUESTS_DESCRIPTION',
-          'Users who cannot complete MFA can request support. You can review their request and approve or reject it.',
-        )}
-      </Typography>
-
-      {errorKey && (
-        <Alert severity="error" sx={SUPPORT_RECOVERY_ALERT_SX}>
-          {errorKey}
-        </Alert>
-      )}
-
-      <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
-        <Button
-          variant={statusFilter === 'pending' ? 'contained' : 'outlined'}
-          size="small"
-          onClick={() => setStatusFilter('pending')}
-        >
-          {t('Support.RECOVERY_FILTER_PENDING', 'Open')}
-        </Button>
-        <Button
-          variant={statusFilter === 'approved' ? 'contained' : 'outlined'}
-          size="small"
-          onClick={() => setStatusFilter('approved')}
-        >
-          {t('Support.RECOVERY_FILTER_APPROVED', 'Approved')}
-        </Button>
-        <Button
-          variant={statusFilter === 'rejected' ? 'contained' : 'outlined'}
-          size="small"
-          onClick={() => setStatusFilter('rejected')}
-        >
-          {t('Support.RECOVERY_FILTER_REJECTED', 'Rejected')}
-        </Button>
-      </Stack>
-
-      {requests.length === 0 ? (
-        <Typography variant="body2">
-          {t(
-            'Support.RECOVERY_REQUESTS_EMPTY',
-            'No recovery requests for this filter.',
-          )}
-        </Typography>
-      ) : (
-        <TableContainer component={Paper}>
-          <Table size="small">
-            <TableHead>
-              <TableRow>
-                <TableCell>
-                  {t('Support.RECOVERY_COL_CREATED', 'Created')}
-                </TableCell>
-                <TableCell>
-                  {t('Support.RECOVERY_USER', 'User')}
-                </TableCell>
-                <TableCell>
-                  {t('Support.RECOVERY_COL_STATUS', 'Status')}
-                </TableCell>
-                <TableCell>
-                  {t('Support.RECOVERY_COL_ACTIONS', 'Actions')}
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {requests.map((req) => (
-                <TableRow key={req.id}>
-                  <TableCell>
-                    {req.created_at
-                      ? new Date(req.created_at).toLocaleString(i18n?.language)
-                      : '-'}
-                  </TableCell>
-                  <TableCell>{req.user_email || req.user}</TableCell>
-                  <TableCell>
-                    {t(`Support.RECOVERY_STATUS_${req.status}`, req.status)}
-                  </TableCell>
-                  <TableCell>
-                    <Button
-                      variant="contained"
-                      size="small"
-                      onClick={() => openDialog(req)}
-                      disabled={req.status !== 'pending'}
-                    >
-                      {t('Support.RECOVERY_ACTION_REVIEW', 'Review')}
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
-
-      <Dialog open={dialogOpen} onClose={closeDialog} fullWidth maxWidth="sm">
-        <DialogTitle>
-          {t('Support.RECOVERY_REVIEW_DIALOG_TITLE', 'Review recovery request')}
-        </DialogTitle>
-        <DialogContent dividers>
-          {selectedRequest && (
-            <Box sx={{ mb: 2 }}>
-              <Typography variant="body2" sx={{ mb: 1 }}>
-                <strong>
-                  {t('Support.RECOVERY_USER', 'User')}:
-                </strong>{' '}
-                {selectedRequest.user_email || selectedRequest.user}
-              </Typography>
-              <Typography variant="body2" sx={{ mb: 1 }}>
-                <strong>
-                  {t('Support.RECOVERY_REVIEW_CREATED', 'Requested at')}:
-                </strong>{' '}
-                {selectedRequest.created_at
-                  ? new Date(selectedRequest.created_at).toLocaleString(i18n?.language)
-                  : '-'}
-              </Typography>
-              <Typography variant="body2" sx={{ mb: 1 }}>
-                <strong>
-                  {t(
-                    'Support.RECOVERY_REVIEW_MESSAGE',
-                    'User’s explanation',
-                  )}
-                  :
-                </strong>
-              </Typography>
-              <Box
-                sx={{
-                  border: 1,
-                  borderColor: 'divider',
-                  borderRadius: 1,
-                  p: 1,
-                  mb: 2,
-                  whiteSpace: 'pre-wrap',
-                  fontSize: '0.875rem',
-                }}
-              >
-                {selectedRequest.message || t('Support.RECOVERY_NO_MESSAGE', 'No message provided.')}
-              </Box>
-            </Box>
-          )}
-
-          <TextField
-            label={t(
-              'Support.RECOVERY_NOTE_LABEL',
-              'Reason for your decision',
-            )}
-            helperText={t(
-              'Support.RECOVERY_NOTE_HELP',
-              'Explain briefly why you approve or reject this request.',
-            )}
-            multiline
-            minRows={3}
-            fullWidth
-            value={dialogNote}
-            onChange={(e) => setDialogNote(e.target.value)}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={closeDialog}>
-            {t('Support.CANCEL', 'Cancel')}
-          </Button>
-          <Button
-            onClick={handleReject}
-            color="error"
-            disabled={!dialogNote.trim()}
-          >
-            {t('Support.RECOVERY_REJECT_SUBMIT', 'Reject request')}
-          </Button>
-          <Button
-            onClick={handleApprove}
-            variant="contained"
-            disabled={!dialogNote.trim()}
-          >
-            {t('Support.RECOVERY_APPROVE_SUBMIT', 'Approve and send link')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </Box>
-  );
-};
-

package/src/components/TurnstileWidget.jsx

@@ -1,99 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react';
-
-const TURNSTILE_SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
-const TURNSTILE_SCRIPT_SELECTOR = 'script[data-turnstile-api="true"]';
-
-let turnstileScriptPromise;
-
-function loadTurnstileScript() {
-  if (window.turnstile?.render) {
-    return Promise.resolve(window.turnstile);
-  }
-
-  if (!turnstileScriptPromise) {
-    turnstileScriptPromise = new Promise((resolve, reject) => {
-      let script = document.querySelector(TURNSTILE_SCRIPT_SELECTOR);
-      if (!script) {
-        script = document.createElement('script');
-        script.src = TURNSTILE_SCRIPT_URL;
-        script.async = true;
-        script.defer = true;
-        script.dataset.turnstileApi = 'true';
-        document.head.appendChild(script);
-      }
-
-      script.addEventListener('load', () => {
-        if (window.turnstile?.render) {
-          resolve(window.turnstile);
-        } else {
-          reject(new Error('Turnstile did not initialize.'));
-        }
-      }, { once: true });
-      script.addEventListener('error', () => {
-        reject(new Error('Turnstile could not be loaded.'));
-      }, { once: true });
-    });
-  }
-
-  return turnstileScriptPromise;
-}
-
-export const TurnstileWidget = forwardRef(function TurnstileWidget(
-  { siteKey, onToken },
-  ref,
-) {
-  const containerRef = useRef(null);
-  const widgetIdRef = useRef(null);
-  const onTokenRef = useRef(onToken);
-
-  useEffect(() => {
-    onTokenRef.current = onToken;
-  }, [onToken]);
-
-  const reset = useCallback(() => {
-    if (widgetIdRef.current !== null && window.turnstile?.reset) {
-      window.turnstile.reset(widgetIdRef.current);
-    }
-    onTokenRef.current('');
-  }, []);
-
-  useImperativeHandle(ref, () => ({ reset }), [reset]);
-
-  useEffect(() => {
-    if (!siteKey) return undefined;
-
-    let cancelled = false;
-    loadTurnstileScript()
-      .then((turnstile) => {
-        if (cancelled || !containerRef.current) return;
-
-        widgetIdRef.current = turnstile.render(containerRef.current, {
-          sitekey: siteKey,
-          callback: (token) => onTokenRef.current(token),
-          'expired-callback': reset,
-          'error-callback': () => onTokenRef.current(''),
-        });
-      })
-      .catch(() => {
-        if (!cancelled) onTokenRef.current('');
-      });
-
-    return () => {
-      cancelled = true;
-      if (widgetIdRef.current !== null && window.turnstile?.remove) {
-        window.turnstile.remove(widgetIdRef.current);
-      }
-      widgetIdRef.current = null;
-    };
-  }, [siteKey, reset]);
-
-  if (!siteKey) return null;
-
-  return <div ref={containerRef} data-testid="turnstile-widget" />;
-});

package/src/components/UserInviteComponent.jsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-import { Box, TextField, Button, Typography, Alert, CircularProgress } from '@mui/material';
-import { sendAdminInvite } from '../auth/authApi';
-import { useTranslation } from 'react-i18next';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const USER_INVITE_ACTION_SX = {
-  minWidth: 120,
-  height: 40,
-  whiteSpace: 'nowrap',
-};
-export const USER_INVITE_ALERT_SX = { mb: 2 };
-
-export function UserInviteComponent() { // FIX: Removed apiUrl prop
-  const { t, i18n } = 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 {
-      const data = await sendAdminInvite(inviteEmail);
-      
-      setInviteEmail('');
-      setMessage(data.detail || t('Auth.INVITE_SENT_SUCCESS', 'Invitation sent.'));
-    } catch (err) {
-      // err.message contains normalized text or code from authApi
-      // eslint-disable-next-line no-console
-      console.error('Error inviting user:', err);
-      setError(resolveErrorText(i18n, err, 'Auth.INVITE_FAILED'));
-    } finally {
-        setLoading(false);
-    }
-  };
-
-  return (
-    <Box sx={{ maxWidth: 600 }}>
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.INVITE_TITLE', 'Invite a new user')}
-      </Typography>
-
-      {message && <Alert severity="success" sx={USER_INVITE_ALERT_SX}>{message}</Alert>}
-      {error && <Alert severity="error" sx={USER_INVITE_ALERT_SX}>{error}</Alert>}
-
-      <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-        <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" 
-            size="small"
-            onClick={inviteUser} 
-            disabled={loading || !inviteEmail}
-            sx={USER_INVITE_ACTION_SX}
-        >
-          {loading ? <CircularProgress size={24} color="inherit" /> : t('Auth.INVITE_BUTTON', 'Invite')}
-        </Button>
-      </Box>
-    </Box>
-  );
-}