feat: add React frontend with auth, project list, import, and project detail pages
Converts packages/web from vanilla TypeScript Vite scaffold to React with: - React 19, react-router-dom v7, @tanstack/react-query v5, Tailwind CSS v4 - JWT auth context with auto-refresh token support - Login/Register pages, protected Layout with auth guard - Projects list with grid cards and delete action - ImportDialog supporting URL or file upload with API key display - ProjectDetail with 4 tabs: Documentation, Modules, MCP Integration, Settings - All TypeScript compiles cleanly (noEmit check passes) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
74
packages/web/src/lib/api.ts
Normal file
74
packages/web/src/lib/api.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
const API_BASE = '/api';
|
||||
|
||||
type ApiResponse<T> = {
|
||||
success: boolean;
|
||||
data?: T;
|
||||
error?: { code: string; message: string };
|
||||
};
|
||||
|
||||
let accessToken: string | null = localStorage.getItem('accessToken');
|
||||
let refreshToken: string | null = localStorage.getItem('refreshToken');
|
||||
|
||||
export function setTokens(access: string, refresh: string) {
|
||||
accessToken = access;
|
||||
refreshToken = refresh;
|
||||
localStorage.setItem('accessToken', access);
|
||||
localStorage.setItem('refreshToken', refresh);
|
||||
}
|
||||
|
||||
export function clearTokens() {
|
||||
accessToken = null;
|
||||
refreshToken = null;
|
||||
localStorage.removeItem('accessToken');
|
||||
localStorage.removeItem('refreshToken');
|
||||
}
|
||||
|
||||
export function getAccessToken() {
|
||||
return accessToken;
|
||||
}
|
||||
|
||||
async function refreshAccessToken(): Promise<boolean> {
|
||||
if (!refreshToken) return false;
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/auth/refresh`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ refreshToken }),
|
||||
});
|
||||
if (!res.ok) return false;
|
||||
const json: ApiResponse<{ accessToken: string; refreshToken: string }> = await res.json();
|
||||
if (json.success && json.data) {
|
||||
setTokens(json.data.accessToken, json.data.refreshToken);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export async function apiFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
const headers = new Headers(options.headers);
|
||||
if (!headers.has('Content-Type') && !(options.body instanceof FormData)) {
|
||||
headers.set('Content-Type', 'application/json');
|
||||
}
|
||||
if (accessToken) {
|
||||
headers.set('Authorization', `Bearer ${accessToken}`);
|
||||
}
|
||||
|
||||
let res = await fetch(`${API_BASE}${path}`, { ...options, headers });
|
||||
|
||||
if (res.status === 401 && refreshToken) {
|
||||
const refreshed = await refreshAccessToken();
|
||||
if (refreshed) {
|
||||
headers.set('Authorization', `Bearer ${accessToken}`);
|
||||
res = await fetch(`${API_BASE}${path}`, { ...options, headers });
|
||||
}
|
||||
}
|
||||
|
||||
const json: ApiResponse<T> = await res.json();
|
||||
if (!json.success) {
|
||||
throw new Error(json.error?.message || 'Request failed');
|
||||
}
|
||||
return json.data as T;
|
||||
}
|
||||
Reference in New Issue
Block a user