906 lines
23 KiB
Vue
906 lines
23 KiB
Vue
<!--
|
||
Authentication Hub
|
||
|
||
Unified interface for managing all authentication methods across platforms
|
||
Supports: Challonge (API Key, OAuth, Client Credentials), Discord (OAuth)
|
||
|
||
Features:
|
||
- Tab-based interface for each platform
|
||
- Token status and expiry display
|
||
- Manual refresh buttons
|
||
- Auto-refresh info
|
||
- Success/error notifications
|
||
-->
|
||
<template>
|
||
<div class="auth-hub">
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>🔐 Authentication Settings</h1>
|
||
<p class="subtitle">
|
||
Manage your authentication credentials and tokens across all platforms
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tabs Navigation -->
|
||
<div class="tabs-nav">
|
||
<button
|
||
v-for="platform in platforms"
|
||
:key="platform.name"
|
||
:class="['tab-button', { active: activePlatform === platform.name }]"
|
||
@click="activePlatform = platform.name"
|
||
>
|
||
{{ platform.icon }} {{ platform.label }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Notifications -->
|
||
<div v-if="successMessage" class="notification success">
|
||
<span>✓ {{ successMessage }}</span>
|
||
<button @click="successMessage = ''" class="close-btn">×</button>
|
||
</div>
|
||
<div v-if="errorMessage" class="notification error">
|
||
<span>✕ {{ errorMessage }}</span>
|
||
<button @click="errorMessage = ''" class="close-btn">×</button>
|
||
</div>
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content">
|
||
<!-- Challonge Tab -->
|
||
<div v-if="activePlatform === 'challonge'" class="platform-section">
|
||
<h2>🏆 Challonge Authentication</h2>
|
||
<p class="platform-description">
|
||
Configure your Challonge API access using API keys, OAuth tokens, or
|
||
client credentials
|
||
</p>
|
||
|
||
<!-- API Key Section -->
|
||
<div class="auth-method">
|
||
<div class="method-header">
|
||
<h3>API Key</h3>
|
||
<span :class="['status', { active: hasChallongeApiKey }]">
|
||
{{ hasChallongeApiKey ? '✓ Connected' : '○ Not Connected' }}
|
||
</span>
|
||
</div>
|
||
<p class="method-description">
|
||
Direct API key authentication for v1 and v2.1 APIs
|
||
</p>
|
||
<div class="form-group">
|
||
<input
|
||
v-model="newChallongeApiKey"
|
||
type="password"
|
||
placeholder="Enter your Challonge API key"
|
||
@keyup.enter="saveChallongeApiKey"
|
||
/>
|
||
<button @click="saveChallongeApiKey" class="btn btn-primary">
|
||
{{ hasChallongeApiKey ? 'Update' : 'Save' }} API Key
|
||
</button>
|
||
<button
|
||
v-if="hasChallongeApiKey"
|
||
@click="deleteChallongeApiKey"
|
||
class="btn btn-danger"
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
<p class="help-text">
|
||
Get your API key from
|
||
<a href="https://challonge.com/settings/developer" target="_blank"
|
||
>Challonge Developer Settings</a
|
||
>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- OAuth Section -->
|
||
<div class="auth-method">
|
||
<div class="method-header">
|
||
<h3>OAuth 2.0</h3>
|
||
<span
|
||
:class="['status', { active: isChallongeOAuthAuthenticated }]"
|
||
>
|
||
{{
|
||
isChallongeOAuthAuthenticated
|
||
? '✓ Connected'
|
||
: '○ Not Connected'
|
||
}}
|
||
</span>
|
||
</div>
|
||
<p class="method-description">
|
||
User token authentication for v2.1 API (APPLICATION scope)
|
||
</p>
|
||
|
||
<div v-if="isChallongeOAuthAuthenticated" class="token-info">
|
||
<div class="token-detail">
|
||
<span class="label">Status:</span>
|
||
<span class="value">✅ Authenticated</span>
|
||
</div>
|
||
<div class="token-detail">
|
||
<span class="label">Expires in:</span>
|
||
<span class="value">{{
|
||
formatExpiryTime(challongeOAuthExpiresIn)
|
||
}}</span>
|
||
</div>
|
||
<div v-if="challongeOAuthRefreshedAt" class="token-detail">
|
||
<span class="label">Last refreshed:</span>
|
||
<span class="value">{{
|
||
formatDate(challongeOAuthRefreshedAt)
|
||
}}</span>
|
||
</div>
|
||
<div class="button-group">
|
||
<button
|
||
@click="refreshChallongeOAuth"
|
||
:disabled="oauthLoading"
|
||
class="btn btn-secondary"
|
||
>
|
||
{{ oauthLoading ? '⏳ Refreshing...' : '🔄 Refresh Token' }}
|
||
</button>
|
||
<button
|
||
@click="disconnectChallongeOAuth"
|
||
class="btn btn-danger"
|
||
>
|
||
Disconnect
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="button-group">
|
||
<button
|
||
@click="connectChallongeOAuth"
|
||
:disabled="oauthLoading"
|
||
class="btn btn-primary"
|
||
>
|
||
{{
|
||
oauthLoading
|
||
? '⏳ Connecting...'
|
||
: '🔗 Connect with Challonge OAuth'
|
||
}}
|
||
</button>
|
||
</div>
|
||
|
||
<p class="help-text">
|
||
Register your application at
|
||
<a href="https://connect.challonge.com" target="_blank"
|
||
>Challonge OAuth</a
|
||
>
|
||
and use it for APPLICATION scope access
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Client Credentials Section -->
|
||
<div class="auth-method">
|
||
<div class="method-header">
|
||
<h3>Client Credentials</h3>
|
||
<span
|
||
:class="['status', { active: hasChallongeClientCredentials }]"
|
||
>
|
||
{{
|
||
hasChallongeClientCredentials
|
||
? '✓ Connected'
|
||
: '○ Not Connected'
|
||
}}
|
||
</span>
|
||
</div>
|
||
<p class="method-description">
|
||
For APPLICATION scope access with client ID and secret
|
||
</p>
|
||
|
||
<div v-if="hasChallongeClientCredentials" class="token-info">
|
||
<div class="token-detail">
|
||
<span class="label">Client ID:</span>
|
||
<code>{{ challongeClientId?.substring(0, 10) }}...</code>
|
||
</div>
|
||
<div class="token-detail">
|
||
<span class="label">Status:</span>
|
||
<span class="value">{{
|
||
isChallongeClientCredentialsValid ? '✅ Valid' : '⚠️ Expired'
|
||
}}</span>
|
||
</div>
|
||
<div v-if="challongeClientExpiresIn" class="token-detail">
|
||
<span class="label">Token expires in:</span>
|
||
<span class="value">{{
|
||
formatExpiryTime(challongeClientExpiresIn)
|
||
}}</span>
|
||
</div>
|
||
<div class="button-group">
|
||
<button
|
||
@click="deleteChallongeClientCredentials"
|
||
class="btn btn-danger"
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<div class="form-group">
|
||
<input
|
||
v-model="newClientId"
|
||
type="text"
|
||
placeholder="Client ID"
|
||
@keyup.enter="saveChallongeClientCredentials"
|
||
/>
|
||
<input
|
||
v-model="newClientSecret"
|
||
type="password"
|
||
placeholder="Client Secret"
|
||
@keyup.enter="saveChallongeClientCredentials"
|
||
/>
|
||
<button
|
||
@click="saveChallongeClientCredentials"
|
||
class="btn btn-primary"
|
||
>
|
||
Save Client Credentials
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="help-text">
|
||
Get credentials from
|
||
<a href="https://challonge.com/settings/developer" target="_blank"
|
||
>Challonge Developer Settings</a
|
||
>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Discord Tab -->
|
||
<div v-if="activePlatform === 'discord'" class="platform-section">
|
||
<h2>🎮 Discord Authentication</h2>
|
||
<p class="platform-description">
|
||
Verify your Discord identity for access control and developer
|
||
features
|
||
</p>
|
||
|
||
<div class="auth-method">
|
||
<div class="method-header">
|
||
<h3>Discord OAuth</h3>
|
||
<span :class="['status', { active: isDiscordAuthenticated }]">
|
||
{{ isDiscordAuthenticated ? '✓ Connected' : '○ Not Connected' }}
|
||
</span>
|
||
</div>
|
||
<p class="method-description">
|
||
Secure identity verification using Discord account
|
||
</p>
|
||
|
||
<div v-if="isDiscordAuthenticated" class="token-info">
|
||
<div class="token-detail">
|
||
<span class="label">Username:</span>
|
||
<span class="value">{{ discordUsername || 'Loading...' }}</span>
|
||
</div>
|
||
<div class="token-detail">
|
||
<span class="label">Status:</span>
|
||
<span class="value">✅ Authenticated</span>
|
||
</div>
|
||
<div v-if="discordExpiresIn" class="token-detail">
|
||
<span class="label">Expires in:</span>
|
||
<span class="value">{{
|
||
formatExpiryTime(discordExpiresIn)
|
||
}}</span>
|
||
</div>
|
||
<div class="button-group">
|
||
<button
|
||
@click="refreshDiscordAuth"
|
||
:disabled="discordLoading"
|
||
class="btn btn-secondary"
|
||
>
|
||
{{ discordLoading ? '⏳ Refreshing...' : '🔄 Refresh' }}
|
||
</button>
|
||
<button @click="disconnectDiscord" class="btn btn-danger">
|
||
Disconnect
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="button-group">
|
||
<button
|
||
@click="connectDiscord"
|
||
:disabled="discordLoading"
|
||
class="btn btn-primary"
|
||
>
|
||
{{
|
||
discordLoading
|
||
? '⏳ Connecting...'
|
||
: '🔗 Connect with Discord'
|
||
}}
|
||
</button>
|
||
</div>
|
||
|
||
<p class="help-text">
|
||
Create Discord application at
|
||
<a
|
||
href="https://discord.com/developers/applications"
|
||
target="_blank"
|
||
>Discord Developer Portal</a
|
||
>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="footer">
|
||
<p>
|
||
Your authentication tokens are stored securely in your browser's local
|
||
storage.
|
||
</p>
|
||
<router-link to="/" class="btn-link">← Back Home</router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import { useChallongeApiKey } from '../composables/useChallongeApiKey.js';
|
||
import { useChallongeOAuth } from '../composables/useChallongeOAuth.js';
|
||
import { useChallongeClientCredentials } from '../composables/useChallongeClientCredentials.js';
|
||
import { useDiscordOAuth } from '../composables/useDiscordOAuth.js';
|
||
import { getAllPlatforms } from '../config/platforms.js';
|
||
|
||
// State
|
||
const activePlatform = ref('challonge');
|
||
const successMessage = ref('');
|
||
const errorMessage = ref('');
|
||
const oauthLoading = ref(false);
|
||
const discordLoading = ref(false);
|
||
|
||
// Challonge API Key
|
||
const {
|
||
storedKey: challongeApiKey,
|
||
saveApiKey,
|
||
clearApiKey
|
||
} = useChallongeApiKey();
|
||
const newChallongeApiKey = ref('');
|
||
const hasChallongeApiKey = computed(() => !!challongeApiKey.value);
|
||
|
||
// Challonge OAuth
|
||
const challongeOAuth = useChallongeOAuth();
|
||
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
|
||
);
|
||
});
|
||
|
||
// Challonge Client Credentials
|
||
const challengeClientCreds = useChallongeClientCredentials();
|
||
const hasChallongeClientCredentials = computed(
|
||
() => challengeClientCreds.hasCredentials.value
|
||
);
|
||
const isChallongeClientCredentialsValid = computed(
|
||
() => challengeClientCreds.isAuthenticated.value
|
||
);
|
||
const challongeClientId = computed(
|
||
() => challengeClientCreds.maskedClientId.value
|
||
);
|
||
const challongeClientExpiresIn = computed(
|
||
() => challengeClientCreds.tokenInfo.value?.expiresIn
|
||
);
|
||
const newClientId = ref('');
|
||
const newClientSecret = ref('');
|
||
|
||
// Discord OAuth
|
||
const discord = useDiscordOAuth();
|
||
const isDiscordAuthenticated = computed(() => discord.hasDiscordAuth.value);
|
||
const discordUsername = computed(() => discord.discordUsername.value);
|
||
const discordExpiresIn = computed(() => discord.expiresIn.value);
|
||
|
||
// Get all platforms for tab navigation
|
||
const platforms = computed(() => getAllPlatforms());
|
||
|
||
// Methods
|
||
function saveChallongeApiKey() {
|
||
try {
|
||
saveApiKey(newChallongeApiKey.value);
|
||
newChallongeApiKey.value = '';
|
||
successMessage.value = 'Challonge API key saved successfully!';
|
||
setTimeout(() => (successMessage.value = ''), 3000);
|
||
} catch (err) {
|
||
errorMessage.value = err.message;
|
||
}
|
||
}
|
||
|
||
function deleteChallongeApiKey() {
|
||
if (confirm('Are you sure? This will remove your API key.')) {
|
||
clearApiKey();
|
||
successMessage.value = 'Challonge API key deleted';
|
||
setTimeout(() => (successMessage.value = ''), 3000);
|
||
}
|
||
}
|
||
|
||
async function connectChallongeOAuth() {
|
||
try {
|
||
oauthLoading.value = true;
|
||
challongeOAuth.login({ return_to: '/auth' });
|
||
} catch (err) {
|
||
errorMessage.value = err.message;
|
||
oauthLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function refreshChallongeOAuth() {
|
||
try {
|
||
oauthLoading.value = true;
|
||
await challongeOAuth.refreshToken();
|
||
successMessage.value = 'Challonge OAuth token refreshed!';
|
||
setTimeout(() => (successMessage.value = ''), 3000);
|
||
} catch (err) {
|
||
errorMessage.value = err.message;
|
||
} finally {
|
||
oauthLoading.value = false;
|
||
}
|
||
}
|
||
|
||
function disconnectChallongeOAuth() {
|
||
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);
|
||
}
|
||
}
|
||
|
||
function saveChallongeClientCredentials() {
|
||
try {
|
||
challengeClientCreds.saveCredentials(
|
||
newClientId.value,
|
||
newClientSecret.value
|
||
);
|
||
newClientId.value = '';
|
||
newClientSecret.value = '';
|
||
successMessage.value = 'Client credentials saved!';
|
||
setTimeout(() => (successMessage.value = ''), 3000);
|
||
} catch (err) {
|
||
errorMessage.value = err.message;
|
||
}
|
||
}
|
||
|
||
function deleteChallongeClientCredentials() {
|
||
if (confirm('Delete client credentials?')) {
|
||
challengeClientCreds.clearCredentials();
|
||
successMessage.value = 'Client credentials deleted';
|
||
setTimeout(() => (successMessage.value = ''), 3000);
|
||
}
|
||
}
|
||
|
||
async function connectDiscord() {
|
||
try {
|
||
discordLoading.value = true;
|
||
discord.login({ return_to: '/auth' });
|
||
} catch (err) {
|
||
errorMessage.value = err.message;
|
||
discordLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function refreshDiscordAuth() {
|
||
try {
|
||
discordLoading.value = true;
|
||
await discord.refreshToken();
|
||
successMessage.value = 'Discord token refreshed!';
|
||
setTimeout(() => (successMessage.value = ''), 3000);
|
||
} catch (err) {
|
||
errorMessage.value = err.message;
|
||
} finally {
|
||
discordLoading.value = false;
|
||
}
|
||
}
|
||
|
||
function disconnectDiscord() {
|
||
if (
|
||
confirm(
|
||
'Disconnect Discord? You will need to reconnect for Discord features.'
|
||
)
|
||
) {
|
||
discord.logout();
|
||
successMessage.value = 'Disconnected from Discord';
|
||
setTimeout(() => (successMessage.value = ''), 3000);
|
||
}
|
||
}
|
||
|
||
function formatExpiryTime(seconds) {
|
||
if (!seconds) return 'Unknown';
|
||
if (seconds < 0) return 'Expired';
|
||
const hours = Math.floor(seconds / 3600);
|
||
const minutes = Math.floor((seconds % 3600) / 60);
|
||
if (hours > 0) return `${hours}h ${minutes}m`;
|
||
return `${minutes}m`;
|
||
}
|
||
|
||
function formatDate(timestamp) {
|
||
if (!timestamp) return 'Never';
|
||
return new Date(timestamp).toLocaleString();
|
||
}
|
||
|
||
// Load Discord profile on mount if authenticated
|
||
onMounted(async () => {
|
||
if (isDiscordAuthenticated.value) {
|
||
try {
|
||
await discord.fetchUserProfile();
|
||
} catch (err) {
|
||
console.error('Failed to load Discord profile:', err);
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.auth-hub {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
color: white;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2.5rem;
|
||
margin: 0 0 0.5rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.1rem;
|
||
opacity: 0.95;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Tabs Navigation */
|
||
.tabs-nav {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.tab-button {
|
||
padding: 1rem 1.5rem;
|
||
border: none;
|
||
background: transparent;
|
||
color: white;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border-bottom: 3px solid transparent;
|
||
transition: all 0.2s;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.tab-button:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.tab-button.active {
|
||
opacity: 1;
|
||
border-bottom-color: white;
|
||
}
|
||
|
||
/* Notifications */
|
||
.notification {
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
margin-bottom: 1.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.notification.success {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.notification.error {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
|
||
.close-btn {
|
||
background: transparent;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
opacity: 0.7;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Tab Content */
|
||
.tab-content {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 2rem;
|
||
margin-bottom: 2rem;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.platform-section h2 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.platform-description {
|
||
color: #666;
|
||
margin-bottom: 2rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Auth Method */
|
||
.auth-method {
|
||
margin-bottom: 2.5rem;
|
||
padding-bottom: 2rem;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.auth-method:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.method-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.method-header h3 {
|
||
margin: 0;
|
||
color: #333;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.status {
|
||
font-size: 0.9rem;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 20px;
|
||
background: #f0f0f0;
|
||
color: #666;
|
||
}
|
||
|
||
.status.active {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.method-description {
|
||
color: #666;
|
||
margin: 0.5rem 0 1rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* Token Info */
|
||
.token-info {
|
||
background: #f8f9fa;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 6px;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.token-detail {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 0.75rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.token-detail:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.token-detail .label {
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.token-detail .value {
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.token-detail code {
|
||
background: #fff;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 3px;
|
||
border: 1px solid #dee2e6;
|
||
font-family: 'Monaco', 'Menlo', monospace;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* Forms */
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-group input {
|
||
padding: 0.75rem;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.form-group input:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||
}
|
||
|
||
/* Buttons */
|
||
.button-group {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.btn {
|
||
padding: 0.75rem 1.5rem;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #667eea;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #5568d3;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #5a6268;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-secondary:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.btn-danger {
|
||
background: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background: #c82333;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.help-text {
|
||
font-size: 0.85rem;
|
||
color: #666;
|
||
margin: 1rem 0 0;
|
||
}
|
||
|
||
.help-text a {
|
||
color: #667eea;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.help-text a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.footer p {
|
||
color: #666;
|
||
margin: 0 0 1rem;
|
||
}
|
||
|
||
.btn-link {
|
||
color: #667eea;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.btn-link:hover {
|
||
color: #5568d3;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.header h1 {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
.tabs-nav {
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.tab-button {
|
||
padding: 0.75rem 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.method-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.token-detail {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.form-group {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.button-group {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|
||
``` --- ## 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 ```` ```
|