Add foundational API client, UI components, and state management setup
- Created `generate-api-client.sh` for OpenAPI-based TypeScript client generation. - Added `src/lib/api` with Axios-based API client, error handling utilities, and placeholder for generated types. - Implemented Zustand-based `authStore` for user authentication and token management. - Integrated reusable UI components (e.g., `Dialog`, `Select`, `Textarea`, `Sheet`, `Separator`, `Checkbox`) using Radix UI and utility functions. - Established groundwork for client-server integration, state management, and modular UI development.
This commit is contained in:
77
frontend/src/stores/authStore.ts
Executable file
77
frontend/src/stores/authStore.ts
Executable file
@@ -0,0 +1,77 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
|
||||
// User type - will be replaced with generated types later
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
full_name?: string;
|
||||
is_active: boolean;
|
||||
is_superuser: boolean;
|
||||
organization_id?: string;
|
||||
}
|
||||
|
||||
interface AuthState {
|
||||
// State
|
||||
user: User | null;
|
||||
accessToken: string | null;
|
||||
refreshToken: string | null;
|
||||
isAuthenticated: boolean;
|
||||
|
||||
// Actions
|
||||
setUser: (user: User) => void;
|
||||
setTokens: (accessToken: string, refreshToken: string) => void;
|
||||
setAuth: (user: User, accessToken: string, refreshToken: string) => void;
|
||||
clearAuth: () => void;
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
// Initial state
|
||||
user: null,
|
||||
accessToken: null,
|
||||
refreshToken: null,
|
||||
isAuthenticated: false,
|
||||
|
||||
// Actions
|
||||
setUser: (user) =>
|
||||
set({
|
||||
user,
|
||||
isAuthenticated: true,
|
||||
}),
|
||||
|
||||
setTokens: (accessToken, refreshToken) =>
|
||||
set({
|
||||
accessToken,
|
||||
refreshToken,
|
||||
}),
|
||||
|
||||
setAuth: (user, accessToken, refreshToken) =>
|
||||
set({
|
||||
user,
|
||||
accessToken,
|
||||
refreshToken,
|
||||
isAuthenticated: true,
|
||||
}),
|
||||
|
||||
clearAuth: () =>
|
||||
set({
|
||||
user: null,
|
||||
accessToken: null,
|
||||
refreshToken: null,
|
||||
isAuthenticated: false,
|
||||
}),
|
||||
}),
|
||||
{
|
||||
name: 'auth-storage', // localStorage key
|
||||
partialize: (state) => ({
|
||||
// Only persist these fields
|
||||
user: state.user,
|
||||
accessToken: state.accessToken,
|
||||
refreshToken: state.refreshToken,
|
||||
isAuthenticated: state.isAuthenticated,
|
||||
}),
|
||||
}
|
||||
)
|
||||
);
|
||||
4
frontend/src/stores/index.ts
Executable file
4
frontend/src/stores/index.ts
Executable file
@@ -0,0 +1,4 @@
|
||||
// Zustand stores
|
||||
// Examples: authStore, uiStore, etc.
|
||||
|
||||
export { useAuthStore } from './authStore';
|
||||
Reference in New Issue
Block a user