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

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

@@ -13,17 +13,22 @@
<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">
<div class="status success"> <label class="control-label">API Key Configuration</label>
✅ API Key Loaded: {{ maskedApiKey }} <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> </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> </div>
<!-- API Version Selector --> <!-- API Version Selector -->
@@ -81,59 +86,70 @@
</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">
<div v-if="isAuthenticated" class="oauth-status"> <label class="control-label">OAuth Authentication</label>
<span class="status-badge status-connected">✓ Connected</span> <span class="collapse-icon">{{ oauthCollapsed ? '▶' : '▼' }}</span>
<button @click="oauthLogout" class="btn btn-secondary btn-sm">
Logout
</button>
</div> </div>
<div v-else class="oauth-status"> <div v-show="!oauthCollapsed" class="collapsible-content">
<span class="status-badge status-disconnected" <div v-if="isAuthenticated" class="oauth-status">
>○ Not Connected</span <span class="status-badge status-connected">✓ Connected</span>
> <button @click="oauthLogout" class="btn btn-secondary btn-sm">
<button Logout
@click="oauthLogin('me tournaments:read tournaments:write')" </button>
class="btn btn-primary btn-sm" </div>
:disabled="oauthLoading" <div v-else class="oauth-status">
> <span class="status-badge status-disconnected"
{{ oauthLoading ? 'Connecting...' : 'Connect with OAuth' }} >○ Not Connected</span
</button> >
<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> </div>
<span class="oauth-hint">
{{
isAuthenticated
? 'Using OAuth - APPLICATION scope available'
: 'Connect to enable APPLICATION scope'
}}
</span>
</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="info-badge" v-if="isClientCredsAuthenticated"> <div class="collapsible-header" @click="clientCredsCollapsed = !clientCredsCollapsed">
✓ Client Credentials Active <label class="control-label">Client Credentials</label>
<span class="collapse-icon">{{ clientCredsCollapsed ? '▶' : '▼' }}</span>
</div> </div>
<div <div v-show="!clientCredsCollapsed" class="collapsible-content">
class="info-badge warning" <div class="info-badge" v-if="isClientCredsAuthenticated">
v-if=" ✓ Client Credentials Active
isClientCredsAuthenticated && tournamentScope === ScopeType.USER </div>
" <div
> class="info-badge warning"
⚠️ Client credentials may not work with USER scope - switch to v-if="
APPLICATION scope 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> </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> </div>
</div> </div>
@@ -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());