eCourt-Doc-Edit/web/app/components/AuthGate.vue

<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-muted">
    <span class="spinner" />
    กำลังตรวจสอบสถานะการเข้าสู่ระบบ…
  </div>

  <div v-else-if="!isAuthenticated" class="card mx-auto max-w-md p-8 text-center">
    <h2 class="text-section-title">ต้องเข้าสู่ระบบก่อนใช้งานหน้านี้</h2>
    <p class="mt-2 text-body-lg text-muted">
      ระบบยืนยันตัวตนผ่าน Keycloak (realm <span class="font-mono">word-versioning</span>)
      — กดปุ่มด้านล่างเพื่อเปิดหน้าเข้าสู่ระบบ
    </p>
    <button type="button" class="btn btn-primary mt-6 w-full sm:w-auto" @click="login()">
      เข้าสู่ระบบด้วย Keycloak
    </button>
  </div>

  <slot v-else />
</template>