@micha.bigler/ui-core-micha 3.14.4 → 4.0.1

package/src/components/MFAComponent.jsx

@@ -1,350 +0,0 @@
-// src/auth/components/MFAComponent.jsx
-import React, { useState, useEffect } from 'react';
-import { QRCodeSVG } from 'qrcode.react';
-import {
-  Box,
-  Typography,
-  Button,
-  TextField,
-  Card,
-  CardContent,
-  Alert,
-  CircularProgress,
-  Stack,
-  Divider,
-  IconButton,
-  Tooltip,
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import { useTranslation } from 'react-i18next';
-import { fetchAuthenticators, requestTotpKey, activateTotp, deactivateTotp, fetchRecoveryCodes, generateRecoveryCodes  } from '../auth/authApi';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const MFA_ALERT_SX = { mb: 2 };
-export const MFA_CARD_SX = { mb: 3 };
-export const MFA_ACTIVE_CARD_SX = { bgcolor: 'success.bg' };
-export const MFA_TEXT_FIELD_SX = { mb: 2 };
-export const MFA_DIVIDER_SX = { my: 3 };
-export const MFA_RECOVERY_BUTTON_SX = { mt: 2 };
-
-export function MFAComponent() {
-  const { t, i18n } = useTranslation();
-
-  const [authenticators, setAuthenticators] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [errorKey, setErrorKey] = useState(null);
-
-  // Setup State
-  const [isSettingUp, setIsSettingUp] = useState(false);
-  const [totpData, setTotpData] = useState(null); // { secret, key_uri }
-  const [verifyCode, setVerifyCode] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  // Recovery Codes State
-  const [recoveryCodes, setRecoveryCodes] = useState([]);
-  const [showRecovery, setShowRecovery] = useState(false);
-
-  const loadData = async () => {
-    setLoading(true);
-    setErrorKey(null);
-    try {
-      const data = await fetchAuthenticators();
-      setAuthenticators(Array.isArray(data) ? data : []);
-    } catch (err) {
-      // 404 / leer einfach schlucken
-      // eslint-disable-next-line no-console
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-  }, []);
-
-  const totpAuthenticator = authenticators.find((a) => a.type === 'totp');
-
-  // --- HANDLER: TOTP START ---
-  const handleStartSetup = async () => {
-    setErrorKey(null);
-    setIsSettingUp(true);
-
-    try {
-      const result = await requestTotpKey();
-
-      if (result.exists) {
-        setIsSettingUp(false);
-        setErrorKey(t('Auth.MFA_TOTP_ALREADY_ACTIVE'));
-        return;
-      }
-
-      setTotpData({
-        secret: result.secret,
-        key_uri: result.key_uri,
-      });
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.TOTP_REQUEST_FAILED'));
-      setIsSettingUp(false);
-    }
-  };
-
-  // --- HANDLER: TOTP VERIFY ---
-  const handleVerify = async (e) => {
-    e.preventDefault();
-    setSubmitting(true);
-    setErrorKey(null);
-    try {
-      await activateTotp(verifyCode);
-      setIsSettingUp(false);
-      setVerifyCode('');
-      setTotpData(null);
-      await loadData();
-      await handleShowRecoveryCodes();
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.MFA_AUTHENTICATE_FAILED'));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  // --- HANDLER: TOTP DELETE ---
-  const handleDeleteTotp = async () => {
-    // Achtung: confirm-Text jetzt übersetzt
-    // eslint-disable-next-line no-alert
-    const ok = window.confirm(t('Auth.MFA_TOTP_DISABLE_CONFIRM'));
-    if (!ok) return;
-
-    setErrorKey(null);
-    try {
-      await deactivateTotp();
-      await loadData();
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.TOTP_DEACTIVATE_FAILED'));
-    }
-  };
-
-  // --- HANDLER: RECOVERY CODES ---
-  const handleShowRecoveryCodes = async () => {
-    setErrorKey(null);
-    try {
-      const data = await fetchRecoveryCodes();
-      const codes = data.codes || data.unused_codes || [];
-      setRecoveryCodes(Array.isArray(codes) ? codes : []);
-      setShowRecovery(true);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.RECOVERY_CODES_FETCH_FAILED'));
-    }
-  };
-
-  const handleGenerateNewRecoveryCodes = async () => {
-    setErrorKey(null);
-    try {
-      const data = await generateRecoveryCodes();
-      const codes = data.codes || data.unused_codes || [];
-      setRecoveryCodes(Array.isArray(codes) ? codes : []);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.RECOVERY_CODES_GENERATE_FAILED'));
-    }
-  };
-
-  const handleCopyCode = (code) => {
-    navigator.clipboard.writeText(code);
-  };
-
-  if (loading) return <CircularProgress />;
-
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.MFA_TOTP_TITLE')}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        {t('Auth.MFA_TOTP_DESCRIPTION')}
-      </Typography>
-
-      {errorKey && (
-        <Alert severity="error" sx={MFA_ALERT_SX}>
-          {errorKey}
-        </Alert>
-      )}
-
-      {/* --- CASE 1: TOTP IS ACTIVE --- */}
-      {totpAuthenticator ? (
-        <Card variant="outlined" sx={[MFA_CARD_SX, MFA_ACTIVE_CARD_SX]}>
-          <CardContent
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-            }}
-          >
-            <Box>
-              <Typography
-                variant="subtitle1"
-                color="success.main"
-                fontWeight="bold"
-              >
-                {t('Auth.MFA_TOTP_STATUS_ACTIVE')}
-              </Typography>
-            </Box>
-            <Button
-              variant="outlined"
-              color="error"
-              startIcon={<DeleteIcon />}
-              onClick={handleDeleteTotp}
-            >
-              {t('Auth.MFA_TOTP_BUTTON_DISABLE')}
-            </Button>
-          </CardContent>
-        </Card>
-      ) : (
-        !isSettingUp && (
-          <Button variant="contained" onClick={handleStartSetup}>
-            {t('Auth.MFA_TOTP_BUTTON_SETUP')}
-          </Button>
-        )
-      )}
-
-      {/* --- WIZARD: SETUP --- */}
-      {isSettingUp && totpData && (
-        <Card variant="outlined" sx={MFA_CARD_SX}>
-          <CardContent>
-            <Typography variant="subtitle1" gutterBottom>
-              {t('Auth.MFA_TOTP_QR_TITLE')}
-            </Typography>
-
-            <Stack
-              direction={{ xs: 'column', sm: 'row' }}
-              spacing={3}
-              alignItems="center"
-            >
-              {/* QR CODE */}
-              <Box sx={{ p: 2, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider' }}>
-                <QRCodeSVG value={totpData.key_uri} size={150} />
-              </Box>
-
-              {/* MANUAL ENTRY & VERIFY */}
-              <Box sx={{ flex: 1 }}>
-                <Typography variant="body2" gutterBottom>
-                  {t('Auth.MFA_TOTP_MANUAL_HINT')}
-                </Typography>
-                <Typography
-                  variant="mono"
-                  sx={{
-                    fontFamily: 'monospace',
-                    bgcolor: 'background.subtle',
-                    p: 1,
-                    borderRadius: 1,
-                    display: 'inline-block',
-                    mb: 2,
-                  }}
-                >
-                  {totpData.secret}
-                </Typography>
-
-                <form onSubmit={handleVerify}>
-                  <TextField
-                    label={t('Auth.MFA_TOTP_CODE_LABEL')}
-                    value={verifyCode}
-                    onChange={(e) => setVerifyCode(e.target.value)}
-                    fullWidth
-                    required
-                    sx={MFA_TEXT_FIELD_SX}
-                    autoComplete="off"
-                  />
-                  <Stack direction="row" spacing={1}>
-                    <Button type="submit" variant="contained" disabled={submitting}>
-                      {submitting
-                        ? t('Auth.MFA_TOTP_VERIFY_BUTTON_LOADING')
-                        : t('Auth.MFA_TOTP_VERIFY_BUTTON')}
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        setIsSettingUp(false);
-                        setTotpData(null);
-                        setVerifyCode('');
-                      }}
-                      disabled={submitting}
-                    >
-                      {t('Auth.MFA_TOTP_CANCEL_BUTTON')}
-                    </Button>
-                  </Stack>
-                </form>
-              </Box>
-            </Stack>
-          </CardContent>
-        </Card>
-      )}
-
-      <Divider sx={MFA_DIVIDER_SX} />
-
-      {/* --- RECOVERY CODES --- */}
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.MFA_RECOVERY_TITLE')}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        {t('Auth.MFA_RECOVERY_DESCRIPTION')}
-      </Typography>
-
-      {!showRecovery ? (
-        <Button variant="outlined" onClick={handleShowRecoveryCodes}>
-          {t('Auth.MFA_RECOVERY_VIEW_BUTTON')}
-        </Button>
-      ) : (
-        <Box sx={{ bgcolor: 'background.subtle', p: 2, borderRadius: 1 }}>
-          <Alert severity="warning" sx={MFA_ALERT_SX}>
-            {t('Auth.MFA_RECOVERY_WARNING')}
-          </Alert>
-          <Stack direction="row" flexWrap="wrap" gap={2}>
-            {Array.isArray(recoveryCodes) &&
-              recoveryCodes.map((code) => (
-                <Box
-                  key={code}
-                  sx={{
-                    bgcolor: 'background.paper',
-                    border: '1px solid',
-                    borderColor: 'divider',
-                    p: 1,
-                    borderRadius: 1,
-                    fontFamily: 'monospace',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                  }}
-                >
-                  {code}
-                  <Tooltip title={t('Auth.MFA_RECOVERY_COPY_TOOLTIP')}>
-                    <IconButton
-                      size="small"
-                      onClick={() => handleCopyCode(code)}
-                    >
-                      <ContentCopyIcon fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                </Box>
-              ))}
-          </Stack>
-          <Button
-            sx={MFA_RECOVERY_BUTTON_SX}
-            size="small"
-            onClick={handleGenerateNewRecoveryCodes}
-          >
-            {t('Auth.MFA_RECOVERY_GENERATE_NEW')}
-          </Button>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-

package/src/components/MfaLoginComponent.jsx

@@ -1,252 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Typography,
-  TextField,
-  Button,
-  Stack,
-  Alert,
-  Divider,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { authenticateWithMFA, fetchCurrentUser, requestMfaSupportHelp } from '../auth/authApi';
-import { loginWithPasskey } from '../utils/authService';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const MFA_LOGIN_ALERT_SX = { mb: 2 };
-export const MFA_LOGIN_DIVIDER_SX = { my: 2 };
-export const MFA_LOGIN_TEXT_FIELD_SX = { mb: 2 };
-
-export function MfaLoginComponent({ availableTypes, identifier, onSuccess, onCancel }) {
-  const { t, i18n } = useTranslation();
-  const [code, setCode] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [errorKey, setErrorKey] = useState(null);
-  const [infoKey, setInfoKey] = useState(null);
-  const [helpRequested, setHelpRequested] = useState(false);
-
-  const [helpDialogOpen, setHelpDialogOpen] = useState(false);
-  const [helpMessage, setHelpMessage] = useState('');
-
-  const types = Array.isArray(availableTypes) ? availableTypes : [];
-  const supportsTotpOrRecovery =
-    types.includes('totp') || types.includes('recovery_codes');
-  const supportsWebauthn = types.includes('webauthn');
-
-  const handleSubmitCode = async (event) => {
-    event.preventDefault();
-    setErrorKey(null);
-    setInfoKey(null);
-    setSubmitting(true);
-    try {
-      const trimmed = code.trim();
-      const isRecovery = trimmed.length > 6;
-
-      await authenticateWithMFA({ code: trimmed });
-
-      const user = await fetchCurrentUser();
-
-      onSuccess({
-        user,
-        method: isRecovery ? 'recovery_code' : 'totp',
-      });
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.MFA_AUTHENTICATE_FAILED'));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handlePasskey = async () => {
-    setErrorKey(null);
-    setInfoKey(null);
-    setSubmitting(true);
-    try {
-      // Use standard passkey login (starts a fresh session flow).
-      // This allows users to bypass the password MFA step if they have a valid passkey.
-      const user = await loginWithPasskey();
-      onSuccess({ user, method: 'webauthn' });
-    } catch (err) {
-      // Detailed error handling
-      if (err.code === 'Auth.PASSKEY_CANCELLED') {
-          // User cancelled - show specific key or just ignore
-          setErrorKey(t('Auth.PASSKEY_CANCELLED'));
-      } else {
-          // eslint-disable-next-line no-console
-          console.error(err);
-          setErrorKey(t('Auth.PASSKEY_FAILED'));
-      }
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const openHelpDialog = () => {
-    setErrorKey(null);
-    setInfoKey(null);
-    setHelpDialogOpen(true);
-  };
-
-  const handleNeedHelp = async () => {
-    setErrorKey(null);
-    setInfoKey(null);
-    setSubmitting(true);
-    try {
-      await requestMfaSupportHelp(identifier || '', helpMessage || '');
-      setHelpRequested(true);
-      setInfoKey('Auth.MFA_HELP_REQUESTED');
-      setHelpDialogOpen(false);
-      setHelpMessage('');
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.MFA_HELP_REQUEST_FAILED'));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <Box>
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        {t(
-          'Auth.MFA_SUBTITLE',
-          'Please confirm your login using one of the available methods.',
-        )}
-      </Typography>
-
-      {errorKey && (
-        <Alert severity="error" sx={MFA_LOGIN_ALERT_SX}>
-          {errorKey}
-        </Alert>
-      )}
-
-      {infoKey && (
-        <Alert severity="info" sx={MFA_LOGIN_ALERT_SX}>
-          {t(infoKey)}
-        </Alert>
-      )}
-
-      <Stack spacing={2}>
-        {supportsWebauthn && (
-          <Button
-            variant="contained"
-            fullWidth
-            onClick={handlePasskey}
-            disabled={submitting || helpRequested}
-          >
-            {t('Auth.LOGIN_USE_PASSKEY_BUTTON', 'Use passkey / security key')}
-          </Button>
-        )}
-
-        <Divider sx={MFA_LOGIN_DIVIDER_SX}>
-          {t('Auth.LOGIN_OR')}
-        </Divider>
-
-        {supportsTotpOrRecovery && (
-          <Box component="form" onSubmit={handleSubmitCode}>
-            <TextField
-              label={t(
-                'Auth.MFA_CODE_LABEL',
-                'Authenticator code (or recovery code)',
-              )}
-              value={code}
-              onChange={(e) => setCode(e.target.value)}
-              fullWidth
-              disabled={submitting || helpRequested}
-              autoComplete="one-time-code"
-              sx={MFA_LOGIN_TEXT_FIELD_SX}
-            />
-            <Button
-              type="submit"
-              variant="contained"
-              fullWidth
-              disabled={submitting || !code.trim() || helpRequested}
-            >
-              {t('Auth.MFA_VERIFY', 'Verify')}
-            </Button>
-          </Box>
-        )}
-
-        <Divider sx={MFA_LOGIN_DIVIDER_SX}>
-          {t('Auth.LOGIN_OR')}
-        </Divider>
-
-        
-
-        <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
-          <Button
-            fullWidth
-            size="small"
-            variant="outlined"
-            onClick={onCancel}
-            disabled={submitting}
-          >
-            {t('Auth.MFA_BACK_TO_LOGIN', 'Back to login')}
-          </Button>
-
-          <Button
-            fullWidth
-            size="small"
-            variant="outlined"
-            color="secondary"
-            onClick={openHelpDialog}
-            disabled={submitting || helpRequested}
-          >
-            {t(
-              'Auth.MFA_NEED_HELP',
-              "I can't use any of these methods",
-            )}
-          </Button>
-        </Stack>
-      </Stack>
-       <Dialog
-        open={helpDialogOpen}
-        onClose={() => setHelpDialogOpen(false)}
-        fullWidth
-        maxWidth="sm"
-      >
-        <DialogTitle>
-          {t('Auth.MFA_HELP_DIALOG_TITLE', 'Need help with sign-in')}
-        </DialogTitle>
-        <DialogContent dividers>
-          <Typography variant="body2" sx={{ mb: 2 }}>
-            {t(
-              'Auth.MFA_HELP_DIALOG_DESCRIPTION',
-              'Describe briefly why you cannot use the available methods. A support person will review your request.',
-            )}
-          </Typography>
-          <TextField
-            label={t('Auth.MFA_HELP_MESSAGE_LABEL', 'Your message to support')}
-            multiline
-            minRows={3}
-            fullWidth
-            value={helpMessage}
-            onChange={(e) => setHelpMessage(e.target.value)}
-            disabled={submitting}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button
-            onClick={() => setHelpDialogOpen(false)}
-            disabled={submitting}
-          >
-            {t('Common.CANCEL', 'Cancel')}
-          </Button>
-          <Button
-            onClick={handleNeedHelp}
-            disabled={submitting}
-            variant="contained"
-          >
-            {t('Auth.MFA_HELP_SUBMIT', 'Send request')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </Box>
-    
-  );
-  
-};
-

package/src/components/MobileBottomNav.jsx

@@ -1,82 +0,0 @@
-import Badge from '@mui/material/Badge';
-import BottomNavigation from '@mui/material/BottomNavigation';
-import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
-
-const defaultZIndex = (theme) => theme.zIndex.drawer + 2;
-
-export const MOBILE_BOTTOM_NAV_ROOT_SX = {
-  position: 'fixed',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  borderTop: '1px solid',
-  borderColor: 'divider',
-  paddingBottom: 'env(safe-area-inset-bottom)',
-};
-
-export const MOBILE_BOTTOM_NAV_ACTION_SX = {
-  minWidth: 0,
-  maxWidth: 'none',
-};
-
-export function MobileBottomNav({
-  destinations,
-  activeRoute,
-  onNavigate,
-  hideAbove = 'md',
-  zIndex = defaultZIndex,
-  sx = {},
-}) {
-  const theme = useTheme();
-  const isHidden = useMediaQuery(theme.breakpoints.up(hideAbove));
-  const callerSx = Array.isArray(sx) ? sx : [sx];
-
-  if (isHidden) return null;
-
-  return (
-    <BottomNavigation
-      value={activeRoute}
-      onChange={(_, route) => onNavigate(route)}
-      showLabels
-      sx={[
-        { ...MOBILE_BOTTOM_NAV_ROOT_SX, zIndex },
-        ...callerSx,
-      ]}
-    >
-      {destinations.map((destination) => {
-        const Icon = destination.icon;
-        const selected = activeRoute === destination.route;
-        const icon = (
-          <Icon
-            sx={destination.emphasis ? {
-              p: 0.8,
-              borderRadius: '50%',
-              backgroundColor: selected ? 'primary.main' : 'background.paper',
-              color: selected ? 'primary.contrastText' : 'primary.main',
-              boxShadow: 'none',
-              transform: 'translateY(-4px)',
-            } : undefined}
-          />
-        );
-
-        return (
-          <BottomNavigationAction
-            key={destination.route}
-            value={destination.route}
-            label={destination.shortLabel ?? destination.label}
-            aria-label={destination.shortLabel != null ? destination.label : undefined}
-            aria-current={selected ? 'page' : undefined}
-            sx={MOBILE_BOTTOM_NAV_ACTION_SX}
-            icon={destination.badgeCount ? (
-              <Badge badgeContent={destination.badgeCount} color="error" max={99}>
-                {icon}
-              </Badge>
-            ) : icon}
-          />
-        );
-      })}
-    </BottomNavigation>
-  );
-}