phase 6 เบื้องต้น

web/app/components/AlertBox.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/** กล่องข้อความ (error/success/info) ใช้ร่วมทุกหน้า */
+const props = withDefaults(
+  defineProps<{
+    type?: 'error' | 'success' | 'info'
+  }>(),
+  { type: 'info' },
+)
+
+const styles = computed(() => {
+  switch (props.type) {
+    case 'error':
+      return 'border-red-300 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300'
+    case 'success':
+      return 'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300'
+    default:
+      return 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-950 dark:text-sky-300'
+  }
+})
+const icon = computed(() => (props.type === 'error' ? '⚠️' : props.type === 'success' ? '✅' : 'ℹ️'))
+</script>
+
+<template>
+  <div role="alert" class="rounded-md border px-4 py-3 text-sm" :class="styles">
+    <span class="mr-2" aria-hidden="true">{{ icon }}</span>
+    <slot />
+  </div>
+</template>

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>