@micha.bigler/ui-core-micha 1.4.19 → 1.4.22

package/src/pages/AccountPage.jsx

@@ -1,35 +1,53 @@
-// src/pages/AccountPage.jsx
-import React, { useState, useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
-import { Tabs, Tab, Box } from '@mui/material';
+import { useSearchParams } from 'react-router-dom';
+import { 
+  Tabs, 
+  Tab, 
+  Box, 
+  Typography, 
+  Alert, 
+  CircularProgress 
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+// Interne Komponenten der Library
 import { WidePage } from '../layout/PageLayout';
-import ProfileComponent from '../components/ProfileComponent';
-import SecurityComponent from '../components/SecurityComponent';
-import SupportRecoveryRequestsTab from '../components/SupportRecoveryRequestsTab';
-import { authApi } from '../auth/authApi';
+import { ProfileComponent } from '../components/ProfileComponent';
+import { SecurityComponent } from '../components/SecurityComponent';
+import { UserListComponent } from '../components/UserListComponent';
+import { UserInviteComponent } from '../components/UserInviteComponent';
+import { AccessCodeManager } from '../components/AccessCodeManager';
+import { SupportRecoveryRequestsTab } from '../components/SupportRecoveryRequestsTab';
 import { AuthContext } from '../auth/AuthContext';
-import { useSearchParams } from 'react-router-dom';
+import { authApi } from '../auth/authApi';
 
+/**
+ * Vollständige, selbst-konfigurierende Account-Seite.
+ * * Architektur:
+ * - Permissions: Werden aus user.ui_permissions gelesen (vom Backend).
+ * - Rollen: Werden aus user.available_roles gelesen (vom Backend).
+ * - Keine Props mehr nötig -> Plug & Play in der App.js.
+ */
 export function AccountPage() {
-  const { login } = useContext(AuthContext);
-  const [searchParams] = useSearchParams();
+  const { t } = useTranslation();
+  const { user, login, loading } = useContext(AuthContext);
+  const [searchParams, setSearchParams] = useSearchParams();
 
-  const initialTabParam = searchParams.get('tab');
-  const initialTab =
-    initialTabParam === 'security'
-      ? 'security'
-      : initialTabParam === 'support'
-        ? 'support'
-        : 'account';
+  // 1. URL State Management
+  const currentTab = searchParams.get('tab') || 'profile';
+  const fromRecovery = searchParams.get('from') === 'recovery';
+  const fromWeakLogin = searchParams.get('from') === 'weak_login';
 
-  const fromParam = searchParams.get('from');
-  const fromRecovery = fromParam === 'recovery';
-  const fromWeakLogin = fromParam === 'weak_login';
-
-  const [tab, setTab] = useState(initialTab);
+  // 2. Daten & Permissions extrahieren (Single Source of Truth)
+  // Backend liefert die Liste der Rollen (Keys), z.B. ['student', 'teacher']
+  const activeRoles = user?.available_roles || [];
+  
+  // Backend liefert Permissions basierend auf settings.py
+  const perms = user?.ui_permissions || {};
 
   const handleTabChange = (_event, newValue) => {
-    setTab(newValue);
+    setSearchParams({ tab: newValue });
   };
 
   const handleProfileSubmit = async (payload) => {
@@ -37,24 +55,92 @@ export function AccountPage() {
     login(updatedUser);
   };
 
+  // 3. Dynamische Tabs bauen
+  const tabs = useMemo(() => {
+    // Wenn User noch nicht da ist, leere Liste (Loading State fängt das ab)
+    if (!user) return [];
+
+    const list = [
+      { value: 'profile', label: t('Account.TAB_PROFILE', 'Profile') },
+      { value: 'security', label: t('Account.TAB_SECURITY', 'Security') },
+    ];
+
+    if (perms.can_view_users) {
+      list.push({ value: 'users', label: t('Account.TAB_USERS', 'Users') });
+    }
+    
+    if (perms.can_invite) {
+      list.push({ value: 'invite', label: t('Account.TAB_INVITE', 'Invite') });
+    }
+    
+    if (perms.can_manage_access_codes) {
+      list.push({ value: 'access', label: t('Account.TAB_ACCESS_CODES', 'Access Codes') });
+    }
+    
+    if (perms.can_view_support) {
+      list.push({ value: 'support', label: t('Account.TAB_SUPPORT', 'Support') });
+    }
+
+    return list;
+  }, [user, perms, t]);
+
+  // 4. Loading & Auth Checks
+  if (loading) {
+    return (
+        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}>
+            <CircularProgress />
+        </Box>
+    );
+  }
+
+  if (!user) {
+      return (
+          <WidePage>
+              <Alert severity="warning">
+                  {t('Auth.NOT_LOGGED_IN', 'User not logged in.')}
+              </Alert>
+          </WidePage>
+      );
+  }
+
+  // 5. Sicherheits-Check: Ist der aktuelle Tab überhaupt erlaubt?
+  // Verhindert Zugriff durch URL-Manipulation (z.B. ?tab=users eingeben ohne Admin-Rechte)
+  const activeTabExists = tabs.some(t => t.value === currentTab);
+  const safeTab = activeTabExists ? currentTab : 'profile';
+
   return (
-    <WidePage title="Account">
+    <WidePage title={t('Account.TITLE', 'Account & Administration')}>
       <Helmet>
-        <title>PROJECT_NAME – Account</title>
+        <title>{t('Account.PAGE_TITLE', 'Account')} – {user.email}</title>
       </Helmet>
 
       <Tabs
-        value={tab}
+        value={safeTab}
         onChange={handleTabChange}
-        sx={{ mb: 3 }}
+        variant="scrollable"
+        scrollButtons="auto"
+        sx={{ mb: 3, borderBottom: 1, borderColor: 'divider' }}
       >
-        <Tab label="Security" value="security" />
-        <Tab label="Account" value="account" />
-        <Tab label="Support" value="support" />
+        {tabs.map((tab) => (
+          <Tab key={tab.value} label={tab.label} value={tab.value} />
+        ))}
       </Tabs>
 
-      {tab === 'security' && (
-        <Box sx={{ mt: 1 }}>
+      {/* --- TAB CONTENT --- */}
+
+      {safeTab === 'profile' && (
+        <Box sx={{ mt: 2 }}>
+          <ProfileComponent
+            onSubmit={handleProfileSubmit}
+            showName
+            showPrivacy
+            showCookies
+          />
+        </Box>
+      )}
+
+      {safeTab === 'security' && (
+        <Box sx={{ mt: 2 }}>
           <SecurityComponent
             fromRecovery={fromRecovery}
             fromWeakLogin={fromWeakLogin}
@@ -62,28 +148,35 @@ export function AccountPage() {
         </Box>
       )}
 
-      {tab === 'account' && (
-        <Box sx={{ mt: 1 }}>
-          <ProfileComponent
-            onLoad={() => {}}
-            onSubmit={handleProfileSubmit}
-            submitText="Save"
-            showName
-            showPrivacy
-            showCookies
+      {safeTab === 'users' && (
+        <Box sx={{ mt: 2 }}>
+          <UserListComponent
+            roles={activeRoles} 
+            currentUser={user}
           />
         </Box>
       )}
 
-      
+      {safeTab === 'invite' && (
+        <Box sx={{ mt: 2 }}>
+          <UserInviteComponent />
+        </Box>
+      )}
+
+      {safeTab === 'access' && (
+        <Box sx={{ mt: 2 }}>
+          <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+            {t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.')}
+          </Typography>
+          <AccessCodeManager />
+        </Box>
+      )}
 
-      {tab === 'support' && (
-        <Box sx={{ mt: 1 }}>
+      {safeTab === 'support' && (
+        <Box sx={{ mt: 2 }}>
           <SupportRecoveryRequestsTab />
         </Box>
       )}
     </WidePage>
   );
-}
-
-export default AccountPage;
+}

package/src/pages/LoginPage.jsx

@@ -4,7 +4,8 @@ import { Helmet } from 'react-helmet';
 import { Typography, Box, Alert } from '@mui/material';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
-import { authApi } from '../auth/authApi';
+import { loginWithRecoveryPassword, loginWithPassword } from '../auth/authApi';
+import { loginWithPasskey, startSocialLogin } from '../utils/authService';
 import LoginForm from '../components/LoginForm';
 import MfaLoginComponent from '../components/MfaLoginComponent';
 import { useTranslation } from 'react-i18next';
@@ -32,7 +33,7 @@ export function LoginPage() {
     try {
       // Recovery flow: password login via special endpoint, no MFA
       if (recoveryToken) {
-        const result = await authApi.loginWithRecoveryPassword(
+        const result = await loginWithRecoveryPassword(
           identifier,
           password,
           recoveryToken,
@@ -45,7 +46,7 @@ export function LoginPage() {
       }
 
       // Normal login flow via headless allauth
-      const result = await authApi.loginWithPassword(identifier, password);
+      const result = await loginWithPassword(identifier, password);
 
       if (result.needsMfa) {
         setMfaState({
@@ -77,7 +78,7 @@ export function LoginPage() {
     setErrorKey(null);
     setSubmitting(true);
     try {
-      const { user } = await authApi.loginWithPasskey();
+      const { user } = await loginWithPasskey();
       login(user);
 
       const requiresExtra =
@@ -95,7 +96,7 @@ export function LoginPage() {
     }
   };
 
-  const handleSocialLogin = (provider) => authApi.startSocialLogin(provider);
+  const handleSocialLogin = (provider) => startSocialLogin(provider);
   const handleSignUp = () => navigate('/signup');
   const handleForgotPassword = () => navigate('/reset-request-password');
 

package/src/pages/PasswordInvitePage.jsx

@@ -6,7 +6,7 @@ import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import PasswordSetForm from '../components/PasswordSetForm';
-import { authApi } from '../auth/authApi';
+import { verifyResetToken, setNewPassword } from '../auth/authApi';
 
 export function PasswordInvitePage() {
   const { uid, token } = useParams();
@@ -40,7 +40,7 @@ export function PasswordInvitePage() {
 
     const check = async () => {
       try {
-        await authApi.verifyResetToken(uid, token);
+        await verifyResetToken(uid, token);
         setChecked(true);
       } catch (err) {
         setErrorKey(err.code || 'Auth.RESET_LINK_INVALID');
@@ -62,7 +62,7 @@ export function PasswordInvitePage() {
     setSuccessKey(null);
 
     try {
-      await authApi.setNewPassword(uid, token, newPassword);
+      await setNewPassword(uid, token, newPassword);
       setSuccessKey(
         isInvite
           ? 'Auth.RESET_PASSWORD_SUCCESS_INVITE'

package/src/pages/SignUpPage.jsx

@@ -11,7 +11,7 @@ import {
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
-import { authApi } from '../auth/authApi';
+import { validateAccessCode, requestInviteWithCode } from '../auth/authApi';
 
 export function SignUpPage() {
   const navigate = useNavigate();
@@ -41,14 +41,14 @@ export function SignUpPage() {
 
     try {
       // 1) Access-Code prüfen
-      const res = await authApi.validateAccessCode(accessCode);
+      const res = await validateAccessCode(accessCode);
       if (!res?.valid) {
         setErrorKey('Auth.ACCESS_CODE_INVALID_OR_INACTIVE');
         return;
       }
 
       // 2) Invite anfordern
-      await authApi.requestInviteWithCode(email, accessCode);
+      await requestInviteWithCode(email, accessCode);
 
       setSuccessKey('Auth.INVITE_REQUEST_SUCCESS');
     } catch (err) {

package/src/utils/authService.js

@@ -0,0 +1,68 @@
+// src/utils/authService.js
+import { getPasskeyRegistrationOptions, completePasskeyRegistration, getPasskeyLoginOptions, completePasskeyLogin, fetchCurrentUser } from '../auth/authApi';
+
+import { 
+    ensureWebAuthnSupport, 
+    serializeCredential 
+} from '../utils/webauthn-helpers';
+import { normaliseApiError } from '../utils/auth-errors';
+
+export async function registerPasskey(name = 'Passkey') {
+  ensureWebAuthnSupport();
+  
+  // 1. Get Options from Server
+  const creationOptions = await getPasskeyRegistrationOptions();
+  
+  // 2. Call Browser API
+  let credential;
+  try {
+      // Note: Parse JSON to Options needs a helper if creationOptions is raw JSON strings
+      // modern browsers/allauth usually provide correct types, but check your library version
+      // For standard Allauth headless, you might need window.PublicKeyCredential.parseCreationOptionsFromJSON
+      const pubKey = window.PublicKeyCredential.parseCreationOptionsFromJSON(creationOptions);
+      credential = await navigator.credentials.create({ publicKey: pubKey });
+  } catch (err) {
+      if (err.name === 'NotAllowedError') {
+          throw normaliseApiError(new Error('Auth.PASSKEY_CANCELLED'), 'Auth.PASSKEY_CANCELLED');
+      }
+      throw err;
+  }
+
+  // 3. Send back to Server
+  const credentialJson = serializeCredential(credential);
+  return completePasskeyRegistration(credentialJson, name);
+}
+
+export async function loginWithPasskey() {
+    ensureWebAuthnSupport();
+    
+    // 1. Get Challenge
+    const requestOptions = await getPasskeyLoginOptions();
+    
+    // 2. Browser Sign
+    let assertion;
+    try {
+        const pubKey = window.PublicKeyCredential.parseRequestOptionsFromJSON(requestOptions);
+        assertion = await navigator.credentials.get({ publicKey: pubKey });
+    } catch (err) {
+         throw normaliseApiError(new Error('Auth.PASSKEY_CANCELLED'), 'Auth.PASSKEY_CANCELLED');
+    }
+
+    // 3. Complete
+    const credentialJson = serializeCredential(assertion);
+    await completePasskeyLogin(credentialJson);
+    
+    // 4. Reload User
+    return fetchCurrentUser();
+}
+
+export function startSocialLogin(provider) {
+  if (typeof window === 'undefined') {
+    throw normaliseApiError(
+      new Error('Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'), 
+      'Auth.SOCIAL_LOGIN_NOT_IN_BROWSER'
+    );
+  }
+  // Browser-Redirect ist ein Side-Effect -> Service Layer
+  window.location.href = `/accounts/${provider}/login/?process=login`;
+}

package/src/utils/errors.js

@@ -0,0 +1,39 @@
+// src/utils/errors.js
+export function extractErrorInfo(error) {
+  const status = error.response?.status ?? null;
+  const data = error.response?.data ?? null;
+
+  if (!data) {
+    return { status, code: null, message: error.message || null, raw: null };
+  }
+
+  // Allauth Headless structure often nests errors in "errors" array or "status" key
+  if (Array.isArray(data.errors) && data.errors.length > 0) {
+      // Pick the first error code
+      const first = data.errors[0];
+      return { status, code: first.code, message: first.message, raw: data };
+  }
+
+  if (typeof data.code === 'string') {
+    return { status, code: data.code, message: null, raw: data };
+  }
+  
+  // Fallback for generic Django errors
+  if (typeof data.detail === 'string') {
+    return { status, code: 'GENERIC', message: data.detail, raw: data };
+  }
+
+  return { status, code: null, message: null, raw: data };
+}
+
+export function normaliseApiError(error, defaultCode = 'Auth.GENERIC_ERROR') {
+  const info = extractErrorInfo(error);
+  const code = info.code || defaultCode;
+  const message = info.message || code || defaultCode;
+
+  const err = new Error(message);
+  err.code = code;
+  err.status = info.status;
+  err.raw = info.raw;
+  return err;
+}

package/src/utils/webauthn.js

@@ -0,0 +1,51 @@
+// src/utils/webauthn.js
+export function bufferToBase64URL(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let str = '';
+  for (const char of bytes) {
+    str += String.fromCharCode(char);
+  }
+  const base64 = btoa(str);
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+export function serializeCredential(credential) {
+  const p = {
+    id: credential.id,
+    rawId: bufferToBase64URL(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: bufferToBase64URL(credential.response.clientDataJSON),
+    },
+  };
+
+  if (credential.response.attestationObject) {
+    p.response.attestationObject = bufferToBase64URL(credential.response.attestationObject);
+  }
+  if (credential.response.authenticatorData) {
+    p.response.authenticatorData = bufferToBase64URL(credential.response.authenticatorData);
+  }
+  if (credential.response.signature) {
+    p.response.signature = bufferToBase64URL(credential.response.signature);
+  }
+  if (credential.response.userHandle) {
+    p.response.userHandle = bufferToBase64URL(credential.response.userHandle);
+  }
+  
+  if (typeof credential.getClientExtensionResults === 'function') {
+    p.clientExtensionResults = credential.getClientExtensionResults();
+  }
+
+  return p;
+}
+
+export function ensureWebAuthnSupport() {
+  if (
+    typeof window === 'undefined' ||
+    typeof navigator === 'undefined' ||
+    !window.PublicKeyCredential ||
+    !navigator.credentials
+  ) {
+    throw new Error('Auth.PASSKEY_NOT_SUPPORTED');
+  }
+}