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

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);
@@ -118,7 +124,7 @@ export function AccessCodeManager() {
   }
 
   return (
-    <Box sx={{ mt: 2 }}>
+    <Box>
       {errorKey && (
         <Alert severity="error" sx={{ mb: 2 }}>
           {t(errorKey)}
@@ -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);
@@ -117,7 +123,7 @@ export function BulkInviteCsvTab({
   };
 
   return (
-    <Box sx={{ mt: 1 }}>
+    <Box>
       <Typography variant="h6" gutterBottom>
         {t('Account.BULK_INVITE_TITLE', 'Bulk Invite via CSV')}
       </Typography>
@@ -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/ProfileComponent.jsx

@@ -10,10 +10,14 @@ import {
   CircularProgress,
   Alert,
   Typography,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 // WICHTIG: Importiere den Context, um die bereits geladenen Daten zu nutzen
 import { AuthContext } from '../auth/AuthContext'; 
+import { fetchCookieStatement, fetchPrivacyStatement } from '../auth/authApi';
 
 export function ProfileComponent({
   onSubmit,
@@ -21,6 +25,9 @@ export function ProfileComponent({
   showName = true,
   showPrivacy = true,
   showCookies = true,
+  showStatements = true,
+  privacyStatementText = null,
+  cookieStatementText = null,
 }) {
   const { t } = useTranslation();
   
@@ -39,6 +46,10 @@ export function ProfileComponent({
   const [lastName, setLastName] = useState('');
   const [acceptedPrivacy, setAcceptedPrivacy] = useState(false);
   const [acceptedCookies, setAcceptedCookies] = useState(false);
+  const [privacyStatement, setPrivacyStatement] = useState(privacyStatementText || '');
+  const [cookieStatement, setCookieStatement] = useState(cookieStatementText || '');
+  const [loadingPrivacyStatement, setLoadingPrivacyStatement] = useState(false);
+  const [loadingCookieStatement, setLoadingCookieStatement] = useState(false);
 
   // Synchronisiere Formular-Daten, sobald der User aus dem Context da ist
   useEffect(() => {
@@ -52,6 +63,56 @@ export function ProfileComponent({
     }
   }, [user]);
 
+  useEffect(() => {
+    if (privacyStatementText !== null && privacyStatementText !== undefined) {
+      setPrivacyStatement(String(privacyStatementText));
+    }
+  }, [privacyStatementText]);
+
+  useEffect(() => {
+    if (cookieStatementText !== null && cookieStatementText !== undefined) {
+      setCookieStatement(String(cookieStatementText));
+    }
+  }, [cookieStatementText]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadStatements = async () => {
+      if (!showStatements) return;
+
+      if (showPrivacy && (privacyStatementText === null || privacyStatementText === undefined)) {
+        setLoadingPrivacyStatement(true);
+        try {
+          const text = await fetchPrivacyStatement();
+          if (!cancelled) setPrivacyStatement(text || '');
+        } catch (err) {
+          if (!cancelled) setPrivacyStatement('');
+        } finally {
+          if (!cancelled) setLoadingPrivacyStatement(false);
+        }
+      }
+
+      if (showCookies && (cookieStatementText === null || cookieStatementText === undefined)) {
+        setLoadingCookieStatement(true);
+        try {
+          const text = await fetchCookieStatement();
+          if (!cancelled) setCookieStatement(text || '');
+        } catch (err) {
+          if (!cancelled) setCookieStatement('');
+        } finally {
+          if (!cancelled) setLoadingCookieStatement(false);
+        }
+      }
+    };
+
+    loadStatements();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [showStatements, showPrivacy, showCookies, privacyStatementText, cookieStatementText]);
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!onSubmit) return;
@@ -61,10 +122,16 @@ export function ProfileComponent({
     setSuccessKey(null);
 
     const payload = {
-      first_name: firstName,
-      last_name: lastName,
-      accepted_privacy_statement: acceptedPrivacy,
-      accepted_convenience_cookies: acceptedCookies,
+      ...(showName && {
+        first_name: firstName,
+        last_name: lastName,
+      }),
+      ...(showPrivacy && {
+        accepted_privacy_statement: acceptedPrivacy,
+      }),
+      ...(showCookies && {
+        accepted_convenience_cookies: acceptedCookies,
+      }),
     };
 
     try {
@@ -183,6 +250,52 @@ export function ProfileComponent({
               />
             )}
           </Stack>
+
+          {showStatements && (
+            <Stack spacing={1.25} sx={{ mt: 1.5 }}>
+              {showPrivacy && (
+                <Accordion disableGutters>
+                  <AccordionSummary>
+                    <Typography variant="body2" fontWeight={600}>
+                      {t('Profile.PRIVACY_STATEMENT_TITLE', 'Privacy statement')}
+                    </Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    {loadingPrivacyStatement ? (
+                      <Typography variant="body2" color="text.secondary">
+                        {t('Profile.STATEMENT_LOADING', 'Loading statement...')}
+                      </Typography>
+                    ) : (
+                      <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
+                        {privacyStatement || t('Profile.PRIVACY_STATEMENT_EMPTY', 'Privacy statement is currently unavailable.')}
+                      </Typography>
+                    )}
+                  </AccordionDetails>
+                </Accordion>
+              )}
+
+              {showCookies && (
+                <Accordion disableGutters>
+                  <AccordionSummary>
+                    <Typography variant="body2" fontWeight={600}>
+                      {t('Profile.COOKIES_STATEMENT_TITLE', 'Cookie statement')}
+                    </Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    {loadingCookieStatement ? (
+                      <Typography variant="body2" color="text.secondary">
+                        {t('Profile.STATEMENT_LOADING', 'Loading statement...')}
+                      </Typography>
+                    ) : (
+                      <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
+                        {cookieStatement || t('Profile.COOKIES_STATEMENT_EMPTY', 'Cookie statement is currently unavailable.')}
+                      </Typography>
+                    )}
+                  </AccordionDetails>
+                </Accordion>
+              )}
+            </Stack>
+          )}
         </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>
   );
 };