File size: 2,892 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <template>
<div class="min-h-screen bg-gray-50 px-4 py-10 dark:bg-dark-900">
<div class="mx-auto max-w-2xl">
<div class="card p-6">
<h1 class="text-lg font-semibold text-gray-900 dark:text-white">OAuth Callback</h1>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Copy the <code>code</code> (and <code>state</code> if needed) back to the admin
authorization flow.
</p>
<div class="mt-6 space-y-4">
<div>
<label class="input-label">{{ t('auth.oauth.code') }}</label>
<div class="flex gap-2">
<input class="input flex-1 font-mono text-sm" :value="code" readonly />
<button class="btn btn-secondary" type="button" :disabled="!code" @click="copy(code)">
Copy
</button>
</div>
</div>
<div>
<label class="input-label">{{ t('auth.oauth.state') }}</label>
<div class="flex gap-2">
<input class="input flex-1 font-mono text-sm" :value="state" readonly />
<button
class="btn btn-secondary"
type="button"
:disabled="!state"
@click="copy(state)"
>
Copy
</button>
</div>
</div>
<div>
<label class="input-label">{{ t('auth.oauth.fullUrl') }}</label>
<div class="flex gap-2">
<input class="input flex-1 font-mono text-xs" :value="fullUrl" readonly />
<button
class="btn btn-secondary"
type="button"
:disabled="!fullUrl"
@click="copy(fullUrl)"
>
Copy
</button>
</div>
</div>
<div
v-if="error"
class="rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
>
<p class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { useClipboard } from '@/composables/useClipboard'
const route = useRoute()
const { t } = useI18n()
const { copyToClipboard } = useClipboard()
const code = computed(() => (route.query.code as string) || '')
const state = computed(() => (route.query.state as string) || '')
const error = computed(
() => (route.query.error as string) || (route.query.error_description as string) || ''
)
const fullUrl = computed(() => {
if (typeof window === 'undefined') return ''
return window.location.href
})
const copy = (value: string) => {
if (!value) return
copyToClipboard(value, 'Copied')
}
</script>
|