phase 6 เบื้องต้น

web/app/components/AuthGate.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/** ครอบเนื้อหาหน้าที่ต้อง login — ยังไม่พร้อมแสดง spinner, ยังไม่ login แสดงปุ่มเข้าระบบ */
+const { ready, isAuthenticated, login } = useAuth()
+</script>
+
+<template>
+  <div v-if="!ready" class="flex items-center justify-center gap-3 py-16 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" />
+    กำลังตรวจสอบสถานะการเข้าสู่ระบบ…
+  </div>
+
+  <div
+    v-else-if="!isAuthenticated"
+    class="rounded-lg border border-slate-200 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-800"
+  >
+    <h2 class="text-lg font-semibold">ต้องเข้าสู่ระบบก่อนใช้งานหน้านี้</h2>
+    <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
+      ระบบยืนยันตัวตนผ่าน Keycloak (realm <span class="font-mono">word-versioning</span>)
+      — กดปุ่มด้านล่างเพื่อเปิดหน้าเข้าสู่ระบบ
+    </p>
+    <button
+      type="button"
+      class="mt-4 rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700"
+      @click="login()"
+    >
+      เข้าสู่ระบบด้วย Keycloak
+    </button>
+  </div>
+
+  <slot v-else />
+</template>