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

package/src/components/AccessCodeManager.jsx

@@ -1,288 +0,0 @@
-// src/auth/components/AccessCodeManager.jsx
-import React, { useEffect, useState } from 'react';
-import {
-  Box,
-  Stack,
-  Typography,
-  Slider,
-  Button,
-  TextField,
-  Alert,
-  CircularProgress,
-} from '@mui/material';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { useTranslation } from 'react-i18next';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-// Pfad ggf. anpassen je nach Struktur: von src/auth/components zu src/auth/authApi
-import {
-  fetchAccessCodes,
-  createAccessCode,
-  deleteAccessCode,
-} from '../auth/authApi';
-
-export const ACCESS_CODE_ACTION_SX = {
-  minWidth: 120,
-  height: 40,
-  whiteSpace: 'nowrap',
-};
-export const ACCESS_CODE_PRIMARY_ACTION_SX = { ...ACCESS_CODE_ACTION_SX, mt: 1 };
-export const ACCESS_CODE_ALERT_SX = { mb: 2 };
-export const ACCESS_CODE_VALUE_FIELD_SX = {
-  '& .MuiInputBase-input': {
-    fontFamily: 'monospace',
-    letterSpacing: '0.04em',
-  },
-};
-
-export function AccessCodeManager() {
-  const { t, i18n } = useTranslation();
-  const [codes, setCodes] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
-
-  const [length, setLength] = useState(12);
-  const [manualCode, setManualCode] = useState('');
-
-  const [errorKey, setErrorKey] = useState(null);
-  const [successKey, setSuccessKey] = useState(null);
-  const [copyNotice, setCopyNotice] = useState('');
-
-  // Helper that prefers backend error code if available
-  const setErrorFromErrorObject = (err, fallbackCode) => {
-    setErrorKey(resolveErrorText(i18n, err, fallbackCode));
-  };
-
-  // Load all access codes from backend
-  const loadCodes = async () => {
-    setLoading(true);
-    setErrorKey(null);
-    setSuccessKey(null);
-    try {
-      const data = await fetchAccessCodes();
-      setCodes(Array.isArray(data) ? data : []);
-    } catch (err) {
-      setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_LIST_FAILED');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadCodes();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Generates a random code with the selected length
-  const generateRandomCode = (len) => {
-    const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
-    const array = new Uint32Array(len);
-    window.crypto.getRandomValues(array);
-    return Array.from(array, (x) => alphabet[x % alphabet.length]).join('');
-  };
-
-  const handleCreateCode = async (code) => {
-    setSubmitting(true);
-    setErrorKey(null);
-    setSuccessKey(null);
-    try {
-      const created = await createAccessCode(code);
-      setCodes((prev) => [...prev, created]);
-      setSuccessKey('Auth.ACCESS_CODE_SAVE_SUCCESS');
-    } catch (err) {
-      setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_SAVE_FAILED');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleGenerateClick = async () => {
-    const code = generateRandomCode(length);
-    await handleCreateCode(code);
-  };
-
-  const handleAddManual = async () => {
-    if (!manualCode.trim()) {
-      setErrorKey(t('Auth.SIGNUP_ACCESS_CODE_REQUIRED'));
-      return;
-    }
-    await handleCreateCode(manualCode.trim());
-    setManualCode('');
-  };
-
-  const handleDelete = async (id) => {
-    setErrorKey(null);
-    setSuccessKey(null);
-    try {
-      await deleteAccessCode(id);
-      setCodes((prev) => prev.filter((c) => c.id !== id));
-      setSuccessKey('Auth.ACCESS_CODE_DELETE_SUCCESS');
-    } catch (err) {
-      setErrorFromErrorObject(err, 'Auth.ACCESS_CODE_DELETE_FAILED');
-    }
-  };
-
-  const handleCopyCode = async (codeValue) => {
-    try {
-      if (navigator?.clipboard?.writeText) {
-        await navigator.clipboard.writeText(codeValue);
-      } else {
-        throw new Error('Clipboard API unavailable');
-      }
-      setCopyNotice(t('Auth.ACCESS_CODE_COPY_SUCCESS', 'Code kopiert.'));
-      window.setTimeout(() => setCopyNotice(''), 1800);
-    } catch (_err) {
-      setCopyNotice(t('Auth.ACCESS_CODE_COPY_FALLBACK', 'Code markieren und mit Ctrl+C kopieren.'));
-      window.setTimeout(() => setCopyNotice(''), 2200);
-    }
-  };
-
-  if (loading) {
-    return (
-      <Box sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return (
-    <Box>
-      {errorKey && (
-        <Alert severity="error" sx={ACCESS_CODE_ALERT_SX}>
-          {errorKey}
-        </Alert>
-      )}
-      {successKey && (
-        <Alert severity="success" sx={ACCESS_CODE_ALERT_SX}>
-          {t(successKey)}
-        </Alert>
-      )}
-      {copyNotice && (
-        <Alert severity="info" sx={ACCESS_CODE_ALERT_SX}>
-          {copyNotice}
-        </Alert>
-      )}
-
-      {/* Active codes list */}
-      <Box sx={{ mb: 3 }}>
-        <Typography variant="subtitle1" gutterBottom>
-          {t('Auth.ACCESS_CODE_SECTION_ACTIVE')}
-        </Typography>
-        {codes.length === 0 ? (
-          <Typography variant="body2">
-            {t('Auth.ACCESS_CODE_NONE')}
-          </Typography>
-        ) : (
-          <Stack spacing={1}>
-            {codes.map((code) => (
-              <Box
-                key={code.id}
-                sx={{
-                  display: 'grid',
-                  gridTemplateColumns: '1fr auto auto',
-                  gap: 1,
-                  alignItems: 'center',
-                  width: '100%',
-                  maxWidth: 560,
-                }}
-              >
-                <TextField
-                  value={code.code}
-                  size="small"
-                  fullWidth
-                  slotProps={{
-                    input: {
-                      readOnly: true,
-                      onFocus: (event) => event.target.select(),
-                    },
-                  }}
-                  sx={ACCESS_CODE_VALUE_FIELD_SX}
-                />
-                <Button
-                  variant="outlined"
-                  size="small"
-                  onClick={() => handleCopyCode(code.code)}
-                  startIcon={<ContentCopyIcon fontSize="small" />}
-                  sx={ACCESS_CODE_ACTION_SX}
-                >
-                  {t('Auth.ACCESS_CODE_COPY_BUTTON', t('Auth.MFA_RECOVERY_COPY_TOOLTIP', 'Kopieren'))}
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="error"
-                  size="small"
-                  onClick={() => handleDelete(code.id)}
-                  startIcon={<DeleteIcon fontSize="small" />}
-                  sx={ACCESS_CODE_ACTION_SX}
-                >
-                  {t('Common.DELETE', 'Löschen')}
-                </Button>
-              </Box>
-            ))}
-          </Stack>
-        )}
-      </Box>
-
-      {/* Generator */}
-      <Box sx={{ mb: 3 }}>
-        <Typography variant="subtitle1" gutterBottom>
-          {t('Auth.ACCESS_CODE_SECTION_GENERATE')}
-        </Typography>
-
-        <Box sx={{ maxWidth: 360 }}>
-          <Typography variant="body2" gutterBottom>
-            {t('Auth.ACCESS_CODE_LENGTH_LABEL', { length })}
-          </Typography>
-          <Slider
-            min={6}
-            max={32}
-            step={1}
-            value={length}
-            onChange={(_, val) => setLength(val)}
-            valueLabelDisplay="auto"
-            disabled={submitting}
-          />
-        </Box>
-
-        <Button
-          variant="contained"
-          size="small"
-          sx={ACCESS_CODE_PRIMARY_ACTION_SX}
-          onClick={handleGenerateClick}
-          disabled={submitting}
-        >
-          {submitting
-            ? t('Auth.SAVE_BUTTON_LOADING')
-            : t('Auth.ACCESS_CODE_GENERATE_BUTTON')}
-        </Button>
-      </Box>
-
-      {/* Manual add */}
-      <Box sx={{ mb: 2, maxWidth: 360 }}>
-        <Typography variant="subtitle1" gutterBottom>
-          {t('Auth.ACCESS_CODE_SECTION_MANUAL')}
-        </Typography>
-        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-          <TextField
-            label={t('Auth.ACCESS_CODE_LABEL')}
-            fullWidth
-            size="small"
-            value={manualCode}
-            onChange={(e) => setManualCode(e.target.value)}
-            disabled={submitting}
-          />
-          <Button
-            variant="contained"
-            size="small"
-            onClick={handleAddManual}
-            disabled={submitting}
-            sx={ACCESS_CODE_ACTION_SX}
-          >
-            {t('Auth.ACCESS_CODE_ADD_BUTTON')}
-          </Button>
-        </Box>
-      </Box>
-    </Box>
-  );
-}

package/src/components/AccessCodeSingleUseToggle.jsx

@@ -1,92 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Alert,
-  Box,
-  FormControlLabel,
-  Switch,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const ACCESS_CODE_SINGLE_USE_ALERT_SX = { mb: 2 };
-
-export function AccessCodeSingleUseToggle({ canEdit = true, policy = null, onPolicyChange = null }) {
-  const { t, i18n } = useTranslation();
-  const [value, setValue] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-
-  useEffect(() => {
-    if (policy) {
-      setValue(Boolean(policy?.access_code_single_use));
-      return undefined;
-    }
-    let active = true;
-    (async () => {
-      try {
-        const data = await fetchAuthPolicy();
-        if (active) {
-          setValue(Boolean(data?.access_code_single_use));
-        }
-      } catch {
-        // Keep defaults when policy is unavailable.
-      }
-    })();
-    return () => {
-      active = false;
-    };
-  }, [policy]);
-
-  const handleChange = async (event) => {
-    if (!canEdit) {
-      return;
-    }
-    const nextValue = event.target.checked;
-    const previous = value;
-    setValue(nextValue);
-    setBusy(true);
-    setError('');
-    setSuccess('');
-    try {
-      const updated = await updateAuthPolicy({ access_code_single_use: nextValue });
-      if (onPolicyChange) {
-        onPolicyChange((current) => ({ ...(current || {}), ...(updated || {}) }));
-      }
-      setSuccess(t('Auth.ACCESS_CODE_SINGLE_USE_SAVE_SUCCESS', 'Access code policy saved.'));
-    } catch (err) {
-      setValue(previous);
-      setError(resolveErrorText(i18n, err, 'Auth.AUTH_POLICY_UPDATE_FAILED'));
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.ACCESS_CODE_SINGLE_USE_TITLE', 'Access Code Single-Use')}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
-        {t(
-          'Auth.ACCESS_CODE_SINGLE_USE_HINT',
-          'When enabled, each access code can be redeemed only once. Recommended.',
-        )}
-      </Typography>
-      {error && <Alert severity="error" sx={ACCESS_CODE_SINGLE_USE_ALERT_SX}>{error}</Alert>}
-      {success && <Alert severity="success" sx={ACCESS_CODE_SINGLE_USE_ALERT_SX}>{success}</Alert>}
-      <FormControlLabel
-        control={
-          <Switch
-            checked={value}
-            disabled={busy || !canEdit}
-            onChange={handleChange}
-          />
-        }
-        label={t('Auth.ACCESS_CODE_SINGLE_USE_TOGGLE', 'Codes are single-use')}
-      />
-    </Box>
-  );
-}

package/src/components/AllowedEmailDomainsManager.jsx

@@ -1,92 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Alert,
-  Box,
-  Button,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { updateAuthPolicy } from '../auth/authApi';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const ALLOWED_EMAIL_DOMAINS_ALERT_SX = { mb: 2 };
-export const ALLOWED_EMAIL_DOMAINS_BUTTON_SX = { mt: 2 };
-
-export function AllowedEmailDomainsManager({
-  domains = [],
-  enabled = false,
-  onPolicyChange,
-  canEdit = true,
-}) {
-  const { t, i18n } = useTranslation();
-  const [domainsText, setDomainsText] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-
-  useEffect(() => {
-    setDomainsText((domains || []).join('\n'));
-  }, [domains]);
-
-  const handleSave = async () => {
-    setBusy(true);
-    setError('');
-    setSuccess('');
-    try {
-      const allowedEmailDomains = domainsText
-        .split(/\r?\n/)
-        .map((value) => value.trim())
-        .filter(Boolean);
-      const next = await updateAuthPolicy({
-        allowed_email_domains: allowedEmailDomains,
-      });
-      setDomainsText((next?.allowed_email_domains || allowedEmailDomains).join('\n'));
-      setSuccess(t('Auth.AUTH_POLICY_SAVE_SUCCESS', 'Authentication settings saved.'));
-      if (onPolicyChange) onPolicyChange(next);
-    } catch (err) {
-      setError(resolveErrorText(i18n, err, 'Auth.AUTH_POLICY_UPDATE_FAILED'));
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  if (!enabled) {
-    return null;
-  }
-
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.ALLOWED_EMAIL_DOMAINS_TITLE', 'Allowed Email Domains')}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
-        {t(
-          'Auth.ALLOWED_EMAIL_DOMAINS_CARD_HINT',
-          'Only addresses from these domains can use email-domain sign-up.',
-        )}
-      </Typography>
-
-      {error && <Alert severity="error" sx={ALLOWED_EMAIL_DOMAINS_ALERT_SX}>{error}</Alert>}
-      {success && <Alert severity="success" sx={ALLOWED_EMAIL_DOMAINS_ALERT_SX}>{success}</Alert>}
-
-      <TextField
-        label={t('Auth.ALLOWED_EMAIL_DOMAINS_LABEL', 'Allowed email domains')}
-        helperText={t(
-          'Auth.ALLOWED_EMAIL_DOMAINS_HINT',
-          'One domain per line, e.g. example.org. You can leave this empty temporarily.',
-        )}
-        multiline
-        minRows={4}
-        fullWidth
-        value={domainsText}
-        onChange={(event) => setDomainsText(event.target.value)}
-        disabled={busy || !canEdit}
-      />
-
-      <Button variant="contained" sx={ALLOWED_EMAIL_DOMAINS_BUTTON_SX} onClick={handleSave} disabled={busy || !canEdit}>
-        {t('Common.SAVE', 'Save')}
-      </Button>
-    </Box>
-  );
-}

package/src/components/AuthFactorRequirementCard.jsx

@@ -1,95 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Alert,
-  Box,
-  FormControl,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const AUTH_FACTOR_REQUIREMENT_ALERT_SX = { mb: 2 };
-
-export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
-  const { t, i18n } = useTranslation();
-  const [value, setValue] = useState('1');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-
-  useEffect(() => {
-    if (policy) {
-      setValue(String(policy?.required_auth_factor_count || 1));
-      return undefined;
-    }
-    let active = true;
-    (async () => {
-      try {
-        const data = await fetchAuthPolicy();
-        if (active) {
-          setValue(String(data?.required_auth_factor_count || 1));
-        }
-      } catch {
-        // Keep defaults when policy is unavailable.
-      }
-    })();
-    return () => {
-      active = false;
-    };
-  }, [policy]);
-
-  const handleChange = async (event) => {
-    if (!canEdit) {
-      return;
-    }
-    const nextValue = event.target.value;
-    const previous = value;
-    setValue(nextValue);
-    setBusy(true);
-    setError('');
-    setSuccess('');
-    try {
-      await updateAuthPolicy({ required_auth_factor_count: Number(nextValue) });
-      setSuccess(t('Auth.AUTH_FACTOR_SAVE_SUCCESS', 'Factor requirement saved.'));
-    } catch (err) {
-      setValue(previous);
-      setError(resolveErrorText(i18n, err, 'Auth.AUTH_POLICY_UPDATE_FAILED'));
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.AUTH_FACTOR_TITLE', 'Authentication Requirements')}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
-        {t(
-          'Auth.AUTH_FACTOR_HINT',
-          'Define the minimum number of authentication factors required for sign-in.',
-        )}
-      </Typography>
-      {error && <Alert severity="error" sx={AUTH_FACTOR_REQUIREMENT_ALERT_SX}>{error}</Alert>}
-      {success && <Alert severity="success" sx={AUTH_FACTOR_REQUIREMENT_ALERT_SX}>{success}</Alert>}
-      <FormControl>
-        <RadioGroup value={value} onChange={handleChange}>
-          <FormControlLabel
-            value="1"
-            control={<Radio disabled={busy || !canEdit} />}
-            label={t('Auth.ONE_FACTOR_LABEL', 'Allow single-factor authentication')}
-          />
-          <FormControlLabel
-            value="2"
-            control={<Radio disabled={busy || !canEdit} />}
-            label={t('Auth.TWO_FACTOR_LABEL', 'Require two-factor authentication')}
-          />
-        </RadioGroup>
-      </FormControl>
-    </Box>
-  );
-}