@micha.bigler/ui-core-micha 2.1.17 → 2.1.18

package/dist/auth/AuthContext.js

@@ -2,10 +2,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // src/auth/AuthContext.jsx
 import React, { createContext, useState, useEffect, } from 'react';
 import { ensureCsrfToken } from './apiClient'; // <--- IMPORT ADDED
-import { fetchCurrentUser, logoutSession, } from './authApi';
+import { fetchAuthMethods, fetchCurrentUser, logoutSession, } from './authApi';
 export const AuthContext = createContext(null);
+const DEFAULT_AUTH_METHODS = {
+    password_login: true,
+    password_reset: true,
+    signup: true,
+    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,
+};
 export const AuthProvider = ({ children }) => {
     const [user, setUser] = useState(null);
+    const [authMethods, setAuthMethods] = useState(DEFAULT_AUTH_METHODS);
     const [loading, setLoading] = useState(true);
     const mapUserFromApi = (data) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -18,7 +32,17 @@ export const AuthProvider = ({ children }) => {
             try {
                 // 1) Ensure CSRF cookie exists using the specific client
                 await ensureCsrfToken();
-                // 2) Load user
+                // 2) Load auth methods (public)
+                try {
+                    const methods = await fetchAuthMethods();
+                    if (isMounted && methods && typeof methods === 'object') {
+                        setAuthMethods((prev) => (Object.assign(Object.assign({}, prev), methods)));
+                    }
+                }
+                catch (_a) {
+                    // Keep defaults; login UI remains usable.
+                }
+                // 3) Load user
                 const data = await fetchCurrentUser();
                 if (isMounted) {
                     setUser(mapUserFromApi(data));
@@ -54,6 +78,7 @@ export const AuthProvider = ({ children }) => {
     };
     return (_jsx(AuthContext.Provider, { value: {
             user,
+            authMethods,
             loading,
             login,
             logout,

package/dist/auth/authApi.js

@@ -15,6 +15,10 @@ export async function fetchCurrentUser() {
     const res = await apiClient.get(`${USERS_BASE}/current/`);
     return res.data;
 }
+export async function fetchAuthMethods() {
+    const res = await apiClient.get('/api/auth-methods/');
+    return res.data || {};
+}
 export async function updateUserProfile(data) {
     try {
         const res = await apiClient.patch(`${USERS_BASE}/current/`, data);

package/dist/components/AccessCodeManager.js

@@ -8,6 +8,12 @@ import { useTranslation } from 'react-i18next';
 import { fetchAccessCodes, createAccessCode, deleteAccessCode, } from '../auth/authApi';
 export function AccessCodeManager() {
     const { t } = useTranslation();
+    const actionButtonSx = {
+        minWidth: 120,
+        height: 40,
+        textTransform: 'none',
+        whiteSpace: 'nowrap',
+    };
     const [codes, setCodes] = useState([]);
     const [loading, setLoading] = useState(true);
     const [submitting, setSubmitting] = useState(false);
@@ -90,7 +96,7 @@ export function AccessCodeManager() {
     if (loading) {
         return (_jsx(Box, { sx: { py: 3, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, {}) }));
     }
-    return (_jsxs(Box, { children: [errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey) })), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_ACTIVE') }), codes.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Auth.ACCESS_CODE_NONE') })) : (_jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 1, children: codes.map((code) => (_jsx(Chip, { label: code.code, onDelete: () => handleDelete(code.id), deleteIcon: _jsx(CloseIcon, {}) }, code.id))) }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_GENERATE') }), _jsxs(Box, { sx: { maxWidth: 360 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: t('Auth.ACCESS_CODE_LENGTH_LABEL', { length }) }), _jsx(Slider, { min: 6, max: 32, step: 1, value: length, onChange: (_, val) => setLength(val), valueLabelDisplay: "auto", disabled: submitting })] }), _jsx(Button, { variant: "contained", sx: { mt: 1 }, onClick: handleGenerateClick, disabled: submitting, children: submitting
+    return (_jsxs(Box, { children: [errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey) })), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_ACTIVE') }), codes.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Auth.ACCESS_CODE_NONE') })) : (_jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 1, children: codes.map((code) => (_jsx(Chip, { label: code.code, onDelete: () => handleDelete(code.id), deleteIcon: _jsx(CloseIcon, {}) }, code.id))) }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_GENERATE') }), _jsxs(Box, { sx: { maxWidth: 360 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: t('Auth.ACCESS_CODE_LENGTH_LABEL', { length }) }), _jsx(Slider, { min: 6, max: 32, step: 1, value: length, onChange: (_, val) => setLength(val), valueLabelDisplay: "auto", disabled: submitting })] }), _jsx(Button, { variant: "contained", size: "small", sx: Object.assign(Object.assign({}, actionButtonSx), { mt: 1 }), onClick: handleGenerateClick, disabled: submitting, children: submitting
                             ? t('Auth.SAVE_BUTTON_LOADING')
-                            : t('Auth.ACCESS_CODE_GENERATE_BUTTON') })] }), _jsxs(Box, { sx: { mb: 2, maxWidth: 360 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_MANUAL') }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), fullWidth: true, value: manualCode, onChange: (e) => setManualCode(e.target.value), disabled: submitting }), _jsx(Button, { variant: "outlined", onClick: handleAddManual, disabled: submitting, children: t('Auth.ACCESS_CODE_ADD_BUTTON') })] })] })] }));
+                            : t('Auth.ACCESS_CODE_GENERATE_BUTTON') })] }), _jsxs(Box, { sx: { mb: 2, maxWidth: 360 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_MANUAL') }), _jsxs(Box, { sx: { display: 'flex', gap: 1, alignItems: 'center' }, children: [_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), fullWidth: true, size: "small", value: manualCode, onChange: (e) => setManualCode(e.target.value), disabled: submitting }), _jsx(Button, { variant: "contained", size: "small", onClick: handleAddManual, disabled: submitting, sx: actionButtonSx, children: t('Auth.ACCESS_CODE_ADD_BUTTON') })] })] })] }));
 }

package/dist/components/BulkInviteCsvTab.js

@@ -26,6 +26,12 @@ function parseEmailsFromCsv(text) {
 }
 export function BulkInviteCsvTab({ inviteFn = (email) => requestInviteWithCode(email, null), onCompleted, }) {
     const { t } = useTranslation();
+    const actionButtonSx = {
+        minWidth: 120,
+        height: 40,
+        textTransform: 'none',
+        whiteSpace: 'nowrap',
+    };
     const [emails, setEmails] = useState([]);
     const [results, setResults] = useState({});
     const [busy, setBusy] = useState(false);
@@ -89,7 +95,7 @@ export function BulkInviteCsvTab({ inviteFn = (email) => requestInviteWithCode(e
         if (onCompleted)
             onCompleted(nextResults);
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Account.BULK_INVITE_TITLE', 'Bulk Invite via CSV') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.BULK_INVITE_HINT', 'Upload a CSV file containing email addresses. Header "email" is supported.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', mb: 2, flexWrap: 'wrap' }, children: [_jsxs(Button, { variant: "outlined", component: "label", disabled: busy, children: [t('Account.BULK_INVITE_UPLOAD', 'Upload CSV'), _jsx("input", { type: "file", accept: ".csv,text/csv", hidden: true, onChange: handleFile })] }), _jsx(Button, { variant: "contained", onClick: handleInviteAll, disabled: busy || emails.length === 0, children: t('Account.BULK_INVITE_SEND', 'Send Invites') }), _jsx(Typography, { variant: "body2", children: t('Account.BULK_INVITE_COUNT', '{{count}} emails loaded', { count: emails.length }) })] }), busy && (_jsx(Box, { sx: { mb: 2 }, children: _jsx(LinearProgress, { variant: "determinate", value: progress }) })), emails.length > 0 && (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Common.STATUS', 'Status') }), _jsx(TableCell, { children: t('Common.DETAILS', 'Details') })] }) }), _jsx(TableBody, { children: emails.map((email) => {
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Account.BULK_INVITE_TITLE', 'Bulk Invite via CSV') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.BULK_INVITE_HINT', 'Upload a CSV file containing email addresses. Header "email" is supported.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', mb: 2, flexWrap: 'wrap' }, children: [_jsxs(Button, { variant: "outlined", size: "small", component: "label", disabled: busy, sx: actionButtonSx, children: [t('Account.BULK_INVITE_UPLOAD', 'Upload CSV'), _jsx("input", { type: "file", accept: ".csv,text/csv", hidden: true, onChange: handleFile })] }), _jsx(Button, { variant: "contained", size: "small", sx: actionButtonSx, onClick: handleInviteAll, disabled: busy || emails.length === 0, children: t('Account.BULK_INVITE_SEND', 'Send Invites') }), _jsx(Typography, { variant: "body2", children: t('Account.BULK_INVITE_COUNT', '{{count}} emails loaded', { count: emails.length }) })] }), busy && (_jsx(Box, { sx: { mb: 2 }, children: _jsx(LinearProgress, { variant: "determinate", value: progress }) })), emails.length > 0 && (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Common.STATUS', 'Status') }), _jsx(TableCell, { children: t('Common.DETAILS', 'Details') })] }) }), _jsx(TableBody, { children: emails.map((email) => {
                                 const row = results[email];
                                 return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: email }), _jsx(TableCell, { children: row ? (row.ok ? t('Common.SUCCESS', 'Success') : t('Common.ERROR', 'Error')) : '-' }), _jsx(TableCell, { children: (row === null || row === void 0 ? void 0 : row.message) || '-' })] }, email));
                             }) })] }) })), done > 0 && (_jsxs(Typography, { variant: "body2", sx: { mt: 2 }, children: [t('Account.BULK_INVITE_PROGRESS', '{{done}} / {{total}} processed', { done, total }), ' - ', t('Account.BULK_INVITE_SUCCESS_COUNT', '{{count}} successful', { count: successCount })] }))] }));

package/dist/components/LoginForm.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { Box, TextField, Button, Typography, Divider, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { SocialLoginButtons } from './SocialLoginButtons';
-export function LoginForm({ onSubmit, onForgotPassword, onSocialLogin, onPasskeyLogin, onSignUp, error, // bereits übersetzter Text oder t(errorKey) aus dem Parent
+export function LoginForm({ onSubmit, onForgotPassword, onSocialLogin, socialProviders, onPasskeyLogin, onSignUp, error, // bereits übersetzter Text oder t(errorKey) aus dem Parent
 disabled = false, initialIdentifier = '', }) {
     const { t } = useTranslation();
     const [identifier, setIdentifier] = useState(initialIdentifier);
@@ -21,6 +21,6 @@ disabled = false, initialIdentifier = '', }) {
     const supportsPasskey = !!onPasskeyLogin &&
         typeof window !== 'undefined' &&
         !!window.PublicKeyCredential;
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), supportsPasskey && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", fullWidth: true, type: "button", onClick: onPasskeyLogin, disabled: disabled, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON') }), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') })] })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: t('Auth.LOGIN_PASSWORD_LABEL'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: disabled, children: t('Auth.PAGE_LOGIN_TITLE') })] }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE') }), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: t('Auth.LOGIN_SIGNUP_BUTTON') })), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON') })] })] })] }));
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), supportsPasskey && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", fullWidth: true, type: "button", onClick: onPasskeyLogin, disabled: disabled, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON') }), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') })] })), onSubmit && (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: t('Auth.LOGIN_PASSWORD_LABEL'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: disabled, children: t('Auth.PAGE_LOGIN_TITLE') })] })), onSocialLogin && (_jsxs(Box, { children: [_jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin, providers: socialProviders })] })), (onSignUp || onForgotPassword) && (_jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE') }), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: t('Auth.LOGIN_SIGNUP_BUTTON') })), onForgotPassword && (_jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON') }))] })] }))] }));
 }
 ;

package/dist/components/SecurityComponent.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // src/auth/components/SecurityComponent.jsx
-import React, { useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { Box, Typography, Divider, Alert, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { PasswordChangeForm } from './PasswordChangeForm';
@@ -9,17 +9,34 @@ import { PasskeysComponent } from './PasskeysComponent';
 import { MFAComponent } from './MFAComponent';
 import { changePassword } from '../auth/authApi';
 import { startSocialLogin } from '../utils/authService';
-export function SecurityComponent({ fromRecovery = false, fromWeakLogin = false, // optional: wenn du später weak-login-Redirect nutzt
- }) {
+import { AuthContext } from '../auth/AuthContext';
+export function SecurityComponent({ fromRecovery = false, fromWeakLogin = false, }) {
     const { t } = useTranslation();
+    const { authMethods } = useContext(AuthContext);
     const [messageKey, setMessageKey] = useState(null);
     const [errorKey, setErrorKey] = useState(null);
+    const socialProviders = Array.isArray(authMethods === null || authMethods === void 0 ? void 0 : authMethods.social_providers)
+        ? authMethods.social_providers
+        : [];
+    const canChangePassword = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.password_change);
+    const socialLoginEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.social_login) && socialProviders.length > 0;
+    const passkeysEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.passkeys_manage);
+    const mfaEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.mfa_enabled);
+    const sectionOrder = useMemo(() => [
+        canChangePassword ? 'password' : null,
+        socialLoginEnabled ? 'social' : null,
+        passkeysEnabled ? 'passkeys' : null,
+        mfaEnabled ? 'mfa' : null,
+    ].filter(Boolean), [canChangePassword, socialLoginEnabled, passkeysEnabled, mfaEnabled]);
+    const needsDividerAfter = (section) => {
+        const idx = sectionOrder.indexOf(section);
+        return idx !== -1 && idx < sectionOrder.length - 1;
+    };
     const handleSocialClick = async (provider) => {
         setMessageKey(null);
         setErrorKey(null);
         try {
             await startSocialLogin(provider);
-            // Redirect läuft über den Provider-Flow, hier kein extra Text nötig
         }
         catch (err) {
             setErrorKey(err.code || 'Auth.SOCIAL_LOGIN_FAILED');
@@ -36,6 +53,6 @@ export function SecurityComponent({ fromRecovery = false, fromWeakLogin = false,
             setErrorKey(err.code || 'Auth.PASSWORD_CHANGE_FAILED');
         }
     };
-    return (_jsxs(Box, { children: [fromRecovery && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('Security.RECOVERY_LOGIN_WARNING') })), fromWeakLogin && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('Security.WEAK_LOGIN_WARNING') })), messageKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(messageKey) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.LOGIN_PASSWORD_LABEL') }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Security.SOCIAL_SECTION_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: t('Security.SOCIAL_SECTION_DESCRIPTION') }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick }), _jsx(Divider, { sx: { my: 3 } }), _jsx(PasskeysComponent, {}), _jsx(Divider, { sx: { my: 3 } }), _jsx(MFAComponent, {})] }));
+    return (_jsxs(Box, { children: [fromRecovery && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('Security.RECOVERY_LOGIN_WARNING') })), fromWeakLogin && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('Security.WEAK_LOGIN_WARNING') })), messageKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(messageKey) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), canChangePassword && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.LOGIN_PASSWORD_LABEL') }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), needsDividerAfter('password') && _jsx(Divider, { sx: { my: 3 } })] })), socialLoginEnabled && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Security.SOCIAL_SECTION_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: t('Security.SOCIAL_SECTION_DESCRIPTION') }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick, providers: socialProviders }), needsDividerAfter('social') && _jsx(Divider, { sx: { my: 3 } })] })), passkeysEnabled && (_jsxs(_Fragment, { children: [_jsx(PasskeysComponent, {}), needsDividerAfter('passkeys') && _jsx(Divider, { sx: { my: 3 } })] })), mfaEnabled && _jsx(MFAComponent, {})] }));
 }
 ;

package/dist/components/SocialLoginButtons.js

@@ -8,14 +8,17 @@ import { SOCIAL_PROVIDERS } from '../auth/authConfig';
  * Renders buttons for social login providers.
  * The caller passes a handler that receives the provider key.
  */
-export function SocialLoginButtons({ onProviderClick }) {
+export function SocialLoginButtons({ onProviderClick, providers }) {
     const { t } = useTranslation();
     const handleClick = (provider) => {
         if (onProviderClick) {
             onProviderClick(provider);
         }
     };
-    return (_jsxs(Stack, { spacing: 1.5, children: [_jsx(Button, { variant: "outlined", fullWidth: true, onClick: () => handleClick(SOCIAL_PROVIDERS.google), startIcon: _jsx(Box, { sx: {
+    const activeProviders = Array.isArray(providers) && providers.length > 0
+        ? providers
+        : [SOCIAL_PROVIDERS.google, SOCIAL_PROVIDERS.microsoft];
+    return (_jsxs(Stack, { spacing: 1.5, children: [activeProviders.includes(SOCIAL_PROVIDERS.google) && (_jsx(Button, { variant: "outlined", fullWidth: true, onClick: () => handleClick(SOCIAL_PROVIDERS.google), startIcon: _jsx(Box, { sx: {
                         width: 24,
                         height: 24,
                         borderRadius: '50%',
@@ -25,13 +28,13 @@ export function SocialLoginButtons({ onProviderClick }) {
                         justifyContent: 'center',
                         fontWeight: 700,
                         fontSize: 14,
-                    }, children: "G" }), children: t('Auth.LOGIN_SOCIAL_GOOGLE') }), _jsx(Button, { variant: "outlined", fullWidth: true, onClick: () => handleClick(SOCIAL_PROVIDERS.microsoft), startIcon: _jsxs(Box, { sx: {
+                    }, children: "G" }), children: t('Auth.LOGIN_SOCIAL_GOOGLE') })), activeProviders.includes(SOCIAL_PROVIDERS.microsoft) && (_jsx(Button, { variant: "outlined", fullWidth: true, onClick: () => handleClick(SOCIAL_PROVIDERS.microsoft), startIcon: _jsxs(Box, { sx: {
                         width: 24,
                         height: 24,
                         display: 'grid',
                         gridTemplateColumns: '1fr 1fr',
                         gridTemplateRows: '1fr 1fr',
                         gap: '1px',
-                    }, children: [_jsx(Box, { sx: { bgcolor: 'primary.main', opacity: 0.9 } }), _jsx(Box, { sx: { bgcolor: 'primary.main', opacity: 0.7 } }), _jsx(Box, { sx: { bgcolor: 'primary.main', opacity: 0.7 } }), _jsx(Box, { sx: { bgcolor: 'primary.main', opacity: 0.9 } })] }), children: t('Auth.LOGIN_SOCIAL_MICROSOFT') })] }));
+                    }, children: [_jsx(Box, { sx: { bgcolor: 'primary.main', opacity: 0.9 } }), _jsx(Box, { sx: { bgcolor: 'primary.main', opacity: 0.7 } }), _jsx(Box, { sx: { bgcolor: 'primary.main', opacity: 0.7 } }), _jsx(Box, { sx: { bgcolor: 'primary.main', opacity: 0.9 } })] }), children: t('Auth.LOGIN_SOCIAL_MICROSOFT') }))] }));
 }
 ;

package/dist/components/UserInviteComponent.js

@@ -9,6 +9,12 @@ export function UserInviteComponent() {
     const [message, setMessage] = useState('');
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
+    const actionButtonSx = {
+        minWidth: 120,
+        height: 40,
+        textTransform: 'none',
+        whiteSpace: 'nowrap',
+    };
     const inviteUser = async () => {
         setMessage('');
         setError('');
@@ -32,8 +38,8 @@ export function UserInviteComponent() {
             setLoading(false);
         }
     };
-    return (_jsxs(Box, { sx: { maxWidth: 600 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.INVITE_TITLE', 'Invite a new user') }), message && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-start' }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL', 'Email address'), type: "email", variant: "outlined", fullWidth: true, size: "small", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), disabled: loading, onKeyPress: (e) => {
+    return (_jsxs(Box, { sx: { maxWidth: 600 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.INVITE_TITLE', 'Invite a new user') }), message && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL', 'Email address'), type: "email", variant: "outlined", fullWidth: true, size: "small", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), disabled: loading, onKeyPress: (e) => {
                             if (e.key === 'Enter')
                                 inviteUser();
-                        } }), _jsx(Button, { variant: "contained", onClick: inviteUser, disabled: loading || !inviteEmail, sx: { minWidth: 100, height: 40 }, children: loading ? _jsx(CircularProgress, { size: 24, color: "inherit" }) : t('Auth.INVITE_BUTTON', 'Invite') })] })] }));
+                        } }), _jsx(Button, { variant: "contained", size: "small", onClick: inviteUser, disabled: loading || !inviteEmail, sx: actionButtonSx, children: loading ? _jsx(CircularProgress, { size: 24, color: "inherit" }) : t('Auth.INVITE_BUTTON', 'Invite') })] })] }));
 }

package/dist/pages/AccountPage.js

@@ -4,13 +4,8 @@ import { Helmet } from 'react-helmet';
 import { useSearchParams } from 'react-router-dom';
 import { Tabs, Tab, Box, Typography, Alert, CircularProgress, Paper, Stack, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-// Internal Library Components
-// Stellen Sie sicher, dass diese Pfade korrekt auf Ihre Library zeigen!
-// Da Sie '@micha.bigler/ui-core-micha' nutzen, sollten die Imports ggf. so aussehen:
-import { AuthContext,
-// ... andere Komponenten aus der Lib importieren, falls sie dort exportiert sind
-// Wenn sie lokal sind, lassen Sie die relativen Pfade.
- } from '@micha.bigler/ui-core-micha';
+// Internal context
+import { AuthContext } from '../auth/AuthContext';
 // Falls die Komponenten noch lokal sind:
 import { WidePage } from '../layout/PageLayout';
 import { ProfileComponent } from '../components/ProfileComponent';
@@ -92,5 +87,5 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const activeExtraTab = builtInTabValues.has(safeTab)
         ? null
         : extraTabs.find((tab) => tab.value === safeTab);
-    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [(isSuperUser || perms.can_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(UserInviteComponent, {}) })), (isSuperUser || perms.can_invite) && showBulkInviteCsvTab && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), (isSuperUser || perms.can_manage_access_codes) && (_jsxs(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] }));
+    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [(isSuperUser || perms.can_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(UserInviteComponent, {}) })), (isSuperUser || perms.can_manage_access_codes) && (_jsxs(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), (isSuperUser || perms.can_invite) && showBulkInviteCsvTab && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] }));
 }

package/dist/pages/LoginPage.js

@@ -16,7 +16,7 @@ import { MfaLoginComponent } from '../components/MfaLoginComponent';
 export function LoginPage() {
     const navigate = useNavigate();
     const location = useLocation();
-    const { login } = useContext(AuthContext);
+    const { login, authMethods } = useContext(AuthContext);
     const { t } = useTranslation();
     // State
     const [step, setStep] = useState('credentials'); // 'credentials' | 'mfa'
@@ -32,6 +32,12 @@ export function LoginPage() {
         : recoveryTokenRaw;
     // Backward-compatible fallback for legacy links using query parameters.
     const recoveryEmail = hashParams.get('email') || params.get('email') || '';
+    useEffect(() => {
+        const socialError = params.get('error') || params.get('social');
+        if (socialError) {
+            setErrorKey('Auth.SOCIAL_LOGIN_FAILED');
+        }
+    }, [location.search]);
     // --- Helper: Central Success Logic ---
     const handleLoginSuccess = (user) => {
         var _a;
@@ -113,6 +119,14 @@ export function LoginPage() {
         setMfaState(null);
         setErrorKey(null);
     };
+    const socialProviders = Array.isArray(authMethods === null || authMethods === void 0 ? void 0 : authMethods.social_providers)
+        ? authMethods.social_providers
+        : [];
+    const passwordLoginEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.password_login) || Boolean(recoveryToken);
+    const socialLoginEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.social_login) && socialProviders.length > 0;
+    const passkeyLoginEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.passkey_login);
+    const signupEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.signup);
+    const passwordResetEnabled = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.password_reset);
     // --- Render ---
-    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: handleSubmitCredentials, onForgotPassword: () => navigate('/reset-request-password'), onSocialLogin: (provider) => startSocialLogin(provider), onPasskeyLogin: handlePasskeyLoginInitial, onSignUp: () => navigate('/signup'), disabled: submitting, initialIdentifier: recoveryEmail })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
+    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: passwordLoginEnabled ? handleSubmitCredentials : null, onForgotPassword: passwordResetEnabled ? () => navigate('/reset-request-password') : null, onSocialLogin: socialLoginEnabled ? (provider) => startSocialLogin(provider) : null, socialProviders: socialProviders, onPasskeyLogin: passkeyLoginEnabled ? handlePasskeyLoginInitial : null, onSignUp: signupEnabled ? () => navigate('/signup') : null, disabled: submitting, initialIdentifier: recoveryEmail })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
 }

package/dist/utils/authService.js

@@ -101,9 +101,48 @@ export async function authenticateMfaWithPasskey() {
     const credentialJson = serializeCredential(assertion);
     return authenticateWithMFA({ credential: credentialJson });
 }
-export function startSocialLogin(provider) {
+function getCsrfTokenFromCookie() {
+    if (typeof document === 'undefined' || !document.cookie)
+        return null;
+    const match = document.cookie.match(/(?:^|; )csrftoken=([^;]+)/);
+    return match ? decodeURIComponent(match[1]) : null;
+}
+function submitSocialRedirectForm({ provider, callbackUrl, csrfToken }) {
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = `${HEADLESS_BASE}/auth/provider/redirect`;
+    form.style.display = 'none';
+    const fields = {
+        provider,
+        process: 'login',
+        callback_url: callbackUrl,
+        csrfmiddlewaretoken: csrfToken,
+    };
+    Object.entries(fields).forEach(([name, value]) => {
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = name;
+        input.value = String(value);
+        form.appendChild(input);
+    });
+    document.body.appendChild(form);
+    form.submit();
+}
+export async function startSocialLogin(provider) {
     if (typeof window === 'undefined') {
         throw normaliseApiError(new Error('Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'), 'Auth.SOCIAL_LOGIN_NOT_IN_BROWSER');
     }
-    window.location.href = `/accounts/${provider}/login/?process=login`;
+    try {
+        // Ensures csrftoken cookie exists before form POST.
+        await apiClient.get('/api/csrf/');
+    }
+    catch (_a) {
+        // Continue; token might already be present.
+    }
+    const csrfToken = getCsrfTokenFromCookie();
+    if (!csrfToken) {
+        throw normaliseApiError(new Error('Auth.SOCIAL_LOGIN_FAILED'), 'Auth.SOCIAL_LOGIN_FAILED');
+    }
+    const callbackUrl = `${window.location.origin}/login`;
+    submitSocialRedirectForm({ provider, callbackUrl, csrfToken });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,
@@ -24,3 +24,4 @@
     "react-i18next": "^16.3.5"
   }
 }
+

package/src/auth/AuthContext.jsx

@@ -6,14 +6,30 @@ import React, {
 } from 'react';
 import { ensureCsrfToken } from './apiClient'; // <--- IMPORT ADDED
 import {
+  fetchAuthMethods,
   fetchCurrentUser,
   logoutSession,
 } from './authApi';
 
 export const AuthContext = createContext(null);
 
+const DEFAULT_AUTH_METHODS = {
+  password_login: true,
+  password_reset: true,
+  signup: true,
+  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,
+};
+
 export const AuthProvider = ({ children }) => {
   const [user, setUser] = useState(null);
+  const [authMethods, setAuthMethods] = useState(DEFAULT_AUTH_METHODS);
   const [loading, setLoading] = useState(true);
 
   const mapUserFromApi = (data) => {
@@ -57,7 +73,17 @@ export const AuthProvider = ({ children }) => {
         // 1) Ensure CSRF cookie exists using the specific client
         await ensureCsrfToken();
 
-        // 2) Load user
+        // 2) Load auth methods (public)
+        try {
+          const methods = await fetchAuthMethods();
+          if (isMounted && methods && typeof methods === 'object') {
+            setAuthMethods((prev) => ({ ...prev, ...methods }));
+          }
+        } catch {
+          // Keep defaults; login UI remains usable.
+        }
+
+        // 3) Load user
         const data = await fetchCurrentUser();
         
         if (isMounted) {
@@ -98,6 +124,7 @@ export const AuthProvider = ({ children }) => {
     <AuthContext.Provider
       value={{
         user,
+        authMethods,
         loading,
         login,
         logout,

package/src/auth/authApi.jsx

@@ -18,6 +18,11 @@ export async function fetchCurrentUser() {
   return res.data;
 }
 
+export async function fetchAuthMethods() {
+  const res = await apiClient.get('/api/auth-methods/');
+  return res.data || {};
+}
+
 export async function updateUserProfile(data) {
   try {
     const res = await apiClient.patch(`${USERS_BASE}/current/`, data);

package/src/components/AccessCodeManager.jsx

@@ -23,6 +23,12 @@ import {
 
 export function AccessCodeManager() {
   const { t } = useTranslation();
+  const actionButtonSx = {
+    minWidth: 120,
+    height: 40,
+    textTransform: 'none',
+    whiteSpace: 'nowrap',
+  };
 
   const [codes, setCodes] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -176,7 +182,8 @@ export function AccessCodeManager() {
 
         <Button
           variant="contained"
-          sx={{ mt: 1 }}
+          size="small"
+          sx={{ ...actionButtonSx, mt: 1 }}
           onClick={handleGenerateClick}
           disabled={submitting}
         >
@@ -191,18 +198,21 @@ export function AccessCodeManager() {
         <Typography variant="subtitle1" gutterBottom>
           {t('Auth.ACCESS_CODE_SECTION_MANUAL')}
         </Typography>
-        <Box sx={{ display: 'flex', gap: 1 }}>
+        <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="outlined"
+            variant="contained"
+            size="small"
             onClick={handleAddManual}
             disabled={submitting}
+            sx={actionButtonSx}
           >
             {t('Auth.ACCESS_CODE_ADD_BUTTON')}
           </Button>

package/src/components/BulkInviteCsvTab.jsx

@@ -45,6 +45,12 @@ export function BulkInviteCsvTab({
   onCompleted,
 }) {
   const { t } = useTranslation();
+  const actionButtonSx = {
+    minWidth: 120,
+    height: 40,
+    textTransform: 'none',
+    whiteSpace: 'nowrap',
+  };
   const [emails, setEmails] = useState([]);
   const [results, setResults] = useState({});
   const [busy, setBusy] = useState(false);
@@ -132,11 +138,11 @@ export function BulkInviteCsvTab({
       {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
 
       <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 2, flexWrap: 'wrap' }}>
-        <Button variant="outlined" component="label" disabled={busy}>
+        <Button variant="outlined" size="small" component="label" disabled={busy} sx={actionButtonSx}>
           {t('Account.BULK_INVITE_UPLOAD', 'Upload CSV')}
           <input type="file" accept=".csv,text/csv" hidden onChange={handleFile} />
         </Button>
-        <Button variant="contained" onClick={handleInviteAll} disabled={busy || emails.length === 0}>
+        <Button variant="contained" size="small" sx={actionButtonSx} onClick={handleInviteAll} disabled={busy || emails.length === 0}>
           {t('Account.BULK_INVITE_SEND', 'Send Invites')}
         </Button>
         <Typography variant="body2">

package/src/components/LoginForm.jsx

@@ -13,6 +13,7 @@ export function LoginForm({
   onSubmit,
   onForgotPassword,
   onSocialLogin,
+  socialProviders,
   onPasskeyLogin,
   onSignUp,
   error,           // bereits übersetzter Text oder t(errorKey) aus dem Parent
@@ -68,52 +69,58 @@ export function LoginForm({
       )}
 
       {/* Sign in: E-Mail + Passwort */}
-      <Box
-        component="form"
-        onSubmit={handleSubmit}
-        sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-      >
-        <TextField
-          label={t('Auth.EMAIL_LABEL')}
-          type="email"
-          required
-          fullWidth
-          value={identifier}
-          onChange={(e) => setIdentifier(e.target.value)}
-          disabled={disabled}
-        />
+      {onSubmit && (
+        <Box
+          component="form"
+          onSubmit={handleSubmit}
+          sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+        >
+          <TextField
+            label={t('Auth.EMAIL_LABEL')}
+            type="email"
+            required
+            fullWidth
+            value={identifier}
+            onChange={(e) => setIdentifier(e.target.value)}
+            disabled={disabled}
+          />
 
-        <TextField
-          label={t('Auth.LOGIN_PASSWORD_LABEL')}
-          type="password"
-          required
-          fullWidth
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          disabled={disabled}
-        />
+          <TextField
+            label={t('Auth.LOGIN_PASSWORD_LABEL')}
+            type="password"
+            required
+            fullWidth
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            disabled={disabled}
+          />
 
-        <Button
-          type="submit"
-          variant="contained"
-          fullWidth
-          disabled={disabled}
-        >
-          {t('Auth.PAGE_LOGIN_TITLE')}
-        </Button>
-      </Box>
+          <Button
+            type="submit"
+            variant="contained"
+            fullWidth
+            disabled={disabled}
+          >
+            {t('Auth.PAGE_LOGIN_TITLE')}
+          </Button>
+        </Box>
+      )}
 
       {/* Other ways to sign in */}
-      {/*
-      <Box>
-        <Divider sx={{ my: 2 }}>
-          {t('Auth.LOGIN_OR')}
-        </Divider>
-        <SocialLoginButtons onProviderClick={onSocialLogin} />
-      </Box>
-        */}
+      {onSocialLogin && (
+        <Box>
+          <Divider sx={{ my: 2 }}>
+            {t('Auth.LOGIN_OR')}
+          </Divider>
+          <SocialLoginButtons
+            onProviderClick={onSocialLogin}
+            providers={socialProviders}
+          />
+        </Box>
+      )}
       {/* Account & Recovery */}
       
+      {(onSignUp || onForgotPassword) && (
       <Box>
         <Typography variant="subtitle2" sx={{ mb: 1 }}>
           {t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE')}
@@ -131,16 +138,19 @@ export function LoginForm({
             </Button>
           )}
 
-          <Button
-            type="button"
-            variant="outlined"
-            onClick={onForgotPassword}
-            disabled={disabled}
-          >
-            {t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON')}
-          </Button>
+          {onForgotPassword && (
+            <Button
+              type="button"
+              variant="outlined"
+              onClick={onForgotPassword}
+              disabled={disabled}
+            >
+              {t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON')}
+            </Button>
+          )}
         </Box>
       </Box>
+      )}
     </Box>
   );
 };

package/src/components/SecurityComponent.jsx

@@ -1,5 +1,5 @@
 // src/auth/components/SecurityComponent.jsx
-import React, { useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import {
   Box,
   Typography,
@@ -13,22 +13,46 @@ import { PasskeysComponent } from './PasskeysComponent';
 import { MFAComponent } from './MFAComponent';
 import { changePassword } from '../auth/authApi';
 import { startSocialLogin } from '../utils/authService';
+import { AuthContext } from '../auth/AuthContext';
 
 export function SecurityComponent({
   fromRecovery = false,
-  fromWeakLogin = false, // optional: wenn du später weak-login-Redirect nutzt
+  fromWeakLogin = false,
 }) {
   const { t } = useTranslation();
+  const { authMethods } = useContext(AuthContext);
 
   const [messageKey, setMessageKey] = useState(null);
   const [errorKey, setErrorKey] = useState(null);
 
+  const socialProviders = Array.isArray(authMethods?.social_providers)
+    ? authMethods.social_providers
+    : [];
+  const canChangePassword = Boolean(authMethods?.password_change);
+  const socialLoginEnabled = Boolean(authMethods?.social_login) && socialProviders.length > 0;
+  const passkeysEnabled = Boolean(authMethods?.passkeys_manage);
+  const mfaEnabled = Boolean(authMethods?.mfa_enabled);
+
+  const sectionOrder = useMemo(
+    () => [
+      canChangePassword ? 'password' : null,
+      socialLoginEnabled ? 'social' : null,
+      passkeysEnabled ? 'passkeys' : null,
+      mfaEnabled ? 'mfa' : null,
+    ].filter(Boolean),
+    [canChangePassword, socialLoginEnabled, passkeysEnabled, mfaEnabled],
+  );
+
+  const needsDividerAfter = (section) => {
+    const idx = sectionOrder.indexOf(section);
+    return idx !== -1 && idx < sectionOrder.length - 1;
+  };
+
   const handleSocialClick = async (provider) => {
     setMessageKey(null);
     setErrorKey(null);
     try {
       await startSocialLogin(provider);
-      // Redirect läuft über den Provider-Flow, hier kein extra Text nötig
     } catch (err) {
       setErrorKey(err.code || 'Auth.SOCIAL_LOGIN_FAILED');
     }
@@ -47,14 +71,12 @@ export function SecurityComponent({
 
   return (
     <Box>
-      {/* Hinweis nach Recovery-Login */}
       {fromRecovery && (
         <Alert severity="warning" sx={{ mb: 2 }}>
           {t('Security.RECOVERY_LOGIN_WARNING')}
         </Alert>
       )}
 
-      {/* Optional: Hinweis nach „schwachem“ Login, wenn du das nutzt */}
       {fromWeakLogin && (
         <Alert severity="warning" sx={{ mb: 2 }}>
           {t('Security.WEAK_LOGIN_WARNING')}
@@ -72,32 +94,40 @@ export function SecurityComponent({
         </Alert>
       )}
 
-      {/* Password section */}
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.LOGIN_PASSWORD_LABEL')}
-      </Typography>
-      <PasswordChangeForm onSubmit={handlePasswordChange} />
-
-      <Divider sx={{ my: 3 }} />
-
-      {/* Social logins section */}
-      <Typography variant="h6" gutterBottom>
-        {t('Security.SOCIAL_SECTION_TITLE')}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1 }}>
-        {t('Security.SOCIAL_SECTION_DESCRIPTION')}
-      </Typography>
-      <SocialLoginButtons onProviderClick={handleSocialClick} />
-
-      <Divider sx={{ my: 3 }} />
+      {canChangePassword && (
+        <>
+          <Typography variant="h6" gutterBottom>
+            {t('Auth.LOGIN_PASSWORD_LABEL')}
+          </Typography>
+          <PasswordChangeForm onSubmit={handlePasswordChange} />
+          {needsDividerAfter('password') && <Divider sx={{ my: 3 }} />}
+        </>
+      )}
 
-      {/* Passkeys */}
-      <PasskeysComponent />
+      {socialLoginEnabled && (
+        <>
+          <Typography variant="h6" gutterBottom>
+            {t('Security.SOCIAL_SECTION_TITLE')}
+          </Typography>
+          <Typography variant="body2" sx={{ mb: 1 }}>
+            {t('Security.SOCIAL_SECTION_DESCRIPTION')}
+          </Typography>
+          <SocialLoginButtons
+            onProviderClick={handleSocialClick}
+            providers={socialProviders}
+          />
+          {needsDividerAfter('social') && <Divider sx={{ my: 3 }} />}
+        </>
+      )}
 
-      <Divider sx={{ my: 3 }} />
+      {passkeysEnabled && (
+        <>
+          <PasskeysComponent />
+          {needsDividerAfter('passkeys') && <Divider sx={{ my: 3 }} />}
+        </>
+      )}
 
-      {/* MFA (TOTP + Recovery-Codes) */}
-      <MFAComponent />
+      {mfaEnabled && <MFAComponent />}
     </Box>
   );
 };

package/src/components/SocialLoginButtons.jsx

@@ -8,7 +8,7 @@ import { SOCIAL_PROVIDERS } from '../auth/authConfig';
  * Renders buttons for social login providers.
  * The caller passes a handler that receives the provider key.
  */
-export function SocialLoginButtons({ onProviderClick }) {
+export function SocialLoginButtons({ onProviderClick, providers }) {
   const { t } = useTranslation();
 
   const handleClick = (provider) => {
@@ -17,57 +17,65 @@ export function SocialLoginButtons({ onProviderClick }) {
     }
   };
 
+  const activeProviders = Array.isArray(providers) && providers.length > 0
+    ? providers
+    : [SOCIAL_PROVIDERS.google, SOCIAL_PROVIDERS.microsoft];
+
   return (
     <Stack spacing={1.5}>
-      <Button
-        variant="outlined"
-        fullWidth
-        onClick={() => handleClick(SOCIAL_PROVIDERS.google)}
-        startIcon={
-          <Box
-            sx={{
-              width: 24,
-              height: 24,
-              borderRadius: '50%',
-              border: '1px solid rgba(0,0,0,0.2)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontWeight: 700,
-              fontSize: 14,
-            }}
-          >
-            G
-          </Box>
-        }
-      >
-        {t('Auth.LOGIN_SOCIAL_GOOGLE')}
-      </Button>
+      {activeProviders.includes(SOCIAL_PROVIDERS.google) && (
+        <Button
+          variant="outlined"
+          fullWidth
+          onClick={() => handleClick(SOCIAL_PROVIDERS.google)}
+          startIcon={
+            <Box
+              sx={{
+                width: 24,
+                height: 24,
+                borderRadius: '50%',
+                border: '1px solid rgba(0,0,0,0.2)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 700,
+                fontSize: 14,
+              }}
+            >
+              G
+            </Box>
+          }
+        >
+          {t('Auth.LOGIN_SOCIAL_GOOGLE')}
+        </Button>
+      )}
 
-      <Button
-        variant="outlined"
-        fullWidth
-        onClick={() => handleClick(SOCIAL_PROVIDERS.microsoft)}
-        startIcon={
-          <Box
-            sx={{
-              width: 24,
-              height: 24,
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr',
-              gridTemplateRows: '1fr 1fr',
-              gap: '1px',
-            }}
-          >
-            <Box sx={{ bgcolor: 'primary.main', opacity: 0.9 }} />
-            <Box sx={{ bgcolor: 'primary.main', opacity: 0.7 }} />
-            <Box sx={{ bgcolor: 'primary.main', opacity: 0.7 }} />
-            <Box sx={{ bgcolor: 'primary.main', opacity: 0.9 }} />
-          </Box>
-        }
-      >
-        {t('Auth.LOGIN_SOCIAL_MICROSOFT')}
-      </Button>
+      {activeProviders.includes(SOCIAL_PROVIDERS.microsoft) && (
+        <Button
+          variant="outlined"
+          fullWidth
+          onClick={() => handleClick(SOCIAL_PROVIDERS.microsoft)}
+          startIcon={
+            <Box
+              sx={{
+                width: 24,
+                height: 24,
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
+                gridTemplateRows: '1fr 1fr',
+                gap: '1px',
+              }}
+            >
+              <Box sx={{ bgcolor: 'primary.main', opacity: 0.9 }} />
+              <Box sx={{ bgcolor: 'primary.main', opacity: 0.7 }} />
+              <Box sx={{ bgcolor: 'primary.main', opacity: 0.7 }} />
+              <Box sx={{ bgcolor: 'primary.main', opacity: 0.9 }} />
+            </Box>
+          }
+        >
+          {t('Auth.LOGIN_SOCIAL_MICROSOFT')}
+        </Button>
+      )}
     </Stack>
   );
 };

package/src/components/UserInviteComponent.jsx

@@ -9,6 +9,12 @@ export function UserInviteComponent() { // FIX: Removed apiUrl prop
   const [message, setMessage] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const actionButtonSx = {
+    minWidth: 120,
+    height: 40,
+    textTransform: 'none',
+    whiteSpace: 'nowrap',
+  };
 
   const inviteUser = async () => {
     setMessage('');
@@ -42,7 +48,7 @@ export function UserInviteComponent() { // FIX: Removed apiUrl prop
       {message && <Alert severity="success" sx={{ mb: 2 }}>{message}</Alert>}
       {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
 
-      <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
+      <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
         <TextField
           label={t('Auth.EMAIL_LABEL', 'Email address')}
           type="email"
@@ -58,9 +64,10 @@ export function UserInviteComponent() { // FIX: Removed apiUrl prop
         />
         <Button 
             variant="contained" 
+            size="small"
             onClick={inviteUser} 
             disabled={loading || !inviteEmail}
-            sx={{ minWidth: 100, height: 40 }}
+            sx={actionButtonSx}
         >
           {loading ? <CircularProgress size={24} color="inherit" /> : t('Auth.INVITE_BUTTON', 'Invite')}
         </Button>

package/src/pages/AccountPage.jsx

@@ -13,14 +13,8 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
-// Internal Library Components
-// Stellen Sie sicher, dass diese Pfade korrekt auf Ihre Library zeigen!
-// Da Sie '@micha.bigler/ui-core-micha' nutzen, sollten die Imports ggf. so aussehen:
-import { 
-    AuthContext, 
-    // ... andere Komponenten aus der Lib importieren, falls sie dort exportiert sind
-    // Wenn sie lokal sind, lassen Sie die relativen Pfade.
-} from '@micha.bigler/ui-core-micha'; 
+// Internal context
+import { AuthContext } from '../auth/AuthContext';
 
 // Falls die Komponenten noch lokal sind:
 import { WidePage } from '../layout/PageLayout';
@@ -200,12 +194,6 @@ export function AccountPage({
               </Paper>
             )}
 
-            {(isSuperUser || perms.can_invite) && showBulkInviteCsvTab && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
-                <BulkInviteCsvTab {...bulkInviteCsvProps} />
-              </Paper>
-            )}
-
             {(isSuperUser || perms.can_manage_access_codes) && (
               <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
                 <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
@@ -214,6 +202,12 @@ export function AccountPage({
                 <AccessCodeManager />
               </Paper>
             )}
+
+            {(isSuperUser || perms.can_invite) && showBulkInviteCsvTab && (
+              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+                <BulkInviteCsvTab {...bulkInviteCsvProps} />
+              </Paper>
+            )}
           </Stack>
         </Box>
       )}

package/src/pages/LoginPage.jsx

@@ -19,7 +19,7 @@ import { MfaLoginComponent } from '../components/MfaLoginComponent';
 export function LoginPage() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { login } = useContext(AuthContext);
+  const { login, authMethods } = useContext(AuthContext);
   const { t } = useTranslation();
 
   // State
@@ -40,6 +40,13 @@ export function LoginPage() {
   // Backward-compatible fallback for legacy links using query parameters.
   const recoveryEmail = hashParams.get('email') || params.get('email') || '';
 
+  useEffect(() => {
+    const socialError = params.get('error') || params.get('social');
+    if (socialError) {
+      setErrorKey('Auth.SOCIAL_LOGIN_FAILED');
+    }
+  }, [location.search]);
+
   // --- Helper: Central Success Logic ---
   const handleLoginSuccess = (user) => {
     login(user); // Update Context
@@ -127,6 +134,15 @@ export function LoginPage() {
     setErrorKey(null);
   };
 
+  const socialProviders = Array.isArray(authMethods?.social_providers)
+    ? authMethods.social_providers
+    : [];
+  const passwordLoginEnabled = Boolean(authMethods?.password_login) || Boolean(recoveryToken);
+  const socialLoginEnabled = Boolean(authMethods?.social_login) && socialProviders.length > 0;
+  const passkeyLoginEnabled = Boolean(authMethods?.passkey_login);
+  const signupEnabled = Boolean(authMethods?.signup);
+  const passwordResetEnabled = Boolean(authMethods?.password_reset);
+
   // --- Render ---
 
   return (
@@ -152,11 +168,14 @@ export function LoginPage() {
 
       {step === 'credentials' && (
         <LoginForm
-          onSubmit={handleSubmitCredentials}
-          onForgotPassword={() => navigate('/reset-request-password')}
-          onSocialLogin={(provider) => startSocialLogin(provider)}
-          onPasskeyLogin={handlePasskeyLoginInitial}
-          onSignUp={() => navigate('/signup')}
+          onSubmit={passwordLoginEnabled ? handleSubmitCredentials : null}
+          onForgotPassword={
+            passwordResetEnabled ? () => navigate('/reset-request-password') : null
+          }
+          onSocialLogin={socialLoginEnabled ? (provider) => startSocialLogin(provider) : null}
+          socialProviders={socialProviders}
+          onPasskeyLogin={passkeyLoginEnabled ? handlePasskeyLoginInitial : null}
+          onSignUp={signupEnabled ? () => navigate('/signup') : null}
           disabled={submitting}
           initialIdentifier={recoveryEmail}
         />

package/src/utils/authService.js

@@ -135,12 +135,60 @@ export async function authenticateMfaWithPasskey() {
     return authenticateWithMFA({ credential: credentialJson });
 }
 
-export function startSocialLogin(provider) {
+function getCsrfTokenFromCookie() {
+  if (typeof document === 'undefined' || !document.cookie) return null;
+  const match = document.cookie.match(/(?:^|; )csrftoken=([^;]+)/);
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+function submitSocialRedirectForm({ provider, callbackUrl, csrfToken }) {
+  const form = document.createElement('form');
+  form.method = 'POST';
+  form.action = `${HEADLESS_BASE}/auth/provider/redirect`;
+  form.style.display = 'none';
+
+  const fields = {
+    provider,
+    process: 'login',
+    callback_url: callbackUrl,
+    csrfmiddlewaretoken: csrfToken,
+  };
+
+  Object.entries(fields).forEach(([name, value]) => {
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    input.value = String(value);
+    form.appendChild(input);
+  });
+
+  document.body.appendChild(form);
+  form.submit();
+}
+
+export async function startSocialLogin(provider) {
   if (typeof window === 'undefined') {
     throw normaliseApiError(
       new Error('Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'), 
       'Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'
     );
   }
-  window.location.href = `/accounts/${provider}/login/?process=login`;
-}
+
+  try {
+    // Ensures csrftoken cookie exists before form POST.
+    await apiClient.get('/api/csrf/');
+  } catch {
+    // Continue; token might already be present.
+  }
+
+  const csrfToken = getCsrfTokenFromCookie();
+  if (!csrfToken) {
+    throw normaliseApiError(
+      new Error('Auth.SOCIAL_LOGIN_FAILED'),
+      'Auth.SOCIAL_LOGIN_FAILED',
+    );
+  }
+
+  const callbackUrl = `${window.location.origin}/login`;
+  submitSocialRedirectForm({ provider, callbackUrl, csrfToken });
+}