@micha.bigler/ui-core-micha 1.0.0

package/dist/auth/AuthContext.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 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 === null || err === void 0 ? void 0 : 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) => (Object.assign(Object.assign({}, 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 (_jsx(AuthContext.Provider, { value: {
+            user,
+            loading,
+            login,
+            logout,
+        }, children: children }));
+};

package/dist/auth/authApi.js

@@ -0,0 +1,172 @@
+import axios from 'axios';
+import { HEADLESS_BASE, USERS_BASE } from './authConfig';
+// Helper to normalise error messages from API responses
+function extractErrorMessage(error) {
+    var _a;
+    const data = (_a = error.response) === null || _a === void 0 ? void 0 : _a.data;
+    if (!data) {
+        return error.message || 'Unknown error';
+    }
+    if (typeof data.detail === 'string') {
+        return data.detail;
+    }
+    if (Array.isArray(data.non_field_errors) && data.non_field_errors.length > 0) {
+        return data.non_field_errors[0];
+    }
+    return JSON.stringify(data);
+}
+// Helper to get CSRF token from cookies manually
+function getCsrfToken() {
+    if (!document.cookie)
+        return null;
+    const match = document.cookie.match(/csrftoken=([^;]+)/);
+    return match ? match[1] : null;
+}
+/**
+ * Fetches the current authenticated user from your own User API.
+ */
+export async function fetchCurrentUser() {
+    const res = await axios.get(`${USERS_BASE}/current/`, {
+        withCredentials: true,
+    });
+    return res.data;
+}
+/**
+ * Updates the user profile fields.
+ */
+export async function updateUserProfile(data) {
+    const res = await axios.patch(`${USERS_BASE}/current/`, data, {
+        withCredentials: true,
+    });
+    return res.data;
+}
+/**
+ * Logs a user in using email/password via allauth headless.
+ */
+export async function loginWithPassword(email, password) {
+    try {
+        await axios.post(`${HEADLESS_BASE}/auth/login`, {
+            email,
+            password,
+        }, { withCredentials: true });
+    }
+    catch (error) {
+        if (error.response && error.response.status === 409) {
+            // Proceed normally if already logged in
+        }
+        else {
+            throw new Error(extractErrorMessage(error));
+        }
+    }
+    const user = await fetchCurrentUser();
+    return user;
+}
+/**
+ * Requests a password reset email via allauth headless.
+ */
+export async function requestPasswordReset(email) {
+    try {
+        await axios.post(`${USERS_BASE}/reset-request/`, { email }, { withCredentials: true });
+    }
+    catch (error) {
+        throw new Error(extractErrorMessage(error));
+    }
+}
+/**
+ * Sets a new password using a reset key (from email link).
+ */
+export async function resetPasswordWithKey(key, newPassword) {
+    try {
+        await axios.post(`${HEADLESS_BASE}/auth/password/reset/key`, {
+            key,
+            password: newPassword,
+        }, { withCredentials: true });
+    }
+    catch (error) {
+        throw new Error(extractErrorMessage(error));
+    }
+}
+/**
+ * Changes the password for an authenticated user.
+ */
+export async function changePassword(currentPassword, newPassword) {
+    try {
+        await axios.post(`${HEADLESS_BASE}/account/password/change`, {
+            current_password: currentPassword,
+            new_password: newPassword,
+        }, { withCredentials: true });
+    }
+    catch (error) {
+        throw new Error(extractErrorMessage(error));
+    }
+}
+/**
+ * Logs the user out via allauth headless.
+ */
+export async function logoutSession() {
+    try {
+        const headers = {};
+        const csrfToken = getCsrfToken();
+        if (csrfToken) {
+            headers['X-CSRFToken'] = csrfToken;
+        }
+        await axios.delete(`${HEADLESS_BASE}/auth/session`, {
+            withCredentials: true,
+            headers,
+        });
+    }
+    catch (error) {
+        if (error.response && [401, 404, 410].includes(error.response.status)) {
+            return;
+        }
+        // eslint-disable-next-line no-console
+        console.error('Logout error:', error);
+    }
+}
+/**
+ * Starts an OAuth social login flow for the given provider.
+ * Provider examples: "google", "microsoft".
+ * * FIX:
+ * 1. Uses POST instead of GET (standard for headless init flows).
+ * 2. Uses the correct path '/providers/{provider}/login'.
+ */
+export function startSocialLogin(provider) {
+    window.location.href = `/accounts/${provider}/login/?process=login`;
+}
+/**
+ * Loads the current session information directly from allauth headless.
+ */
+export async function fetchHeadlessSession() {
+    const res = await axios.get(`${HEADLESS_BASE}/auth/session`, {
+        withCredentials: true,
+    });
+    return res.data;
+}
+export async function loginWithPasskey() {
+    throw new Error('Passkey login is not implemented yet.');
+}
+export async function registerPasskey() {
+    throw new Error('Passkey registration is not implemented yet.');
+}
+export async function verifyResetToken(uid, token) {
+    const res = await axios.get(`${USERS_BASE}/password-reset/${uid}/${token}/`, { withCredentials: true });
+    return res.data;
+}
+export async function setNewPassword(uid, token, newPassword) {
+    const res = await axios.post(`${USERS_BASE}/password-reset/${uid}/${token}/`, { new_password: newPassword }, { withCredentials: true });
+    return res.data;
+}
+export const authApi = {
+    fetchCurrentUser,
+    updateUserProfile,
+    loginWithPassword,
+    requestPasswordReset,
+    changePassword,
+    logoutSession,
+    startSocialLogin,
+    fetchHeadlessSession,
+    verifyResetToken,
+    setNewPassword,
+    loginWithPasskey,
+    registerPasskey,
+};

package/dist/auth/authConfig.js

@@ -0,0 +1,23 @@
+// src/auth/authConfig.js
+// Basis-Pfad für die Headless-Allauth-API
+export const AUTH_BASE = '/api/auth';
+// Variante (z. B. "browser" oder später "app")
+export const HEADLESS_VARIANT = 'browser';
+// Version der Headless-API
+export const HEADLESS_VERSION = 'v1';
+// Vollständige Basis-URL für Auth-Calls zu allauth.headless
+export const HEADLESS_BASE = `${AUTH_BASE}/${HEADLESS_VARIANT}/${HEADLESS_VERSION}`;
+// Eigene User-API
+export const USERS_BASE = '/api/users';
+// CSRF-Endpoint (Django-View csrf_token_view)
+export const CSRF_URL = '/api/csrf/';
+// Konfiguration der Social-Provider
+export const SOCIAL_PROVIDERS = {
+    google: 'google',
+    microsoft: 'microsoft',
+};
+// Feature-Flags (falls du später Dinge toggeln willst)
+export const FEATURES = {
+    passkeysEnabled: false, // kannst du später auf true setzen
+    mfaEnabled: true,
+};

package/dist/components/LoginForm.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/components/LoginForm.jsx
+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 [identifier, setIdentifier] = useState('');
+    const [password, setPassword] = useState('');
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (!onSubmit)
+            return;
+        onSubmit({ identifier, password });
+    };
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(TextField, { label: "Email address", type: "email", required: true, fullWidth: true, value: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: "Password", type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    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 })] }));
+};
+export default LoginForm;

package/dist/components/PasswordChangeForm.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Box, TextField, Button, Stack } from '@mui/material';
+/**
+ * A simplified form to handle password changes.
+ * Does not require password confirmation.
+ */
+const PasswordChangeForm = ({ onSubmit }) => {
+    const [currentPassword, setCurrentPassword] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!onSubmit)
+            return;
+        setSubmitting(true);
+        try {
+            // Send the current and new password to the parent component
+            await onSubmit(currentPassword, newPassword);
+            // Reset form fields on success
+            setCurrentPassword('');
+            setNewPassword('');
+        }
+        catch (err) {
+            // Errors are generally handled by the parent
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsx(Box, { component: "form", onSubmit: handleSubmit, sx: { maxWidth: 500 }, children: _jsxs(Stack, { spacing: 2, children: [_jsx(TextField, { label: "Current Password", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), required: true, fullWidth: true, disabled: submitting }), _jsx(TextField, { label: "New Password", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), required: true, fullWidth: true, disabled: submitting }), _jsx(Box, { children: _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting ? 'Changing...' : 'Change Password' }) })] }) }));
+};
+export default PasswordChangeForm;

package/dist/components/PasswordResetRequestForm.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/components/PasswordResetRequestForm.jsx
+import React, { useState } from 'react';
+import { Box, TextField, Button } from '@mui/material';
+const PasswordResetRequestForm = ({ onSubmit, submitting = false }) => {
+    const [email, setEmail] = useState('');
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (onSubmit) {
+            onSubmit(email);
+        }
+    };
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }, children: [_jsx(TextField, { label: "Email address", type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: "Send reset link" })] }));
+};
+export default PasswordResetRequestForm;

package/dist/components/PasswordSetForm.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/components/PasswordSetForm.jsx
+import React, { useState } from 'react';
+import { Box, TextField, Button } from '@mui/material';
+/**
+ * Simple form to set a new password (once, with confirmation).
+ * Caller reicht onSubmit(newPassword), kümmert sich um redirect / API call.
+ */
+const PasswordSetForm = ({ onSubmit, submitting = false }) => {
+    const [password1, setPassword1] = useState('');
+    const [password2, setPassword2] = useState('');
+    const [localError, setLocalError] = useState('');
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        setLocalError('');
+        if (!password1 || !password2) {
+            setLocalError('Please enter the new password twice.');
+            return;
+        }
+        if (password1 !== password2) {
+            setLocalError('The passwords do not match.');
+            return;
+        }
+        if (onSubmit) {
+            onSubmit(password1);
+        }
+    };
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }, children: [localError && (_jsx(Box, { sx: { colour: 'error.main', fontSize: 14 }, children: localError })), _jsx(TextField, { label: "New password", type: "password", fullWidth: true, autoComplete: "new-password", value: password1, onChange: (e) => setPassword1(e.target.value), disabled: submitting }), _jsx(TextField, { label: "Confirm new password", type: "password", fullWidth: true, autoComplete: "new-password", value: password2, onChange: (e) => setPassword2(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: "Set password" })] }));
+};
+export default PasswordSetForm;

package/dist/components/ProfileComponent.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/ProfileComponent.jsx
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Box, Stack, TextField, FormControlLabel, Checkbox, Button, CircularProgress, Alert, Typography, } from '@mui/material';
+import { USERS_BASE } from '../auth/authConfig';
+/**
+ * ProfileComponent
+ *
+ * - Lädt das aktuelle User-Objekt von `${USERS_BASE}/current/`
+ * - Zeigt Basisfelder (Name, E-Mail, etc.)
+ * - Optional Privacy/Cookie-Checkboxen
+ * - Ruft onSubmit(payload) auf, um Änderungen zu speichern
+ */
+export function ProfileComponent({ onLoad, onSubmit, submitText = 'Save', showName = true, showPrivacy = true, showCookies = true, }) {
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState('');
+    const [userId, setUserId] = useState(null);
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [acceptedPrivacy, setAcceptedPrivacy] = useState(false);
+    const [acceptedCookies, setAcceptedCookies] = useState(false);
+    // Load current user on mount
+    useEffect(() => {
+        let mounted = true;
+        const loadUser = async () => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            setLoading(true);
+            setError('');
+            try {
+                const res = await axios.get(`${USERS_BASE}/current/`, {
+                    withCredentials: true,
+                });
+                if (!mounted)
+                    return;
+                const data = res.data;
+                setUserId((_a = data.id) !== null && _a !== void 0 ? _a : null);
+                setUsername((_b = data.username) !== null && _b !== void 0 ? _b : '');
+                setEmail((_c = data.email) !== null && _c !== void 0 ? _c : '');
+                setFirstName((_d = data.first_name) !== null && _d !== void 0 ? _d : '');
+                setLastName((_e = data.last_name) !== null && _e !== void 0 ? _e : '');
+                setAcceptedPrivacy(Boolean(data.accepted_privacy_statement));
+                setAcceptedCookies(Boolean(data.accepted_convenience_cookies));
+                if (onLoad) {
+                    onLoad(data);
+                }
+            }
+            catch (err) {
+                if (!mounted)
+                    return;
+                setError(((_g = (_f = err.response) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.detail) ||
+                    err.message ||
+                    'Unable to load profile.');
+            }
+            finally {
+                if (mounted)
+                    setLoading(false);
+            }
+        };
+        loadUser();
+        return () => {
+            mounted = false;
+        };
+    }, [onLoad]);
+    const handleSubmit = async (event) => {
+        var _a, _b;
+        event.preventDefault();
+        if (!onSubmit)
+            return;
+        setSaving(true);
+        setError('');
+        setSuccess('');
+        const payload = {
+            first_name: firstName,
+            last_name: lastName,
+            // Die Serializer-Felder sind flach, werden aber über `source="profile.*"`
+            // ins Profil gemappt.
+            accepted_privacy_statement: acceptedPrivacy,
+            accepted_convenience_cookies: acceptedCookies,
+        };
+        try {
+            await onSubmit(payload);
+            setSuccess('Profile updated successfully.');
+        }
+        catch (err) {
+            setError(((_b = (_a = err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                err.message ||
+                'Error while saving profile.');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    if (loading) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(CircularProgress, {}) }));
+    }
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { maxWidth: 600, display: 'flex', flexDirection: 'column', gap: 2 }, children: [error && (_jsx(Alert, { severity: "error", children: error })), success && (_jsx(Alert, { severity: "success", children: success })), _jsxs(Stack, { spacing: 2, children: [_jsx(TextField, { label: "Username", value: username, fullWidth: true, disabled: true }), _jsx(TextField, { label: "Email", type: "email", value: email, fullWidth: true, disabled: true })] }), showName && (_jsxs(Stack, { spacing: 2, direction: { xs: 'column', sm: 'row' }, children: [_jsx(TextField, { label: "First name", value: firstName, onChange: (e) => setFirstName(e.target.value), fullWidth: true }), _jsx(TextField, { label: "Last name", value: lastName, onChange: (e) => setLastName(e.target.value), fullWidth: true })] })), (showPrivacy || showCookies) && (_jsxs(Box, { sx: { mt: 1 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: "Privacy and cookies" }), _jsxs(Stack, { spacing: 1, children: [showPrivacy && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: acceptedPrivacy, onChange: (e) => setAcceptedPrivacy(e.target.checked) }), label: "I agree with the privacy statement." })), showCookies && (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: acceptedCookies, onChange: (e) => setAcceptedCookies(e.target.checked) }), label: "I allow convenience cookies." }))] })] })), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { type: "submit", variant: "contained", disabled: saving, children: saving ? 'Saving…' : submitText }) })] }));
+}
+;
+export default ProfileComponent;

package/dist/components/SecurityComponent.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Box, Typography, Divider, Button, Stack, Alert, } from '@mui/material';
+import PasswordChangeForm from './PasswordChangeForm';
+import SocialLoginButtons from './SocialLoginButtons';
+import { authApi } from '../auth/authApi';
+const SecurityComponent = () => {
+    const [message, setMessage] = useState('');
+    const [error, setError] = useState('');
+    const handleSocialClick = async (provider) => {
+        setMessage('');
+        setError('');
+        try {
+            // FIX: Await the async function to catch network errors
+            await authApi.startSocialLogin(provider);
+        }
+        catch (e) {
+            setError(e.message || 'Social login could not be started.');
+        }
+    };
+    const handlePasswordChange = async (currentPassword, newPassword) => {
+        var _a, _b;
+        setMessage('');
+        setError('');
+        try {
+            await authApi.changePassword(currentPassword, newPassword);
+            setMessage('Password changed successfully.');
+        }
+        catch (err) {
+            const errorMsg = ((_b = (_a = err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                err.message ||
+                'Could not change password.';
+            setError(errorMsg);
+        }
+    };
+    return (_jsxs(Box, { children: [message && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message })), error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Password" }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Social logins" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Sign in using a connected Google or Microsoft account." }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick }), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Passkeys (coming soon)" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Use passkeys for passwordless sign-in. This section will be active once WebAuthn endpoints are wired in the backend." }), _jsx(Stack, { direction: "row", spacing: 2, children: _jsx(Button, { variant: "outlined", disabled: true, children: "Add passkey" }) })] }));
+};
+export default SecurityComponent;

package/dist/components/SocialLoginButtons.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/components/SocialLoginButtons.jsx
+import React from 'react';
+import { Stack, Button, Box } from '@mui/material';
+import { SOCIAL_PROVIDERS } from '../auth/authConfig';
+/**
+ * Renders buttons for social login providers.
+ * The caller passes a handler that receives the provider key.
+ */
+const SocialLoginButtons = ({ onProviderClick }) => {
+    const handleClick = (provider) => {
+        if (onProviderClick) {
+            onProviderClick(provider);
+        }
+    };
+    return (_jsxs(Stack, { spacing: 1.5, sx: { mt: 1 }, children: [_jsx(Button, { variant: "outlined", fullWidth: true, onClick: () => handleClick(SOCIAL_PROVIDERS.google), startIcon: _jsx(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,
+                    }, children: "G" }), children: "Continue with Google" }), _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: "Continue with Microsoft" })] }));
+};
+export default SocialLoginButtons;

package/dist/index.js

@@ -0,0 +1,14 @@
+// Auth Core & Hooks
+export { authApi } from './auth/authApi';
+export { AuthContext, AuthProvider } from './auth/AuthContext';
+// Falls du einen Custom Hook hast: export { useAuth } from './auth/react/useAuth';
+// Components
+export { NarrowPage, WidePage } from './layout/PageLayout';
+export { LoginPage } from './pages/LoginPage';
+export { PasswordResetRequestPage } from './pages/PasswordResetRequestPage';
+export { PasswordChangePage } from './pages/PasswordChangePage';
+export { PasswordInvitePage } from './pages/PasswordInvitePage';
+export { AccountPage } from './pages/AccountPage';
+export { ProfileComponent } from './components/ProfileComponent';
+// Falls du noch pure UI-Komponenten hast (Formulare)
+// export { default as LoginForm } from './components/forms/LoginForm';

package/dist/layout/PageLayout.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/layout/PageLayout.jsx
+import React from 'react';
+import { Container, Box, Typography } from '@mui/material';
+// Layout for content pages with larger width (e.g. Profile, Welcome, Input)
+export const WidePage = ({ title, children }) => (_jsxs(Container, { maxWidth: "md", sx: { mt: 4 }, children: [title && (_jsx(Typography, { variant: "h4", gutterBottom: true, children: title })), children] }));
+// Layout for forms or narrow pages (e.g. Login, Reset, Invite)
+export const NarrowPage = ({ title, subtitle, children }) => (_jsx(Container, { maxWidth: "md", sx: { mt: 4 }, children: _jsxs(Box, { sx: { maxWidth: 480, mx: 'auto' }, children: [title && (_jsx(Typography, { variant: "h4", gutterBottom: true, children: title })), subtitle && (_jsx(Typography, { paragraph: true, children: subtitle })), children] }) }));

package/dist/pages/AccountPage.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useContext } from 'react';
+import { Helmet } from 'react-helmet';
+import { Tabs, Tab, Box } from '@mui/material';
+import { WidePage } from '../layout/PageLayout';
+import ProfileComponent from '../components/ProfileComponent';
+import SecurityComponent from '../components/SecurityComponent'; // Kommentiere ich ein, bis die Datei existiert, um Build-Fehler zu vermeiden
+import { authApi } from '../auth/authApi';
+import { AuthContext } from '../auth/AuthContext';
+export function AccountPage() {
+    const [tab, setTab] = useState('account');
+    const { login } = useContext(AuthContext);
+    const handleTabChange = (_event, newValue) => {
+        setTab(newValue);
+    };
+    // Diese Funktion übernimmt das tatsächliche Speichern
+    const handleProfileSubmit = async (payload) => {
+        // 1. Send update to backend via PATCH
+        const updatedUser = await authApi.updateUserProfile(payload);
+        // 2. Update local global context with fresh data (so header/sidebar update immediately)
+        login(updatedUser);
+    };
+    return (_jsxs(WidePage, { title: "Account", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Account" }) }), _jsxs(Tabs, { value: tab, onChange: handleTabChange, sx: { mb: 3 }, children: [_jsx(Tab, { label: "Account", value: "account" }), _jsx(Tab, { label: "Security", value: "security" })] }), tab === 'account' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(ProfileComponent, { onLoad: () => { }, onSubmit: handleProfileSubmit, submitText: "Save", showName: true, showPrivacy: true, showCookies: true }) })), tab === 'security' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SecurityComponent, {}) }))] }));
+}
+;
+export default AccountPage;