@micha.bigler/ui-core-micha 1.0.0 → 1.1.0

package/dist/auth/authApi.js

@@ -13,7 +13,7 @@ function extractErrorMessage(error) {
     if (Array.isArray(data.non_field_errors) && data.non_field_errors.length > 0) {
         return data.non_field_errors[0];
     }
-    return JSON.stringify(data);
+    return 'An error occurred. Please try again.';
 }
 // Helper to get CSRF token from cookies manually
 function getCsrfToken() {
@@ -133,6 +133,27 @@ export async function logoutSession() {
 export function startSocialLogin(provider) {
     window.location.href = `/accounts/${provider}/login/?process=login`;
 }
+/**
+ * Prüft, ob ein Access-Code gültig ist.
+ * Erwartet: POST /api/access-codes/validate/ { code }
+ * Antwort: { valid: true/false } oder 400 mit detail-Fehler.
+ */
+export async function validateAccessCode(code) {
+    const res = await axios.post(`${ACCESS_CODES_BASE}/validate/`, { code }, { withCredentials: true });
+    return res.data; // { valid: bool } oder Error
+}
+/**
+ * Fordert eine Einladung mit optionalem Access-Code an.
+ * Backend prüft den Code noch einmal serverseitig.
+ */
+export async function requestInviteWithCode(email, accessCode) {
+    const payload = { email };
+    if (accessCode) {
+        payload.access_code = accessCode;
+    }
+    const res = await axios.post(`${USERS_BASE}/invite/`, payload, { withCredentials: true });
+    return res.data;
+}
 /**
  * Loads the current session information directly from allauth headless.
  */
@@ -169,4 +190,6 @@ export const authApi = {
     setNewPassword,
     loginWithPasskey,
     registerPasskey,
+    validateAccessCode,
+    requestInviteWithCode,
 };

package/dist/auth/authConfig.js

@@ -9,6 +9,8 @@ export const HEADLESS_VERSION = 'v1';
 export const HEADLESS_BASE = `${AUTH_BASE}/${HEADLESS_VARIANT}/${HEADLESS_VERSION}`;
 // Eigene User-API
 export const USERS_BASE = '/api/users';
+// NEU: Access-Code-API (kommt aus der Lib)
+export const ACCESS_CODES_BASE = '/api/access-codes';
 // CSRF-Endpoint (Django-View csrf_token_view)
 export const CSRF_URL = '/api/csrf/';
 // Konfiguration der Social-Provider

package/dist/components/AccessCodeManager.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/components/AccessCodeManager.jsx
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Box, Stack, Typography, Slider, Button, TextField, IconButton, Chip, Alert, CircularProgress, } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { ACCESS_CODES_BASE } from '../auth/authConfig';
+/**
+ * AccessCodeManager
+ *
+ * - Zeigt alle Access-Codes
+ * - Löschen von Codes
+ * - Generieren neuer Codes mit wählbarer Länge
+ * - Manuelles Hinzufügen eines Codes
+ *
+ * Backend-API (DRF ViewSet):
+ *   GET    /api/access-codes/             → Liste [{id, code, is_active, created_at}]
+ *   POST   /api/access-codes/             → {code: "..."} → 201
+ *   DELETE /api/access-codes/{id}/        → 204
+ */
+export function AccessCodeManager() {
+    const [codes, setCodes] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [submitting, setSubmitting] = useState(false);
+    const [length, setLength] = useState(12);
+    const [manualCode, setManualCode] = useState('');
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState('');
+    // Loads all access codes
+    const loadCodes = async () => {
+        var _a, _b;
+        setLoading(true);
+        setError('');
+        try {
+            const res = await axios.get(ACCESS_CODES_BASE + '/', {
+                withCredentials: true,
+            });
+            setCodes(res.data || []);
+        }
+        catch (err) {
+            setError(((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) || (err === null || err === void 0 ? void 0 : err.message) || 'Could not load access codes.');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        loadCodes();
+    }, []);
+    // Generates a random code with the selected length
+    const generateRandomCode = (len) => {
+        const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+        let out = '';
+        for (let i = 0; i < len; i += 1) {
+            const idx = Math.floor(Math.random() * alphabet.length);
+            out += alphabet[idx];
+        }
+        return out;
+    };
+    const handleCreateCode = async (code) => {
+        var _a, _b;
+        setSubmitting(true);
+        setError('');
+        setSuccess('');
+        try {
+            const res = await axios.post(ACCESS_CODES_BASE + '/', { code }, { withCredentials: true });
+            setCodes((prev) => [...prev, res.data]);
+            setSuccess('Access code saved.');
+        }
+        catch (err) {
+            setError(((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                (err === null || err === void 0 ? void 0 : err.message) ||
+                'Could not save access code.');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const handleGenerateClick = async () => {
+        const code = generateRandomCode(length);
+        await handleCreateCode(code);
+    };
+    const handleAddManual = async () => {
+        if (!manualCode.trim()) {
+            setError('Please enter a code.');
+            return;
+        }
+        await handleCreateCode(manualCode.trim());
+        setManualCode('');
+    };
+    const handleDelete = async (id) => {
+        var _a, _b;
+        setError('');
+        setSuccess('');
+        try {
+            await axios.delete(`${ACCESS_CODES_BASE}/${id}/`, {
+                withCredentials: true,
+            });
+            setCodes((prev) => prev.filter((c) => c.id !== id));
+            setSuccess('Access code deleted.');
+        }
+        catch (err) {
+            setError(((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                (err === null || err === void 0 ? void 0 : err.message) ||
+                'Could not delete access code.');
+        }
+    };
+    if (loading) {
+        return (_jsx(Box, { sx: { py: 3, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, {}) }));
+    }
+    return (_jsxs(Box, { sx: { mt: 2 }, children: [error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), success && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success })), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: "Active access codes" }), codes.length === 0 ? (_jsx(Typography, { variant: "body2", children: "No access codes defined." })) : (_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: "Generate new code" }), _jsxs(Box, { sx: { maxWidth: 360 }, children: [_jsxs(Typography, { variant: "body2", gutterBottom: true, children: ["Length: ", 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 ? 'Saving…' : 'Generate code' })] }), _jsxs(Box, { sx: { mb: 2, maxWidth: 360 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: "Add code manually" }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(TextField, { label: "Access code", fullWidth: true, value: manualCode, onChange: (e) => setManualCode(e.target.value), disabled: submitting }), _jsx(Button, { variant: "outlined", onClick: handleAddManual, disabled: submitting, children: "Add" })] })] })] }));
+}
+export default AccessCodeManager;

package/dist/components/LoginForm.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { Box, TextField, Button, Typography, Divider, } from '@mui/material';
 import SocialLoginButtons from './SocialLoginButtons';
-const LoginForm = ({ onSubmit, onForgotPassword, onSocialLogin, error, disabled = false, }) => {
+const LoginForm = ({ onSubmit, onForgotPassword, onSocialLogin, onSignUp, // <--- NEU
+error, disabled = false, }) => {
     const [identifier, setIdentifier] = useState('');
     const [password, setPassword] = useState('');
     const handleSubmit = (event) => {
@@ -17,6 +18,7 @@ const LoginForm = ({ onSubmit, onForgotPassword, onSocialLogin, error, disabled
                     justifyContent: 'space-between',
                     alignItems: 'center',
                     mt: 1,
-                }, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: disabled, children: "Login" }), _jsx(Button, { type: "button", variant: "text", onClick: onForgotPassword, disabled: disabled, children: "Forgot password?" })] }), _jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin })] }));
+                    gap: 1,
+                }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: disabled, children: "Login" }), onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: "Sign up" }))] }), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: "Forgot password?" })] }), _jsx(Divider, { sx: { my: 2 }, children: "or" }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin })] }));
 };
 export default LoginForm;

package/dist/index.js

@@ -10,5 +10,7 @@ export { PasswordChangePage } from './pages/PasswordChangePage';
 export { PasswordInvitePage } from './pages/PasswordInvitePage';
 export { AccountPage } from './pages/AccountPage';
 export { ProfileComponent } from './components/ProfileComponent';
+export { SignUpPage } from './pages/SignUpPage';
+export { AccessCodeManager } from './components/AccessCodeManager';
 // Falls du noch pure UI-Komponenten hast (Formulare)
 // export { default as LoginForm } from './components/forms/LoginForm';

package/dist/pages/LoginPage.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/pages/LoginPage.jsx (oder wo deine LoginPage liegt)
 import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
@@ -39,12 +40,14 @@ export function LoginPage() {
             authApi.startSocialLogin(providerKey);
         }
         catch (err) {
-            // This will only fire on immediate client-side errors
+            // eslint-disable-next-line no-console
             console.error('Social login init failed', err);
             setError('Could not start social login.');
         }
     };
-    return (_jsxs(NarrowPage, { title: "Login", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Login" }) }), error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(LoginForm, { onSubmit: handleSubmit, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, error: undefined, disabled: submitting })] }));
+    const handleSignUp = () => {
+        navigate('/signup');
+    };
+    return (_jsxs(NarrowPage, { title: "Login", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Login" }) }), error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(LoginForm, { onSubmit: handleSubmit, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onSignUp: handleSignUp, error: undefined, disabled: submitting })] }));
 }
-;
 export default LoginPage;

package/dist/pages/PasswordResetRequestPage.js

@@ -29,7 +29,7 @@ export function PasswordResetRequestPage() {
             setSubmitting(false);
         }
     };
-    return (_jsxs(NarrowPage, { title: "Reset password", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Reset password" }) }), successMessage && (_jsx(Typography, { colour: "primary", gutterBottom: true, children: successMessage })), error && (_jsx(Typography, { colour: "error", gutterBottom: true, children: error })), _jsx(PasswordResetRequestForm, { onSubmit: handleSubmit, submitting: submitting })] }));
+    return (_jsxs(NarrowPage, { title: "Reset password", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Reset password" }) }), successMessage && (_jsx(Typography, { color: "primary", gutterBottom: true, children: successMessage })), error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(PasswordResetRequestForm, { onSubmit: handleSubmit, submitting: submitting })] }));
 }
 ;
 export default PasswordResetRequestPage;

package/dist/pages/SignUpPage.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/pages/SignUpPage.jsx
+import React, { useState } from 'react';
+import { useNavigate, Link as RouterLink } from 'react-router-dom';
+import { Box, TextField, Button, Typography, Alert, } from '@mui/material';
+import { Helmet } from 'react-helmet';
+import { NarrowPage } from '../layout/PageLayout';
+import { authApi } from '../auth/authApi';
+export function SignUpPage() {
+    const navigate = useNavigate();
+    const [email, setEmail] = useState('');
+    const [accessCode, setAccessCode] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [success, setSuccess] = useState('');
+    const [error, setError] = useState('');
+    const handleSubmit = async (event) => {
+        var _a, _b;
+        event.preventDefault();
+        setSuccess('');
+        setError('');
+        if (!email) {
+            setError('Please enter an email address.');
+            return;
+        }
+        if (!accessCode) {
+            setError('Please enter an access code.');
+            return;
+        }
+        setSubmitting(true);
+        try {
+            // 1) Access-Code prüfen (API /api/access-codes/validate/)
+            const res = await authApi.validateAccessCode(accessCode);
+            if (!res.valid) {
+                setError('Access code is invalid.');
+                return;
+            }
+            // 2) Invite anfordern (API /api/users/invite/)
+            await authApi.requestInviteWithCode(email, accessCode);
+            setSuccess(`If the access code is valid for this project, an invitation link has been sent to ${email}.`);
+        }
+        catch (err) {
+            const detail = ((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                (err === null || err === void 0 ? void 0 : err.message) ||
+                'Could not request invitation.';
+            setError(detail);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const handleGoToLogin = () => {
+        navigate('/login');
+    };
+    return (_jsxs(NarrowPage, { title: "Sign up", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Sign up" }) }), success && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success })), error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: "Email address", type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), _jsx(TextField, { label: "Access code", type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting ? 'Submitting…' : 'Request invitation' })] }), _jsx(Box, { sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: ["Already have an account?", ' ', _jsx(Button, { onClick: handleGoToLogin, variant: "text", size: "small", children: "Go to login" })] }) })] }));
+}
+export default SignUpPage;

package/package.json

@@ -1,23 +1,23 @@
-{
-  "name": "@micha.bigler/ui-core-micha",
-  "version": "1.0.0",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "private": false,
-  "peerDependencies": {
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "@mui/material": "^5.0.0",
-    "axios": "^1.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-helmet": "^6.0.0",
-    "react-router-dom": "^6.0.0"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json"
-  },
-  "devDependencies": {
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "@micha.bigler/ui-core-micha",
+  "version": "1.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "private": false,
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/material": "^7.3.5",
+    "axios": "^1.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-helmet": "^6.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}

package/src/auth/AuthContext.jsx

@@ -1,108 +1,108 @@
-// src/auth/AuthContext.jsx
-import React, {
-  createContext,
-  useState,
-  useEffect,
-} from 'react';
-import axios from 'axios';
-import { CSRF_URL } from './authConfig';
-import {
-  fetchCurrentUser,
-  logoutSession,
-} from './authApi';
-
-export const AuthContext = createContext(null);
-
-export const AuthProvider = ({ children }) => {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-
-  // Einmalige Axios-Basis-Konfiguration
-  useEffect(() => {
-    axios.defaults.withCredentials = true;
-    axios.defaults.xsrfCookieName = 'csrftoken';
-    axios.defaults.xsrfHeaderName = 'X-CSRFToken';
-  }, []);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const initAuth = async () => {
-      try {
-        // 1) CSRF-Cookie setzen (Django-View /api/csrf/)
-        try {
-          await axios.get(CSRF_URL, { withCredentials: true });
-          // console.log('CSRF cookie set');
-        } catch (err) {
-          // eslint-disable-next-line no-console
-          console.error('Error setting CSRF cookie:', err);
-        }
-
-        // 2) aktuellen User laden (falls Session vorhanden)
-        try {
-          const data = await fetchCurrentUser();
-          if (!isMounted) return;
-          setUser({
-            id: data.id,
-            username: data.username,
-            email: data.email,
-            first_name: data.first_name,
-            last_name: data.last_name,
-            role: data.role,
-            is_superuser: data.is_superuser,
-          });
-        } catch (err) {
-          // Kein eingeloggter User ist ein normaler Fall
-          // eslint-disable-next-line no-console
-          console.log('No logged-in user:', err?.message || err);
-          if (!isMounted) return;
-          setUser(null);
-        }
-      } finally {
-        if (isMounted) {
-          setLoading(false);
-        }
-      }
-    };
-
-    initAuth();
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  // Nach erfolgreichem Login das User-Objekt setzen
-  // (z. B. aus loginWithPassword in authApi)
-  const login = (userData) => {
-    setUser((prev) => ({
-      ...prev,
-      ...userData,
-    }));
-  };
-
-  // Logout im Backend + lokalen State leeren
-  const logout = async () => {
-    try {
-      await logoutSession();
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error during logout:', error);
-    } finally {
-      setUser(null);
-    }
-  };
-
-  return (
-    <AuthContext.Provider
-      value={{
-        user,
-        loading,
-        login,
-        logout,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
-};
+// src/auth/AuthContext.jsx
+import React, {
+  createContext,
+  useState,
+  useEffect,
+} from 'react';
+import axios from 'axios';
+import { CSRF_URL } from './authConfig';
+import {
+  fetchCurrentUser,
+  logoutSession,
+} from './authApi';
+
+export const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  // Einmalige Axios-Basis-Konfiguration
+  useEffect(() => {
+    axios.defaults.withCredentials = true;
+    axios.defaults.xsrfCookieName = 'csrftoken';
+    axios.defaults.xsrfHeaderName = 'X-CSRFToken';
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const initAuth = async () => {
+      try {
+        // 1) CSRF-Cookie setzen (Django-View /api/csrf/)
+        try {
+          await axios.get(CSRF_URL, { withCredentials: true });
+          // console.log('CSRF cookie set');
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error('Error setting CSRF cookie:', err);
+        }
+
+        // 2) aktuellen User laden (falls Session vorhanden)
+        try {
+          const data = await fetchCurrentUser();
+          if (!isMounted) return;
+          setUser({
+            id: data.id,
+            username: data.username,
+            email: data.email,
+            first_name: data.first_name,
+            last_name: data.last_name,
+            role: data.role,
+            is_superuser: data.is_superuser,
+          });
+        } catch (err) {
+          // Kein eingeloggter User ist ein normaler Fall
+          // eslint-disable-next-line no-console
+          console.log('No logged-in user:', err?.message || err);
+          if (!isMounted) return;
+          setUser(null);
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    initAuth();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  // Nach erfolgreichem Login das User-Objekt setzen
+  // (z. B. aus loginWithPassword in authApi)
+  const login = (userData) => {
+    setUser((prev) => ({
+      ...prev,
+      ...userData,
+    }));
+  };
+
+  // Logout im Backend + lokalen State leeren
+  const logout = async () => {
+    try {
+      await logoutSession();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error during logout:', error);
+    } finally {
+      setUser(null);
+    }
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        loading,
+        login,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};