Add support ticket documentation and relevant attachments

- Created new markdown file for Support Ticket - 3224942 with a link to the support page. - Added a separate markdown file for Supprt Tickets with the same link. - Updated workspace files to include new markdown files and attachments. - Added various attachments related to the support ticket, including images and PDFs.
2026-02-02 13:03:28 -05:00
parent 84f1fcb42a
commit 161b758a1b
44 changed files with 1638 additions and 267 deletions
--- a/docs/projects/Pokedex.Online/archive/auth-hub/progress.md
+++ b/docs/projects/Pokedex.Online/archive/auth-hub/progress.md
@@ -0,0 +1,261 @@
+# Auth Hub Implementation - PROGRESS UPDATE
+
+## Completed ✅
+
+### Phase 1: Core Infrastructure (FOUNDATION COMPLETE)
+- [x] **Created `src/config/platforms.js`** - Full platform registry with:
+  - Challonge configuration (OAuth, API Key, Client Credentials)
+  - Discord configuration (OAuth with identify scope)
+  - Helper functions: getPlatform(), getAllPlatforms(), hasAuthMethod(), getAuthMethod()
+  - Full JSDoc comments for all exports
+
+- [x] **Created `src/composables/useOAuth.js`** - 400+ line unified OAuth handler:
+  - Multi-provider token storage with localStorage persistence
+  - Provider-specific state management (Map-based storage)
+  - Authorization URL generation with return_to support
+  - CSRF protection via state parameter validation
+  - Code exchange with provider routing
+  - Automatic token refresh with 5-minute expiry buffer
+  - Token validation and cleanup
+  - Comprehensive error handling and logging
+  - Full JSDoc comments on all methods
+
+- [x] **Created `src/composables/useDiscordOAuth.js`** - Thin wrapper for Discord:
+  - Wrapper around useOAuth('discord')
+  - Discord user profile management (username, ID, tag)
+  - fetchUserProfile() method for backend integration
+  - hasDevAccess() helper for permission checking
+  - Full method documentation
+
+## In Progress / Pending ⚠️
+
+### Phase 1: Core Infrastructure (NEEDS FILE EDITING TOOLS)
+- [ ] **Update `src/router/index.js`** - Need to:
+  - Import AuthenticationHub component
+  - Add route: { path: '/auth', name: 'AuthenticationHub', component: AuthenticationHub }
+  - Add legacy redirects:
+    - /api-key-manager → /auth
+    - /settings → /auth
+  - **STATUS:** File identified, changes drafted, awaiting file editor
+
+- [ ] **Update `src/views/OAuthCallback.vue`** - Need to:
+  - Extract provider from query/sessionStorage (default: 'challonge')
+  - Support return_to query parameter
+  - Use new useOAuth(provider) for code exchange
+  - Redirect to return_to || '/auth' after success
+  - Add better error handling for provider-specific errors
+  - **STATUS:** Full replacement code drafted, awaiting file editor
+
+### Phase 2: UI Migration (NOT STARTED)
+- [ ] **Create `src/views/AuthenticationHub.vue`** - Will include:
+  - Tab/accordion interface for Challonge and Discord
+  - Challonge section: API Key input, OAuth status/refresh, Client Credentials
+  - Discord section: OAuth status with username display
+  - Token expiry display with manual refresh buttons
+  - Success/error notifications
+  - Links to provider settings
+  - **STATUS:** Code drafted, awaiting file creation
+
+- [ ] **Update `src/views/ChallongeTest.vue`** - Need to:
+  - Remove OAuth Authentication section (lines ~49-120)
+  - Remove API Key Configuration section  
+  - Remove Client Credentials section
+  - Add info banner linking to /auth
+  - Keep tournament testing UI only
+  - **STATUS:** Changes identified, awaiting file editor
+
+- [ ] **Update `src/components/DeveloperTools.vue`** - Need to:
+  - Replace isAvailable computed property
+  - Check user.permissions.includes('developer_tools.view')
+  - Keep dev-mode fallback for any authenticated user
+  - **STATUS:** Changes identified, simple replacement, awaiting file editor
+
+### Phase 3: Integration & Testing (NOT STARTED)
+- [ ] **Update `.env`** - Add Discord OAuth credentials:
+  - VITE_DISCORD_CLIENT_ID=your_discord_app_id_here
+  - VITE_DISCORD_REDIRECT_URI=http://localhost:5173/oauth/callback
+  - **STATUS:** Simple addition, awaiting file editor
+
+- [ ] **Build and test Phase 1** - Verify:
+  - /auth route loads (will error until AuthenticationHub created)
+  - OAuth composables work
+  - Token exchange works
+  - **STATUS:** Blocked on Phase 1 completion
+
+- [ ] **Build and test Phase 2** - Verify:
+  - AuthenticationHub loads
+  - All UI works
+  - OAuth flows complete
+  - DeveloperTools gating works
+  - **STATUS:** Blocked on Phase 2 completion
+
+- [ ] **Final deployment** - Deploy and verify in production
+
+---
+
+## Key Code Files Created
+
+### 1. `src/config/platforms.js` (80 lines)
+**Location:** `/Users/fragginwagon/Developer/MemoryPalace/code/websites/pokedex.online/src/config/platforms.js`
+**Status:** ✅ CREATED AND READY
+
+Platform registry with Challonge and Discord OAuth configurations. Includes helper functions for accessing platform configs and auth methods.
+
+### 2. `src/composables/useOAuth.js` (400+ lines)
+**Location:** `/Users/fragginwagon/Developer/MemoryPalace/code/websites/pokedex.online/src/composables/useOAuth.js`
+**Status:** ✅ CREATED AND READY
+
+Unified OAuth handler supporting any provider. Handles:
+- Multi-provider token storage with localStorage
+- Authorization flow with CSRF protection
+- Token exchange and refresh
+- Automatic refresh before expiry
+- Error handling and logging
+
+### 3. `src/composables/useDiscordOAuth.js` (80 lines)
+**Location:** `/Users/fragginwagon/Developer/MemoryPalace/code/websites/pokedex.online/src/composables/useDiscordOAuth.js`
+**Status:** ✅ CREATED AND READY
+
+Discord-specific OAuth wrapper providing:
+- User profile management
+- Username/ID access
+- Permission checking helpers
+
+---
+
+## Files Needing Updates (Drafts Ready)
+
+### 1. `src/router/index.js`
+**Changes Required:**
+```javascript
+// Line 1-8: Update imports
+// Change: import ApiKeyManager from '../views/ApiKeyManager.vue';
+// To: import AuthenticationHub from '../views/AuthenticationHub.vue';
+
+// Lines 28-35: Add new route after ChallongeTest route
+{
+  path: '/auth',
+  name: 'AuthenticationHub',
+  component: AuthenticationHub
+},
+
+// Lines 36-43: Change api-key-manager to redirect
+// OLD: path: '/api-key-manager', name: 'ApiKeyManager', component: ApiKeyManager
+// NEW: path: '/api-key-manager', redirect: '/auth'
+
+// Lines 44+: Add settings redirect
+{
+  path: '/settings',
+  redirect: '/auth'
+}
+```
+
+### 2. `src/views/OAuthCallback.vue`
+**Key Changes:**
+- Extract provider from query/sessionStorage
+- Use unified useOAuth(provider) instead of useChallongeOAuth()
+- Support return_to query parameter
+- Redirect to return_to || '/auth' instead of hardcoded '/challonge-test'
+
+### 3. `src/components/DeveloperTools.vue`
+**Changes Required (Line ~146):**
+```javascript
+// OLD:
+const isAvailable = computed(() => {
+  const isDev = process.env.NODE_ENV === 'development';
+  const isAuthenticatedInProduction = process.env.NODE_ENV === 'production' && user.value;
+  return isDev || isAuthenticatedInProduction;
+});
+
+// NEW:
+const isAvailable = computed(() => {
+  if (!user.value) return false;
+  if (user.value.permissions?.includes('developer_tools.view')) {
+    return true;
+  }
+  if (process.env.NODE_ENV === 'development') {
+    return true;
+  }
+  return false;
+});
+```
+
+### 4. `src/views/ChallongeTest.vue`
+**Changes Required:**
+- Remove OAuth Authentication section (lines ~49-120)
+- Remove API Key Configuration section
+- Remove Client Credentials section
+- Add info banner with link to /auth
+- Keep tournament testing UI
+
+---
+
+## Next Steps (When File Editors Available)
+
+1. **Update router.js** - Add AuthenticationHub route and legacy redirects
+2. **Create AuthenticationHub.vue** - Main UI hub for all auth methods
+3. **Update OAuthCallback.vue** - Make provider-agnostic
+4. **Update ChallongeTest.vue** - Remove auth sections
+5. **Update DeveloperTools.vue** - Gate with permissions
+6. **Update .env** - Add Discord OAuth variables
+7. **Build and test** - npm run build:frontend && docker compose up -d
+8. **Verify** - Test all OAuth flows and DeveloperTools gating
+
+---
+
+## Testing Checklist (Post-Implementation)
+
+- [ ] `/auth` route loads AuthenticationHub
+- [ ] Challonge OAuth flow works end-to-end
+- [ ] Challonge API key management works
+- [ ] Challonge client credentials management works
+- [ ] Token expiry display works
+- [ ] Manual refresh button works
+- [ ] Auto-refresh (5-min before expiry) works
+- [ ] Discord OAuth flow works
+- [ ] DeveloperTools only shows with permission
+- [ ] `/api-key-manager` redirects to `/auth`
+- [ ] `/oauth/callback` works without provider param
+- [ ] `/oauth/callback?return_to=/challonge-test` works
+- [ ] ChallongeTest shows settings link
+- [ ] Tokens persist across page reloads
+- [ ] Token state changes update UI immediately
+
+---
+
+## Architecture Notes
+
+### Token Storage Strategy
+- Each provider has isolated token storage in localStorage
+- Multiple OAuth providers can be authenticated simultaneously
+- Tokens are auto-refreshed 5 minutes before expiry
+- Storage keys from platform config prevent conflicts
+
+### Security Features Implemented
+- CSRF protection via state parameter validation
+- Secure random state generation using crypto.getRandomValues()
+- Token expiry calculation and auto-refresh
+- Automatic token cleanup on logout
+- Error isolation by provider
+
+### Backwards Compatibility
+- Old `/api-key-manager` redirects to `/auth`
+- OAuth callback works without provider parameter (defaults to Challonge)
+- Existing Challonge OAuth composable still works (can be refactored later)
+- All existing API endpoints unchanged
+
+---
+
+## Resume Instructions
+
+If work is paused:
+1. Check this file for completed vs pending items
+2. All "CREATED AND READY" files are in the codebase
+3. All "Drafts Ready" files have code provided above
+4. Next task: Update router.js when file editors available
+5. Then create AuthenticationHub.vue (largest file, ~800-1000 lines)
+
+---
+
+**Last Updated:** Phase 1 infrastructure complete, awaiting file editor tool for Phase 1 router update
+