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

package/src/auth/AuthContext.jsx

@@ -1,158 +0,0 @@
-// src/auth/AuthContext.jsx
-import React, {
-  createContext,
-  useState,
-  useEffect,
-} from 'react';
-import { ensureCsrfToken } from './apiClient'; // <--- IMPORT ADDED
-import {
-  fetchAuthMethods,
-  fetchCurrentUser,
-  logoutSession,
-} from './authApi';
-import { ReauthModal } from './ReauthModal';
-
-export const AuthContext = createContext(null);
-
-const DEFAULT_AUTH_METHODS = {
-  password_login: true,
-  password_reset: true,
-  signup: true,
-  signup_modes: ['self_signup_access_code'],
-  turnstile_site_key: '',
-  password_change: true,
-  social_login: true,
-  social_providers: ['google', 'microsoft'],
-  passkey_login: true,
-  passkeys_manage: true,
-  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 }) => {
-  const [user, setUser] = useState(null);
-  const [authMethods, setAuthMethods] = useState(DEFAULT_AUTH_METHODS);
-  const [loading, setLoading] = useState(true);
-
-  const mapUserFromApi = (data) => {
-    const profile = data?.profile || {};
-    return {
-      ...data,
-      id: data?.id,
-      username: data?.username,
-      email: data?.email,
-      first_name: data?.first_name,
-      last_name: data?.last_name,
-      role: data?.role ?? profile?.role ?? null,
-      language: data?.language ?? profile?.language ?? 'en',
-      is_superuser: Boolean(data?.is_superuser),
-      is_new: Boolean(data?.is_new ?? profile?.is_new),
-      is_invited: Boolean(data?.is_invited ?? profile?.is_invited),
-      accepted_privacy_statement: Boolean(
-        data?.accepted_privacy_statement ?? profile?.accepted_privacy_statement
-      ),
-      accepted_convenience_cookies: Boolean(
-        data?.accepted_convenience_cookies ?? profile?.accepted_convenience_cookies
-      ),
-      is_support_agent: Boolean(data?.is_support_agent ?? profile?.is_support_agent),
-      support_contact_id: data?.support_contact_id ?? profile?.support_contact_id ?? null,
-      security_state: data?.security_state,
-      available_roles: data?.available_roles || [],
-      ui_permissions: data?.ui_permissions || {},
-      can_manage_support_agents: Boolean(data?.can_manage_support_agents),
-      can_manage: Boolean(data?.can_manage),
-      is_active: data?.is_active,
-      successful_login: Boolean(data?.successful_login ?? data?.last_login),
-      last_login: data?.last_login,
-      date_joined: data?.date_joined,
-    };
-  };
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const initAuth = async () => {
-      try {
-        // 1) Ensure CSRF cookie exists using the specific client
-        await ensureCsrfToken();
-
-        // 2) Both calls depend on CSRF, but not on each other. Await both settlements
-        // so loading stays true until the complete auth bootstrap has finished.
-        const [methodsResult, userResult] = await Promise.allSettled([
-          fetchAuthMethods(),
-          fetchCurrentUser(),
-        ]);
-
-        // Keep defaults when the public auth-methods request fails.
-        if (methodsResult.status === 'fulfilled') {
-          const methods = methodsResult.value;
-          if (isMounted && methods && typeof methods === 'object') {
-            setAuthMethods((prev) => ({ ...prev, ...methods }));
-          }
-        }
-
-        // Preserve the previous unauthenticated/error handling for current-user.
-        if (userResult.status === 'rejected') {
-          throw userResult.reason;
-        }
-
-        const data = userResult.value;
-        if (isMounted) {
-          setUser(mapUserFromApi(data));
-        }
-      } catch (err) {
-        // Silent failure on 401/403 is expected (user not logged in)
-        if (isMounted) setUser(null);
-      } finally {
-        if (isMounted) setLoading(false);
-      }
-    };
-
-    initAuth();
-
-    return () => { isMounted = false; };
-  }, []);
-
-  const login = (userData) => {
-    setUser((prev) => ({
-      ...prev,
-      ...mapUserFromApi(userData),
-    }));
-  };
-
-  const refreshUser = async () => {
-    const data = await fetchCurrentUser();
-    if (data) setUser(mapUserFromApi(data));
-  };
-
-  const logout = async () => {
-    try {
-      await logoutSession();
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error during logout:', error);
-    } finally {
-      setUser(null);
-    }
-  };
-
-  return (
-    <AuthContext.Provider
-      value={{
-        user,
-        authMethods,
-        loading,
-        login,
-        logout,
-        refreshUser,
-      }}
-    >
-      {children}
-      <ReauthModal />
-    </AuthContext.Provider>
-  );
-};

package/src/auth/ReauthModal.jsx

@@ -1,82 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Alert,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import apiClient from './apiClient';
-import { HEADLESS_BASE } from './authConfig';
-import { rejectReauth, resolveReauth, subscribe } from './reauth';
-
-export const REAUTH_MODAL_ALERT_SX = { mb: 2 };
-export const REAUTH_MODAL_TEXT_FIELD_SX = { mt: 1 };
-
-export function ReauthModal() {
-  const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
-  const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    return subscribe((active) => {
-      setOpen(active);
-      if (!active) {
-        setPassword('');
-        setError(null);
-        setLoading(false);
-      }
-    });
-  }, []);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-    try {
-      await apiClient.post(`${HEADLESS_BASE}/auth/reauthenticate`, { password });
-      resolveReauth();
-    } catch {
-      setError(t('Auth.REAUTH_FAILED'));
-      setLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    rejectReauth(new Error('cancelled'));
-  };
-
-  return (
-    <Dialog open={open} onClose={handleCancel} maxWidth="xs" fullWidth>
-      <form onSubmit={handleSubmit}>
-        <DialogTitle>{t('Auth.REAUTH_TITLE')}</DialogTitle>
-        <DialogContent>
-          {error && <Alert severity="error" sx={REAUTH_MODAL_ALERT_SX}>{error}</Alert>}
-          <TextField
-            autoFocus
-            fullWidth
-            type="password"
-            label={t('Auth.LOGIN_PASSWORD_LABEL')}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            disabled={loading}
-            sx={REAUTH_MODAL_TEXT_FIELD_SX}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleCancel} disabled={loading}>
-            {t('Auth.MFA_TOTP_CANCEL_BUTTON')}
-          </Button>
-          <Button type="submit" variant="contained" disabled={loading || !password}>
-            {loading ? t('Auth.MFA_TOTP_VERIFY_BUTTON_LOADING') : t('Auth.MFA_VERIFY')}
-          </Button>
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-}

package/src/auth/UserMenu.jsx

@@ -1,121 +0,0 @@
-import { useContext, useState } from 'react';
-
-import {
-  Avatar,
-  Box,
-  Divider,
-  IconButton,
-  Menu,
-  MenuItem,
-  Typography,
-} from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
-
-import { AuthContext } from './AuthContext';
-import { calculateContrastRatio } from '../theme';
-
-function getInitials(user) {
-  if (!user) return '';
-  const first = user.first_name?.trim()?.[0];
-  const last = user.last_name?.trim()?.[0];
-  if (first || last) return `${first || ''}${last || ''}`.toUpperCase();
-  return (user.username?.trim()?.[0] || '').toUpperCase();
-}
-
-function getDisplayName(user) {
-  if (!user) return '';
-  const name = `${user.first_name || ''} ${user.last_name || ''}`.trim();
-  return name || user.username || '';
-}
-
-export function UserMenu({ resolveLink, items = [], profileLink = '/account', avatarSrc }) {
-  const { t } = useTranslation();
-  const { user, logout } = useContext(AuthContext);
-  const theme = useTheme();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const avatarBackground = theme.palette.primary.main;
-  // True white/black (theme.palette.common.*, always present on any MUI theme,
-  // never a source-level literal), not background.paper/ink.primary: contrast
-  // against true white and true black multiplies to a constant 21 regardless
-  // of the background's luminance, so max(contrastWhite, contrastBlack) is
-  // mathematically guaranteed to be >= sqrt(21) =~ 4.58 for ANY primary.main a
-  // consumer sets -- a near-black token like ink.primary (#212529, luminance
-  // ~0.018, not 0) does not carry that guarantee and left a real gap for a
-  // medium-luminance primary (caught by ui_reviewer, neither required test
-  // exercised the fallback branch that gap lived in).
-  const avatarText = calculateContrastRatio(theme.palette.common.white, avatarBackground) >= 4.5
-    ? theme.palette.common.white
-    : theme.palette.common.black;
-
-  const handleClose = () => setAnchorEl(null);
-
-  const handleProfile = () => {
-    handleClose();
-    resolveLink?.(profileLink);
-  };
-
-  const handleLogout = () => {
-    handleClose();
-    logout();
-  };
-
-  const handleItemSelect = (item) => {
-    handleClose();
-    item.onSelect?.();
-  };
-
-  return (
-    <>
-      <IconButton
-        aria-label={t('UserMenu.TITLE')}
-        color="inherit"
-        onClick={(event) => setAnchorEl(event.currentTarget)}
-      >
-        <Avatar
-          src={avatarSrc}
-          sx={{
-            width: 32,
-            height: 32,
-            fontSize: '0.8rem',
-            bgcolor: avatarBackground,
-            color: avatarText,
-          }}
-        >
-          {avatarSrc ? null : getInitials(user)}
-        </Avatar>
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-        onClose={handleClose}
-        open={open}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-      >
-        <Box sx={{ minWidth: 240, px: 2, py: 1 }}>
-          <Typography variant="subtitle1" noWrap>{getDisplayName(user)}</Typography>
-          {/* A user with no first/last name falls back to username as the
-              display name above — some hosts' usernames are the email
-              address itself, which would otherwise repeat the same text
-              on both lines. */}
-          {user?.email && user.email !== getDisplayName(user) && (
-            <Typography variant="body2" color="text.secondary" noWrap>{user.email}</Typography>
-          )}
-        </Box>
-        <Divider />
-        <MenuItem onClick={handleProfile}>{t('UserMenu.PROFILE')}</MenuItem>
-        {items.length > 0 && <Divider />}
-        {items.map((item) => (
-          <MenuItem key={item.id} onClick={() => handleItemSelect(item)}>
-            {item.label}
-          </MenuItem>
-        ))}
-        <Divider />
-        <MenuItem onClick={handleLogout}>{t('UserMenu.LOGOUT')}</MenuItem>
-      </Menu>
-    </>
-  );
-}
-
-export default UserMenu;

package/src/auth/apiClient.jsx

@@ -1,232 +0,0 @@
-import axios from "axios";
-import i18next from "i18next";
-import { CSRF_URL } from "./authConfig";
-import { requestReauth } from "./reauth";
-
-const apiClient = axios.create({
-  withCredentials: true,
-  xsrfCookieName: "csrftoken",
-  xsrfHeaderName: "X-CSRFToken",
-});
-
-apiClient.interceptors.request.use((config) => {
-  const language = i18next?.isInitialized ? i18next.language : null;
-  if (language) {
-    config.headers = { ...config.headers, 'Accept-Language': language };
-  }
-  return config;
-});
-
-let redirectingToLogin = false;
-
-function isBrowser() {
-  return typeof window !== "undefined";
-}
-
-// Routen, die OHNE Login funktionieren müssen. Library-eigene Pfade sind eingefroren
-// und können nicht entfernt werden — sonst würde z. B. `removePublicPath("/login")`
-// auf der Login-Page selbst einen Redirect-Loop auslösen.
-const BUILTIN_PUBLIC_PATHS = Object.freeze([
-  "/login",
-  "/signup",
-  "/reset-request-password",
-  "/invite",                 // /invite/:uid/:token
-  "/reset",                  // /reset/:uid/:token
-  "/welcome",
-]);
-
-const CONSUMER_PUBLIC_PATHS = new Set();
-
-/**
- * Register an additional public path so a 401 on that route does not auto-redirect
- * to `/login`. Typical use: a public landing on `/` in an otherwise authenticated app.
- *
- * Accepts a `string` (matched like the builtins: exact for "/", prefix otherwise) or
- * a `RegExp` (AUTH-5) for consumers whose public area includes a dynamic segment —
- * e.g. `/<slug>`, `/<slug>/team` — that no finite set of string prefixes can describe.
- *
- * A `RegExp` is tested via `.test()` against `window.location.pathname` ONLY — never
- * against the query string or fragment. Anchor it (`^…$`): this library does not add
- * anchors for you, and an unanchored pattern like `/team` also matches `/admin/team`,
- * silently suppressing the redirect somewhere it's still needed. That failure is
- * invisible until someone opens the over-matched page anonymously and lands on a
- * blank error instead of `/login` — so test the non-matching direction too, not just
- * the intended match.
- *
- * MUST be called before the AuthProvider mounts (i.e. before `ReactDOM.render`).
- * Calling it later won't help the bootstrap probe which fires on AuthProvider mount.
- */
-export function addPublicPath(path) {
-  if (typeof path === "string" && path) {
-    CONSUMER_PUBLIC_PATHS.add(path);
-  } else if (path instanceof RegExp) {
-    CONSUMER_PUBLIC_PATHS.add(path);
-  }
-}
-
-/**
- * Remove a consumer-added public path. Library-internal paths are protected.
- *
- * For a `RegExp` entry, removal is by object identity (`Set.delete` uses SameValueZero
- * equality) — pass the exact same `RegExp` instance `addPublicPath` was given, not a
- * new literal that merely looks the same. Two `/^\/team$/` literals are not equal.
- */
-export function removePublicPath(path) {
-  CONSUMER_PUBLIC_PATHS.delete(path);
-}
-
-function isPublicSitePath(pathname) {
-  return pathname === "/sites" || pathname.startsWith("/sites/");
-}
-
-// Match rule: a RegExp entry is tested against pathname only (AUTH-5). A string entry
-// of exactly "/" requires strict equality (avoids matching every path with
-// startsWith); other string entries keep the looser prefix match so dynamic routes
-// like /invite/:uid/:token still work.
-function matchesPublicPath(pathname, entry) {
-  if (entry instanceof RegExp) {
-    // `g`/`y` flags make `.test()` stateful (`lastIndex` advances on match), which would
-    // make the same pathname alternate matched/unmatched across calls to this
-    // long-lived, module-scoped RegExp — a redirect that only fires every other time.
-    // Reset before every test so a consumer's flags can't leak state across calls.
-    entry.lastIndex = 0;
-    return entry.test(pathname);
-  }
-  if (entry === "/") return pathname === "/";
-  return pathname.startsWith(entry);
-}
-
-function redirectToLoginOnce() {
-  if (!isBrowser()) return;
-
-  const currentPath = window.location.pathname;
-
-  const isPublicPage =
-    isPublicSitePath(currentPath) ||
-    BUILTIN_PUBLIC_PATHS.some((path) => matchesPublicPath(currentPath, path)) ||
-    Array.from(CONSUMER_PUBLIC_PATHS).some((path) => matchesPublicPath(currentPath, path));
-
-  // Wenn ja: NICHT weiterleiten. Der 401 Fehler wird an die Komponente durchgereicht.
-  if (isPublicPage) return;
-
-  if (redirectingToLogin) return;
-  
-  redirectingToLogin = true;
-  
-  // Wir speichern die aktuelle Seite, um nach dem Login zurückzukehren
-  // (außer wir sind schon auf Login)
-  if (!currentPath.startsWith("/login")) {
-      // Optional: ?next=... Logik
-      // window.location.assign(`/login?next=${encodeURIComponent(currentPath)}`);
-      window.location.assign("/login");
-  } else {
-      window.location.assign("/login");
-  }
-}
-
-function extractAuthSignal(data) {
-  if (!data) {
-    return { code: null, i18nKey: null };
-  }
-
-  if (typeof data === "string") {
-    try {
-      const parsed = JSON.parse(data);
-      return extractAuthSignal(parsed);
-    } catch {
-      return { code: null, i18nKey: null };
-    }
-  }
-
-  if (typeof data !== "object") {
-    return { code: null, i18nKey: null };
-  }
-
-  if (typeof data.code === "string" || typeof data.i18nKey === "string") {
-    return {
-      code: typeof data.code === "string" ? data.code : null,
-      i18nKey: typeof data.i18nKey === "string" ? data.i18nKey : null,
-    };
-  }
-
-  if (Array.isArray(data.errors) && data.errors.length > 0) {
-    const first = data.errors[0] || {};
-    return {
-      code: typeof first.code === "string" ? first.code : null,
-      i18nKey: typeof first.i18nKey === "string" ? first.i18nKey : null,
-    };
-  }
-
-  if (data.detail && typeof data.detail === "object") {
-    return {
-      code: typeof data.detail.code === "string" ? data.detail.code : null,
-      i18nKey: typeof data.detail.i18nKey === "string" ? data.detail.i18nKey : null,
-    };
-  }
-
-  return { code: null, i18nKey: null };
-}
-
-apiClient.interceptors.response.use(
-  (response) => response,
-  async (error) => {
-    const status = error?.response?.status ?? null;
-    const data = error?.response?.data ?? {};
-    const { code, i18nKey } = extractAuthSignal(data);
-
-    const isAuthStatus = status === 401 || status === 403;
-    const isNotAuthenticated =
-      code === "not_authenticated" || i18nKey === "auth.not_authenticated";
-
-    // Reauthentication gate: allauth returns 401 + flows[{id:"reauthenticate"}]
-    // when the session is stale before a sensitive operation (e.g. adding a passkey).
-    // Show the password-confirm modal, wait for it to complete, then retry once.
-    const flows = data?.data?.flows ?? data?.flows ?? [];
-    const needsReauth =
-      status === 401 &&
-      Array.isArray(flows) &&
-      flows.some((f) => f.id === "reauthenticate");
-
-    if (needsReauth && !error.config?._reauthRetried) {
-      try {
-        await requestReauth();
-        return apiClient({ ...error.config, _reauthRetried: true });
-      } catch {
-        return Promise.reject(error);
-      }
-    }
-
-    // Per-request opt-out: bootstrap probes (e.g. fetchCurrentUser on app start)
-    // expect to handle 401 silently and must not trigger a redirect-on-mount.
-    // Carried as an axios config property, so it never travels to the backend
-    // (would otherwise trigger a CORS preflight on cross-origin requests).
-    const skipRedirect = error?.config?.skipAuthRedirect === true;
-
-    if (isAuthStatus && isNotAuthenticated && !skipRedirect) {
-      redirectToLoginOnce();
-    }
-    return Promise.reject(error);
-  }
-);
-
-function getCookie(name) {
-  if (!isBrowser() || !document.cookie) return null;
-  const xsrfCookies = document.cookie.split(';')
-    .map(c => c.trim())
-    .filter(c => c.startsWith(name + '='));
-  if (xsrfCookies.length === 0) return null;
-  return decodeURIComponent(xsrfCookies[0].split('=')[1]);
-}
-
-export async function ensureCsrfToken() {
-  if (getCookie("csrftoken")) {
-      return;
-  }
-  try {
-    await apiClient.get(CSRF_URL);
-  } catch (err) {
-    console.warn("CSRF Initialization failed", err);
-  }
-}
-
-export default apiClient;