diff --git a/code/websites/pokedex.online/src/views/AuthenticationHub.vue b/code/websites/pokedex.online/src/views/AuthenticationHub.vue index 9d2fb61..5a1c9a1 100644 --- a/code/websites/pokedex.online/src/views/AuthenticationHub.vue +++ b/code/websites/pokedex.online/src/views/AuthenticationHub.vue @@ -16,7 +16,9 @@

🔐 Authentication Settings

-

Manage your authentication credentials and tokens across all platforms

+

+ Manage your authentication credentials and tokens across all platforms +

@@ -47,7 +49,8 @@

🏆 Challonge Authentication

- Configure your Challonge API access using API keys, OAuth tokens, or client credentials + Configure your Challonge API access using API keys, OAuth tokens, or + client credentials

@@ -58,7 +61,9 @@ {{ hasChallongeApiKey ? '✓ Connected' : '○ Not Connected' }}
-

Direct API key authentication for v1 and v2.1 APIs

+

+ Direct API key authentication for v1 and v2.1 APIs +

{{ hasChallongeApiKey ? 'Update' : 'Save' }} API Key -

Get your API key from - Challonge Developer Settings + Challonge Developer Settings

@@ -83,12 +94,20 @@

OAuth 2.0

- - {{ isChallongeOAuthAuthenticated ? '✓ Connected' : '○ Not Connected' }} + + {{ + isChallongeOAuthAuthenticated + ? '✓ Connected' + : '○ Not Connected' + }}
-

User token authentication for v2.1 API (APPLICATION scope)

- +

+ User token authentication for v2.1 API (APPLICATION scope) +

+
Status: @@ -96,31 +115,52 @@
Expires in: - {{ formatExpiryTime(challongeOAuthExpiresIn) }} + {{ + formatExpiryTime(challongeOAuthExpiresIn) + }}
Last refreshed: - {{ formatDate(challongeOAuthRefreshedAt) }} + {{ + formatDate(challongeOAuthRefreshedAt) + }}
- -
-

Register your application at - Challonge OAuth + Challonge OAuth and use it for APPLICATION scope access

@@ -129,12 +169,20 @@

Client Credentials

- - {{ hasChallongeClientCredentials ? '✓ Connected' : '○ Not Connected' }} + + {{ + hasChallongeClientCredentials + ? '✓ Connected' + : '○ Not Connected' + }}
-

For APPLICATION scope access with client ID and secret

- +

+ For APPLICATION scope access with client ID and secret +

+
Client ID: @@ -142,14 +190,21 @@
Status: - {{ isChallongeClientCredentialsValid ? '✅ Valid' : '⚠️ Expired' }} + {{ + isChallongeClientCredentialsValid ? '✅ Valid' : '⚠️ Expired' + }}
Token expires in: - {{ formatExpiryTime(challongeClientExpiresIn) }} + {{ + formatExpiryTime(challongeClientExpiresIn) + }}
-
@@ -169,7 +224,10 @@ placeholder="Client Secret" @keyup.enter="saveChallongeClientCredentials" /> -
@@ -177,7 +235,9 @@

Get credentials from - Challonge Developer Settings + Challonge Developer Settings

@@ -186,7 +246,8 @@

🎮 Discord Authentication

- Verify your Discord identity for access control and developer features + Verify your Discord identity for access control and developer + features

@@ -196,7 +257,9 @@ {{ isDiscordAuthenticated ? '✓ Connected' : '○ Not Connected' }}
-

Secure identity verification using Discord account

+

+ Secure identity verification using Discord account +

@@ -209,10 +272,16 @@
Expires in: - {{ formatExpiryTime(discordExpiresIn) }} + {{ + formatExpiryTime(discordExpiresIn) + }}
-
-

Create Discord application at - Discord Developer Portal + Discord Developer Portal

@@ -237,7 +318,10 @@ @@ -260,24 +344,39 @@ const oauthLoading = ref(false); const discordLoading = ref(false); // Challonge API Key -const { apiKey: challongeApiKey, save: saveApiKey, delete: deleteApiKey } = useChallongeApiKey(); +const { + apiKey: challongeApiKey, + save: saveApiKey, + delete: deleteApiKey +} = useChallongeApiKey(); const newChallongeApiKey = ref(''); const hasChallongeApiKey = computed(() => !!challongeApiKey.value); // Challonge OAuth const challongeOAuth = useChallongeOAuth(); -const isChallongeOAuthAuthenticated = computed(() => challongeOAuth.isAuthenticated.value); +const isChallongeOAuthAuthenticated = computed( + () => challongeOAuth.isAuthenticated.value +); const challongeOAuthExpiresIn = computed(() => challongeOAuth.expiresIn.value); const challongeOAuthRefreshedAt = computed(() => { - return challongeOAuth.tokens.value?.refreshed_at || challongeOAuth.tokens.value?.created_at; + return ( + challongeOAuth.tokens.value?.refreshed_at || + challongeOAuth.tokens.value?.created_at + ); }); // Challonge Client Credentials const challengeClientCreds = useChallongeClientCredentials(); -const hasChallongeClientCredentials = computed(() => challengeClientCreds.isConfigured.value); -const isChallongeClientCredentialsValid = computed(() => challengeClientCreds.isValid.value); +const hasChallongeClientCredentials = computed( + () => challengeClientCreds.isConfigured.value +); +const isChallongeClientCredentialsValid = computed( + () => challengeClientCreds.isValid.value +); const challongeClientId = computed(() => challengeClientCreds.clientId.value); -const challongeClientExpiresIn = computed(() => challengeClientCreds.expiresIn.value); +const challongeClientExpiresIn = computed( + () => challengeClientCreds.expiresIn.value +); const newClientId = ref(''); const newClientSecret = ref(''); @@ -334,7 +433,11 @@ async function refreshChallongeOAuth() { } function disconnectChallongeOAuth() { - if (confirm('Disconnect Challonge OAuth? You will need to reconnect to use OAuth features.')) { + if ( + confirm( + 'Disconnect Challonge OAuth? You will need to reconnect to use OAuth features.' + ) + ) { challongeOAuth.logout(); successMessage.value = 'Disconnected from Challonge OAuth'; setTimeout(() => (successMessage.value = ''), 3000); @@ -385,7 +488,11 @@ async function refreshDiscordAuth() { } function disconnectDiscord() { - if (confirm('Disconnect Discord? You will need to reconnect for Discord features.')) { + if ( + confirm( + 'Disconnect Discord? You will need to reconnect for Discord features.' + ) + ) { discord.logout(); successMessage.value = 'Disconnected from Discord'; setTimeout(() => (successMessage.value = ''), 3000); @@ -786,22 +893,8 @@ onMounted(async () => { } } -``` - ---- - -## 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 - - -```` - -``` \ No newline at end of file +``` --- ## 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 ```` ```