inital

frontend/src/services/api.ts

@@ -0,0 +1,102 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
+import { API_URL } from '../utils/config';
+import { getToken, removeToken, removeUser } from '../utils/storage';
+
+export interface ApiError {
+  message: string;
+  status?: number;
+  code?: string;
+}
+
+class ApiService {
+  private axiosInstance: AxiosInstance;
+
+  constructor() {
+    this.axiosInstance = axios.create({
+      baseURL: API_URL,
+      timeout: 30000, // 30 seconds timeout
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    // Request interceptor: Add Authorization header with JWT
+    this.axiosInstance.interceptors.request.use(
+      (config) => {
+        const token = getToken();
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+      },
+      (error) => {
+        console.error('Request interceptor error:', error);
+        return Promise.reject(this.handleError(error));
+      }
+    );
+
+    // Response interceptor: Handle errors
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error: AxiosError) => {
+        if (error.response?.status === 401) {
+          // Clear tokens and redirect to login
+          console.warn('Unauthorized request, redirecting to login');
+          removeToken();
+          removeUser();
+          window.location.href = '/login';
+        }
+        return Promise.reject(this.handleError(error));
+      }
+    );
+  }
+
+  private handleError(error: AxiosError): ApiError {
+    if (error.response) {
+      // Server responded with error
+      const message = (error.response.data as any)?.message ||
+                     (error.response.data as any)?.error ||
+                     error.message ||
+                     'Ein Fehler ist aufgetreten';
+      return {
+        message,
+        status: error.response.status,
+        code: error.code,
+      };
+    } else if (error.request) {
+      // Request was made but no response received
+      return {
+        message: 'Keine Antwort vom Server. Bitte überprüfen Sie Ihre Internetverbindung.',
+        code: error.code,
+      };
+    } else {
+      // Something else happened
+      return {
+        message: error.message || 'Ein unerwarteter Fehler ist aufgetreten',
+        code: error.code,
+      };
+    }
+  }
+
+  async get<T = any>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
+    return this.axiosInstance.get<T>(url, config);
+  }
+
+  async post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
+    return this.axiosInstance.post<T>(url, data, config);
+  }
+
+  async put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
+    return this.axiosInstance.put<T>(url, data, config);
+  }
+
+  async delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
+    return this.axiosInstance.delete<T>(url, config);
+  }
+
+  async patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
+    return this.axiosInstance.patch<T>(url, data, config);
+  }
+}
+
+export const api = new ApiService();

frontend/src/services/auth.ts

@@ -0,0 +1,58 @@
+import { api } from './api';
+import { AUTHENTIK_URL, CLIENT_ID } from '../utils/config';
+import { User } from '../types/auth.types';
+
+const REDIRECT_URI = `${window.location.origin}/auth/callback`;
+
+export interface AuthCallbackResponse {
+  token: string;
+  user: User;
+}
+
+export const authService = {
+  /**
+   * Generate Authentik authorization URL
+   */
+  getAuthUrl(): string {
+    const params = new URLSearchParams({
+      client_id: CLIENT_ID,
+      redirect_uri: REDIRECT_URI,
+      response_type: 'code',
+      scope: 'openid profile email',
+    });
+
+    return `${AUTHENTIK_URL}/application/o/authorize/?${params.toString()}`;
+  },
+
+  /**
+   * Handle OAuth callback - send code to backend, receive JWT
+   */
+  async handleCallback(code: string): Promise<AuthCallbackResponse> {
+    const response = await api.post<AuthCallbackResponse>('/api/auth/callback', {
+      code,
+      redirect_uri: REDIRECT_URI,
+    });
+    return response.data;
+  },
+
+  /**
+   * Logout - clear tokens
+   */
+  async logout(): Promise<void> {
+    try {
+      // Optionally call backend logout endpoint
+      await api.post('/api/auth/logout');
+    } catch (error) {
+      console.error('Error during logout:', error);
+      // Continue with logout even if backend call fails
+    }
+  },
+
+  /**
+   * Get current user information
+   */
+  async getCurrentUser(): Promise<User> {
+    const response = await api.get<User>('/api/user/me');
+    return response.data;
+  },
+};