@micha.bigler/ui-core-micha 1.0.0

package/dist/pages/LoginPage.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+import { Typography } from '@mui/material';
+import { NarrowPage } from '../layout/PageLayout';
+import { AuthContext } from '../auth/AuthContext';
+import { authApi } from '../auth/authApi';
+import LoginForm from '../components/LoginForm';
+export function LoginPage() {
+    const navigate = useNavigate();
+    const { login } = useContext(AuthContext);
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState('');
+    const handleSubmit = async ({ identifier, password }) => {
+        var _a, _b;
+        setError('');
+        setSubmitting(true);
+        try {
+            const data = await authApi.loginWithPassword(identifier, password);
+            login(data.user);
+            navigate('/');
+        }
+        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) ||
+                'Login failed.');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const handleForgotPassword = () => {
+        navigate('/reset-request-password');
+    };
+    const handleSocialLogin = (providerKey) => {
+        setError('');
+        try {
+            authApi.startSocialLogin(providerKey);
+        }
+        catch (err) {
+            // This will only fire on immediate client-side errors
+            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 })] }));
+}
+;
+export default LoginPage;

package/dist/pages/PasswordChangePage.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/pages/PasswordChangePage.jsx
+import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { Typography } from '@mui/material';
+import { NarrowPage } from '../layout/PageLayout';
+import PasswordChangeForm from '../components/PasswordChangeForm';
+import { changePassword } from '../auth/authApi';
+export function PasswordChangePage() {
+    const [submitting, setSubmitting] = useState(false);
+    const [successMessage, setSuccessMessage] = useState('');
+    const [error, setError] = useState('');
+    const handleSubmit = async (oldPassword, newPassword) => {
+        setSuccessMessage('');
+        setError('');
+        setSubmitting(true);
+        try {
+            await changePassword(oldPassword, newPassword);
+            setSuccessMessage('Password changed successfully.');
+        }
+        catch (err) {
+            setError(err.message || 'Could not change password.');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsxs(NarrowPage, { title: "Change password", subtitle: "Enter your current password and a new password.", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Change password" }) }), successMessage && (_jsx(Typography, { color: "primary", gutterBottom: true, children: successMessage })), error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), _jsx(PasswordChangeForm, { onSubmit: handleSubmit, submitting: submitting })] }));
+}
+;
+export default PasswordChangePage;

package/dist/pages/PasswordInvitePage.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/pages/PasswordInvitePage.jsx
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+import { Typography } from '@mui/material';
+import { NarrowPage } from '../layout/PageLayout';
+import PasswordSetForm from '../components/PasswordSetForm';
+import { authApi } from '../auth/authApi';
+export function PasswordInvitePage() {
+    const { uid, token } = useParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState('');
+    const [successMessage, setSuccessMessage] = useState('');
+    const [checked, setChecked] = useState(false);
+    // Optional: andere Texte je nach „invite“ vs „reset“
+    const isInvite = location.pathname.startsWith('/invite/');
+    useEffect(() => {
+        if (!uid || !token) {
+            setError('This link is invalid.');
+            setChecked(true);
+            return;
+        }
+        const check = async () => {
+            try {
+                await authApi.verifyResetToken(uid, token);
+                setChecked(true);
+            }
+            catch (err) {
+                setError('This link is invalid or has expired.');
+                setChecked(true);
+            }
+        };
+        check();
+    }, [uid, token]);
+    const handleSubmit = async (newPassword) => {
+        if (!uid || !token) {
+            setError('This link is invalid.');
+            return;
+        }
+        setSubmitting(true);
+        setError('');
+        setSuccessMessage('');
+        try {
+            await authApi.setNewPassword(uid, token, newPassword);
+            setSuccessMessage(isInvite
+                ? 'Password set successfully. You can now log in.'
+                : 'Password changed successfully. You can now log in.');
+            navigate('/login');
+        }
+        catch (err) {
+            setError(err.message || 'Could not set password.');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    if (!checked && !error) {
+        return (_jsx(NarrowPage, { title: "Checking link\u2026", children: _jsx(Typography, { children: "Validating your link\u2026" }) }));
+    }
+    return (_jsxs(NarrowPage, { title: isInvite ? 'Welcome' : 'Reset password', subtitle: isInvite
+            ? 'Please choose a password to access your account.'
+            : 'Please choose a new password.', children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Set password" }) }), error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), successMessage && (_jsx(Typography, { color: "primary", gutterBottom: true, children: successMessage })), !successMessage && !error && (_jsx(PasswordSetForm, { onSubmit: handleSubmit, submitting: submitting }))] }));
+}
+;
+export default PasswordInvitePage;

package/dist/pages/PasswordResetRequestPage.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/auth/pages/PasswordResetRequestPage.jsx
+import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { Typography } from '@mui/material';
+import { NarrowPage } from '../layout/PageLayout';
+import { requestPasswordReset } from '../auth/authApi';
+import PasswordResetRequestForm from '../components/PasswordResetRequestForm';
+export function PasswordResetRequestPage() {
+    const [submitting, setSubmitting] = useState(false);
+    const [successMessage, setSuccessMessage] = useState('');
+    const [error, setError] = useState('');
+    const handleSubmit = async (email) => {
+        setSuccessMessage('');
+        setError('');
+        if (!email) {
+            setError('Please enter an email address.');
+            return;
+        }
+        setSubmitting(true);
+        try {
+            await requestPasswordReset(email);
+            setSuccessMessage('If an account exists for this address, a reset email has been sent.');
+        }
+        catch (err) {
+            setError(err.message || 'Could not send reset email.');
+        }
+        finally {
+            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 })] }));
+}
+;
+export default PasswordResetRequestPage;

package/package.json

@@ -0,0 +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"
+  }
+}

package/src/auth/AuthContext.jsx

@@ -0,0 +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>
+  );
+};

package/src/auth/authApi.jsx

@@ -0,0 +1,211 @@
+import axios from 'axios';
+import { HEADLESS_BASE, USERS_BASE } from './authConfig'; 
+
+// Helper to normalise error messages from API responses
+function extractErrorMessage(error) {
+  const data = error.response?.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/src/auth/authConfig.jsx

@@ -0,0 +1,31 @@
+// 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/src/components/LoginForm.jsx

@@ -0,0 +1,93 @@
+// 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 (
+    <Box
+      component="form"
+      onSubmit={handleSubmit}
+      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+    >
+      {error && (
+        <Typography color="error" gutterBottom>
+          {error}
+        </Typography>
+      )}
+
+      <TextField
+        label="Email address"
+        type="email"
+        required
+        fullWidth
+        value={identifier}
+        onChange={(e) => setIdentifier(e.target.value)}
+        disabled={disabled}
+      />
+
+      <TextField
+        label="Password"
+        type="password"
+        required
+        fullWidth
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        disabled={disabled}
+      />
+
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          mt: 1,
+        }}
+      >
+        <Button
+          type="submit"
+          variant="contained"
+          disabled={disabled}
+        >
+          Login
+        </Button>
+
+        <Button
+          type="button"
+          variant="text"
+          onClick={onForgotPassword}
+          disabled={disabled}
+        >
+          Forgot password?
+        </Button>
+      </Box>
+
+      <Divider sx={{ my: 2 }}>or</Divider>
+
+      <SocialLoginButtons onProviderClick={onSocialLogin} />
+    </Box>
+  );
+};
+
+export default LoginForm;