fragginwagon/memory-infrastructure-palace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Add collapsible sections for API key, OAuth, and client credentials configurations

Browse Source
This commit is contained in:
Greg Jacobs
2026-01-28 18:47:59 +00:00
parent a921b09ba6
commit 0de8c0ee71
1 changed files with 77 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
code/websites/pokedex.online/src/views/ChallongeTest.vue
View File

@@ -13,8 +13,12 @@
<div v-if="apiKey" class="section controls-section"> <div v-if="apiKey" class="section controls-section">
<div class="controls-grid"> <div class="controls-grid">
<!-- API Key Configuration --> <!-- API Key Configuration -->
<div class="control-group"> <div class="control-group collapsible-group">
<label class="control-label">API Key Configuration:</label> <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"> <div class="status success">
✅ API Key Loaded: {{ maskedApiKey }} ✅ API Key Loaded: {{ maskedApiKey }}
</div> </div>
@@ -25,6 +29,7 @@
💡 Your API v1 key works with both API versions 💡 Your API v1 key works with both API versions
</p> </p>
</div> </div>
</div>
<!-- API Version Selector --> <!-- API Version Selector -->
<div class="control-group"> <div class="control-group">
@@ -81,8 +86,12 @@
</div> </div>
<!-- OAuth Authentication (v2.1 only) --> <!-- OAuth Authentication (v2.1 only) -->
<div v-if="apiVersion === 'v2.1'" class="control-group oauth-section"> <div v-if="apiVersion === 'v2.1'" class="control-group oauth-section collapsible-group">
<label class="control-label">OAuth Authentication:</label> <div class="collapsible-header" @click="oauthCollapsed = !oauthCollapsed">
<label class="control-label">OAuth Authentication</label>
<span class="collapse-icon">{{ oauthCollapsed ? '▶' : '▼' }}</span>
</div>
<div v-show="!oauthCollapsed" class="collapsible-content">
<div v-if="isAuthenticated" class="oauth-status"> <div v-if="isAuthenticated" class="oauth-status">
<span class="status-badge status-connected">✓ Connected</span> <span class="status-badge status-connected">✓ Connected</span>
<button @click="oauthLogout" class="btn btn-secondary btn-sm"> <button @click="oauthLogout" class="btn btn-secondary btn-sm">
@@ -109,9 +118,15 @@
}} }}
</span> </span>
</div> </div>
</div>
<!-- Client Credentials (v2.1 only) --> <!-- Client Credentials (v2.1 only) -->
<div v-if="apiVersion === 'v2.1'" class="control-group"> <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 v-show="!clientCredsCollapsed" class="collapsible-content">
<div class="info-badge" v-if="isClientCredsAuthenticated"> <div class="info-badge" v-if="isClientCredsAuthenticated">
✓ Client Credentials Active ✓ Client Credentials Active
</div> </div>
@@ -137,6 +152,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- No API Key Stored --> <!-- No API Key Stored -->
<div v-if="!apiKey" class="section warning-section no-key-section"> <div v-if="!apiKey" class="section warning-section no-key-section">
@@ -409,6 +425,11 @@ const tournamentScope = ref(ScopeType.USER);
// Debug mode - enabled to see what's happening // Debug mode - enabled to see what's happening
const debugMode = ref(true); const debugMode = ref(true);
// Collapsible section states
const apiKeyCollapsed = ref(false);
const oauthCollapsed = ref(false);
const clientCredsCollapsed = ref(false);
// Make apiKey reactive // Make apiKey reactive
const apiKey = computed(() => getApiKey()); const apiKey = computed(() => getApiKey());