fix: Image display and authentication issues in /cli and /web (#403)
Commit: 6fcfbac85e583a0c7347d6f300693cc0f8171dbe
Date: 2025-10-17 10:32:24 +0000
Author: PascalHavelange
Commit Message
fix: Image display and authentication issues in /cli and /web (#403)
* fix: Image display and authentication issues in /cli and /web
## Critical Issues Fixed
### 1. Image Display Fails with 302 Redirects in /cli
- **Problem**: Images in /cli item views resulted in 302 redirects to /web/login
- **Root Cause**: HTML `<img>` tags cannot send authentication headers (browser limitation)
- **Solution**: Fetch images as blobs using API client, create blob URLs for display
### 2. /cli Making Unauthorized Requests to /web Routes
- **Problem**: /cli app used window.location.origin for API URLs
- **Solution**: Created useApiBaseUrl composable to use VITE_API_BASE_URL configuration
### 3. Delete Confirmation Dialog Shows No Text
- **Problem**: Confirmation dialog appeared but displayed no title or message
- **Root Cause**: Store refs not properly unwrapped when passed to component props
- **Solution**: Used storeToRefs() to properly unwrap reactive refs
### 4. Alt Text Editing Causes Image List Reload
- **Problem**: Editing alt text triggered full image list reload with flickering
- **Solution**: Implemented optimistic updates without refetching
### 5. Error Handler Had Hardcoded /login Fallback
- **Problem**: window.location.href = '/login' breaks /cli SPA navigation
- **Solution**: Removed hardcoded fallback, use centralized error display
### 6. Backend: Wrong Disk Configuration for ItemImage
- **Problem**: ItemImage view/download used pictures.disk instead of available.images.disk
- **Root Cause**: Files aren't moved when attaching, but controller used wrong config
- **Solution**: Updated ItemImageController to use available.images.disk
### 7. Blade Views: Wrong Image URLs
- **Problem**: /web views used asset('storage/') instead of proper routes
- **Solution**: Changed to use route('available-images.view', $image)
## Changes Made
### Backend
- `app/Http/Controllers/ItemImageController.php`: Fixed disk configuration for view() and download()
- `resources/views/item-images/create.blade.php`: Fixed image URLs to use proper routes
### Frontend - Core Infrastructure
- `resources/js/composables/useApiBaseUrl.ts` (NEW): Composable for consistent API base URL
- `resources/js/utils/errorHandler.ts`: Removed hardcoded /login fallback
### Frontend - Stores
- `resources/js/stores/itemImage.ts`: Added blob URL fetching with getImageUrl()
- `resources/js/stores/availableImage.ts`: Updated to use useApiBaseUrl()
### Frontend - Components
- `resources/js/components/ItemImageManager.vue`:
- Implemented blob URL pattern for authenticated images
- Fixed delete confirmation with fallback names
- Optimized alt text updates (no reload)
- `resources/js/components/global/DeleteConfirmation.vue`: Fixed store refs unwrapping
### Documentation
- `.github/copilot-instructions.md`: Minor updates
### Cleanup
- Removed obsolete files: API_PERMISSION_IMPLEMENTATION.md, fix-phpdoc-shaped-arrays.ps1, keep-awake.ps1
## Architecture Principles Enforced
✅ /cli only communicates with /api through API client
✅ All authenticated requests use API client (sends auth headers)
✅ Images fetched as blobs, then blob URLs used in <img> tags
✅ Error handling uses centralized display, not hardcoded redirects
✅ No direct URL construction for authenticated endpoints
## Testing
### Backend
- Run tests: `php artisan test --parallel`
### Frontend
- Type check: `npm run type-check` ✅
- Lint: `npm run lint` ✅
- Build: `npm run build` ✅
### Manual Testing
1. Navigate to `/cli/items/{id}` with images
2. Verify images display correctly (no SVG placeholders)
3. Verify no 302 redirects in Network tab
4. Verify no requests to /web routes
5. Test delete confirmation shows proper text
6. Test alt text editing doesn't cause reload
Fixes #[issue-number-if-applicable]
* 5.7.1
---------
Co-authored-by: Pascal HAVELANGE <havelangep@hotmail.com>
Files Changed
- 📝 Modified:
.github/copilot-instructions.md
- ❌ Deleted:
API_PERMISSION_IMPLEMENTATION.md
- 📝 Modified:
app/Http/Controllers/ItemImageController.php
- 📝 Modified:
package-lock.json
- 📝 Modified:
package.json
- 📝 Modified:
resources/js/components/ItemImageManager.vue
- 📝 Modified:
resources/js/components/__tests__/global/DeleteConfirmation.spec.ts
- 📝 Modified:
resources/js/components/global/DeleteConfirmation.vue
- ✅ Added:
resources/js/composables/useApiBaseUrl.ts
- 📝 Modified:
resources/js/stores/availableImage.ts
- 📝 Modified:
resources/js/stores/itemImage.ts
- 📝 Modified:
resources/js/utils/errorHandler.ts
- 📝 Modified:
resources/views/item-images/create.blade.php
- ❌ Deleted:
scripts/fix-phpdoc-shaped-arrays.ps1
- ❌ Deleted:
scripts/keep-awake.ps1
- 📝 Modified:
tests/Feature/Api/ItemImage/ViewTest.php
Links
This documentation was automatically generated from Git commit data.