diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 5a327688..89aa91bc 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -26,17 +26,25 @@ function updateFavicon(logoUrl: string) { } // Watch for site settings changes and update favicon/title -watch(() => appStore.siteLogo, (newLogo) => { - if (newLogo) { - updateFavicon(newLogo) - } -}, { immediate: true }) +watch( + () => appStore.siteLogo, + (newLogo) => { + if (newLogo) { + updateFavicon(newLogo) + } + }, + { immediate: true } +) -watch(() => appStore.siteName, (newName) => { - if (newName) { - document.title = `${newName} - AI API Gateway` - } -}, { immediate: true }) +watch( + () => appStore.siteName, + (newName) => { + if (newName) { + document.title = `${newName} - AI API Gateway` + } + }, + { immediate: true } +) onMounted(async () => { // Check if setup is needed diff --git a/frontend/src/composables/useAccountOAuth.ts b/frontend/src/composables/useAccountOAuth.ts index 7a4cb712..e0f77590 100644 --- a/frontend/src/composables/useAccountOAuth.ts +++ b/frontend/src/composables/useAccountOAuth.ts @@ -53,9 +53,10 @@ export function useAccountOAuth() { try { const proxyConfig = proxyId ? { proxy_id: proxyId } : {} - const endpoint = addMethod === 'oauth' - ? '/admin/accounts/generate-auth-url' - : '/admin/accounts/generate-setup-token-url' + const endpoint = + addMethod === 'oauth' + ? '/admin/accounts/generate-auth-url' + : '/admin/accounts/generate-setup-token-url' const response = await adminAPI.accounts.generateAuthUrl(endpoint, proxyConfig) authUrl.value = response.auth_url @@ -85,9 +86,10 @@ export function useAccountOAuth() { try { const proxyConfig = proxyId ? { proxy_id: proxyId } : {} - const endpoint = addMethod === 'oauth' - ? '/admin/accounts/exchange-code' - : '/admin/accounts/exchange-setup-token-code' + const endpoint = + addMethod === 'oauth' + ? '/admin/accounts/exchange-code' + : '/admin/accounts/exchange-setup-token-code' const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, { session_id: sessionId.value, @@ -121,9 +123,10 @@ export function useAccountOAuth() { try { const proxyConfig = proxyId ? { proxy_id: proxyId } : {} - const endpoint = addMethod === 'oauth' - ? '/admin/accounts/cookie-auth' - : '/admin/accounts/setup-token-cookie-auth' + const endpoint = + addMethod === 'oauth' + ? '/admin/accounts/cookie-auth' + : '/admin/accounts/setup-token-cookie-auth' const tokenInfo = await adminAPI.accounts.exchangeCode(endpoint, { session_id: '', @@ -142,7 +145,10 @@ export function useAccountOAuth() { // Parse multiple session keys const parseSessionKeys = (input: string): string[] => { - return input.split('\n').map(k => k.trim()).filter(k => k) + return input + .split('\n') + .map((k) => k.trim()) + .filter((k) => k) } // Build extra info from token response diff --git a/frontend/src/composables/useOpenAIOAuth.ts b/frontend/src/composables/useOpenAIOAuth.ts index a9b3800e..4b5ffe31 100644 --- a/frontend/src/composables/useOpenAIOAuth.ts +++ b/frontend/src/composables/useOpenAIOAuth.ts @@ -55,7 +55,10 @@ export function useOpenAIOAuth() { payload.redirect_uri = redirectUri } - const response = await adminAPI.accounts.generateAuthUrl('/admin/openai/generate-auth-url', payload) + const response = await adminAPI.accounts.generateAuthUrl( + '/admin/openai/generate-auth-url', + payload + ) authUrl.value = response.auth_url sessionId.value = response.session_id return true diff --git a/frontend/src/stores/README.md b/frontend/src/stores/README.md index 232f7be9..35c7df41 100644 --- a/frontend/src/stores/README.md +++ b/frontend/src/stores/README.md @@ -9,13 +9,16 @@ This directory contains all Pinia stores for the Sub2API frontend application. Manages user authentication state, login/logout, and token persistence. **State:** + - `user: User | null` - Current authenticated user - `token: string | null` - JWT authentication token **Computed:** + - `isAuthenticated: boolean` - Whether user is currently authenticated **Actions:** + - `login(credentials)` - Authenticate user with username/password - `register(userData)` - Register new user account - `logout()` - Clear authentication and logout @@ -27,14 +30,17 @@ Manages user authentication state, login/logout, and token persistence. Manages global UI state including sidebar, loading indicators, and toast notifications. **State:** + - `sidebarCollapsed: boolean` - Sidebar collapsed state - `loading: boolean` - Global loading state - `toasts: Toast[]` - Active toast notifications **Computed:** + - `hasActiveToasts: boolean` - Whether any toasts are active **Actions:** + - `toggleSidebar()` - Toggle sidebar state - `setSidebarCollapsed(collapsed)` - Set sidebar state explicitly - `setLoading(isLoading)` - Set loading state @@ -54,106 +60,104 @@ Manages global UI state including sidebar, loading indicators, and toast notific ### Auth Store ```typescript -import { useAuthStore } from '@/stores'; +import { useAuthStore } from '@/stores' // In component setup -const authStore = useAuthStore(); +const authStore = useAuthStore() // Initialize on app startup -authStore.checkAuth(); +authStore.checkAuth() // Login try { - await authStore.login({ username: 'user', password: 'pass' }); - console.log('Logged in:', authStore.user); + await authStore.login({ username: 'user', password: 'pass' }) + console.log('Logged in:', authStore.user) } catch (error) { - console.error('Login failed:', error); + console.error('Login failed:', error) } // Check authentication if (authStore.isAuthenticated) { - console.log('User is logged in:', authStore.user?.username); + console.log('User is logged in:', authStore.user?.username) } // Logout -authStore.logout(); +authStore.logout() ``` ### App Store ```typescript -import { useAppStore } from '@/stores'; +import { useAppStore } from '@/stores' // In component setup -const appStore = useAppStore(); +const appStore = useAppStore() // Sidebar control -appStore.toggleSidebar(); -appStore.setSidebarCollapsed(true); +appStore.toggleSidebar() +appStore.setSidebarCollapsed(true) // Loading state -appStore.setLoading(true); +appStore.setLoading(true) // ... do work -appStore.setLoading(false); +appStore.setLoading(false) // Or use helper await appStore.withLoading(async () => { - const data = await fetchData(); - return data; -}); + const data = await fetchData() + return data +}) // Toast notifications -appStore.showSuccess('Operation completed!'); -appStore.showError('Something went wrong!', 5000); -appStore.showInfo('FYI: This is informational'); -appStore.showWarning('Be careful!'); +appStore.showSuccess('Operation completed!') +appStore.showError('Something went wrong!', 5000) +appStore.showInfo('FYI: This is informational') +appStore.showWarning('Be careful!') // Custom toast -const toastId = appStore.showToast('info', 'Custom message', undefined); // No auto-dismiss +const toastId = appStore.showToast('info', 'Custom message', undefined) // No auto-dismiss // Later... -appStore.hideToast(toastId); +appStore.hideToast(toastId) ``` ### Combined Usage in Vue Component ```vue