31 lines
1.5 KiB
Vue
31 lines
1.5 KiB
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-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>
|