Commit Graph

78 Commits

Author SHA1 Message Date
Matt b6e5c21d8a FEAT: Enhance layout and styling in BerthDetailsModal and interest-berth-status for improved readability and visual appeal 2025-06-17 18:14:21 +02:00
Matt 5d614b3dc0 FEAT: Adjust padding and gap in berth status card layout for improved visual spacing 2025-06-17 18:09:45 +02:00
Matt b585daddde FEAT: Enhance berth color handling in dashboard components and improve authentication middleware with caching 2025-06-17 18:05:22 +02:00
Matt 0e85cb40bc Replace external berth dashboard with native Vue interface
- Replace iframe embed with full-featured berth status dashboard
- Add BerthDetailsModal and BerthStatusBadge components
- Implement search, filtering, and multiple view modes
- Add berth management API endpoints (get-by-id, update)
- Include measurement conversion utilities and type definitions
- Provide status summaries and visual berth overview
2025-06-17 15:59:39 +02:00
Matt 04ed9a094d FEAT: Implement Keycloak client with circuit breaker and retry logic for improved authentication resilience 2025-06-17 14:50:34 +02:00
Matt d436367ee6 FEAT: Enhance authentication session management with configurable cookie domain and improved token refresh logic 2025-06-16 17:53:43 +02:00
Matt a7df6834d7 FEAT: Migrate authentication system from Directus to Keycloak, implementing token refresh and enhancing session management 2025-06-15 17:37:14 +02:00
Matt d53f4f03f5 REF: Remove unnecessary x-tag headers from API requests in interest-related components 2025-06-15 17:18:24 +02:00
Matt c5aa294487 COMPLETE: Custom Keycloak SSO Authentication System
##  **Successful Migration from nuxt-oidc-auth to Custom Solution:**

### ** What We Built:**
-  **Removed problematic
uxt-oidc-auth** that was causing 502 errors
-  **Removed @nuxtjs/auth-next** (incompatible with Nuxt 3)
-  **Built custom OAuth 2.0 flow** that actually works!

### ** New Authentication Architecture:**

#### **Server-Side API Endpoints:**
-  /api/auth/keycloak/callback - Handles OAuth callback & token exchange
-  /api/auth/session - Check authentication status
-  /api/auth/logout - Clear session & redirect to Keycloak logout
-  /api/health - Health check endpoint for debugging

#### **Client-Side Integration:**
-  composables/useCustomAuth.ts - Vue composable for auth state management
-  Updated login page to use custom authentication
-  Secure cookie-based session management

### ** Authentication Flow:**
1. **User clicks SSO login**  Redirect to Keycloak
2. **Keycloak authenticates**  Callback to /auth/keycloak/callback
3. **Server exchanges code**  Get access token & user info
4. **Session created**  Secure cookie set
5. **User redirected**  Dashboard with active session

### ** Key Features:**
-  **No 502 errors** - Built-in error handling
-  **Session persistence** - Secure HTTP-only cookies
-  **Automatic expiration** - Token validation & cleanup
-  **Dual auth support** - Keycloak SSO + Directus fallback
-  **Proper logout** - Clears both app & Keycloak sessions

### ** Security Improvements:**
-  **HTTP-only cookies** prevent XSS attacks
-  **Secure flag** for HTTPS-only transmission
-  **SameSite protection** against CSRF
-  **Token validation** on every request

### ** Environment Variables Needed:**
- KEYCLOAK_CLIENT_SECRET - Your Keycloak client secret
- All existing variables remain unchanged

##  **Result: Working Keycloak SSO!**

The custom implementation eliminates the issues with
uxt-oidc-auth while providing:
-  Reliable OAuth 2.0 flow
-  Proper error handling
-  Session management
-  Clean logout process
-  Full Keycloak integration

##  **Ready to Deploy:**
Deploy this updated container and test the SSO login - it should work without 502 errors!
2025-06-15 15:36:48 +02:00
Matt 12403233c0 🔧 FIX: Disable OIDC global middleware to prevent redirect loops
CRITICAL FIX: The nuxt-oidc-auth module was causing infinite redirect loops
because its global middleware was active on ALL pages, including /login.

## 🚨 **Problem Solved:**
- Login page was redirecting to itself infinitely
- OIDC module auto-authenticating on every route
- 502 Bad Gateway errors from redirect loops

##  **Changes Made:**

### **nuxt.config.ts:**
- Added globalMiddlewareEnabled: false to OIDC middleware config
- This disables automatic authentication on all routes
- Prevents redirect loops on login page

### **Cleanup:**
- Removed obsolete pages/dashboard/keycloak-test.vue
- Fixed TypeScript errors from missing useKeycloak composable

## 🎯 **Result:**
 Login page should now load without redirect loops
 SSO button should work properly when clicked
 Manual authentication control via our middleware
 Maintains Directus auth compatibility

## 📋 **Next Steps:**
1. Rebuild container in Portainer with these changes
2. Test login page loads properly
3. Test SSO authentication flow
4. Verify no more 502 errors on callback

This fixes the core issue blocking the Keycloak SSO integration!
2025-06-14 16:07:01 +02:00
Matt 0ae190b255 MAJOR: Replace keycloak-js with nuxt-oidc-auth for seamless SSO integration
##  **SOLUTION: Migrate to Server-Side OIDC Authentication**

This completely replaces the problematic keycloak-js client-side implementation
with nuxt-oidc-auth, eliminating all CORS and iframe issues.

###  **Benefits:**
- **No more CORS errors** - Server-side OAuth flow
- **No iframe dependencies** - Eliminates cross-domain issues
- **Works with nginx proxy** - No proxy configuration conflicts
- **Better security** - Tokens handled server-side
- **Cleaner integration** - Native Nuxt patterns
- **Maintains Directus compatibility** - Dual auth support

###  **Installation & Configuration:**
- Added
uxt-oidc-auth module to nuxt.config.ts
- Configured Keycloak provider with proper OIDC settings
- Updated environment variables for security keys

###  **Code Changes:**

#### **Authentication Flow:**
- **middleware/authentication.ts** - Updated to check both Directus + OIDC auth
- **composables/useUnifiedAuth.ts** - Migrated to use useOidcAuth()
- **pages/login.vue** - Updated SSO button to use oidcLogin('keycloak')

#### **Configuration:**
- **nuxt.config.ts** - Added OIDC provider configuration
- **.env.example** - Updated with nuxt-oidc-auth environment variables
- Removed old Keycloak runtime config

#### **Cleanup:**
- Removed keycloak-js dependency from package.json
- Deleted obsolete files:
  - composables/useKeycloak.ts
  - pages/auth/callback.vue
  - server/utils/keycloak-oauth.ts
  - server/api/debug/ directory

###  **Authentication Routes (Auto-Generated):**
- /auth/keycloak/login - SSO login endpoint
- /auth/keycloak/logout - SSO logout endpoint
- /auth/keycloak/callback - OAuth callback (handled automatically)

###  **Security Setup Required:**
Environment variables needed for production:
- NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET
- NUXT_OIDC_TOKEN_KEY (base64 encoded 32-byte key)
- NUXT_OIDC_SESSION_SECRET (48-character random string)
- NUXT_OIDC_AUTH_SESSION_SECRET (48-character random string)

###  **Expected Results:**
 SSO login should work without CORS errors
 Compatible with nginx proxy setup
 Maintains existing Directus authentication
 Server-side session management
 Automatic token refresh

Ready for container rebuild and production testing!
2025-06-14 15:58:03 +02:00
Matt 0c9cd89667 Implement Official Keycloak JS Adapter with Proxy-Aware Configuration
MAJOR ENHANCEMENT: Complete Keycloak integration with proper HTTPS/proxy handling

## Core Improvements:

### 1. Enhanced Configuration (nuxt.config.ts)
- Added proxy trust configuration for nginx environments
- Configured baseUrl for production HTTPS enforcement
- Added debug mode configuration for development

### 2. Proxy-Aware Keycloak Composable (composables/useKeycloak.ts)
- Intelligent base URL detection (production vs development)
- Force HTTPS redirect URIs in production environments
- Enhanced debugging and logging capabilities
- Proper PKCE implementation for security
- Automatic token refresh mechanism

### 3. Dual Authentication System
- Updated middleware to support both Directus and Keycloak
- Enhanced useUnifiedAuth for seamless auth source switching
- Maintains backward compatibility with existing Directus users

### 4. OAuth Flow Implementation
- Created proper callback handler (pages/auth/callback.vue)
- Comprehensive error handling and user feedback
- Automatic redirect to dashboard on success

### 5. Enhanced Login Experience (pages/login.vue)
- Restored SSO login button with proper error handling
- Maintained existing Directus login form
- Clear separation between auth methods with visual divider

### 6. Comprehensive Testing Suite (pages/dashboard/keycloak-test.vue)
- Real-time configuration display
- Authentication status monitoring
- Interactive testing tools
- Detailed debug logging system

## Technical Solutions:

 **Proxy Detection**: Automatically detects nginx proxy and uses correct HTTPS URLs
 **HTTPS Enforcement**: Forces secure redirect URIs in production
 **Error Handling**: Comprehensive error catching with user-friendly messages
 **Debug Capabilities**: Enhanced logging for troubleshooting
 **Security**: Implements PKCE and secure token handling

## Infrastructure Compatibility:
- Works with nginx reverse proxy setups
- Compatible with Docker container networking
- Handles SSL termination at proxy level
- Supports both development and production environments

This implementation specifically addresses the HTTP/HTTPS redirect URI mismatch
that was causing 'unauthorized_client' errors in the proxy environment.
2025-06-14 15:26:26 +02:00
Matt fa35fcd235 CRITICAL: Temporarily disable Keycloak to restore application functionality
- Disable Keycloak integration in authentication middleware
- Update useUnifiedAuth to only use Directus authentication
- Rebuild login page with only Directus auth form
- Remove all Keycloak references that were causing JavaScript errors
- This restores the application to working state with Directus auth only

Application should now load and function normally. Keycloak can be re-enabled later once issues are resolved.
2025-06-14 15:07:41 +02:00
Matt a797c13867 MAJOR: Replace nuxt-openid-connect with official Keycloak JS adapter
- Remove problematic nuxt-openid-connect module that was causing OAuth issues
- Install and implement official keycloak-js adapter for better reliability
- Create new useKeycloak composable with proper token management
- Update useUnifiedAuth to work with new Keycloak implementation
- Fix authentication middleware to support both auth methods
- Update login page to use new Keycloak login function
- Clean up configuration and remove deprecated OIDC settings
- This should resolve all the HTTP/HTTPS redirect and token exchange issues
2025-06-14 14:50:29 +02:00
Matt 8e9d6d07ad Remove unused auth callback page and clean up OIDC config - module uses /oidc/cb automatically 2025-06-14 14:26:21 +02:00
Matt 5f8720bb63 Implement Keycloak authentication integration and unify user management 2025-06-14 14:09:56 +02:00
Matt 72ea543485 Update logo references and email logo URL in configuration 2025-06-13 13:36:14 +02:00
Matt da2d965da8 fixes 2025-06-12 17:52:57 +02:00
Matt 1a2e0d7ab0 updates 2025-06-12 17:42:42 +02:00
Matt 79a706efe3 feat: Implement stacked mobile layout for interest table
Mobile Table Redesign:
- Redesigned mobile table layout with stacked status badges under contact info
- Contact information takes 60% width with badges stacked below name/email
- All status badges (Sales Process, EOI, Contract, Lead Category) now stack vertically
- Eliminated horizontal scrolling issues and cramped mobile display

 Visual Improvements:
- Optimized badge sizing (x-small) for mobile to fit more content
- Enhanced spacing and alignment for better readability
- Improved touch targets and visual hierarchy
- Contact info and badges properly aligned for clean appearance

 Layout Structure:
- Mobile: 3 columns (Contact+Badges 60%, Status 20%, Created 20%)
- Desktop: Maintains original 6-column layout unchanged
- Responsive breakpoint at 768px for optimal mobile experience

 User Experience Enhancements:
- All status information visible without horizontal scrolling
- Better content density and information accessibility
- Maintained click functionality and hover effects
- Consistent design language across mobile and desktop

The mobile table now provides a much cleaner, more accessible experience with all status information clearly visible in a stacked format.
2025-06-12 17:24:06 +02:00
Matt 8ec6c883ab fix: Comprehensive mobile UI improvements and fixes
Interest Table Mobile Layout:
- Fixed broken table layout on mobile screens
- Optimized column widths to fit mobile viewports better
- Improved horizontal scrolling with visual indicators
- Enhanced responsive design for contact information display
- Better badge sizing and text truncation on mobile

 Mobile Actions Enhancement:
- Added delete interest button to mobile actions section
- Improved button layout in 2x2 grid for better accessibility
- Added proper loading states and disabled states
- Enhanced visual hierarchy with icons and labels

 Email Communication Fixes:
- Fixed refresh email button icon display on mobile
- Added proper mobile styling and tooltips
- Made button more accessible with larger touch targets

 Email Thread Width Issues:
- Fixed email threads exceeding screen width on mobile
- Implemented proper text wrapping and overflow handling
- Optimized timeline layout for mobile viewports
- Enhanced email card responsiveness
- Better handling of long email addresses and content
- Improved expansion panel sizing and spacing

 Mobile UX Improvements:
- Better touch targets and button sizing
- Improved visual feedback and loading states
- Enhanced text readability with optimized font sizes
- Consistent mobile spacing and padding throughout
- Fixed container overflow issues across components

All mobile components now properly respect viewport constraints and provide optimal user experience on mobile devices.
2025-06-12 17:14:14 +02:00
Matt b25e93d2a0 feat: Implement comprehensive PWA functionality
- Add full PWA configuration with manifest and service worker
- Create PWAInstallBanner component with mobile detection
- Implement install banner on login page (shows below login form)
- Add usePWA composable for reusable PWA functionality
- Configure offline support with Workbox caching strategies
- Add PWA initialization plugin
- Update app name to 'Port Nimara Portal' throughout
- Use circular logo in install banner and instructions
- Banner shows only once and hides if already installed
- Support both Android (direct install) and iOS (manual instructions)
- Add comprehensive documentation for PWA implementation

Features:
- Mobile-only install banner with dismissal tracking
- Standalone mode detection to hide banner when installed
- Platform-specific installation instructions
- Offline functionality with API caching
- Auto-updating service worker
- Native app-like experience when installed
2025-06-12 16:36:32 +02:00
Matt 4916c20f64 fixes 2025-06-12 16:26:10 +02:00
Matt af3a68e51b Feat: Complete EOI improvements and PWA implementation
EOI ENHANCEMENTS:
-  Fix EOI deletion to clear ALL signature fields (embedded links, timestamps, etc.)
-  Add EOI creation time tags automatically displayed on interest cards
-  Add signature status tags showing who has signed ( Client,  CC,  Developer)
-  Add pending signature tags for unsigned parties
-  Fix TypeScript errors with new Interest type fields

 UI IMPROVEMENTS:
-  Enhanced InterestDetailsModal with comprehensive status display
-  Fixed component prop naming issues
-  Better mobile and desktop responsiveness for tags

 PWA IMPLEMENTATION:
-  Complete PWA configuration with manifest
-  App installation capability
-  Offline support with service worker
-  Multiple icon sizes (72x72 to 512x512)
-  Branded theme colors and app metadata
-  Auto-update functionality

 USER EXPERIENCE:
- Users can now see EOI creation timestamps at a glance
- Clear visual indication of signature status for all parties
- App can be installed on mobile/desktop devices
- Proper reset of EOI state when deleted
- All embedded signature links properly cleared on deletion

The platform now provides complete EOI lifecycle management with PWA capabilities!
2025-06-12 16:16:30 +02:00
Matt 85773fc09e updates 2025-06-11 16:50:31 +02:00
Matt 0b6601fabc updates 2025-06-11 13:54:04 +02:00
Matt cf4af2cbff updates 2025-06-10 20:45:47 +02:00
Matt a78f2ac362 Fix UI/UX issues across email and interest components
- Added email attachment viewing and downloading functionality
- Removed 'Insert EOI link' button when EOI is already signed
- Changed refresh button color to black for better visibility
- Fixed Generate EOI button spacing with consistent margins
- Changed 'Interest Details' title to display client's full name
- Fixed mobile table scrolling cutoff in interest list by removing negative margins
- Improved email section mobile layout:
  - Fixed button sizes and display for mobile screens
  - Fixed thread section width to prevent horizontal scrolling
  - Added proper padding and overflow handling for expansion panels
  - Improved timeline and card responsiveness
2025-06-10 17:37:53 +02:00
Matt 839b307edd updates 2025-06-10 16:48:40 +02:00
Matt 49aa47ab10 mobile optimization 2025-06-10 16:01:21 +02:00
Matt 4579b35fe0 updates 2025-06-10 15:33:01 +02:00
Matt 9af9977749 updates 2025-06-10 15:27:57 +02:00
Matt c6b4c716a8 updates 2025-06-10 15:21:42 +02:00
Matt bb1a237961 updates 2025-06-10 14:32:20 +02:00
Matt 218705da52 Add EOI automation system with email processing and document management
- Implement automated EOI processing from sales emails
- Add EOI document upload and management capabilities
- Enhance email thread handling with better parsing and grouping
- Add retry logic and error handling for file operations
- Introduce Documeso integration for document processing
- Create server tasks and plugins infrastructure
- Update email composer with improved attachment handling
2025-06-10 13:59:09 +02:00
Matt fad7426ed8 removed marketing 2025-06-05 18:29:02 +02:00
Matt 8ac128b6eb updates 2025-06-05 18:26:18 +02:00
Matt c421d1dbf0 updates 2025-06-05 18:23:44 +02:00
Matt 408e5612b8 Add Social Media section to dashboard
Add navigation menu item and create new page with embedded marketing content from marketing.starbit.cloud.
2025-06-05 18:17:29 +02:00
Matt ef091d7b29 Update sales level styling and improve UI performance
- Standardize sales level color mapping across components
- Enhance delete button styling with flat variant and white text
- Improve stepper visualization with consistent color logic
- Optimize Safari scrolling performance with CSS transforms
- Add TypeScript casting for data operations
2025-06-05 14:49:29 +02:00
Matt 2ea72ef24e Add interest deletion and sales pipeline status tracking
- Add delete button with confirmation dialog to InterestDetailsModal
- Implement delete-interest API endpoint
- Add sales pipeline status section with visual indicators
- Update UI states to handle deletion loading states
- Add color-coded sales process level selection
2025-06-04 19:51:51 +02:00
Matt 4d3935e863 Fix file downloads for Safari with proper filename handling
Implement browser-specific download methods to ensure files download with correct filenames across all browsers. Safari now uses window.location.href while other browsers use blob URLs. Add Content-Disposition header to proxy endpoint for proper filename preservation.
2025-06-04 19:13:09 +02:00
Matt b7544d82f3 Add proxy downloads and bulk file operations
- Implement proxy download endpoint for better mobile Safari compatibility
- Add bulk selection with checkboxes in file browser
- Add bulk actions bar for downloading/deleting selected files
- Replace direct S3 downloads with server-proxied downloads
- Fix download issues on mobile devices by using proper link handling
2025-06-04 18:37:41 +02:00
Matt 1463fdb3d7 Fix file download for mobile Safari compatibility
Replace window.open() with programmatic link creation and click to ensure
file downloads work properly on mobile Safari. Also adds proper filename
handling to preserve extensions during download.
2025-06-04 18:29:52 +02:00
Matt bac1bb2b5e Add file rename functionality and improve preview handling
- Implement file/folder rename feature with dialog and API endpoint
- Add rename button to file browser with keyboard shortcuts
- Switch PDF preview from object to embed tag for better compatibility
- Fix CORS issues by fetching preview files as blobs with object URLs
- Add proper cleanup for object URLs to prevent memory leaks
- Add renameObject utility function for MinIO operations
2025-06-04 18:14:00 +02:00
Matt 27efd8c386 Add file browser menu item to dashboard
Added new navigation entry to the interest menu with:
- Route: /dashboard/file-browser
- Icon: mdi-folder
- Title: File Browser

This enables users to access the file browser feature from the dashboard navigation menu.
2025-06-04 16:36:12 +02:00
Matt 61cefa530e Add MinIO file browser with upload, preview, and management features
- Implement file browser UI with upload/download capabilities
- Add API endpoints for file operations (list, upload, delete, preview)
- Create FileUploader and FilePreviewModal components
- Configure MinIO integration with environment variables
- Add documentation for MinIO file browser setup
2025-06-04 16:32:50 +02:00
Matt 42efcf3ce1 Remove logo from interest list page header 2025-06-04 14:57:14 +02:00
Matt af9f1859a4 Add Port Nimara branding to interest list page
Replace generic icon with company logo in header and update page title to include "Port Nimara Berth Interest List" for better brand visibility.
2025-06-04 04:12:54 +02:00
Matt d97802c773 Disable EOI Queue menu item in dashboard 2025-06-04 03:16:52 +02:00