phase 6 เบื้องต้น

web/app/pages/auth/callback.vue

@@ -0,0 +1,53 @@
+<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>