first commit

frontend/src/context/AppSettingsContext.tsx

@@ -0,0 +1,54 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+interface AppSettings {
+  scrollToTopThreshold: number; // 0.5 = 50%, 0.7 = 70%, etc.
+}
+
+interface AppSettingsContextType {
+  settings: AppSettings;
+  updateSettings: (newSettings: Partial<AppSettings>) => void;
+}
+
+const defaultSettings: AppSettings = {
+  scrollToTopThreshold: 0.7,
+};
+
+const AppSettingsContext = createContext<AppSettingsContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'opencrm_app_settings';
+
+export function AppSettingsProvider({ children }: { children: ReactNode }) {
+  const [settings, setSettings] = useState<AppSettings>(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      try {
+        return { ...defaultSettings, ...JSON.parse(stored) };
+      } catch {
+        return defaultSettings;
+      }
+    }
+    return defaultSettings;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  }, [settings]);
+
+  const updateSettings = (newSettings: Partial<AppSettings>) => {
+    setSettings(prev => ({ ...prev, ...newSettings }));
+  };
+
+  return (
+    <AppSettingsContext.Provider value={{ settings, updateSettings }}>
+      {children}
+    </AppSettingsContext.Provider>
+  );
+}
+
+export function useAppSettings() {
+  const context = useContext(AppSettingsContext);
+  if (!context) {
+    throw new Error('useAppSettings must be used within AppSettingsProvider');
+  }
+  return context;
+}

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,144 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { authApi } from '../services/api';
+import type { User } from '../types';
+
+interface AuthContextType {
+  user: User | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  customerLogin: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+  hasPermission: (permission: string) => boolean;
+  isCustomer: boolean;
+  isCustomerPortal: boolean;
+  developerMode: boolean;
+  setDeveloperMode: (enabled: boolean) => void;
+  refreshUser: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [developerMode, setDeveloperModeState] = useState(() => {
+    return localStorage.getItem('developerMode') === 'true';
+  });
+
+  const setDeveloperMode = (enabled: boolean) => {
+    setDeveloperModeState(enabled);
+    localStorage.setItem('developerMode', String(enabled));
+  };
+
+  // Disable developer mode if user doesn't have developer:access permission
+  useEffect(() => {
+    console.log('useEffect check - user:', user?.email, 'developerMode:', developerMode, 'has developer:access:', user?.permissions?.includes('developer:access'));
+    if (user && developerMode && !user.permissions.includes('developer:access')) {
+      console.log('Disabling developer mode because user lacks developer:access permission');
+      setDeveloperMode(false);
+    }
+  }, [user, developerMode]);
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      authApi.me()
+        .then((res) => {
+          if (res.success && res.data) {
+            setUser(res.data);
+          } else {
+            localStorage.removeItem('token');
+          }
+        })
+        .catch(() => {
+          localStorage.removeItem('token');
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const login = async (email: string, password: string) => {
+    const res = await authApi.login(email, password);
+    if (res.success && res.data) {
+      localStorage.setItem('token', res.data.token);
+      setUser(res.data.user);
+    } else {
+      throw new Error(res.error || 'Login fehlgeschlagen');
+    }
+  };
+
+  const customerLogin = async (email: string, password: string) => {
+    const res = await authApi.customerLogin(email, password);
+    if (res.success && res.data) {
+      localStorage.setItem('token', res.data.token);
+      setUser(res.data.user);
+    } else {
+      throw new Error(res.error || 'Login fehlgeschlagen');
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    setUser(null);
+  };
+
+  const refreshUser = async () => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      try {
+        const res = await authApi.me();
+        console.log('refreshUser response:', res);
+        console.log('permissions:', res.data?.permissions);
+        if (res.success && res.data) {
+          setUser(res.data);
+        }
+      } catch (err) {
+        console.error('refreshUser error:', err);
+      }
+    }
+  };
+
+  const hasPermission = (permission: string) => {
+    if (!user) return false;
+    return user.permissions.includes(permission);
+  };
+
+  // Ist der Benutzer ein Kunde (entweder Mitarbeiter mit Kundenzuordnung ODER Kundenportal-Login)
+  const isCustomer = !!(user?.customerId);
+  // Ist dies ein Kundenportal-Login (nicht ein Mitarbeiter mit Kundenzuordnung)
+  const isCustomerPortal = !!(user?.isCustomerPortal);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isLoading,
+        isAuthenticated: !!user,
+        login,
+        customerLogin,
+        logout,
+        hasPermission,
+        isCustomer,
+        isCustomerPortal,
+        developerMode,
+        setDeveloperMode,
+        refreshUser,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}