From 0de8c0ee717a0de45a703792891273f0ec690d1a Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 18:47:59 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20collapsible=20sections=20for?=
 =?UTF-8?q?=20API=20key,=20OAuth,=20and=20client=20credentials=20configura?=
 =?UTF-8?q?tions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/ChallongeTest.vue               | 133 ++++++++++--------
 1 file changed, 77 insertions(+), 56 deletions(-)

diff --git a/code/websites/pokedex.online/src/views/ChallongeTest.vue b/code/websites/pokedex.online/src/views/ChallongeTest.vue
index a443e91..696c541 100644
--- a/code/websites/pokedex.online/src/views/ChallongeTest.vue
+++ b/code/websites/pokedex.online/src/views/ChallongeTest.vue
@@ -13,17 +13,22 @@
       <div v-if="apiKey" class="section controls-section">
         <div class="controls-grid">
           <!-- API Key Configuration -->
-          <div class="control-group">
-            <label class="control-label">API Key Configuration:</label>
-            <div class="status success">
-              ✅ API Key Loaded: {{ maskedApiKey }}
+          <div class="control-group collapsible-group">
+            <div class="collapsible-header" @click="apiKeyCollapsed = !apiKeyCollapsed">
+              <label class="control-label">API Key Configuration</label>
+              <span class="collapse-icon">{{ apiKeyCollapsed ? '▶' : '▼' }}</span>
+            </div>
+            <div v-show="!apiKeyCollapsed" class="collapsible-content">
+              <div class="status success">
+                ✅ API Key Loaded: {{ maskedApiKey }}
+              </div>
+              <router-link to="/api-key-manager" class="btn-link">
+                Manage your API key
+              </router-link>
+              <p class="api-note">
+                💡 Your API v1 key works with both API versions
+              </p>
             </div>
-            <router-link to="/api-key-manager" class="btn-link">
-              Manage your API key
-            </router-link>
-            <p class="api-note">
-              💡 Your API v1 key works with both API versions
-            </p>
           </div>
 
           <!-- API Version Selector -->
@@ -81,59 +86,70 @@
           </div>
 
           <!-- OAuth Authentication (v2.1 only) -->
-          <div v-if="apiVersion === 'v2.1'" class="control-group oauth-section">
-            <label class="control-label">OAuth Authentication:</label>
-            <div v-if="isAuthenticated" class="oauth-status">
-              <span class="status-badge status-connected">✓ Connected</span>
-              <button @click="oauthLogout" class="btn btn-secondary btn-sm">
-                Logout
-              </button>
+          <div v-if="apiVersion === 'v2.1'" class="control-group oauth-section collapsible-group">
+            <div class="collapsible-header" @click="oauthCollapsed = !oauthCollapsed">
+              <label class="control-label">OAuth Authentication</label>
+              <span class="collapse-icon">{{ oauthCollapsed ? '▶' : '▼' }}</span>
             </div>
-            <div v-else class="oauth-status">
-              <span class="status-badge status-disconnected"
-                >○ Not Connected</span
-              >
-              <button
-                @click="oauthLogin('me tournaments:read tournaments:write')"
-                class="btn btn-primary btn-sm"
-                :disabled="oauthLoading"
-              >
-                {{ oauthLoading ? 'Connecting...' : 'Connect with OAuth' }}
-              </button>
+            <div v-show="!oauthCollapsed" class="collapsible-content">
+              <div v-if="isAuthenticated" class="oauth-status">
+                <span class="status-badge status-connected">✓ Connected</span>
+                <button @click="oauthLogout" class="btn btn-secondary btn-sm">
+                  Logout
+                </button>
+              </div>
+              <div v-else class="oauth-status">
+                <span class="status-badge status-disconnected"
+                  >○ Not Connected</span
+                >
+                <button
+                  @click="oauthLogin('me tournaments:read tournaments:write')"
+                  class="btn btn-primary btn-sm"
+                  :disabled="oauthLoading"
+                >
+                  {{ oauthLoading ? 'Connecting...' : 'Connect with OAuth' }}
+                </button>
+              </div>
+              <span class="oauth-hint">
+                {{
+                  isAuthenticated
+                    ? 'Using OAuth - APPLICATION scope available'
+                    : 'Connect to enable APPLICATION scope'
+                }}
+              </span>
             </div>
-            <span class="oauth-hint">
-              {{
-                isAuthenticated
-                  ? 'Using OAuth - APPLICATION scope available'
-                  : 'Connect to enable APPLICATION scope'
-              }}
-            </span>
           </div>
 
           <!-- Client Credentials (v2.1 only) -->
-          <div v-if="apiVersion === 'v2.1'" class="control-group">
-            <div class="info-badge" v-if="isClientCredsAuthenticated">
-              ✓ Client Credentials Active
+          <div v-if="apiVersion === 'v2.1'" class="control-group collapsible-group">
+            <div class="collapsible-header" @click="clientCredsCollapsed = !clientCredsCollapsed">
+              <label class="control-label">Client Credentials</label>
+              <span class="collapse-icon">{{ clientCredsCollapsed ? '▶' : '▼' }}</span>
             </div>
-            <div
-              class="info-badge warning"
-              v-if="
-                isClientCredsAuthenticated && tournamentScope === ScopeType.USER
-              "
-            >
-              ⚠️ Client credentials may not work with USER scope - switch to
-              APPLICATION scope
+            <div v-show="!clientCredsCollapsed" class="collapsible-content">
+              <div class="info-badge" v-if="isClientCredsAuthenticated">
+                ✓ Client Credentials Active
+              </div>
+              <div
+                class="info-badge warning"
+                v-if="
+                  isClientCredsAuthenticated && tournamentScope === ScopeType.USER
+                "
+              >
+                ⚠️ Client credentials may not work with USER scope - switch to
+                APPLICATION scope
+              </div>
+              <router-link
+                to="/client-credentials"
+                class="btn btn-secondary btn-sm"
+              >
+                Manage Client Credentials
+              </router-link>
+              <span class="scope-hint">
+                Client credentials should use APPLICATION scope for tournament
+                access
+              </span>
             </div>
-            <router-link
-              to="/client-credentials"
-              class="btn btn-secondary btn-sm"
-            >
-              Manage Client Credentials
-            </router-link>
-            <span class="scope-hint">
-              Client credentials should use APPLICATION scope for tournament
-              access
-            </span>
           </div>
         </div>
       </div>
@@ -409,6 +425,11 @@ const tournamentScope = ref(ScopeType.USER);
 // Debug mode - enabled to see what's happening
 const debugMode = ref(true);
 
+// Collapsible section states
+const apiKeyCollapsed = ref(false);
+const oauthCollapsed = ref(false);
+const clientCredsCollapsed = ref(false);
+
 // Make apiKey reactive
 const apiKey = computed(() => getApiKey());