Initial commit from monorepo
This commit is contained in:
Ruslan Bakiev
275
app/pages/clientarea/profile/debug-tokens.vue
Normal file
275
app/pages/clientarea/profile/debug-tokens.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<Section variant="plain">
|
||||
<Stack gap="6">
|
||||
<PageHeader
|
||||
title="Debug Tokens"
|
||||
:actions="[
|
||||
{ label: 'Back', icon: 'lucide:arrow-left', to: localePath('/clientarea/profile') }
|
||||
]"
|
||||
/>
|
||||
|
||||
<Alert v-if="error" variant="error">
|
||||
<Text>{{ error }}</Text>
|
||||
</Alert>
|
||||
|
||||
<Card padding="lg">
|
||||
<Stack gap="4">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading :level="3">JWT Tokens</Heading>
|
||||
<Button variant="ghost" size="sm" @click="loadTokens" :loading="isLoading">
|
||||
<Icon name="lucide:refresh-ccw" size="16" />
|
||||
<span>Refresh</span>
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<!-- ID Token -->
|
||||
<div class="space-y-2">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading :level="4">ID Token</Heading>
|
||||
<Button v-if="rawTokens.id" variant="ghost" size="sm" @click="copyToken(rawTokens.id)">
|
||||
<Icon name="lucide:copy" size="16" />
|
||||
<span>Copy</span>
|
||||
</Button>
|
||||
</Stack>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Raw JWT:</Text>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="rawTokens.id || '—'"
|
||||
class="input input-bordered input-sm w-full font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Decoded:</Text>
|
||||
<pre class="p-3 rounded-lg bg-base-200 text-xs overflow-x-auto max-h-48">{{ formatJson(decodedTokens.id) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access Token: teams -->
|
||||
<div class="space-y-2">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading :level="4">Access Token: teams.optovia.ru</Heading>
|
||||
<Button v-if="rawTokens.teams" variant="ghost" size="sm" @click="copyToken(rawTokens.teams)">
|
||||
<Icon name="lucide:copy" size="16" />
|
||||
<span>Copy</span>
|
||||
</Button>
|
||||
</Stack>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Raw JWT:</Text>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="rawTokens.teams || '—'"
|
||||
class="input input-bordered input-sm w-full font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Decoded:</Text>
|
||||
<pre class="p-3 rounded-lg bg-base-200 text-xs overflow-x-auto max-h-48">{{ formatJson(decodedTokens.teams) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access Token: exchange -->
|
||||
<div class="space-y-2">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading :level="4">Access Token: exchange.optovia.ru</Heading>
|
||||
<Button v-if="rawTokens.exchange" variant="ghost" size="sm" @click="copyToken(rawTokens.exchange)">
|
||||
<Icon name="lucide:copy" size="16" />
|
||||
<span>Copy</span>
|
||||
</Button>
|
||||
</Stack>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Raw JWT:</Text>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="rawTokens.exchange || '—'"
|
||||
class="input input-bordered input-sm w-full font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Decoded:</Text>
|
||||
<pre class="p-3 rounded-lg bg-base-200 text-xs overflow-x-auto max-h-48">{{ formatJson(decodedTokens.exchange) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access Token: orders -->
|
||||
<div class="space-y-2">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading :level="4">Access Token: orders.optovia.ru</Heading>
|
||||
<Button v-if="rawTokens.orders" variant="ghost" size="sm" @click="copyToken(rawTokens.orders)">
|
||||
<Icon name="lucide:copy" size="16" />
|
||||
<span>Copy</span>
|
||||
</Button>
|
||||
</Stack>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Raw JWT:</Text>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="rawTokens.orders || '—'"
|
||||
class="input input-bordered input-sm w-full font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Decoded:</Text>
|
||||
<pre class="p-3 rounded-lg bg-base-200 text-xs overflow-x-auto max-h-48">{{ formatJson(decodedTokens.orders) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access Token: kyc -->
|
||||
<div class="space-y-2">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading :level="4">Access Token: kyc.optovia.ru</Heading>
|
||||
<Button v-if="rawTokens.kyc" variant="ghost" size="sm" @click="copyToken(rawTokens.kyc)">
|
||||
<Icon name="lucide:copy" size="16" />
|
||||
<span>Copy</span>
|
||||
</Button>
|
||||
</Stack>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Raw JWT:</Text>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="rawTokens.kyc || '—'"
|
||||
class="input input-bordered input-sm w-full font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Decoded:</Text>
|
||||
<pre class="p-3 rounded-lg bg-base-200 text-xs overflow-x-auto max-h-48">{{ formatJson(decodedTokens.kyc) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access Token: billing -->
|
||||
<div class="space-y-2">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Heading :level="4">Access Token: billing.optovia.ru</Heading>
|
||||
<Button v-if="rawTokens.billing" variant="ghost" size="sm" @click="copyToken(rawTokens.billing)">
|
||||
<Icon name="lucide:copy" size="16" />
|
||||
<span>Copy</span>
|
||||
</Button>
|
||||
</Stack>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Raw JWT:</Text>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="rawTokens.billing || '—'"
|
||||
class="input input-bordered input-sm w-full font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<Text variant="label" class="text-xs text-base-content/60">Decoded:</Text>
|
||||
<pre class="p-3 rounded-lg bg-base-200 text-xs overflow-x-auto max-h-48">{{ formatJson(decodedTokens.billing) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: ['auth-oidc']
|
||||
})
|
||||
|
||||
const RESOURCES = {
|
||||
teams: 'https://teams.optovia.ru',
|
||||
exchange: 'https://exchange.optovia.ru',
|
||||
orders: 'https://orders.optovia.ru',
|
||||
kyc: 'https://kyc.optovia.ru',
|
||||
billing: 'https://billing.optovia.ru'
|
||||
} as const
|
||||
|
||||
type ResourceKey = keyof typeof RESOURCES
|
||||
|
||||
const localePath = useLocalePath()
|
||||
const auth = useAuth()
|
||||
|
||||
const isLoading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const rawTokens = ref<{ id: string | null } & Record<ResourceKey, string | null>>({
|
||||
id: null,
|
||||
teams: null,
|
||||
exchange: null,
|
||||
orders: null,
|
||||
kyc: null,
|
||||
billing: null
|
||||
})
|
||||
|
||||
const decodedTokens = ref<{ id: unknown } & Record<ResourceKey, unknown>>({
|
||||
id: null,
|
||||
teams: null,
|
||||
exchange: null,
|
||||
orders: null,
|
||||
kyc: null,
|
||||
billing: null
|
||||
})
|
||||
|
||||
function decodeJwt(token?: string | null) {
|
||||
if (!token) return null
|
||||
try {
|
||||
const payload = token.split('.')[1]
|
||||
if (!payload) return null
|
||||
const json = atob(payload.replace(/-/g, '+').replace(/_/g, '/'))
|
||||
return JSON.parse(json)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function formatJson(data: unknown) {
|
||||
if (!data) return '—'
|
||||
return JSON.stringify(data, null, 2)
|
||||
}
|
||||
|
||||
async function copyToken(token: string | null) {
|
||||
if (!token) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(token)
|
||||
} catch (e) {
|
||||
console.error('Failed to copy:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const loadTokens = async () => {
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = ''
|
||||
|
||||
// Get ID token
|
||||
try {
|
||||
const idToken = await auth.getIdToken()
|
||||
rawTokens.value.id = idToken || null
|
||||
decodedTokens.value.id = decodeJwt(idToken)
|
||||
} catch (e: unknown) {
|
||||
rawTokens.value.id = null
|
||||
decodedTokens.value.id = { error: e instanceof Error ? e.message : 'Failed to get ID token' }
|
||||
}
|
||||
|
||||
// Get access tokens for ALL resources
|
||||
for (const [key, url] of Object.entries(RESOURCES) as [ResourceKey, string][]) {
|
||||
try {
|
||||
const accessToken = await auth.getAccessToken(url)
|
||||
rawTokens.value[key] = accessToken || null
|
||||
decodedTokens.value[key] = decodeJwt(accessToken)
|
||||
} catch (e: unknown) {
|
||||
rawTokens.value[key] = null
|
||||
decodedTokens.value[key] = { error: e instanceof Error ? e.message : 'Failed to get access token' }
|
||||
}
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : 'Error loading tokens'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTokens()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user