Working state before icon/utils fixes - Oct 22
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
// static/js/shared/api-client.js
|
||||
// static/shared/js/api-client.js
|
||||
/**
|
||||
* API Client for Multi-Tenant Ecommerce Platform
|
||||
*
|
||||
@@ -9,6 +9,16 @@
|
||||
* - Request/response interceptors
|
||||
*/
|
||||
|
||||
// Log levels: 0 = None, 1 = Error, 2 = Warning, 3 = Info, 4 = Debug
|
||||
const API_LOG_LEVEL = 3; // Set to 3 for production, 4 for full debugging
|
||||
|
||||
const apiLog = {
|
||||
error: (...args) => API_LOG_LEVEL >= 1 && console.error('❌ [API ERROR]', ...args),
|
||||
warn: (...args) => API_LOG_LEVEL >= 2 && console.warn('⚠️ [API WARN]', ...args),
|
||||
info: (...args) => API_LOG_LEVEL >= 3 && console.info('ℹ️ [API INFO]', ...args),
|
||||
debug: (...args) => API_LOG_LEVEL >= 4 && console.log('🔍 [API DEBUG]', ...args)
|
||||
};
|
||||
|
||||
const API_BASE_URL = '/api/v1';
|
||||
|
||||
/**
|
||||
@@ -17,13 +27,24 @@ const API_BASE_URL = '/api/v1';
|
||||
class APIClient {
|
||||
constructor(baseURL = API_BASE_URL) {
|
||||
this.baseURL = baseURL;
|
||||
apiLog.info('API Client initialized with base URL:', baseURL);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get stored authentication token
|
||||
*/
|
||||
getToken() {
|
||||
return localStorage.getItem('admin_token') || localStorage.getItem('vendor_token');
|
||||
const adminToken = localStorage.getItem('admin_token');
|
||||
const vendorToken = localStorage.getItem('vendor_token');
|
||||
const token = adminToken || vendorToken;
|
||||
|
||||
apiLog.debug('Getting token:', {
|
||||
hasAdminToken: !!adminToken,
|
||||
hasVendorToken: !!vendorToken,
|
||||
usingToken: token ? 'admin or vendor' : 'none'
|
||||
});
|
||||
|
||||
return token;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -38,6 +59,9 @@ class APIClient {
|
||||
const token = this.getToken();
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
apiLog.debug('Authorization header added');
|
||||
} else {
|
||||
apiLog.debug('No token available, request will be unauthenticated');
|
||||
}
|
||||
|
||||
return headers;
|
||||
@@ -48,6 +72,14 @@ class APIClient {
|
||||
*/
|
||||
async request(endpoint, options = {}) {
|
||||
const url = `${this.baseURL}${endpoint}`;
|
||||
const method = options.method || 'GET';
|
||||
|
||||
apiLog.info(`${method} ${url}`);
|
||||
apiLog.debug('Request options:', {
|
||||
method,
|
||||
hasBody: !!options.body,
|
||||
customHeaders: Object.keys(options.headers || {})
|
||||
});
|
||||
|
||||
const config = {
|
||||
...options,
|
||||
@@ -55,26 +87,61 @@ class APIClient {
|
||||
};
|
||||
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
const response = await fetch(url, config);
|
||||
const duration = Date.now() - startTime;
|
||||
|
||||
// Handle 401 Unauthorized
|
||||
if (response.status === 401) {
|
||||
this.handleUnauthorized();
|
||||
throw new Error('Unauthorized - please login again');
|
||||
}
|
||||
apiLog.info(`Response: ${response.status} ${response.statusText} (${duration}ms)`);
|
||||
|
||||
// Parse response
|
||||
const data = await response.json();
|
||||
let data;
|
||||
try {
|
||||
data = await response.json();
|
||||
apiLog.debug('Response data received:', {
|
||||
hasData: !!data,
|
||||
dataType: typeof data,
|
||||
keys: data ? Object.keys(data) : []
|
||||
});
|
||||
} catch (parseError) {
|
||||
apiLog.error('Failed to parse JSON response:', parseError);
|
||||
throw new Error('Invalid JSON response from server');
|
||||
}
|
||||
|
||||
// Handle 401 Unauthorized - Just clear tokens, DON'T redirect
|
||||
if (response.status === 401) {
|
||||
apiLog.warn('401 Unauthorized - Authentication failed');
|
||||
apiLog.debug('Error details:', data);
|
||||
apiLog.info('Clearing authentication tokens');
|
||||
this.clearTokens();
|
||||
|
||||
const errorMessage = data.message || data.detail || 'Unauthorized - please login again';
|
||||
apiLog.error('Throwing authentication error:', errorMessage);
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
// Handle non-OK responses
|
||||
if (!response.ok) {
|
||||
throw new Error(data.detail || data.message || 'Request failed');
|
||||
const errorMessage = data.detail || data.message || `Request failed with status ${response.status}`;
|
||||
apiLog.error('Request failed:', {
|
||||
status: response.status,
|
||||
message: errorMessage,
|
||||
errorCode: data.error_code
|
||||
});
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
apiLog.info('Request completed successfully');
|
||||
return data;
|
||||
|
||||
} catch (error) {
|
||||
console.error('API request failed:', error);
|
||||
// Log error details
|
||||
if (error.name === 'TypeError' && error.message.includes('fetch')) {
|
||||
apiLog.error('Network error - Failed to connect to server');
|
||||
} else {
|
||||
apiLog.error('Request error:', error.message);
|
||||
}
|
||||
|
||||
apiLog.debug('Full error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -86,6 +153,8 @@ class APIClient {
|
||||
const queryString = new URLSearchParams(params).toString();
|
||||
const url = queryString ? `${endpoint}?${queryString}` : endpoint;
|
||||
|
||||
apiLog.debug('GET request params:', params);
|
||||
|
||||
return this.request(url, {
|
||||
method: 'GET'
|
||||
});
|
||||
@@ -95,6 +164,11 @@ class APIClient {
|
||||
* POST request
|
||||
*/
|
||||
async post(endpoint, data = {}) {
|
||||
apiLog.debug('POST request data:', {
|
||||
hasData: !!data,
|
||||
dataKeys: Object.keys(data)
|
||||
});
|
||||
|
||||
return this.request(endpoint, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data)
|
||||
@@ -105,6 +179,11 @@ class APIClient {
|
||||
* PUT request
|
||||
*/
|
||||
async put(endpoint, data = {}) {
|
||||
apiLog.debug('PUT request data:', {
|
||||
hasData: !!data,
|
||||
dataKeys: Object.keys(data)
|
||||
});
|
||||
|
||||
return this.request(endpoint, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data)
|
||||
@@ -115,31 +194,59 @@ class APIClient {
|
||||
* DELETE request
|
||||
*/
|
||||
async delete(endpoint) {
|
||||
apiLog.debug('DELETE request');
|
||||
|
||||
return this.request(endpoint, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle unauthorized access
|
||||
* Clear authentication tokens
|
||||
*/
|
||||
handleUnauthorized() {
|
||||
clearTokens() {
|
||||
apiLog.info('Clearing all authentication tokens...');
|
||||
|
||||
const tokensBefore = {
|
||||
admin_token: !!localStorage.getItem('admin_token'),
|
||||
admin_user: !!localStorage.getItem('admin_user'),
|
||||
vendor_token: !!localStorage.getItem('vendor_token'),
|
||||
vendor_user: !!localStorage.getItem('vendor_user'),
|
||||
token: !!localStorage.getItem('token')
|
||||
};
|
||||
apiLog.debug('Tokens before clear:', tokensBefore);
|
||||
|
||||
localStorage.removeItem('admin_token');
|
||||
localStorage.removeItem('admin_user');
|
||||
localStorage.removeItem('vendor_token');
|
||||
localStorage.removeItem('vendor_user');
|
||||
localStorage.removeItem('token');
|
||||
|
||||
// Redirect to appropriate login page
|
||||
if (window.location.pathname.includes('/admin/')) {
|
||||
window.location.href = '/static/admin/login.html';
|
||||
} else if (window.location.pathname.includes('/vendor/')) {
|
||||
window.location.href = '/static/vendor/login.html';
|
||||
}
|
||||
const tokensAfter = {
|
||||
admin_token: !!localStorage.getItem('admin_token'),
|
||||
admin_user: !!localStorage.getItem('admin_user'),
|
||||
vendor_token: !!localStorage.getItem('vendor_token'),
|
||||
vendor_user: !!localStorage.getItem('vendor_user'),
|
||||
token: !!localStorage.getItem('token')
|
||||
};
|
||||
apiLog.debug('Tokens after clear:', tokensAfter);
|
||||
apiLog.info('All tokens cleared');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle unauthorized access
|
||||
* DEPRECATED - Now just clears tokens, doesn't redirect
|
||||
* Server handles redirects via exception handler
|
||||
*/
|
||||
handleUnauthorized() {
|
||||
apiLog.warn('handleUnauthorized called (DEPRECATED) - use clearTokens instead');
|
||||
this.clearTokens();
|
||||
}
|
||||
}
|
||||
|
||||
// Create global API client instance
|
||||
const apiClient = new APIClient();
|
||||
apiLog.info('Global API client created');
|
||||
|
||||
/**
|
||||
* Authentication helpers
|
||||
@@ -150,7 +257,9 @@ const Auth = {
|
||||
*/
|
||||
isAuthenticated() {
|
||||
const token = localStorage.getItem('admin_token') || localStorage.getItem('vendor_token');
|
||||
return !!token;
|
||||
const isAuth = !!token;
|
||||
apiLog.debug('Auth check:', isAuth ? 'authenticated' : 'not authenticated');
|
||||
return isAuth;
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -158,11 +267,21 @@ const Auth = {
|
||||
*/
|
||||
getCurrentUser() {
|
||||
const userStr = localStorage.getItem('admin_user') || localStorage.getItem('vendor_user');
|
||||
if (!userStr) return null;
|
||||
if (!userStr) {
|
||||
apiLog.debug('No user found in storage');
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(userStr);
|
||||
const user = JSON.parse(userStr);
|
||||
apiLog.debug('Current user:', {
|
||||
username: user.username,
|
||||
role: user.role,
|
||||
id: user.id
|
||||
});
|
||||
return user;
|
||||
} catch (e) {
|
||||
apiLog.error('Failed to parse user data:', e);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
@@ -172,13 +291,16 @@ const Auth = {
|
||||
*/
|
||||
isAdmin() {
|
||||
const user = this.getCurrentUser();
|
||||
return user && user.role === 'admin';
|
||||
const isAdmin = user && user.role === 'admin';
|
||||
apiLog.debug('Admin check:', isAdmin ? 'is admin' : 'not admin');
|
||||
return isAdmin;
|
||||
},
|
||||
|
||||
/**
|
||||
* Login
|
||||
*/
|
||||
async login(username, password) {
|
||||
apiLog.info('Auth.login called');
|
||||
const response = await apiClient.post('/auth/login', {
|
||||
username,
|
||||
password
|
||||
@@ -186,9 +308,11 @@ const Auth = {
|
||||
|
||||
// Store token and user
|
||||
if (response.user.role === 'admin') {
|
||||
apiLog.info('Storing admin credentials');
|
||||
localStorage.setItem('admin_token', response.access_token);
|
||||
localStorage.setItem('admin_user', JSON.stringify(response.user));
|
||||
} else {
|
||||
apiLog.info('Storing vendor credentials');
|
||||
localStorage.setItem('vendor_token', response.access_token);
|
||||
localStorage.setItem('vendor_user', JSON.stringify(response.user));
|
||||
}
|
||||
@@ -200,10 +324,9 @@ const Auth = {
|
||||
* Logout
|
||||
*/
|
||||
logout() {
|
||||
localStorage.removeItem('admin_token');
|
||||
localStorage.removeItem('admin_user');
|
||||
localStorage.removeItem('vendor_token');
|
||||
localStorage.removeItem('vendor_user');
|
||||
apiLog.info('Auth.logout called');
|
||||
apiClient.clearTokens();
|
||||
apiLog.info('User logged out');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -269,6 +392,8 @@ const Utils = {
|
||||
* Show toast notification
|
||||
*/
|
||||
showToast(message, type = 'info', duration = 3000) {
|
||||
apiLog.debug('Showing toast:', { message, type, duration });
|
||||
|
||||
// Create toast element
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast toast-${type}`;
|
||||
@@ -374,4 +499,6 @@ if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initTableScrollDetection);
|
||||
} else {
|
||||
initTableScrollDetection();
|
||||
}
|
||||
}
|
||||
|
||||
apiLog.info('API Client module loaded');
|
||||
Reference in New Issue
Block a user