@micha.bigler/ui-core-micha 2.1.20 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.1.20",
+  "version": "2.2.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,
@@ -8,6 +8,7 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@mui/material": "^7.3.5",
+    "@mui/x-data-grid": "^8.4.0",
     "axios": "^1.0.0",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.1",

package/src/auth/AuthContext.jsx

@@ -17,6 +17,7 @@ const DEFAULT_AUTH_METHODS = {
   password_login: true,
   password_reset: true,
   signup: true,
+  signup_modes: ['self_signup_access_code'],
   password_change: true,
   social_login: true,
   social_providers: ['google', 'microsoft'],
@@ -25,6 +26,9 @@ const DEFAULT_AUTH_METHODS = {
   mfa_totp: true,
   mfa_recovery_codes: true,
   mfa_enabled: true,
+  required_auth_factor_count: 1,
+  two_factor_required: false,
+  qr_signup_enabled: false,
 };
 
 export const AuthProvider = ({ children }) => {

package/src/auth/authApi.jsx

@@ -23,6 +23,24 @@ export async function fetchAuthMethods() {
   return res.data || {};
 }
 
+export async function fetchAuthPolicy() {
+  try {
+    const res = await apiClient.get(`${USERS_BASE}/auth-policy/`);
+    return res.data || {};
+  } catch (error) {
+    throw normaliseApiError(error, 'Auth.AUTH_POLICY_FETCH_FAILED');
+  }
+}
+
+export async function updateAuthPolicy(payload) {
+  try {
+    const res = await apiClient.patch(`${USERS_BASE}/auth-policy/`, payload);
+    return res.data || {};
+  } catch (error) {
+    throw normaliseApiError(error, 'Auth.AUTH_POLICY_UPDATE_FAILED');
+  }
+}
+
 export async function updateUserProfile(data) {
   try {
     const res = await apiClient.patch(`${USERS_BASE}/current/`, data);
@@ -321,18 +339,48 @@ export async function validateAccessCode(code) {
   }
 }
 
-export async function requestInviteWithCode(email, accessCode) {
-  const payload = { email };
+export async function sendAdminInvite(email) {
+  try {
+    const res = await apiClient.post(`${USERS_BASE}/invite/`, { email });
+    return res.data;
+  } catch (error) {
+    throw normaliseApiError(error, 'Auth.INVITE_FAILED');
+  }
+}
+
+export async function submitRegistrationRequest({
+  email,
+  mode,
+  accessCode,
+  registrationContextToken,
+  registrationContext,
+}) {
+  const payload = { email, mode };
   if (accessCode) payload.access_code = accessCode;
+  if (registrationContextToken) {
+    payload.registration_context_token = registrationContextToken;
+  }
+  if (registrationContext) {
+    payload.registration_context = registrationContext;
+  }
 
   try {
-    const res = await apiClient.post(`${USERS_BASE}/invite/`, payload);
+    const res = await apiClient.post(`${USERS_BASE}/register-request/`, payload);
     return res.data;
   } catch (error) {
     throw normaliseApiError(error, 'Auth.INVITE_FAILED');
   }
 }
 
+export async function createSignupQr(payload = {}) {
+  try {
+    const res = await apiClient.post(`${USERS_BASE}/signup-qr/`, payload);
+    return res.data || {};
+  } catch (error) {
+    throw normaliseApiError(error, 'Auth.SIGNUP_QR_CREATE_FAILED');
+  }
+}
+
 // -----------------------------
 // Recovery Support (Admin/Support Side)
 // -----------------------------

package/src/components/AccessCodeManager.jsx

@@ -7,11 +7,11 @@ import {
   Slider,
   Button,
   TextField,
-  Chip,
   Alert,
   CircularProgress,
 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
 
 // Pfad ggf. anpassen je nach Struktur: von src/auth/components zu src/auth/authApi
@@ -39,6 +39,7 @@ export function AccessCodeManager() {
 
   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) => {
@@ -115,6 +116,21 @@ export function AccessCodeManager() {
     }
   };
 
+  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' }}>
@@ -135,6 +151,11 @@ export function AccessCodeManager() {
           {t(successKey)}
         </Alert>
       )}
+      {copyNotice && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          {copyNotice}
+        </Alert>
+      )}
 
       {/* Active codes list */}
       <Box sx={{ mb: 3 }}>
@@ -146,14 +167,56 @@ export function AccessCodeManager() {
             {t('Auth.ACCESS_CODE_NONE')}
           </Typography>
         ) : (
-          <Stack direction="row" flexWrap="wrap" gap={1}>
+          <Stack spacing={1}>
             {codes.map((code) => (
-              <Chip
+              <Box
                 key={code.id}
-                label={code.code}
-                onDelete={() => handleDelete(code.id)}
-                deleteIcon={<CloseIcon />}
-              />
+                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={{
+                    '& .MuiInputBase-input': {
+                      fontFamily: 'monospace',
+                      letterSpacing: '0.04em',
+                    },
+                  }}
+                />
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={() => handleCopyCode(code.code)}
+                  startIcon={<ContentCopyIcon fontSize="small" />}
+                  sx={actionButtonSx}
+                >
+                  {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={actionButtonSx}
+                >
+                  {t('Common.DELETE', 'Löschen')}
+                </Button>
+              </Box>
             ))}
           </Stack>
         )}

package/src/components/AuthFactorRequirementCard.jsx

@@ -0,0 +1,74 @@
+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';
+
+export function AuthFactorRequirementCard() {
+  const { t } = useTranslation();
+  const [value, setValue] = useState('1');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  useEffect(() => {
+    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;
+    };
+  }, []);
+
+  const handleChange = async (event) => {
+    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(t(err?.code || 'Auth.AUTH_POLICY_UPDATE_FAILED', 'Could not save factor requirement.'));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        {t('Auth.AUTH_FACTOR_TITLE', 'Authentication Factors')}
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+        {t('Auth.AUTH_FACTOR_HINT', 'Choose whether one factor is enough or two factors are required.')}
+      </Typography>
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+      <FormControl>
+        <RadioGroup value={value} onChange={handleChange}>
+          <FormControlLabel value="1" control={<Radio disabled={busy} />} label={t('Auth.ONE_FACTOR_LABEL', 'One factor is enough')} />
+          <FormControlLabel value="2" control={<Radio disabled={busy} />} label={t('Auth.TWO_FACTOR_LABEL', 'Two factors are required')} />
+        </RadioGroup>
+      </FormControl>
+    </Box>
+  );
+}

package/src/components/BulkInviteCsvTab.jsx

@@ -14,7 +14,7 @@ import {
   Paper,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { requestInviteWithCode } from '../auth/authApi';
+import { sendAdminInvite } from '../auth/authApi';
 
 function parseEmailsFromCsv(text) {
   if (!text) return [];
@@ -41,7 +41,7 @@ function parseEmailsFromCsv(text) {
 }
 
 export function BulkInviteCsvTab({
-  inviteFn = (email) => requestInviteWithCode(email, null),
+  inviteFn = (email) => sendAdminInvite(email),
   onCompleted,
 }) {
   const { t } = useTranslation();

package/src/components/LoginForm.jsx

@@ -118,21 +118,21 @@ export function LoginForm({
           />
         </Box>
       )}
-      {/* Account & Recovery */}
-      
+      {/* Account actions */}
       {(onSignUp || onForgotPassword) && (
       <Box>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          {t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE')}
-        </Typography>
+        <Divider sx={{ my: 2 }}>
+          {t('Auth.LOGIN_OR')}
+        </Divider>
 
-        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
           {onSignUp && (
             <Button
               type="button"
               variant="outlined"
               onClick={onSignUp}
               disabled={disabled}
+              fullWidth
             >
               {t('Auth.LOGIN_SIGNUP_BUTTON')}
             </Button>
@@ -144,6 +144,7 @@ export function LoginForm({
               variant="outlined"
               onClick={onForgotPassword}
               disabled={disabled}
+              fullWidth
             >
               {t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON')}
             </Button>

package/src/components/QrSignupManager.jsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  Box,
+  Button,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { QRCodeSVG } from 'qrcode.react';
+import { createSignupQr } from '../auth/authApi';
+
+export function QrSignupManager({ enabled = false }) {
+  const { t } = useTranslation();
+  const [label, setLabel] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [result, setResult] = useState(null);
+  const hasGeneratedRef = useRef(false);
+
+  const generate = async () => {
+    if (!enabled) {
+      setResult(null);
+      return;
+    }
+    setBusy(true);
+    setError('');
+    setSuccess('');
+    try {
+      const data = await createSignupQr({
+        label,
+      });
+      setResult(data);
+      hasGeneratedRef.current = true;
+      setSuccess(t('Auth.SIGNUP_QR_SAVE_SUCCESS', 'QR signup link updated.'));
+    } catch (err) {
+      setError(t(err?.code || 'Auth.SIGNUP_QR_CREATE_FAILED', 'Could not create signup QR.'));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!enabled) {
+      setResult(null);
+      setError('');
+      setSuccess('');
+      hasGeneratedRef.current = false;
+      return;
+    }
+    if (hasGeneratedRef.current) {
+      return;
+    }
+    let active = true;
+    const ensureInitialQr = async () => {
+      setBusy(true);
+      setError('');
+      setSuccess('');
+      try {
+        const data = await createSignupQr({
+          label,
+        });
+        if (!active) return;
+        setResult(data);
+        hasGeneratedRef.current = true;
+        setSuccess(t('Auth.SIGNUP_QR_SAVE_SUCCESS', 'QR signup link updated.'));
+      } catch (err) {
+        if (!active) return;
+        setError(t(err?.code || 'Auth.SIGNUP_QR_CREATE_FAILED', 'Could not create signup QR.'));
+      } finally {
+        if (active) {
+          setBusy(false);
+        }
+      }
+    };
+    ensureInitialQr();
+    return () => {
+      active = false;
+    };
+  }, [enabled, label, t]);
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        {t('Auth.SIGNUP_QR_MANAGER_TITLE', 'QR Signup')}
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+        {t('Auth.SIGNUP_QR_MANAGER_HINT', 'When QR signup is enabled, a signup QR code is shown here immediately.')}
+      </Typography>
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+
+      {!enabled && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          {t('Auth.SIGNUP_QR_DISABLED_HINT', 'Enable self-signup by QR above to show a QR code here.')}
+        </Alert>
+      )}
+
+      <TextField
+        label={t('Common.LABEL', 'Label')}
+        value={label}
+        onChange={(event) => setLabel(event.target.value)}
+        fullWidth
+        disabled={!enabled || busy}
+      />
+
+      <Button variant="contained" sx={{ mt: 2 }} onClick={generate} disabled={!enabled || busy}>
+        {t('Common.SAVE', 'Save')}
+      </Button>
+
+      {result?.signup_url && (
+        <Box sx={{ mt: 3 }}>
+          <QRCodeSVG value={result.signup_url} size={180} includeMargin />
+          <TextField
+            label={t('Auth.SIGNUP_QR_LINK_LABEL', 'Signup link')}
+            value={result.signup_url}
+            fullWidth
+            multiline
+            minRows={2}
+            sx={{ mt: 2 }}
+            InputProps={{ readOnly: true }}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/components/RegistrationMethodsManager.jsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  Box,
+  Button,
+  FormControlLabel,
+  Stack,
+  Switch,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
+
+const EMPTY_POLICY = {
+  allow_admin_invite: true,
+  allow_self_signup_access_code: false,
+  allow_self_signup_open: false,
+  allow_self_signup_email_domain: false,
+  allow_self_signup_qr: false,
+  allowed_email_domains: [],
+  required_auth_factor_count: 1,
+};
+
+export function RegistrationMethodsManager({ onPolicyChange }) {
+  const { t } = useTranslation();
+  const [policy, setPolicy] = useState(EMPTY_POLICY);
+  const [domainsText, setDomainsText] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [busyField, setBusyField] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    (async () => {
+      try {
+        const data = await fetchAuthPolicy();
+        if (!active) return;
+        setPolicy((prev) => ({ ...prev, ...data }));
+        setDomainsText((data?.allowed_email_domains || []).join('\n'));
+        if (onPolicyChange) onPolicyChange(data);
+      } catch (err) {
+        if (active) {
+          setError(t(err?.code || 'Auth.AUTH_POLICY_FETCH_FAILED', 'Could not load authentication policy.'));
+        }
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [onPolicyChange, t]);
+
+  const toggle = (field) => async (_event, checked) => {
+    const previous = policy[field];
+    setPolicy((prev) => ({ ...prev, [field]: checked }));
+    setBusyField(field);
+    setError('');
+    setSuccess('');
+    try {
+      const next = await updateAuthPolicy({ [field]: checked });
+      setPolicy((prev) => ({ ...prev, ...next }));
+      setDomainsText((next?.allowed_email_domains || []).join('\n'));
+      setSuccess(t('Auth.AUTH_POLICY_SAVE_SUCCESS', 'Authentication settings saved.'));
+      if (onPolicyChange) onPolicyChange(next);
+    } catch (err) {
+      setPolicy((prev) => ({ ...prev, [field]: previous }));
+      setError(t(err?.code || 'Auth.AUTH_POLICY_UPDATE_FAILED', 'Could not save authentication settings.'));
+    } finally {
+      setBusyField('');
+    }
+  };
+
+  const save = async () => {
+    setBusy(true);
+    setError('');
+    setSuccess('');
+    try {
+      const allowed_email_domains = domainsText
+        .split(/\r?\n/)
+        .map((value) => value.trim())
+        .filter(Boolean);
+      const next = await updateAuthPolicy({ allowed_email_domains });
+      setPolicy((prev) => ({ ...prev, ...next }));
+      setDomainsText((next?.allowed_email_domains || allowed_email_domains).join('\n'));
+      setSuccess(t('Auth.AUTH_POLICY_SAVE_SUCCESS', 'Authentication settings saved.'));
+      if (onPolicyChange) onPolicyChange(next);
+    } catch (err) {
+      setError(t(err?.code || 'Auth.AUTH_POLICY_UPDATE_FAILED', 'Could not save authentication settings.'));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        {t('Auth.REGISTRATION_METHODS_TITLE', 'Registration Methods')}
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+        {t('Auth.REGISTRATION_METHODS_HINT', 'Choose which signup and invite flows are active for this app.')}
+      </Typography>
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+
+      <Stack spacing={1}>
+        <FormControlLabel
+          control={(
+            <Switch
+              checked={Boolean(policy.allow_admin_invite)}
+              onChange={toggle('allow_admin_invite')}
+              disabled={Boolean(busyField)}
+            />
+          )}
+          label={t('Auth.ADMIN_INVITE_LABEL', 'Admin invite')}
+        />
+        <FormControlLabel
+          control={(
+            <Switch
+              checked={Boolean(policy.allow_self_signup_access_code)}
+              onChange={toggle('allow_self_signup_access_code')}
+              disabled={Boolean(busyField)}
+            />
+          )}
+          label={t('Auth.SIGNUP_ACCESS_CODE_LABEL', 'Self-signup with access code')}
+        />
+        <FormControlLabel
+          control={(
+            <Switch
+              checked={Boolean(policy.allow_self_signup_open)}
+              onChange={toggle('allow_self_signup_open')}
+              disabled={Boolean(busyField)}
+            />
+          )}
+          label={t('Auth.SIGNUP_OPEN_LABEL', 'Open self-signup')}
+        />
+        <FormControlLabel
+          control={(
+            <Switch
+              checked={Boolean(policy.allow_self_signup_email_domain)}
+              onChange={toggle('allow_self_signup_email_domain')}
+              disabled={Boolean(busyField)}
+            />
+          )}
+          label={t('Auth.SIGNUP_EMAIL_DOMAIN_LABEL', 'Self-signup by email domain')}
+        />
+        <FormControlLabel
+          control={(
+            <Switch
+              checked={Boolean(policy.allow_self_signup_qr)}
+              onChange={toggle('allow_self_signup_qr')}
+              disabled={Boolean(busyField)}
+            />
+          )}
+          label={t('Auth.SIGNUP_QR_LABEL', 'Self-signup by QR')}
+        />
+      </Stack>
+
+      {policy.allow_self_signup_email_domain && !(policy.allowed_email_domains || []).length && (
+        <Alert severity="info" sx={{ mt: 2 }}>
+          {t(
+            'Auth.EMAIL_DOMAIN_CURRENTLY_BLOCKED_HINT',
+            'Email-domain signup is enabled, but it stays blocked until at least one allowed domain is saved.',
+          )}
+        </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={3}
+        fullWidth
+        sx={{ mt: 2 }}
+        value={domainsText}
+        onChange={(event) => setDomainsText(event.target.value)}
+      />
+
+      <Button variant="contained" sx={{ mt: 2 }} onClick={save} disabled={busy}>
+        {t('Common.SAVE', 'Save')}
+      </Button>
+    </Box>
+  );
+}

package/src/components/UserInviteComponent.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Box, TextField, Button, Typography, Alert, CircularProgress } from '@mui/material';
-import { requestInviteWithCode } from '../auth/authApi';
+import { sendAdminInvite } from '../auth/authApi';
 import { useTranslation } from 'react-i18next';
 
 export function UserInviteComponent() { // FIX: Removed apiUrl prop
@@ -23,9 +23,7 @@ export function UserInviteComponent() { // FIX: Removed apiUrl prop
 
     setLoading(true);
     try {
-      // FIX: 2nd parameter is accessCode. For admin invites without code, we pass null.
-      // Previously, 'apiUrl' was passed here incorrectly.
-      const data = await requestInviteWithCode(inviteEmail, null);
+      const data = await sendAdminInvite(inviteEmail);
       
       setInviteEmail('');
       setMessage(data.detail || t('Auth.INVITE_SENT_SUCCESS', 'Invitation sent.'));