diff --git a/code/websites/pokedex.online/READY_TO_APPLY_CODE.md b/code/websites/pokedex.online/READY_TO_APPLY_CODE.md new file mode 100644 index 0000000..feca06c --- /dev/null +++ b/code/websites/pokedex.online/READY_TO_APPLY_CODE.md @@ -0,0 +1,1251 @@ +# AUTH HUB REFACTOR - COMPLETE CODE READY FOR APPLICATION + +This file contains ALL code needed to complete the remaining Phase 1 and Phase 2 updates. Simply copy each section and apply to the corresponding file when file editors are available. + +--- + +## FILE 1: src/router/index.js + +**Action:** Replace entire file + +```javascript +import { createRouter, createWebHistory } from 'vue-router'; +import Home from '../views/Home.vue'; +import GamemasterManager from '../views/GamemasterManager.vue'; +import GamemasterExplorer from '../views/GamemasterExplorer.vue'; +import ChallongeTest from '../views/ChallongeTest.vue'; +import AuthenticationHub from '../views/AuthenticationHub.vue'; +import ClientCredentialsManager from '../views/ClientCredentialsManager.vue'; +import OAuthCallback from '../views/OAuthCallback.vue'; + +const routes = [ + { + path: '/', + name: 'Home', + component: Home + }, + { + path: '/gamemaster', + name: 'GamemasterManager', + component: GamemasterManager + }, + { + path: '/gamemaster-explorer', + name: 'GamemasterExplorer', + component: GamemasterExplorer + }, + { + path: '/challonge-test', + name: 'ChallongeTest', + component: ChallongeTest + }, + { + path: '/auth', + name: 'AuthenticationHub', + component: AuthenticationHub + }, + { + path: '/client-credentials', + name: 'ClientCredentialsManager', + component: ClientCredentialsManager + }, + { + path: '/oauth/callback', + name: 'OAuthCallback', + component: OAuthCallback + }, + // Legacy redirects for backwards compatibility + { + path: '/api-key-manager', + redirect: '/auth' + }, + { + path: '/settings', + redirect: '/auth' + } +]; + +const router = createRouter({ + history: createWebHistory(), + routes +}); + +export default router; +``` + +--- + +## FILE 2: src/views/OAuthCallback.vue + +**Action:** Replace entire file + +```vue + + + + + + +``` + +--- + +## FILE 3: src/components/DeveloperTools.vue + +**Action:** Find and replace the `isAvailable` computed property (around line 146) + +**Old Code:** +```javascript +// Only show in development mode +const isAvailable = computed(() => { + const isDev = process.env.NODE_ENV === 'development'; + const isAuthenticatedInProduction = process.env.NODE_ENV === 'production' && user.value; + return isDev || isAuthenticatedInProduction; +}); +``` + +**New Code:** +```javascript +// Show if user has developer_tools.view permission (or authenticated in dev mode) +const isAvailable = computed(() => { + // Must be authenticated + if (!user.value) return false; + + // Check for explicit permission (most secure in production) + if (user.value.permissions?.includes('developer_tools.view')) { + return true; + } + + // In development, show for any authenticated user + if (process.env.NODE_ENV === 'development') { + return true; + } + + return false; +}); +``` + +--- + +## FILE 4: .env (server/.env) + +**Action:** Add these lines at the end of the file + +``` +# Discord OAuth Configuration +VITE_DISCORD_CLIENT_ID=your_discord_app_id_here +VITE_DISCORD_REDIRECT_URI=http://localhost:5173/oauth/callback +``` + +**Note:** Before using Discord OAuth, register an application at https://discord.com/developers/applications and replace `your_discord_app_id_here` with your actual Client ID. + +--- + +## FILE 5: src/views/ChallongeTest.vue + +**Action 1:** Find and remove the OAuth Authentication section (lines ~49-120) + +Look for this section: +```vue + +
+ ...entire section... +
+``` + +Remove the entire `` section. + +**Action 2:** Find and remove the API Key Configuration section (lines ~28-45) + +Look for: +```vue + +
+ ...entire section... +
+``` + +Remove the entire API Key Configuration section. + +**Action 3:** Find and remove the Client Credentials section + +Look for the client credentials management section and remove it. + +**Action 4:** Replace the removed sections with this info banner + +Add this BEFORE the API Version Selector (where the sections were removed): + +```vue + +
+
+

⚙️ Configure Your Authentication

+

Manage your Challonge API keys, OAuth tokens, and other authentication methods in the Authentication Settings.

+ + Go to Authentication Settings + +
+
+``` + +**Action 5:** Add these styles to the ` +``` + +--- + +## Summary + +All code is ready to apply. The order is: +1. Update router.js (simple, unblocks routes) +2. Update OAuthCallback.vue (enables OAuth callback) +3. Update DeveloperTools.vue (simple property update) +4. Update .env (add Discord credentials) +5. Create AuthenticationHub.vue (largest file) +6. Update ChallongeTest.vue (remove auth sections, add link) +7. Build and test +