54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
/** ปลายทางของ OIDC redirect — รับ code+state แลก token แล้วพากลับหน้าที่ login จาก (ทำงานฝั่ง client ทั้งหมด) */
|
||
|
|
const route = useRoute()
|
||
|
|
const { handleCallback, login } = useAuth()
|
||
|
|
|
||
|
|
const message = ref('กำลังตรวจสอบผลการเข้าสู่ระบบ…')
|
||
|
|
const failed = ref(false)
|
||
|
|
const busy = ref(true)
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
const result = await handleCallback(route.query)
|
||
|
|
if (result.ok) {
|
||
|
|
// replace เพื่อเช็ด ?code=...&state=... ออกจาก history
|
||
|
|
await navigateTo(result.returnTo ?? '/', { replace: true })
|
||
|
|
return
|
||
|
|
}
|
||
|
|
failed.value = true
|
||
|
|
busy.value = false
|
||
|
|
message.value = result.error ?? 'เข้าสู่ระบบไม่สำเร็จ'
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<section class="mx-auto max-w-xl space-y-4 py-10 text-center">
|
||
|
|
<template v-if="busy">
|
||
|
|
<div class="flex items-center justify-center gap-3 text-sm text-slate-500 dark:text-slate-400">
|
||
|
|
<span
|
||
|
|
class="h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600 dark:border-slate-600 dark:border-t-slate-300"
|
||
|
|
/>
|
||
|
|
{{ message }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-else>
|
||
|
|
<AlertBox type="error">{{ message }}</AlertBox>
|
||
|
|
<div class="flex justify-center gap-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700"
|
||
|
|
@click="login()"
|
||
|
|
>
|
||
|
|
เข้าสู่ระบบใหม่
|
||
|
|
</button>
|
||
|
|
<NuxtLink
|
||
|
|
to="/"
|
||
|
|
class="rounded-md border border-slate-300 px-4 py-2 text-sm hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-800"
|
||
|
|
>
|
||
|
|
กลับหน้าหลัก
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</section>
|
||
|
|
</template>
|